Файл: Основы программирования на языке HTML (О языке html).pdf

Непосредственно в теге <ul> могут находиться только теги <li> (сокращение от «list item»), которые обозначают элементы или пункты списка. Пунктов может быть неограниченное количество, но должно быть не менее одного. Приведём пример:

<ul>

<li>Кальмар</li>

<li>Лосось</li>

<li>Осетр</li>

</ul>

По умолчанию элементы <ul> отмечаются маркерами такого же цвета, как цвет текста. Также во время тестирования работы данного тега мною было замечено, что закрывающий тег </li> для одноуровневого списка не обязателен для каждого элемента списка, т.е. по примеру выше если убрать закрывающие теги, то результат не изменится:

Код:
<ul>

<li>Кальмар

<li>Лосось

<li>Осетр

</ul>

Тег <ol> - упорядоченный список (сокращение от «ordered list»). Как понятно из названия, здесь действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.

Пункты упорядоченного списка тоже размечаются с помощью тега <li>. Пример кода:

<ol>

<li>Первое блюдо</li>

<li>Второе блюдо</li>

<li>Десерт</li>

</ol>

По умолчанию перед элементами <ol> ставится их порядковый номер (получается нумерованный список).

У тега <ol> имеется три атрибута: type, start и reversed. При помощи атрибута start можно задавать начальное число для списка, атрибут reversed меняет нумерацию на обратную.
Пример:

<li>Первое блюдо</li>

<li>Второе блюдо</li>

<li>Десерт</li>

</ol>

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

1: десятичное число;

a: буквы латинского алфавита в нижнем регистре;

A: буквы латинского алфавита в верхнем регистре;

i: римские цифры в нижнем регистре;

I: римские цифры в верхнем регистре.

Теги <ol> и <ul> можно вкладывать друг в друга и создавать многоуровневые списки. Количество уровней в списках не ограничено. Сперва необходимо создать список первого уровня, а затем между тегами <li> и </li> этого списка добавить ещё один список. При этом необходимо аккуратно закрывать все теги:

<ol>

<li>рулевое управление:

<ul>

<li>рулевые наконечники</li>
<li>маятник</li>

<li>рулевая трапеция</li>

</ul>

</li>

<li>подвеска</li>

<li>трансмиссия</li>

</ol>

3. Doctype в HTML, объявление типа документа

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

Для старой версии HTML Doctype выглядел так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

А для современной версии HTML уже намного проще:

<!DOCTYPE html>

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

Если эта декларация не используется или используется неправильно, браузер будет «думать», что пользователь точно не знает, какой тип страницы или документа создаёт, и переключится в режим "обратной совместимости", при котором вывод многих элементов может осуществляться совершенно не так, как должно быть по задумке web-мастера. Это может показаться жестом гибкости и всепрощения, но на практике приводит к случайным и непонятным результатам.

Декларация должна быть в точности такая, как в примере (включая написание заглавными буквами слова 'DOCTYPE'). В отличие от других тегов этот тег не закрывается.

4. Гипертекстовые ссылки

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Cссылка представляет собой участок текста, щёлкая на который, пользователь переходит на другую страницу, открывает изображение, начинает скачивать файл или перемещаться к какому-то месту на текущей странице. Ссылки делают набор документов связанным и структурированием, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его браузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.

Ссылки создаются с помощью тега <a> (сокращение от «anchor»). Адрес ссылки задаётся в формате URL с помощью атрибута href (сокращение от «hyper reference»). Например:

<a href=" http://my.megacampus.ru ">Megacampus</a>

Относительные адреса:

Во время написания курсовой работаю на своём компьютере, то есть локально. Ссылки на тестовые страницы должны открывать файл с моего компьютера. Для таких ссылок нужно использовать особый адрес, например:

<a href="relative.html">Проба относительных ссылок в HTML</a>

Такой адрес называется относительным. В нём, в отличие от «обычных» адресов, нет адреса сайта! Чтобы перейти по относительному адресу, браузер должен его «расшифровать». Для этого он обычно использует положение текущей страницы. Например, в папке S:/info/Обучение/Университет Учебные материалы/3 Семестр/Технологии программирования курсовая/ есть два файла:

c:/blog/

|-Untitled1.html // в браузере открыта эта страница

|-test Browser.html

В браузере открыта страница S:/info/Обучение/Университет Учебные материалы/3 Семестр/Технологии программирования курсовая/Untitled1.html, и в ней есть ссылка с относительным адресом test Browser.html. Чтобы перейти по этой ссылке, браузер смотрит на расположение открытой страницы и заменяет в нём последнюю часть:

S:/info/Обучение/Университет Учебные материалы/3 Семестр/Технологии программирования курсовая/~~Untitled1.html~~ + test Browser.html // заменяем последнюю часть

S:/info/Обучение/Университет Учебные материалы/3 Семестр/Технологии программирования курсовая/ test Browser.html // открываем этот файл

Относительные адреса работают не только для файлов на компьютере, но и для страниц в сети. Если выложить два файла из примера в интернет (не меняя их взаимное расположение), то ссылка всё равно будет работать. Создадим для тестирования страницу relative.html с текстом: «Страница, на которую был переход по относительной ссылке». А в страницу Untitled1.html добавим относительную ссылку - <a href="relative.html">Проба относительных ссылок в HTML</a>. Проверяем результат:

Браузер при клике на ссылку перевёл на страницу “relative.html”.

Абсолютные адреса:

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

Этот «обычный» или полный адрес называется абсолютным. Выглядит он, например, так:

http://my.megacampus.ru/student/up Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь.

https: — протокол

//my.megacampus.ru — имя сервера

/student/up.html — путь

Если в адресе нет имени сервера или протокола, то это относительный адрес:

http://my.megacampus.ru/student/up - абсолютный адрес

//my.megacampus.ru/student/up.html - относительный адрес

/student/up.html - относительный адрес

up.html - относительный адрес

В тексте главной страницы не хватает одной полезной ссылки — ссылки на курсы по вёрстке. Как раз для неё и пригодится абсолютный адрес.

Ccылка на файл:

Когда мы переходим по ссылкам, то попадаем на другие страницы или места на странице. Но при переходе по ссылке на файл браузер предложит его скачать. Однако, если браузер умеет обрабатывать файлы этого типа, то содержимое файла откроется прямо в браузере. Чаще всего так происходит с изображениями. Но в последнее время браузеры научились открывать PDF-файлы и многие другие. Для того, чтобы предотвратить открытие файлов прямо в браузере у тега <a> существует атрибут download, который поможет именно скачать файл.

<a href="file.pdf" download>Браузер скачает данный файл, а не откроет</a>

Ссылка-якорь

Зачастую страницы в интернете бывают длинными, это могут быть книги, инструкции, и как пример очень подходят учебные материалы Синергии. Чтобы работать с ними было удобно, хорошо бы добавить навигацию. Эта навигация не должна уводить читателя на другие страницы, а должна работать в пределах страницы со статьёй.

Для создания такой навигации используются ссылки-якоря. Ссылка-якорь — это обычная ссылка, в адресе которой используется символ #, после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке.

Пример адреса, состоящего

из одного якоря:

<a href="#part1">Глава 1</a>

При щелчке по такой ссылке браузер найдёт на странице элемент с соответствующим атрибутом id и прокрутит окно страницы к нему.

<section id="part1">Содержание первой главы</section>

При этом перезагрузки страницы не произойдёт.

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

Якоря отлично подойдут для создания оглавления, например:

<h3>Оглавление</h3>

<ul>

<li> <a href="#intro">Введение</a>

</li>

<li><a>о языке HTML</a></li>

<li><a>Основные положения</a></li>

<li><a>Структура языка</a></li>

<li><a>Теги языка</a></li>

</ul>

<h3 id="intro">Введение</h3>

У ссылок-якорей есть особенность: HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если пользователь нажимал ссылки внутри документа, а затем нажал на клавишу ”Back”, то он не перейдет на предыдущую ссылку, а вернется на ту часть документа, которую просматривал до этого (После нескольких нажатий “back”, пользователь будет перенаправлен на предыдущую страницу, если она предшествовала текущему перемещению по ссылке внутри текущей страницы). URL.

5. Графика внутри документа

Тег img, используется для добавления изображения на строницу. Он одиночный, то есть, не требует закрывающего тега. Тег <img> бесполезен без своего атрибута src, который указывает путь к картинке. Пример:

В HTML, чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height. Размеры в этих атрибутах задаются без единиц измерения px. Например:

В примере выше изображению задана ширина 200px и высота 100px.

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

Изображение-ссылка

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

Необходимо обернуть тег <img> в тег <a>. Например:

</a>

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

Задание стандартных цветов. Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тег <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры::