Слайд 1Работа с HTML тегами и атрибутами
Сейчас мы с вами займемся изучением
основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.
Слайд 2Блок . Структура простейшей страницы
Страница сайта - это обычный текстовый файл с
расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег , который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег для служебного содержимого страницы и тег - для основного текста, который и виден на экране браузера.
Слайд 3Блок . Структура простейшей страницы
В служебное содержимое, которое располагается внутри тега , входит
много различных вещей, но пока нам нужны только две из них. Это тег
, задающий название страницы, которое будет видно во вкладке браузера, и тег , который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8).
Кроме того, перед тегом обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - .
Слайд 4Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример
в браузере - скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим - посмотрите видео под примером):
Это заголовок тайтл Это основное содержимое страницы.
Слайд 5Блок . Абзацы
Одним из основных элементов страницы являются абзацы. Их можно сравнить с
абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).
Слайд 6Блок . Заголовки h1, h2, h3, h4, h5, h6
Кроме абзацев важное значение
на странице имеют заголовки. Их также можно сравнить с заголовками из книги - каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.
Заголовки создаются с помощью тегов
, , , , , . Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 - название блоков страницы, в h3 - название подблоков и так далее.
Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже).
Слайд 7Блок . Жирный
Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать
жирным и обычный текст - достаточно взять его в тег . Обратите внимание на то, что тег следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.
Слайд 8Блок . Курсив
Кроме жирного можно сделать также и курсив с помощью тега :
Это обычный текст,
а это курсивный текст.
Это обычный текст, а это курсивный текст.
Слайд 9Блок . Списки
Наряду с абзацами и заголовками существует еще один важный элемент
страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).
Списки создаются с помощью тега
, внутри которого обязательно должны идти теги - . Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя.
Слайд 10Блок . Списки
Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому,
что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег
, а пункты таких списков также создаются через теги li.
Слайд 12Блок . Картинки
Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта.
Для этого предназначен тег
, имеющий обязательный атрибут src, в котором хранится путь к файлу картинки.
Обратите внимание на то, что тег
не требует закрывающего тега.
Слайд 14Блок . Разрыв строки
Вспомните, что будет, если сделать, к примеру, два абзаца
рядом - в этом случае текст, который лежит в каждом из них, будет начинаться с новой строки.
Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.
Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег
. Учтите, что этот тег особенный и не имеет закрывающего.
Слайд 15Блок . Комментарии HTML
Практически во всех языках программирования есть такое понятие как
"комментарии". Комментарии - это такой текст, который будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы.
Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в исходном коде пометки себе или тому человеку, который будет править ваш код после вас. Во-вторых, с помощью комментариев можно убирать некоторые вещи, которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть. Их можно просто временно закомментировать, а потом откомментировать при необходимости.
Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса - .