ИНТЕРНЕТ В РОССИИ И В МИРЕ

Сегодня Четверг 08.12.2016
HTML и CSS -> Основы HTML и CSS   Обновление - 01.04.2016

Основы HTML и CSS

Для публикации информации и её глобального распространения необходим универсальный язык понятный для всех компьютеров. Таким языком, используемым в интернете, является HTML (HyperText Markup Language) - язык разметки гипертекста, структурированный язык, используемый для создания веб-страниц.

Элемент HTML

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

Пример элемента HTML - <div id="mydiv">Это блок текста</div>

<div id="mydiv"> Это блок текста </div>
открывающий тег, состоящий из: div - имя тега, id - имя атрибута, "mydiv" - значение атрибута (наличие атрибута необязательно) содержимое элемента, вместо текста могут быть другие html-элементы закрывающий тег, такой же как и открывающий, но перед именем тега ставится прямая наклонная черта - слеш или слэш (от англ. slash, косая черта)

Каждая html страница состоит из подобных элементов.

Правила HTML

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

2. Имя тега и атрибута не должно содержать пробелы.

3. Значения атрибутов должны быть в кавычках: в парных или одиночных. Например, <div style="color:red">.

4. Элементы не должны пересекаться, но могут быть вложены друг в друга. Например:

<div> <span> Правильно </span> </div>
<div> <span> Не правильно </div> </span>

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

Кроме указанных выше обязательных правил, есть рекомендации составлять HTML - код придерживаясь синтаксиса XHTML:
* все теги и их атрибуты должны быть набраны в нижнем регистре (строчными символами);
* если у элемента нет закрывающего тега, надо указать слеш перед закрывающей угловой скобкой, например, <br/> (исключения теги <!DOCTYPE> и <meta>);
* нет минимизации атрибутов, например: вместо <input type="checkbox" checked> (HTML), надо указывать <input type="checkbox" checked="checked" /> (XHTML).

XHTML (EXtensible HyperText Markup Language) - расширяемый язык разметки гипертекста был разработан как промежуточный этап между HTML и XML. Проще говоря, XHTML - этот тот же HTML 4.01, но с более строгими правилами к синтаксису.

Cтруктура HTML - документа

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

<!DOCTYPE> - тег, указывающий на тип документа - стандарт версии языка разметки: <!DOCTYPE html> для HTML 5 или <!DOCTYPE [указание версии языка разметки]>.
<html> - контейнер для следующих двух основных элемента: <head> и <body>
<head>
<title> основные разделы страницы (важный элемент для поисковой оптимизации)</title>
</head>
<body> - Тело страницы, где находится видимое на экране компьютера её содержание.
</body>
</html>
Это, так сказать, "скелет" любой страницы сайта или шаблон HTML-документа. Скопируйте его в текстовый редактор, добавьте между тегами body какой-нибудь элемент с текстом, сохраните с расширением .html и откройте любым браузером.

Декларация !DOCTYPE

!DOCTYPE с указанием версии помогает браузеру правильно отображать веб-страницы.
Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - строгий (strict) синтаксис HTML:
не включает HTML 5 или устаревшие элементы, фреймы не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - переходный (loose) синтаксис HTML:
содержит все элементы и атрибуты, включая HTML 5 и устаревшие, фреймы не допускаются.
<!DOCTYPE html> - синтаксис HTML 5, который в отличие от HTML 4.01 не основывается на языке SGML, и, следовательно, не требует ссылку на DTD.

DTD (Document Type Definition, описание типа документа) определяет правила для языка разметки, чтобы браузеры корректно отображали содержимое страниц.
W3C - это сокращение названия Консорциума World Wide Web. Его руководитель Тим Бернерс-Ли (Tim Berners-Lee, родился 08.06.1955) - автор первой интернет-страницы в мире, созданной 6 августа 1991.
Миссия W3C, по их словам, заключается в раскрытии полного потенциала Всемирной паутины посредством разработки протоколов и методических рекомендаций, обеспечивающих развитие Web в долгосрочной перспективе.

Ссылка на стандарт версии языка разметки, также нужна, чтобы проверить соответствует ли ваша веб-страница стандарту W3C. Сделать это очень просто - ввести адрес веб-страницы в валидаторе W3C.

CSS

CSS (Cascading Style Sheets) - каскадные таблицы стилей. Любая веб-страница это комбинация HTML- и CSS-кодов.
Стили - это набор параметров, управляющих видом и положением html-элементов веб-страницы: цвет и размер шрифта, отступы, границы и многое другое.
Стили можно установить:
1. В отдельном файле (текстовой файл с расширением .css), указав ссылку на него в теге <link/> внутри заголовка <head>:

<head> <title>Титул</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> </head>

2. Внутри тега <style> </style>, разместив его в заголовке или любом месте странице:
 <style>
 p,div {text-indent:30px;text-align:justify;line-height:1.5;}
 </style>
3. В атрибуте style элемента:

<div> style="text-indent:30px;text-align:justify;line-height:1.5;"> Элемент с внутренним стилем </div>

Браузер читает страницу сверху вниз, поэтому значение одного и того же свойства css будет равным значению, которое указано ниже всех.
Таким образом, приоритет выполнения стилей идет в обратном порядке:
значение свойства css в атрибуте style отменяет значение в теге <style> и файле css;
значение параметра css в теге <style> отменяет значение в файле css.
Например, если в теге <style> для тега div установлен отступ - text-indent в 30px;, а в атрибуте style тега div - 0px, то текст в этом элементе будет отображен без отступа.

Синтаксис CSS для файла css и стилей в теге <style>
div, #id_div, .class_div { color: red; }
селектор - тег, идентификатор, класс открытие фигурной скобки свойство c двоеточием значение с точкой и запятой закрытие фигурной скобки

Синтаксис CSS в атрибуте style отличается только отсутствием фигурных скобок.



Поделиться:

Наверх
   
Яндекс цитирования
При любом использовании материалов сайта прямая ссылка на www.bizhit.ru обязательна. © 2010 - 2016 гг. Материал сайта, в том числе реклама, не является публичной офертой.
Обратная связь

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