6.3. Лекция № 21. Основы языка разметки гипертекста HTML (21.05.2022 в 20.00 дистанционно, асинхронно)

Знакомимся с HTML

HTML (HyperText Markup Language) переводится как язык маркировки гипертекстов. Это язык, на котором создаются сайты, и чтобы начать его освоение вам понадобится любой браузер (Internet Explorer, Mozilla Firefox) и текстовый редактор (Блокнот, WordPad). Текстовый редактор нужен для создания и редактирования web-страницы, а браузер – для отслеживания результатов.

Теги HTML - это команды языка разметки web-страниц html.

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

Строгое определение:

Тег - элемент HTML, представляющий из себя текст, зключенный в угловые скобки <>

Тег является активным элементом, изменяющим представление следующей за ним информации.

Теги могут быть открывающими (начальными) и закрывающими (конечными).

Открывающие теги состоят из знаков «<» и «>» между которыми указывается имя тега, а у закрывающих перед именем дополнительно ставится прямой слэш (/).

Большинство HTML-тегов являются парными — имеют обязательные открывающий и закрывающий теги, например: и . Некоторые имеют только открывающий тег, например
, и называются пустыми.

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

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

<ТЕГ атрибут=«значение»>

Все теги HTML не чувствительны к регистру, то есть в тексте можно указывать и или вообще .

Обязательные теги

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

Обязательные теги, это такие, которые вы всегда должны прописывать для каждой страницы своего сайта. Существует несколько обязательных тегов HTML.

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

Непосредственно за дескриптором обычно следует тег , это что-то вроде служебной информации. Все тэги, расположенные между , пример:



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

Если цвет текста в не задавать, то по умолчанию он будет черным.

Полужирный текст ;

Наклонный текст (курсив) ;

моноширинный шрифт (шрифт «пишущей машинки»);

Подчеркнутый текст ;

Перечеркнутый ;

Верхний индекс ^sup ;

Нижний индекс _sub

К одному фрагменту текста может применяться сразу несколько тэгов, например:

Текст

Тег
предназначен для ввода параграфов.

С помощью параграфов мы можем:

центрировать текст:
Текст
;

выровнять текст по левому краю документа:
Текст
;

выровнять текст по правому краю документа:
Текст
;

выровнять текст по обоим краям документа (по ширине)
Текст
.

Сделаем выравнивание заголовков нашей web-страницы по центру, добавив тег
перед словом заголовка и закрывающийся тег <р> поле заголовка:

Добавить изображение на сайт возможно следующим образом:



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

Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и сама страница. Если картинка лежит в поддиректории (например, «Новая папка»), то ссылка на неё может выглядеть так: .

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой: .

Если картинка лежит на другом сайте, то путь прописывается полностью:

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

Обратите ваше внимание на то, что MY.jpg и my.jpg – это разные имена файлов – регистр нужно учитывать.

Тег img не требует закрывающего тега.

Например, добавим на нашу веб-страницу картинк

Давайте вспомним об атрибуте align, который отвечает за выравнивание. Атрибут align есть и у рисунков: . Эта запись означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.

Чтобы сделать наоборот (картинка справа, текст слева) следует ввести следующую строку: .

Текст также может располагаться:

внизу картинки (это по умолчанию) - (1),

посередине - (2),

и вверху - (3):

(1)

(2)

(3)

Кроме атрибута align для тега можно ввести еще несколько атрибутов:

(1)

(2)

(3)

(4)

(5)

(6)

Пояснение:

(1) - атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. В нашем примере расстояние равно 10 пикселям.

(2) - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - атрибут alt - краткое описание рисунка. Если навести курсором мыши на рисунок, и подержать несколько секунд, появится описание рисунка. В нашем случае это будет фраза - "мой рисунок".

(4) атрибут width - ширина изображения на странице (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине изображения.

(5) - атрибут height - высота изображения (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать.

(6) – атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.

Атрибуты для одного тега могут употребляться одновременно друг с другом, например:



Рисунок будет прижат к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей, при наведении на рисунок курсора, появится надпись - "Мой рисунок".

Добавим выравнивание в нашу страницу:

По мере развития Интернета стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.

Для описания таблиц используется тег <ТАВLЕ> . Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.

Тег <ТR> (Таble Row, строка таблицы ) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR>ТR>.

Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>ТD>. Число тегов <ТD>ТD> в строке определяет число ячеек.

аголовки столбцов таблицы - тег <ТН>

Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН>ТН> (Таblе Неаder, заголовок таблицы ). Эти теги подобны <ТD>ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю.

Если воспользоваться <ТD>ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

Атрибут NOWRAP

Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.

Атрибут СОLSPAN

Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

Атрибут ROWSPAN

Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, больше единицы, то соответствующее количество строк должно находиться в растягиваемой ячейке. Внизу таблицы ее поместить нельзя.

Атрибут WIDТН

Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы задать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах.

Например, если вы задали в теге <ТАВLЕ WIDTH=250>, вы получите таблицу шириной 250 пикселей независимо от размера страницы на мониторе.

При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране.

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

Атрибут BORDER

В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

Применим некоторые атрибуты к нашей таблице:

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

Для определения ссылки используется тег .

текст_ссылки

Где Filename – имя файла или адрес Internet, на который необходимо сослаться, а текст_ссылки, который будет непосредственно показан в HTML-документе.

Например, Новость , вставленная в код страницы приведет нас на новость о юбилее колледжа со слова "Новость".

---

Смотрите также файлы

• Контрольная работа по дисциплине литература Проверил Преподаватель Пешкова Л. Н. Исполнитель.docx

• Первичные изгибы flexurae primariae.docx

• Тематика практических работ.docx

• 58. Планеты Солнечной системы.docx

• Задача На основании данных, приведенных в таблице, проведите анализ доходов гостиничного комплекса АяАлтай исделайте выводы.docx