Основы разработки веб сайтов [часть 1]
21.04.2008 от 
WindOfHeart
С чего начинаются сайты? А сайты начинаются с веб-страниц. Что же такое
веб-страница? Веб страница - это файл с расширением htm или html. (позже, мы поговорим о динамических веб страницах)
Все веб страницы хранятся на сервере, сервер - компьютер
со специально установленным ПО. У каждой страницы
есть адрес, к примеру -http://mysite.com/pages/index.htm. Здесь, mysite
- домен, .com - это зона. К примеру,
Ru - русские сайты. Но не всегда зона соответствует содержанию и расположению.
/pages/ - это папка на сервере. И наконец index.htm -это наш файл,
главная
страница. Приступим к её созданию…
Все страницы создаются при помощи языка разметки гипертекста - HTML. Вот -”обычный текст”. Как сделать его жирным?
Для этого существуют так называемые теги, заключая текст в них, мы придаем ему
определенные
свойства. Пример: <b>Жирный текст</b>, текст в этих тегах будет
жирным, вот так.
Я считаю, что лучше всего начать изучать HTML
на примере конкретной страницы…
<HTML>
<HEAD>
<TITLE>Мой сайт</TITLE>
</HEAD>
<BODY>
<h1>Привет всем!</h1>
<p> это мой первый сайт…
ниже мое меню </p>
<i>Меню: </i>
<a href=”http://www.yandex.ru”>Яндекс</a>
</BODY>
</HTML>
Выше представлен простейший HTML код. Давайте разберемся, что к чему…
<HTML> - тег объявляет о начале веб страницы
<HEAD> начало “головы” сайта
<TITLE>Мой сайт</TITLE> в этих тегах располагается заголовок сайта, который мы увидим в названии окна.
</HEAD> - не забываем закрыть голову
<BODY> -начинаем тело документа
<H1> </H1>теги H1-H6 называются заголовочными. Текст заключенный в них выделяется особым способом.
<p> это мой первый сайт…
ниже мое меню </p> - обычный текст, заключенный в теги p (параграф) - будет выглядеть как начало параграфа. Оставляя пустые строчки сверху и снизу.
<i>Меню: </i> Надпись Меню будет выведена курсивом.
<a href=”http://www.yandex.ru” > Яндекс </a> Ссылка на Яндекс, <a
href=”http://www.yandex.ru”> это адрес страницы на которую мы будем ссылаться, далее
идет слово “Яндекс” - это отображаемый текст ссылки. И наконец закроем тег </a>
</BODY>
</HTML> конец тела и страницы
Теперь посмотрим, что у нас получилось…
Привет всем!
это мой первый сайт…
ниже мое меню
Меню:
Яндекс
Предположим, мы хотим сделать меню в столбик. Это очень легко.
<i>Меню: </i> <br> - этот тег означает переход на новую
строку.
<a
href=”http://www.yandex.ru”>Яндекс</a>
Меню:
Яндекс
Как просмотреть свою страницу? Создайте новый текстовый документ. Пусть
это будет к примеру page.txt. Открываем его и вводим туда наш текст
<HTML>
<HEAD>
<TITLE>Мой сайт</TITLE>
</HEAD>
<BODY>
<h1> Привет всем! </h1>
<p> это мой первый сайт…
ниже мое меню </p>
<i>Меню: </i>
<a href = http://www.yandex.ru > Яндекс </a>
</BODY>
</HTML>
Далее нажимаем Файл -> Сохранить как. Выбираем Тип файла - все файлы. Вводим
имя файла page.htm, выбираем директорию и нажимаем Сохранить. Теперь открываем
файл в любом браузере, и смотрим результат! Получилось!
Памятка.
<b> </b> Жирный
<i> </i> Курсив
<u> </u> Подчеркнутый
<h1> Заголовок 1 - самый большой
<h6> Заголовок 6 - самый маленький
Есть еще один очень интересный тег:
<marquee>Привет всем</marquee>
Он дает бегущую строку:
Привет всем
Теперь изменим цвет, шрифт, размер шрифта.
Все очень просто!Красный, 2pt, Courier
Это можно сделать так:
<p><font color=”#FF0000″ size=”2″ face=”Courier”>Красный,
2pt, Courier</font></p>
<font color=”#FF0000″ - цвет шрифта, “#FF0000″ -
код цвета, на самом деле можно написать просто RED (красный). size-
размер, face - шрифт. Не забываем закрыть тег </font>
Вот некоторые основные цвета:
black = “#000000″ green = “#008000″
silver = “#C0C0C0″ lime = “#00FF00″
gray = “#808080″ olive = “#808000″
white = “#FFFFFF” yellow = “#FFFF00″
maroon = “#800000″ navy = “#000080″
red = “#FF0000″ blue = “#0000FF”
purple = “#800080″ teal = “#008080″
fuchsia = “#FF00FF” aqua = “#00FFFF”
Продолжение следует. Удачи!
Рубрики: HTML, Начинающим | 
Оставить комментарий