Содержание

Первая текстовая веб-страница

Если Вы усвоили предыдущие тексты и работаете в каком-либо редакторе, то сможите создать первую простую текстовую веб-страницу. Текст – основа любого сайта.

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

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

<!doctype html> <html lang="ru"> <head> <title>Текст-1/title> <meta charset="utf-8"> </head> <body> <h1> Первая текстовая веб-страница </h1> <h2> Заголовок 2</h2> <h3> Заголовок 3</h3> <h4> Заголовок 4</h4> <h5> Заголовок 5</h5> <h6> Заголовок 6</h6> <p>Это короткий текст моей первой веб-страницы. Сайт состоит из нескольких взаимосвязанных веб-страниц. </body> </html>

Листинг 1.

Разберемся с кодировкой веб-страницы.

Первая часть кодировки веб-страницы, до открывающего тега <body>, включает служебную информацию, которая не должна отражаться на экране монитора.

Кодовая строка – <!doctype htm> – указываем браузеру, что страница создана в html5.

< html lang="ru"> – говорит о том, что основной язык текстов – русский.

Тег <head> вводиться сразу после строки <html lang="ru">. Между открывающим и закрывающим тегами <head> </head>, размещается дополнительная служебная информация, которая также не отражается не мониторе. Это:

- <title>Текст 1</title> – заголовок веб-страницы. Он отразится только на вкладке браузера;

- <meta charset="utf-8"> – показывает, что кодировка веб-страницы – utf-8. UTF-8 (от англ. Unicode Transformation Format, 8-bit) – наиболее распространённый стандарт кодирования веб-страниц.

Следующий блок веб-страницы между тегами <body> </body> включает те элементы страницы, которые выводятся на экран монитора. Это – контент, то есть то, что можно читать, смотреть на мониторе. Тег <body> должен быть единственным и вводится только после закрытия </head>

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

Контейнер самой веб-страницы со всеми ее элементы размещается между тегами – <!doctype html> </html>.

Что нового в этом тексте. Это тег <meta> и два атрибута – lang и charset.

Атрибуты тегов

Язык HTML – это язык разметки веб-страниц. С помощью тегов Вы сообщаете браузеру, какие элементы присутствуют на данной веб-странице.

Чтобы расширить возможности тегов используются атрибуты. Атрибуты – это компоненты тега, содержащие указания о том, как браузер должен воспринять и обработать тег.

Они записываются в виде сочетания кодов: тег, имя атрибута = "значение". Пример: <html lang="ru">; <meta charset="utf-8">. Lang и charset – это имена атрибутов, а "ru" и "utf-8" – значения.

Значение атрибута указывается после имени атрибута через знак равенства (символ =) и должны заключаться в двойные (") кавычки.

Необходимо запомнить:

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

Атрибуты

lang — указывает основной язык, который используется в контенте веб-страницы.

charset – задает кодировку веб страницы.

***

Мы разобрались с кодом Листинга 1. Теперь очередь за практической реализацией веб-страниц.

Откройте Notepad++. На панели вкладок – вкладка с названием – new 1. Поле рабочего окна чистое. Только на панели нумерации строк стоит цифра 1, и строка выделена горизонтальной цветной полосой.

Дайте этому файлу имя. Например: text-1. Сохраните файл. Меню Фаил → Сохранить... или щелчок по кнопке – Cохранить на панели инструментов. Если Вы подготовили папку для сохранения файлов Notepad++, и в настройках, указали путь к папке, то файл автоматически будет размещен в ней. Закройте редактор, войдите в папку, что бы убедиться, что все получилось. Щелкните дважды по иконке файла, и он откроется в Notepad++.

Скопируйте Листинг 1.

Нажмите левую кнопку мыши и, не отпуская ее, проведите курсором сверху вниз до строки Листинг 1. Так Вы выделите текст. На выделенном участке в любом месте щелкните правой кнопкой мыши. Появиться окно с контекстным меню. Найдите команду – Копировать и кликните по ней. Все выделенное сохраниться в буфере обмена.

Войдите в Notepad++, и щелкните по кнопке Вставка. Весь скопированный текст появиться в рабочем окне. Щелкните по иконке дискеты – Сохранить.

Теперь запустите веб-страницу на браузер. Посмотрите, как браузер отражает вашу первую веб-страницу.

Класс! Получилось. И в тоже время как-то не так!

Давайте разберемся.

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

По умолчанию все браузеры начинает выводить элементы веб-страницы с левого края монитора. Мы ведь не дали ему команды как показать веб-страницу на мониторе. У нас «голый» HTML код без использования CSS. Поэтому страница «прилипла» к левому краю монитора.

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

Вот она первая простая веб-страница. Практически такими они были на мониторах начала эпохи интернета.

 

... да пачатку старонкі