2. Особенности HTML-документов Web - редакторы Основные тэги HTML - документов Список цветов Форматирование текста Таблицы Web - обозреватели СОДЕРЖАНИЕ Основы форматирования html- документа Основы языка html
3. HTML ( Hyper Text Markup Language , язык разметки гипертекста) это язык Всемирной паутины. форматирование текстовой части осуществляется с помощью команд, задающих стиль шрифта, заголовков и кадров; имеется возможность включения рисунков, диаграмм, анимации, видеоклипов, музыкального и речевого сопровождения, текстовых спецэффектов (бегущая строка), гиперссылок; с помощью команд языка можно создавать таблицы и форматировать текст вручную; возможно включение интерактивных компонентов, таких как заполняемые формы и программы, работа с которыми требует участия самого пользователя. имеется возможность создания карт-изображений, содержащих активные области; эти области являются гиперссылками, указывающими на различные Web-документы. Основные особенности языка HTML:
4. default.htm или index.htm Web-страница – документ, написанный на HTML , формата *. htm или *. html Web-сайт - это набор Web-страниц, подчиненных общей тематике и объединенных в единое целое. http://w w w. good .ru/ good .html http://www. good .ru/ good folder 1 / good folder2/ good page.html http://www. good site.ru
5. Internet Explorer Mozilla Firefo x Opera Safar i Google Chrome Наиболее популярные Web-обозреватели:
6. HTML -редакторы Редакторы тэгов WYSWYG- редакторы Блокнот, WordPad , MSWord и любые другие программы, работающие в текстовом режиме Специальные редакторы документов HTML : MS Front Page, Namo Web-Editor, Macromedia Dreamweaver
7. Особенности HTML-документов < body > = < bODy > = < boDy > = < BodY > HTML-документ не является обычным текстовым документом. От простого текстового файла HTML-документ отличает присутствие кодов разметки, которые называются тегами . Тэги заключаются в угловые скобки < и > , конечный тэг всегда снабжён косой чертой / . HTML- коды не чувствительны к регистру, то есть
8. Основные теги HTML-документов К обязательным относятся теги, указывающие на то, что документ является HTML-документом; теги заголовков; теги, делящие документ на логические части. Тэги бывают начальными (открывающими) конечными (закрывающими, начинаются со знака "/"). <HTML> <HEAD> <FONT > <BODY> </HTML> </HEAD> </FONT> </BODY>
9. Правильный пример самого короткого HTML-документа: <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY> Текст документа </BODY> </HTML>
10. Основы форматирования HTML-документа Текстовые блоки H1,H2,...H6 Используются для создания заголовков текста P Используется для разметки абзацев ADDRESS Оформляет текст как почтовый адрес BLOCKQUOTE Оформляет текст как цитату BR Осуществляет перевод строки HR Вставляет в текст горизонтальную разделительную линию
11. < HTML > < HEAD > < Т I Т L Е> Создание абзаца </Т I Т L Е> </ HEAD > < BODY > Здесь что-то написано. < P > А здесь новый абзац </ P > <P ALIGN="center"> Это центрированный абзац. <BR> Текст располагается в центре окна браузера </P> <P ALIGN="right"> А это абзац, выровненный по правому краю. </P> </ BODY > </ HTML >
12. … Пишите по следующему адресу: <ADDRESS> г. Калуга. ул. Ф. Энгельса, д. 12 , <BR> МОУ СОШ №31 </ADDRESS> Редакция журнала "Домосед" выражает благодарность Сидорову Ивану Петровичу за замечательное стихотворение: <BLOCKQUOTE> Синели красные ромашки, <BR> Желтели в небе облака, <BR> Синицы в теплый край летели, <BR> К истоку двигалась река. <BR> </BLOCKQUOTE> ...
13.
14. RGB -коды: # FFFFFF – белый # FF 0000 – красный #00 FF 00 – зелёный #0000 FF – синий #000000 – чёрный Список цветов символов HTML: aqua - бирюзовый black - чёрный blue - синий gray - серый green - зелёный lime – ярко-зелёный silver – светло-серый teal – ярко-голубой maroon – тёмно-красный white - белый navy – тёмно-синий olive - оливковый purple - фиолетовый red – красный yellow - жёлтый fuchsia – ярко-фиолетовый Дополнительные цвета: brown - коричневый orange - оранжевый cyan – оттенок бирюзового pink – розовый
15. Основы форматирования HTML-документа Форматирование текста BASEFONT Определяет основной шрифт, которым должен отображаться текст документа FONT Позволяет изменять цвет, размер и тип шрифта текста I Выделяет текст курсивом EM Используется для смыслового выделения текста (курсивом) B Выделяет текст жирным шрифтом ST R ONG Усиленное выделение текста (жирным) U Выделяет текст подчеркнутым S Выделяет текст перечеркнутым BIG Отображает текст увеличенным шрифтом (относительно текущего) SMALL Отображает текст уменьшенным шрифтом (относительно текущего) SUP Отображает текст со сдвигом вверх (верхний индекс) SUB Отображает текст со сдвигом вниз (нижний индекс)
16. < BODY > < BASEFONT SIZE ="3"> Текст документа шрифтом 3 размера <FONT SIZE="+1"> Слегка увеличиваем шрифт </FONT> Продолжаем шрифтом 3 размера <FONT SIZE="+2" COLOR="# FF 0000"> Увеличенный красный шрифт </FONT> <FONT SIZE="3" FACE="Courier" COLOR="Magenta"> Моноширинный фиолетовый текст 3 размера </FONT> Смотрите, какие < FONT SIZE =2> разные шрифты < FONT SIZE =3> можно < FONT SIZE =4> использовать в < FONT SIZE =5> Internet Explorer . </BODY>
17. <P> Я <STRONG> сильный </STRONG> , но легкий. </P> <P> <U> Подчеркнутый текст </U> </P> <P> Лена + <S> Вася </S> Коля = Love </P> <P> Текст с <BIG> увеличенным </BIG> словом </P> <P> Небоскребы, небоскребы, а я <SMALL> маленький </SMALL> такой. </P> <P> Microsoft <SUP> TM </SUP> </P> <P> X <SUB> 1 </SUB> = B <SUB> 1 </SUB> + C <SUB> 1 </SUB> </P> < /BODY > < BODY > <P> Текст с <I> курсивом </I> </P> <P> Порой в России встречаются <EM> действительно талантливые </EM> веб-мастера. Но только не друг с другом. </P> <P> Текст с <B> выделенным </B> словом </P>
18.
19. Включение таблиц в HTML -документ Элементы для создания таблиц TABLE Создаёт таблицу CAPTION Задаёт заголовок таблицы TR Создаёт новый ряд ячеек таблицы (строку) TD Создаёт ячейку с данными в текущей строке
20. <TABLE > <TR> <TD> a </TD> <TD> b </TD> <TD> c </TD> </TR> <TR> <TD> A </TD> <TD> B </TD> <TD> C </TD> </TR> </TABLE> <TABLE WIDTH=300 BORDER > <CAPTION ALIGN=top> Заголовок таблицы </CAPTION> <TR> <TD ALIGN=center W IDTH=20%> a </TD> <TD ALIGN=right> b </TD> <TD WIDTH=20%> c </TD> </TR> <TR> <TD BGCOLOR=lightblue> A </TD> <TD BGCOLOR=pink> B </TD> <TD BGCOLOR=lightgreen> C </TD> </TR> </TABLE>
21. Параметры элементов TABLE, TR и TD Параметры элемента TABLE ALIGN Определяет способ горизонтального выравнивания таблицы ( left, right, center, justify) VALIGN Определяет способ вертикального выравнивания таблицы (top, bottom, middle) BORDER Определяет ширину внешней рамки таблицы WIDTH HEIGHT Задают таблицы в пикселях BGCOLOR Определяет цвет фона ячеек таблицы CELLPADDING CELLSPACING Расстояние между
22. Параметры элементов TABLE, TR и TD Параметры элемента TR ALIGN Определяет способ горизонтального выравнивания в ячейках данного ряда ( left, right, center, justify) VALIGN Определяет способ вертикального выравнивания в ячейках данного ряда (top, bottom, middle) BGCOLOR Определяет цвет фона ячеек таблицы
23. Параметры элементов TABLE, TR и TD Параметры элемента TD ALIGN Определяет способ горизонтального выравнивания содержимого ячейки ( left, right, center, justify) VALIGN Определяет способ вертикального выравнивания содержимого ячейки (top, bottom, middle) WIDTH HEIGHT Задают ячейки в пикселях BGCOLOR Определяет цвет фона ячейки C O L SPAN ROWSPAN Определяет количество , на которые простирается ячейка
