Основы HTML для начинающих. HTML: основы для начинающих

Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно HTML и CSS. Здесь вы сможете поэтапно изучить языки, узнать все от основ до самых сложных моментов.

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

В данном разделе размещены уроки по стандартам языка HTML5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете .



Наверное, каждый человек, который хоть раз в своей жизни сталкивался с созданием сайта, безусловно, слышал о такой связке как html и css я могу с уверенностью заявить, что если вы хотите делать сайты самостоятельно, то вам ни как не обойтись без знаний этих двух вещей.

После того как вы получили общие понятия о том, что такое html у вас в голове, явно сложилась неоднозначная картина, и я думаю это не удивительно. Пора переходить непосредственно к практике и создать-таки свой первый html документ.

Как и в языке html, так и в CSS есть свои особенности, правила и структура. В этом уроке я расскажу вам об основных понятиях языка CSS, о его структуре, устройстве и мы сделаем с вами первую CSS таблицу стилей и узнаете, как подключить таблицу стилей к html документу.

Селекторы в CSS являются основой самого языка и их изучение и понимание очень важно, поэтому в этом уроке я вам расскажу еще о нескольких видах селекторах и опишу их возможности.

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

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

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

Работа с изображениями при создании с сайта, один из ключевых моментов, как при создании дизайна, также при простой верстке или написании каких либо материалов для вашего сайта.

CSS значительно расширяет возможности работы с любыми объектами html, в этом уроке я хотел бы вам подробно рассказать о тех параметрах которые можно применять к изображениям.

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.

Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.

Теги могут вкладываться друг в друга, например,

Текст

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:

Текст

.

HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Структура веб-страницы 1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.


Рис. 1. Простейшая структура веб-страницы

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,

, , и т.д.

Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

1.1. Элемент 1.2. Элемент

Раздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

1.2.1. Элемент

Обязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

1.2.2. Элемент

Необязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

Таблица 2. Атрибуты тега Атрибут
charset Указывает кодировку символов для текущего HTML-документа:
content Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения.
http-equiv Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей.
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:

Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
name Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .
application-name указывает название веб-приложения, используемого на странице.
author указывает имя автора документа в свободном формате.
description определяет краткое описание к содержимому страницы, например:

generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:
.
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
.
Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
1.2.3. Элемент

Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.

Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.

.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

...

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:

1.2.4. Элемент

Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .

Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url

@import url(style.css);

с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:

Таблица 4. Атрибуты тега Атрибут Описание, принимаемое значение
crossorigin Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована.
href Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
hreflang Определяет язык текста в документе, на который идет ссылка.
media Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
rel Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),
.


archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов.
author ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документа.
last указывает ссылку, ведущую на последний документ в последовательности документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.

nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер.
noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.

search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.
sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.
up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
sizes Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения:
ширинах высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах высота (размеры иконки задаются в пикселях), например:
;
any - иконка может масштабироваться до любого размера.
title Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" .
1.2.5. Элемент Таблица 5. Атрибуты тега Атрибут Описание, принимаемое значение
async Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
charset Определяет кодировку символов
crossorigin Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).
anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.
use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен.
defer Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
nonce Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
src Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу.
type Используются для объявления языка сценария, использованного при составлении содержимого тега.
1.3. Элемент

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

Таблица 5. Атрибуты тега Атрибут Описание, принимаемое значение
onafterprint Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprint Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchange Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 .
onmessage Событие происходит, когда сообщение получено через источник события.
onoffline Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononline Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehide Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
onunload Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

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

В этой статье я хочу подсказать вам, как наиболее быстро и эффективно изучить этот язык, чтобы уже через месяц-два вы отлично его знали. Думаете, невозможно? Я начал изучение html в конце марта. В конце мая я уже без проблем знал 90% нужных для работы тегов.

Как выучить язык бесплатно?

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

Из справочников я могу посоветовать вам – htmlbook . Это реально крутой сайт, на котором собраны все теги, показан результат их работы с подробным описанием. Но справочник это лишь дополнительный инструмент, наибольшего эффекта можно добиться при реальной практике.

Интерактивные курсы

И тут я говорю об интерактивных курсах. Это возможность писать код и сразу видеть, как он отображается. На курсах вам будут давать задания. Сначала простые, например, превратить текст в заголовок или сделать таблицу. Потом – сложнее. В конце концов вы обретете понимание того, что можно делать с помощью HTML. Если вы думаете, что за это нужно платить, то ошибаетесь.

– это замечательный сайт с курсами по html и css. Первые 16-18 курсов бесплатно! Если вы захотите продолжить обучение и получить доступ к платным, то придется платить 300 рублей в месяц или 1800 в год. Лично я отдал 300 рублей, прошел за месяц все платные курсы и получил от этого много пользы.

Важность записей

Еще один совет от меня – записывайте! Записывайте всю новую и важную для вас инормацию. Не записав вы рискуете так и не закрепить в памяти нужные знания. Лично у меня на полке лежит три общих тетради, практически полностью исписанных и время от времени я заглядываю в них, когда забываю то или иное свойство.

