Главная » Без рубрики » Основы CSS и HTML. Блочная верстка. Урок по блочной верстке. Создание разметки: основные правила

Основы CSS и HTML. Блочная верстка. Урок по блочной верстке. Создание разметки: основные правила

, , , — HTML теги, которые используются для разделения информации на блоки.

Футер — нижняя часть веб-страницы. Содержит в себе контактную информацию.

Шапка — верхняя часть страницы. Содержит в себе логотип, а также навигационную панель.

В этой статье мы поговорим с вами о том, как создать каркас страницы, а также о том, в каких блоках располагать те или иные элементы.

Блочная верстка стала довольно популярной и используется практически везде. Раньше, в HTML 4, блочные конструкции создавались с помощью блоков div. Если открыть любой сайт 2012-2014 года, а затем открыть его исходный код, то вы увидите длинный и сложный код нагроможденный блоками .

Такая конструкция не была плохой для пользователя, так как на отображение это никак не влияло. Проблемы были у разработчиков и у технической поддержки сайта.

Основная проблема — большое количество блоков , их могло быть и до 50,100 и даже 200. Такое нагромождение могло вызвать путаницу в коде — многие разработчики очень часто путались в своем коде. Это делало разработку медленной.

Изменил эту проблему, добавив несколько семантических блоков. Каждый блок был настроен под определенную информацию, как "nav" для навигационной панели, или "footer" для подвала.

Кроме этого, новая версия HTML уделила большое внимание семантическому ядру сайта. Поисковики имели лучшее понимание информации, которая расположена в определенном блоке.

Семантические элементы. HTML 5

Перед тем как говорить о разметке веб-страницы, давайте рассмотрим основные теги-контейнеры:

— необязательный тег, который может использоваться для навигации, главного заголовка, либо же для размещения отдельного блока с информацией.

— контейнер для навигации страницы или сайта. Может находиться в теге header, но это необязательно. На странице может присутствовать несколько блоков .

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

— разделяющий блок. Его основной функцией не является оборачивание информации в определенный блок. Чаще всего используется для разделения сайта на разделы и группирует их.

— блок для дополнительной информации. Чаще всего содержит в себе блок nav, при создании боковой панели. Располагается сбоку, может содержать блоки с рекламой, различными датами и ссылками.

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

Существует ещё 7 HTML5 тегов, которые можно использовать для создания различных блоков. Они используются реже, поэтому мы не будем их рассматривать.

Разметка страницы

Когда мы познакомились с основными тегами-контейнерами, давайте приступим к созданию простого HTML каркаса. Откройте ваш HTML документ и запишите туда все стандартные теги, по типу , , и .

Создание нашего макета будет проходить в 3 этапа:

Для начала необходимо создать шапку для нашей страницы.

Создаем тег , а в нем располагаем заголовок(будет использоваться вместо логотипа) и список с пунктами меню.

Создадим главный блок страницы. Это будет тег-контейнер , в котором будет располагаться список преимуществ товара и кнопка перелистывания.

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

Второй блок будет содержать в себе прайс-лист и кнопку. Внутри создаем 3 блока , в которых создаем списки с информацией. Ниже располагаем кнопку.

Теперь расположим подвал страницы, в котором будет находиться контактная информация и кнопки социальных сетей.

Создаем тег и записываем основную контактную информацию. Кроме контактов, нам необходимо разместить информацию о копирайте.

Заключение

У нас получилась простая HTML страница из нескольких блоков, которая не имеет особой привлекательности, пока что. В следующих статьях мы сделаем стилизацию всех этих блоков.

Если хотите, можете самостоятельно . Можете добавить туда какие-либо блоки или заменить информацию, по вашему усмотрению. Главное, не меняйте общую структуру документа, он нам ещё понадобится.

А если у вас возникли трудности с размещением элементов или записью HTML кода, то можете скачать наши исходники. Удачи в изучении!

ФЕДЕРАЛЬНОЕ АГЕНСТВО ПО ОБРАЗОВАНИЮ

ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

«ТЮМЕНСКИЙ ГОСУДАРСТВЕННЫЙ НЕФТЕГАЗОВЫЙ УНИВЕРСИТЕТ»

ИНСТИТУТ НЕФТИ И ГАЗА

Кафедра «Автоматизация и управление»

МЕТОДИЧЕСКИЕ УКАЗАНИЯ

к лабораторной работе

«Разметка html – документов»

по дисциплине «Компьютерно – телекоммуникационные сети»

