Приложение к лекции 10. Язык HTML
advertisement
Приложение к лекции 10 Общие понятия об HTML. Основные тэги. Всемирная паутина (World Wide Web — WWW) состоит из множества связанных между собой электронных документов, представляющих кладезь информационных данных, описанных с помощью специальных технологических правил. Эти правила составляются на языке гипертекстовой разметки HTML (HyperText Markup Language). Можно с уверенностью сказать, что сегодня язык разметки HTML является основой всех размещенных в Интернете электронных документов. • <html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> Добро пожаловать! :) </body> </html> Сохранение созданного файла • Файл -> Сохранить Как (File -> Save as) - Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно). - Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save). Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ. Файл - Открыть - кнопка Обзор - Наш документ (index.html) File – Open – Browse – index.html Первый тэг • <html> Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий: </html> Второй тэг <br> (перенос текста на другую строку) не требует закрывающего тэга. <head> </head> - голова документа <body> </body> - тело документа Некоторые сведения о тэгах Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Все тэги, расположенные между <body> </body> непосредственное содержание документа. <тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст) <тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1> Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым – закрываем последним, второй – предпоследним и т.д. Третий тэг: окрас текста цветом <font color="#CC0000"> Добро пожаловать! :) </font> Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам. Пример применения • <html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать! :) </font> </body> </html> Четвёртый тэг – окрас всего текста. Тэг <font></font> - многофункционален. <body text="#336699"> - это значит, что весь текст страницы будет синим. Если цвет текста в <body> не задавать, то по умолчанию он будет черным. Пример применения <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699"> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) </body> </html> Пятый тэг – установка цвета фона Цвет фона устанавливается в уже знакомом нам тэге <body>: <body bgcolor="#000000"> Пример применения <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699” bgcolor="#000000"> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) </body> </html> Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона. <body text="#336699" bgcolor="#000000"> Шестой тэг – выравнивание текста Параграфы вводятся тэгом: <p></p> С помощью параграфов мы можем центрировать текст: <p align="center">текст</p> С помощью параграфов мы можем выровнять текст по левому краю: <p align="left">текст</p> По правому краю документа: <p align="right">текст</p> По обоим краям документа: <p align="justify">текст</p> Пример применения <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <p align="center"> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) </p> </body> </html> Аналог тэга <p></p> <div align="center"> текст </div> <div align="left"> текст </div> <div align="right"> текст </div> <div align="justify"> текст </div> Пример использования <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> Здравствуйте, это моя первая страница. <br> <font color="#CC0000"> Добро пожаловать!</font> :) </div> <p align="justify"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появться еще один виртуальный друг? :) </p> </body> </html> Седьмой тэг – размер шрифта Существуют шесть уровней заголовков: <H1> текст </H1> <H2> текст </H2> <H3> текст </H3> <H4> текст </H4> <H5> текст </H5> <H6> текст </H6> Пример использования <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </div> <p align="justify"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :) </p> </body> </html> Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта: <font size="+4"> текст </font> <font size="+3"> текст </font> <font size="+2"> текст </font> <font size="+1"> текст </font> <font size="+0"> текст </font> <font size="-1"> текст </font> <font size="-2"> текст </font> Пример использования <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </div> <p align="justify"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size="+1"> еще один виртуальный друг? :)</font> </p> </body> </html> Восьмой тэг – установка стиля текста <b> Полужирный текст </b> <i> Наклонный текст (курсив) </i> <tt> моноширинный шрифт </tt> <pre> текст (куча пробелов) текст текст (куча пробелов) текст текст (куча пробелов) текст </pre> К одному фрагменту текста может применяться сразу несколько тэгов: <tt><b><i> текст </i></b></tt> Подчеркнутый текст вводится при помощи тэга <u>: <u> Подчеркнутый текст </u> Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет: <strike> Перечеркнутый </strike> <s> Перечеркнутый </s> Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста: <small> Малый </small> Нормальный текст <big> Большой </big> Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub – нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:). Верхний индекс <sup> sup </sup> Нижний индекс <sub> sub </sub> Девятый тэг – запись наименования шрифта <font face="arial"> текст (шрифт Arial)</font> • Times; • Times New Roman; • Arial; • Helvetica; • Courier; • Verdana; • Tahoma; • Cosmic Sans; • Garamond Десятый тэг – вставка графического объекта <img src="my.jpg"> Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой: <img src="../my.jpg"> Если картинка лежит на другом сайте, то путь прописывается полностью: <img src="http://www.homepage.ru/my/my.jpg"> Пример использования <html> <head> <title>Мой первый шаг </title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </div> <p align="justify"> <img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :)</b> </p> </body> </html>
