HTML верстка:
HTML Hypertext
Markup Language –язык разметки
гипертекста.
HTML является стандартным
языком, предназначенным для создания гипертекстовых документов в среде WEB.
Тэг -
элемент HTML или другими словами команда языка разметки гипертекста,
представляет из себя
текст, заключенный в угловые скобки <>.
Все тэги HTML
обязательно помещаются в < >
Всё что помещено между угловыми скобками является командой, которую мы
задаем, например, так или иначе отображать текст на экране, выводить картинки,
ссылки и т.п. То есть всё, что написано внутри угловых скобок на экране НЕ
отображается, а является командой.
Например, <DODY>, <HEAD>,<font> всё это тэги.
Большинство тэгов парные: состоят из стартового
тэга и завершающего тэга.
Например:
<font>
</font>
<BODY> </BODY>
<b> </b>
где <font> - стартовый тэг, а </font> завершающий.
Для указания дополнительных
параметров используются атрибуты тэга:
Например:
<BODY bgcolor=#ffffff > </BODY>
В данном случае задан цвет
странички. Таких атрибутов у одного тэга может быть много.
<BODY bgcolor=#ffffff text=#333333> </BODY>
А в этом случае задан цвет
страницы и цвет текста на всей странице.
Короче говоря, в данном случае <BODY> это тэг, который содержит
атрибуты bgcolor=#ffffff и text=#333333, помещающиеся
внутри тэга, то есть внутри угловых скобок!!! Не забываем проставлять скобки!
Если забудем проставить >, то команда, заданная тэгом, выполнена
НЕ будет, и отображаться на экране ничего корректно тоже не будет!
</BODY> это завершающий тэг, никаких атрибутов содержать
в себе не может!
Таким образом, любой текст,
графика, в общем, всё, что помещено между <BODY> и </BODY> будет
являться «телом» документа и будет иметь стиль,
который прописан в этом тэге.
Еще в
качестве примера возьмем другой тэг шрифта <font>
</font>.
Любой
текст, который будет помещен между <font> и </font> будет иметь стиль, заданный атрибутами этого
тэга,
Например:
<font>Моя страничка</font>
То есть если мы просто поместим какой-то текст между <font>
и </font>,
то собственно ничего не произойдет.
Для этого нам нужно задать
атрибуты или другими словами прописать команды, которые будут распространяться
на текст, помещенный между <font> и </font>
<font color=#cccccc>Моя страничка </font>
В данном случае текст моя
страничка будет отображаться серым цветом.
<font color=#FF0000 size=+1> Моя страничка </font>
В данном случае текст моя
страничка будет отображаться красным
цветом и шрифтом на размер больше.
Дабы не путаться, лучше всего
осваивать HTML на
примерах.
Итак, структура HTML документа:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Если мы возьмем и создадим текстовой файл (в
блокноте), а потом скопируем в него вышеприведенный код, и сохраним файл как
Index.html то перед нами будет простая html страница другими словами белый лист.
Теперь пропишем название страницы
(будет отображаться в верхнем синем окошке браузера), например, Мой первый
сайт, а также зададим параметры «телу» страницы.
<HTML>
<HEAD>
<TITLE>Мой первый сайт</TITLE>
</HEAD>
<BODY bgcolor=#FF3333
text=#ffffff>
Добро пожаловать на мой сайт!
</BODY>
</HTML>
Как видим текст
по умолчанию отображается в левом верхнем углу. Чтобы опустить
текст используем <BR>
(может быть несколько)
Выделим текст жирным,
используя тэг <b>
</b> и поместим
по центру, используя тэг <center> </center>
<HTML>
<HEAD>
<TITLE>Мой первый сайт</TITLE>
</HEAD>
<BODY bgcolor=#FF3333
text=#ffffff>
<br><br><br>
<center><b>Добро
пожаловать на мой сайт! </b></center>
</BODY>
</HTML>
Допустим теперь нам нужно вставить какую-нибудь картинку. Вы можете вставить свою
картинку. Так как в коде прописывается имя картинки, то нужно указать ее имя. В
данном случае используется картинка logotip.jpg
<HTML>
<HEAD>
<TITLE>Мой первый сайт</TITLE>
</HEAD>
<BODY bgcolor=#FF3333
text=#ffffff>
<center><img src=logotip.jpg
border=0></center>
<br><br><br>
<center><b>Добро
пожаловать на мой сайт! </b></center>
</BODY>
</HTML>
Итак, для того чтобы вставить
графическое изображение, используем тэг
<img src=logotip.jpg border=0>
Красным шрифтом я выделила имя картинки.
А также 0, это значит, что рамка у картинки отсутствует. Если вы поменяете на 1
и напишите border=1, то
картинка будет отображаться в рамке, а если поменять значение на 2, 3 и
выше, то в зависимости от цифры будет меняться толщина рамки.
Теперь вставляем текст, используя
одиночный тэг <p align=justify>, который
выравнивает текст по краям, растягивая его.
<HTML>
<HEAD>
<TITLE>Мой первый сайт</TITLE>
</HEAD>
<BODY bgcolor=#FF3333
text=#ffffff>
<center><img src=logotip.jpg
border=0></center>
<br><br><br>
<center><b>Добро
пожаловать на мой сайт! </b></center>
<p align=justify>Здесь пишем текст!
</BODY>
</HTML>
Как вы видите, наш текст, прямо
таки прижат к краям. Нам нужно разместить его таким образом, чтобы он по ширине
соответствовал ширине логотипа, оставив больше пространства по краям.
Но прежде чем приступить к
этому нам придется ознакомиться с
таблицами, освоить как они задаются при помощи html кода.
А для чего собственно? спросите
вы…. Любой дизайн представляет собой комбинацию видимых и невидимых таблиц… для
того, чтобы, допустим, расположить параллельно два графических изображения
необходимо задать таблицу без рамки (border=0), состоящую из одной строки и двух столбцов, и в каждый
столбец поместить по картинке….. Итак немного о таблицах:
Продолжение следует…
| 