для студентов специальности 220301 - «Автоматизация технологических процессов и производств (нефтегазодобыча)»

очной, заочной и заочной сокращённой форм обучения

Тюмень 2007

Утверждено редакционно – издательским советом

Тюменского государственного нефтегазового университета

Составитель: к.т.н., доц. Ведерникова Ю.А.

©Государственное образовательное учреждение высшего профессионального образования

«Тюменский государственный нефтегазовый университет», Тюмень 2007г.

1. Что такое HTML-документ 4

2. Структура HTML-документа 4

3. Оформление НТМL-документов 8

5. Использование графических изображений 15

6. Таблицы 16

ЗАДАНИЯ К ЛАБОРАТОРНОЙ РАБОТЕ 20

КОНТРОЛЬНЫЕ ВОПРОСЫ 21

Приложение A 22

Приложение Б 26

Цель работы: Освоение приемов создания WEB-страниц с использованиемHTML(HyperTextMarkupLanguage) - языка гипертекстовой разметки документов.

Что такое HTML-документ

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

< CENTER > обозначает вывод текста по центру

Этот текст будет расположен в середине экрана

обозначает окончание вывода текста по центру

В тэгах HTML не различают символы верхнего и нижнего регистров: тэг < CENTER > эквивалентен тэгу < center > или < Center > .

Тэгу могут присваиваться атрибуты. Атрибуты указываются в треугольных скобках сразу после имени тэга. Значение атрибута определяется после знака равенства. Например, с тэгом < FONT > (шрифт)может использоваться атрибутSIZE , задающий размер шрифта:

< FONT SIZE =5>

Этот тэг задает размер шрифта - 5.

Структура html-документа

Обычно HTML-документ обрамляется тэгами < HTML > и .

Метка < HTML > сообщает броузеру WEB о считывании HTML-файла, а метка обозначает конец HTML-файла.

Документ HTML состоит из двух частей: заголовок и тело.

Заголовок эквивалентен введению и используется для сбора информации о странице. Для определения заголовка применяются метки < HEAD > и . Применять метку < HEAD > следует сразу после метки < HTML > .

В секцию тело вводится текст и другие объекты, которые фактически являются страницей WEB. Для определения тела применяются метки < BODY > и , которые идут сразу за меткой < HEAD > .

Таким образом, структура HTML-документа выглядит следующим образом:

< HTML >

< HEAD >

Заголовок документа

< BODY >

Тело (основная часть документа)

Заголовок документа

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

Наиболее часто используемым элементом заголовка является имя документа:

< TITLE > Название документа

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

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

Атрибуты МЕТА-тега: HTTP-EQUIV, Name и CONTENT.

HTTP - EQUIV. Этот атрибут определяет заголовок HTTP, которому принадлежит информация. Если семантика заголовка HTTP, названного этим атрибутом известна, то содержание может быть обработано на основании записанных здесь данных. Заголовки HTTP не чувствительны к регистру.

NAME. МЕТА - информационное имя. Если признак NAME - отсутствует, то данный атрибут может получить значение, равное значению HTTP-EQUIV.

CONTENT. МЕТА - информационное содержание, которое будет связано с данным именем и/или заголовком HTTP.

Типичные примеры использования МЕТА – тегов описаны ниже:

- используется браузерами для определения кодировки, с помощью которой была написана данная страница. "charset=koi8-r" - альтернативная кодировка. Существуют также кодировки ISO, LAT, DOS.

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

- идентификация автора страницы.

- сохранение авторских прав, информация о Вашей фирме и тд.

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

- Краткое описание содержимого данной страницы. Необходим для поисковых машин.

- предназначен для того, чтобы браузер брал страницу не из кэша, а по настоящему адресу.

- адрес издателя страницы (Ваш адрес).

- адрес Вашего сайта в сети Интернет.

- описывается средство, с помощью которого была создана данная страница.

- (не точно!) как часто обновляется информация на странице.

- (не точно!) предназначен для поисковых машин, постоянно сканирующих просторы сети Интернет.

- страница перечитывает сама себя через время x (в нашем случае x=2 секунды).

Переписывают так:
Это просто неправильно: не обёртка. Этот элемент означает семантический блок Вашего контента, использующийся для построения «структуры документа» (document outline), и должен содержать заголовок. Если Вам нужен элемент для обёртки, попробуйте обойтись (Kroc Camen может предложить кое-что). Если это не решает проблему необходимости дополнительных обёрток, используйте старые добрые "ы. С приходом HTML5 "ы не умерли , и именно они отлично подходят в этом случае.

