Содержание
- 1. Создаем файл HTML с помощью редактора Блокнот или Notepad++
- 2. Создаем структуру простейшей веб-страницы
- 3. Оформляем заголовки на нашей простейшей web-странице
- 4. Создаём простую таблицу внутри нашей HTML страницы
- 5. Делаем нумерованный и маркированный списки в HTML коде
- 6. Горизонтальная линия и перенос строки
- 7. Как оформить текст жирным и курсивом
- 8. Вставляем картинки на нашу простейшую веб-страницу
- 9. Оформляем текст ссылкой на web-странице
- 10. Блочные div и строчные span элементы
Создаем файл HTML с помощью редактора Блокнот или Notepad++
Стандартно в курсе предлагается использовать редактор блокнот. Для желающих работать более профессионально рекомендуется самостоятельно скачать notepad++.
- Создайте на своём обычном ноутбуке на рабочем столе папку easycode (название может быть любым, но в следующих инструкциях я буду использовать это);
- Откройте папку easycode. Вверху откройте вкладку Вид и отметьте галочкой Расширения имён файлов. Показано на первом скриншоте;
- Создайте в папке easycode текстовый документ (блокнот) с именем page.html. Как должно получиться - показано на втором скриншоте.
Создаем структуру простейшей веб-страницы
- Откройте папку easycode и уберите настройку, которую сделали в прошлый раз, чтобы она вам не мешала при работе с другими файлами. Вкладка Вид - снять галочку Расширения имён файлов;
- Откройте файл page с помощью блокнота. Здесь и будем создавать нашу простейшую веб-страницу;
- В открывшейся странице пропишите следующий код - на картинке ниже. Лучше, если вы будете набирать код страницы вручную. Так нарабатывается практика;
- Сохраните и закройте файл page. Теперь кликните правой клавишей по файлу и выберите Открыть с помощью - далее нужно выбрать ваш браузер. Вы увидите простейшую, созданную вами, веб-страницу.
Код html, который нужно написать в блокноте:
А я пока расскажу о html тегах.
<!DOCTYPE> — сообщает всему миру тип этого документа. Далее все теги, как вы видите, парные. Имеют открывающий и закрывающий тег.
<html></html> — оборачивает веб-страницу.
<head></head> — содержит важные элементы, такие как ссылки на таблицы стилей и скрипты, мета-теги. В нашем простом случае он содержит только title, т.е. заголовок страницы.
<title></title> — заголовок страницы во вкладке браузера. Если вы уже открыли наш файл page при помощи браузера, то увидели свой заголовок во вкладке.
<body></body> — тело веб-страницы с множеством других вложенных тегов. Пока мы вложили только тег p.
<p></p> — абзац paragraph. Т.е. между этими тегами размещается текст абзаца.
Оформляем заголовки на нашей простейшей web-странице
Заголовки h1-h6
Указывают на то, что содержимое этих тегов является заголовком. Заголовок h1 считается самым важным, а h6 самым менее важным.
<h1>Я самый важный заголовок</h1>
<h2>Я тоже важный, но уже не такой, как h1</h2>
<h3>Я на третьем месте по важности</h3>
и так далее до h6. Кстати, h - это первая буква от heading, что переводится, как заголовок.
Заголовок h1
Имеет самый большой вес на странице для SEO. Туда должен входить главный ключ кластера, по которому вы продвигаете web-страницу. На странице должен быть только 1 заголовок h1.
Содержимое h1-h6
Должно выделяться на странице также в порядке убывания важности. Давайте протестируем это на примере.
- Откройте файл page.html в папке easycode с помощью блокнота.
- Пропишите внутри тега body следующее:
<h1>Заголовок 1</h1><h2>Заголовок 2</h2><h3>Заголовок 3</h3><h4>Заголовок 4</h4><h5>Заголовок 5</h5><h6>Заголовок 6</h6>. Сохраните и закройте файл.
- Теперь кликните правой клавишей по файлу page и выберите: Открыть с помощью - далее нужно выбрать ваш браузер. Вы увидите ваши 6 заголовков.
Создаём простую таблицу внутри нашей HTML страницы
Рассмотрим таблицы в html
На таблицах сайты верстались в эпоху кнопочных сотовых телефонов. Таблицы применяются и сейчас, но уже не являются основой структуры сайта. Почему? Когда не было смартфонов и планшетов, ширина экрана была только одна. Сайту не нужно было подстраиваться под разные экраны. Был только компьютер.
Сейчас сайт просматривается пользователями на множестве устройств, которые имеют разную ширину, и сайт должен под эту ширину подстроиться. Таблица мешает этой подстройке.
В таблице есть строки и ячейки. Одна ячейка не может при сворачивании экрана вдруг перескочить в другую строку, она остается в своей строке. Поэтому для маленьких экранов таблица окажется слишком широкой. В таком случае появится горизонтальная прокрутка. Сайт будет крайне неудобным для просмотра на мобильных.
Сейчас сайты верстаются не на таблицах, а на дивах (тег div). Дивы более гибкие, чем неповоротливая таблица. Однако, таблицы часто используются в наполнении. Как выглядит таблица в коде - знать обязательно.
Давайте перейдём непосредственно к тому, как выглядит таблица на html. Я буду рассматривать ПРОСТУЮ таблицу. Простая таблица состоит из следующих html тегов:
<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</tbody>
</table>
Что означают эти теги:
table (table) - таблица
tbody (table body) - тело таблицы
tr (table row) - ряд таблицы, т.е. строка таблицы
td (table data) - данные таблицы, т.е. ячейка
- Посмотрите и скопируйте код выше.
- Откройте файл page.html блокнотом
- Вставьте скопированный код перед закрытием тега body. Закрывающий тег body выглядит так </body>. Сохраните и закройте файл.
- Теперь кликните правой клавишей по файлу page и выберите: Открыть с помощью - далее нужно выбрать ваш браузер. Вы увидите свою таблицу. Странная? Ничего страшного, сейчас мы сделаем ей ширину 100% и границу, будет больше похожа на таблицу.
- Снова открываем html страницу блокнотом. Теперь уже ничего не копируете - пишите руками. Найдите тег <table> и добавьте в него style="width: 100%;" border="1". Получится так: <table style="width: 100%;" border="1">
- Снова сохраните файл и откройте его с помощью браузера. Теперь наша таблица стала похожа на таблицу!
К таблице можно применять различное оформление. Но об этом как-нибудь в другой раз. Всё таки эта серия заданий именно про простейшую веб-страницу.
Делаем нумерованный и маркированный списки в HTML коде
Сегодня рассмотрим списки. Обратите внимание, что списки используются не только для оформления наполнения. Часто меню на сайте представлено списком. Просто к такому списку (меню) применены стили, которые делают список в одну строку и без маркеров. Поэтому знать и сразу видеть в коде теги списков - обязательно.
Списки бывают нумерованные и маркированные
- Нумерованный список, т.е. упорядоченный по-английски ordered list;
- Маркированный, т.е. не упорядоченный по-английски unordered list.
Списки в html
- тег нумерованного списка
<ol></ol>; - тег маркированного списка
<ul></ul>.
Элемент списка - list item
Тег элемента списка <li></li>.
Задание
- Откройте файл page.html блокнотом и удалите теги и содержимое заголовков и таблицы, которые писали в прошлых заданиях. Очень, кстати, полезный навык - удалять ненужные объекты из кода. Понадобится, когда вы будете уникализировать шаблон под запрос клиента.
- Между тегами <body></body> сейчас будем размещать списки. Напишите:
<ol><li>первый</li><li>второй</li><li>третий</li></ol><ul><li>первый</li><li>второй</li><li>третий</li></ul>.
- Сохраните и закройте файл page.html. Теперь откройте его с помощью браузера, и вы увидите два списка - нумерованный и маркированный.
Горизонтальная линия и перенос строки
Сегодня задание лёгкое, всего 2 простых html тега.
Они одиночные и не имеют пары, как теги, которые мы изучали ранее. Ранее теги были такие - открывающий и закрывающий. Например, <body></body>. Сегодня не так:
<br/> - это перенос текста на новую строку. С английского break - разрыв.
<hr/> - это горизонтальная линия. С английского horizontal - горизонтальный.
Можете даже не делать практическое задание. Всё и так легко запомнить. Но если всё таки хотите потренироваться, то:
- Откройте файл page.html с помощью блокнота и сотрите списки, которые делали в прошлом уроке.
- Напишите внутри тегов <body></body> следующее:
Это первая строка<br/>Это вторая строка<hr/>Это третья строка. - Сохраните и закройте html страницу. А теперь откройте его с помощью браузера, и вы увидите результат.
Как оформить текст жирным и курсивом
Теги html сегодня следующие:
<i>тут текст превращается в курсив</i>
italic - курсив
<em>тут текст превращается в курсив</em>
emphasized - выделенный
Результат у <i> и <em> получается одинаковый - курсив, но они не совсем одинаковы. <i> - просто превращает текст в курсив, а <em> превращает в курсив и указывает браузеру, что это важный отрывок текста.
<b>тут текст превращается в жирный</b>
bold - жирный
<strong>тут текст превращается в жирный</strong>
strong - сильный
Результат у <b> и <strong> получается одинаковый - жирный текст, но они не совсем одинаковы. <b> - просто превращает текст в жирный, а <strong> превращает в жирный и указывает браузеру, что это важный отрывок текста.
- Откройте файл page.html блокнотом и напишите внутри <body></body>:
Это обычный текст<br/><i>тут текст превращается в курсив</i><br/><em>тут текст превращается в курсив</em><br/><b>тут текст превращается в жирный</b><br/><strong>тут текст превращается в жирный</strong>.
- Сохраните html-страницу и откройте её снова, но с помощью браузера и вы увидите результат.
Вставляем картинки на нашу простейшую веб-страницу
Сегодня вставляем в нашу простейшую веб-страницу 2 картинки.
- В папке easycode создайте папку images и положите туда картинки с именами image1, image2. Картинки, скорее всего, у вас будут в формате jpg.
См. видео.
- В файле page.html (открыв его блокнотом) пропишите:
<img src="/images/image1.jpg" alt="тукан"><img src="/images/image2.jpg" alt="орел">alt - это альтернативный текст для картинки
- Сохраните html страницу и откройте её с помощью браузера.
Оформляем текст ссылкой на web-странице
Делаем ссылку.
С прошлого урока у нас остался файл page. Сделайте в той же папке его копию и назовите файл page2. Позаботьтесь о том, чтобы у этих двух html страниц между тегами <body></body> было разное содержимое. Это на самостоятельную работу.
<a> - anchor, т.е. якорь (ссылка).
Атрибут href - это hypertext reference, т.е. гипертекстовая ссылка.
- Откройте файл page блокнотом и пропишите
<p><a href="/page2.html">Ссылка на вторую веб-страницу</a></p>. Сохраните и закройте. - Откройте файл page2 блокнотом и пропишите
<p><a href="/page.html">Ссылка на первую веб-страницу</a></p>. Сохраните и закройте. - Теперь откройте любую страницу браузером и кликните по ссылке.
Ну и ссылку мы с вами заключили в тег <p>, чтобы она не встала в один ряд с картинкой из прошлого урока, а была в своем абзаце.
Блочные div и строчные span элементы
Это последнее задание по простым тегам HTML.
Сегодня <div> и <span>
<div> - это блочный элемент. С английского division - отдел, раздел, часть. Div редназначен для выделения фрагмента (блока) с целью изменения стиля.
<span> - это строчный элемент. С английского span - диапазон. Предназначен для выделения фрагмента (текста внутри строки) с целью изменения стиля.
- В файле page напишите внутри <body></body>:
<div>Это большой блок</div><p>Это какой-то <span>очень важный</span> текст.</p>. - Просто сохраните.
Подготовьте эти элементы div и span. Скоро начнём пробовать на них CSS.
На этом мини-курс по созданию web страницы в блокноте окончен. До встречи в следующих уроках!
