Элементы Ресурсы
:
x
0
 

Интернет-проекты

ПРАНДИТ
Инфонетекс
Автоспорт
Кулинарния
Эзотерика
Урлинки
Все проекты
Обратная связь Игры Настройки
  Партнёры Каталог
 

Партнёры

Золотой Гуру   Мазаяки Проджект   Регистратор доменов Webnames.ru
 

Содержание

Реклама и PR
IT-системы
Веб-дизайн
Домены
Хостинг
HTML
HTML-теги
Спецсимволы
CSS
CSS-параметры
Термины
Приёмная
Регламент
Настройки
Онлайн-игры
Вебмастерская
Партнёры Карта сайта
Все проекты
 

HTML-вёрстка

Программирование HTML-документов

HTML – язык веб-программирования, использующий определённые инструкции для передачи и отображения данных через Интернет-браузер (либо через другие специальные клиентские программы). Такие инструкции принято называть Дескрипторами или Тегами. Собственно, именно дескрипторы "подсказывают" браузеру то, в каком месте веб-страницы нужно отображать текст, а в каком рисунки и т.п.

В HTML-документе все служебные команды (теги) заключены между специальными символами "<" и ">". Большинство команд имеют как открывающий <...>, так и закрывающий </...> теги. А конструкция вида <...> ... </...>, состоящая из открывающего и закрывающего тегов, называется Контейнером.

Перед началом практических экспериментов следует усвоить, что HTML-документ начинается с открывающего тега <HTML> и заканчивается закрывающим тегом </HTML>, между которыми находятся, так называемые, Заголовок <HEAD> и Тело <BODY>. В заголовке содержится информация относительно свойств документа, например, название веб-страницы. А в теле документа размещается весь основной код (см. Листинг 1).

<HTML>

<HEAD>

<TITLE>Заголовок веб-страницы</TITLE>

</HEAD>

<BODY>

<P>Здравствуйте! Это моя первая самостоятельная страничка!</P>

</BODY>

</HTML>

x

В приведенном примере продемонстрирована структура простейшей HTML-страницы. Как уже было упомянуто ранее, HTML-документ начинается со служебного слова <HTML>. Данный тег символизирует начало документа и указывает браузеру на то, что перед ним именно HTML-документ. В конце документа указывается закрывающий тег </HTML>. Между двумя этими тегами располагаются заголовок и тело документа.

По аналогии со строением человека, заголовок <HEAD> структурно расположен строго выше тела <BODY>. В примере (см. Листинг 1) заголовок содержит контейнер <TITLE>...</TITLE>, который служит для определения названия веб-страницы. И в случае если Вы решите задать документу название "Мой собственный проект", необходимо в заголовке разместить следующую конструкцию: <TITLE>Мой собственный проект</TITLE>.

Для отображения текстового содержимого на веб-странице можно воспользоваться контейнером <P>...</P>, который используется для разделения текста на абзацы. И если название и другие свойства документа указываются в заголовке <HEAD>, то все содержимое (контент) размещается непосредственно в теле документа между тегами <BODY> и </BODY>.

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

x

Следует понимать, что HTML-документ по сути является текстовым файлом. С той лишь разницей, что обычный текстовый документ имеет расширение .txt. А для HTML-документов используются специальные расширения файлов, преимущественно, .html или .htm. Другими словами, если в текстовом редакторе ввести HTML-код, а затем сохранить файл, указав расширение .html, получится HTML-страница.

Удостовериться в этом достаточно просто. Нужно лишь открыть текстовый редактор и скопировать в него HTML-код из примера (см. Листинг 2). Пользователи операционной системы Windows в качестве редактора текста могут использовать встроенную в ОС программу Блокнот (для запуска Блокнота необходимо зайти в меню "Пуск / (Все) программы / Стандартные / Блокнот"). Пользователи иных ОС могут воспользоваться аналогом Блокнота, инсталлированном в операционную систему. Кроме того, существуют специальные программные средства для веб-разработки.

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>Здравствуйте! Это моя первая самостоятельная страничка!</P>
</BODY>
</HTML>
x

После запуска текстового редактора и размещения в нем программного кода, нужно будет сохранить файл с указанием расширения .html (например, "index.html"). Осуществить это можно при помощи команды "Сохранить как..." ("Save as..."). И если затем открыть в браузере сохраненный файл, должна будет отобразиться Ваша собственная веб-страница (см. Иллюстрации).

Иллюстрированные примеры

Иллюстрированный пример собственного программного HTML-кода

Рисунок 1

Рисунок 2

Рисунок 3

Рисунок 4
x

В рамках форматирования веб-страниц отдельное внимание следует уделить регистру (т.е. представлению текста строчными либо заглавными символами). Служебные теги не чувствительны к регистру. И в зависимости от личных предпочтений, к примеру, можно писать <BODY>, <body> или даже <Body>. Но весь текст, заключенный между тегами, будет отображаться в браузере с учетом регистра. И если текстовый контент будет написан прописными (заглавными) буквами, он точно также должен быть отображен и в браузере.

Также для управления регистром можно воспользоваться специальными настройками, изменяющими свойства текста. Так, например, для тегов можно указать определенные атрибуты или параметры. И если для абзаца <P> при описании стилей оформления задействовать специальный параметр "text-transform" с присвоенным значением "capitalize", весь текст абзаца будет трансформирован таким образом, что каждое новое слово будет начинаться с заглавной буквы. Тем не менее, в случае если текст будет набран ЗАГЛАВНЫМИ символами, он все же не должен подвергнуться изменению.

x
A
 

Социальные Медиа

Мы в соцсетях:
Поделиться с друзьями: