Лекция html: Лекция 2. Основы HTML | Веб-программирование

Содержание

Лекция 11 Язык гипертекстовой разметки HTML. Основные понятия.

I. Основные сведения об HTML.

За последние годы разработки для Интернета эволюционировали от статических страниц до динамических информационных систем. Некоторое время назад создание современных Web-страниц не требовало практически ничего, кроме совершенного владения языком разметки гипертекста (Hypertext Markup Language, HTML).

HTML представляет собой простой язык обработки текстов; на этом языке при помощи набора тегов (tags) создается документ, который можно просматривать специальной программой просмотра Web (browser).

HTML — не язык программирования в том смысле, как C++ или Visual Basic; он больше напоминает средства форматирования документов с использованием управляющих последовательностей. Кодирование на HTML часто сравнивают с созданием документа в формате Microsoft Word путем набивки кодов форматирования прямо в Notepad. Очевидно, что функциональность этого крайне мала.

Под гипертекстовым документом понимают документ, содержащий ссылки на другой документ. Реализовано все это через протокол передачи гипертекста HTTP (Hyper Text Transfer Protocol).

Информация в документах Web может быть найдена по ключевым словам. Это означает, что каждый обозреватель Web содержит определенные ссылки, через которые образуются гиперсвязи, позволяющие миллионам пользователей Internet вести поиск информации по всему миру.

Гипертекстовые документы создаются на базе языка HTML (Hyper Text Markup Language). Этот язык весьма прост, управляющие коды его, которые, собственно, и компилируются обозревателем для отображения на экране, состоят из текста ASCII. Ссылки, списки, заголовки, картинки и формы называются элементами языка HTML.

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

HTML позволяет вам формировать различную гипертекстовую информацию на основе структурированных документов.

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

II. Описание HTML

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

Гипертекстовый язык предоставляет только информацию для чтения. Это означает, что редактировать Web-страницы может лишь тот, кто их создал, а не простой пользователь Сети.

Самый главный элемент гипертекстового языка — это ссылки. В мировой паутине вы просто нажимаете на ссылку и мгновенно оказываетесь в другой точке земного шара на выбранной вами страничке.

Тэги.

Тэг оформленная единица HTML-кода.

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

  • левой угловой скобки < (такого же, как «меньше чем» символа)
  • необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру. Таким образом в этом контексте Вы можете читать символ /, как
    конец…
  • имени тега, например TITLE или PRE
  • необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER
  • правой угловой скобки > (такой же, как символа «больше чем»).

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

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

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

Спецификация атрибута состоит из расположенных в следующем порядке:

  • имени атрибута, например WIDTH
  • знак равенства (=)
  • значения атрибута, которое задается строкой символов, например, «80».

Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные (’80’), либо двойные кавычки («80»). Строка в кавычках не должна содержать такие же кавычки внутри себя. Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. Вы можете также опустить кавычки для значений атрибутов, которые состоят только из следующих символов:

  • символов английского алфавита (A — Z, a — z)
  • цифр (0 — 9)
  • промежутков времени
  • дефисов (-)

, например HREF=»http://infofiz.

ru/». Существуют некоторые браузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако, такую практику лучше не применять.

В пределах значения атрибута теги HTML не воспринимаются. А escape последовательности распознаются и интерпретируются, как символы.

Если значение атрибута такое же, как его имя, может быть использован минимальный синтаксис атрибута. То есть <UL COMPACT=»COMPACT»> можно сократить до <UL COMPACT>. Некоторые браузеры даже требуют минимизации для некоторых атрибутов (COMPACT, ISMAP, CHECKED, NOWRAP, NOSHADE, NOHREF). Так что лучше использовать минимизированный синтаксис там, где это возможно.

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

Что касается имен тегов, атрибутов и большинства значений атрибутов, то HTML нечувствителен к регистру

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

  • escape последовательности (более официально называемые символьными объектами), которые начинаются знаком & (например, &lt;)
  • URL, так как он может содержать наименования файлов, которые являются чувствительными к регистру во многих операционных системах (например, в Unix).

