Всем привет! Сегодня мы продолжаем базовый курс по html, освоив который, Вы сможете сами создавать сайты с нуля. В предыдущих уроках мы уже изучили базовые теги html, поэтому предлагаю освежить их в памяти. Для этого давайте напишем разметку на примере импровизированного сайта портфолио. Для обучения азам советую поставить Sublime Text, если у кого еще не стоит. Он не перегружен лишним функционалом и легко расширяется за счет плагинов. Для удобства откроем сайдбар (боковая панель). Я создал пустую папку project и переместил ее в наш редактор, она отобразилась в боковой панели.
Создадим новый файл CTRL+N, и сразу же сохраним CTRL+S в нашей папке project под именем index. В целом неважно как его называть, но просто так принято называть главные странички сайтов. В Submlime есть функция вставки специальных шаблонов кода - сниппетов (англ. snippet — отрывок, фрагмент). Для того чтобы получить сниппет скелета html страницы, сначала нужно установить плагин emmnet. Для этого придется немного пошаманить. Если у вас изначально нет вкладки Preferences на панели инструментов, то переходим View -> Show console, в появившейся строке вводим код:
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Жмем Enter и перезапускаем программу. Теперь переходим Preferences -> Package Control и в появившемся окне вводим слово emmet и выбираем самый первый вариант. Проверим заработал ли плагин: набираем в нашем документе index.html восклицательный знак ! и нажимаем Tab, должен появится сниппет html разметки с doctype html5 из первого урока. Вообще плагин emmet сильно облегчает жизнь при создании сайтов, главное конечно уметь с ним обращаться. Если интересна эта тема, то напишите в комментариях, и я сделаю отдельный пост.
Как мы помним, тег <titile> служит для хранения названия нашей странички, и как раз это название видно у нас во вкладке браузера, и оно же выпадает в поисковике. Я назвал нашу страничку "Мое портфолио". Второй момент куда стоит обратить наше внимание это атрибут lang, в сниппете он по умолчанию - en (английский язык), я поменял на ru-RU, чтобы указать язык на котором будет написан текст внутри текущего документа. Второй атрибут, который мы видим сразу под ним - charset, он указывает на кодировку текста в данном документе. Если его неверно указать, то увидим наш сайт в виде иероглифов или знаков вопроса, это значит, что стоит неверная кодировка, по умолчанию сейчас используется UTF-8 (от англ. Unicode Transformation Format, 8-bit — «формат преобразования Юникода, 8-бит» - распространённый стандарт кодирования символов, позволяющий более компактно хранить и передавать символы Юникода). Итак, мы еще не написали ни одного слова на нашем сайте, а уже встретили два атрибута. Так что же такое атрибут и зачем вообще нужны?
Атрибут - это некоторые параметры html тегов, которые позволяют сделать той или иной элемент более уникальным. Т. е. с помощью них можно указать браузеру как он должен формировать этот элемент. Атрибутов для тега можно добавлять неограниченное количество, при этом нужно разделять их пробелами. Порядок атрибутов не важен. Сначала записывается имя атрибута, потом знак равно и в кавычках значение атрибута. Вообще атрибутов существует великое множество и запоминать их все нет смысла, т. к. для этого есть сайты наподобие htmlbook, на которых можно узнать значение любого атрибута. Многие атрибуты остались как артефакты с давних времен, когда веб только развивался. Есть даже такие атрибуты, которые принципиально не поддерживаются современными браузерами. Раньше достаточно большая часть атрибутов была направлена на того, чтобы стилизовать некоторый элемент и придать ему визуальных особенностей, например, цвет, фон и т. д. Сейчас уже поняли что разработку лучше разделить на три независимые части: разметка - html, оформление - CSS, функциональность - javascript. В итоге так получилось, что часть атрибутов стала не нужна. Среди всех атрибутов можно выделить универсальные и специфические (применяются только к определенным тегам). Чаще всего будем иметь дело как раз с универсальными. Допишем html для нашего сайта-портфолио и разберем его уже на следующем уроке. До встречи!
