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

Leave a Comment / Html / By /

Содержание

Структура html-документа

Теги

Язык HTML состоит из тегов. Каждый тег является элементом разметки гипертекста, и выполняет свою определенную функцию. Одни теги нужны для создания структуры html-документа, указания различной информации о веб-странице, другие – для форматирования и создания элементов на веб-странице, например, чтобы создать кнопку, необходим тег <button>Кнопка</button>, а чтобы перенести текст на новую строку – тег <br>.

Теги бывают парными, например тег <button>...</button>, и одиночными, например, тег <br>. Парные теги состоят из начального или открывающего тега, и конечного или закрывающего тега. Закрывающий тег записывается со слэшем.

Каркас html-документа

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Название веб-страницы</title>
    </head>
    <body>
        
    </body>
</html>

Тип документа

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

При вёрстке веб-страниц мы будем использовать пятую версию языка – HTML5. Для этой версии тип документа записывается таким образом: <!doctype html>.

Теги верхнего уровня

Каркас html-документа образуют теги верхнего уровня <html>, <head>и <body>.

Теги <head>и <body>определяеют заголовок и тело html-документа.

Теги заголовка документа

В заголовке документа размещается различная информация о веб-странице: кодировка, название, описание, ключевые слова, пути к файлам со стилями, скриптами и т.д. Эта информация, кроме названия, на веб-странице не отображается.

Кодировка html-документа
<meta charset="utf-8">

Кодировку html-документа указывают при помощи тега <meta>и его атрибута charset.

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

В качестве значения атрибута charset, мы будем использовать кодировку utf-8, так как она включает в себя символы всех языковых групп.

Обратите внимание! Если вы указали в качестве кодировки веб-страницы значение utf-8, то и сохранить html-документ необходимо в этой кодировке.

Название html-документа

Название или заголовок html-документа записывается между тегами

<title>. Данный тег является обязательным, а также очень полезным как для пользователей, так и для самой веб-страницы.

Содержимое тега <title>отображается:

  • на вкладках веб-страниц
  • в списке закладок
  • в названии файла при сохранении веб-страницы на жесткий диск;
  • в списке результатов поискового запроса на сайтах популярных поисковых систем (Google, Yandex) первыми отображаются сайты, содержащие слова вашего запроса именно в заголовке.

Теги тела документа

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

Видео к уроку

Поделиться с друзьями:

Как сделать каркас сайта html

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

Как сделать каркас сайта на html?

Самый простой каркас сайта на html, о котором мы и будем говорить, выглядит следующим образом:

Многим понятна данная структура. Но на всякий случай разберем элементы каркаса:

  • Шапка сайта. В шапке обычно находится красивая картинка в теме сайта, а также может находиться блок ссылок, типа «Об авторе», «О сайте» и т. д.
  • Левая колонка. Может находиться меню сайта.
  • Основной текст. Тут находится контент сайта: статьи, посты с картинками.
  • Правая колонка. Тут могут также находиться какие-то элементы меню, реклама.
  • Подвал. Можно поставить строку со ссылками, счетчик сайта, годы жизни сайта.

Каркас может быть также из двух колонок, а может и вообще не содержать колонок, кроме основного текста. Это уже на усмотрение самого web мастера.

Вот html код данного каркаса:

Многие элементы из данной записи Вам могут показаться знакомыми, если Вы посещали урок Как создать таблицу в html?. Но все же разберем их.

Тэги:

  • <TABLE> — задает саму таблицу. Закрывающий тэг обязателен;
  • <TR> — задает новый ряд таблицы, обязателен закрывающий тэг;
  • <TD> — задает новую ячейку таблицы. имеет закрывающий тэг.

Атрибуты:

  • border=»px» — задает рамку всей таблице, отдельному ряду или отдельной ячейки. Перед «px» пишите количество пикселей для ширины рамки. По умолчанию — 0 пикселей.
  • cellpadding=»px» — задает расстояние в пикселах от рамки до содержимого таблицы. Этот атрибут также может прописываться для всей таблицы, для каждого ряда или для каждой ячейки.
  • colspan=» « — количество ячеек, на которое должна простираться ячейка. В нашем случае, шапка и подвал сайта простирается на з ячейки: левая колонка, основной текст и правая колонка.
  • width=»px» — задает ширину таблицы, ряда, ячейки в пикселах. Вы естественно задаете свои размеры.
  • height=» « — задает высоту таблицы, ряда, ячейки в пикселах.
  • align=»px» — определяет способ горизонтального выравниванния текста внутри ячейки, ряда, таблицы.
  • valign=»px» — определяет способ вертикального выравниванния текста внутри ячейки, ряда, таблицы.

Если атрибутов несколько, то они пишутся через пробел.

О том, что такое «тэги» и «атрибуты» можете почитать здесь: Основные понятия html.

Экспериментируем с внешним видом каркаса

Попробуем поиграться с внешним видом каркаса.

Еще атрибуты, которые мы будем использовать:

  • bgcolor=»цвет» — задает цвет таблице или ее элементам.
  • bordercolor=»цвет» — задает цвет рамке таблицы.

Пример:

Результат:

Двухколоночные каркасы

Двух-колоночный каркас, навигация с левой стороны.

Html часть:

Как он выглядит:

Двух-колоночный каркас, навигация с правой стороны

Html часть:

Как он выглядит:

В этом уроке мы напишем полный код каркаса сайта, на html и СSS, и проделаем это в нескольких вариантах, постепенно добавляя блоки и колонки.

Итак, начнём. Для обозначенной цели откроем редактор Notepad++ (или другой подобный), и создадим следующую html конструкцию, на основе которой и будем создавать каркас сайта.

Для тех, кто ещё не представляет где пишется код, и как просмотреть то, что отобразит браузер, сначала необходимо прочитать статью Как создать каркас страницы, и установить Notepad++.

Давайте подробно рассмотрим эту запись, почему именно такие названия у блоков с идентификаторами.

1. <div > — wrapper (оболочка), в нём располагаются другие блоки.

2. <div > – header (голова), так называется область в которой расположена шапка сайта.
3. <div > – sidebar (боковая панель), область в которой обычно распложено вертикальное меню и виджеты (календарь и т.д.)
4. <div > – content (содержание), область в которой расположено содержание сайта.
5. <div > – footer (нижний колонтитул), или подвал, область в самом низу страницы.

Теперь, в таблице стилей, задаём этим блокам предварительные параметры. Подключим стили глобальным способом, в тело тега head, при помощи тега style.

Оболочке wrapper прописываем ширину (высота по мере заполнения увеличивается автоматически), временную рамку, внутренний отступ, и выравнивание по центру страницы.

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

Для блоков sidebar, content, и footer — высоту, и отступ снизу, зададим пока такие же, как и у “header”, а фоновый цвет дадим, временно, каждому свой, чтоб они друг от друга отличались.

Теперь посмотрим на то, что у нас получилось

Вот такое вышло начало. Все блоки одинаковой высоты расположились друг под другом и оболочка раздвинулась и заключает их в себе.

Теперь задаём сайдбару полагающуюся ему ширину, примерно в 200 пикселей, и смещаем на привычный правый край, задав внешний отступ слева в 700px, так как общая заданная ширина составляет 900px (900-200=700).

Сайдбар занял своё место и готов к дальнейшим преобразованиям

И вот теперь пришло время познакомиться с ещё одним замечательным свойством CSS, которое называется float (наплывание или обтекание).

Прописываем его в селектор sidebar, и происходит следующее: блок сайдбар, как бы приподнимется, и освободит место для других блоков, которые тут же его займут, а сайдбар, как бы наплывёт на них. В значении у float ставим right(справа), так как сайдбар находится справа.

Теперь нам осталось укоротить блок content, Так как общая заданная длина у нас 900px, то расчёт делается исходя из этого: 900-200(ширина сайдбара) — 10(ширина зазора между блоками)=690px.

Смотрим. Каркас сайта с одним сайдбаром справа

Теперь полностью код.

Каркас сайта с одним сайдбаром слева . Найдите три отличия в коде.

Каркас сайта с двумя колонками

И, до кучи, Каркас сайта с тремя сайдбарами разделёнными на блоки .

Но это ещё не всё.

Напомню, что блоку сайдбар мы придали свойство «float», и он стал как бы наплывающим на другие элементы. Даже лучше сказать он приподнялся, и освободил место для других элементов.

Теперь представим, что произойдёт, когда мы начнём наполнять его содержанием. Блок sidebar начнёт увеличиваться в высоту, наплывёт на блок footer, и дальше станет раздвигать рамку оболочки.

Что бы этого не произошло, нужно запретить блоку «sidebar», да и «content» тоже, наплывать на блок “footer”. Делается это следующим образом.

В таблице стилей создаётся новый класс clear (очистить). Свойство так же назовём “clear”, а значение дадим “both”(всё). Существуют ещё значения «right» и “left” для тех случаев, когда запретить наплыв нужно справа или слева.

Затем, в селекторах “content” и «sidebar», убираем заданную им высоту (height:80px), так как будем наполнять их текстом.

После этого, перед блоком <div пропишем ещё один блок <div>, и вставим в него только что созданный класс ”clear”, который запретит другим блокам наплывать на <footer>.

Теперь скопируем несколько любых абзацев текста и вставим их в блоки ”content” и “sidebar”. В первый побольше, во второй поменьше, соответственно их размерам.

И смотрим, что получилось.

Ну вот, текст разместился и подвал отодвинулся, правда разместился текст, как-то уж больно близко к краям блоков, поэтому давайте его немного подправим.

Для этого зададим селекторам “sidebar” и “content” внутренний отступ 10px, и убавим ширину обоих блоков на 20px у каждого, так как внутренний отступ у нас составит по 10 с двух сторон, всего 20, и если этого не сделать, этот отступ раздвинет блоки, и они налезут друг на друга.

Вот так гораздо приятнее глазу, не правда-ли. Теперь давайте обобщим то, что связано с каркасом сайта и посмотрим, как выглядит полностью код каркаса сайта в html файле.

Данный урок является заключительным в курсе «html для начинающих». На сегодняшний день Вы уже обладаете базовыми знаниями языка html. Опираясь на полученную информацию из предыдущих 14 занятий, мы сейчас сделаем небольшой сайт.

К концу этого урока у нас должен получиться такой сайт . Аналогичный сайт Вы уже сейчас можете сделать самостоятельно. В этом уроке я лишь продемонстрирую, как всю полученную информацию из 14 уроков грамотно объединить в одно целое (сайт).

Наш первый сайт будет состоять из файлов с которыми мы работали на прошлом уроке. Если у Вас не осталось всех файлов с 14-го урока, то скачайте их по ссылке.

После скачивания, во всех четырех файлах (index.html, audi.html, bmw.html, mercedes.html) удалите весь код, кроме тегов входящих в структуру html страницы. Папку image не трогайте, она остается без изменений.

Каркас страниц сайта.

Мы начнем создавать наш сайт с редактирования файла index.html, откройте его в Notepad.

Основной каркас страниц мы сделаем с помощью табличной верстки (урок 10, 11). В основе нашего сайта будет таблица с тремя строками. В первой строке таблицы будет писаться заголовок страницы. Во второй строке сделаем две ячейки, в одной из них будет меню, в другой фото. В третьей строке таблицы будет текст.

Каркас нашего сайта будет выглядеть так:

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

Пояснения к коду:
1) Для тега &lttable&gt мы задали атрибут border со значением 1, тем самым задав границы для таблицы. Атрибут cellspacing со значением 0, означает, что отступы между ячейками таблицы равны 0, то есть их нет. С помощью атрибута align и его значения center, мы выравниваем нашу таблицу по центру страницы. Атрибутом width со значением 750px мы задали ширину таблицы 750 пикселей. Высоту (атрибут height) можно не прописывать, так как у нас будет задана высота для каждой отдельной строки таблицы.

2) Теперь несколько слов о строении таблицы. Максимальное количество ячеек у нас в средней строке (2шт.) Это значит, что по правилам объединения, в каждой строке таблицы у нас должно быть по две ячейки (11 урок). Строение нашего сайта подразумевает, что в первой и третьей строках таблицы по одной ячейке. По этому для этих ячеек будет прописан атрибут colspan со значением 2. Благодаря этому атрибуту мы объединяем 2 ячейки в одну.

3) Для первой строки &lttr&gt мы задали высоту (height) 70px. В первой строке содержится одна ячейка &lttd&gt объединяющая в себе две ячейки. По этому для нее задан атрибут colspan со значением 2. Также для этой ячейки мы прописываем атрибут align и даем ему значение center, благодаря которому, текст написанный в этой ячейке будет выравниваться по центру. То есть заголовок который мы пишем, будет отображаться посередине ячейки.

4) Вторая строка содержит в себе 2 ячейки (меню и фото). В нашем сайте будут использованы фотографии, все они имеют размер 600×400 пикселей, по этому, чтобы все было ровно, мы задаем высоту нашей строки равную высоте фотографий, это значит 400px. Ширина всех фотографий 600px, по этому для второй ячейки &lttd&gt, где будет фото, мы задаем ширину 600px. Общая ширина таблицы у нас 750px, а ширина 2-ой ячейки средней строки 600px. Соответственно 1-ая ячейка средней строки будет иметь ширину 150px.

5) Для третьей строки &lttr&gt в которой будет текст, мы задали высоту 150px. Эта строка, как и первая строка, содержит в себе одну ячейку, которая объединила в себе две. По этому для этой ячейки &lttd&gt задан атрибут colspan со значением 2.

С составлением каркаса сайта мы закончили. Он будет одинаковый для каждой страницы сайта, по этому весь код со страницы index.html (в которой мы сейчас работали) мы копируем и вставляем в другие 3 файла нашего сайта (audi.html, bmw.html, mercedes.html).

Наполняем сайт контентом.

Структура сайта создана, теперь мы заполним контентом наши 4 страницы. Давайте начнем с audi.html.

1) Начнем мы с написания заголовка страницы. Заголовок прописывается с помощью тега &lth2&gt (6 урок).
На фото изображена только рассматриваемая часть кода страницы (1-ая строка &lttr&gt):

2) Теперь мы разместим меню в 1-ой ячейке 2-ой строки. Меню у нас будет состоять из 4 ссылок. Это ссылка на главную страницу (index.html) и 3 ссылки на страницы с марками авто.
На фото изображена только рассматриваемая часть кода страницы (1-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

Для того, чтобы меню было расположено в столбик, после каждой ссылки в конце строки мы ставим тег &ltbr&gt отвечающий за перенос строки. Если Вы не поняли каким образом будут работать эти 4 ссылки, то перечитывайте 13 урок.

3) Сейчас мы вставим фотографию во 2-ую ячейку 2-ой строки. Мы редактируем страницу audi.html, соответственно добавляем фото автомобиля ауди. Если Вы забыли, то напомню, наши 4 фотографии лежат в папке image.
На фото изображена только рассматриваемая часть кода страницы (2-ая ячейка &lttd&gt 2-ой строки &lttr&gt):

4) Теперь у нас осталась одна не заполненная нижняя строка, в нее мы добавляем текстовое описание марки Audi. Текст который мы будем использовать в описании марок автомобилей, находится по этой ссылке .
На фото изображена только рассматриваемая часть кода страницы (3-я строка &lttr&gt):

Весь наш текст заключается в тег &ltp&gt. Если забыли, что это за тег, смотрите урок 6.

5) Страница почти готова. Для того чтобы наше творчество стало больше похоже на сайт, давайте зададим цвет фона страницы. Для этого тегу &ltbody&gt мы прописываем атрибут bgcolor и даем значение grey. Цвет фона стал серый. Теперь давайте зададим цвет фона нашей таблицы, для того чтобы она не сливалась с основным серым фоном страницы. Сделаем таблицу белой, для этого тегу &lttable&gt мы прописываем атрибут bgcolor и даем ему значение white.
На фото изображена только рассматриваемая часть кода страницы:

Если Вы все сделали верно, то при открытии через браузер, файл audi.html будет выглядеть так:

Теперь аналогичным образом пропишите код для страниц index.html, bmw.html, mercedes.html. На страницах будет меняться заголовок, фотография и текст . В результате должен получиться сайт из 4-ех страниц.

Если что-то не получилось, Вы можете скачать этот сайт по ссылке . Имея правильный вариант, Вы легко разберетесь в своих ошибках.

Здравствуйте, Уважаемый посетитель нашего сайта!
Введите Ваши данные — Логин: и Пароль:

  • ГлавнаяПерейти на главную страницу
  • О сайтеИстория сайта MegaWeb. su
  • ЛитератураПодробные учебники по созданию сайтов
  • Необходимое ПОНеобходимые программы для сайтостроения

CSS3 книга с эффектом перелистывания страниц

CSS3 анимация перелистывания страниц

В буржунете я подсмотрел технику перелистывания страниц реализованную на CSS3. Очень эффектно! На основе этой техники я решил сделать свой пример демонстрацию такой CSS3 книги. Смотрим что получилось.

Блочные HTML CSS шаблоны макеты каркасы

Стильный правильный PHP редирект с таймером обратного отсчёта

Как сделать правильный PHP редирект с таймером обратного отсчёта на javascript
Когда я узнал, что мой домен WebOstrovok.ru оказался вовсе и не мой — возникла необходимость срочно клонировать сайт и делать все уже правильно.
Новый сайт создан и теперь на старый нужно поставить перенаправление и оно должно быть правильным.

Проще всего переадресацию можно сделать с помощью мета тега Refresh или с помощью javascript.
Минусом переадресации тегами и javascript является то, что в случае переезда сайта, смены домена, или перемещении файлов, статья для пользователя остаётся той же, а для поисковых систем — нет. Поэтому при переезде сайта категорически нельзя использовать эти методы, так как основной сайт выпадет из результатов поиска из-за своей пустоты, а новый сайт не попадёт в результаты из-за «плагиата». Поисковые системы оценят сайт как плагиатчик и этот сайт украл содержание с вашего предыдущего сайта. Плагиатчики значительно опускаются в результатах поиска. Не делайте ошибок.
Мне захотелось сделать перенаправление пооригинальнее и покрасивее, думаю, что мне это удалось.

 — HTML: Язык гипертекстовой разметки

Устарело: Использование этой функции больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе исключения или может быть сохранен только в целях совместимости.

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

HTML-элемент определяет определенную область, в которой может отображаться другой HTML-документ. Фрейм должен использоваться в пределах .

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