Обзор и конспект первого урока (HTML) “HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend” GOIT

Это обзор и конспект по курсу HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend продолжительностью 110 часов на русском языке (24,1 Гб). (по ссылке нужно переходить со включенным VPN).

Сайт авторов курса

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

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

Пройденные темы в уроке:

Из чего обычно состоит веб страница
Первая веб страница в интернете
Версии HTML
Из чего состоит HTML
Простейшая веб страница
Секция head
Вложение тегов друг в друга
Комментарии внутри тегов, не отображающиеся в браузере
Атрибуты
Стандарты записи в html
Заголовки
Перенос строки
bold, italic, strong, em
Ссылки на другие страницы
Ссылки на текущую страницу
Ссылка и скроллинг на нужное место
Изображения
Что если указывать и не указывать размер изобрбажения

План занятия :

• Структура курса и правила
• Технологии
• HTML – краткая история и развитие
• HTML файл, tags, attributes
•"head" – всему голова!
• Оформляем текст
• Добавляем ссылки и картинки

Из чего обычно состоит веб страница

Основные технологии применяемые во фронтэнде это: HTML, CSS, JavaScript
HTML – это то что создаёт структуру страницы, структуру контента который есть на странице.
CSS – это то что делает HTML красивым и смотрибельным, позволяет задавать странице различные стили.
JavaScript – позволяет сделать страницу интерактивной.

Первая веб страница в интернете

Первая веб страница была сделана в 1991 году и выглядела так:

Эта страница представляла из себя голый HTML, и вся интерактивность которая была на тот момент – гиперссылки.

Версии HTML

По мере развития HTML появилась необходимость создавать стандартизированные спецификации, иначе бы каждый браузер начал писать свой HTML. Первой спецификации у HTML не было, поэтому его назвали HTML 0.9. С каждой новой спецификацией добавлялись новые теги, новая функциональность и т.д. В 1997 году стало понятно что всё оформление нужно убирать из HTML, начиная с этого времени стал активно развиваться CSS. Начиная с HTML 4.1 стало понятно что HTML это то что про разметку, где заголовок, где абзацы, где список. А CSS это оформление. В 2014 году появился HTML 5, но готовой, законченной спецификации по нему в 2014, 2015 году еще не было, т.к. её стали делать модульно, после того как какой-либо модуль был готов, то браузер мог её имплементировать.

Из чего состоит HTML

Для того чтобы разметить какой-либо текст нужны HTML теги, их так же называют: HTML ноды, HTML элементы. Всегда есть открывающий тег без «/», и закрывающий тег с «/». По краям тег помечается скобками <>. До названия тега, между “<” скобкой и названием пробелы недопустимы это будет ошибка. После названия тега открывающего тега (без “/”) между последним символом названия и скобкой “>” может быть сколько угодно пробелов. В закрывающемся теге (с “/”) пробелы недопустимы.

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

Для того чтобы создавать HTML код никакие специальные программы не нужны, достаточно обычного блокнота где можно писать текст, но в специальных программах, например «webstorm» писать HTML код гораздо удобнее.

Простейшая веб страница

<!DOCTYPE html> - объявление, какого типа документ сейчас присутствует, в данном случае это HTML 5
<html></html> - обозначение того что дальше идёт html документ.
<body> - тело документа, всё что видно в окне странице является его содержимым
Содержание страницы
</body>
<h1></h1> - заголовок верхнего уровня, он самый-самый большой, внутри можем написать какой-нибудь текст.
<p></p> - абцаз

Секция head

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

Вложение тегов друг в друга

Теги могут вкладываться друг в друга, но они не должны перекрывать друг друга. Пример правильного написания тегов:

Пример не правильного вложения тегов:

Теги похожи на коробки, контент всегда должен находиться внутри коробки и не пересекать её границы:

Комментарии внутри тегов, не отображающиеся в браузере

“” – закрывает его. Всё что будет написано между этими символами не будет отображаться в браузере, а будет видно только в редакторе и блокноте. 
<hr/> - горизонтальная черта, является самозакрывающимся тегом, самозакрывающийся т.к. не может содержать внутри себя контент.

