HTML, Excel, Word, SEOОсновы CSS ⇒ Структура html-страницы

Основы CSS

Учебник CSS
· Что такое CSS?
· Структура html-страницы
· Шрифт: размер и гарнитура
· Выравнивание и пробелы
· Начертание шрифта
· Оформление ссылок
· Форматирование списков
· Классы
· Изображения
· Справочник атрибутов CSS

Более полно и подробно каскадные стили CSS3 рассмотрены в разделе "Основы CSS3".


 
Сабмит сайта в каталоги

Структура html-страницы


HTML и CSS тесно взаимосвязаны, поэтому, будем рассматривать их в комплексе (частично повторяя информацию, представленную в ветке "HTML"). Начнем сначала.

Что такое HTML-страница?

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


Например:

---
<p> - открывающий тег абзаца;
</p> - закрывающий тег абзаца;
тег <b>жирного текста</b> - как выглядит показано ниже:
---

тег жирного текста



Любая HTML-страница должна состоять из обязательного набора тегов. Вот пример пустой HTML-страницы с обязательными тегами:

---
<html>
<head>
	<title>Untitled</title>
</head>

<body>



</body>
</html>
---

Более подробно останавливаться на тегах больше не будем, т.к. она подробно рассмотрена в ветке "HTML".

Перейдем к конкретным примерам. Заполним тело HTML-страницы информацией для нашего учебного сайта. Информацию возьмем из Энциклопедии "Кирилла и Мефодия", посвященную Золотому кольцу России.


Как выглядит страница: Пример №1

HTML-код страницы:



Обратите внимание, что браузер "не понимает" форматирование документа в коде HTML-страницы, если оно сделано не при помощи тегов. Для того, чтобы текст в окне "браузера" стал удобочитаемым, необходимо расставить нужные теги в нужном месте HTML-страницы. Воспользуемся тегом абзаца <p> и перевода строки <br> (обратите внимание, что тег перевода строки не имеет закрывающего варианта).


Как выглядит страница: Пример №2

HTML-код страницы:



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


У хорошего веб-дизайнера любой текст html-страницы должен находиться в паре тегов. Обычно, это теги абзаца <p></p>. Текст, заключенный между этими двумя тегами является абзацем. Существует еще два очень полезных тега для форматирования текста:


Пример использования тегов DIV и SPAN: Пример №2a

HTML-код страницы:





В начало страницы



В начало страницы