Пример страницы HTML и основные принципы создания. HTML Программный код
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Пример веб-страницы Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
HTML 4.01 | |
Строгий синтаксис HTML. | |
Переходный синтаксис HTML. | |
В HTML-документе применяются фреймы. | |
HTML 5 | |
В этой версии HTML только один доктайп. | |
XHTML 1.0 | |
Строгий синтаксис XHTML. | |
Переходный синтаксис XHTML. | |
Документ написан на XHTML и содержит фреймы. | |
XHTML 1.1 | |
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. |
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега , а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.
В дальнейшем будем применять преимущественно строгий , кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.
Часто можно встретить код HTML вообще без использования , веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте в начало документа.
Тег определяет начало HTML-файла, внутри него хранится заголовок ( ) и тело документа ( ).
Заголовок документа, как еще называют блок , может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера .
Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Пример веб-страницы
Тег определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).
Рис. 4.2. Вид заголовка в браузере
Тег является обязательным и должен непременно присутствовать в коде документа.
Обязательно следует добавлять закрывающий тег , чтобы показать, что блок заголовка документа завершен.
Тело документа предназначено для размещения тегов и содержательной части веб-страницы.
Заголовок
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги ... относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Придумано множество языков, но язык HTML принадлежит к числу особенных и самых восстребованных. С ним связано множество других ключевых начинаний в программировании. Многое становится доступным, когда в сознании разработчика присутствует знание языка разметки - HyperText Markup Language (HTML).
В сущности, в HTML нет ничего сложного, и через несколько минут любой, самый далекий от программирования и интернета человек, выполнит создание HTML-страницы в блокноте. Пример, заслуживающий внимания, простота, действительно, доступная каждому.
Общее описаниеФайл HTML - это одна страница сайта, хотя с этим можно поспорить, но то, что один файл составляет одну страницу, для начала понятно.
Файл HTML начинается с заголовка DOCTYPE, в котором указано, что тип данного файла - HTML. Все элементы страницы (теги) указываются в угловых скобках. Каждая пара («») включает в себя один тег HTML. Обычно теги HTML парные, то есть на каждый «tag» есть «/tag». Оба заключаются в угловые скобки. Есть теги одиночные, из них самый популярный «br/» - переход на следующую строку.
Самый большой тег в файле - это сам HTML, в который входят всего два тега: HEAD и BODY. В первом делаются различные описания, указываются ссылки на другие нужные странице файлы, могут присутствовать скрипты PHP и JavaScript. Во втором записывается контент страницы. Также в виде тегов и скриптов.
Простая HTML-страницаПример создания такой страницы указан ниже в статье. Рассмотрим его внимательно.
Раздел HEADОсновное назначение - общее описание страницы и общих скриптов, хотя последнее - достаточно относительное понятие. Обычно здесь придают существенное значение только двум вещам:
- ключевые слова и описание страницы;
- ссылки на другие файлы (*.css и *.js).
Для отображения контента страницы содержимое данного раздела имеет лишь косвенное значение, поскольку указывает: где-то в других файлах есть правила CSS для тегов и скрипты других языков.
HTML-страница имеет который отображается, когда посетитель подводит мышку к вкладке, где страничка открыта. Это важный момент, поскольку делает страницу существенно более презентабельной, проще сказать, подписанной читабельным текстом.
META-теги имеют важное значение в интернет-программировании вообще, но когда требуется создание HTML-страницы в блокноте, пример нежелательно загромождать лишними конструкциями.
Если к скриптам следует подходить, когда знания об HTML укрепятся, то на каскадные таблицы стилей следует обратить внимание незамедлительно. В файлах CSS приводятся, в частности, правила оформления тегов HTML.
Раздел BODYСобственно, пример страницы HTML - это и есть раздел BODY. Именно здесь содержится вся информация, весь контент страницы сайта. Вся информация представляется в виде тегов и скриптов, например вставки JavaScript-кода или кусочков PHP-программ.
Важно понимать, что пример веб-страницы HTML в браузере и тот же пример в текстовом редакторе, в частности notepad, это далеко не одно и тоже. В первом случае мы имеем готовый HTML-текст, в котором все скрипты исполнены. Например, PHP отработал свою часть и сформировал вместо своего кода в нужных местах нужные теги. JavaScript тоже выполнил свою миссию, хотя о нем еще предстоит отдельный разговор.
HTML - это теги, а не скрипты. В конечном счете в браузере отображается только контент страницы, только ее теги. Никакого PHP-кода там нет.
JavaScript находится на особом положении, его забота - обслуживать страницу не только в момент загрузки (перегрузки), но и в моменты, когда страница находится в браузере посетителя, а тот изучает ее.
Простой пример (только раздел BODY) указан ниже.
А в браузере посетителя он выглядит так, как показано далее.
В коде не было указано, как должны выглядеть элементы, которые вывел браузер. Все видимое оформление находится в правилах CSS. В данном случае в файле Mcss/scPhpWordRW.css, на который была ссылка (см. самый первый пример страницы HTML).
В отличие от HTML, тема CSS более простая, там весьма доступные правила и их количество невелико, когда пример создания HTML-страницы не требует ничего, кроме notepad. Все очень доступно для моментального освоения:
Здесь показано, как просто описан тег scLogo_vDoc, причем это описание таково, что в нормальном состоянии тег отображает картинку vDoc-logo.png, а когда над ним находится мышка - отображается vDoc-logo-h.png.
Структура описаний HTMLЯзык не предполагает како-либо структуры и понятие синтаксиса здесь весьма относительное. Здесь нет переменных, но есть масса возможностей. Принципиальная основа гипертекста в том, что существует элемент (тег) который обязательно имеет имя.
Имя, в случае парного тега, составляется из собственно имени (tagName) и угловых скобок («»), если речь идет о начале тега, и «», если записывается его конец.
Пример страницы HTML с описанием атрибутов расположен ниже в тексте.
Тег может иметь атрибуты, тогда они помещаются через пробел после имени тега до закрывающей угловой скобки «>». Атрибуты, если они есть у тега, записываются только в его начале. Содержанием тега считается то, что находится между началом тега и его концом.
HTML позволяет описывать блочные и строчные элементы. Первые занимают определенную область в окне браузера, могут позиционироваться абсолютно, то есть в нужном месте области отображения HTML-страницы, и иметь конкретный размер.
Строчные элементы в общем случае отображаются одним потоком, то есть так, как были указаны в файле страницы, так и выводятся на экран. На отображение общего потока можно влиять, когда происходит загрузка страницы. На размещение, видимость и другие свойства блочных элементов можно влиять в любое время посредством JavaScript-кода.
Помимо простых элементов, HTML предлагает описывать таблицы и формы. Эти элементы очень востребованы в «повседневном сайтостроении».
Описание таблицы: теги TABLE, TR, TDПри помощи тега TABLE можно создать таблицу, указать некоторое количество рядов TR и в каждом ряду какое-то количество ячеек TD. В отличе от привычной табличной организации, вследствие особенностей HTML-разметки, табличная организация ограничивается данной декларацией, потому если разработчик желает иметь прямоугольную таблицу, в которой количество колонок по всем рядам одинаково, то он должен за этим следить самостоятельно.
Принципиальная позиция HTML: делать все, что указано, но ничего из того, что не понято. В некоторых случаях не столь важно количество колонок в каждой строке таблицы, но, если нужно выполнить объединение ячеек по вертикали или по горизонтали, придется посчитать все очень внимательно.
Пример страницы HTML с описанием простой таблицы наглядно показан в статье.
Здесь показана таблица размером три ряда на три колонки, причем в первом ряду вместо тега TD был использован тег TH - заголовок колонки. Особенного отличия эти два тега не имеют, но использовать первый вполне можно, чтобы отличить первый ряд таблицы, да и в CSS к TH можно прикрепить собственный стиль, что выгодно отличает его от остальных TD.
Описание формы: теги FORM, INPUTФормы - это самая востребованная часть HTML-тегов. При помощи форм можно передавать информацию. Собственно, сама страница - это вывод информации, а вот форма - ее ввод.
Пример страницы HTML с описанием простой формы:
Вариантов использования форм гораздо больше, но основные возможности таковы. Можно указать поля ввода, назначить им нужно оформление и обработчики для анализа вводимых пользователем данных. Можно указать скрытые поля и передавать со страницы фоновую информацию. Можно обозначить кнопки передачи информации, нажатие на которые инициирует процесс передачи сведений.
Использование HTMLЗнать язык гипертекста - работы по любой специализации в области интернет-программирования, но если необходимо писать программы на PHP или JavaScript, то знать HTML + CSS нужно в совершенстве.
Язык PHP был обозначен в предыдущем примере. PHP работает на сервере, потому страница с этой формой улетела с сервера в браузер с заполненными полями. В частности, функция TestOnBlur, упомянутая в теге INPUT (обработчик события onblur), получила все параметры в виде текстовых полей.
В браузере работает JavaScript, и, чтобы правильно сработала кнопка отправки данных обратно на сервер, то есть конструкция: onclick=jQuery("#to").val("cart"), необходимо иметь представление не только о том, что такое jQuery, но и что такое #to, val, cart. Если более точно, необходимо знать основные теги HTML и общие правила применения к ним стилей CSS.
Этого вполне достаточно, чтобы быстро поднять свою квалификацию по любой специализации в области интернет-программирования.
Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов , и . Результаты применения этих тегов обычно идентичны: моноширинный шрифт с фиксированным размером символов и интервалов.
ТегТег — cтрочный элемент-контейнер, который применяется для вставки в него небольших фрагментов программного кода, например, в веб-документе, представляющем учебное пособие по программированию. Браузеры отображают такой код моноширинным шрифтом (например, Courier New). Если использовать ero совместно с элементом
Тег служит для ввода текста без форматирования, то есть с сохранением всех пробелов, табуляций и переносов строк. Внутри этого элемента можно применять большинство элементов форматирования текста.
Внимание: В языке HTML переносы строк, идущие подряд пробелы и табуляции игнорируются. Несколько пробелов подряд воспринимаются как один пробел.
Пример: использования элементов и- Попробуй сам »
Внутри элемента Браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.
If (document.getElementsByClassName) { x = document.getElementsByClassName("pagination") if (x.length>y) { x.style.visibility = "hidden"; }
Внутри элемента «pre» браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.
if (document.getElementsByClassName) { x = document.getElementsByClassName("pagination") if (x.length>y) { x.style.visibility = "hidden"; }
Теги иТег
отмечает фрагмент кода как вводимый пользователем с клавиатуры. Некоторые браузеры помечают такой текст дополнительным фоном.
Тег
применяется для формирования компьютерного вывода, например, текста, отображаемого в консольном окне после ввода вами управляющего сценария. Этот редко используемый элемент просто выводит свое содержимое моноширинным шрифтом, как
,
,
.
- Попробуй сам »
Текст, который пользователь должен ввести с клавиатуры поместите в
элемент-контейнер «kbd».
Введите текст: Это — текст, вводимый с клавиатуры
Это — текст, который помещен в контейнер «samp»
ТегТег используется с целью дополнительного выделения переменных в программном коде. Он определяет переменную в математическом выражении или параметр программы и обычно отображается курсивом.
Пример: элементы- Попробуй сам »
Кинетическая энергия тела:
Кинетическая энергия тела:
Wк = mv2/2
Задачи Итоговое заданиеНа этом уроке вы познакомились с тегами, которые выводит свое содержимое моноширинным шрифтом, выделяют в коде переменные и тегом предварительного форматирования. Все они важны при работе с матаматическими выражениями и программным кодом.
Пришло время повторить изученное и выполнить три несложных задания:
Переменная- Реши сам »
Используя html-элементы обозначте в приведенном уравнении литеру y как переменную.
Переменная
Уравнение параболы y = Nx2
Переменная
Уравнение параболы y = Nx2
Предварительно отформатированный текст- Реши сам »
Используя элемент HTML сделайте так, чтобы текст, помещенный в элемент code, отображался браузером с сохранением всех пробелов и переносов строк как есть.
Всем-всем привет!
Коли начали мы изучать , значит нужно знать основы HTML и CSS, которые помогут сделать наши сайты лучше и привлекательнее для поисковых систем. Всю эту неделю я буду рассказать Вам о работе с кодом сайта и вот, что Вас ждет:
- . Будем учиться редактировать код сайта с помощью данных редакторов;
- . Поможем поисковому роботу понять структуру страницы;
- . Узнаем насколько правильно составлен код сайта и найдем ошибки;
Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.
Основы HTMLHTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.
Задача HTML — показать браузеру где находиться тот или иной элемент документа. C помощью данного языка, элементы размечаются на странице и занимают определенное место, которые затем отображаются на мониторе посетителя сайта.
Язык разметки состоит из специальных тегов, которые помогают браузеру определить:
- Структуру документа;
- Место нахождения того или иного элемента;
- Предназначение элемента;
- Подключаемые сторонние файлы;
- И много-много другого.
Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.
Структура HTMLЛюбой HTML-документ имеет начальную структуру, которая должна соблюдаться в обязательно порядке. Выглядит она так:
Заголовок страницы Контент страницы