Основы html и css
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки»), применяется для форматирования документов в сети Интернет, отображаемых броузерами. Появление HTML относится к 1993 году. Первый стандарт HTML 2.0 опубликован в 1995 году. HTML 3.* - январь 1997 г. HTML 4.* - декабрь 1997. HTML5 – 2014 г.
С 1998 по 2009 год, на замену HTML разрабатывался более «строгий» язык XHTML, однако развития он не получил как раз по причине своей строгости. Наоборот, развитие форматирования документов в HTML пошло в сторону упрощения синтаксиса.
Например, если в спецификации HTML 4, заголовок типа документа мог выглядеть так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
То в HTML 5 теперь во всех случаях достаточно только описания вида:
<!DOCTYPE html>
Простейший HTML документ может выглядеть так:
<!DOCTYPE html> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>МИЭТ</title>
</head>
<body>
<center>Здравствуй мир!</center>
</body>
</html>
Все содержимое между тегами html делится на два блока заголовок: <title> и тело документа <body>. Все, что описано внутри тега title загружается до начала отображения содержимого документа.
Подробное рассмотрение всей полезной функциональности HTML не входит в тему данной лабораторной работы, поэтому здесь будут только основные моменты достаточные для выполнения задания по многоколоночной верстке.
До появления спецификации HTML 4.* основным способом создания многоколоночной верстки для Интернет-документов был тег создания таблицы - <table>. Внутри парного тега <table> задавались строки <tr> и ячейки <td> таблицы. Строки и ячейки можно объединять с помощью атрибутов collspan для колонок и rowspan для строк. На рис ниже показан HTML код и соответствующий ему вид страницы.
<table cellpadding=5 cellspacing=10 border=1 align=center> <tr> <td>Колонка 1</td> <td>Колонка 2</td> <td>Колонка 3</td> <td>Колонка 4</td> </tr> <tr> <td>Колонка 1</td> <td colspan=2>Колонка 2</td> <td rowspan=2>Колонка 4</td> </tr> <tr> <td>Колонка 1</td> <td>Колонка 2</td> <td>Колонка 3</td> </tr> <tr> <td>Колонка 1</td> <td>Колонка 2</td> <td>Колонка 3</td> <td>Колонка 4</td> </tr> </table>
Как видно в открывающем теге table есть несколько атрибутов, которые задают внешний вид таблицы: cellspacing – задает отступ между ячейками, cellpadding – задает отступ содержимого от контура ячейки, border – устанавливает наличие или отсутствие визуального отображения контуров ячейки и таблицы, align – задает положение таблицы на странице.
Недостаток такого задания вида таблицы, очевидно заключается в том, что один и тот-же принятый вид оформления нужно копировать в каждую таблицу. Кроме того, при необходимости смены оформления таблиц изменения нужно вносить в атрибуты всех таблиц.
CSS — каскадные таблицы стилей
Чтобы уйти от данных неудобств в оформлении были принят формат внешнего описания вида документа в каскадных таблицах стилей — CSS (Cascading Style Sheets). Первая редакция CSS 1 была принята еще в 1996 году, однако она не позволяла осуществлять блочной верстки и сайты верстались таблицами. Вторая версия CSS 2 появилась в 1998 году и позволяла блочную верстку, однако производители броузеров не сразу реализовали ее. Следующая итерация CSS 3 появилась только в 2011 г но до сих пор производители броузеров реализовали ее не в приемлемом объеме.
Проверить поддержку какого либо тега HTML или инструкции CSS можно, например, по адресу htmlbook.ru. Как видно, например, тег <main> спецификации HTML5 поддерживается только 2-мя броузерами из 7 — см. http://htmlbook.ru/html/main. Описание и поддержку броузерами правил CSS для разных версий можно посмотреть по адресу - http://htmlbook.ru/css/.
Стили CSS могут быть внедрены на страницу 3-мя способами:
непосредственно в тег, например так:
<table style=”text-align:center; width:100px;”>
с помощью блока <style>, например так:
<style> table {
text-align:center;
width:100px;
}
С помощью подключения файла стилей, например так: <link href="/themes/hb/css/style.css" rel="stylesheet">
Стили применяются с помощью селекторов. Селектором может быть сам тег, например table, а также селектор может быть задан для класса или уникального идентификатора:
Задание для класса
<style>
table.first { width:100%; }
</style>
<table class=”first”>
…
</table>
Задание для идентификатора
<style>
#first { width:100%; }
</style>
<table id=”first”>
…
</table>
При совпадении стилей c одними именами селекторов, но разным содержанием, применяется тот стиль, селектор которого был определен последним.
Для блочной верстки используются теги <div> и <span>. Это теги — контейнеры для включения в них прочего содержимого страницы. Тег div изначально блочный т. е. По умолчанию занимает 100% доступной ширины и любой следующий за ним контент показывается под ним. Тег <span> является «строчным», т. е. Занимает столько места, сколько контента есть в нем, а следующий за ним контент следует за ним на той-же строке.