Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Изучаем html и css (для новичков)

1110857_78001336

В конце 80-х с появлением Интернета возникла проблема обмена документами в Сети. Необходимо было, чтобы все документы отображались на разных компьютерах одинаково и к любому документу было легко получить доступ. Решил эту задачу некий Тим Бернерс-Ли, который и создал язык разметки, получивший название HTML.
HTML расшифровывается как язык разметки гипертекста (HyperText Markup Language).  Гипертекстом называют текст,  выделенный подчеркиванием или другим цветом  (гиперссылка), при нажатии на который происходит переход на другую WEB-страницу или документ (ну вы наверняка знаете). Теперь осталось только разобраться с тем, что такое разметка.
HTML – документ имеет определенную структуру. Если вы посмотрите исходный код любой веб-страницы, нажав CTRL+U, то увидите помимо самого текста служебные конструкции, заключенные в треугольные скобки (например <p>, <div>), они называются тегами. Теги в свою очередь служат для того, чтобы выделить отдельные элементы из которых состоит документ.
Приведу наглядный пример: <span>Привет!</span>. Здесь мы имеем дело с элементом span, начало которого показывает открывающий тег <span>, а конец – закрывающий тег </span>. Внутри элемента содержится текст – Привет! Кроме того, внутри тегов могут указываться различные параметры, так называемые атрибуты.

В начале каждого документа обязательно требуется указать  <!DOCTYPE> , который указывает информацию об используемой версии языка и определение типа документа (DTD), чтобы браузер понимал как интерпретировать текущую страницу.  В соответствии с  доктайпом   осуществляется проверка документа  и выявление существующих ошибок. Код веб-страницы должен соответствовать  правилам, называемым спецификацией, которую  разрабатывает W3 Консорциум.  Документ,  прошедший подобную процедуру и не имеющий замечаний по коду называется валидным.

На сегодняшний день актуально применять <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> – строгий синтаксис или более современный доктайп  – <!DOCTYPE html>.

Любая веб-страница находится между открывающим и закрывающим тегом <html></html>.
Есть в ней и другие обязательные части. Помню в каком-то старом учебнике  веб-страница сравнивалась с человеком, по-моему очень наглядное сравнение. Внутри элемента html всегда располагаются элементы <head></head> (“голова”) и <body></body> (“тело”).
В “головном” элементе обычно находятся всякие служебные теги: описание страницы, ключевые слова и проч. Их особенностью является то, что они не отображаются в документе. Совсем другое дело элементы между тегами body. Они занимают определенное место на странице, и по тому, как каждый из этих элементов будет показан на ней, выделяют  блочные и строчные, есть и более сложные варианты, но в этой статье мы их рассматривать не будем.
Существуют также замещаемые элементы(как блочные, так и строчные), которые замещаются содержанием, указанным в элементе, например элемент

заменяется картинкой, указанной в атрибуте ‘src‘.

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

Вид блочных элементов

Ширина элемента складывается из заданной для него ширины, внутренних отступов, рамок и внешних отступов.  Высота элемента складывается из высоты содержимого, внутренних отступов, рамок и внешних отступов. Отступы и рамки можно задавать сверху, снизу, слева, справа.

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

Внутренние отступы задаются свойством padding, оно устанавливает значение внутренних отступов вокруг содержимого элемента. Это расстояние от  края рамки элемента до его внутреннего содержимого.

К блочным элементам относятся теги <div> – универсальный блочный элемент, широко используется в верстке для создания вложенных друг в друга блоков, <h1>,…,<h6> – заголовки для текста разного уровня, <p> – абзац текста, <ol> – нумерованный список, <ul> – ненумерованный список с маркерами и т.д.

В качестве примера рассмотрим элемент p (абзац) которому присвоен серый цвет фона, черная рамка толщиной в 3 пикселя, внутренний отступ (находится внутри рамки), внешний отступ (находится снаружи от рамки)

Блочная модель

Блочные элементы могут содержать вложенные элементы блочные или строчные.

Строчные это элементы, которые являются непосредственной частью строки. К строчным элементам относятся теги <img> – изображение, <span> – универсальный строчный элемент, служащий для оформления какого-то куска текста в строке, <a> – гиперссылка, <strong>– акцентирование текста и др.  В примере для тегов span в тексте задан жирный шрифт и желтый цвет фона.

Строчные элементы

Основное их назначение: изменения вида текста или его части, которую нужно подчеркнуть по смыслу.
Несколько строчных элементов идущих подряд располагаются на одной строке. Внутри строчных элементов можно помещать текст или другие строчные элементы (блочные нельзя), также для них нельзя явно указывать ширину и высоту.

При рассмотрении разных типов элементов мы упоминали о их различных свойствах: отступах, ширине, высоте и т.д. Как же они задаются?
В стародавние времена они задавались с помощью атрибутов или специальных тегов, отвечающих за оформление ( например <font> задавал различные свойства шрифта, <center> выравнивал по центру содержимое), подобное положение дел сильно усложняло редактирование, так как для изменения внешнего вида страницы требовалось найти и заменить все подобные элементы. Код был громоздким и нечитабельным.
В конце концов проблема была решена – на смену пришла концепция разделения разметки и оформления. HTML теперь представляет структуру: порядок следования и вложенность элементов. А оформление осуществляется с помощью CSS.

Основой CSS (каскадных таблиц стилей) является понятие стиля, набора правил по оформлению и форматированию, которые можно применять к элементам.
Чаще всего CSS подключается в виде отдельного файла  в разделе head страницы. Выглядит это так:

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

На странице всем заголовкам первого уровня (тег h1) присваивается размер шрифта 20 пикселей и зеленый цвет.

CSS также реализует возможность присваивать стили избирательно для  любого элемента страницы. Для этого может использоваться  атрибут элемента class = “имя класса” или идентификатор id = “имя идентификатора”. Идентификатор применяется только для одного уникального элемента и не должен повторяться на странице.

Зададим класс элементу на странице, например

В файле стилей класс обозначается точкой перед именем

Абзацу с классом first присваивается жирный шрифт и серый цвет (в шестнадцатиричном представлении).

Для идентификатора будет все аналогично: в html-файле пишем

В таблице стилей идентификатор обозначается знаком  решетки

И напоследок  приведу вам пример простой веб-страницы. Тег meta не имеет закрывающего тега и содержит информацию о кодировке. В файле style.css содержатся CSS-стили для этой страницы.

style.css создайте в той же папке, что и html-файл.

Пример для  style.css

Расшифрую, что тут написано.

Селектор * (универсальный селектор) показывает, что для всех элементов внутренние и внешние отступы должны по умолчанию быть равны нулю.

Для элемента body, а значит для всех видимых элементов на странице (поскольку свойства передаются по наследству) шрифт сделать 14 пикселей, гарнитура Arial. Минимальная ширина страницы при которой еще не появляется полоса прокрутки 890 пикселей.  Цвет фона белый (#fff). Цвет шрифта темно-серый (#555).

Заголовок h1 выровнять по центру с внешними отступами 10 пикселей, шрифт – Georgia или Times размером 25 пикселей.

Заголовок h2 сделать  шрифтом размером 18 пикселей с нормальной насыщенностью.

Абзац сделать шрифтом черного цвета с внешним отступом снизу 10 пикселей.

На рисунке эта веб-страница без применения стилей ( браузер применил свои собственные стили по умолчанию, чтобы выделить заголовки и т.п.) и с использованием style.css.

HTML страница без CSSHTML страница с применением файла стилей

На этом наш урок окончен. Дополнительно смотрите обучающее видео

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

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

*