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

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. Не пытайтесь запомнить эту строчку наизусть, главное - вы должны знать, что она необходима. Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox) .

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги головы (<head></head>) и тела документа(<body></body>) .

Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. А основное содержимое: текст,таблицы,картинки, - находится в теле документа.

На этой смешной картинке я попытался схематически изобразить структуру:

Как вы видите голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот) . Сначала закрываем голову документа </HEAD>, и лишь затем открываем тело <BODY>. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.

Вставка комментария: 

Очень полезным при создании сайтов является вставка комментария. Почему? да потому, что через месяц после создания, вам будет трудновато разобраться что к чему, ведь кода будет очень много. А если вы будете комментировать свои действия - тогда разобраться будет значительно легче! Т.к. это учебник html с примерами, давайте к ним и обратимся:)

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title> Сайт о собаках </title>

</head>

<body>



. . .

</body>

</html>

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

Примечание: тег  внутри элемента TITLE не действует.

Атрибуты:

BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

BGCOLOR – определяет цвет фона документа.

TEXT – определяет цвет текста в документе.

Все они прописываются для элемента BODY. Значения цветов задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

Пример1:

<body bgcolor="#FFF8D2" text="red">
 Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный 

 В этом абзаце текст будет зеленый, потому что мы заключили его в теги font и придали соответсвующий цвет 

 Теперь текст снова будет красный  </body>

Пример 2:

<body background="fon.jpg" text="red">
 Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный 
Теперь тут тоже красное и только  эти слова зеленые 

 Тут как вы поняли текст тоже красный </body>

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

HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Легко запомнить название если взять и просто перевести с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ.

HEIGHT и WIDTH - высота и ширина изображения в пикселах.

<img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="left">
Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.


 <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="right">
Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.


 <img src="pchela.jpg" width="65" height="59" align="left">
Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.

ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения. Смотрите пример:

<img src="pchela1.jpg" alt="пчела мая!!!" width="65" height="59">

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

<img src="pchela.jpg" width="65" height="59" titleА как можно изображение сделать ссылкой?

Для этого просто вместо текста ссылки, вставляете изображение. Вот например:

Что еще за border="0" спросите Вы, а дело в том, что когда делаешь изображение ссылкой, вокруг него появляется некрасивая рамка(border) и чтобы ее убрать пишут дополнительный атрибут border .

="Пчела мая!!! " >При добавлении картинки в блог Блоггер создает ее HTML-код, который можно посмотреть и исправить при редактировании сообщения в режиме "HTML".

Параметр border - толщина рамки вокруг картинки. По умолчанию ставится в том случае, если картинка является ссылкой (а у Блоггера это всегда), при этом border="0".
<img src="адрес" border="0" />
Если хотите поменять толщину, стиль или цвет рамки, то можно поставить нужные параметры, например border: 2px solid # 992211 даст рамку толщиной в 2 пикселя стиля "жирный" синего цвета.

Стиль рамки может быть таким:
solid - жирная
double - двойная линия
groove - объемная "тень"
ridge - объемная "тень"

Картинка в HTML имеет вид <img src="адрес" />.
Параметр src - адрес файла картинки.

После "адреса" можно вставлять нужные параметры - центрирование, размеры, рамка, описание и т.п.
Минимально код должен выглядеть так:
<a href="URL"><img src="адрес_картинки" width="ширина_картинки" height="высота_картинки" alt="описание картинки"/></a>

Подробнее о картинках в блоге:здесь и здесь

Источник
Источник

Ярлыки

Страницы

Основы HTML. Картинки.

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