Практика. HTML. Основы гипертекстовой разметки — Документация по Веб-программированию 0.0.0

Примечание

HTML (HyperText Markup Language) — язык разметки гипертекста, используемый для создания документов, независимых от аппаратно-программной платформы. HTML — это не язык программирования, а описательный язык.

Цель работы: В ходе выполнения этой лабораторной работы необходимо освоить базовые приемы использования языка HTML для создания макета веб-страницы.

Задание к работе

  1. Спроектировать структуру веб-сайта по теме вашей учебной научно-исследовательской работы (УНИРС) или по любой другой теме, сопоставимой (или бОльшей) по объему с УНИРС.
  2. Разработать эскиз оформления веб-сайта (использовать любой графический редактор).
  3. Выполнить верстку макета страницы с блочной структурой по разработанному эскизу.

Указания к работе

Описание тегов здесь и далее дается без привязки к конкретной версии языка HTML, это сделано умышленно, чтобы акцентировать внимание на общих принципах разметки. Это же относится и к атрибутам тегов. Подробные описание возможностей различных версий HTML (на уровне стандартов) всегда доступны на сайте http://www.w3.org.

Типовая структура парного тега:

<тег [атрибут=”значение” [атрибут=”значение” […]]]>содержимое</тег>

Типовая структура непарного (одиночного) тега:

<тег [атрибут=”значение” [атрибут=”значение” […]]] />

Подавляющее большинство тегов HTML — парные, т.е. требуют наличия закрывающего тега.

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

  • Теги HTML не чувствительны к регистру.
  • Различные версии HTML поддерживают устаревшие (deprecated) теги только для обратной совместимости.
  • Значения атрибутов крайне рекомендуется закрывать в одинарные или двойные кавычки.

Список основных тегов HTML

ТегОбязательные атрибутыОписание
<html> Контейнер HTML-документа.
<head> Блок мета-данных HTML-документа
<title> Название HTML-документа, выводится в заголовке окна программы-браузера.
<meta>См. подробное описание мета-теговПредоставляет дополнительную информацию о документе.
<body> Начальный и конечный тег тела документа.
<p>Параграф, основной текстовый контейнер, закрывающий тег обязателен </p>. После закрывающего тега браузер выполняет перенос строки и абзацный отступ.
<div>Контейнер, основное предназначение — размещение блоков содержимого на странице
<br> (в XHTML/HTML 5 — <br />) Принудительный перенос строки, закрывающий тег не требуется
<pre> Заключенный в теги <pre></pre> текст будет отображаться так, как
он был отформатирован:
с точным соблюдением
    переносов строк
            и                       интервалов.
<ul> Неупорядоченный (маркированный) список, элементы списка выводятся тегом <li>
<ol> Упорядоченный (нумерованный) список, элементы списка выводятся тегом <li>
<a>href = «URI»Создает в документе гиперссылку, обязательный атрибут href указывает на ресурс или его местонахождение
<i> Заключенный в теги <i></i> текст будет отображаться курсивом.
<b> Заключенный в теги <b><b> текст будет отображаться жирным шрифтом.
<tt> Заключенный в теги <tt></tt> текст будет отображаться моноширинный шрифтом.
<h2>…<h6> Заголовки разделов. Возможные значения — от h2 до h6. Семантически правильная структура заголовков веб-страницы влияет на ее ранжирование в поисковом индексе.
<sub> Заключенный в теги <sub></sub> текст будет смещен вниз (нижний индекс)
<sup> Заключенный в теги <sup></sup> текст будет смещен ввверх (верхний индекс).
<big> Заключенный в теги <big></big> текст будет отображаться шрифтом большего размера.
<small> Заключенный в теги <small></small> текст будет отображаться шрифтом меньшего размера.
<img>src=»URI»
alt = «some text»		Непарный тег. Указывает на изображение, загружаемое с адреса, заданного значением обязательного атрибута src. Значение атрибута alt используется, если изображение не может быть загружено или отображено.
<table> Контейнер таблицы. Строки формируются тегом <tr>, ячейки — <td>

Мета-теги

Основное предназначение мета-тегов (<meta . .. />), это включение информации о документе, которая может содержать сведения об авторе, дате создания документа или авторских правах.

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

В документе может находится любое количество тегов <meta>. Все они размещаются в блоке <head>…</head>.

Рассмотрим некоторые, часто используемые мета-теги:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Используется для того, чтобы браузер мог правильно определить тип и содержимого и кодировку веб-страницы.

