[Мануал] HTML 5

Тема в разделе "Сайтостроение и дизайн", создана пользователем archi_dias1, 13 фев 2017.

  1. archi_dias1

    archi_dias1

    Сообщения:
    100
    Баллы:
    6
    [​IMG]
    "Якорь мне в печень" дорогие пираты вот и начинаю свой небольшой мануал по разработке сайтов на языке HTML 5 На начальных этапах мы затроем основы данного языка, которых полно в интернете. Моя задача собрать в одном месте урезанную информацию для начинающих , ну что же поехали,
    [​IMG]
    Что же такое этот "HTML5"? многие из вас подумают, что это небольшой Update старого и всеми известного языка HTML, но я вас вынужден огорчить

    HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.
    Нажмите, чтобы раскрыть...​
    Из этого следует, что это самостоятельный язык программирования при котором можно создавать как и визуализацию нашей страницы, так и писать программы работающие с медиа-файлами ( видеоплееры, аудиоплееры) В предыдущих версиях HTML этого было невозможно и чаще всего интегрировался Flash код для обработки видео файлах на базе ActionScript. но сейчас все намного проще.
    Спросити ли вы: " Арчи, тогда получается что и CSS не нужно при использовании HTML 5"
    И да и нет! Конечно вы можете создать страницу и прописать стилизацию в обход файлов CSS но это будет неграмотно, и очень сильно нагружать ваш сайт, представте что вы пытаетесь скачать игру со всеми дополнениями размером 1ТБ, то у Вас будет очень большая нагрузка на сеть, и весь трафик будет уходить, ведь так? А теперь представте что вы разобьете это игру на основной контет размером 500 гб. а остальное будите скачивать как дополнение, это же будет проще? конечно. да и все писать в одном текстовом формате будет очень муторно и через некоторое время можно запутатсья! Ах да давайте узнаем что такое CSS
    CSS (/siːɛsɛs/ англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
    Нажмите, чтобы раскрыть...​
    То есть это наш скилет, в котором прописываетсявнешний вид ( размер шрифта, размер блока ,
    стилизация блока, шапки и тд.)
    [​IMG]
    Кодинг
    Любой код разметки начинается с доктайпа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. Также доктайп переводит браузер в один из возможных режимов: стандартный, почти стандартный и режим совместимости. В HTML5 нет подобных делений, доктайп один единственный и при его наличии браузер работает в стандартном режиме

    Код:
    <!DOCTYPE html>
    Так же необходимо всегда указывать кодировку вашего сайта при помощи кода
    Код:
    <meta charset="utf-8">
    В ранних версиях HTML был код немного поболее и выглядил примерно так
    Код:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    Его тоже можно использовать в HTML 5 но все же привыкайте к коротким кодировкам, этов ам очень сильно поможет!

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

    Код:
    <!DOCTYPE html>
    <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> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

    [​IMG]
    Ну вот и подошел наш первый урок, и в качестве домашнего задания, вам будет задано создать страницу используя данные теги и прислать в тему в качестве скрина! Спасибо ждем новых мануалов

Поделиться этой страницей