- •Основы создания web-страниц средствами языка разметки гипертекста html
- •Создать простой документ с использованием вышеперечисленных тегов по типу примера 1:
- •Создать простой документ с использованием вышеперечисленных тегов с использованием заголовков по типу примера 2,3:
- •Добавить фон страницы по типу примера 4,5.
- •Гиперссылка в пределах html страницы
- •Почтовая гиперссылка
- •Открытие html страниц в новом окне
- •Цвет текста гиперссылок
- •Графика внутри html-документа
- •Пример 1
- •Построение таблиц
Гиперссылка в пределах html страницы
Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, на этой странице это гиперссылки в начале занятия, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы.
Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры.
Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
Пример:
HTML-код: <a href="#Начало страницы">Наверх страницы</a> В то место, куда надо сделать переход надо вставить: <a name="Начало страницы"></a> |
Отображение в браузере: Наверх страницы |
Почтовая гиперссылка
Создавая ссылку на адрес электронной почты, вы должны указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение.
При создании почтовой гиперссылки можно указывать дополнительный адрес, по которому будет отправлена копия сообщения. Также в такой гиперссылке можно указывать тему отправляемого сообщения.
Пример:
HTML-код: <a href="mailto:admin@on-line-teaching.com?subject=Письмо автору" title="Письмо автору с сайта www.on-line-teaching.com">admin@on-line-teaching.com</a> |
Отображение в браузере: admin@on-line-teaching.com |
Открытие html страниц в новом окне
При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.
Пример:
HTML-код: <a href="../index.html" target="_blank"">Ссылка на главную страницу сайта</a> |
Отображение в браузере: Ссылка на главную страницу сайта |
Цвет текста гиперссылок
Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок.
Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.
Атрибут VLINK - уже посещенные ссылки.
Атрибут ALINK - выделяет активную гиперссылку.
Задание. Создать страницу с гиперссылкой на html документ «Список сотрудников нашей организации» из практического задания № 2 по типу примера 3.1
Пример 3.1
<html> <head> <title>html ссылки</title> </head> <body> Здесь вы можете посмотреть <a href=" spisok.html ">список сотрудников</a> </body> </html>
Наберите код в блокноте, сохраните как «мои ссылки.html», откройте страничку и посмотрите что получилось.
Теперь давайте разберем как она получается. Во первых: адрес страницы, на которую должна вести ссылка указывается в атрибуте href. В данном примере этот атрибут имеет значение spisok.html Таким образом ссылка будет вести на страницу с spisok.html, которая должна быть расположена в той же директории, что и страница, на которой вы эту ссылку устанавливаете. Во вторых: текст ссылки (текст, на который нажмет пользоватеь) указывается между тэгами <a></a>. В нашем примере это текст – список сотрудников.
Практическое задание № 4
Редактирование
Для создания заголовков в HTML, существуют теги <H> </H>, эти теги могут принимать значение от 1 до 6 ,например, размер шрифта, заключенный в теги :
<H1>Текст</H1>
<H2>Текст</H2>
<H3>Текст</H3>
<H4>Текст</H4>
<H5>Текст</H5>
<H6>Текст</H6>
Для придания размера шрифта, можно использовать теги<font> </font> со значением size, но в отличии от тегов <H> </H>, шрифт не будет жирным, например:
<font size="+4">Текст будет таким</font>
<font size="+3">Текст будет таким</font>
<font size="+2">Текст будет таким</font>
<font size="+1">Текст будет таким</font>
<font size="-1">Текст будет таким</font>
<font size="-2">Текст будет таким</font>
В тегах <font> </font>, применяется и элимент FACE, задает имя шрифта,например:
<font face="arial">Шрифт будет такой</font>
<font face="Courier">Шрифт будет такой</font>
<font face="Comic Sans MS">Шрифт будет такой</font>
Так же в тегах <font> </font>, атрибутом COLOR, задается цвет шрифта, например:
<font color="#FF3300">Цвет текста будет такой</font>
<font color="#9933CC">Цвет текста будет такой</font>
<font color="#993333">Цвет текста будет такой</font>
Тегами <SPAN> </SPAN>, с элементом STYLE, задается цвет под конкретным текстом,например:
<span style="background-color: #FF0033"> Текст будет выглядеть так </span>
<span style="background-color: #FFFF00"> Текст будет выглядеть так </span>
<span style="background-color: #66FFFF"> Текст будет выглядеть так </span>
Для переноса текста на другую строку применяется не парный тег <br>. Для создания абзацев существует теги <p> </p>, в которых можно задавать значения элемента ALIGN. Например:
<p align="center">Текст будет располагаться в центре страницы </p>
<p align="right"> Текст выравняится по правому краю страницы </p>
<p align="left"> Текст выравняится по левому краю страницы </p>
<p align="justify">Выравняет текст по обеим сторонам страницы </p>
Текст может быть простым, жирным, курсивом, подчеркнутым и зачеркнутым. Жирный текст заключается между тегами <b>Жирный текст </b>.
Текст курсивом, между тегами <I>Текст жирный, курсивом </I>
Текст подчеркнутый между тегами <U>Текст жирный подчеркнутый</U>
Текст
зачеркнутый между тегами <STRIKE>
Текст зачеркнутый</STRIKE>
Практическое задание № 5