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


Продолжим рассматривать, как сделать html страницу из чего она состоит. В предыдущем уроке мы рассматривали веб страницу из трёх основных составляющих частей: HTML, HEAD, BODY и научились создавать html страницу из текстового файла с помощью обычного блокнота. На сегодняшнем уроке мы научимся создавать полноценную html страницу. Вот как она будет выглядеть в нашем примере.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Здесь размешается описание вашей страницы с ключевыми словами отображается в самом верху браузера.
</title>
<link href="css.css" rel="stylesheet" type="text/css"/>
</HEAD>
<BODY>
Между этими тегами будет содержание страницы доступный пользователю вашего веб сайта.
</BODY>
</HTML>

Давайте познакомимся с ними поближе начнём с первой строки в html странице <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> рассмотрим её в трёх вариантах в нашем примере это 1 вариант. С этой строки рекомендуется начинать все веб страницы, хотя вы можете обойтись и без него.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Эта строка говорит что документ переходного типа и может содержать не рекомендованные атрибуты и элементы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
Эта строка говорит что документ стандартного типа и содержит рекомендованные атрибуты и элементы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Эта строка говорит что документ содержит фреймы.


С первой строкой разобрались переходим к следующему атрибуту <HTML>. Всё что находится на странице включая информацию о странице расположено между открывающим <HTML> и закрывающим </HTML> тегами они расположены в самом начале и в самом конце документа. Как вы заметили, все закрывающие теги на странице сайта имеют вот такую / черточку.


Теперь рассмотрим что надо расположить между открывающим <HEAD> и закрывающим </HEAD> тегами. Здесь покажем всего три основных составляющих, хотя есть ещё другие варианты, к ним мы вернёмся ниже как дополнительные возможности.

1) <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
Эта строка означает что страница имеет стандартную кодировку windows.
2) <title> </title>
Между этими тегами находится описание вашей страницы сюда помешаются ключевые слова по которым поисковики находят и предоставляют вашу html страницу в поиске. Она отображается слева в самом верху браузера и может отображать максимум около 15 слов или 70 символов. Не вставляйте слова, не имеющие отношение к тексту на вашей странице.
3) <link href="css.css" rel="stylesheet" type="text/css"/>
С помощью этой строки мы задаем одинаковый стиль всему сайту. Каскадные таблицы стилей CSS -это когда с помощью одного файла можно менять вид всего сайта. Например, можно было редактировать каждую страницу сайта по отдельности, но когда вы хотите поменять внешний вид всего сайта с большим количеством страниц это надо открывать каждую и менять код, а так достаточно отредактировать один файл со стилями и подключить его с помощью этой стоки. К этому мы вернёмся чуть позже, когда немного изучим структуру html страницы.


Далее поговорим что надо размешать между открывающим < BODY> и закрывающим </ BODY> тегами. Между ними размешается вся информация доступная пользователю вашего сайта, одним словом весь сайт. Там можно размешать картинки, текст, таблицы, формы и ещё много интересного. Обычные пользователи интернета могут и не подозревать из чего состоит страница сайта для них доступно только то что размещено между этими тегами.


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

Из чего состоит html страница сайта

Посмотрите на рисунок в самом верху, я обозначил то, что было размешено между тегами <title> </title>, а в самой странице текст между открывающими и закрывающими тегами <body> </body>. Перейти к следующему не менее важному уроку по работе с текстом можно по ссылке ниже.



Рейтинг@Mail.ru   Яндекс.Метрика