Занятие 3. HTML, теги
I. HTML – это язык разметки страницы сайта
HTML – это язык разметки страницы сайта: что, где и каким образом должно отображаться. Посмотрим на страницу Яндекса: 
Можно выделить верхнюю строку: «Сделать стартовой» прижата к левому бортику, «Настройка,..» прижата к правому бортику.
Далее идут новости слева поцентру, справа – реклама.
Далее блок Яндекс: меню основных сервисов яндекса и поле для ввода слов по которым яндекс проведет поиск и выдаст результаты.
Ниже реклама.
Еще ниже просматривается таблица в 3 колонки с погодой, пробками,..
HTML отвечает за размещение этих элементов на экране нужным образом, задает шрифт, размер и т.д.
II. Основные теги
Блоковые теги (можно задавать ширину, высоту, окантовку, …)
<h1>Самый крупный заголовок по размеру </h1>
<h2> крупный заголовок по размеру </h2>
..
<h6> самый мелкий заголовок по размеру </h6>
<p>Абзац, параграф </p>
<div>блок элементов </div>
<hr> - линия
<br> - переход на новую строку
<table>.. </table>
Строковые теги (невозможно задать произвольные высоту, ширину,..):
<span>текст </span>
<b> текст жирным шрифтом </b>
<i> текст курсивом </i>
<big> текст более крупно</big>
<small> текст мелко</small>
<s> перечеркнутый текст</s>
<u> подчеркнутый текст </u>
<sub> нижний индекс</sub> H<sub>2</sub>O à H2O
<sup> верхний индекс</sup> 3<sup>2</sup>=9 à 32=9
<q> цитата в кавычках и курсивом</q> à “ цитат а в кавычках и курсивом ы ”
<pre>
Текст с отображением всех пробелов, перевод строк,
..
моноширинный шрифт
</pre>
Прочие теги:
<a href=”e1.ru” target=”_blank”>ссылка на сайт e1.ru </a>
Если target=”_blank”, то сайт e1.ru вызывается в в новом окне (вкладке).
Если атрибут target отсутствует или имеет значение target=“_self”, то при клике по этой ссылке происходит переход на сайт e1.ru в текущем окне браузера.
<img src=”image/apple.jpg” alt=”этот текст отображается при невозможности отобразить картинку” height=”120” width=”50”> - загружается картинка apple.jpg из папки image. Можно задать полный адрес для загрузки с чужого сайта. Размеры (ширину и высоту) картинки желательно указывать. Если нужно изменить размеры картинки при отображении, то размеры необходимо изменять пропорционально от фактического. Например, фактический размер картинки 50х120. Необходимо уменьшить размер при отображении в двое: задаем соответственно - height=”60” width=”25”.
III. Изменить шрифт, размер и цвет текста
<font face=”имена шрифтов” color=”имена или код цвета” size=”размер шрифта, от 1 до 7 (самый большой)”> текст </font>
<font face=”serif,sans-serif,monospace,Arial,Helvetica,Times New Roman,Courier New,Verdana,Geneva” color=”один из red/blue/green/yellow/black/white/grey/.. или #ffffff (белый) #000000 (черный)” size=”3”> текст </font>
Пример вложенности тегов:
<p>
<font..>
<b>текст</b>
</font>
</p>
Здесь первым тегом указан тег <p>. Внутри параграфа указан тег <font> c указанием штрифта, размера и цвета текста. Но для того, чтобы текст сделать жирным используется еще один вложенный тег <b>. Закрывающиеся теги должны следовать в обратном порядке: сначала </b>, потом <font> и в самом конце </p>.
Пример более сложный:
<p>
<font color=”red” size=”5”>а</font><font size=”3”>ракадабра</font>
</p>
à абракадабра – первая буква большого размера и имеет цвет красный, остальные буквы имеет размер меньший и цвет по умолчанию (черный).
IV. Самостоятельная работа
Для удобства отладки небольших фрагментов html-кода удобно использовать сервис:
https://jsfiddle.net/
При наличии выхода в интернет с помощью этого сервиса можно набирать фрагменты кода, смотреть получающиеся результаты, сохранять результаты своей работы (код). Большим плюсом является, что это веб-сервис и отладку можно вести с планшетника или смартфона через браузер под операционной Android или iOs.
Вызовем сервис. Залогинимся с логином - MrLang, пароль - mrlang007.
Если на экране показывается список, ранее сохраненных скриптов, то можно вызвать любой из них для продолжения работы с ним либо перейти в рабочий режим с нуля (кликнуть на логотип сервиса слева сверху).
Если перед вами рабочий режим имеющий:
3 окна для ввода html-кода, CSS-кода, JS-кода. И 4-е окно Result для отображения результатов работы вашего кода.
Найдем кнопки: Run (выполнить код), Save/Edit - сохранить ваш код на сервисе для последующего использования.
Для просмотра всего списка сохраненных скриптов нажмите кнопку с стрелочкой вниз рядом с вашим логином (справа сверху). Выпадет подменю – выберите Dashboard.
Задание 1.В первой строке – укажите фамилию и имя (для удобства поиска своего примера в будущем). Посмотрим как будет выглядеть текст под тегами <H1> текст </H1>, <H2> текст </H2>, … <H6> текст </H6>. Наберите <H1>. Сервис тут же подставит </H1>. Впишите между этими тегами текст «Привет, MrLang ». Выделите данный фрагмент кода, сохраните его в оперативной памяти (CTRL+C). Вставьте этот код 5 раз (CTRL+V). И соответственно измените 1 на 2, 1 на 3,.. После того как вы сформировали теги H1, H2,.. H6 кликните на RUN (слева сверху).В окне Result будет показан результат выполнение тегов H1,.. H6. Если все будет ОК – сохраните результат (SAVE / EDIT).
Задание 2. В первой строке – фамилия, имя (для удобства поиска своего примера в будущем). Напишите немного о себе (где учитесь, что любите и не любите) с использованием тегов <H3>,<P>, <B> и других.
Во втором абзаце –сформируйте произвольный текст (можно вырезать текст в несколько строк с какого-нибудь сайта, например, lenta.ru) и внесите в него «улучшения» с использованием i-, b-, s-, u-, big-, small-, q-тегов. А также с использованием тега font. Сохраните результаты.
Задание 3. Создайте таблицу для отображения текста с различными <font size= (1,3,5,7) и атрибутами <i>,<b>. Используйте в ячейках один и тот же текст.
| Normal | <i> | <b> | |
| Size=1 | MrLang | MrLang | MrLang |
| Size=3 | MrLang | MrLang | MrLang |
| Size=5 | MrLang | MrLang | MrLang |
| Size=7 | MrLang | MrLang | MrLang |
Подсказка: <td><font size=3><i>MrLang</i></font></td>
Задание 4. Сделать таблицу для отображения текста с различными шрифтами и атрибутами <i>, <b>:
| Normal | <i> | <b> | |
| face=”Arial” | MrLang | MrLang | MrLang |
| face=”Times New Roman” | MrLang | MrLang | MrLang |
| face=”monospace” | MrLang | MrLang | MrLang |
| face=”Verdana” | MrLang | MrLang | MrLang |
V. Домашнее задание:
1. Завершить или улучшить задания 1-4. Вырезать код, создать текстовый файл, вставить код, вначале добавить теги <html><body>, а в конец файла добавить </body></html>. Сохранить с расширение «html» у себя на компьютере. Запустить на выполнение в браузере с диска этот файл.
2. Сделайте html-страничку со шпаргалкой для себя. Раздел друзей, родителей,.. (table, имя, телефон, е-майл,..). Список интересных и часто посещаемых сайтов (другая таблица или..). Вставьте картинку, вдохновляющую вас.