<meta http-equiv="Refresh" content="N; url=http://example.org/">

Автоматическое перенаправление (редирект) через N секунд после открытия с текущей страницы на указанный адрес .

<meta name="author" content="Имя автора страницы">

Используется для указания имени автора.

Поисковые системы могут найти нужную информацию по имени автора.

<meta name="keywords" content="список, ключевых, слов">

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

<meta name="description" content="Сюда вписывается краткое описание страницы">

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

<meta name="robots" content="index,all">

Управление поисковым роботом, указание ему того, что страницу нужно индексировать (или нет, если указано “noindex”).

Cпециальные символы

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

СимволМнемокодЧисловой кодОписание
 &nbsp;&#160;неразрывный пробел
¢&cent;&#162;цент
£&pound;&#163;фунт стерлингов
¥&yen;&#165;иена или юань
§&sect;&#167;параграф
©&copy;&#169;знак copyright
«&laquo;&#171;левая двойная угловая скобка
&shy;&#173;место возможного переноса
®&reg;&#174;знак зарегистрированной торговой марки
°&deg;&#176;градус
²&sup2;&#178;верхний индекс два (x²)
³&sup3;&#179;верхний индекс три (x³)
·&middot;&#183;точка по середине
»&raquo;&#187;правая двойная угловая скобка
½		&frac12;&#189;дробь – одна вторая
×&times;&#215;знак умножения
÷&divide;&#247;знак деления
σ&Sigma;&#931;греческая заглавная буква сигма
λ&lambda;&#955;греческая строчная буква лямбда
μ&mu;&#956;греческая строчная буква мю
•&bull;&#8226;маркер списка
…&hellip;&#8230;многоточие . ..
€&euro;&#8364;валюта евро

Немного о верстке

Общее форматирование

<!-- Это комментарий -->
<h2>Заголовок</h2>
<p align="center">Абзац по центру</p>
<p align="right">Абзац по правому краю</p>
<p>Обычный текст — <b>полужирный текст</b></p>
<p><span>Ooops!</span> — использование CSS</p>

Структура макета веб-страницы

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

Больше возможностей по дизайну представляют макеты веб-страниц с нелинейной структурой, которые создаются:

  • С использованием фреймов.
  • С использованием табличной верстки.
  • С использованием блочных элементов.

Пусть требуется создать документ, логически разделенный на три блока (рис. 2): «head» — верхний блок, «menu» — левый блок, «content» — правый блок. Примеры, иллюстрирующие как это можно сделать перечисленными способами, приведены в листингах 2, 3 и 4.

Рис.2. Веб-страница с тремя блоками

Листинг 2. Фреймовая структура

<!--
    Содержимое блоков хранится в файлах top.html, left.html, content.html
    Сборка выполнена в файле index.html, имеющем следующий вид:
-->
<html>
<head>
<title>Фреймы</title>
</head>
<frameset rows="10%,*">
    <frame name="top" src="top.html">
    <frameset cols="10%,*">
        <frame name="left" src="left.html">
        <frame name="cont" src="content.html">
    </frameset>
<noframes>Это для браузеров, не поддерживающих фреймы.</noframes>
</frameset>
</html>

Листинг 3. Табличная структура

<html>
<head>
    <title>Таблицы</title>
</head>
<body>
<table>
    <tr>
        <td colspan=2>HEAD</td>
    </tr>
    <tr>
        <td>LEFT</td>
        <td>CONTENT</td>
    </tr>
</table>
<body>
</html>

Листинг 4. Блочная структура

<html>
<head>
    <title>Блоки (div)</title>
<style> <!-- см. внедренные стили -->
    body    {margin: 10px;}
    div     {border: solid 1px black;}
    .top    {position: relative; height: 100px; width: 100%;}
    .left   {position: absolute; top: 114px; left: 10px; width: 200px; }
    .main   {position: absolute; top: 114px; left: 214px; margin-right:8px;}
</style>
</head>
<body>
    <div>TOP</div>
    <div>LEFT</div>
    <div>CONTENT</div>
</body>
</html>

