create account

streems



advanced mode

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

View this thread on golos.io
View on official site
@sept · (edited)
$992.00
Обзор и конспект первого урока (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 – всему голова!
• Оформляем текст
• Добавляем ссылки и картинки

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

https://s26.postimg.org/wz9u2i2ah/image.jpg

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

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

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

https://s26.postimg.org/d5xq9sowp/image.jpg

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

Версии HTML

https://s26.postimg.org/rqet4mjvd/3_html.jpg

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

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

https://s26.postimg.org/8dnwycu8p/4_html.jpg

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

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

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

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

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

Секция head

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

https://s26.postimg.org/xx4nhqo0p/image.jpg

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

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

https://s26.postimg.org/xo72rtb89/image.jpg

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

https://s26.postimg.org/p7cme0cux/image.jpg

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

https://s26.postimg.org/ebl8inrx5/image.jpg

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

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

Атрибуты

https://s26.postimg.org/5e53z1oux/image.jpg

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

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

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

Заголовки

https://s26.postimg.org/45ltr5mah/image.jpg

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

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

https://s26.postimg.org/ywi3aywwp/image.jpg

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

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

bold, italic, strong, em

https://s26.postimg.org/8gjbp31uh/image.jpg

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

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

https://s26.postimg.org/7nfwnyal5/image.jpg

Тег “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”

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

https://s26.postimg.org/l5mt08mqh/image.jpg

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

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

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

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

https://s26.postimg.org/ecr1hplax/image.jpg

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

Изображения

https://s26.postimg.org/8ed87h2c9/image.jpg

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

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

https://s26.postimg.org/9ys7gq6ft/image.jpg

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

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

https://s26.postimg.org/4tqzz3ti1/image.jpg

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

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

https://s26.postimg.org/6a2ih8wex/image.jpg

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

Домашнее задание

Выполненное домашнее задание


Конспекты и обзор других занятий этого курса:

2-ой урок (HTML)

3-ий урок (CSS)

4-ый урок (CSS)

👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
json_metadata{"tags":["ru--obrazovanie"],"image":["https://s26.postimg.org/wz9u2i2ah/image.jpg","https://s26.postimg.org/d5xq9sowp/image.jpg","https://s26.postimg.org/rqet4mjvd/3_html.jpg","https://s26.postimg.org/8dnwycu8p/4_html.jpg","https://s26.postimg.org/ffqfyan89/5_HTML.jpg","https://s26.postimg.org/q341wcg7t/6_head.jpg","https://s26.postimg.org/xx4nhqo0p/image.jpg","https://s26.postimg.org/xo72rtb89/image.jpg","https://s26.postimg.org/p7cme0cux/image.jpg","https://s26.postimg.org/ebl8inrx5/image.jpg","https://s26.postimg.org/frwr0suu1/image.jpg","https://s26.postimg.org/5e53z1oux/image.jpg","https://s26.postimg.org/45ltr5mah/image.jpg","https://s26.postimg.org/ywi3aywwp/image.jpg","https://s26.postimg.org/8gjbp31uh/image.jpg","https://s26.postimg.org/7nfwnyal5/image.jpg","https://s26.postimg.org/l5mt08mqh/image.jpg","https://s26.postimg.org/ecr1hplax/image.jpg","https://s26.postimg.org/8ed87h2c9/image.jpg","https://s26.postimg.org/9ys7gq6ft/image.jpg","https://s26.postimg.org/4tqzz3ti1/image.jpg","https://s26.postimg.org/6a2ih8wex/image.jpg"],"links":["https://rutracker.org/forum/viewtopic.php?t=5145343","http://fe.new.goit.ua/","https://sept-golos.github.io/task4.html","https://golos.io/ru--obrazovanie/@sept/obzor-i-konspekt-2-go-uroka-html-css-javascript-2015-stan-silnym-junior-frontend-goit","https://golos.io/ru--obrazovanie/@sept/obzor-i-konspekt-3-ego-uroka-kursa-html-css-javascript-2015-stan-silnym-junior-frontend-goit","https://golos.io/ru--obrazovanie/@sept/obzor-i-konspekt-4-ogo-uroka-kursa-html-css-javascript-2015-stan-silnym-junior-frontend-goit"],"app":"golos.io/0.1","format":"markdown"}
last_update2017-09-16 16:32:33
created2017-09-11 22:14:21
active2017-09-16 16:32:33
last_payout2017-09-13 04:45:27
depth0
children2
children_rshares24,580,651,401,859,334,286,073,841
net_rshares929,274,893,529
vote_rshares929,274,893,529
children_abs_rshares929,274,893,529
cashout_time2017-10-13 04:45:27
max_cashout_time2017-09-30 15:55:45
total_vote_weight0
reward_weight10,000
total_payout_value911.854 GBG
curator_payout_value79.576 GBG
author_rewards314,590
net_votes234
root_comment1,665,330
modesecond_payout
max_accepted_payout1,000,000.000 GBG
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
root_title"Обзор и конспект первого урока (HTML) “HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend” GOIT"
total_pending_payout_value0.572 GBG
author_reputation323,534,208,641,559
promoted0.000 GBG
body_length0
reblogged_by[]
author_curate_reward""
vote details (234)

vote your-acct "sept" "1-yi-urok-html-css-javascript-2015-stan-silnym-junior-frontend-goit" 100 true
post_comment your-acct "re-sept-1-yi-urok-html-css-javascript-2015-stan-silnym-junior-frontend-goit-20170926t131026289z" "sept" "1-yi-urok-html-css-javascript-2015-stan-silnym-junior-frontend-goit" "" "your reply.." "{}" true

View on official site
@pavelfyr ·

Спасибо, @sept. Полезный урок.

json_metadata{"tags":["ru--obrazovanie"],"users":["sept"],"app":"golos.io/0.1"}
created2017-09-11 22:18:51
active2017-09-11 22:18:51
last_payout2017-09-13 04:45:27
depth1
children0
children_rshares20
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time2017-10-13 04:45:27
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value0.000 GBG
curator_payout_value0.000 GBG
author_rewards0
net_votes0
root_comment1,665,330
modesecond_payout
max_accepted_payout1,000,000.000 GBG
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
root_title"Обзор и конспект первого урока (HTML) “HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend” GOIT"
total_pending_payout_value0.000 GBG
author_reputation1,871,107,029,698
promoted0.000 GBG
body_length0
reblogged_by[]

vote your-acct "pavelfyr" "re-sept-1-yi-urok-html-css-javascript-2015-stan-silnym-junior-frontend-goit-20170911t221834002z" 100 true
post_comment your-acct "re-pavelfyr-re-sept-1-yi-urok-html-css-javascript-2015-stan-silnym-junior-frontend-goit-20170926t131026293z" "pavelfyr" "re-sept-1-yi-urok-html-css-javascript-2015-stan-silnym-junior-frontend-goit-20170911t221834002z" "" "your reply.." "{}" true

View on official site
@dobryj.kit ·

Ваш пост поддержали следующие Инвесторы Сообщества Добрый кит:
knopki, vlad, spinner, t3ran13, ianboil, strecoza, damm, smotritelmayaka, mir, fetta, kavalsky, oleg257, svetlanaaa, dreamer, dimarss, la-bella-vita, forbon21, shuler, brovaryleaks, vadbars, yurgent71, zlody, volv, vasilisapor2, nefer, alexux, chika25, vict0r, singa, semasping, tnam0rken, karusel1, sharps, exan, yuriks2000, olgabobkovafoto, oksana0407, borisss, lenutsa, aleksandra, vpervye1, rickytrane, kondratij, anatolich, optimist, myhardmoney, prost, talia, manavendra, kertar, dimas102, nerengot, bag, smartell, ssleeperr, shenanigan, abloud, wedge, chimborazo, alexxxx, nerossoul, byurotegov, galinakim, bounty-compaing, vsebudethorosho, chupaaa, izbushka
Поэтому я тоже проголосовал за него!
Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!


Если Вы хотите отказаться от поддержки Доброго Кита, то ответьте на этот комментарий командой !нехочу
created2017-09-12 18:14:57
active2017-09-12 18:14:57
last_payout2017-09-13 04:45:27
depth1
children0
children_rshares20
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time2017-10-13 04:45:27
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value0.000 GBG
curator_payout_value0.000 GBG
author_rewards0
net_votes0
root_comment1,665,330
modesecond_payout
max_accepted_payout1,000,000.000 GBG
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
root_title"Обзор и конспект первого урока (HTML) “HTML/CSS + JavaScript 2015 Стань сильным Junior Frontend” GOIT"
total_pending_payout_value0.000 GBG
author_reputation72,550,174,580,488
promoted0.000 GBG
body_length0
reblogged_by[]

vote your-acct "dobryj.kit" "re-dobryj-kit-1-yi-urok-html-css-javascript-2015-stan-silnym-junior-frontend-goit20170912t140969075z" 100 true
post_comment your-acct "re-dobryj.kit-re-dobryj-kit-1-yi-urok-html-css-javascript-2015-stan-silnym-junior-frontend-goit20170912t140969075z-20170926t131026307z" "dobryj.kit" "re-dobryj-kit-1-yi-urok-html-css-javascript-2015-stan-silnym-junior-frontend-goit20170912t140969075z" "" "your reply.." "{}" true