Принимая во внимание все вышесказанное, было бы хорошо разметить пример выше с использованием HTML5 так:
My super duper page

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

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

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

Избыток элементов Я уверен, Вы прекрасно знаете, что элемент можно использовать несколько раз в документе. Поэтому часто встречается такое:
My best blog post

Если Ваш содержит только один заголовочный элемент, то он не нужен. В данном случае элемент уже гарантирует, что заголовок будет включен в «структуру документа» (document outline), и раз не содержит нескольких элементов (согласно определению), его можно безопасно удалить. Достаточно просто этого:
My best blog post

Неправильное использование И снова о заголовках: я часто вижу некорректное использование элемента . Не следует использовать вместе с , если:

Присутствует только один заголовок
хорош сам по себе (т.е., без ).

Первый случай:
My best blog post

by Rich Clark

В этом случае просто уберите hgroup.
My best blog post

by Rich Clark

Второй случай - это еще один пример использования элемента без необходимости.
My company Established 1893

Если единственный ребёнок "а это , зачем нужен ? Если у Вас нет дополнительных элементов в "е (т.е. сестринских по отношению к ), просто уберите .
My company Established 1893

Не обрамляйте все ссылки в В HTML5 было введено 30 новых элементов, чтобы дать нам возможность создавать структурированную и осмысленную разметку. Но не следует злоупотреблять новыми семантическими элементами. К сожалению, это как раз то, что происходит с . Спецификация описывает так:Элемент nav представляет секцию страницы, связывающую её с другими страницами или частями текущей (секцию с навигационными ссылками).

Примечание: Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации . Часто в футерах размещают небольшой список ссылок на различные страницы сайта (Главная, Помощь, соглашение об использовании, etc ). В этом случае одного footer"а должно быть достаточно. Хотя ничто не мешает использовать nav, в этом нет необходимости.

WHATWG HTML spec

Ключевая фраза - «основная навигация». Можно долго спорить о том, что понимать под основной, но для меня это:

Первичная навигация
Поиск по сайту
Вторичная навигация (спорно)
Внутристраничная навигация (внутри длинной статьи, например)

Хотя в этом случае сложно судить, что есть правильно, а что - нет, я считаю, что не стоит заключать в :

Переключатели страниц
Социальные ссылки (хотя возможны исключения в случаях, когда социальные ссылки являются основной навигацией. Например, сайты вроде about.me или flavours.me)
Теги поста
Категории поста
Третичная навигация
Объемные футеры

Если Вы не уверены, обрамлять ли список ссылок в , задайте себе вопрос: «Это основная навигация?». Примите во внимание следующее:

“Не используйте , если Вы считаете, что с заголовком тоже подойдёт” - Hixie в IRC
Возможно стоит добавить «Перейти к» для удобства?

Если ответ на эти вопросы - «Нет», это, видимо, не место для .Общие ошибки в использовании элемента Ах, . Разобраться с правильным использованием этого элемента, как и его собрата , непросто. Давайте взглянем на некоторые общие ошибки, касающиеся этого элемента.Не каждое изображение Ранее, я советовал не писать больше кода, чем необходимо. Здесь похожая ситуация. Я встречал сайты, где каждая картинка была обрамлена в . Не нужно использовать больше разметки только для того, чтобы использовать больше разметки. Вы просто создаете себе больше работы, но никак не улучшаете описание своего контента.

Спецификация описывает как «автономный контент, возможно, с заголовком и обычно являющийся самостоятельным элементом потока». Вот она, вся красота - элемент можно спокойно переместить из основного содержимого, например, в сайдбар.

Вышеупомянутая блок-схема выбора элемента поможет Вам справиться с .

Если изображение несет только презентационную нагрузку, и на него нигде в документе не ссылаются, это определенно не . Иначе, задайте себе вопрос: «Необходимо ли это изображение в текущем контексте для понимания?». Если нет, это, видимо, не (возможно, ). Если да, спросите себя, «Могу ли я переместить это в приложение?». Если ответ на оба вопроса Да, то, возможно, подойдёт.

Ваш логотип - не Тоже самое касается и логотипа. Часто я вижу такое применение:

My company name

Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в , но мы сейчас не об этом. Настоящая ошибка - злоупотребление элементом . следует использовать только когда Вы ссылаетесь на него в документе. Вряд ли Вы где-нибудь будете ссылаться на свой логотип. Достаточно этого:
My company name может быть не только изображением Другой частый случай недопонимания элемента заключается в предположении, что его можно применять только для картинок. Но это не так. В может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании одними картинками. Наша задача как приверженцев веб-стандартов - описать контент нашей разметки.

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