Контрольные вопросы

  • Что такое HTML? Что такое гипертекстовый документ?
  • Что такое тег? Структура тега HTML. Формат записи.
  • Привести структуру HTML документа. Описать назначение тегов <html>, <head>, <meta>, <body>.
  • Что такое атрибут тега? Формат записи атрибутов.
  • Перечислить теги для представления текстовго содержимого и дать их описание.
  • Как представляются гиперссылки в HTML документе? Дать пример внутренних и внешних ссылок.
  • Перечислить виды списков, существующих в HTML. Привести теги, представляющие списки в HTML.
  • Что такое вложенные списки в HTML? Привести пример разметки вложенного списка.
  • Как включаются графические объекты в HTML документы?
  • Куда будет указывать ссылка, если атрибут href оставить пустым (<a href=”“>анкор</a>)?
  • Как будет отображаться страница, если мета-тег charset не будет соответствовать фактической кодировке текста?
  • Что произойдет, если в странице использовать следующий код:

<meta http-equiv=”refresh” content=”0;”>

Основы Web-программирования

264

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

Ниже представлены разделы, которые входят в данную тему:

HTML5

HTML5 — это не просто новый язык разметки, а дюжина независимых веб-стандартов в одной упаковке. Новый стандарт позволяет воспроизводить видео, не прибегая к помощи модулей расширения браузера, таких как, например, Flash. Также в этом стандарте вводится лавина функциональностей, движимых JavaScript, которые могут придать веб-страницам определенные расширенные, интерактивные возможности, встречаемые в программном обеспечении для настольных компьютеров.

CSS3

Почти бессмысленно пытаться создать современный веб-сайт, не используя возможностей CSS (Cascading Style Sheet). Этот стандарт воткан в ткань Всемирной сети почти так же плотно, как и HTML. Каскадные таблицы стилей являются основным средством для любого типа деятельности в области веб-дизайна, будь то компоновка страниц, создание интерактивных кнопок и меню или простое декорирование. По сути, в то время как фокус HTML все больше смещается на содержимое и семантику, спецификация CSS стала центральной технологией веб-дизайна.

JavaScript, jQuery

Язык сценариев JavaScript был создан с целью получения доступа из сценариев ко всем элементам HTML-документа. Иными словами, этот язык представляет средства для динамического взаимодействия с пользователем, например для проверки приемлемости адресов электронной почты в формах ввода данных, отображения подсказок и т.п. В сочетании с CSS JavaScript закладывает основу мощности динамических веб-страниц, которые изменяются буквально на глазах, в отличие от новой страницы, возвращаемой сервером.

ASP.NET

ASP.NET является основной технологией для построения серверных элементов веб-приложений от Microsoft. Заинтересовать разработчиков в ASP.NET совсем нетрудно. Без преувеличения, ASP.NET является наиболее полной платформой для веб-разработки из всех, которые когда-либо создавались.

PHP и MySQL

Сочетание PHP и MySQL является одним из самых удобных подходов к динамическому веб-конструированию, основанному на использовании базы данных. Благодаря открытости исходных кодов (в отличие от конкурирующей технологии ASP.NET) это технологическое сочетание можно использовать совершенно бесплатно, и поэтому оно приобрело очень большую популярность у веб-разработчиков. Любой претендующий на результативность разработчик, использующий платформу Unix/Linux или даже Windows/Apache, нуждается в серьезном освоении этих технологий.

Понимание основ HTML

Как работает HTML и некоторые его термины

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

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

Если вы хотите узнать больше, помимо того, что я рассказываю (и вам следует ), я настоятельно рекомендую начать с главы 3 книги Скотта Мюррея (бесплатно, онлайн) «Интерактивная визуализация данных для Интернета», которая охватывает основы и цели HTML, CSS и JS.

Bash и строки

Для ознакомления прочтите руководства/разделы по адресу:

  • Heredocs, которые позволяют записывать более длинные многострочные строки

Мы знаем, как отправить строку текста в новый файл:

 # Чтобы отправить строку в новый файл, старый, неуклюжий способ:
echo " 
Здравствуйте
 " > some.html

Мы используем heredocs , чтобы упростить работу с многострочными строками. Таким образом, вы захотите освоить эту нотацию, используя cat , чтобы добавить heredoc в файл (хотя мы попрактикуемся в этом больше в другом уроке):

 # Чтобы отправить строку в новый файл, используя cat и heredocs
кошка > some. html <<'EOF'

  <тело>
   
Привет!
 
   Эй, мама, я использую "кавычки"!
EOF

Чтобы добавить в файл, вы уже должны быть знакомы с >> :

 # Чтобы добавить строку, используя cat и heredocs
cat >> some.html <<'EOF'

Вот вам еще один абзац

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