Когда документ выводится на экран, пробелы и пустые линии не сохраняются, за исключением текста, заключенного в теги PRE (предварительно отформатированный текст). То есть любая последовательность пробелов, символов табуляции и пустых линий эквивалентна единственному пробелу в файле HTML. С другой стороны, пробел в файле HTML может быть представлен с использованием любого количества пробелов или новыми (пустыми) строками.

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с «.txt» на «.html» недостаточно. Надо соблюсти «правило первой строки«:

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит так:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3. 2 Final//RU»>

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

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

Затем, между тэгами <HTML> и </HTML> следует разместить заголовок документа (между тегами <HEAD> и </HEAD>), и тело документа (между тегами <BODY> и </BODY>).

Между тегами HEAD всегда должна находиться информация о кодировке страницы, например <meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>, и теги определяющие название страницы <TITLE></TITLE>.

Только теперь между тегами содержимого документа <BODY></BODY> можно располагать свою информацию, рисунки, видеофайлы, аудиофайлы…

Пример самого короткого HTML-документа:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2 Final//RU»>
<HTML>
    <HEAD>
    <TITLE>Заголовок документа</TITLE>
    </HEAD>
<BODY>
Текст документа
</BODY>
</HTML>

 

Если приведенный выше пример пояснить схематически, получится следующее:

Из схемы видно, что документ состоит из двух основных блоков — «заголовка» и «тела документа». Заголовок определяется с помощью элемента HEAD, а тело — элементом BODY.

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

Тело документа — святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тэгами <BODY> и </BODY>

     Презентация к лекции.

Подготовка — Олимпиада школьников СПбГУ

Лекции-консультации

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

Записи лекций-консультаций размещаются на Youtube-канале СПбГУ

Видео лекций-консультаций:

Биология

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

География

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Журналистика

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Инженерные системы

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Иностранный язык 

Европейские языки

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Китайский язык

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Информатика

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

История

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Математика

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Математическое моделирование и искусственный интеллект

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Медицина

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Международные отношения

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Обществознание

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Политология

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Право

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Психология

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Социология

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Физика

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Филология

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Философия. этика. религиоведение

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Химия

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023

Экономика

  • Онлайн-лекция Олимпиады школьников СПбГУ. Осень 2022/2023
  • Онлайн-лекция Олимпиады школьников СПбГУ. Зима 2022/2023
Учебно-методические пособия

В пособиях приведены варианты заданий прошлых лет, дан анализ их выполнения, объяснены критерии оценки, предложены рекомендации по эффективной подготовке к выполнению заданий отборочного и заключительного этапов Олимпиады СПбГУ. В заключение представлены списки обязательной и дополнительной литературы.

Дополнительные материалы
 Предмет  Год  Ссылка
География  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  Ссылка
 2018  Ссылка 
 2017  Ссылка
 2015  Ссылка
 Атлас культур и религий  Ссылка
 Терминологический словарь  Ссылка
Журналистика  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  Ссылка
 2018  Ссылка
 2017  Ссылка
История  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  Ссылка
 2018  Ссылка
 2017  Ссылка
Математика  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  Ссылка
 2018  Ссылка
 2017  Ссылка
 2016  Ссылка
 2015  Ссылка
Медицина  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  Ссылка
 2018  Ссылка
 2017  Ссылка
 2016  Ссылка
 2015  Ссылка
Социология  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  Ссылка
 2018  Ссылка
 2017  Ссылка
Химия  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  —
 2018  Ссылка
 2017  Ссылка
Обществознание  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2021  Ссылка
 2019  Ссылка
 2018  Ссылка
 2017  Ссылка
 2015  Ссылка
 Учебник, том 1  Ссылка
 Учебник, том 2  Ссылка
 Учебник, том 3  Ссылка
 Терминологический словарь  Ссылка
Экономика  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2018  Ссылка
 2017  Ссылка
Современный менеджер  2022  Ссылка
 2021  Ссылка
 2017  Ссылка
Биология  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  —
 2018  Ссылка
 2017  —
Право  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2021  Ссылка
 2020  Ссылка
 2015  Ссылка
 2015  Ссылка