Не используйте ненужный атрибут type Это, возможно, наиболее общая проблема, встречаемая в HTML5 галерее. Хотя это и не ошибка, я считаю, что лучше избегать этого.

В HTML5 нет необходимости указывать атрибут type для элементов и . Хотя от них может быть непросто избавиться, если они автоматически добавляются Вашей CMS, нет смысла включать их в код, если Вы пишете его самостоятельно или можете управлять шаблонами. Т.к. все браузеры по-умолчанию считают, что все скрипты написаны на JavaScript, а стили - это CSS, такая разметка становится избыточной:

Вместо этого Вы можете просто написать:

Помимо прочего, Вы также можете сократить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.

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

Некоторые из новых атрибутов форм являются логическими, т.е. их наличие в разметке определяет поведение элементов. В том числе это:

autofocus
autocomplete
required

Я редко встречаю их, но в случае с required я видел такое:

В конечном счете, это ничем плохим не грозит. Клиентский HTML парсер встретит атрибут required в разметке и применит соответствующие правила. Но что если сделать по-другому и написать required=«false»?

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

Логическое значение возможно применить тремя способами: (Второе и третье характерны для XHTML)

required
required=""
required=«required=»

Применительно к нашему примеру выше, мы могли бы написать так (в HTML):

Теги: Добавить метки

Этот урок рекомендуется тем, кто только начинает осваивать премудрости создания сайтов. В нем даны основные понятия о HTML и CSS . Пошагово выполняя инструкции данного урока, вы уже через несколько минут сверстаете шаблон для своего сайта.

Шаблон вебсайта мы будем делать с помощью блочной верстки , использую тег - «DIV ».

Шаг 1 - Разметка веб страницы с помощью тегов HTML

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

HTML - это язык разметки гипертекста . С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки "".

Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например: ). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.

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

Простейшие теги веб страницы это:

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

Важным тегом для структурирования страницы является тег . Используя его, вы можете делить свою страницу на блоки.

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

Теперь, используя графический редактор (Photoshop например) нарисуем блоки нашей веб страницы:

Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div :

Как видите, каждому тегу div мы дали определенный селектор ID . То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого.

Существует два вида селекторов . ID - используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS - применятся для обозначения повторяющихся блоков.

Также, мы заключили все блоки внутрь блока "container ". Это сделано для того, чтобы впоследствии можно было поместить нашу страницу целиком так, как мы хотим.

Шаг 2 - прикрепление таблицы стилей CSS

Как уже было сказано, CSS таблица стилей определяет дизайн элементов веб страницы. Вы можете разместить ее как внутри своего html документа, так и прикрепить внешний файл. В этом уроке мы будем использовать последний вариант.

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

Но для начала вы должны создать его. Назовем его style.css и разместим в той же папке, что и документ html. После этого в html файле, между тегами необходимо добавить следующую строчку:

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

Шаг 3 - задаем стиль

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

Для записи селекторов, кроме тега body , используются знаки "# " либо ". ". они следуют перед именем селектора. Первый применяется, чтобы указать на селектор ID , второй, соответственно на селктор CLASS . Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки "{} ".

#selector {

property:value;

}

.selector {

property:value;

}

У нас имеются следующие селекторы:

body
container
header
navigation
menu
content
footer

Свойства и возможные значения CSS:

Фон (background ) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).

Свойство color используется для определения цвета текста.

font-family
- это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

font-size - размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели.

margin - определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх - право- низ - лево. Поскольку верх - низ, право - лево у нас совпадают, то дублировать их нет потребности.

width - ширина блока.

height - высота.

float - свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону.

Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?):

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}

#header {
background: #838283;
height: 200px;
width: 900px;
}

#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}

#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}

#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}

#footer {
background: #838283;
height: 180px;
width: 900px;
}

Примечание

На момент написания статьи не все браузеры корректно отображали созданную веб страницу. Для устранения этого недостатка можно использовать дополнительный блок, который следует разместить сразу за блоком content .

Вот его код HTML:

#clear {
clear:both;
}

А между тегами head записать, какую кодировку необходимо использовать браузеру, если вы вдруг попробуете добавить русский текст в свои блоки:

Финальный код HTML:

Основы HTML и CSS

Шапка сайта

Блок навигации

Меню

Контент

Подвал сайта

body {

background: #f3f2f3;