Если вы находитесь на corn.stanford.edu , подумайте о работе в каталоге ~/WWW , так как все страницы и файлы, сохраненные там, могут быть доступны в Интернете.

Например, в приведенном ниже фрагменте кода я создаю страницу по адресу: ~/WWW/playground/hello.html :

 mkdir -p ~/WWW/playground
кошка > ~/WWW/playground/hello.html <<'EOF'
  
  <голова>
     Это страница Дэна
  
  <тело>
   
Привет!
 
  
Только тестирование HTML и использование Heredoc

  
Вот
    котенок:
  

   com/g/600/400">
EOF
# И добавим еще немного, обратите внимание на использование double
# правые фигурные скобки для добавления к файлу
кошка >> ~/WWW/playground/hello.html <<'EOF'
  
А вот и Билл Мюррей

  
EOF

Мой SUnet ID имеет номер dun , что означает, что ~/WWW/playground/hello.html будет доступен для просмотра по адресу:

http://stanford.edu/~dun/playground/hello.html

Элемент HTML

Структурным строительным блоком HTML является элемент HTML

Ниже приведен пример элемента абзаца :

 

  «Они будут держаться подальше от меня», — настаивала она. «Чтобы попасть в аварию, нужны двое».

Текстовое содержимое элемента абзаца заключено в 9Начальный тег 0025 ,

и соответствующий ему конечный тег ,

— обратите внимание на косую черту конечного тега , которая отличает его от начального тега.

Давайте создадим веб-страницу

И это почти все, что нам нужно знать, чтобы сделать функциональную (хотя и вопиюще нестандартную) веб-страницу. Если вы находитесь на corn.stanford.edu , перейдите на свой личный (но не частный ) ~/WWW и создайте подкаталог для опробования:

 mkdir -p ~/WWW/webtest
компакт-диск ~/WWW/веб-тест
# Создайте веб-страницу с именем `foo.html`, состоящую из одного элемента абзаца:
кошка > foo.html <<'EOF'


  «Они будут держаться подальше от меня», — настаивала она. «Чтобы попасть в аварию, нужны двое».


EOF

Примечание: Выше я использую то, что называется «heredoc», чтобы быстро выгрузить строку в новый файл. Если вы находите его синтаксис странным, просто используйте nano 9.0026 для создания нового файла.

Если вы посетите http://www.stanford.edu/~your_sunet_id/webtest/foo.html, вы должны увидеть что-то вроде этого:

некоторые произвольные пробелы). Опять же, используйте nano для копирования и вставки, если вам не нравится внешний вид этого EOF :

 cat >> foo.html <<'EOF'


  «Предположим, вы встретили кого-то столь же беспечного, как и вы сами».
  



 "Я надеюсь, что никогда не буду," ответила она. «Я ненавижу беспечных людей. Вот почему ты мне нравишься».
 

EOF

Результат:

Незначительные пробелы

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

Давайте подтвердим это через командную строку. Выполните команду, которая удалит символов новой строки из foo.html и перенаправит их в новый файл: foo-oneline.html 

 cat foo.html | tr -d '\n' > foo-oneline.html

Посетите foo-oneline. html в браузере. Вы не должны увидеть никаких изменений внешнего вида текста.

HTML считается языком с незначительными пробелами . С точки зрения содержимого пробелы не имеют значения — все последовательные пробелы и новые строки обрабатываются как один пробел. Для нас это в основном пустяки, но с практической точки зрения это означает, что мы можем размещать элементы HTML столько (или меньше), сколько нам нужно, не нарушая того, что отображается в браузере.

Теги как структура

Теперь вместо удаления пробелов давайте удалим тегов элементов и сохраним результат в виде нового файла foo-no-p.html . Мы можем сделать это двумя способами; используя анализатор HTML pup :

 cat foo.html | щенок 'текст{}' > foo-no-p.html

– или через старый добрый sed и его замену function:

 cat foo.html | sed -E 's###g' > foo-no-p. html

Теперь посетите foo-no-p.html :

Похоже, теги

сделали все возможное. По умолчанию веб-браузеры обрабатывают

элементов как блоков — каждый элемент блока занимает целую «строку» окна браузера. С удаленными тегами

таких блоков не существует, и, следовательно, нет построчного разделения.