Параллельное изучение html и css

HTML – это всего лишь одна веб-технология, с помощью которой формируется структура и разметка веб-страницы. За оформление в сайтостроении полностью отвечает CSS. Эти языки нужно изучать одновременно, потому что они взаимодействуют друг с другом.

Самостоятельная практика

Набравшись кое-каких знаний вы можете практиковаться самостоятельно. Как это делать? Попробуйте сверстать статью с картинками, таблицу, вложенный список, простой двухколоночный макет страницы или что-то еще. Вы должны практиковаться, потому что это единственный способ быстро заложить в мозг понимание того, как все работает. Лучше всего, конечно, в этом вопросе найти себе учителя, но за это, скорее всего, вам придется заплатить.

Уроки от команды webformyself

Webformyself – замечательный интернет-портал, который предоставляет кучу информации по сайтостроению. На их сайте вы можете найти много бесплатных статей по HTML, CSS и верстке сайтов, но также ими выпущены платные видеоуроки, цель которых максимально быстро донести до вас полезные знания.

В конце концов, у вас должна быть цель, по которой вы изучаете эти веб-технологии. Обычно это делают для того, чтобы научиться самостоятельно верстать макеты сайтов. Если у вас тоже есть такая цель, то отличным вариантом для вас будет приобретение доступа к премиум-урокам на сайте webformyself.com . В итоге вы можете получить не только доступ к урокам по HTML и CSS, но и много других. Например, по JavaScript и WordPress.

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

За сколько можно выучить языки?

В среднем, HTML и CSS можно выучить очень быстро, при правильном подходе. Например, у меня на это ушло несколько месяцев. Если знать, где брать знания, то процесс изучения можно ускорить в несколько раз.

Хорошие сайты с полезными материалами я вам дал – дальше ваше дело. В принципе, вышеперечисленные ресурсы являются наилучшими в интернете. Например, курсы от Htmlacademy прошли более ста тысяч человек, а на обновления Webformyself подписаны больше 87 тысяч людей.

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

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

Html — основа верстки и базовый компонент в организации элементов сайта

Html — это тот базис, на который впоследствии накладываются другие знания об управлении ресурсом и организации его элементов. Данный язык разметки является одним из самых главных и наиболее часто используемых. И именно возможности html позволяют располагать элементы на веб-странице в необходимом месте и придавать им нужный размер и вид.

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

  • Internet Explorer
  • Google Chrome;
  • Opera;
  • Mozilla Firefox.

При этом создатели браузеров могут самостоятельно формировать новые наборы элементов для html. В конце 90-х годов именно по причине такого активного творчества конкурирующих разработчиков браузеров и сформировалось явление «браузерная война». Его суть сводилась к тому, что некоторые html-страницы отображаются корректно в одном интернет-обозревателе, а в другом пользователь видит их с ошибками. Единственным выходом из ситуации браузерного конфликта является использование кросс-браузерной верстки.

Редакторы для создания страниц html

Создать или отредактировать html-страницу можно с использованием редакторов html. Самым простым и известным является текстовый редактор Notepad, который не написан специально для работы с разметкой html, но поддерживает эту функцию. Более функциональными и разработанными именно для работы с html являются редакторы:

  • Notepad++ — работает с исходным кодом и распространяется свободно.
  • Macromedia Dreamweaver — отличается набором расширенных функций по редактированию и просмотру создаваемой разметки, а так же имеет возможность показывать готовую страницу.
  • Adobe Dreamweaver — подобно предыдущему редактору обладает функцией показа готовой страницы, то есть позволяет пользователю просматривать редактируемый вариант в том виде, в котором она будет отображена в браузере. Эта программа является более поздней версией, которая появилась вследствие усовершенствования специалистами Adobe выкупленной у компании Macromedia их редактора. Ввиду этого обстоятельства программы Macromedia Dreamweaver и Adobe Dreamweaver очень похожи.
  • Microsoft Front Page — входит в пакет приложений Office и имеет достаточный объем возможностей для обработки и создания html-разметки.

Основные теги

Документ, в котором использована html-разметка, является простым набором компонентов, которые сегментированы с помощью специальных знаков, называемых тегами. Теги заключают элемент, тем самым придавая ему определенный вид и определяя его место. Есть и случаи, когда тег ничего не заключает: это касается сочетания
, которое отбивает строку.

Тег, который находится перед заключаемым элементом, называется открывающим и выглядит так < тег >. Тег, который находится после заключаемого элемента, называется закрывающим и выглядит так . Наличие слеша (/) для закрытия тэга обязательно, иначе компонент не сработает. Это правило относится к большинству тегов, за исключением упомянутого выше
и некоторых других. К основным тегам html относятся:

  • — тег, непосредственно указывающий на принадлежность файла к html-формату;
  • — тег, который является невидимым в документе и предназначен для обозначения имени документа и его характеристик для поисковых роботов;
  • — тег, определяющие границы видимой части документа;
  • — тег, отправляющий название страницы в оглавление;
  • , , , — теги форматирования текста и создающие жирный текст, наклонный текст, отбивающие абзац, формирующие нумерацию.

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

