Простейшая страничка на html
Здравствуйте дорогие читатели Блога RS! Сегодня я решил отступить от намеченного плана и поговорить не о программирование нашего блога, а о азов разработки сайта. Самый начальный уровень сайтов это статичные сайты, то бишь на простом html. Решил я об этом поговорить по причине того, что статьи пишу я уже не для новичков, а вполне понимающих в программирование людей, дабы расширить свою аудиторию, напишу пару уроки html. Я потихоньку начинаю, так что садитесь по удобнее...
Естественно все о html я Вам не расскажу, если хотите узнать все все, то можете почитать вот эту статью - язык html, очень занимательно... Что же касается этого поста то я постараюсь объяснить структура документа html и приведу лишь часто используемые теги. А о мелочах типа как подключить css файл к сайту можно запросто найти через yandex или google.
Визуальная структура документа html
Думаю стоит начать вообще с самого начала. Из чего состоит сайт? Когда то давно, когда я только начал изучение сайтостроение, наткнулся на очень замечательный пример. Сайт этот как человек, состоит из головы, тела и низа:
Про это Вы должны были и сами догадаться, ведь на какой сайт не взгляни везде есть центральная часть с текстом, меню, логотип и небольшое описание об авторе или какие нить ссылки/реклама в низу странички. С визуальной структурой вроде все понятно. Проблема восприятия в том, что структура документа html, а именно сам код, немного отличается от визуальной структуры, сейчас поясню.
Все что мы видим на экране, для кода это тело, то есть весь этот человечек, что я нарисовал - это тело. Невидимая же часть называется головой. Походу дальнейшего пояснения Вы поймете где голова а где тело 
Теги
Для начала Вы должны понять, что вся страница состоит из так называемых тегов. Что такое тег? Давайте я не буду захламлять пост непонятными терминами и объяснениями из той же википедии, и постараюсь привести пример из жизни который помог бы понять что такое тег. Вспомните школьную скамью ( Если Вы еще не закончили школу, то Вам будет проще ) Вот учитель просит Вас начертить таблицу и заполнять ее под диктовку. Что есть таблица? Это некое количество столбцов и строк которые создаются лишь с одной целью, быстрого визуального восприятия информации, то есть намного легче найти какую то информацию в таблице ориентируясь по строкам и столбцам, нежели рыскать в тонне подряд написанного текста, не так ли? Вот мы чертим линии получаем таблицу:
К чему это я веду? Я забыл 
а! Как Вы думаете с чем можно сравнить сайт? Именно! С таблицей! Сайт как и таблица в тетрадке имеет разметку, состоит из колонок и строк, и не более того! По сути все мы в школе занимались сайтостроением 
Так вот вам ответ на вопрос, что такое тег? Тег это одна из ячеек в таблице:
Все до ужаса просто, не так ли? С этим все ясно, осталось лишь узнать какие теги бывают, где их втыкать, и какие у них атрибуты есть, и все!
Прежде чем приступить к описанию тегов хочу забежать вперед и пояснить один момент. Браузер понимает, что перед ним сайт когда видит самый главный тег Все дальнейшие теги о которых мы поговорим пишутся в самом главном теге <html>:
<html>
тут все остальные теги
</html>
Теги в голове сайта
Как я уже говорил структура сайта состоит из головы и тела, тело в свою очередь состоит из визуальной головы тела и низа.. Ой как сложно написал. Ладно...начнем с головы, какие теги входят в голову? Ну для начала голова это тоже тег, обозначается она так:
<head>
</head>
Большинство из тегов должны быть написаны парно. Тут как бы идет объявление о том, что мы открыли ( <head> ) и закрыли ( </head> ) тег. Все что внутри этих тегов будет считаться содержимым головы. Что входит в состав головы? Самое распространенное это:
- Название страницы
- Описание страницы
- Ключевые слова страницы
Так же сюда можно вписывать:
- Javascript
- CSS стили
Ну это уже для продвинутых пользователей, и для достижение этих навыков нужна практика и ковыряние Теперь давайте распишем синтаксис этих тегов:
- <title>Описание страницы</title>
- <meta> - Этот тег много за что отвечает, и подробности лучше посмотреть в других, более информативных источниках. Я приведу два основных:
- <meta name="description" content="Описание страницы"> - Атрибут name с свойством description делает тег <meta> ответственным за описание странички
- <meta name="keywords" content="Ключевые слова"> - Атрибут name с свойством keywords делает тег <meta> ответственным за ключевые слова странички.
Так же всегда используют вот эту строчку:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Тут определяется настройки станицы. То есть мы говорим браузеру что это страница состоит из текста с кодировкой windows-1251.
Давайте я приведу пример состава головы страницы:
<head>
<title>Блог RS - Все относительно просто</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="Блог Rio-Shaman'а, мысли, уроки, коды">
<meta name="keywords" content="Rio-Shaman, PHP, JS, Javascript, HTML, CSS, Скрипты, Разработка сайта, Сайты, Уроки">
</head>
Я не думаю, что это сложно понять. Я к примеру не знаю как пишутся эти теги, я их уже копирую на протяжение нескольких лет, и не парюсь Главное понять, что они нужны и почему нужны...
Теги в теле сайта
Тут уже чутка по сложнее, по той простой причине, что все упирается в Вашу фантазию.. Разметка в теле зависит от дизайна сайта, от его структуры. Какие теги используют тут чаще всего? Ну для начала необходимо сказать, что тело это своего рода тоже тег, обозначается он так:
<body>
</body>
Далее я перечислю часто используемые теги в теле:
- Дивы - Вы скорее всего слышали про этот способ. Новичку он не подойдет так как необходимо знать css
- Таблицы - Самый простой вариант, но имеет ряд минусов. Самый, так сказать минус минусов это тяжесть страницы. То есть страничка будет грузиться дольше.
Я предпочитаю совмещать два этих способа. Таблицами проще создать каркас нежели дивами, а уж потом в таблицах я создаю дивы. Давайте разберем только таблицы, ибо для начального уровня лишь они подойдут.
Тег - Таблица ( <table> )
Давайте вспомним из чего состоит таблица? Из строк и столбцов. Давайте подумаем из скольки строк и скольки столбцов состоит сайт?
Обычно три на три. Как же выглядит синтаксис таблицы? Во-первых необходимо объявить таблицу:
<table>
</table>
После чего выставить строки:( <tr></tr> )
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
И в конце необходимо выставить колонки:( <td></td> )
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Как видите запись не слишком удобная, но все же Мы создали таблицу с тремя строками и тремя столбцами. Если посмотреть как табличка выглядит в браузере, то мы опечалимся Но не все так плохо У тега <table> есть пару очень важных атрибутов:
- Ширина - width
- Высота - height
- Расстояние между ячейками - cellpadding и cellspacing ( Обычно их ставят равными нулю )
- Бордюр - border
- Выравнивание - align ( имеет три основных свойства - left ( лева ) right ( право ) center ( центр ) )
Все эти атрибуты имеют свойства, мера длины. Я говорю про сантиметры, метры и тому подобное... В вебе обычно используют пиксели или проценты. Например если нам нужен сайт с "резиновой" шириной, то в таблице, атрибут ширины нужно указать в 100%. Почти все атрибуты работают и в теге <td> Давайте приведу пример:
<table width="100%" height="700px" cellpadding="0px" cellspacing="0px" border="1px">
<tr>
<td height="150px">шапка</td>
<td height="150px">шапка</td>
<td height="150px">шапка</td>
</tr>
<tr>
<td width="250px">Левое меню</td>
<td>Текст</td>
<td width="250px">Правое меню</td>
</tr>
<tr>
<td height="50px">низ</td>
<td height="50px">низ</td>
<td height="50px">низ</td>
</tr>
</table>
Что мы тут увидим? Мы увидим таблицу которая на 100% вытянулась по ширине, в высоту она 700px расстояние между ячейками 0px, бордюр равен 1px.
В первой строке ( <tr>....</tr> ) высота ячеек равна по 150px, ширину объявлять тут не нужно, так как общая ширина таблицы 100% значит все три ячейки в первой строке примут ширину ~33%, надеюсь понятно почему
- Во второй строке ширина первой ячейки - 250px считаю что 250 пикселей вполне достаточно для меню
- Вторая ячейка второй строки - как Вы могли заметить я ничего не выставил, да и оно не нужно, так как ширина будет определяться размером браузера автоматически, да и высота тоже. Тут математика второго класса, думаю разберетесь
- Третья ячейка второй строки - аналогично первой ячейки, вставил ширину 250px как Вы поняли это у нас правое меню
- У низа стоит по 50px высота. Вполне достаточно для футера.
Осталось дело за малым. Убрать лишние ячейки в шапке и футере:
Как это сделать? Все довольно просто, у тега <td> есть атрибуты:
- colspan - определяет на сколько столбцов растянуть ячейку
- rowspan - На сколько строк растянуть ячейку
У нас в шапке и в футере есть лишние столбцы, значит уберем вот так:
<table width="100%" height="700px" cellpadding="0px" cellspacing="0px" border="1px">
<tr>
<td colspan="3" height="150px">шапка</td>
</tr>
<tr>
<td width="250px">Левое меню</td>
<td>Текст</td>
<td width="250px">Правое меню</td>
</tr>
<tr>
<td colspan="3" height="50px">низ</td>
</tr>
</table>
Что мы сделали? Мы удалили лишние <td> и растянули оставшийся по горизонтали ( то есть убрали лишние столбцы ) Если Вы сейчас посмотрите этот каркас в браузере то увидите уже самый простейший сайт созданный своими руками.
Расскажу Вам про еще один атрибут который используют почти постоянно: Это атрибут valign для <td> - позволяет выравнивать текст написанный в этом теге. Например обычно веб мастеру необходимо что бы текст позиционировался на верху тега, а не посередине как стоит по умолчанию. Используя этот атрибут мы получим следующее:
<table width="100%" height="700px" cellpadding="0px" cellspacing="0px" border="1px">
<tr>
<td colspan="3" height="150px">шапка</td>
</tr>
<tr>
<td width="250px" valign="top">Левое меню</td>
<td valign="top">Текст</td>
<td width="250px" valign="top">Правое меню</td>
</tr>
<tr>
<td colspan="3" height="50px">низ</td>
</tr>
</table>
Мы выровняли текст по верху. Поздравляю, Вы научились делать простейший каркас для сайта!
Тег - абзац ( <p> )
Этот тег используют обычно для того что бы объединить какую то часть текста для определенных воздействий над этим текстом. Примеров множества, вот Вам один из них: Предположим нам необходимо в нашем посте часть текста выравнять по правому краю, а часть текста по левому. Насчет выравнивания по левому краю задумываться не нужно, так как это делается по умолчанию, а вот что бы выравнять другую часть текста по правому краю используют тег <p> с атрибутом align="right"
<p>Первая часть текста, выравнивается по левому краю</p>
<p align="right">Вторая часть текста, выравнивается по правому краю</p>
Этот тег, как и многие другие, является лишь некой невидимой ячейкой внутри другой ячейки.
Тег - изображение ( <img> )
Этот тег отвечает за вывод изображений. Включает в себя почти все атрибуты которые мы изучали при обзоре тега <table>. То есть я имею ввиду можно определить ширину изображения высоту, поставить бордюр. Единственное, что атрибут align не смещает изображение по левому краю, правому или по центру. Этот атрибут воздействует на текст. То есть если ввести атрибут align="left" то текст будет обтекать изображение по левому краю. Синтаксис тега такой:
<img src="путь к изображению" border="0px">
Обычно это все что используют при выведение изображения на экран ( не считая атрибут align - им тоже очень часто пользуются ) Заметьте что этот тег не нуждается в закрытие, то есть не нужно писать </img> Хочу кое что Вам сообщить, для хороший и красивой верстки, теги просто необходимо совмещать друг с другом! Например, изображение само по себе невозможно выравнять по центру экрана, у тега <img> нет такого атрибута, но он есть у тега <p> Стало быть для того что бы выравнить изображение по центру необходимо написать так:
<p align="center"><img src="путь к изображению" border="0px"></p>
Совмещая эти два тега мы получаем отличный результат
Тег - ссылка ( <a></a> )
Ну и на по следок хочу рассказать Вам о теге - ссылка. Ясно что это самый распространенный тег на странице. Вот его синтаксис:
<a href="ссылка, например: http://rio-shaman.ru">Текст ссылки, например: Мой блог</a>
Все довольно просто
Итог обзора
Ну что ж, за сегодня мы с Вами научились делать самые простые странички на html, немного поговорили о структуре документа html.
Многого конечно я Вам не рассказал, но будьте уверены мы еще вернемся к этому обсуждению Так что ждите следующие уроки html.
Если есть вопросы, не стесняйтесь задавайте. Удачи Вам, у меня все!
Доктайп в виде html нонсенс...
Резюме. Автору зачет. Но....