Что такое HTML-код страницы? HTML Программный код

Всем-всем привет!

Коли начали мы изучать , значит нужно знать основы HTML и CSS, которые помогут сделать наши сайты лучше и привлекательнее для поисковых систем. Всю эту неделю я буду рассказать Вам о работе с кодом сайта и вот, что Вас ждет:

• . Будем учиться редактировать код сайта с помощью данных редакторов;
• . Поможем поисковому роботу понять структуру страницы;
• . Узнаем насколько правильно составлен код сайта и найдем ошибки;

Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.

Основы HTML

HTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.

Задача HTML — показать браузеру где находиться тот или иной элемент документа. C помощью данного языка, элементы размечаются на странице и занимают определенное место, которые затем отображаются на мониторе посетителя сайта.

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

• Структуру документа;
• Место нахождения того или иного элемента;
• Предназначение элемента;
• Подключаемые сторонние файлы;
• И много-много другого.

Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.

Структура HTML

Любой HTML-документ имеет начальную структуру, которая должна соблюдаться в обязательно порядке. Выглядит она так:

Заголовок страницы Контент страницы

http://site.ru/image.png - это адрес картинки.

Перейти на Site.ru

Где http://site.ru/ - сайт, на который ведет ссылка, Перейти на Site.ru – название ссылки, так называемый анкор.

В коде ссылки стоит атрибут target= " _blank" - ссылка откроется в новом окне, а в коде картинки border="0″ - у картинки не будет рамки.

Списки

Списки создаются следующими html- кодами:

• Первый пункт списка


• Второй пункт списка


• Третий пункт списка

Таблицы

Таблицы более сложный элемент чем эти html-теги, им можно посвятить целый пост, здесь просто покажу пример кода самой простой таблицы:

Содержание

Перевод строки после каждого тега в коде ставится для удобства редактирования html-кода. Этот же код таблицы можно вставить так:

Содержание

Это основная структура станицы сайта. Зная азы, можно переходить и к более сложному.

Основные коды html обновлено: Апрель 10, 2017 автором: admin

Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.

Описание html тегов из примера

1. - эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.

Любая html страница имеет следующую структуру:

... Заголовочные теги ... ... Тело страницы ...

2. - между этими тегами заключается весь видимый контент страницы.

4. - между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег

Теперь перейдем к тегам, которые находятся в теле html страницы (внутри и ).

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

6. - это один из класса тегов заголовочных тегов .. , обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".

Примечание

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

При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег , а дальше могут идти уже , и т.д. Главное, чтобы не было сначала , потом , потом и т.п. Должна быть строгая иерархия. Заголовков , и т.п. может быть много.

7.
- это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.

8. - это одиночный тег, который выводит изображение.

• src - обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
  Примечание :
  • Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL ;
  • Не забудьте указать расширение изображения. Например, .jpg , .gif , .jpeg .
• alt или title - в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта , особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.

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

Примечание: - аналогичный тег.

Есть также свойство CSS font , в котором можно задавать все эти параметры.

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

Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.

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

Пример 1. Исходный код веб-страницы

Пример веб-страницы Заголовок

Первый абзац.

Второй абзац.

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Элемент (жарг. доктайп) предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях - современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.

Открывающий тег определяет начало HTML-документа, внутри него хранится «голова» ( ) и «тело» документа ( ).

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента . Внутри могут располагаться следующие элементы: , , , , или .

Элемент является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

Пример веб-страницы

Элемент определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в быть не должно. Но допустимо добавлять разные текстовые символы, например, так: Adobe™ Photoshop® .

Закрывающий тег показывает, что «голова» документа завершена.

«Тело» документа предназначено для размещения элементов и содержимого веб-страницы.

Заголовок

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

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он всё равно будет передаваться в документе, так что, посмотрев его исходный код, можно обнаружить скрытые заметки.