Атрибуты

После объявления начала тега “<h2” идет атрибут “title” (заголовок) где задано содержание “GO Frontend”
Атрибуты позволяют задавать дополнительную информацию к HTML тегам.
В данном случае при наведении вышкой на “GOFE” появляется надпись заданная атрибутом “title” “ GO Frontend ”.
Атрибутов в одном теге может быть много в одном теге, чтобы добавить дополнительный атрибут, необходимо поставить пробел после ковычек последнего значения атрибута и той же схеме добавить еще один атрибут.

Стандарты записи в html

html позволяет писать названия тегов и атрибутов в любом регистре, как большими, так и маленькими буквами. Но со временем стало принято писать теги – маленьким буквами, названия атрибутов – маленькими буквами и значения атрибутов – в ковычках “”.
html позволяет писать кавычки как двойные “, так и ординарные ‘ но ведущий курса настоятельно рекомендует использовать в html только двойные кавычки, т.к. ординарные кавычки используются в JavaScript и когда будет совместно использоваться html и JS, то ориентироваться в проекте будет намного проще.

Заголовки

Различных видов заголовков может быть шесть штук. h1 – самый большой заголовок, h6 – самый маленький заголовок.

Перенос строки

Если в этом коде убрать тег “br”, то несмотря на то что код написан в две строки, в браузере он отобразится в одну строку.
Самозакрывающийся тег “br” переносит текст стоящий после него на новую строчку.

Если между словами написать два или больше пробелов, то в браузере отобразится только один пробел, все остальные будут проигнорированы.

bold, italic, strong, em

“b” – выделяет текст жирным шрифтом, старый тег который больше ничего не умеет
“i” – выделяет текст курсивом, старый тег который больше ничего не умеет
“strong” – выделяет текст жирным шрифтом, а так же можно выделить этот фрагмент как угодно с помощью CSS
“em” – выделяет текст курсивом, а так же можно выделить этот фрагмент как угодно с помощью CSS

Ссылки на другие страницы

Тег “a” - применяется для вставки ссылок
Ссылки бывают абсолютными и относительными.
Абсолютная ссылка – ссылка которая начинается с протокола передачи данных (“http”)
Все ссылки которые добавляются без протокола передачи данных будут относительными.

К примеру сейчас мы находимся в файле “index.html” который находится в какой-то папке и вызываем файл “photo.html”

<a href=”photo.html”>Photo</a> - В этой же папке где находится “index.html” будет искаться “photo.html”

“../” – подняться из текущей папки вверх на один уровень
<a href=”../news/news.html>News</a>” – подняться из текущей папки на один уровень вверх, затем открыть папку “news”, и в ней открыть “news.html”

Ссылки на текущую страницу

Чтобы задать переход на нужный элемент, нужно указать на него ссылку с помощью “#” и написать нужный элемент с атрибутом “id”

<a href=”#about”>About</a> - браузер будет искать на текущей странице элемент с id=”about”

id=”about” может быть только один на странице

Ссылка и скроллинг на нужное место

Если на указанной странице не окажется блока с id=”news”, то откроется эта страница и браузер никуда не будет скролить, он останется на верху.

Изображения

“img” – с помощью этого тега вставляются картинки, он самозакрывающийся, в атрибуте “src=” пишется путь к файлу изображения, по стандартным правилам абсолютных и относительных ссылок.
“alt” – альтернативное воспроизведение контента, обычно используется слабовидящими и слепыми людьми.

Так же в изображениях желательно указывать атрибуты ширины и высоты в пикселях:

“width” - ширина
“height” – высота

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

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

Что если указывать и не указывать размер изобрбажения

С лева изображения у которого указана ширина и высота, с права у которого они не указаны. В первом случае когда изображения ещё не загрузились, браузер заранее размечает отведённое место для изображения и после окончательной загрузки страницы её геометрия не меняется. В случае справа до загрузки изображения браузер не знает размеры изображения и не резервирует для него место, после окончательной загрузки страницы геометрия страницы может существенно изменится, что создаст неудобство для читателя. Желательно всегда указывать размеры изображения.