Министерство здравоохранения и социального развития Российской Федерации
Государственное бюджетное образовательное учреждение высшего профессионального образования
Первый московский государственный медицинский университет имени и.М.Сеченова
Медико-профилактический факультет
Кафедра медицинской информатики и статистики
Методическое пособие по созданию HTML-странички
(для факультета ВСО )
Москва
2013
Оглавление
Начало работы с HTML 4
Структура HTML-документа 6
Связь между документами <LINK> 7
Раздел BODY 7
Изменение цвета и фона документа 7
Фреймы 10
Нумерованные списки 11
Создание простейших таблиц 13
Таблица тэгов. 15
Начало работы с html
Перед началом работы создадим на вашем компьютере отдельную папку для будущей страницы. Например, создадим на диске D папку Страничка:
D:\Страничка
Cегодня язык разметки HTML является основой всех размещенных в Интернете электронных документов. Так же, как обычный фундамент строящегося дома представляет собой несущую конструкцию, на которой впоследствии возводятся стены. HTML служит простейшим и, по большому счету незаменимым средством создания гипертекстовых документов, которое в совокупности с более гибкими и функциональными интернет-технологиями позволяет получать воистину фантастические результаты. Все это реализуется с помощью простого и доступного, но вместе с тем эффективного языка разметки HTML.
Для верстки HTML документа используется обычный блокнот или Notepad.
Для примера создадим с помощью языка HTML файл в блокноте:
Откроем блокнот – notepad ( пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Это моя первая страница
<br> Добро пожаловать! :)
</body>
</html>
Теперь необходимо сохранить файл с расширением .html . Обратите внимание, что при сохранении файла нет возможности выбора расширения .html . Надо сохранять ваш документ следующим образом:
Файл -> Сохранить Как (File -> Save as)
Дальше вводите имя своего документа, например: index.html (а не просто index) .html приписываем руками, она должна быть обязательно.
В следущей же строке Тип файла нужно выбрать Все файлы.
Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете его сохранять их через Файл -> Сохранить (File -> Save).
Чтобы посмотреть результат работы этой маленькой программы, нужно запустить ее с помощью одного из браузеров: Google Chrome, Internet Explorer, Netscape Navigator, Opera и Mozilla FireFox.
Получаем
Структура html-документа
Для начала следует понять, что HTML не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги).
Пример тэга: <br> (перенос текста на другую строку). Попробуйте вставить еще несколько тэгов <br> в нашем документе перед «добро пожаловать!». Сохраните. Посмотрите в вашем броузере, что получилось.
Итак, все, что находится между < и > - это тэг. Текст, не находящийся между такими скобками < > - весь виден при просмотре в браузере.
Представим примерную структуру документа в виде картинки:
Как мы видим на нашем примере: тэгов много, и они разные :). Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги. Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы.
<html> открывающий тэг;
Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:
</html> закрывающий тэг;
<head> </head> - открывающий и закрывающий тэги голова документа
<body> </body> - открывающий и закрывающий тэги тело документа
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации
Некоторые тэги, вроде <br>, не требуют закрывающего тэга.
Например <title>- заголовок.
Все тэги, расположенные между <body> и </body> - непосредственное содержание документа
<тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).
Обратите внимание:
<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>
Только такая очередность закрывающих тэгов верна: тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д. Т.е. следующая очередность нежелательна и не верна, она может привести к ошибкам на вашей страничке:
<тэг1><тэг2><тэг3> ... </тэг3></тэг1></тэг2>
Так что будьте внимательны, и пишите код своих страничек аккуратно и вдумчиво.
(Таблицу всех тегов и их атрибутов можно Посмотреть здесь)
Связь между документами <LINK>
Часто бывает так, что несколько различных документов структурно или функционально взаимосвязаны между собой. В этом случае используется тег <LINK>, который не является парным, а значит не требует указания закрывающего тега:
<LINK HREF="styles/main.сss" TYPE="text/css" REL="stylesheet">
Приведенный пример показывает отношение между HTML-документом, в разделе HEAD которого указана данная кодовая конструкция, и внешним файлом шаблона стилей main.сss.
Возможные параметры тега <LINK>:
HREF |
Указание ссылки на внешний документ |
TYPE |
Тип внешнего документа |
REL |
Отношение между текущим и внешним документом |
REV |
Отношение между внешним и текущим документом |