Презентация. Основы языка разметки гипертекста HTML. Часть 2.
Основы языка гипертекстовой разметки документовHTML (Форматирование текста, оформление страницы)Автор: Пилишкина Надежда Васильевна
HTML(Hyper Text Markup Language) «Язык гипертекстовой разметки» «Многомерный» текстовый документ, в котором установлены смысловые связи между его различными фрагментамиГипертекст-Web-страница - Документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера. Эта разметка служит для задания формы представления информации, содержащейся в документе.Браузер – Программа просмотра HTML – документов, отображает их в виде Web –страницы, содержание страницы представляется на экране в том виде , которое задаётся тэгами.
Парный тэг (Контейнер) < … > форматируемый </… > текстовый фрагмент открывающий тэг закрывающий тэгПараметры форматирования определяются атрибутами тегов:<тэг атрибут=“значение”>форматируемый текстовый фрагмент </тэг>ТэгиОдиночный тэг (Команда) < … > Код Web-страницы состоит из особых слов – тегов, заключенных в угловые скобки <>. В обычный текстовый документ вставляются управляющие команды (тэги), определяющие вид Web- страницы при её просмотре в браузере (форматирование абзацев, вид шрифта, ссылки на внешние файлы, другие web-страницы или части той же web-страницы)
fill.onfill.on
Структура Web - страницы {5940675A-B579-460E-94D1-54222C63F5DA}<html> </html> начало и конец страницы<head> </head> описание страницы, информация, предназначенная для поисковых машин<title> </title> имя, оглавление страницы, всегда помещается внутри <head> <title> </title></head> <body> </body> содержание страницы, информация, которая будет отображаться в окне браузера«Голова» Web- страницы«Тело» Web- страницы <html> <head> <title>Имя страницы</title> </head> <body> </body></html>
Файл –> Сохранить как …Простейшая Web - страница БлокнотБраузерPrimer1.html
Для того, чтобы задать Цвет необходимо указать его название или 16-ричный код в виде RRGGBB (#FFFFFF – белый, #000000 - чёрный).Цвет на Web - странице
{5940675A-B579-460E-94D1-54222C63F5DA}Фоновое изображение<body BACKGROUND=имя файла>…</body> Цвет фона<body BGCOLOR=цвет> … </body> (<body BGCOLOR=“#FF0000”> … </body> )Цвет текста<body TEXT=цвет> … </body> Цвет ссылки<body LINK=цвет> … </body> Цвет пройденной ссылки<body VLINK=цвет> … </body> Цвет активной ссылки<body ALINK=цвет> … </body> Ширина полей Web-страницы слева и справа<body leftmargin=значение в пикселях> </body> Ширина полей Web-страницы сверху и снизу<body topmargin=значение в пикселях> </body> Атрибуты тэга <Body>
Фон Web - страницы <body background=1.jpg><body bgcolor=pink>
Оформление заголовкаЗаголовки: <hN> текст заголовка </hN>, N от 6 до 1<h1>Заголовок первого уровня</h1><h2>Заголовок второго уровня</h2><h3>Заголовок третьего уровня</h3><h4>Заголовок четвёртого уровня</h4><h5>Заголовок пятого уровня</h5><h6>Заголовок шестого уровня</h6>Атрибут заголовка - выравнивание align=значение (left, center, right, justify)<hN align=“center”>заголовок выровнен по центру</hN>
Горизонтальная линия на Web-страницеТэг <h> - выпуклая (объёмная) горизонтальная линия.Тэг не требует закрывающего тэга.<hr noshade> -линия без тени, <hr color=цвет><hr size=толщина><hr width=ширина в пикселях или %><h1 align=center>Заголовок1 </h1><hr> <h2 align=center>Заголовок2 </h2><hr color=red> <h3 align=center>Заголовок3 </h3><hr color=#FF0000 size=8 width=100>
Оформление абзаца<P> текст абзаца </P> <P align=“…”>абзац с выравниванием</P>Перед абзацем автоматически добавляется небольшой отступ<P align=“left”> абзац с выравниванием по левому краю</P><P align=“center”> абзац с выравниванием по центру</P><P align=“right”>абзац с выравниванием по правому краю</P><P align=“justify”> абзац с выравниванием по ширине</P>
Форматирование шрифта{5940675A-B579-460E-94D1-54222C63F5DA}<B> полужирное начертание</B> <i> курсивное начертание</i> <B> <i>полужирный курсив</i> </B> <U> подчёркнутый текст</U> <SUB> верхний индекс</SUB> <SUP> нижний индекс</SUP> <tt> пишущая машинка</tt> <i> курсивное начертание</i> <DEL>Зачеркнутый текст</DEL><Big> увеличение обычного размера шрифта на одну единицу</Big> <Small> уменьшение обычного размера шрифта на одну единицу</Small>
Форматирование шрифтаСтрока 1Строка 2 <br> Строка 3 Строка 4<br>Строка 5<Pre> Раз ступенька Два ступенька Будет Л е с е н к а </Pre><BR> перевод на новую строку<Pre> Этот текст будет выглядеть так как он набран</Pre>
Форматирование шрифта<Font> управление фрагментом текста</Font>Атрибуты шрифта: Face (гарнитура),Size (размер 1…7 или +2, -1 и т.д.),Color (цвет)<Font Face=Arial Size=6 Color=red> фрагмент1</Font><Font Face=Courier Size=+2 Color=#FF0000> фрагмент2 </Font>Courier Arial