Презентация по информатике на тему Разработка Web-сайтов с использованием языка разметки гипертекста HTML
HTML8 класс
Создание первой страницы htmlОткрываем notepad++Файл -> Сохранить как… (File ->Save as…)Имя файла – index.html (выбираем тип файла Hyper Text Markup Language)
Структура html-страницы<html><head><title>Название страницы</title></head><body>Содержимое страницы</body></html>
Атрибуты тега <body>alink - устанавливает цвет активной ссылки.background - задает фоновый рисунок на веб-странице.bgcolor - цвет фона веб-страницы.bgproperties - определяет, прокручивать фон совместно с текстом или нет.bottommargin - отступ от нижнего края окна браузера до контента.leftmargin - отступ по горизонтали от левого края окна браузера до контента.link - цвет ссылок на веб-странице.rightmargin - отступ от правого края окна браузера до контента.scroll - устанавливает, отображать полосы прокрутки или нет.text - цвет текста в документе.topmargin - отступ от верхнего края окна браузера до контента.vlink - цвет посещенных ссылок.
Теги выравнивания<LEFT> и </LEFT> - выравнивание по левому полю<RIGHT> и </RIGHT> - выравнивание по правому полю<CENTER> и </CENTER> - выравнивание по центру
Теги для выделения текста и шрифта<B> и </B> - теги для выделения текста (слов, букв) жирным шрифтом.<I> и </I> - теги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.<U> и </U> - текст, расположенный между двумя этими тегами, будет подчеркнут.<BLINK> и </BLINK> - текст, расположенный между двумя этими тегами, будет мигать.<FONT SIZE=n>и</FONT> - теги для изменения размера шрифта (где n - размер шрифта в пикселях px).<FONT COLOR="#FFFFFF"> и </FONT> - теги для изменения цвета шрифта
Вставка изображенийВставка изображения в документ <img src="images/A4.jpg" width=300 height=500/>Вставка изображения на фон<BODY BACKGROUND="Диск:\путь\имя.jpg">
Таблица<table> <tr> <td>№</td> <td>Имя</td> <td >Фамилия</td> </tr> <tr> <td>1</td> <td>Иван</td> <td>Иванов</td> </tr> <tr> <td>2</td> <td>Петр</td> <td>Петров</td> </tr> <tr> <td>3</td> <td>Александр</td> <td>Александров</td> </tr> </table>
Параметры тега <TABLE>BGCOLOR - цвет фонаBORDER - ширина бордюраWIDHT - ширина таблицы
СсылкиПростая сылка на документ <a href="docs/uszn.docx">заявление в УСЗН Ленинского района </a>Ссылка с отображением файла на сайте<iframe src= «адрес" style="width:500px; height:440px;" frameborder="0"></iframe>Гиперсвязь с адресом электронной почты <ADDRESS><A HREF="mailto:nick@mail.ru">nick@mail.ru</ADDRESS>
Списки<OL><LI>Системные программы<LI>Прикладные программы<LI>Системы программирования</OL>
Формы<FORM>Пожалуйста, введите ваше имя <BR><INPUT TYPE=“text” NAME = “name” SIZE = 30> <BR>E-mail: <BR><INPUT TYPE = “text” NAME = “e-mail” SIZE = 30><BR></form>
Бегущая строка<MARQUEE>ТЕКСТ</MARQUEE> - тег, создающий бегущую строку<MARQUEE DIRECTION="left">TEKCT</MARQUEE> - Если бегущую строку нужно направить справа налево<MARQUEE DIRECTION="right">TEKCT</MARQUEE> - движение слева направо.
Ресурсы для самостоятельной работы при выполнении проектаhttp://htmlbook.ru/ - справочник по HTMLhttp://html-color-codes.info/Cvetovye-kody-HTML/ - цветовая диаграмма в RGB