Иностранные языки  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  Ссылка
 2018  Ссылка
Китайский язык  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
Информатика  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  —
 2018  Ссылка
 2017  —
Инженерные системы  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  Ссылка
 2018  Ссылка
Физика  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2020  Ссылка
 2019  Ссылка
 2018  Ссылка
Филология  2022  Ссылка
 2022  Ссылка
 2021  Ссылка
 2021  Ссылка
 2018  Ссылка
Китайский язык  2020  Ссылка

Лекции CS142

  • Неделя 1
  • Неделя 2
  • Неделя 3
  • Неделя 4
  • Неделя 5
  • Неделя 6
  • Неделя 7
  • Неделя 8
  • Неделя 9
  • Неделя 10

Неделя 1

Введение, организация курса
Понедельник, 9 января 2023 г.

Введение

Язык гипертекстовой разметки (HTML)
Среда, 11 января 2023 г.

HTML

Каскадные таблицы стилей (CSS)
Пятница, 13 января 2023 г.

CSS

Неделя 2

Выходные — без класса
Понедельник, 16 января 2023 г.

URL-адреса и ссылки
Среда, 18 января 2023 г.

URL-адреса

Основы JavaScript
Пятница, 20 января 2023 г. Основы JavaScript 1
90

Week 3

JavaScript Programming
Monday, January 23, 2023

JavaScript Programming

JavaScript New Features

Document Object Model (DOM)
Wednesday, January 25, 2023

DOM

DOM — Events
Пятница, 27 января 2023 г.

События

Неделя 4

Введение в программирование интерфейса пользователя
Понедельник, 30 января 2023 г.

Интерфейс пользователя

Введение в ReactJS
Среда, 1 февраля 2023 г.

ReactJS

Одностраничные приложения
Пятница, 3 февраля 2023 г.

SPA

Неделя 5

Отзывчивый веб -дизайн
Понедельник, 6 февраля 2023 г.

RWD

Строительные веб -приложения
Среда, 8 февраля 2023

Browser/сервер
6303030202020202020202026 2
2020202020202026 2
2
2026262626202026 2
2
2
2
.

HTTP

СерверКом

Week 6

Web Servers
Monday, February 13, 2023

WebServers

Node.js
Wednesday, February 15, 2023

NodeJS

ExpressJS
Friday, February 17, 2023

Express

Неделя 7

Выходные — без класса
Понедельник, 20 февраля 2023 г.

Уровень хранения
Среда, 22 февраля 2023 г.

База данных

Файлы cookie и сеанс
Пятница, 24 февраля 2023 г.

Сеансы

Неделя 8

Ввод и проверка
Понедельник, 27 февраля 2023 г.

Ввод

Управление состоянием полного стека
Среда, 1 марта 2023 г.

Безопасность веб-приложений — Изоляция браузера
Пятница, 3 марта 2023 г.

Неделя 9

Сетевые атаки
Понедельник, 6 марта 2023 г.

Другие атаки
Среда, 8 марта 2023 г.

Крупномасштабные приложения
Пятница, 10 марта 2023 г.

Неделя 10

Центры обработки данных
Понедельник, 13 марта 2023 г.

Дальнейшие направления
Среда, 15 марта 2023 г.

Будущие направления
Пятница, 17 марта 2023 г.

Конспект лекций — HTML и XHTML

Что такое HTML?

HTML — это язык Интернета. Это то, на чем написаны веб-страницы. HTML означает «язык разметки гипертекста». HTML и XHTML — это языки, используемые для создания веб-страниц. На самом деле это один и тот же язык, за исключением того, что XHTML более формален. Хорошая аналогия, чтобы понять это, состоит в том, что они в основном похожи на разницу между использованием сленгового английского языка и правильным английским языком. Сленговый английский похож на HTML, тогда как XHTML — более правильная, структурированная версия языка.

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

В разделе «Обязательная литература» на этой неделе вы должны были прочитать статью в Википедии с обзором HTML. Если вы еще не читали его, остановитесь и прочитайте прямо сейчас: http://en. wikipedia.org/wiki/HTML

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

