«Язык разметки гипертекста HTML» Учитель информатики Репях Галина Николаевна БОУ г. Омска «СОШ 30»
Что понадобится нам для обучения? Браузер и Блокнот(или аналогичный простой редактор) - вот всё, что вам необходимо для работы
3 термина используемые по ходу обучения Тег – оформленная единица HTML-кода или попросту команда. Например,,,, и так далее. Все тэги имеют одинаковый формат: они начинаются знаком " ". Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в закрывающем имеется слэш "/".
3 термина используемые по ходу обучения Атрибут –это своего рода дополнительная информация. Атрибуты всегда записываются внутри тега, затем следует знак равенства и детали атрибута, заключённые в двойные кавычки.
3 термина используемые по ходу обучения Элемент – понятие, введенное чисто для удобства объяснения. Например, элемент HEAD состоит из двух тегов – открывающего и закрывающего. Таким образом. Элемент – более общее понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние.
Структура web- документа. Вставка комментария.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML, которая обычно выглядит примерно так: В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии Не пытайтесь запомнить эту строчку наизусть, главное - вы должны знать, что она необходима. Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox).
Далее обозначается начало и конец документа тегами и соответственно. Внутри этих тегов должны находиться теги головы ( ) и тела документа( ). Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. А основное содержимое: текст,таблицы,картинки, - находится в теле документа.
и начало и конец документа и теги головы и теги тела
Структура веб-документа
Как вы видите голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот). Сначала закрываем голову документа, и лишь затем открываем тело. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.
Пару слов про голову документа Ну во-первых это название документа - элемент TITLE. У этого элемента обязательный закрывающий тег. Это очень важный элемент. Информация из элемента TITLE показывается в окне браузера(вверху слева), и поэтому это очень важный и информативный элемент для посетителей сайта. Во-вторых это описание страницы сайта META NAME. Первые символов видны при поиске в гугле поэтому оно тоже очень важно
Голова сайта школы 30 сайт школы 30
Вставка комментария: Очень полезным при создании сайтов является вставка комментария. Почему? да потому, что через месяц после создания, вам будет трудновато разобраться что к чему, ведь кода будет очень много. А если вы будете комментировать свои действия - тогда разобраться будет значительно легче! Примеры
Создаем свою первую страничку
ШАГ 1:Создайте на своем компьютере папку с названием вашего будущего сайта ШАГ 2:Зайдите в созданную на предыдущем шаге папку и создайте внутри нее текстовый документ. ШАГ 3:Теперь напишите в Блокноте текст простейшей странички
Текст простейшей странички Это моя первая страничка! Ура!!!! Я создал свою первую страницу на html!!!
ШАГ 4: Теперь сохраните ваш документ как "index.html" (расширение ".html" указывает, что это HTML-документ. ".htm" даст тот же результат. Это не имеет значения). Для этого в меню Файл выберите Сохранить Как
ШАГ 5: Теперь если вы запустите получившийся файл index.htm увидите примерно следующее:
Это моя первая страничка! Ура!!!! Я создал свою первую страницу на html!!!
Для того, чтобы внести изменения в страничку, Вам нужно открыть данный файл через обычный блокнот, внести в него изменения, сохранить их и после этого обновить вашу страничку в браузере.
Работаем с текстом
На этом уроке мы подробнее остановимся на свойствах текста, научимся выделять абзацы, заголовки и т.д.
Основными элементами форматирования текста в html являются: P Используется для разбивания текста на параграфы P - H1,H2,...H6 Применяются для создания заголовков 1,2...6 уровнейH1,H2,...H6 - BR Используетcя для переноса строкиBR - DIV, SPAN Используются для выделения части документа определенным способом.DIVSPAN
Атрибуты: ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: Left по левому краю Center по центру Right по правому краю Justify по ширине. По умолчанию имеет значение left.
P - используется для разметки параграфов в html документах. Этот параграф по центру Этот по левому краю Этот тоже по левому (т.к. по умолчанию) Этот по правому краю В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю
Примечание: следите чтобы содержимое в кавычках было написано без пробелов, т.е. а не иначе не будет работать!
H1,H2,...H6 - Применяются для разбивания текста на смысловые уровни - разделы и подразделы. Существует шесть уровней заголовков, различающихся по величине шрифта. Атрибуты: ALIGN - определяет способ горизонтального выравнивания заголовков. Возможные значения: left, center, right.По умолчанию - left.
Большой заголовок Заголовок поменьше Еще меньше Совсем маленький Малюсенький заголовочек Ну просто лилипутский заголовочек
BR - данный элемент осуществляет перенос строки. Не имеет закрывающего тега. Начинается первая строка теперь идет вторая а вот уже и третья А это параграф и внутри него тоже можно использовать тег переноса строки.Его надо использовать всегда, когда надо перенести строку:)
Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы: - STRONG Используется для выделения текста жирнымSTRONG - EM Используется для выделения текста курсивомEM - U Выделение текста подчеркиваниемU - S Перечеркивание текстаS - SUP Создание верхнего индексаSUP - SUB Создание нижнего индексаSUB - FONT Изменение цвета, типа, размера шрифта - FONT - HR Вставляет в текст горизонтальную разделительную линиюHR
Пример Вниманиe акция! новая цена рублей!
Пример 2 2 = 4 ; 2 3 = 8 ; 2 4 = 16 ;
FONT - Позволяет изменять цвет, размер и тип шрифта текста, находящегося между открывающим и закрывающим тегами.
Атрибуты: SIZE - Определяет размер шрифта. Возможные значение - 1, 2, 3, 4, 5, 6, 7. COLOR - Определяет цвет текста. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. FACE - определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!
Пример Это обычный текст Увеличенный красный шрифт Моноширинный фиолетовый текст 3 размера Если написано SIZE="+2" то это означает увеличить на 2 единицы шрифт по сравнению со стандартным. Обычно стандартный размер шрифта равен 3.
HR- служит для вставки в текст горизонтальной линии. Закрывающего тега нет! Атрибуты: WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – толщина линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание по левому краю документа. right – выравнивание по правому краю документа. center – выравнивание по центру документа (используется по умолчанию). NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной. COLOR – задает цвет линии. Можно использовать либо RGB-значение в шестнадцатеричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.
Пример Текст до линии После линии А вот пример линии толщиной 2px и без флага noshade
Списки - UL Создает неупорядоченный списокUL - OL Создает упорядоченный список OL - LI Создает пункты списка внутри элементов OL или ULLI
UL (Unsorted List) - Создает неупорядоченный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.LI
Пример Первый пункт списка Второй пункт списка Третий пункт списка Четвертый пункт списка
OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.LI
Атрибуты: START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа). Если не указывать, начинается с начала. TYPE – определяет стиль нумерации пунктов списка. Возможные значения: "A" – заглавные буквы A, B, C... "a" – строчные буквы a, b, c... "I" – большие римские числа I, II, III... "i" – маленькие римские числа i, ii, iii... "1" – арабские числа 1, 2, 3...
Пример !-- пример списка с арабскими числами --> Чтобы создать сайт на домашнем компьютере необходимо: Выучить html Выучить css Ознакомиться с php Чтобы создавать сайты быстро желательно: знания программы Adobe Dreamweaver знания программы TOpStylePro Знания Photoshop Чтобы зарабатывать на сайте желательно: наличие хорошей посещаемости наличие цифрового продукта для продажи наличие блоков рекламы Чтобы стать успешным в интернете: писать информацию полезную для людей постоянно пополнять сайт новым содержимым первый пункт придумай сам
LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL или UL.OLUL. Атрибуты: VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
Пример Чтобы создать сайт на домашнем компьютере необходимо: Выучить html Выучить css Ознакомиться с php
html ссылки
Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. текст, при нажатии на который осуществляется переход
Пример Это ссылка на сайт zvirec.com будет выглядеть в браузере: Это ссылка на сайт zvirec.com
Пример Новости, объявления Правила поведения учащихся в школе     План общешкольных дел и мероприятий     Расписание звонков     Здесь Вам помогут!       Куда сообщить о случившемся?
А можно сделать ссылку на почту? Написать письмо в школу 30 В браузере будет выглядеть: Написать письмо в школу 30
Работа с изображениями
Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы
Три типа файлов изображений, которые можно вставить на веб-страницы GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)
Тег для вставки изображения
Пример Поздравляем!!!
Цвет фона и текста
BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. BGCOLOR – определяет цвет фона документа. TEXT – определяет цвет текста в документе. Все они прописываются для элемента BODY. Значения цветов задаются либо RGB- значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
Кодирование цвета в HTML
Пример Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный В этом абзаце текст будет зеленый, потому что мы заключили его в теги font и придали соответсвующий цвет Теперь текст снова будет красный
Пример 2 Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный Теперь тут тоже красное и только эти слова зеленые Тут как вы поняли текст тоже красный
Таблицы в html
Html таблицы - полезная штука. Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом.
Классический пример табличной структуры страницы
Элементы таблицы TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Здесь есть атрибут BORDER который задает толщину рамки таблицы в пикселах. TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен. TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.
Пример ряд 1 ячейка 1 ряд 1 ячейка 2 ряд 2 ячейка 1 ряд 2 ячейка 2
Как можно объединить ячейки COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
Пример 1
Пример 2
Атрибуты CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом. CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html. WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.
Атрибуты ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left. VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы.Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу,и установить посередине). BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
Пример Если картинка меньше чем ячейка, то она будет дублироваться, как показано в примере. Если больше - то будет отображаться та часть которая влезет :).
Средняя общеобразовательная школа 30 города Омска. Добро пожаловать!!!