НЕФТЕЮГАНСКИЙ ИНДУСТРИАЛЬНЫЙ КОЛЛЕДЖ-
филиал государственного образовательного учреждения
высшего профессионального образования
«Югорский государственный университет»
HTML страница состоит из нескольких основных тегов это: Пример: <html> <head> <title> Заголовок </title> <head> <body> Содержимое страницы </body> </html>
Нефтеюганск, 2012
Оглавление
Пояснительная записка 5
Введение 6
HTML редакторы 6
Что такое HTML? 6
Кто создал HTML? 7
При помощи чего создаются HTML-страницы? 7
Визуальные редакторы или WYSIWYG (What You See Is What You Get — Что видишь, то и получаешь) 7
Текстовые HTML-редакторы 7
Урок 1. Как устроен сайт. Делаем первую страницу. 7
Шаг 1. 8
Шаг 2. 8
Шаг 3. 8
Урок 2. Оформляем html-страницу и форматируем текст. 10
Шаг 1. Меняем фон html-страницы и цвет текста 10
Шаг 2. Форматируем текст 11
Урок 3. Располагаем элементы на странице. 14
Шаг 1. 14
Шаг 2. 15
Шаг 3. 16
Шаг 4. 24
Урок 4. Соединяем html-страницы между собой. 24
Шаг 1. 25
Шаг 2. 27
Шаг 3. 29
Урок 5. Структура html документа 29
Заголовок документа - тег HEAD и его элементы 30
Title 30
Base 31
Link 31
Meta 32
Script 33
Тело документа - тег BODY 34
Урок 6. Форматирование текста 37
Теги разделения на абзацы и переноса строки 38
Теги, выделяющие текст курсивом 39
Теги, выделяющие текст полужирным шрифтом 41
Теги, выделяющие текст подчеркиванием 42
Теги, выводящие текст моноширинным шрифтом 44
Теги, выводящие текст в верхнем и нижнем индексах 45
Тег font и его параметры 46
Тег center 47
Совместное использование тегов 48
Урок 7. Форматирование текста (продолжение). 48
Теги, делающие текст заголовками 49
Теги разделения на абзацы и переноса строки 50
Теги, выделяющие текст курсивом 51
Теги, выделяющие текст полужирным шрифтом 53
Теги, выделяющие текст подчеркиванием 54
Теги, выводящие текст моноширинным шрифтом 55
Теги, выводящие текст в верхнем и нижнем индексах 56
Тег font и его параметры 56
Тег center 58
Совместное использование тегов 58
Урок 8. Специальные символы. 59
Урок 9. Ссылки в HTML. 60
Ссылка - тег a 60
Урок 10. Создание списков. 64
Нумерованные списки 64
Маркированные списки 66
Списки определений 68
Вложенные списки 68
Списки списков 69
Урок 11. Работа с изображениями. 73
Размеры изображений 79
Отделение изображения от текста 79
Альтернативный текст 80
Изображение в качестве ссылки 80
Урок 12. Работа с таблицами - тег table. 82
Создаем таблицу 82
Оформляем строки (tr) и ячейки (td) 87
Атрибуты таблиц 91
Атрибуты ячеек 92
Урок 13. Работа с таблицами сложной структуры. 93
Тег colspan - объединение столбцов 94
Вложенные таблицы 98
ТАБЛИЦА ЦВЕТОВ 102
ТАБЛИЦА ОСНОВНЫХ ТЕГОВ ЯЗЫКА HTML. 104
Специальные символы 106
Домашнее задание №1. 107
Домашнее задание №2. 107
Домашнее задание №3. 107
Домашнее задание №4. 108
Домашнее задание №5. 108
Домашнее задание №6. 108
Домашнее задание №7. 108
Домашнее задание №8. 109
Домашнее задание №9. 109
Домашнее задание №10. 109
Домашнее задание №11. 109
Домашнее задание №12. 110
Домашнее задание №13. 110
Домашнее задание №14. 110
Домашнее задание №15. 110
Домашнее задание №16. 111
Домашнее задание №17. 111
Домашнее задание №18. 111
Домашнее задание №19. 112
Домашнее задание №20. 112
Домашнее задание №21. 112
Домашнее задание №22. 113
Домашнее задание №23. 113
Домашнее задание №24. 113
Домашнее задание №25. 113
Литература: 114
Пояснительная записка
Практикум разработан для проведения практических работ на уроках информатики и информационных технологий. Он составлен в помощь организации проведения уроков с целью формирования у студентов навыков самостоятельной работы и работы с текстом.
Практикум по HTML для начинающих, научит вас всем основам этого языка, которые так необходимы при создании своего сайта. Он написан очень простым языком и не требует от обучаемого никаких начальных знаний.
Практические работы составлены достаточно подробно и наглядно, что дает возможность работать с ними как на уроках, используя групповую форму обучения, так самостоятельно.
Практикум содержит:
Урок 1. Как устроен сайт. Делаем первую страницу.
Урок 2. Оформляем html-страницу и форматируем текст.
Урок 3. Располагаем элементы на странице.
Урок 4. Соединяем html-страницы между собой .
Урок 5. Структура html документа .
Урок 6. Форматирование текста.
Урок 7. Форматирование текста (продолжение).
Урок 8. Специальные символы.
Урок 9. Ссылки в HTML.
Урок 10. Создание списков .
Урок 11. Работа с изображениями .
Урок 12. Работа с таблицами - тег table.
Урок 13. Работа с таблицами сложной структуры.
ТАБЛИЦА ЦВЕТОВ.
ТАБЛИЦА ОСНОВНЫХ ТЕГОВ ЯЗЫКА HTML.
Специальные символы.
Домашнее задание №1-25.
Структура рассматриваемых тем одинакова:
Переход от одного шага к другому.
Задания составлены по принципу ”от простого к сложному”.
Практикум позволяет студентам овладеть навыками:
Создание ссылок.
Создание таблиц.
Создание текста.
Создание списков.
Создание параграфов.
Введение html редакторы
Все редакторы делятся на два основных типа, которые несколько различаются, как по функционалу, так и по назначению.
Текстовые HTML-редакторы — очень просты в освоении, по своему внешнему виду напоминают обычные редакторы, типа «Блокнота», «Microsoft Word'а» или «OpenOffice Writer'а». Имеют подсветку синтаксиса, то есть выделяют различными цветами, начертанием и уровнем жирности отдельные типовые участки кода. Благодаря этому большинство ошибок устраняется автором в самом процессе работы с кодом, так как все эти ошибки также определенным образом выделяются.
Создание страниц сайта в текстовых HTML-редакторах происходит полностью вручную, но это вовсе не значит, что код каждой страницы набирается от начала и до конца. Как правило, делается одна или две-три страницы, которые потом используются в качестве шаблона. Зато при этом вебмастер всегда точно знает, для чего у него предназначен тот или иной участок кода HTML.
Визуальные HTML-редакторы (WYSIWYG, What You See Is What You Get — Что видишь, то и получаешь) — по внешнему виду еще больше похожи на редакторы типа «Microsoft Word», но естественно не это главное. В них можно создавать станицы сайта, практически не зная HTML, то есть работа там протекает именно с визуальными формами, а не с тегами. Например, чтобы сделать текст жирным надо просто выделить его и нажать соответствующую кнопку в меню редактора, после этого он сам вставит необходимые теги, а верстальщик увидит на странице уже итоговый результат.
Но у этих редакторов HTML есть два существенных минуса. Во-первых, именно они решают, какие теги будут использованы в том или ином случае, причем это решение далеко не всегда бывает оптимальным или самым верным. Соответственно код получается излишне раздутым и его приходится вручную подчищать. Другими словами без знания языка HTML все-таки не обойтись. А во-вторых, эти редакторы сложнее в освоении, причем именно для новичков. Дело в том, что у них есть масса настроек, которые несведущему человеку будут просто непонятны. Например, вы знаете что такое «якорь» ссылки или «альтернативный текст» изображения? Да, вы конечно можете предполагать что-либо, но знать наверняка, если вы не учили HTML — вряд ли.
Именно поэтому визуальные редакторы больше подходят для профессионалов, которые их успешно используют при создании больших проектов, когда время решает очень многое. А для верстки небольших сайтов или редактирования пары-тройки страниц уже существующего ресурса оптимальней будет задействовать текстовые редакторы. Также именно они будут лучшим выбором для новичков, занимающихся изучением HTML.