Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Frontend — Javascript

Знакомство с HTML

https://loftblog.ru/material/html-dlya-nachinayushhix-urok-pervyj/

«Вот мы и встретились. Здравствуй, давно не виделись. Не мог тебя забыть. Как-никак десять лет проработали, много что сделали. Прости, я часто был некорректен. Но старался, чтобы хорошо получилось. А помнишь, как первый раз мучились?…».
Нет, это не строчки из романа о любви. Если бы язык программирования был девушкой, наверное, такой разговор был бы вероятен. А так…
На самом деле это мои взаимоотношения с HTML. Наша первая «встреча» произошла ещё в 2007 году, когда я начал оформлять и публиковать свои (и не только свои) тексты в Сети, потом долгое время работал модератором сайта и контент-менеджером. Естественно, я чаще пользовался WYSIWYG (What You See Is What You Get) редакторами: встроенными, десктопными, онлайновыми. Но иногда приходилось залезать и на «обратную сторону», в код: читать, править, а то и дописывать. Да, не такой уж я и новичок в этом месте, получается.
Конечно, я просмотрю курс по HTML от Loftblog с начала и до конца. Уверен, что найду обязательно что-то новое. Ну и знакомое приятно вспомнить, чего уж там. 😉

Урок 1. Введение
Это действительно для самых маленьких ;). Начинаем с того, что выбираем между двумя действительно хорошими (для HTML) редакторами кода: Notepad++ и Sublime Text 3. Это как у ребёнка спросить: тебе что больше нравится, мороженое или шоколад? Да, и небольшой экскурс в историю возникновения языка присутствует. Надо же, оказывается, пресловутые британские учёные и в этом поучаствовали? о_О!
Очень забавно выглядит реальный скелет html-страницы. Чувство юмора у автора уроков явно присутствует. Мы его, кстати, тут же пересобрали своими руками и немедленно посмотрели на результат в браузере. Получилось — хорошо!

Урок 2. Тэги и атрибуты
Легко пробежались по главным тэгам, освоенным в прошлом уроке. А потом взялись за основные элементы: блочные и строчные. Это действительно магия! Меня всегда удивляло: сколько всего можно сделать с текстом при помощи этих нехитрых, на самом деле, приёмов. Кстати, уже здесь высунули свои «мордочки» незнакомые мне «зверюшки» в виде тэгов <pre>, <big> и <small>. Ни разу не сталкивался до этого, как-то всё было иначе устроено в моих страницах. Вот так и открываешь незнакомое в «знакомом до боли».

Урок 3. Списки
Вот это да! Оказывается, видов списков не два, как все привыкли, а три: кроме маркированного и нумерованного, есть ещё список определений. Причём если первые два вида можно сделать нажатием кнопочек в редакторе, то список определений (который тоже иногда бывает нужен), можно создать только «ручками». Ни в одном редакторе не видел такой кнопки. А Вы тоже думаете, что всё знаете про HTML?

Урок 4. Таблицы
Таблицы — действительно проверенный и надёжный инструмент. Если их использовать по назначению: для отображения табличных данных и создания HTML-шаблонов для писем (да, там я с ними и работаю до сих пор). Я присоединяюсь к автору урока и предостерегаю всех начинающих разработчиков от попытки сверстать сайт таблицами.

Урок 5. Фреймы
Давняя и уже редко используемая технология. Да, посмотрел для общего развития. Будете смотреть или нет — решайте сами.

Урок 6. Ссылки
Пожалуй, да: ссылки — это то, на чём держится весь интернет, своеобразный «краеугольный камень». Хотя хитрого ничего нет: есть абсолютные ссылки, есть относительные. Ну и несколько атрибутов, указывающих, как именно открывается документ или страница, на которую ведёт ссылка. Пользуйтесь на здоровье!

Урок 7. Атрибуты. Часть 1
Пришло время разобраться с атрибутами тэгов: универсальными и специфическими (которые применяются только к определённым тэгам).
Вот мы и дошли до чего-то похожего на практику, не прошло, как говорится, и полгода. При помощи таблиц, контейнеров и списков мы собрали вполне приличную страницу «Сайт-портфолио». Оказывается, html-вёрстка — это просто?!
Заодно познакомились со справочником по тегам и «рыбными местами» интернета. Я вообще про сервисы, где можно найти «рыбу» текстов и даже фото-«рыбу». А Вы про что подумали?

Урок 8. Атрибуты. Часть 2
А дальше пошло всё атрибутнее и атрибутнее. Я не Алиса в Зазеркалье, но и у меня от изумления слегка сводило челюсть на сторону: оказывается, (почти) всё, что я знал об атрибутах html-тэгов, уже не то, что вчерашний, а позавчерашний день.
Здесь, кстати, я не просто понял, а ПОНЯЛ, что добавлять ключевые запросы в атрибуты ссылки на изображение действительно полезно для ранжирования сайтов и их продвижения. Конечно, когда своими руками это сделаешь, тогда быстрее «доходит».
А потом урок дошёл до атрибутов id и class, которые служат для связи между собой конструкций из трёх языков (HTML, CSS, JS) в пределах одной страницы. И вот тут надо быть внимательным: речь идёт о принципиальных вещах. Скажу одно: впервые сам сделал файл стилей и подключил его. Кому как, а для меня — достижение.

Урок 9. Формы. Часть 1
Оказывается, формы своими руками — это тоже несложно. Я сотни раз видел код форм, например, форм подписки. Но впервые увидел форму «как она есть», без скриптов и стилей. Ключевых моментов здесь немного, совсем несложно освоить, особенно если потренироваться. И никаких устарелостей, всё современное, всё работает.

Урок 10. Формы. Часть 2.
Пожалуй, формы — это самое интересное, что можно делать в HTML. Формы могут быть и флажком, и выпадающим списком, и чек-боксом, и вставкой файла, причём всё это реализуется сравнительно небольшим набором тэгов. А ещё к каждой форме можно и нужно добавлять подписи, плюс это даёт возможность (авто)фокуса. В чём фокус? Смотрите видео.

Урок 11. Семантические особенности HTML5
О, а вот тут что-то совсем новенькое. Ни разу не сталкивался в работе и в коде страниц я такие тэги не видел. Принципиально ничего нового. Но смотрится гораздо стройнее, легче, и… вот это вот новое слово… семантичнее! Привет поисковикам, в общем. И жизнь разработчикам тоже сильно облегчает этот новый стандарт. За что благодарим тех, кто его придумал.

Вот в принципе и всё о «скелетных» основах современных сайтов. Да, несмотря на то, что очень много тэгов и атрибутов давно устарели, не используются и даже не поддерживаются, без HTML ничего не работает. Именно на этот «скелет» «навешиваются» новинки семантики, красота стилей и мощь скриптов. Поэтому, дамы и господа, давайте дружно… нет, не просто жить. А изучать HTML, чтобы потом от него двигаться дальше.

Делись:

Оставь комментарий!

Добавить комментарий