Работа с HTML тегами и атрибутами

Сейчас мы с вами займемся изучением основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.

Блок . Структура простейшей страницы

Страница сайта - это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> - для основного текста, который и виден на экране браузера.

В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8

Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - <!DOCTYPE html>.

Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере - скопируйте его в текстовый файл с расширением .html и откройте в браузере.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body>
        Это основное содержимое страницы.
    </body>
</html>

 

Ну, а теперь, научившись создавать простейшие страницы, мы перейдем к изучению полезных тегов, которые следует использовать внутри тега <body>. Это будут теги для абзацев, заголовков, списков, ссылок и других полезных вещей. Итак, приступим.

Блок . Абзацы

Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).

Абзац создается с помощью тега <p> таким образом:

<!DOCTYPE html>
<html>
    <head>
        
<meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body>
        <p>
            Это абзац.
        </p>

        <p>
            Это еще один абзац.
        </p>

        <p>
            И еще один абзац.
        </p>
    </body>
</html>

 

Проверьте как будет выглядеть код в браузере.

Блок . Заголовки h1, h2, h3, h4, h5, h6

Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги - каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.

Заголовки создаются с помощью тегов <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 - название блоков страницы, в h3 - название подблоков и так далее.

Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:

<!DOCTYPE html>
<html>
    <head>
        
<meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body>
        <h1>Заголовок h1</h1>
        <h2>Заголовок h2</h2>
        <h3>Заголовок h3</h3>
        <h4>Заголовок h4</h4>
        <h5>Заголовок h5</h5>
        <h6>Заголовок h6</h6>
        <p>Это первый абзац.</p>
        <p>Это второй абзац.</p>
        <p>Это третий абзац.</p>
    </body>
</html>

Проверьте как будет выглядеть код в браузере.

Блок . Жирный

Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст - достаточно взять его в тег <b>. Смотрите пример:

<!DOCTYPE html>
<html>
    <head>

        <meta
charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body>
        <p>

            Это обычный текст, а это <b>жирный</b> текст.
        </p>
    </body>
</html>

Проверьте как будет выглядеть код в браузере.

Обратите внимание на то, что тег <b> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.

Блок . Курсив

Кроме жирного можно сделать также и курсив с помощью тега <i>:

<!DOCTYPE html>
<html>
    <head>

        <meta
charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body>
        <p>

            Это обычный текст, а это <i>курсивный</i> текст.
        </p>
    </body>
</html>

Проверьте как будет выглядеть код в браузере.

Блок . Списки

Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).

Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя. Смотрите пример:

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <bod
y>
        <ul>
            <li>
Первый пункт списка.</li>
            <li>Второй пункт списка.</li>
            <li>Третий пункт списка.</li>
        </ul>
    </body>
</html>

Проверьте как будет выглядеть код в браузере.

Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег <ol>, а пункты таких списков также создаются через теги li.

Давайте сделаем упорядоченный список, используя тег ol:

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <bod
y>
        <ol>
            <li>
Первый пункт списка.</li>
            <li>Второй пункт списка.</li>
            <li>Третий пункт списка.</li>
        </ol>

Проверьте как будет выглядеть код в браузере.

Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место - и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).

Блок . Ссылки

   Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другу. Если бы их не было - интернет был бы просто набором страниц, никак не связанных друг с другом.

   Ссылка создается с помощью тега <a>, при этом у нее должен быть обязательный атрибут href, в котором хранится адрес той страницы, на которую ведет ссылка. Смотрите пример:

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body
>
        
<a href
="http://школаюг.рф">ОЦ "Южный город"</a>

Проверьте как будет выглядеть код в браузере.

Блок . Картинки

   Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег <img>, имеющий обязательный атрибут src, в котором хранится путь к файлу картинки.

Как это работает, посмотрим на следующем примере:

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body
>
        
<img src
="logo.jpg">"
    </body>
</html>

 

Проверьте как будет выглядеть код в браузере.


Обратите внимание на то, что тег
Чтоб изменит размеры картики воспользуйтесь атрибутами: height, width тега img Свойство height="ЧИСЛО" — задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально. Свойство width="ЧИСЛО" — задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960<img> не требует закрывающего тега.

Блок . Ссылки в виде картинок

   Ссылкой может быть не только текст, но и картинка - для этого достаточно тег <img> вложить в тег <a>, как это сделано в следующем примере. Нажмите на картинку - и вы перейдете по ссылке на сайт нашей школы (чтобы потом вернуться назад на книжку - нажмите кнопку "назад" в браузере):

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body
>
        
<a href
="http://школаюг.рф"><img src="logo.jpg"></a>
    </body>
</html>

Проверьте как будет выглядеть код в браузере.


Блок . Разрыв строки


  Вспомните, что будет, если сделать, к примеру, два абзаца рядом - в этом случае текст, который лежит в каждом из них, будет начинаться с новой строки.

Давайте убедимся в этом на следующем примере:

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body>
        <p>
Это первый абзац.</p>

        <p>Это второй абзац.</p>
    </body>
</html>

 

Проверьте как будет выглядеть код в браузере.

   Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.

   Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег <br>. Учтите, что этот тег особенный и не имеет закрывающего.

Давайте посмотрим на его работу на следующем примере:

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body>
        <p>
Это первая строка, </br>
а этоо вторая.</p>
    </body>
</html>

Блок . Комментарии HTML


   Практически во всех языках программирования есть такое понятие как "комментарии". Комментарии - это такой текст, который будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы.

   Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в исходном коде пометки себе или тому человеку, который будет править ваш код после вас. Во-вторых, с помощью комментариев можно убирать некоторые вещи, которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть. Их можно просто временно закомментировать, а потом откомментировать при необходимости.

Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса - <!--, потом текст комментария, а потом два дефиса и уголок - -->. Смотрите пример:

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <title>Это заголовок тайтл</title>
    </head>
    <body>

 

        <!-- 
            Это комментарий HTML -
            на странице сайта он не отображается.
        -->

        Это основное содержимое страницы.


    </body>
</html>

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите – переходите к изучению новой темы.