HTML5 будет:

  • Обеспечить лучшую обработку ошибок
  • Предоставление новых элементов и атрибутов
  • Разрешить вашему коду быть независимым от устройства
  • Иметь намного более простой тип документа
  • Уменьшить потребность в плагинах — например, Flash

Нужно ли знать HTML для создания веб-сайта?

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

Что нужно для написания HTML?

  • Технически вам нужен только браузер и программа для редактирования текста. При написании HTML лучше избегать программ обработки текстов, потому что они часто добавляют в ваш код дополнительные «вещи». Если вы работаете на ПК, Notepad или Notepad++ работают хорошо и, скорее всего, уже установлены на вашем компьютере. Если вы работаете на MAC, TextWrangler — программа, которая работает хорошо. TextWrangler можно загрузить бесплатно: http://www.barebones.com/products/textwrangler/download.html.

Домашние страницы — index.html

Когда вы вводите веб-адрес в адресную строку браузера, вы запрашиваете сервер, чтобы показать вам веб-страницу. Например, если вы введете mcmenamins.com в свой браузер, сервер должен решить, какую страницу из каталога McMenamins он должен отображать. По умолчанию серверы обычно настроены на отображение файла «index.html» (или «index.htm», или «index.php» и т. д.). Это означает, что домашняя страница или основной HTML-файл для любого каталога должны называться «index.html» (без кавычек, конечно!)

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

Примечание для инструктора:
Помните, что домашние страницы всегда следует сохранять как index. html — НЕ home.html.

Теги

В HTML вы работаете с тегами, которые обозначаются угловыми скобками <>. У каждого тега есть открытие и закрытие. Например, если вы хотите отформатировать абзац, используйте тег

в начале нового абзаца и тег

в конце абзаца. Обратите внимание, закрывающий тег такой же, как и открывающий, но с добавлением косой черты /.

Базовая структура документа HTML включает теги, которые окружают содержимое и придают ему значение. ВСЕ теги HTML должны быть закрыты. Хотя старые версии HTML лениво позволяли не закрывать некоторые теги, последние стандарты требуют, чтобы все теги были закрыты. В любом случае, это хорошая привычка.

Это предложение отформатировано тегами абзаца HTML.

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

Все, что вам нужно помнить, это то, что все теги должны быть закрытыми, и большинство из них (те, с содержимым между ними) имеют формат открывающий тег → содержимое → закрывающий тег.

Пустые теги

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


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


  •    — тег разрыва. Если вы нажмете Shift-Enter, он создаст тег
    для одной строки. Если вы нажмете Enter, он создаст тег

    для строки с двойным пробелом.

  •    — тег изображения.
  •    — используется для ссылки на внешний файл таблицы стилей.

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

Атрибуты

Некоторые теги могут иметь атрибуты, которые представляют собой дополнительные биты информации, которые появляются внутри открывающего тега, разделенные пробелом после тега. За атрибутами обычно следует значение, которое всегда заключено в кавычки. Они могут выглядеть так: Element.

Пример HTML-кода: pcc.edu»>Домашняя страница PCC

Этот код описывается как тег привязки , за которым следует атрибут — href, затем значение внутри кавычки — http://www.pcc.edu. PCC Home — это элемент, который на самом деле отображается в браузере. Не забудьте закрыть тег с помощью .

Элементы

Элементы не являются тегами, а представлены тегами в коде как представление на веб-странице.

Например:Художественная гимнастика 1 | Ваше имя

Элементами приведенного выше кода будут: Художественная гимнастика 1 | Ваше имя, все, что находится между открывающим и закрывающим тегами.

Поскольку этот курс посвящен использованию Dreamweaver для создания веб-страниц, мы не будем тратить много времени на изучение того, как вручную кодировать веб-сайты. Мы оставим это для CAS 206 (которую вы обязательно должны пройти дальше!). Тем не менее, есть определенные теги, которые вам НУЖНО ЗНАТЬ прямо сейчас — или, по крайней мере, уметь распознавать их при просмотре кода вашей веб-страницы.

HTML и XHTML

