
- •Основы html для начинающих
- •Элементы контейнера head.
- •Использование комментариев.
- •Meta теги html
- •Основные мета теги в html.
- •Форматирование текста в html
- •Теги форматирования текста в html.
- •Использование тега pre.
- •Заголовки.
- •Выравнивание элементов.
- •Форматирование шрифта.
- •Гиперссылки в html
- •Правила использования гипертекстовых ссылок.
- •Графика в html
- •Использование графики на html страницах.
- •Как создать страницу html
- •Добавление изображений к html странице.
- •Форматирование изображений.
- •Использование фона в html.
- •Из примеров хорошо видно, как браузер тиражирует изображение. Горизонтальная линия.
- •Html списки
- •Html формы
- •Создание html форм.
- •Основные элементы форм.
- •Текстовые поля.
- •Поле пароля.
- •Переключатели (радиокнопки).
- •Флажки (checkbox).
- •Командные кнопки.
- •Поле выбора файла.
- •Раскрывающийся список выбора.
- •Развернутый список выбора.
- •Фреймы в html
- •Подключение и выполнение javascript
Форматирование шрифта.
Для форматирования шрифта используется тег Font, который имеет ряд атрибутов, которые позволяют придать тексту определенный шрифт, размер и цвет:
Значение |
Вид |
face |
Позволяет изменить шрифт |
color |
Позволяет выбрать цвет |
size |
Задает размер букв |
В приведенной ниже таблице вы можете увидеть шестнадцетиричные коды основных цветов, также называемых безопасной web палитрой. Проще говоря данные цвета будут отображаться одинаково, вне зависимости от версии браузера и модели монитора:
цвет |
шестнадцатеричное представление |
aqua |
#00FFFF |
black |
#000000 |
blue |
#0000FF |
fuchsia |
#FF00FF |
gray |
#808080 |
green |
#008000 |
lime |
#00FF00 |
maroon |
#800000 |
navy |
#000080 |
olive |
#808000 |
purple |
#800080 |
red |
#FF0000 |
silver |
#C0C0C0 |
teal |
#008080 |
white |
#FFFFFF |
yellow |
#FFFF00 |
Ну и небольшой пример:
<font face="verdana" color="red" size="1"> Я красный текст шрифта verdana размером 1 </font>
Гиперссылки в html
Гиперссылки в HTML» – пятый урок учебника HTML. В этом уроке речь пойдет об использовании гипертекстовых ссылок. На гипертекстовых связях основан любой web документ, поэтому уметь работать со ссылками обязан каждый веб мастер.
Правила использования гипертекстовых ссылок.
Гиперссылки в HTML необходимы для связи различных документов, как в пределах одного сайта, так и в пределах всей сети интернет. Для создания гипертекстовых связей (гиперссылок) используется дескриптор <a>:
<a href="адрес_документа">текст ссылки</a>
При помощи атрибута href передается адрес документа, на который указывает ссылка.
В качестве гиперссылок могут выступать самые разнообразные объекты, в том числе изображения:
– мета–теги
в HTML .
Ссылаться
можно не только на разные документы, но
и на различные части этих документов.
Для этого в некоторой части документа
необходимо разместить так называемый
якорь – конструкцию вида <a
name="название якоря "></a>,
а затем сослаться на нее, указав в
атрибуте href следующий
код:
href="http://www.eltisbook.ru.#название якоря"
Нажав на ссылку ниже вы попадете в нижнюю часть главной страницы:
<a href="../index.php#1">Как создать свой сайт БЕСПЛАТНО </a>
Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход просто произойдет на начало документа, при этом не возникнет никаких ошибок.
Гипертекстовые связи могут осуществляться по множеству протоколов. Наиболее часто используемые представленны ниже:
HTTP – протокол – стандартный протокол гипертекстовых связей, предназначенный для разовой передачи блоков информации.
FTP – протокол – уневерсальный протокол передачи файлов. Требует авторизации.
MAILTO – стандартный протокол передачи почты.
Настройка гиперссылок в HTML.
Атрибут target, тега <a> определяет как откроется новая страница и принимает следующие значения:
_self – документ откроется в текущем окне
_parent – во фрейме – родителе текущего фрейма
_top – в главном окне всей фреймовой структуры
_blank – документ откроется в новом окне
Например для открытия страницы с контактами в новом окне необходимо использовать следующий код:
<a href="http://www.eltisbook.ru/contact/contact.php" target="_blank">Контакты</a>
Придать гиперссылкам особенный вид можно при помощи атрибутов LINK, ALINK, VLINK, где:
Link – определение внешнего вида еще не посещенных ссылок.
Alink – определение внешнего вида уже посещенных ссылок.
Vlink – определение внешнего вида выделенных ссылок.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег IMG, атрибут align</title>
</head>
<body>
<p><img src="images/square.gif" alt="Квадрат" width="20" height="20"
align="right"> Этот текст обтекает рисунок по его левому краю.</p>
</body>
</html>
Листинг 1.15
<html>
<head> <title>Гиперссылки</title>
<body> <р>0бычный текст. <a href="other_doc.htm">Гиперссылкa на другую web-страницу</а> </р> </body>
</head> </html>