Примечание: Блочный характер элемента абзаца (т. е.

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

Вложенные элементы HTML

для вложения элементов друг в друга. Например, если мы хотим выделить предложение в абзаце, мы должны обернуть это предложение тегами :

 cat foo.html | sed -E 's#(ненавижу нерадивых людей)#\1#'

(Обратите внимание на использование групп захвата: одна из лучших функций регулярных выражений)

Результат:

 

  «Они будут держаться подальше от меня», — настаивала она.  «Чтобы попасть в аварию, нужны двое».




  «Предположим, вы встретили кого-то столь же беспечного, как и вы сами».
  



 "Я надеюсь, что никогда не буду," ответила она. «Я ненавижу беззаботных людей. Вот почему ты мне нравишься».

И результат, если мы направим его на новую страницу с именем foo-em.html — обратите внимание на текст, выделенный курсивом:

Здесь не так много замечаний, за исключением того, что вы хотите, чтобы ваши вложенные начальный и конечный теги были автономными в пределах их parent__element. Элемент

считается __parent элемента :

 

 "Я надеюсь, что никогда не буду," ответила она. «Я ненавижу беззаботных людей. Вот почему ты мне нравишься».

Это неверная форма , имеющая закрывающий тег дочернего элемента после закрывающего тега его родителя:

 

 "Я надеюсь, что никогда не буду," ответила она.  «Я ненавижу беспечных людей. Вот почему ты мне нравишься».

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

Атрибуты HTML

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

 Нажмите здесь

Тег заключает в себе текстовый элемент Щелкните здесь, пожалуйста , и имеет атрибут с именем href . значение этого атрибута href равно "http://www.example.com" , что является целевым URL-адресом.

Подводя итог компонентам вышеуказанного элемента гиперссылки:

Тег <а>
Атрибут ссылка
Значение атрибута "http://www. example.com"
Текст Нажмите здесь пожалуйста

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

 Нажмите здесь, пожалуйста

Незакрытые теги

Некоторым тегам не требуется соответствующий конец 9Тег 0026. Одним из примеров является тег , который используется для отображения изображения, существующего по URL-адресу, на который указывает его атрибут src :

На концептуальном уровне это имеет некоторый смысл: изображение является автономным элементом, оно не должно заключать в себе текстовый элемент или какой-либо другой элемент. То же самое с тегом
, который обозначает разрыв строки . Какие теги разве не нужно закрывать? Это вопрос запоминания, но бывает, что их всего несколько (и если вы добавите ненужный закрывающий тег, это не сломает страницу).

Boilerplate HTML

Хотите верьте, хотите нет, но теперь мы знаем, что необходимо для создания пригодной для использования веб-страницы HTML. Остальное — запоминание определенных соглашений и для видов тегов и соответствующих им атрибутов (как мы увидим в уроке CSS, имя тега и его внешний вид, отображаемый браузером, не имеют ничего общего друг с другом). .

Почему нам удается так мало запоминать, так это потому, что веб-браузеры научились справляться с плохим HTML, поэтому наша страница foo.html , состоящая только из абзацев, отображается очень хорошо. Существует минимальное количество шаблонов, чтобы сделать его действительным документом HTML5… И опять же, это в основном не имеет значения, поскольку браузер компенсирует нашу лень, по крайней мере, на основных страницах.

Однако, когда мы начнем работать с таблицами стилей и JavaScript, мы захотим быть более формальными в нашем шаблоне. Вот пример страницы с тег (который не нужно закрывать) и метатег </code>:</p><pre> <!doctype html> <title>Моя страница

Заголовок

Это абзац текста.

Вот ссылка на Нью-Йорк Таймс

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

 
<голова>
Моя страница

<тело>
 
Заголовок
 


  Это абзац текста.




Вот ссылка на Нью-Йорк Таймс

Попробуйте вывести эти два файла в каталог «~/WWW», один с некоторым шаблоном, а другой с большим количеством шаблонов, а затем откройте их в браузере:

Эта страница будет жить по адресу www. stanford.edu/~yourname/test/simple.html 

 mkdir -p ~/WWW/test/
кошка > ~/WWW/test/simple.html <<'EOF'

Моя страница
 
Заголовок
 


  Это абзац текста.




Вот ссылка на Нью-Йорк Таймс


EOF

Эта другая страница будет жить по адресу www.stanford.edu/~yourname/test/more.html 

 mkdir -p ~/WWW/тест/
кошка > ~/WWW/test/more.html <<'EOF'

<голова>
Моя страница

<тело>
 
Заголовок
 


  Это абзац текста.




Вот ссылка на Нью-Йорк Таймс



EOF

Посетите те две страницы, которые вы создали. Заметили разницу (по крайней мере, в современном браузере)? Скорее всего, не будет, и когда дело доходит до метаданных, таких как атрибут HTML, в любом случае он не должен быть виден на странице.

Заключение

Итак, наше беглое путешествие по HTML подошло к концу. Если вы хотите узнать больше, начните с главы 3 книги Скотта Мюррея (бесплатно, онлайн) «Интерактивная визуализация данных для Интернета

». данные для программного построения страниц. HTML — это просто еще один «фильтр», через который мы отправляем наши данные.

Учебник по изучению HTML — javatpoint

следующий →

Учебник HTML Учебник или HTML 5 содержит базовые и расширенные концепции HTML. Наш учебник HTML разработан для начинающих и профессионалов. В нашем учебнике каждая тема дана шаг за шагом, так что вы можете изучить ее очень легко. Если вы новичок в изучении HTML, вы можете изучить HTML от базового до профессионального уровня, а после изучения HTML с помощью CSS и JavaScript вы сможете создать свой собственный интерактивный и динамичный веб-сайт. Но сейчас в этом уроке мы сосредоточимся только на HTML.

Основные моменты HTML приведены ниже:

  • HTML означает язык гипертекстовой разметки.
  • HTML используется для создания веб-страниц и веб-приложений.
  • HTML широко используется в Интернете.
  • Мы можем создать статический веб-сайт только с помощью HTML.
  • Технически HTML — это язык разметки, а не язык программирования.

Пример HTML с редактором HTML

В этом руководстве вы получите множество примеров HTML, по крайней мере, один пример для каждой темы с объяснением. Вы также можете редактировать и запускать эти примеры с помощью нашего онлайн-редактора HTML. Изучение HTML — это весело, и его очень легко выучить.

<голова>Название веб-страницы <тело>

Напишите свой первый заголовок

Напишите свой первый абзац.

Протестируйте сейчас

Индекс HTML

Учебное пособие по HTML

  • Введение в HTML
  • Что такое HTML
  • тегов HTML
  • Форматирование HTML
  • HTML-заголовок
  • HTML-абзац
  • Якорь HTML
  • HTML-изображение
  • Таблица HTML
  • HTML-списки
  • Нумерованный список HTML
  • Ненумерованный список HTML
  • Список HTML-описаний
  • HTML-форма
  • HTML-классы
  • Идентификатор HTML
  • HTML-фреймы
  • HTML JavaScript
  • Путь к файлу HTML
  • HTML-заголовок
  • Макет HTML
  • Адаптивный HTML
  • HTML Компьютерный код
  • HTML-сущности
  • HTML-символы
  • Кодировка HTML
  • Код HTML-адреса

Теги HTML

  • Выделение HTML
  • Текстовое поле HTML
  • HTML-кавычки
  • Стиль HTML
  • Заголовок HTML
  • HTML-ДОКТИП
  • Тег HTML Div
  • Предварительный тег HTML
  • Тег кода HTML
  • Тег метки HTML
  • Тег ввода HTML
  • HTML-тег кнопки
  • Тег HTML HR
  • Тег HTML BR
  • Тег HTML-скрипта
  • HTML-тег NoScript
  • HTML-тег b

Учебное пособие по HTML5

  • Учебное пособие по HTML5
  • HTML5 Руководство пользователя
  • Теги HTML 5
  • HTML-аудио
  • HTML-видео
  • HTML-прогресс
  • HTML-метр
  • HTML-тег данных
  • HTML-тег списка данных
  • Тег заголовка HTML
  • HTML-тег нижнего колонтитула
  • Тег рисунка HTML
  • Тег HTML Figcaption
  • HTML-тег статьи
  • Отступающий HTML-тег
  • HTML-тег диалога
  • HTML-тег сведений
  • Тег сводки HTML
  • Тег раздела HTML
  • Метка времени HTML
  • Основной тег HTML
  • HTML тег WBR
  • Холст HTML
  • HTML SVG
  • Перетаскивание HTML
  • HTML Карты Google
  • Семантика HTML5
  • Миграция HTML5

Имена цветов HTML

  • Имена цветов HTML

Вопросы для интервью

  • HTML Вопросы для интервью

Теги HTML 5

В этом уроке мы изучим теги HTML 5, такие как тег аудио, тег видео, тег холста, HTML svg, геолокация HTML, перетаскивание HTML и т.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *