Курс HTML/CSS — часть 0. Знакомство.

Занятие 0, вводный курс. HTML, CSS и верстка.

В ходе подготовки установим редактор с подсветкой кода — так будет удобнее, плюс сразу нужно привыкать к хорошему. Также в ходе курса придется познакомиться с тем, что такое HTML, посмотреть справочную документацию, разобраться, из каких частей состоит HTML-документ. В третьей части познакомимся с тем, как применяются стили к отдельным элементам документа, с тем, как подключить внешний CSS-файл. В ходе практического занятия по верстке сверстаем простую страницу с таблией, в которой стиль элементов будет задан при помощи CSS, подключенного как внешний файл.

Итак, начнем.

Подсветка кода — важная часть деятельности программиста или верстальщика, так как помогает визуально отделить части программы или документа при наборе, уберечь от синтаксических ошибок, поправить стилистику. Я бы порекомендовал использовать простой и легкий редактор Atom. Чтобы его установить, идем на официальную страницу, нажимаем большую красную кнопку, общий смысл надписи на которой — Скачать инсталлер. Редактор кроссплатформенный, в чем его очень большой плюс — удобно будет работать и в Windows, и, например, в Ubuntu.

Запускаем скачанный файл, “тихая” установка сама все разложит куда надо — ярлыки, программы, вот это всё. После этого запустится “хакерский” редактор с кучей панелек. Лишние панельки можно пока закрыть, а редактор — свернуть, к нему мы еще вернемся.

Помимо Atom можно порекомендовать Notepad++ — мощный инструмент с поддержкой почти всего, если есть интерес — предлагаю освоить установку самостоятельно.

Теперь, когда у нас есть под рукой удобный инструмент, переходим к нудной теории. Для общего представления о том, что такое HTML — читам Википедию, вообще, надо привыкать читать много и вдумчиво — материала впереди очень много. Вкратце — HTML — это язык разметки, который со времен сотворения WWW и по сию пору применяется при создании веб-страниц. При помощи специальных конструкций — тегов — мы задаем поведение или отображение отдельных элементов и логическую структуру документа.

Имеется несколько стандартов HTML, но общий принцип один, до валидации по каждому из стандартов мы еще дойдем. В любом из стандартов документ состоит из нескольких частей, в частности, из “головы” — содержимого HEAD, и тела — BODY. В HEAD содержатся метатеги, подключение дополнительных файлов, а так же отображаемый заголовок страницы. Также могут содержаться стили, скрипты и некоторые другие элементы. В HEAD содержится служебная информация, необходимая для загрузки страницы. В BODY записывается “видимая” часть документа, пример используемых тегов можно посмотреть на Википедии или на htmlbook, в частности, стоит посмотреть теги html, head, title, link, body, p, table, tr, td, a — они нам пригодятся в дальнейшем.

Довольно быстро стало ясно, что стандартные теги не покрывают всех потребностей сайтостроителей. Разрыв между графическим и полиграфическим (то есть печатным) дизайном и веб-дизайном был виден даже непрофессионалам, а это значит, что различные хитрости и трюки, применяемые для повышения продаж (а чуть ли не 90% сайтов имеют конечной целью именно монетизацию), здесь не сработают. Поэтому немного подумали и придумали CSS — каскадные таблицы стилей, смотрим, опять же, статью на Вики.

Основной целью стало разделение логики построения документа от его оформления, хотя для тех, кто этого не понял, остались такие грязные хаки, как определение стилей при помощи атрибута style для тегов и переопределение тегов, но это, скажем так, не основное использование стилей.

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

В файле стиля используются селекторы, о них тоже есть в статье, самый распространенный вариант, с которым мне приходилось работать — это селектор тегов (если честно, считаю его не совсем корректным для использования — вводит нехилую путаницу в оформление), а так же селектор классов — простой в использовании инструмент, понятный любому веб-дизайнеру.

В той же статье отлично рассказано про иерархию и приоритет стилей — это нужно понимать и знать, тогда вопросов “почему этот стиль не работает” практически не остается. Прямо сейчас важно понимать, что примененный к “контейнеру” стиль будет наследоваться теми, кто в нем содержится, если только их собственные стили не перезаписывают имеющиеся.

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

Если после прочтения статей остались вопросы — это нормально, их можно задать. Надеюсь, они не помешают сделать практическую часть.

На практике нужно:

  1. Создать файлы index.html и style.css средствами операционной системы.
  2. При помощи редактора, установленного в самом начале, открыть эти файлы.
  3. При помощи тегов html, head, title, link, body, p, table, tr, td, a сверстать страницу, которая:
    1. Имеет заголовк “Hello, World — моя первая страница на HTML”
    2. Имеет подключение файла style.css
    3. Имеет два абзаца, в первом написать немного о себе, вроде — “Привет, меня зовут Никита, мне 29 лет, и я только начинаю учить HTML/CSS”, во втором — “Чтобы лучше со мной познакомиться, посмотрите мой профили в соцсетях:”
    4. Имеет таблицу из двух столбцов без заголовков, в первом — название соцсети, ВКонтакте, Одноклассники или еще что-нибудь, во втором столбце — ссылка на профиль.
  4. При помощи стилей сделать текст в абзацах шрифтом Verdana размером 13 пикселей. Сделать текст в таблице размером 12 пикселей, шрифтом Verdana, наклонным. Сделать рамку таблицы шириной в 1 пиксель серого цвета (серый цвет на выбор). Сделать ссылки без подчеркивания и зелеными.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *