Основа html сайта: Базовая структура HTML-документа с объяснением каждой строчки / Хабр

Содержание

HTML Основы

В данной категории Вы сможете познакомиться с множеством тегов HTML. Вы убедитесь, что HTML — это просто!

В ниже приведённых статьях имеется вся информация, которая нужна по этому языку разметки.

Ознакомившись с данными материалы, Вы сможете сразу начать создавать свой сайт и начать зарабатывать на нём!

Прочитав статьи по основам HTML, Вы узнаете:

1) О структуре HTML-документа.

2) Как добавлять ссылки на HTML-страницы.

3) Как добавлять изображения на HTML-страницы.

4) О способах изменения внешнего вида текста в HTML.

5) Как добавлять списки на HTML-страницы.

6) О способах выравнивания элементов в HTML.

7) Как создавать формы в HTML.

8) Как создавать таблицы в HTML.

9) Как выбрать цвет в HTML.

10) Как установить Favicon на сайт.

11) Как вставить дополнительные пробелы в HTML.

12) Как установить страницу 404.

13) Как сделать редирект на HTML.

14) Как вывести спецсимволы в HTML.

15) Зачем нужен DOCTYPE.

16) Какая разница между HTML и XHTML.

17) Как добавить видео на сайт.

18) О проверке сайта в разных браузерах.

19) О значение валидного HTML-кода.

20) Как проверить статус ICQ через HTML.

21) Что такое мета-теги в HTML.

22) Какие имеются мета-теги для страницы в HTML.

23) Какие имеются мета-теги для браузера в HTML.

24) Какие имеются мета-теги для поисковых систем в HTML.

25) Что такое кодировка.

26) Что лучше: блочная вёрстка или табличная.

27) Что делать, если HTML-файл открывается как TXT.

28) Как вставить аудио на сайт.

29) Почему Dreamweaver — это плохо.

30) Как сделать дизайн для сайта.

31) Что такое вёрстка.

32) Что такое сайт под ключ.

33) Как поставить горячую клавишу на ссылку.

34) Как сделать кпопку «Наверх».

35) Об использовании тега optgroup в HTML.

36) Почему не отображается картинка на сайте.

37) Почему фреймы — это плохо.

38) Стоит ли использовать Flash при создании сайта?

39) Какова структура блочной вёрстки?

40) Как открыть ссылку в новом окне с валидным кодом?

41) Как запретить посетителю сохранять картинки?

42) Как запретить посетителю копировать текст?

43) Стоит ли делать вёрстку под старые браузеры.

44) Как сделать мобильную версию сайта.

45) Как поменять кодировку на сайте.

46) Как сделать автообновление страницы.

47) Как сделать комментирование на HTML-сайте.

48) Как проверить сайт в разных версиях IE.

49) Как установить радио на сайт.

50) Какая структура у двухколоночного сайта.

51) Что такое SVG? Основы.

52) Что такое SVG? Стилизуем объекты.

53) Что такое SVG? Пишем текст.

54) Что такое SVG? Анимируем SVG объекты.

55) Что такое SVG? Поддержка старых браузеров.

56) Зачем нужен тег ruby в html.

57) Язык разметки Markdown.

58) Как быстро создать шаблоны электронной почты на HTML.

59) Как сделать красивые страницы ошибок.

60) Зачем нужен HTML тег code?.

61) Как сделать видео фон на сайте.

62) Красивое оформление HTML/CSS кода.

63) Верстка email писем.

64) Атрибут srcset, Retina, WebP. Какая связь?.

65) Верстка адаптивной шапки на Bootstrap.

66) Как сделать таблицу в HTML.

67) Самое важное о ссылках в HTML.

68) HTML теги для текста.

69) Фавикон для сайта.

70) Микроразметка сайта schema.org.

71) Как сделать гифку из видео.

72) Иконочные шрифты IcoMoon.

73) Заглушка для изображений на сайте.

74) Как уменьшить размер изображения без Photoshop.

75) Как вставить изображение на веб-сайт.

76) Почему нужно использовать SVG графику на сайтах.

77) Варианты использования SVG на сайтах. Часть #1.

78) Варианты использования SVG на сайтах. Часть #2.

78) Варианты использования SVG на сайтах. Часть #3.

79) Дизайн и верстка страницы Contact Us. Часть #1.

80) Дизайн и верстка страницы Contact Us. Часть #2.

80) Дизайн и верстка страницы Contact Us. Часть #3.

Все материалы по основам HTML

Структура страницы сайта. Основы блочной верстки и flex

Структура страницы сайта

У любого сайта должна быть «шапка» (header), основная часть (main или content) и «подвал» (footer):

Как правило, шапка и подвал одинаковые для всех страниц одного конкретного сайта. На разных страницах меняется содержимое основной части сайта.

Блочная верстка

Вся веб-страница делится на смысловые блоки. Давайте сверстаем блоками схему, представленную выше.

В папке «My site» создайте файл block.html. Вставьте в него следующий код:

<!DOCTYPE html>
<html>
<head>
    <title>Блочная верстка</title>
    <link rel="stylesheet" href="style.css">
</head>
    <body>
	<div></div>
	<div></div>
	<div></div>
    </body>
</html>

В первую очередь обратите внимание, что файл стилей остался тот же style.css. В body появились 3 новых тега div, у каждого из которых свой id. div (англ. division — раздел) — один из самых часто используемых тегов. Он представляет из себя блок. Но об этом чуть позже. Сейчас в файл style.css вставьте код, чтобы в итоге он выглядел так:

