- •СодерЖание
- •Создание простейшего html-документа (2 ч)
- •1.1Теоретические сведения
- •1.2Порядок выполнения работы
- •1.3Контрольные вопросы
- •Работа с изображениями и ссылками в html (2 ч)
- •2.1Теоретические сведения
- •2.2Порядок выполнения работы
- •2.3Контрольные вопросы
- •Работа с таблицами и списками в html (2 ч)
- •3.1Теоретические сведения
- •3.2Порядок выполнения работы
- •3.3Контрольные вопросы
- •Работа с формами (2 ч)
- •4.1Теоретические сведения
- •4.2Порядок выполнения работы
- •4.3Контрольные вопросы
- •Работа с таблицами стилей (4 ч)
- •5.1Теоретические сведения
- •5.2Порядок выполнения работы
- •5.3Контрольные вопросы
- •Создание простейшей php-программы (2 ч)
- •6.1Теоретические сведения
- •6.2Порядок выполнения работы
- •6.3Контрольные вопросы
- •Освоение управляющих конструкций php (2 ч)
- •7.1Теоретические сведения
- •7.2Порядок выполнения работы
- •7.3Контрольные вопросы
- •Серверная обработка форм (2 ч)
- •8.1Теоретические сведения
- •8.2Порядок выполнения работы
- •8.3Контрольные вопросы
- •Обработка массивов в php (2 ч)
- •9.1Теоретические сведения
- •9.2Порядок выполнения работы
- •9.3Контрольные вопросы
- •Ознакомление с основными функциями php (2 ч)
- •10.1Теоретические сведения
- •10.2Порядок выполнения работы
- •10.3Контрольные вопросы
- •Работа со строками и регулярными выражениями (2 ч)
- •11.1Теоретические сведения
- •11.2Порядок выполнения работы
- •11.3Контрольные вопросы
- •Работа с файлами (2 ч)
- •12.1Теоретические сведения
- •12.2Порядок выполнения работы
- •12.3Контрольные вопросы
- •Работа с базой данных (6 ч)
- •13.1Теоретические сведения
- •13.2Порядок выполнения работы
- •13.3Контрольные вопросы
- •Литература
Создание простейшего html-документа (2 ч)
Цель: формирование практических умений по созданию простейших HTML-документов.
1.1Теоретические сведения
Для форматирования Web-документов обычно используют язык гипертекстовой разметки HTML (HyperText Markup Language). Web-документ представляет из себя обычный текст (в противоположность двоичным данным), который может быть прочитан человеком. Созданный таким образом,. Web-документ является HTML-документом и имеет расширение .html. Для его просмотра нужно пользоваться браузером (Internet Explorer, Mozilla Firefox, Opera).
Разметка частей HTML-документа представляет собой семантическое выделение структурных блоков текста: заголовков, параграфов и т.д. Разметка осуществляется с помощью специальных маркеров, или тегов(например <b>), которые заключаются в угловые скобки (<>). Тег, имеющий некоторое содержимое (возможно, и другие теги), называется контейнером. В этом случае принято выделять открывающий (начальный) тег и закрывающий (конечный) тег, которые имеют следующий вид:
<тег>... содержимое ... </тег>, т. е. закрывающий тег идентичен открывающему за исключением символа косой черты перед именем тега.
В языке HTML регистр символов не учитывается, но в языке-наследнике XHTML как подмножестве языка XML регистр символов имеет значение. Поэтому для соблюдения обоих языковых стандартов при создании документов рекомендуется использовать строчный регистр.
Итак, простейший HTML-документ будет иметь следующий вид:
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Тэг <html> является корневым контейнером для для всего документа. Он должен включать в себя заголовок (<head>) с названием документа (<title>), а также содержимое (тело) документа (<body>). В тегах тела документа представлено описание содержимого документа. Тег <body> является тегом блочного уровня, который может содержать только блочные элементы. В работе ограничимся следующими блочными элементами: заголовками h1 (h2, h3 ... h6) и p (параграфом). Элемент h1 представляет собой заголовок первого уровня (самый логически важный), который может содержать только текст (и не может другие заголовки или параграфы). С аналогичной целью применяют заголовки следующих уровней (различие между ними лишь семантическое заголовок второго уровня считается менее важным, чем заголовок первого уровня и т.д.).
Тег «Параграф» (<p>) может содержать текст, но не может содержать заголовки или другие параграфы.
Для форматирования отдельных частей текста существуют теги строчного уровня:
<b> bold (делает начертание текста жирным);
<i> italic (делает начертание текста наклонным);
<u> underline (подчёркивает текст);
<em> emphasize (логически выделяет некоторую часть текста);
<strong> ставит сильное логическое ударение по сравнению с <em>;
Использование тегов для визуального форматирования (<b>, <i>, <u>) не приветствуется, т. к. на современном этапе развития Web-программирования для визуального представления информации применяется другая технология CSS. Лучше использовать теги для логического форматирования.
Строчные контейнеры можно вкладывать друг в друга, например:
<p> <i><b> Привет! </b></i></p>
В HTML-документе такая разметка отобразит абзац текста, где слово «Привет» будет одновременно начертано жирным и наклонным шрифтом.
По стандарту HTML все пробельные символы (whitespaces) собственно сам пробел, символ табуляции, символ переноса строки и возврата каретки, сжимаются до величины одного пробела. Если такое форматирование нежелательно, то используют тег <pre> (preformatted text предформатированный текст). Он является контейнером блочного уровня.
Для разделения частей документа горизонтальной линией существует тег без содержимого <hr /> (horizontal rule горизонтальная линейка). Он не может быть вложенным в параграф.