Стоимость: Бесплатно
Программа курса: 10 дистанционных заданий
Формат обучения: видеоуроки в записи
На кого расчитан курс: Для обучающихся с нуля
Создание какого веб-сайта вы освоите: познакомитесь с основами HTML и CSS
Доступ: Открыт без регистрации
Основы HTML и CSS: Нет
Серия: Разработка самому

Задание 1

Стандартно в курсе предлагается использовать редактор блокнот. Для желающих работать более профессионально рекомендуется самостоятельно скачать notepad++

1. Создайте на своём обычном ноутбуке на рабочем столе папку easycode (название может быть любым, но в следующих инструкциях я буду использовать это).

2. Откройте папку easycode. Вверху откройте вкладку Вид и отметьте галочкой Расширения имён файлов. Показано на первом скриншоте.

3. Создайте в папке easycode текстовый документ (блокнот) с именем page.html. Как должно получиться - показано на втором скриншоте.

До встречи завтра в следующем задании!

NJoqGiAGnQga7 ttF5BCY

sfwR9Uufyz oMSZ0U0wa0

Задание 2

1. Откройте папку easycode и уберите настройку, которую сделали в прошлый раз, чтобы она вам не мешала при работе с другими файлами. Вкладка Вид - снять галочку Расширения имён файлов

2. Откройте файл page с помощью блокнота. Здесь и будем создавать нашу простейшую веб-страницу.

3. В открывшемся файле пропишите следующий код - на картинке ниже. Лучше, если вы будете набирать все теги вручную. Так нарабатывается практика. Но можете и скопировать отсюда https://jsfiddle.net/b1xh4mse/

4. Сохраните и закройте файл page. Теперь кликните правой клавишей по файлу и выберите Открыть с помощью - далее нужно выбрать ваш браузер. Вы увидите простейшую, созданную вами, веб-страницу.

А я пока расскажу о тегах.

<!DOCTYPE> - сообщает всему миру тип этого документа

Далее все теги, как вы видите, парные. Имеют открывающий и закрывающий тег.

<html></html>
Оборачивает веб-страницу

<head></head>
Содержит важные элементы, такие как ссылки на таблицы стилей и скрипты, мета-теги. В нашем простом случае он содержит только title, т.е. заголовок страницы.

<title></title>
Заголовок страницы во вкладке браузера. Если вы уже открыли наш файл page при помощи браузера, то увидели свой заголовок во вкладке.

<body></body>
Тело веб-страницы с множеством других вложенных тегов. Пока мы вложили только тег p.

<p></p>
paragraph - это абзац. Т.е. между этими тегами размещается текст абзаца.

V dnEESceSW0wuPn1jhT9

Задание 3

Теги h1-h6 указывают на то, что содержимое этих тегов является заголовком. Тег h1 считается самым важным, а h6 самым менее важным.

<h1>Я самый важный заголовок</h1>
<h2>Я тоже важный, но уже не такой, как h1</h2>
<h3>Я на третьем месте по важности</h3>
и так далее до h6

Тег h1 имеет самый большой вес на странице для SEO. Туда должны входить ключевые слова, по которым вы продвигаете страницу. На странице должен быть только 1 заголовок в теге h1.

Содержимое тегов h1-h6 должно выделяться на странице также в порядке убывания важности. Давайте протестируем это на примере.

1. Откройте файл page.html в папке easycode с помощью блокнота.

2. Пропишите внутри тега body следующее:

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

Кстати, h - это первая буква от heading, что переводится, как заголовок.
Сохраните и закройте файл.

3. Теперь кликните правой клавишей по файлу page и выберите Открыть с помощью - далее нужно выбрать ваш браузер. Вы увидите ваши 6 заголовков.

HztST4BEVRexG9Hq03OCS

Задание 4

Сегодня рассмотрим таблицы.
📰
На таблицах сайты верстались в эпоху кнопочных сотовых телефонов. Таблицы применяются и сейчас, но уже не являются основой структуры сайта. Почему?
📺
Когда не было смартфонов и планшетов, ширина экрана была только одна. Сайту не нужно было подстраиваться под разные экраны. Был только компьютер.
📱
Сейчас сайт просматривается пользователями на множестве устройств, которые имеют разную ширину, и сайт должен под эту ширину подстроиться. Таблица мешает этой подстройке.
📅
В таблице есть строки и ячейки. Одна ячейка не может при сворачивании экрана вдруг перескочить в другую строку, она остается в своей строке. Поэтому для маленьких экранов таблица окажется слишком широкой. В таком случае появится горизонтальная прокрутка. Сайт будет крайне неудобным для просмотра на мобильных.
⛵
Сейчас сайты верстаются не на таблицах, а на дивах (тег div). Дивы более гибкие, чем неповоротливая таблица. Однако, таблицы часто используются в наполнении. Как выглядит таблица в коде - знать обязательно.
👨‍💻
Давайте перейдём непосредственно к тому, как выглядит таблица на 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) - данные таблицы, т.е. ячейка

=====

1. Посмотрите и скопируйте код по ссылке https://jsfiddle.net/248gupzh/

2. Откройте файл page.html блокнотом

3. Вставьте скопированный код перед закрытием тега body. Закрывающий тег body выглядит так </body>

Сохраните и закройте файл.

4. Теперь кликните правой клавишей по файлу page и выберите Открыть с помощью - далее нужно выбрать ваш браузер. Вы увидите свою таблицу.

Странная? 😁 Ничего страшного, сейчас мы сделаем ей ширину 100% и границу, будет больше похожа на таблицу.

5. Снова открываем файл блокнотом. Теперь уже ничего не копируете - пишите руками. Найдите тег <table> и добавьте в него style="width: 100%;" border="1"