body{
	background-color: gray;
}
#header{
	background-color: #fff;
}
.h2{	
    font-size: 30px;
    color: #000;
    text-align: center;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}
#header{
	background-color: #126b6a;
	height: 20vh;
}
#main{
	background-color: #51ede4;
	height: 60vh;
}
#footer{
	background-color: #126b6a;
	height: 20vh;
}

Здесь добавились стили для header, main и footer. Каждому из них задан цвет и высота. Обратите внимание, что для header выше уже задан цвет, но в результате сработает только тот, который указан ниже. Это один из принципов в CSS.

Высота задана не в пикселях (px), а в vh. vh — это относительная величина. И измеряется она относительно высоты окна Вашего браузера. Это как бы проценты от высоты Вашего браузера. То есть, если, например, высота окна браузера 100px, то 2vh станут равны 2px.

Откройте block.html в браузере.

Если блоку div не задать никакую высоту, и внутри блока не будет ничего (никакого текста или изображения), то блок никак не отобразится на экране, потому что его высота будет 0.

Ширина же div по умолчанию равна ширине родительского элемента. Конечно, ее можно изменить задав, например, в пикселях так — width: 10px; .

Flex — это …

Flex переводится с английского как «гибкий».

Как Вы заметили в нашей блочной верстке все блоки div встали в одну колонку друг под другом. Очень часто нужно блоки выстроить слева направо. Для этой цели есть несколько способов. Я продемонстрирую самый современный и несущий много возможностей. Этот способ называется flex (flex-верстка).

Обратите внимание на полностью бесплатный курс HTML, на котором Вы быстро сможете стать экспертом верстки.

В файле style.css добавьте для body новое свойство display: flex; . Сохраните (Ctrl+S) и обновите страницу в браузере (Ctrl+F5). Вы увидите, что блоки пропали. На самом деле блоки есть, просто теперь они выстроились в ряд слева направо, но их не видно, потому что у них ширина равна 0. После того, как мы задали для body новое свойство flex, дочерние элементы body выстроились в ряд. Сейчас каждому div задайте одинаковую ширину width: 33%; .Сохраните и обновите. В результате будет следующая картина:

А файл style.css сейчас выглядит так:

body{
    background-color: gray;
    display: flex;
}
#header{
    background-color: #fff;
}
. h2{	
    font-size: 30px;
    color: #000;
    text-align: center;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}
#header{
    background-color: #126b6a;
    height: 20vh;
    width: 33%;
}
#main{
    background-color: #51ede4;
    height: 60vh;
    width: 33%;
}
#footer{
    background-color: #126b6a;
    height: 20vh;
    width: 33%;
}

Flex-верстка имеет очень много возможностей. Продолжайте изучать интересные и перспективные HTML-CSS и скоро Вы станете профессионалом веб-разработки!

Переходим к следующему уроку!

Базовый тег HTML

❮ Назад Полный справочник HTML Далее ❯

Пример

Укажите URL по умолчанию и цель по умолчанию для всех ссылок на странице:

<голова>

базовый тег HTML

Попробуйте сами »

Определение и использование

Тег указывает базовый URL-адрес и/или цель для всех относительных URL-адресов в документе.

Тег должен иметь href или целевой атрибут присутствует, или оба.

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

Поддержка браузера

Элемент
<базовый>	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
ссылка	URL-адрес	Указывает базовый URL-адрес для всех относительных URL-адресов на странице
цель	_blank _parent _self _top	Указывает цель по умолчанию для всех гиперссылок и форм на странице

Глобальные атрибуты и события

Тег также поддерживает Глобальные атрибуты в HTML.

Атрибуты событий

Тег не поддерживает никаких атрибутов событий.

Связанные страницы

Ссылка HTML DOM: Базовый объект

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top5 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

: Элемент базового URL-адреса документа — HTML: язык гипертекстовой разметки

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

Сценарии могут получить доступ к используемому базовому URL-адресу документа с помощью Node. baseURI . Если в документе нет элементов, затем baseURI по умолчанию location.href .

Категории контента	Содержимое метаданных.
Разрешенный контент	Нет; это пустой элемент.
Отсутствие тега	Не должно быть закрывающего тега.
Разрешенные родители	, который не содержит другого `<база>` элемент.
Неявная роль ARIA	Нет соответствующей роли
Разрешенные роли ARIA	Нет `роль` разрешено
Интерфейс DOM	`HTMLBaseElement`

Атрибуты этого элемента включают глобальные атрибуты.

Предупреждение: Если указан любой из следующих атрибутов, этот элемент должен предшествовать другим элементам со значениями атрибутов URL-адресов, например атрибут href .

ссылка

Базовый URL-адрес, который будет использоваться во всем документе для относительных URL-адресов. Допускаются абсолютные и относительные URL-адреса.

цель

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

элементов без явных атрибутов target . Следующие ключевые слова имеют особое значение:

_self (по умолчанию): Показать результат в текущем контексте просмотра.
_blank : Показать результат в новом безымянном контексте просмотра.
_parent : Показать результат в родительском контексте просмотра текущего, если текущая страница находится внутри фрейма. Если родителя нет, действует так же, как _я .
_top : Показать результат в самом верхнем контексте просмотра (контексте просмотра, который является предком текущего и не имеет родителя). Если родителя нет, действует так же, как _self .