Статические html страницы
Статическая html страница — это много или мало? Можно уже делать сайт?
Статическая html страница - что это?
Полагаю правила верстки на html Вам известны. Повторим их слегка.
Например, сверстаем простую страницу с отображением классики программирования — строки Привет, Мир! Что понадобится? Текстовый редактор и браузер.
Открываем редактор и начинаем разметку.
Основы:
Код HTML:
<!DOCTYPE html>
<html>
<head></head>
<body> </body>
</html>
- DOCTYPE html — обязательная первая фраза, определяющая протокол. HTML5 указывается как DOCTYPE html, что значительно проще предыдущей версии.
- Теги head означают заголовки. В пределах этого тега указваются различные теги meta, link и title - наименование страницы или сайта.
- body — тело страницы. Здесь располагается содержание, будь то тексты, видео или аудио.
В заголовках указываются необходимые сведения. Такие как кодировка, ключевые слова, описания тегом meta, подключаются файлы css сайта через тег link, подключаются скрипты .js, прописывается фавикон и заголовок страницы — тег title. О файлах css я немного скажу в разделе Веб - дизайн. Файлы с расширением .js — скрипты на языке javascript.
Есть некоторые особенности HTML5, предлагаемые разработчиками консорциума W3C. Например, теги html, head и body уже не являются обязательными. То есть их можно запросто пропустить. Как и некоторые другие. На мой взгляд, необязательный тег и необязательная рекомендация уж как-то сильно необязательны. Так что я пока пишу все их. А Вы можете их пропускать.
Отобразим без стилей заданную фразу.Выведем фразу как заголовок формата H1. Выглядеть наша страница должна так:
Код HTML:
<!DOCTYPE html>
<meta charset="utf-8"/>
<title>Это заголовок</title>
<h1>Привет, Мир!</h1>
- Тегом meta charset="utf-8" задаем кодировку страницы.
В настоящее время для кириллицы употребляется кодировка utf-8.
- Тег html можно не указывать,
если сразу за ним не идет комментарий. - Тег head можно не указывать,
если элемент head пуст или,
если сразу за ним идет другой html - элемент.
Закрывающийся тег /head можно отпустить,
если перед ним не стоит пробел или комментарий. - Тег body можно не указывать,
если элемент пуст или,
когда сразу за ним не следуют пробел, комментарий
или элементы
meta, link, script, style.
Закрывающийся тег /body можно не указывать,
если перед ним нет комментария. - Закрывающийся тег /li можно не указывать,
если сразу за ним идет следующий тег li. - Закрывающийся тег /p можно не указывать,
если элемент p следует сразу за одним из элементов:
address, article, aside,
blockquote, dir, div, dl,
fieldset, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, hr,
menu, nav,
ol, p, pre,
section, table, ul.
Если не задать кодировку, браузер запросто может показать крокозябры вместо кириллицы. По сей день еще браузеры зачастую используют старые кодировки. Иногда не помогает и тег meta charset. Если браузер настроен на другую кодировку. Мне это совсем не нравится. Получается, каждому пользователю нужно сообщить, дескать, переключите браузер на нужную мне кодировку! А ему оно надо?
Файлы стилей я подключаю в начале страницы классическим образом через link rel="stylesheet", скрипты js — в конце, перед закрывающимся тегом body.
Я пыталась сделать отложенную загрузку стилей, то есть подключать их в конце страницы. То, что получилось, меня совсем не порадовало. Поэтому я продолжаю подключать стили в начале страницы. Если цеплять стили на html и body, указывать теги нужно. Хотя совсем необязательно вешать на указанные теги стили.
Сохраняем файл с расширением html в любой папке на компьютере. Дадим ему какое-нибудь имя, например somebody. Полное имя файла будет somebody. html. Теперь откроем файл с помощью браузера и увидим наш текст на экране монитора.
С использованием необязательных тегов все, что хотим отобразить на экране, помещаем между тегами body.
На этой странице Вы можете скачать образец файла static.html без регистрации. Посмотреть его в текстовом редакторе и различных браузерах.
Оформление кода
Первое, к чему нужно привыкнуть — правильно писать код. Приемы сокращения кода не должны влиять на его читабельность.
Что значит «правильно»?
Нужно не только писать, но и оформлять код. Рекомендации взяты у Google.
Не использовать табличную верстку. Таблицы применяются там, где что-то нужно показать в табличной форме. В остальных случаях применяем верстку HTML5.
Применять семантическую разметку: article, aside, picture...etc
Используйте в коде два отступа для того, чтобы показать зависимые элементы. Это правило применяется и в коде php. Если на каждый дочерний элемент применить два отступа, код получается красивым и наглядным.
Код PHP:
<?php
if(something) {
do something;
}
Пример кода HTML
Код HTML:
<div id="something">
< menu >
< ul >
< li >
< a href = "mysitemap.html " > Карта сайта < /a >
< /li >
< li >
< a href = " " > Menu < /a >
< /li >
< li >
< a href = " " > Menu < /a >
< /li >
< /ul >
</menu>
<aside>
<nav>
< ul >
<li>
<a href="mysitemap.html">Карта сайта</a>
</li>
<li>
<a href="">Menu</a>
</li>
< /ul >
</nav>
</aside>
</div>
Используйте элементы кода HTML так, как они задуманы. Если это a — как ссылку, если p — как абзац, table — как таблицу, h1, h2 и другие h как заголовки.
Не рекомендуется использовать необязательные теги:
body
head
html
li
p
option
tbody
td
th
tr
Подключая стили или скрипты javascript, не указывайте type
Используйте относительные ссылки при включении в файл изображений или других медиа-ресурсов
Пишите код в нижнем регистре
Используйте кодировку utf-8 (без BOM)
Комментируйте свой код
Используйте HTML5
Рекомендации не такие сложные и если постараться с самого начала писать по правилам, потом будет проще.
Заключение
Если умеешь верстать - сайт сделать можно. Статический Html сайт. Если знакомы с веб - дизайном. Или для Вас кто-то сделал макет. Это займет уйму времени и сил. И, возможно, будет неплохим решением. Смотря какой сайт.
Серьезный сайт требует усилий и планомерной работы. Требуется тщательно продуманная Навигация веб - сайта, что не всегда бывает простым делом.
Здесь коротко показаны общие моменты создания статических страниц
Родионова Галина2018-03-02
.