Самый простой код html страницы. Пример страницы HTML и основные принципы создания. Базовые теги HTML
Путешествуя по просторам Всемирной паутины, вы смогли заметить, как различаются между собой оформление и возможности веб-страниц
. Но не каждый из вас знает, что все это разнообразие реализовано на основе языка HTML
.
Все что вы видите на странице – текст, рисунки, таблицы и другие элементы, формирующие смысловое наполнение веб-страницы, именуемое контентом, создаются при помощи языка разметки HTML
. Кликните правой кнопкой мыши по любой веб-странице, и в выпавшем меню выберите пункт "просмотр HTML кода"
или «Исходный код»
– появится текстовой редактор с непонятными, вам символами и значками – это и есть HTML
-код страницы
. Любой WWW-документ может содержать стилизованный и форматированный текст, графику и гиперсвязи с различными ресурсами Интернет. Чтобы реализовать все эти возможности, был разработан специальный язык описания WWW-документов, названный HyperText Markup Language (HTML),
то есть, Язык Разметки Гипертекста
.
Описание Web-страницы на языке HTML представляет собой набор инструкций, интерпретируемый программой-браузером.
Документ, написанный на HTML, представляет собой текстовый файл, содержащий собственно текст, несущий информацию читателю, и теги разметки (markup tags). Теги – это определенные стандартом HTML, последовательности символов, являющиеся инструкциями для браузера.
Согласно этим инструкциям программа располагает текст на экране, включает в него рисунки, хранящиеся в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Интернет. Таким образом, файл на языке HTML приобретает облик Web-документа только тогда, когда он интерпретируется браузером.
Однако, в стандартном языке HTML есть один существенный недостаток. Например, для того чтобы описать разметку абзацев в контенте и их оформление, необходимо описывать эти свойства для каждого абзаца, даже если на одной страничке находится 10 или 20 абзацев. А, представьте, что на сайте может быть 100 страниц. В итоге нужно двадцать или двести раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла.
А какая головная боль для программистов! Для облегчения жизни бедным веб-мастерам, были придуманы Cascading Style Sheets(CSS)
- каскадные таблицы стилей.
CSS
действует другим, более удобным и экономичным способом. Для оформления абзацев в контенте сайта один раз прописывается код или стиль оформления. Этот код или описание стиля, сохраняется в отдельном файле. Далее нужно только при помощи HTML разметить текст на абзацы, а уж CSS позаботится об их оформлении. Код уменьшается в десятки и сотни раз.
Размещение описания стилей в отдельном файле очень удобно, особенно если на сайте больше одной страницы. Например, чтобы изменить оформление
всех абзацев на сайте, достаточно изменить код в таблице стилей.
CSS совместно с HTML, позволяют творить чудеса, и все благодаря разделению труда по созданию веб-страниц. Разметка элементов страниц производится на основе HTML, а визуальное оформление элементам придается при помощи таблиц CSS
Таблицы стилей CSS
- попытка отделить детали дизайна странички от ее структуры и содержания.
Пока это для вас китайская грамота. А я не буду строить из себя гуру и писать очередной самоучитель «Что такое HTML и CSS». Подобной информации вы найдете в интернете целый вагон, плюс к этому множество изданных учебников. Захотите углубиться в тему – флаг вам в руки. Не бойтесь, HTML
и CSS
весьма просты, и освоить их может любой чайник. Но торопиться с этим пока не стоит.
По собственному опыту знаю, что лучше не перегружать мозг чайника излишней информацией, иначе он, т.е. мозг, вскипит раньше времени. Не верьте умникам на различных сайтах, которые утверждают, что создание сайта необходимо начинать с изучения HTML и CSS . У меня для вас хорошая новость – вам не придется писать самим HTML-код, потому что умные люди придумали CMS
.
|
Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание html тегов из примера
1.
- эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Любая html страница имеет следующую структуру:
...
Заголовочные теги
...
...
Тело страницы
...
2.
- между этими тегами заключается весь видимый контент страницы.
4.
- между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег
часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег
</p>
<p>Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body>
и </body>
).</p>
<p>5. <center></center>
- эти теги выравнивают все, что находится внутри них по центру. В <a href="/gde-skachat-apache-ispolzovanie-servera-i-bekap-dannyh-v-takom-sluchae-u-vas.html">данном случае</a> центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.</p>
<p>6. <h1></h1>
- это один из класса тегов заголовочных тегов <h1>..<h6>
, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример <a href="/parsing-html-i-skreping-s-pomoshchyu-prostoi-biblioteki-html-dom-sozdanie.html">создания html</a> страницы".</p>
Примечание
<p>эти теги имеют большой вес в ранжировании сайта , поэтому ими необходимо пользоваться аккуратно и с умом.</p>
<p>При составлении html-кода нужно придерживаться <a href="/risuem-ikonku-v-fotoshop-prostye-pravila-dlya-sozdaniya-dizaina.html">простого правила</a>: сначала должен идти заголовочный тег <h1>
, а дальше могут идти уже <h2>
, <h3>
и т.д. Главное, чтобы не было сначала <h2>
, потом <h1>
, потом <h3>
и т.п. Должна быть строгая иерархия. Заголовков <h2>
, <h3>
и т.п. может быть много.</p>
<p>7. <br/>
- это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.</p>
<p>8. <span><img src='https://i1.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy>
</span> - это одиночный тег, который выводит изображение.</p>
<ul><li>src
- обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
<br><u>Примечание
</u>:
<ul><li>Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL ;</li>
<li>Не забудьте указать расширение изображения. Например, .jpg
, .gif
, .jpeg
.</li>
</ul></li>
<li>alt
или title
- в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта , особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.</li>
</ul><p>9. <font></font>
- эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.</p>
<p>Примечание:
- аналогичный тег.</p>
<p>Есть также свойство CSS font , в котором можно задавать все эти параметры.</p>
<p>10.
- выделить жирным. Все, что заключено между <b>
и </b>
будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>
.</p>
<p>Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.</p>
<p>Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов <b><code>
</b>
, <b><kbd>
</b>
и <b><samp>
</b>
. Результаты применения этих тегов обычно идентичны: моноширинный шрифт с фиксированным размером символов и интервалов.</p>
<h2>Тег <b><code>
</b>
</h2>
<p>Тег <b><code>
</b>
— cтрочный элемент-контейнер, который применяется для вставки в него небольших фрагментов программного кода, например, в веб-документе, представляющем <a href="/uchebnoe-posobie-po-veb-dizainu-dzhems-r-kreig-irina-skala-shrift-i.html">учебное пособие</a> по программированию. Браузеры отображают такой код моноширинным шрифтом (например, Courier New). Если использовать ero совместно с элементом <span><b>
<p>Тег <b><pre>
</b>
служит для ввода текста без форматирования, то есть с сохранением всех пробелов, табуляций и переносов строк. Внутри этого элемента можно применять большинство элементов форматирования текста.</p>
<p><b>Внимание:
</b> В языке <a href="/html-table-perenos-stroki-v-yacheike-kak-dobavit-s-pomoshchyu-svoistv-css.html">HTML переносы</a> строк, идущие подряд пробелы и табуляции игнорируются. Несколько пробелов подряд воспринимаются как один пробел.</p>
<h3>Пример: использования элементов <b><pre>
</b> и <b><code>
</b></h3>
<ul><li>Попробуй сам »</li>
</ul><p>Внутри элемента <pre>Браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.</p><p>If (document.getElementsByClassName) {
x = document.getElementsByClassName("pagination")
if (x.length>y) {
x.style.visibility = "hidden";
}</p>
<p>Внутри элемента «pre» браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.</p><p>
<pre>
<code>
if (document.getElementsByClassName) {
x = document.getElementsByClassName("pagination")
if (x.length>y) {
x.style.visibility = "hidden";
}
</code>
</pre></p>
<h2>Теги <b><kbd>
</b>
и <b><samp>
</b>
</h2>
<p>Тег <b><kbd>
</b>
отмечает фрагмент кода как вводимый пользователем с клавиатуры. Некоторые браузеры помечают такой текст <a href="/kak-ubrat-fon-v-dokumente-word-dopolnitelnye-momenty-pri-rabote-so-skopirovannymi-iz-interneta-d.html">дополнительным фоном</a>.<br> Тег <b><samp>
</b>
применяется для формирования компьютерного вывода, например, текста, отображаемого в консольном окне после ввода вами управляющего сценария. Этот редко используемый элемент просто выводит свое содержимое моноширинным шрифтом, как <b><kbd>
</b>, <b><pre>
</b>, <b><code>
</b>.</p>
<h3>Пример: элементы <b><kbd>
</b> и <b><samp>
</b></h3>
<ul><li>Попробуй сам »</li>
</ul><p> <p>Текст, который пользователь должен ввести с клавиатуры поместите в<br> элемент-контейнер «kbd».</p>
<p>Введите текст: <kbd>Это — текст, вводимый с клавиатуры</kbd></p>
<p><samp>Это — текст, который помещен в контейнер «samp»</samp></p></p>
<h2>Тег <b><var>
</b>
</h2>
<p>Тег <b><var>
</b>
используется с целью дополнительного выделения переменных в программном коде. Он определяет переменную в математическом выражении или параметр программы и обычно отображается курсивом.</p>
<h3>Пример: элементы <b><var>
</b></h3>
<ul><li>Попробуй сам »</li>
</ul><p>Кинетическая энергия тела:</p>
<p> <p>Кинетическая энергия тела:</p>
<p><var>W</var><sub>к</sub> = <var>m</var><var>v</var><sup>2</sup>/2</p></p>
<h2><i>
</i> Задачи</h2>
<h2>Итоговое задание </h2>
<p>На этом уроке вы познакомились с тегами, которые выводит свое содержимое моноширинным шрифтом, выделяют в коде переменные и тегом предварительного форматирования. Все они важны при работе с матаматическими выражениями и программным кодом.</p>
<p>Пришло время повторить изученное и выполнить три несложных задания:</p>
<h2>Переменная</h2>
<ul><li>Реши сам »</li>
</ul><p>Используя html-элементы обозначте в приведенном уравнении литеру y как переменную.</p><p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Переменная
Уравнение параболы y = Nx2