Для создания html страницы необходимо последовательное выполнение описанных ниже действий. Использовать можно обычный блокнот.

1) Создаём документ. В него вставляем следующий код:

Содержимое этого элемента будет отображается в браузере

Примечание: обязательно в «» указываем кодировку документа как показано выше.

2) Далее: файл - сохранить как. В поле «тип файла» вместо «txt» выбираем «All files» (все файлы), в поле codepage (кодировка страницы) - выбираем 65001 (UTF-8), в поле «имя файла» после названия документа ставим точку и расширение html (.html), далее нажимаем сохранить. У нас в той же папке появился второй документ, но уже в html. Это и есть наша веб страница, которую теперь можно открыть в любом браузере.

Примеры html кода
  • Текст разбитый на параграфы

Параграф 1

Параграф 2

Параграф 3

  • Заголовки и абзацы с выравниванием по центру

Это заголовок выровнен по центру.

Заголовок второго уровня выровнен по центру.

Текст абзаца выровнен по центру.

  • Мета-теги, название страницы (title), описание страницы (description) и ключевые слова (keywords)

Название страницы

Абзац с ключевыми словами указанные в «keywords»

CSS — дополнение механизмов html

Там, где функционал html оказывается недостаточным, на помощь приходят каскадные таблицы стилей — CSS. Они представляют собой более совершенные мощные параметры для изменения внешнего вида веб-страницы. CSS функционируют вместе с возможностями html. Эти два набора параметров взаимодействуют и никаким образом не заменяют друг друга.

Параметры CSS могут быть размещены в самом веб-документе путем использования:

  • тегов , которые находятся между тегами и ;
  • атрибута style, располагающегося внутри любого другого тега.

Также указания CSS могут быть присоединены к веб-документу с помощью:

  • тега , размещаемого между и ;
  • директивы @import, располагаемой между тегами и .

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

Способы подключения таблиц CSS стилей

Существует несколько способов подключения CSS к html:

  • встроенные таблицы, при котором в заголовок страницы встраивается таблица стилей с использованием тега ;

Страница со встроенной таблицей стилей

Ztx {

font-size: 12px;
color: #4A4A4A;
}

Ztx_2 {
font-family:Verdana, Geneva, sans-serif;
font-size: 18px;
color:#F00;
background-color:#3FF;
}

Отформатированный текст

К этому тексту уже применён второй стиль

Примечанеие: «font-family» — это название шрифта, «font-size» — размер шрифта, «color» — цвет шрифта, «background-color» — цвет фона.

  • внутренние таблицы CSS, когда таблица помещается внутри элемента html;

Страница со стилями внутри элемента

Отформатированный текст

К этому тексту уже применёт второй стиль

  • внешние таблицы CSS, при использовании этого способа подключения таблицы стилей создаются отдельным файлом.
    Такой способ является наиболее удобным и поэтому часто используемым. Подключение в данном случае производится с использованием тега и будет выглядеть следующим образом:

Подключение CSS к HTML

Это заголовок первого уровня

Здесь просто текст

Это заголовок второго уровня

Здесь просто текст

А вот содержимое CSS файла «style.css» таким образом для текста, которому присвоен класс «form» применяются стили, в данном случае: название шрифта, размер шрифта и цвет фона.

Form {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-color:#3FF;
}


Информационный материал подготовлен сотрудниками студии веб-дизайна «БЕЛЫЙ ПАРУС»

Мы искренне надеемся, что он будет полезен всем, кто решил овладеть основами html и css.

This entry was posted on Воскресенье, Март 17th, 2013 at 08:47 and is filed under . You can follow any responses to this entry through the feed. Responses are currently closed, but you can from your own site.

HTML - язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки - , чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.

Визуальные редакторы

Новички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах.

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

Теги

Как упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например, ..., где вместо точек находится содержимое. Первый из них показывает, где начинается тег, а второй закрывает его. Внутри могут находиться другие элементы разметки страницы, они могут вкладываться друг в друга подобно матрёшке. Тут важно своевременно закрывать теги, чтобы страница отображалась корректно.

Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«...», где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы.

Структура документа

Каждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы.

Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные — .... Всё, что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа. В нём также содержатся ещё несколько обязательных тегов, которые будут рассмотрены ниже.

Head

Внутри тега ... содержится информация технического характера, которая не будет отображаться на странице, но, тем не менее, является важной частью документа HTML. Основы сайта закладываются именно в этом месте, здесь выбирается кодировка и вводится название страницы. Оно содержится внутри обязательного тега .... Отображается название в верхней части браузера, где также можно разместить небольшую иконку, характеризующую содержимое страницы. Желательно сразу указать кодировку документа для его корректного отображения. Это можно сделать при помощи тега . Метатеги предоставляют данные о структуре страницы и обычно располагаются внутри head.

Link

Знание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type - на его тип.

Body

Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них:

Рекомендуем другие статьи
Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние
Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние
Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих
Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих
Завис планшет - что делать?
Завис планшет - что делать?