Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу высшего качества --

Каркас страницы HTML. Создаём файл

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

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

Каркас страницы по версии HTML 5

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
</head>
<body>
Контент
</body>
</html>

И каркас страницы по версии HTML 4.01 Transitional, являющейся переходной между 4 и 5 версиями, и актуальной до сих пор.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>
<body>

</body>
</html>

Как видите, версия HTML 5 заметно проще своих предшественников.

Кратко рассмотрим, что-же означают все эти слова и символы.

Первая строка HTML 5

<!DOCTYPE HTML>

Первая строка HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

указывает на тип создаваемого нами документа.

Здесь указано, что создаётся html-документ по версии html 5 или 4.01.

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

Первый тег в столбике — это <html>. Обратите внимание на то, что и последний тег тоже только со слешем (наклонной чертой).  Это классический пример парного тега, где сначала идёт открывающий элемент, а потом закрывающий.

Значит теги бывают парные, и представляют из себя контейнера для html-кода, но бывают и одиночные. Придёт время и мы их так же разберём. Данный тег <html> является контейнером для всей страницы.

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

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

Далее тег <body>(тело) так же парный, то есть так же контейнер внутри контейнера html, и в нём уже будут расположены форматирующие теги, которые будут указывать на расположение абзацев, картинок, ссылок, и вообще всего того, что мы видим на мониторе.

Из примеров видно, что код каркаса в HTML 5, заметно сократился. В теге <!DOCTYPE> нет больше описания версии и типа файла, в <meta> остался только charset, для указания кодировки.

И ещё, при подключении таблиц стилей больше не нужно будет указывать type="text/css" в тегах <link> и <style>

Теперь давайте откроем установленный у нас редактор Notepad++. Так как мы будем пользоваться им очень часто, предлагаю разместить его в меню Пуск. Для этого нужно щёлкнуть по значку Пуск, затем правой клавишей, по открывшейся строчке с блокнотом и карандашом, и в открывшемся меню выбрать Закрепить на панели задач

Затем щёлкнем по его иконке, появившейся в нижней строке монитора, и нам откроется домашняя страница редактора. Щёлкаем по первой вверху иконке (новый), и открываем новый документ, в который и скопируем, или перепишем(как угодно), каркас страницы.

Копируем код каркаса страницы в новый документ в Notepad++

Хочу сразу предупредить, что мельчайшая ошибка  в коде (нет точки, или кавычек и тому подобное), приводит к тому, что код не работает.

После этого, в строке панели управления(вверху), находим пункт Encoding(кодировка), и в открывшемся меню выбираем Преобразовать в UFT-8.

Выбираем кодировку в Notepad++

И чтоб в дальнейшем не волноваться по этому поводу, щёлкнем по пункту Settings(опции), затем по строке Настройки”, в окне настроек – Новый документ, и ставим точку в строке UTF-8. Затем Закрыть

Устанавливаем кодировку в Notepad++ 

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

Открываем папку site, в строчке Имя файла убираем nev1, пишем index.html, и жмём Сохранить.

Сохранение файла каркаса страницы в директории сайта

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

Файл каркаса страницы в Notepad++

Поздравляю! Вы только-что создали файл. Теперь, если зайти в директорию сайта (Пуск-Компьютер-Документы-site), то там Вы увидите такую конструкцию:

Директория сайта

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

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

Желаю творческих успехов.

Короткий отдых
Перемена

Чем отличается мужское общежитие от женского?
В мужском общежитии дурдом, а в женском — домдур

Раньше студенты учились и подрабатывали, а теперь работают и подучиваются.

Создание директории сайта < < < В раздел > > > Шаблон сайта на чистом HTML

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.
А так же:

