Каркас страницы HTML. Создаём файл
Для создания HTML документа необходимо написать каркас страницы. Вам этого делать не придётся. Копируйте готовый код, и читайте, что означают символы в коде.
В предыдущей статье мы создали Директорию сайта, а в этой приступим к написанию страницы, или созданию html документа (файла), что в общем-то одно и тоже.
Каркас страницы по версии HTML 5
И каркас страницы по версии HTML 4.01 Transitional, являющейся переходной между 4 и 5 версиями, и актуальной до сих пор.
Как видите, версия HTML 5 заметно проще своих предшественников.
Кратко рассмотрим, что-же означают все эти слова и символы.
указывает на тип создаваемого нами документа.
Здесь указано, что создаётся html-документ по версии html 5 или 4.01.
Далее идёт столбик из тегов. Тег — это конструкция языка, которая указывает браузеру, что нужно отображать на экране монитора. Какие-то теги говорят, что нужно отображать заголовок, какие-то абзац и так далее. В каркасе страницы находятся теги называющиеся тегами верхнего уровня.
Первый тег в столбике — это . Обратите внимание на то, что и последний тег тоже только со слешем (наклонной чертой). Это классический пример парного тега, где сначала идёт открывающий элемент, а потом закрывающий.
Значит теги бывают парные, и представляют из себя контейнера для html-кода, но бывают и одиночные. Придёт время и мы их так же разберём. Данный тег является контейнером для всей страницы.
Следующий тег, так-же парный — , что в переводе с английского означает голова. Этот контейнер, уже сам находящийся в контейнере html, содержит в себе специальные теги, действие которых не всегда явно видно на мониторе.
Они говорят, в какой кодировке сделана страница, какие скрипты и таблицы стилей должны на ней подключаться, ну и какое название страницы будет отображено во вкладке браузера.
Далее тег (тело) так же парный, то есть так же контейнер внутри контейнера html, и в нём уже будут расположены форматирующие теги, которые будут указывать на расположение абзацев, картинок, ссылок, и вообще всего того, что мы видим на мониторе.
Из примеров видно, что код каркаса в HTML 5, заметно сократился. В теге нет больше описания версии и типа файла, в остался только charset , для указания кодировки.
И ещё, при подключении таблиц стилей больше не нужно будет указывать type=»text/css» в тегах и
Теперь давайте откроем установленный у нас редактор Notepad++. Так как мы будем пользоваться им очень часто, предлагаю разместить его в меню Пуск. Для этого нужно щёлкнуть по значку Пуск, затем правой клавишей, по открывшейся строчке с блокнотом и карандашом, и в открывшемся меню выбрать Закрепить на панели задач
Затем щёлкнем по его иконке, появившейся в нижней строке монитора, и нам откроется домашняя страница редактора. Щёлкаем по первой вверху иконке (новый), и открываем новый документ, в который и скопируем, или перепишем(как угодно), каркас страницы.
Хочу сразу предупредить, что мельчайшая ошибка в коде (нет точки, или кавычек и тому подобное), приводит к тому, что код не работает.
После этого, в строке панели управления(вверху), находим пункт Encoding(кодировка), и в открывшемся меню выбираем Преобразовать в UFT-8.
И чтоб в дальнейшем не волноваться по этому поводу, щёлкнем по пункту Settings(опции), затем по строке Настройки”, в окне настроек – Новый документ, и ставим точку в строке UTF-8. Затем Закрыть
После этого, нужно щёлкнуть по третьей иконке слева Сохранить, и в появившемся окне поиска, находим созданную нами на предыдущей странице Директорию сайта.
Открываем папку site, в строчке Имя файла убираем nev1, пишем index.html, и жмём Сохранить.
После чего наш документ должен приобрести вот такой красивый вид, и в окошечке над ним должно появиться название index.html
Поздравляю! Вы только-что создали файл. Теперь, если зайти в директорию сайта (Пуск-Компьютер-Документы-site), то там Вы увидите такую конструкцию:
Как видите, файл index.html занял своё место в корне сайта, и в следующих статьях этого урока, мы научимся заполнять его кодом, и просматривать в браузере то, что у нас получилось.
Если вы сохраните эту страницу в закладках, то в дальнейшем вам не придётся в ручную писать каркас страницы, так как достаточно будет заглянуть сюда и скопировать код.
Перемена
Чем отличается мужское общежитие от женского?
В мужском общежитии дурдом, а в женском — домдур
Раньше студенты учились и подрабатывали, а теперь работают и подучиваются.
Теги для создания каркаса сайта
Под каркасом (скелетом) понимаются самые основные блоки, которые разделяют содержимое друг от друга. Самый простой пример: шапка – блок слева – блок справа и подвал (футер). В этих блоках в свою очередь может быть очень много других, вложенных элементов, но они уже являются дополнительной разметкой, которая добавляется на втором этапе.
Как его создать
Итак, мы рассмотрим все теги, которые вам могут для этого пригодиться. Начнем с самых базовых.
— самый главный контейнер, в который помещается вся страница. Собственно, сегодня его можно даже не писать, и без него все будет замечательно работать, но ради соблюдения правил можно и написать.
— важный контейнер для хранения информации, которая не будет выведена на страницу, но играет большую роль в ее формировании.
Онлайн курс «Веб-разработчик с нуля»
Изучите курс и разработайте онлайн-систему для администрирования кинозалов, сеансов и предварительного бронирования билетов
Вы научитесь верстать сайты на HTML и CSS, изучите JavaScript. Сможете разрабатывать на PHP серверную часть сайта — и сделаете первые проекты для портфолио.
— сюда помещают все тело страницы, то есть ее содержимое, поэтому его наличие в коде обязательно.
Важные настройки, которые обязательно должны быть определены
Итак, под основой сайта лично я понимаю не только то, что вы видите непосредственно своими глазами, но и те куски кода, которые помогают содержимому выводиться правильно. Одной из таких строчек является — , она определяет тип страницы и ее нужно поместить даже не в head, а в самое начало, перед глобальным контейнером. Таким образом мы укажем, чтобы наша разметка интерпретировалась по стандарту html5.
Все остальные настройки указываются в блоке head. Это кодировка, подключение таблиц стилей, скриптов (хотя их можно подключать и в конце body), задание тайтла (Title), других мета-тегов и многое другое.
Создание каркаса старым способом на HTML4
Совсем до недавних пор это был самый популярный способ, даже сегодня, я думаю, некоторые продолжают его использовать. Он заключается в том, что все элементы создаются одинаково – с помощью тега div, который обозначает пустой блочный контейнер. В зависимости от расположения и роли, каждый такой блок получал свой идентификатор, чтобы к нему можно было обратиться позже через стили.
Таким образом, разметка выглядела примерно так:
Разработчики ориентировались по названиям идентификатором, именно они позволяли определить, что представляет собой элемент. Таким образом, использовался всего один тег для создания структуры сайта – div, только с разными id (или стилевыми классами).
Как создать разметку страницы по новому на HTML5
Новая версия языка разметки сильно изменила этот процесс. Начиналось все с того, что веб-разработчики начали осознавать необходимость создания новых тегов. Шапку так часто называли div что разумно было создать специальный элемент header, который был бы предназначен именно для этого элемента на сайте.
Собственно, именно это и произошло, только помимо header появилась еще масса других. Давайте я покажу пример каркаса на HTML5, а потом уже его объясню:
Как видите, идентификаторы по-прежнему прописываются элементам, но теперь у нас в самых названиях тегов заложена роль элементов. Так, nav создан для вкладывания в него важных ссылок, а по сути, создания главного меню сайта. Section – это отдельная секция на сайте, со своим заголовком и главной мыслью.
Aside – что-то вроде второстепенной информации, поэтому некоторые в этот элемент вкладывают боковую колонку. Хотя для этой цели годится и section, ведь сайдбар – по сути, отдельная секция на веб-странице.
Ну и, наконец, новый тег footer создан для вывода подвала. Идентификаторы в этом случае перестали выполнять роль единственных информаторов на странице, хотя их имена подобраны так, чтобы указывать на роль блоков. Заметьте, что шапка получила название main-header и это неспроста. Дело в том, что на веб-странице может быть несколько «шапок». Это может быть шапка статьи или боковой колонки.
Меню тоже получило соответствующий идентификатор, потому что кроме него на сайте может быть и другая навигация, но меньшая по своей важности.
Онлайн курс «Веб-разработчик с нуля»
Изучите курс и разработайте онлайн-систему для администрирования кинозалов, сеансов и предварительного бронирования билетов
Вы научитесь верстать сайты на HTML и CSS, изучите JavaScript. Сможете разрабатывать на PHP серверную часть сайта — и сделаете первые проекты для портфолио.
Итак, мы с вами разобрали простейший пример создания скелета, если вы хотите получить больше информации по использованию html5, приглашаю вас посмотреть наши уроки по этой технологии.
Способы создания каркаса
Веб – страница представляет собой каркас с дизайном, оформленным при помощи каскадных таблиц стилей (CSS), и заполненный текстом и картинками.
Каркас в свою очередь, может быть построен одним из способов (верстки страницы), а именно:
Табличная верстка – метод верстки документов при помощи HTML, где в качестве основы для местоположения текстовых документов и графики применяются таблицы.
Блочная верстка – метод верстки страницы с применением блоков и CSS. Блоку задаются параметры (рамка, цвет, поля, отступы и др.), а содержимым блока может быть любая информация.
Фреймовая (рамка) верстка – подобна табличной верстке, но более универсальна. Фрейм это законченный отдельный HTML-документ, входящую в общую структуру страницы, и может быть отражен совместно с другими HTML-документами, в браузере.
Комбинированный способ верстки – это использования всех перечисленных методов верстки применительно к одной странице сайта
Для начинающего веб – мастера наиболее прост и доступен комбинированный способ верстки страниц сайта. Когда при помощи визуального редактора Adobe Dreamweaver создается веб – страница. На этой странице производится верстка:
- создается таблица с необходимыми колонками и столбцами;
- создаются блоки внутри ячеек;
- заполняются содержимым таблицы и блоки;
- оформляется дизайн страницы при помощи каскадных таблиц стилей (CSS).
Наиболее популярными при верстки страниц сайта на данное время являются создание двух — колоночный страницы и трех — колоночной структурной страницы. При помощи табличной верстки можно создавать страницы сайта различной структуры и любой сложности. Но вначале этапа верстки все – таки лучше идти от простого к сложному.
Преимущества создания сайта комбинированным способом и его дизайна при помощи каскадных таблиц стилей (CSS), по сравнению HTML, имеют место существовать.
Типовая страница сайта(разметка) состоит из отдельных блоков: заголовка, правой и левой части, середины и нижней части, а также их различных комбинаций. Блоки можно сформировать при помощи тэгов table и div, и эти блоки могут иметь фиксированный тип (размер задается в пикселях), или изменяемый (в процентах).