Основы языка разметки гипертекста Автор: Русинов А.С.
Оглавление Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8
Урок 1 Введение в HTML, история, работа с текстом
Понятия: HTML, web-сайта HTML (от англ. Hypertext Markup Language «язык разметки гипертекста») - это стандартный язык разметки документов во Всемирной паутине. Все web- страницы создаются при помощи языка HTML (специальных управляющих символов – тегов). файлы с расширением.html или htm Web-сайт состоит из Web-страниц (обычно это файлы с расширением.html или htm), объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. ГЛАВНЫЙ ФАЙЛ НАЗЫВАЕТСЯ index.html или index.htm
Пример структуры сайта Схема 1 2 урок
Достоинства HTML Возможность просмотра на любых ПК, под управлением различных операционных систем (Windows, Linux, Unix, BSD, MacOS, OS/2...) Малый информационный объем
История 1986 г - Standard Generalized Markup Language (SGML), международная организация по стандартизации (ISO) 1991 г – создан HTML (сотрудники Европейского института физики частиц), для Mosaic (22 тега) 1993 г – HTML версия 1.3 (43 тега) 1995 г - HTML версия г - HTML версия 3.0 (таблицы стилей CSS ) 1997 г - HTML версия 4.0 (фреймы, сложные таблицы…) 2005 г – начата разработка версии 5.0 (Консорциумом Всемирной паутины (W3C) )
Виды тегов Парные (c закрытием, контейнер) Текс Не парные (одинарные)
Структура HTML
Мета - теги Помещаются между тегами... Служат для детального описания страницы...
Спецсимволы Иногда возникает необходимость в использовании символа, которого нет на клавиатуре или не воспринемается если мы его напечатаем в документе. МнемокодСимволМнемокодСимвол  [ ]« « " " ® ® & & ° ° < < ± ± > > µ µ ¤ ¤ ¶ ¶ ¦ ¦ · · § § ¹ ¹ © © € ª ª
Форматирование текста ТегОписаниеВид... Заголовок 1 уровня Заголовок1... Заголовок 6 уровняЗаголовок6... Большой... Маленький... Верхний индекс... Нижний индекс... Жирный... Курсив... Подчеркнутый... Перечеркнутый
Форматирование текста. Пример. HTML - код Заголовок Пробный текст Вид на экране Пробный текст
Форматирование текста Размерами и начертаниями шрифта можно управлять также с помощью тега FONT и его атрибутов:... Например: Текст Цвет текста можно задать следующим образом : Текст или Текст
Таблица цветов НазваниеЦветHex aqua #00FFFF black # blue #0000FF fuchsia #FF00FF gray # green # lime #00FF00 maroon # navy # olive # purple # red #FF0000 silver #C0C0C0 teal # white #FFFFFF yellow #FFFF00
Выравнивание текста ТегОписание Текст Добавляет новый параграф, по умолчанию выровненный по левому краю. Переход на новую строку Текст Выравнивание по центру. Текст Выравнивание по левому краю. Текст Выравнивание по правому краю. Текст Выравнивание по ширине.
Сочетания тегов Теги можно комбинировать друг с другом получая нужный результат. Например, напечатать на экране жирным курсивом текст. Очередность сочений не имеет значения. Код HTML: Сочетание тегов Текст
Сочетания тегов Код HTML: Сочетание тегов Текст
Урок 2 Выполните задание 1, 2 в классе.Выполните задание 1, 2 в классе.
Урок 3 Списки и изображения
Списки Нумерованные Маркированные Возможно создавать вложенные списки
Списки Располагается внутри контейнера... (нумерованный список) или... (маркированный список) А каждый элемент определяется тегами …
Маркированный список HTML код: Прикладное ПО: СУБД Текстовые редакторы Графические редакторы Вид на экране Прикладное ПО : СУБД Текстовые редакторы Графические редакторы
Нумерованный список HTML код: Прикладное ПО: Системное ПО Прикладное ПО Системы программирование Вид на экране: Прикладное ПО: 1.Системное ПО 2.Прикладное ПО 3.Системы программирование
Нумерованный список По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации. Значени е TYPE Нумерация AA, B, C.. aa, b, c.. II, II, III.. ii, ii, iii
Нумерованный список HTML-код: элемент 1 элемент 2 элемент 3 элемент 1 элемент 2 элемент 3 Отображение в браузере: 1.элемент 1 2.элемент 2 3.элемент 3 A.элемент 1 B.элемент 2 C.элемент 3
Нумерованный список* При помощи атрибутов START VALUE можно изменить порядок нумерации списка. START - служит для задания начального номера списка, отличного от 1. VALUE - дает возможность назначить произвольный номер любому элементу списка. Пример: HTML-код: элемент 1 элемент 2 элемент 3 Отображение в браузере: 5. элемент 1 9. элемент элемент 3
Вложенный список ПО: Системное ПО Прикладное ПО СУБД Текстовые редакторы Графические редакторы Системы программирование HTML код: Вид на экране
Вставка изображений Для встраивания изображения в документ используется тег, имеющий обязательный параметр src, который определяет адрес файла с картинкой и alt, определяющий альтернативный текст.
Вставка изображений. Форматы. ФорматРасширение Количество оттенков GIF*.gif256 JPEG*.jpg16 млн. PNG*.png281 трлн.
Вставка изображений. Gif * 256 цветов поддерживает загрузку файла с чередованием строк возможен прозрачный фон осуществляет анимацию изображения Используют для рисунков и gif-анимации
Вставка изображений. JPEG * 16 млн. цветов фотографическое качество изображений позволяет задать еще более высокую степень сжатия за счет потери качества Используют для фотографий
Вставка изображений. PNG * 281 трлн. цветов поддерживает загрузку файла с чередованием строк возможен прозрачный фон (с различной степенью прозрачности) помехоустойчивый, осуществляет проверку на ошибки при передаче файлов Используют для фотографий
Вставка изображений. Примеры Изображение risunok.gif находится в той же папке что и html файл Изображение risunok.gif находится в папке katalog по отношению к html файлу Находится на компьютере в папке c:\site\risunok.gif Находится на сайте
Самостоятельная работа Выполните задания 3, 4
Урок 4 Гиперссылки, графическое оформление
Гиперссылка Гиперссылка это связь между веб-страницами или файлами. Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки. Часто гиперссылка указывает на другую веб-страницу, но может также указывать на рисунок, мультимедийный файл, адрес электронной почты или программу. См. схема 1.схема 1.
Гиперссылки. Формат.
Гиперссылки. Примеры. Ссылки с абсолютным адресом Персональная страничка Сылка на файл Ссылки с относительным адресом Персональная страничка Сылка на файл Ссылка на страничку Ссылки на для связи
Гипперссылка в виде изображения Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок. Чтобы убрать рамку, следует у тега установить параметр border="0"
Гиперссылка в пределах страницы* Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга. Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта. HTML - код Наверх страницы В то место, куда надо сделать переход надо вставить:
Графическое оформление Цвет фона веб-страницы задается с использованием параметра bgcolor тега. HTML - код : Цвет можно указывать в шестнадцатеричном значении или по его имени.
Графическое оформление В качестве фона можно использовать любое подходящее для этого изображение. Фон не должен отвлекать внимание от текста, при этом должен хорошо сочетаться с цветовой гаммой веб-страницы и быть маленьким по размеру. Цвет фона веб-страницы задается с использованием атрибута (параметра) background тега. HTML – код: Internet Explorer позволяет сделать фон неподвижным с помощью параметра bgproperties="fixed" тега.
Урок 5 Выполните задание 5, 6
Урок 6 Таблицы
Для создания таблицы служит тэг. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг, для создания ячеек -,.
Таблицы HTML-код: Вид на экране:
Таблицы Для создания заголовка таблицы служит тэг. По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей. HTML-код: Заголовок таблицы 1 2 Вид на экране:
Таблицы Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN. Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево. Атрибут VALIGN выравнивает данные по вертикали. HTML-код: Нижняя ячейка Вид на экране:
Таблицы Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). HTML-код: Ширина 200 пикселей Ширина 60% Вид на экране:
Таблицы При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку. Атрибут COLSPAN тэгов, позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки. Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца. Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
Таблицы HTML-код: Вид на экране:
Урок 7 Выполните задание 7
Урок 8 - зачет Выполните тест