Языки

ulum.ru

HTML и CSS

HyperText Markup Language

HyperText Markup Language (язык гипертекстовой разметки) - это компьютерный язык для разметки документов во Всемирной паутине интернета.

Тому кто хочет понять язык HTML необходимо ознакомиться вначале с понятием тег. Основные теги, которые надо узнать в первую очередь, это doctype, html, head, title, meta, body, h1, h2, h3, p, a, br, img, b, i , strong, em, ul, ol, li, table, tr, td, pre, и другие. Большинство тегов парные, из перечисленных это все, кроме doctype, meta, br.

Выражение "парный тег" обозначает, что есть открывающий и закрывающий тег, например:

<h1>Главный заголовок статьи</h1>

Где <h1> открывающий тег, а </h1> закрывающий тег;

Закрывающий тег отличается от открывающего наличием косой черты.

Мнемоники или специальные символы HTML

Некоторые символы имеют особое значение в HTML или не входят в 8-ми или 7-ми битную кодировку, поэтому, если необходимо, чтобы пользователь увидел такие символы на экране браузера, то требуется написать специальную комбинацию символов, например:

Значёк авторского права &copy;
знак градуса &deg;
амперсанд &amp;
меньше &lt;
больше &gt;
параграф &sect;
знак ударения &acute;

Такие мнемоники начинаются знаком амперсанд и заканчиваются точкой с запятой.

Указанные выше специальные комбинации выводят на экран следующие знаки:


Знак авторского права ©
знак градуса °
амперсанд &
меньше <
больше >
параграф §
знак ударения ´

Существует большое количество свободных редакторов и IDE облегчающих HTML-вёрстку, например: NetBeans, Notepad++, GEdit, Bluefish и другие. Некоторые простоподсвечивают код и выдают подсказку, а некоторые предоставляют возможность сразу видеть как выглядит веб-страница. Но верстать при необходимости можно и в обычном блокноте.

Пример кода начала HTML-страницы

Начало кода веб-страницы в современном стандарте HTML5 обычно выглядит следующим образом:

HTML doctype head title meta charset

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

Cascading Style Sheets

Понятие о CSS через простые примеры

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


* {
	margin:0;
	padding:0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background:#CCCCCC;
}
#all {
	width:800px;
	margin:auto;
	background:#EEEEEE;
}



Заявление

* {
	margin:0;
	padding:0;
}

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


Объявление

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background:#CCCCCC;
}

рассказывает, что нужно использовать шрифт Arial или Helvetica, 
а если их нет, то применить шрифт без засечек.
Буквы должны быть высотой в 12 пикселей,
а фон страницы должен быть светло серым. 


Следующий блок

#all {
	width:800px;
	margin:auto;
	background:#EEEEEE;
}

повествует, о том, что некий уникальный блок с id="all"
должен быть шириной 800 пикселей и автоматически расположиться по центру,
а его фон должен быть светлее, чем общий фон страницы,
ведь шестнадцеричное EEEEEE больше, чем СССССС.
На верх страницы

HTML и CSS. Знакомство с HTML. Мнемоники или специальные символы HTML. Понятие о CSS..