Основные различия между XHTML и HTML заключаются в том, что в XHTML ( не обязательно в таком порядке ): 

  1. Теги должны быть закрыты. Если вы начинаете с тега

    , то в конце этого абзаца должен быть тег

    .
  2. Теги должны быть правильно вложены друг в друга, например, при использовании в списках или встроенном стиле.
  3. Имена тегов и атрибутов должны быть строчными буквами.
  4. Все значения атрибутов должны быть в кавычках.
  5. В первой строке должно появиться объявление Doctype, чтобы уточнить, какую версию языка разметки вы используете.
  6. Пустые теги, такие как
    и
    , должны содержать косую черту в конце.

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

   — отмечает начало веб-страницы

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

     — определяет текст, который отображается в строке заголовка веб-браузера, открывая page <br/>   

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

   css» rel=»stylesheet» type=»text/css» />   — ссылка на внешний файл CSS

  

  

   — включает содержимое, видимое в главном окне веб-браузера

  

  — представляет заголовок самого высокого уровня на странице. Заголовки идут от самого большого (h2) к самому маленькому (h6)

  

   — выделяет абзац текста

      — выделяет текст жирным шрифтом

      — выделяет текст курсивом

  
   — вставляет разрыв строки

  

       — создает неупорядоченный (маркированный) список

      

         — создает упорядоченный (нумерованный) список

        

    1.    — Окружает элемент списка либо в упорядоченном, либо в неупорядоченном списке

            — Создает гиперссылку

            — Окружает местоположение файла, в котором находится файл изображения, и отображает изображение!

         — отмечает конец содержимого

         — отмечает конец веб-страницы

      При открытии новой веб-страницы в Dreamweaver отображается эти теги вместе с Doctype, тегом и тегом.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/x/XcIo7rb5DeGnhNKx0qfaFkmgCspEZj1zAuSUy2/slide-1.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/x/XcIo7rb5DeGnhNKx0qfaFkmgCspEZj1zAuSUy2/slide-1.jpg' /></noscript></p><p> Хотя это и не является обязательным, тег<title> должен быть встроен в раздел заголовка и важен для большинства веб-дизайнеров.</p><p> Дополнительные сведения см. в этом руководстве по XHTML. Вы можете следовать за направлением, но <strong> не нужно поворачивать его в </strong>.</p><p> Примечание инструктора: <br/> Я знаю, что это все новые термины и языки, которые вам пока придется выучить и проглотить. Однако, как только мы будем делать больше упражнений, вы постепенно поймете теги и то, как они составляют дизайн и структуру веб-страницы.</p><p> Если у вас есть вопросы, задавайте их мне!</p><h3><span class="ez-toc-section" id="_HTML-3"> Общие теги HTML, о которых вам следует знать </span></h3><ul><li> Тег Div<div></div>  —> делит страницу на ряд блоков.</li><li> Тег абзаца<p></p>  —> создает двойной разрыв на странице.</li><li> Тег разрыва <br />  —> устанавливает одиночный разрыв на странице.</li><li> Неразрывный пробел   —> вставьте пробел, который будет отображаться в браузере.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/9/9jTVFW8KL4SqR6DzXalcUbB10OsN7eGmYkHw2M/slide-7.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/9/9jTVFW8KL4SqR6DzXalcUbB10OsN7eGmYkHw2M/slide-7.jpg' /></noscript></div></div></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/vkontakte-moderatory-vakansiya-moderator-kontenta-v-moskve-rabota-v-kompanii-vk-odnoklassniki-vakansiya-v-arhive-c-28-marta-2022.html" rel="prev">Вконтакте модераторы: Вакансия Модератор контента в Москве, работа в компании VK, Одноклассники (вакансия в архиве c 28 марта 2022)</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/css/klassy-i-identifikatory-css-identifikatory-i-klassy-htmlbook-ru-2.html" rel="next">Классы и идентификаторы css: Идентификаторы и классы | htmlbook.ru</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/lekcziya-html-lekcziya-2-osnovy-html-veb-programmirovanie.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='60535' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php"); document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_R-A-744004-7"); if (ins.clientHeight == "0") { ins.innerHTML = stroke2; } }, true); </script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2025 | Все права защищены.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --></body></html>