Получится так: <table style="width: 100%;" border="1">

6. Снова сохраните файл и откройте его с помощью браузера. Теперь наша таблица стала похожа на таблицу!

К таблице можно применять различное оформление. Но об этом как-нибудь в другой раз. Всё таки эта серия заданий именно про простейшую веб-страницу.

Задание 5

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

QW30tj7XRLoBuaqCe0sBh

Списки бывают нумерованные и маркированные.

Нумерованный:
⃣
⃣
⃣

Маркированный:
✅
✅
✅

Нумерованный список, т.е. упорядоченный по-английски ordered list.
Маркированный, т.е. не упорядоченный по-английски unordered list.

Соответственно:
тег нумерованного списка <ol></ol>
тег маркированного списка <ul></ul>

В каждом списке есть элементы списка. Элемент списка - list item.
Тег элемента списка <li></li>

Задание:
1. Откройте файл page.html блокнотом и удалите теги и содержимое заголовков и таблицы, которые писали в прошлых заданиях.

Очень, кстати, полезный навык - удалять ненужные объекты из кода. Понадобится, когда вы будете уникализировать шаблон под запрос клиента.

2. Между тегами <body></body> сейчас будем размещать списки.
Напишите:
<ol>
<li>первый</li>
<li>второй</li>
<li>третий</li>
</ol>
<ul>
<li>первый</li>
<li>второй</li>
<li>третий</li>
</ul>

Можно посмотреть код здесь https://jsfiddle.net/p7x3Lvuc/ и скопировать его оттуда, но лучше пишите руками.

3. Сохраните и закройте файл page.html. Теперь откройте его с помощью браузера, и вы увидите два списка - нумерованный и маркированный.

Задание 6

Сегодня задание лёгкое, всего 2 простых тега.

Эти теги одиночные, они не имеют пары, как теги, которые мы изучали ранее. Ранее теги были такие - открывающий и закрывающий. Например, <body></body>. Сегодня не так:

Тег <br/> - это перенос текста на новую строку. С английского break - разрыв.

Тег <hr/> - это горизонтальная линия. С английского horizontal - горизонтальный.

Можете даже не делать практическое задание. Всё и так легко запомнить. Но если всё таки хотите потренироваться, то:

1. Откройте файл page.html с помощью блокнота и сотрите списки, которые делали в прошлом уроке.

2. Напишите внутри тегов <body></body> следующее:

Это первая строка<br/>Это вторая строка<hr/>Это третья строка

3. Сохраните и закройте файл. А теперь откройте его с помощью браузера, и вы увидите результат.

Задание 7

Теги сегодня следующие:


<i>тут текст превращается в курсив</i>
italic - курсив

<em>тут текст превращается в курсив</em>
emphasized - выделенный

Результат у <i> и <em> получается одинаковый - курсив, но они не совсем одинаковы. <i> - просто превращает текст в курсив, а <em> превращает в курсив и указывает браузеру, что это важный отрывок текста.


<b>тут текст превращается в жирный</b>
bold - жирный

<strong>тут текст превращается в жирный</strong>
strong - сильный

Результат у <b> и <strong> получается одинаковый - жирный текст, но они не совсем одинаковы. <b> - просто превращает текст в жирный, а <strong> превращает в жирный и указывает браузеру, что это важный отрывок текста.


1. Откройте файл page.html блокнотом и напишите внутри <body></body>:

это обычный текст
<br/>
<i>тут текст превращается в курсив</i>
<br/>
<em>тут текст превращается в курсив</em>
<br/>
<b>тут текст превращается в жирный</b>
<br/>
<strong>тут текст превращается в жирный</strong>

2. Сохраните файл и откройте его снова, но с помощью браузера и вы увидите результат.

Задание 8

Сегодня вставляем в нашу простейшую веб-страницу 2 картинки.

1. В папке easycode создайте папку images и положите туда картинки с именами image1, image2. Картинки, скорее всего, у вас будут в формате jpg. См. видео.

2. В файле page.html (открыв его блокнотом) пропишите:

<img src="/images/image1.jpg" alt="тукан">
<img src="/images/image2.jpg" alt="орел">

alt - это альтернативный текст для картинки

3. Сохраните файл и откройте его с помощью браузера.

Задание 9

Делаем ссылку.

С прошлого урока у нас остался файл page. Сделайте в той же папке его копию и назовите файл page2. Позаботьтесь о том, чтобы в этих двух файлах между тегами <body></body> было разное содержимое. Это на самостоятельную работу.

Теперь ставим ссылку.

1. Откройте файл page блокнотом и пропишите

<p><a href="/page2.html">Ссылка на вторую веб-страницу</a></p>

Сохраните и закройте

2. Откройте файл page2 блокнотом и пропишите

<p><a href="/page.html">Ссылка на первую веб-страницу</a></p>

Сохраните и закройте

3. Теперь откройте любую страницу браузером и кликните по ссылке.

Тег <a> - anchor, т.е. якорь (ссылка).

Атрибут href - это hypertext reference, т.е. гипертекстовая ссылка.

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

Задание 10

Это последнее задание по простым тегам HTML.

Сегодня <div> и <span>

<div> - это блочный элемент. С английского division - отдел, раздел, часть. Предназначен для выделения фрагмента (блока) с целью изменения стиля.

<span> - это строчный элемент. С английского span - диапазон. Предназначен для выделения фрагмента (текста внутри строки) с целью изменения стиля.

Подготовьте эти элементы. Скоро начнём пробовать на них CSS.

1. В файле page напишите внутри <body></body>:

<div>Это большой блок</div>
<p>Это какой-то <span>очень важный</span> текст.</p>

2. Просто сохраните.