34 комментария на «Каркас страницы HTML. Создаём файл»

  1. stariс говорит:

    Нормально! Первый раз с таким сталкиваюсь.

  2. ShenSiGe говорит:

    Спасибо Вам за информацию. По вашим инструкциям сделал сайт на базе роутера. Т.е. вся информация поместилась на старенький роутер с прошивкой OpenWRT, поставил его на даче — и оттуда транслируется мой сайт.

  3. stariс говорит:

    Если что — спрашивайте.

  4. Виктор 58 говорит:

    Большое спасибо за ваш труд! Многое читал, но всё как-то разрозненно. На вашем сайте вроде собирается в стройную систему. Думаю, что сайт будет с вашей помощью!

  5. stariс говорит:

    Notepad++ поддерживает очень много расширений. Вы в каком сохранили? Если случайно в .mp или .mpg то это видео. И браузер будет открывать его в плеере. Да их полно видео расширений, многие есть в списке редактора.

  6. junger говорит:

    Здравствуйте, у меня вот какой вопрос в 7-й версии нотпада папка вместо index
    показывается как Windows Media Player, что бы это значило…

  7. Наталья говорит:

    Как все просто! Спасибо : )

  8. stariс говорит:

    Добрый! Тут вот в чём дело: для чтения файла php нужен интерпретатор, который есть в Денвере и на всяком другом хостинге, а у браузера его нет, браузер получает от хоста уже так сказать преобразованный код, т.е. html + css. Увидеть преобразователь можно зайдя в phpMyAdmin. Наверное встречался такой вопрос: «А какая версия php используется на Вашем хостинге?». Вот это и есть интерпретатор для браузера. Notepad — это просто редактор без php. То есть php писать в нём можно, но он передаёт его в том виде в котором код написан и браузер его не читает.

  9. Наталья говорит:

    Добрый день, Сергей. Наверное, я что-то где-то пропустила. Не пойму, почему файл index.php через Запуск Notepad в браузере не читается, а в Денвере читает все. Какая разница для файла?

  10. stariс говорит:

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

  11. stariс говорит:

    Я скину ему на почту уведомление о получении ответа на его вопрос.

  12. Наталья говорит:

    Почему для index файла выбрана версия html 4.01 Transitional, а не HTML 5 ?

  13. Наталья говорит:

    Сергей, можно оставить комментарий для Юрия? (2016-05-13) У меня такая же история получилась. В папке Site на своем компьютере щелкнуть мышкой по файлу index и в последней строке «Свойства» на закладке «Общие» в строке «Тип файла» есть кнопка «Изменить»

  14. stariс говорит:

    А где такой значок Юрий? Не пойму вопроса.

  15. Юрий говорит:

    В отличие от Вашего, в моём компьютере файл Index.html сохранился не под значком Google, а Exsplower. Где можно изменить?

  16. kirat говорит:

    Извините а вы не знаете как «преобразовать в utf-8 » на проге sublime text 2? за ответ и потраченное время буду благодарен)))

  17. stariс говорит:

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

  18. Александр говорит:

    Здравствуйте.У не сохраняется файл в формате HTML. Что делать? Подскажите.

  19. stariс говорит:

    Если решили заняться веб, то установите несколько популярных браузеров на свой комп, и проверяйте то что сделали во всех. Не все свойства css оладают кроссбраузерностью, и к ним применяются вендорские перфисы, о которых я говорил в посте про тени. Но это к основам не относится. Постепенно так и так до этого дойдёте.
    У каркаса нет версии. Чисто творческое произведение. По другому называется вёрстка. Как сверстаешь, так и будет. Есть только основные правила, которых надо придерживаться, и некоторые из них показаны в моих постах. Вообще, лучше использовать готовый шаблон категории Минимализм, где основные позиции (картинка) уже свёрстаны, и по мере освоения html и css, подправлять его, оформлять по своему имеющиеся элементы, добавлять что-то, и убирать не нужное. Шаблон лучше сразу выбирать адаптивный, так как уже сейчас, половина посетителей с мобил. Бывает их даже больше.

  20. Ольга говорит:

    Здравствуйте! Спасибо за ваши труды! Имеет ли значение с каким браузером работаешь,и всё-таки какой версии каркас страницы брать, от чего это зависит?

  21. stariс говорит:

    Раз для всех экранов, то min-width и max-width не нужно. У тебя же нормально сжимается до 700 px, так пусть и дальше жмётся. background-size тоже не нужно. За масштабирование отвечает мета-тег viewport. Про него в конце вот этой статьи

  22. Алик говорит:

    хочу адаптировать шапку под все размеры экрана
    может что то с каркасом сделать надо?
    шапка сделана под экран шириной 1920px
    пробывал вот это
    #all {
    position: absolute;
    top: 0px;
    left: 0px;
    min-width: 700px;
    max-width: 1920px;
    width: 100%;
    height: 180px;
    background-image: url(/img/bg01.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    }
    поставил норм но только для моего экрана,
    захожу с другого компа то шапка сужается и стает маленькой ну не то что мне надо,

  23. stariс говорит:

    Конечно постараюсь помочь, только Вы мне напишите название книги и автора.

  24. Нуриля говорит:

    Здравствуйте, я не могу раскодировать документ, отрывки из книги, которые для меня важны, установила программу Notepad, но я не могу раскодировать , не могу вникнуть вообще, мне 59 лет, возможно ума мало уже. Помогите пожалуйста! Заранее спасибо
    Емейл указан. Нуриля.

  25. stariс говорит:

    Код таблицы — здесь. Если вам нужно сделать первый столбик без строк, примените атрибут colspan.
    Вообще-то, в Вашем случае лучше сделать не таблицу, а блоки. Вот тут посмотрите.
    Только блок 4 расположите слева, и заполните текстом, а в блоки 1,2,3, или сколько у вас там намечается, поместите картинки.

  26. Гуля говорит:

    Здравствуйте! А как можно создать таблицу? Я хотела бы про биографию человека написать. Я хочу чтобы было так про него, какой он, внутри сам текст, а на другой стороне таблицы фотогалерея о самом сайте, и внизу кнопка наверх чтобы вернуться в начало.

  27. stariс говорит:

    Пожалуйста. Если что-то будет непонятно — спрашивайте. Всегда отвечу.

  28. ольга говорит:

    Вы такой молодец! Ваш сайт просто супер!!! Давно такой искала и вот наконец то нашла!!! Я в восторге!!! Спасибо!

  29. stariс говорит:

    Не получилось. Пусто.

  30. Наталья говорит:

    через Word скопировала:

    ….


    посмотрите, что не так. Спасибо большое за помощь

  31. Наталья говорит:

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

  32. stariс говорит:

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

  33. Наталья говорит:

    Здравствуйте! Хотела вас поблагодарить за ваш труд, кот. мне очень пригодился для сайтостроения. Сделала валидацию файла и получила ошибку, которую не знаю как исправить:
    Unable to Determine Parse Mode!

    The validator can process documents either as XML (for document types such as XHTML, SVG, etc.) or SGML (for HTML 4.01 and prior versions). For this document, the information available was not sufficient to determine the parsing mode unambiguously, because:

    the MIME Media Type (text/html) can be used for XML or SGML document types
    No known Document Type could be detected
    No XML declaration (e.g ) could be found at the beginning of the document.
    No XML namespace (e.g ) could be found at the root of the document.
    As a default, the validator is falling back to SGML mode.

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

  34. ученик говорит:

    отлично

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *