Введение в HTML
Семантика
Блочные теги
Списки
Изображения
Ссылки
← Назад

Введение в HTML. Базовые теги

CSS →

Привет друг! Ты начинаешь свой путь в мире разработки, с чем я тебя и поздравляю! Итак начнём


На первом занятии мы изучим основные понятия, а именно:
1)Базовые понятия из мира веб-разработки.
2)Что такое теги и как их выгуливать..упс, то есть использовать и какие же бывают теги их виды.

1. Тег - это кирпичик, из которых состоит весь HTML-код веб-страницы.
2 Сайт - несколько электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом, который называется доменом.

Мы начали говорить о тегах, это очень важный и нужный элемент, а сейчас рассмотрим, какие же они бывают.

1. <!DOCTYPE html> - говорит браузеру, какой перед ним документ.
2. <html> </> - контейнер, который заключает в себе всё содержимое веб-страницы.
3. </> означает завершение тега, а также что тег парный.
4. <head> </> - раздел, содержащий теги с информацией для браузера и поисковиков
5. <meta> </> - кодировка, информация для поисковика
6. <title> </> - заголовок документа
7. <body> </> - содержимое страницы, отображаемое в браузере.

Все вышеперечилсленные теги,то есть первые 7 штук, представляют собой “скелет” html-документа, или по простому - пустую, но уже готовую к творчеству html-страницу.

Но давай продолжим. Теперь запомним теги, которые у нас располагаются внутри <body> и будут видимы на странице:

1. <h1> </>...<h6> </> - заголовки и подзаголовки от первого до шестого уровня
2. <p> </> - абзац, если хочешь написать какой-то текст, то используй его :)
3. <br> - перенос строки
4. <img src="адрес картинки"> - добавление картинки

Что-то мы с тобой заболтались… Пора перейти к практике и создать свой первый сайт. Наконец-то!

Для разработки мы будем использовать редактор кода, который называется Brackets, скачай его и установи - это абсолютно бесплатно.

Теперь тебе необходимо создать новый документ, давай разберемся, как это сделать по шагам:

1) Открой Brackets (нажми на слово,чтобы открыть оффициальный сайт и скачать).
2) Нажми сочетание клавиш Ctrl+N (оно создаст новый документ).
3) Теперь нажми Ctrl+S (это сохранение файла).
4) Открылось окно, видишь? Тебе нужно выбрать, куда сохранить файл и обязательно дать ему название: index.html (проверь внимательно, именно такое название, иначе далее ничего работать не будет)
5) Всё. Нет, правда, это всё - твой файлик создан и готов к работе.

Вот мы и подобрались к самому вкусному, тому, а как же создать свою первую страничку, для этого тебе потребуется напечатать вот этот код в твоём только что созданном документе.



Теперь сохрани свой документ, для этого нажми сочетание клавиш Ctrl+S.

Уф… устал? Но ведь нужно проверить, что всё работает. Для этого открой папку, в которую ты сохранил свой файл, и сделай по нему двойной клик, если всё верно - то у тебя откроется браузер, в котором ты и увидишь результат своих трудов!

Поздравляю, ты это сделал и ты большой молодец! До встречи на следующем уроке.

Семантика



А сейчас внимательно изучи эту презентацию


Блочные теги



И ещё одна презентация :)


Списки



HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:

Маркированный список — <ul> — каждый элемент списка <li> отмечается маркером

Код:
<ul>
   <li>Microsoft</li>
   <li>Google</li>
   <li>Apple</li>
   <li>IBM</li>
</ul>

Результат:

Нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой

Код:
<ol>
   <li>Microsoft</li>
   <li>Google</li>
   <li>Apple</li>
   <li>IBM</li>
</ol>  
Результат:

  1. Microsoft
  2. Google
  3. Apple
  4. IBM

Список определений — <dl> — состоит из пар термин <dt> — <dd> определение

Код:

<dl>
  <dt>Режиссер:</dt>
    <dd>Петр Точилин</dd>
  <dt>В ролях:</dt>
    <dd>Андрей Булашков</dd>
    <dd>Алексей Гаврилов</dd>
    <dd>Виталий Гогунский</dd>
    <dd>Мария Кожевникова</dd>
<</dl>

Результат:

Режиссер:
Петр Точилин
В ролях:
Андрей Булашков
Алексей Гаврилов
Виталий Гогунский
Мария Кожевникова

Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.

Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:

Код:
    <ul>
        <li>Пункт 1.</li>
        <li>Пункт 2.
            <ul>
                <li>Подпункт 2.1.</li>
                <li>Подпункт 2.2.     
                    <ul>
                        <li>Подпункт 2.2.1.</li>
                        <li>Подпункт 2.2.2.</li>
                    </ul>
                </li>          
                <li>Подпункт 2.3.</li>
            </ul>
        </li>
        <li>Пункт 3.</li>
    </ul>
    
Результат:





Изображения



HTML-изображения добавляются на веб-страницы с помощью тега <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

Элемент <img> представляет изображение. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <p> или <div>.
Тег <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению:

Код:
    <img src="images/chat1.png">
    
Результат:






Также можно вставить адрес изображения из интернета

Код:
    <img src="https://i.artfile.ru/3000x2000_844381_%5Bwww.ArtFile.ru%5D.jpg" class="beau"/>
    
Результат:






Ссылки



HTML-ссылки создаются с помощью элемента <a>. Ссылки представляют собой связь между двумя ресурсами, одним из которых является текущий документ.
Гиперссылки создаются с помощью парного тега <a></a>. Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид. Обязательным параметром тега <a> является атрибут href, который задает URl-адрес веб-страницы.

Код:
<a href="ссылка на сайт">указатель ссылки</a>
    
Результат:



указатель ссылки(нажми сюда)


Якоря, или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега <a> с разницей в том, что атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес. Перед именем указателя всегда ставится знак #.

Код:
<h1>Времена года</h1>
<h2>Оглавление</h2>
<a href="#p1">Лето</a> <!--создаём якорь, указав #id элемента-->
<a href="#p2">Осень</a>
<a href="#p3">Зима</a>
<a href="#p4">Весна</a>
<p id="p1">...</p> <!--добавляем соответствующий id элементу-->
<p id="p2">...</p>
<p id="p3">...</p>
<p id="p4">.../p>
    

Результат:

Времена года



Оглавление







ЛетоЛетоЛетоЛетоЛетоЛетоЛетоЛетоЛетоЛетоЛетоЛетоЛето



















ОсеньОсеньОсеньОсеньОсеньОсеньОсеньОсеньОсеньОсень



















ЗимаЗимаЗимаЗимаЗимаЗимаЗимаЗимаЗимаЗимаЗимаЗима



















ВеснаВеснаВеснаВеснаВеснаВеснаВеснаВеснаВеснаВесна



























Чтобы сделать кликабельное изображение, необходимо поместить элемент <img> внутрь тега <a>. Чтобы ссылка открывалась в другом окне, нужно добавить атрибут target="_blank" для ссылки.

Код:

<a href="https://ru.wikipedia.org/wiki/Кошка" target="_blank">
   <img src="https://img3.goodfon.ru/original/2560x1600/b/4b/cat-kot-ryzhiy.jpg" >
</a>
    

Результат: