create account

streems



advanced mode

Академия: Курс Сodecademy - Learn HTML & CSS - Основы HTML by arey1983

View this thread on golos.io
View on official site
@arey1983 · (edited)
$665.40
Академия: Курс Сodecademy - Learn HTML & CSS - Основы HTML

https://s26.postimg.org/pw3j08yvd/html-css.jpg


 Всем здравствуйте. Я продолжаю принимать участие в проекте "Академия" от @ontofractal. Мною был выбран курс online-образовательного портала Сodecademy - "Learn HTML & CSS".   Курс Сodecademy - "Learn HTML & CSS" состоит из 9 частей. В прошлый раз, немного не разобравшись, я сразу оформил его вторую часть - HTML-контент. В данной статье хочу восполнить пробел и детально разобрать первую часть курса - Основы HTML.


https://s26.postimg.org/4mtoummq1/New-_Mind-_Map_3.jpg


Основы HTML

 В этой части курса будут рассмотрены основные правила и принципы построения правильной структуры веб-страницы.


https://s26.postimg.org/nb4dvyumh/New-_Mind-_Map_6.jpg


Что такое HTML?

HTML (HyperText Markup Language, язык гипертекстовой разметки) - это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице.  Такие элементы называются тегами и необходимы для форматирования текста, который "понимает" браузер.
HTML - не является языком программирования!

`!DOCTYPE html`

 Элемент <!DOCTYPE html> предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях.

 И как раз для того, чтобы браузер не путался согласно какому стандарту отображать веб-страницу, желательно задавать <!DOCTYPE html> в первой строке кода.

`...`

 Элемент <!DOCTYPE html> только сообщает браузеру, что мы планируем использовать HTML, но он фактически не добавляет никакой структуры в наш документ.

 Чтобы начать добавлять структуру и содержимое HTML, нам необходимо сначала добавить открывающие и закрывающие теги <html>...</html>, например:

<!DOCTYPE html>
<html>
...
</html>

 Все, что находится между <html> и </ html> как раз и считается html-кодом.

Анатомия HTML

 Прежде чем двигаться дальше желательно стандартизировать некоторые из использующихся терминов при изучении HTML в данном курсе.


https://s26.postimg.org/3ojas7dl5/Snimok-ekrana.jpg


  1. В HTML символы < и > называются угловыми скобками.
  2. Код, который находится внутри угловых скобок, называется элементом HTML или тегом.
  3. <...> - первый или открывающий тег. Применяется для запуска HTML-элемента.
  4. </...> - второй или закрывающий тег. Применяется для завершения HTML-элемента. У закрывающих тегов есть внутри косая черта /.
 За исключением нескольких, большинство элементов HTML состоят из открывающего и закрывающего тегов.

Голова, тег - ``

 Тег <head> предназначен для хранения других элементов, цель которых - помочь браузеру в работе с данными.

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

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
</html>

Названия страниц, тег - ``

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

<!DOCTYPE html>
<html>
  <head>
    <title>Название веб-страницы</title>
  </head>
</html>

Тело, тег - ``

 Элемент <body> предназначен для хранения контента веб-страницы, отображаемого в окне браузера. Это могут быть изображения, текст, кнопки и многое другое.

<!DOCTYPE html>
<html>
  <head>
    <title>Название веб-страницы</title>
  </head>
  <body>
    ...
  </body>
</html>

 Весь вышеприведенный код называют шаблонным кодом.

 Термин шаблонный код используется для описания базового кода HTML, необходимого для начала создания веб-страницы.

Подводим итоги

 Давайте посмотрим чему мы научились и что нового мы для себя узнали:

  1. <!DOCTYPE html> желательно задавать в первой строке кода.
  2. Элемент <html> будет содержать весь наш HTML-код.
  3. Элемент <head> содержит в себе информацию о веб-странице.
  4. Можно добавить заголовок на свою веб-страницу используя тег <title> внутри элемента <head>.
  5. Код для видимого содержимого HTML помещается внутри элемента <body>.




Свое мнение и личные впечатления

 В целом курс Сodecademy - "Learn HTML & CSS" мне показался довольно информативным и сбалансированным. Материал уроков интересен и излагается в довольно простой форме, что очень удобно для новичка.  Самой же главной фишкой обучения в Сodecademy служит возможность моментальной практики. Прямо в образовательный портал встроена так называемая "песочница", где мы с легкостью можем редактировать наш код и видеть его результат сразу в браузере.




Конспект подготовлен для Академии Голоса @academy.

👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
json_metadata{"tags":["ru--akademiya","ru--obrazovanie","ru--programmirovanie","html","ru--obuchenie"],"users":["ontofractal","academy"],"image":["https://s26.postimg.org/pw3j08yvd/html-css.jpg","https://s26.postimg.org/4mtoummq1/New-_Mind-_Map_3.jpg","https://s26.postimg.org/nb4dvyumh/New-_Mind-_Map_6.jpg","https://s26.postimg.org/3ojas7dl5/Snimok-ekrana.jpg"],"links":["https://golos.io/golos/@academy/novyi-etap-akademii-startoval","https://www.codecademy.com/learn/learn-html-css"],"app":"golos.io/0.1","format":"markdown"}
last_update2017-09-14 07:03:24
created2017-09-13 17:40:45
active2017-09-14 13:42:06
last_payout2017-09-15 18:06:27
depth0
children2
children_rshares241,540,044,983,408,110,532,900
net_rshares10,358,188,230
vote_rshares10,358,188,230
children_abs_rshares10,358,188,230
cashout_time2017-10-15 18:06:27
max_cashout_time2017-09-30 14:41:42
total_vote_weight0
reward_weight10,000
total_payout_value517.392 GBG
curator_payout_value148.002 GBG
author_rewards209,544
net_votes103
root_comment1,690,161
modesecond_payout
max_accepted_payout1,000,000.000 GBG
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
root_title"Академия: Курс Сodecademy - Learn HTML & CSS - Основы HTML"
total_pending_payout_value0.005 GBG
author_reputation9,462,543,380,793
promoted0.000 GBG
body_length0
reblogged_by[]
author_curate_reward""
vote details (103)

vote your-acct "arey1983" "akademiya-kurs-sodecademy-learn-html-and-css-osnovy-html" 100 true
post_comment your-acct "re-arey1983-akademiya-kurs-sodecademy-learn-html-and-css-osnovy-html-20170920t075325573z" "arey1983" "akademiya-kurs-sodecademy-learn-html-and-css-osnovy-html" "" "your reply.." "{}" true

View on official site
@ososov ·

Молодец, так держать

json_metadata{"tags":["ru--akademiya"],"app":"golos.io/0.1"}
created2017-09-14 03:28:06
active2017-09-14 03:28:06
last_payout2017-09-15 18:06:27
depth1
children0
children_rshares20
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time2017-10-15 18:06: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,690,161
modesecond_payout
max_accepted_payout1,000,000.000 GBG
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
root_title"Академия: Курс Сodecademy - Learn HTML & CSS - Основы HTML"
total_pending_payout_value0.000 GBG
author_reputation61,059,223,961
promoted0.000 GBG
body_length0
reblogged_by[]

vote your-acct "ososov" "re-arey1983-akademiya-kurs-sodecademy-learn-html-and-css-osnovy-html-20170914t032811000z" 100 true
post_comment your-acct "re-ososov-re-arey1983-akademiya-kurs-sodecademy-learn-html-and-css-osnovy-html-20170920t075325577z" "ososov" "re-arey1983-akademiya-kurs-sodecademy-learn-html-and-css-osnovy-html-20170914t032811000z" "" "your reply.." "{}" true

View on official site
@dobryj.kit ·

Ваш пост поддержали следующие Инвесторы Сообщества Добрый кит:
knopki, natalia, lumia, harhor, turkish-r, semasping, stranniksenya, galerina, vika-teplo, borisss, tatyanamishenko, dmitrijv, dimas102, smartell, mp42b, alessandarus, bounty-compaing, vsebudethorosho
Поэтому я тоже проголосовал за него!
Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!


Если Вы хотите отказаться от поддержки Доброго Кита, то ответьте на этот комментарий командой !нехочу
created2017-09-14 13:42:06
active2017-09-14 13:42:06
last_payout2017-09-15 18:06:27
depth1
children0
children_rshares20
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time2017-10-15 18:06: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,690,161
modesecond_payout
max_accepted_payout1,000,000.000 GBG
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
root_title"Академия: Курс Сodecademy - Learn HTML & CSS - Основы HTML"
total_pending_payout_value0.000 GBG
author_reputation66,384,894,347,142
promoted0.000 GBG
body_length0
reblogged_by[]

vote your-acct "dobryj.kit" "re-dobryj-kit-akademiya-kurs-sodecademy-learn-html-and-css-osnovy-html20170914t090919320z" 100 true
post_comment your-acct "re-dobryj.kit-re-dobryj-kit-akademiya-kurs-sodecademy-learn-html-and-css-osnovy-html20170914t090919320z-20170920t075325584z" "dobryj.kit" "re-dobryj-kit-akademiya-kurs-sodecademy-learn-html-and-css-osnovy-html20170914t090919320z" "" "your reply.." "{}" true