Основы html

Появление html и стало причиной появление интернета в том виде, в котором мы его видим сейчас, приведя к началу роста сети и количества сайтов в ней. HTML - это сокращение от англ. "HyperText Markup Language", что в переводе означает "язык гипертекстовой разметки". HTML - это стандартный язык, который до сих пор используется для создания веб-страниц, размещаемых в интернете.

Первоначально в основе HTML лежала одна простая идея. Эта идея состояла в том, чтобы внести в обычные текстовые документы, которые люди читали на экране монитора, просто прокручивая или перелистывая страницы, как в книжке, возможность добавления ссылок, переходя по которым, человек мог сразу перейти на другую страницу или в другое место текста. Возможность добавления в своём тексте ссылок на другие страницы, в сочетании с появившимся к тому времени механизмом задания адреса для любой страницы, выложенной в сети (который известен как URL) и привела к тому, что начала формироваться взаимосвязанная сеть сайтов, воплотившаяся в тот интернет, который мы имеем сейчас.

Первый HTML был очень простым. Помимо возможностей для вставления ссылок в нём существовали средства лишь для простого форматирования текста. Зайдя на сайт lib.ru, крупнейшей библиотеки Рунета, дизайн которого почти не менялся ещё с середины 90-х, вы можете составить представление о том, как выглядели первые сайты. Однако возможности HTML скоро перестали устраивать пользователей, и сейчас язык HTML, со своими расширениями предоставляет очень большие возможности для красивого и функционального оформления сайтов.

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

Простой текст.

Помимо тега <em>, отвечающего за отображение курсивного текста, в языке HTML существует ещё очень большое количество тегов, предназначенных для самых различных целей. Используя эти теги, мы можем вручную, с помощью простого текстового редактора, такого, как, например, встроенный в Windows "Блокнот", или "Notepad++", создать веб-страничку, пригодную для размещения в интернете и просмотра в браузере. Однако есть еще специальные программы - визуальные редакторы веб-страниц, с помощью которых создавать отдельные страницы и целые сайты значительно быстрее и удобнее. Наиболее известной программой визуальных редакторов веб-страниц является Dreamweaver фирмы Adobe. Хотя с помощью визуального редактора редактировать веб-страницу значительно проще, для настоящего веб-мастера знание языка HTML является необходимым - даже лучшие визуальные реадкторы не всегда правильно или оптимально вставляют теги в html-код, и, в таких случаях, без ручного его исправления не обойтись.

Важным дополнением к языку HTML являются стандарты каскадных таблиц стилей CSS, которые были разработаны в конце 90-х. Что такое CSS? В стандартном языке HTML можно с помощью тегов задавать различное оформление текста, например, цвет, размер, тип шрифта, ширина и высота блока и т. д. Если данных параметров много, и они часто используются на странице, то нам каждый раз для каждого текста придётся вновь и вновь писать эти параметры. Ещё хуже обстоит дело, когда сайт состоит из многих страниц, и одни и те же варианты оформления текста используются много раз в разных местах. Для того, чтобы сделать оформление страниц более удобным, было введено понятие стиля, под которым стали понимать сочетание различных параметров оформления текста (или других элементов на веб-странице).

Для каждого стиля набор параметров задаётся однократно, при этом описание стиля может храниться в отдельном файле (с расширением css), а везде, где данный стиль нужно использовать, ставится лишь один тег с указанием, что для оформления блока текста или других элементов веб-страницы нужно использовать такой-то стиль. Например, если мы хотим использовать крупный жирный текст, выделенный красным цветом, вместо того, чтобы каждый раз писать в тексте веб-страницы нужный для этого набор html-тегов:

<font color="red" size="+1"><strong>Внимание!</strong></font>

мы можем сделать следующее - описать специальный стиль "newstyle":

.newstyle {
font-size: 13px;
font-weight: normal;
color: #eeeeee;
}

и затем в нужном месте указать всего один тег, в атрибутах которого пропишем нужный нам стиль, например:

<span class="newstyle">Пример</span>

Результат будет один и то же:

Внимание: Во втором случае, нам будет проще многократно применять одно и то же оформление и, что немаловажно, если мы вдруг захотим изменить затем это уже сделанное оформление, поменяв, например, цвет текста, то для этого нам нужно будет изменить описание всего в одном месте, а не редактировать множество тегов по всему пространству одной(нескольких) страницы. Ну и, наконец, в дополнение к удобству, средства CSS предоставляют расширенные возможности для оформления страниц по сравнению с обычными html-тегами.

Зачастую создание сайта начинается не в визуальном редакторе веб-страниц (ну или с ручного написания html-кода), а с создания дизайна для этого сайта. В этом случае создание html-страницы и размещение на ней блоков текста и элементов графического оформления - рисунков, анимации и т. д. (такой процесс называется вёрсткой) будет уже вторым этапом. Вёрстка сайта, имеющего сложный дизайн, может быть довольно непростым и утомительным процессом. Задача которого обеспечить правильное красивое расположение на странице блоков текста и графики осложняется необходимостью учитывать возможность того, что эта страница будет просматриваться пользователи на разных мониторах с разным разрешением экрана и в разных браузерах, которые имеют свои особенности отображения содержимого веб-страниц. В целом к построению (более-менее сложных) веб-страниц существуют два различных подхода - это вёрстка с помощью таблиц, в ячейки которых помещается содержимое, и вёрстка с помощью тегов <div>, который позволяет указывать в своих атрибутах произвольное расположение и размер блока, в котором будет помещаться его содержимое. Каждый из этих подходов имеет свои достоинства и недостатки, и между сторонниками того или иного метода неизбежно возникают споры о том, какой из них более удобный и более правильный. В целом, вёрстка с помощью таблиц является исторически более ранним методом построения сайтов и более удобна в тех случаях, когда требуется обеспечить "резиновость" дизайна и сделать так, чтобы размеры блоков на странице автоматически подстраивались под их содержимое и размеры экрана, вёрстка с помощью тегов <div> получила распространение относительно позже и оптимально подходит тогда, когда сайт имеет фиксированный дизайн.

Другие статьи по рубрике «HTML и DHTML»

Что такое DOCTYPE?

Предварительный обзор HTML 5

Добавить комментарии



[CODE] [/CODE]


Комментариев нет!