Начинаю свой небольшой мануал по разработке сайтов на языке HTML 5 На начальных этапах мы затронем основы данного языка, которых полно в интернете. Моя задача собрать в одном месте урезанную информацию для начинающих , ну что же поехали,
Что же такое этот "HTML5"? многие из вас подумают, что это небольшой Update старого и всеми известного языка HTML, но я вас вынужден огорчить
Из этого следует, что это самостоятельный язык программирования при котором можно создавать как и визуализацию нашей страницы, так и писать программы работающие с медиа-файлами ( видеоплееры, аудиоплееры) В предыдущих версиях HTML этого было невозможно и чаще всего интегрировался Flash код для обработки видео файлах на базе ActionScript. но сейчас все намного проще.
Спросити ли вы: " Арчи, тогда получается что и CSS не нужно при использовании HTML 5"
И да и нет! Конечно вы можете создать страницу и прописать стилизацию в обход файлов CSS но это будет неграмотно, и очень сильно нагружать ваш сайт, представте что вы пытаетесь скачать игру со всеми дополнениями размером 1ТБ, то у Вас будет очень большая нагрузка на сеть, и весь трафик будет уходить, ведь так? А теперь представте что вы разобьете это игру на основной контет размером 500 гб. а остальное будите скачивать как дополнение, это же будет проще? конечно. да и все писать в одном текстовом формате будет очень муторно и через некоторое время можно запутатсья! Ах да давайте узнаем что такое CSS
То есть это наш скилет, в котором прописываетсявнешний вид ( размер шрифта, размер блока , стилизация блока, шапки и тд.)
Кодинг
Любой код разметки начинается с доктайпа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. Также доктайп переводит браузер в один из возможных режимов: стандартный, почти стандартный и режим совместимости. В HTML5 нет подобных делений, доктайп один единственный и при его наличии браузер работает в стандартном режиме
Так же необходимо всегда указывать кодировку вашего сайта при помощи кода
В ранних версиях HTML был код немного поболее и выглядил примерно так
Его тоже можно использовать в HTML 5 но все же привыкайте к коротким кодировкам, этов ам очень сильно поможет!
Щас я вам предоставлю первый код нашей страницы и начнем изучать теги:
Код:
<!DOCTYPE html>
Код:
<meta charset="utf-8">
Код:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Щас я вам предоставлю первый код нашей страницы и начнем изучать теги:
Код:
<!DOCTYPE html>[/SIZE][/COLOR][/FONT][/LEFT][/SIZE][/COLOR][/FONT][/LEFT][/SIZE][/COLOR][/FONT][/LEFT][/SIZE][/COLOR][/FONT][/LEFT]
[FONT=Times New Roman][COLOR=rgb(0, 0, 0)][SIZE=4]
[LEFT][FONT=Times New Roman][COLOR=rgb(0, 0, 0)][SIZE=4]
[LEFT][FONT=Times New Roman][COLOR=rgb(0, 0, 0)][SIZE=4]
[LEFT][FONT=Times New Roman][COLOR=rgb(0, 0, 0)][SIZE=4]
[LEFT]<html>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>Страница на HTML5</p>
</body>
</html>Тег <html> -является контейнером, который заключает в себе все содержимое веб-страницы
Тег <header> -задает «шапку» сайта или раздела, в которой обычно располагается заголовок.
<meta> -определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.
Тег <title> Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.
Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>. ( но мы его не будем использовать так как наша страница будет обращаться к файлу CSS )
Тег <body> - это тело нашего сайта где пишетсья основной контент и информация.
Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
Тег <header> -задает «шапку» сайта или раздела, в которой обычно располагается заголовок.
<meta> -определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.
Тег <title> Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.
Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>. ( но мы его не будем использовать так как наша страница будет обращаться к файлу CSS )
Тег <body> - это тело нашего сайта где пишетсья основной контент и информация.
Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
Ну вот и подошел наш первый урок, и в качестве домашнего задания, вам будет задано создать страницу используя данные теги и прислать в тему в качестве скрина! Спасибо ждем новых мануалов
Последнее редактирование модератором:
