|
Первая страница
1. Создание простейшей страницы
2. Изменяем цвета фона и текста
3. Выравнивание текста
4. Списки
5. Вставка изображения
6. Ссылки
1. Создание простейшей страницы
Любая Web-страница должна начинаться с тега <html>, а заканчиваться его закрывающим близнецом </html>. Структурно Web-страница разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами <head> и </head>, а тело документа обозначается тегами <body> и </body>
Итак, для начала создайте новую папку и назовите ее, к примеру, "Мой сайт". Затем откройте программу "Блокнот" и наберите в нем следующий HTML-код:
<html>
<head>
<title>Первая страничка</title>
</head>
<body>Добро пожаловать! :)</body>
</html>
|
Выбираем в "Блокноте": "Файл" - "Сохранить как...", задаем имя index.html и сохраняем в нашу папку "Мой сайт". Посмотрим, что у нас получилось.
Результат
Теперь разберем то, что мы набирали:
<html> - указывает программе просмотра страниц что это HTML-документ
<head> -
определяет место, где помещается различная информация не отображаемая в теле документа (тег <body>). Здесь располагается тег названия документа и теги для поисковых машин
<title> -
в этом теге указывается заголовок страницы
<body> -
определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты)
2. Изменяем цвета фона и текста
Теперь попробуем изменить цвета фона и текста. Для этого отредактируем наш файлик index.html. Кликаем по нему правой кнопкой мыши и выбираем:
"Открыть с помощью" - "Блокнот"
Вносим следующие изменения:
<html>
<head>
<title>Первая страничка</title>
</head>
<body text="white" bgcolor="black">Добро пожаловать! :)</body>
<br><font color="red">Это моя первая страничка!</font>
</html>
|
Результат
Посмотрим, что нового у нас появилось в нашем html-коде:
• Параметры тега <body> - text и bgcolor:
text - устанавливает цвет текста документа, используя значение цвета в виде RRGGBB (пример: 000000 - черный цвет), либо используя константы цвета, например для черного цвета, используемой в нашем уроке <body text= "black">
bgcolor - устанавливает цвет фона документа, используя значение цвета в виде RRGGBB (пример: FF0000 - красный цвет), либо используя константы цвета, например для красного цвета, используемой в нашем уроке <body bgcolor="red">
• Теги <br> и <font>:
<br> -
(BReak line) устанавливает перевод строки в том месте, где этот тег находится.
*не требует парного закрывающего тега
<font> -
представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура
Параметр color - устанавливает цвет текста
3. Выравнивание текста
Для установки выравнивания текста обычно используется тег параграфа <p> с параметром align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным параметром align
<p>Текст</p> |
Добавляет новый параграф, по умолчанию выровненный по левому краю. Перед параграфом и после него автоматически добавляются небольшие вертикальные отступы. |
<p align="center">Текст</p> |
Выравнивание по центру |
<p align="left">Текст</p> |
Выравнивание по левому краю |
<p align="right">Текст</p> |
Выравнивание по правому краю |
<p align="justify">Текст</p> |
Выравнивание по ширине |
<nobr>Текст</nobr> |
Отключает автоматический перенос строк, даже если текст шире окна браузера |
Текст<wbr> |
Отключает автоматический перенос строк, даже если текст шире окна браузера |
<div align="center">Текст</div> |
Выравнивание по центру |
<div align="left">Текст</div> |
Выравнивание по левому краю |
<div align="right">Текст</div> |
Выравнивание по правому краю |
<div align="justify">Текст</div> |
Выравнивание по ширине |
* По умолчанию текст выравнивается по левому краю.
Отличие между параграфом (тег <p>) и тегом <div> в том, что в начале и в конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div>
Давайте попробуем разместить текст по центру при помощи тега параграфа <p>. Вносим изменения в index.html
<html>
<head>
<title>Первая страничка</title>
</head>
<body text="white" bgcolor="black">Добро пожаловать! :)</body>
<br><font color="red">Это моя первая страничка!</font>
<br><p align="center">Выравнивание по центру</p>
</html>
|
Результат
Думаю, что теперь принцип выравнивания текста Вам понят. Попробуйте поэкспериментировать с тегами, которые указаны в этом уроке в таблице выше.
4. Списки
Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованные и ненумерованные. В нумерованных списках каждый пункт обозначен некоторым номером. У ненумерованных списков пункты выделяются при помощи графических маркеров. Списки также разделяют на одноуровневые и многоуровневые. В одноуровневых списках все элементы равноценны. А в многоуровневых каждый элемент может содержать еще несколько пунктов, которые организуют новый список, вложенный в исходный элемент. Может быть, звучит несколько туманно, но единожды увидев это на примере, уже ни с чем нельзя будет спутать.
Итак, начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом <ul> и его закрывающим близнецом </ul>. Отдельные элементы списка объявляются при помощи обозначающего тега <li>, который не имеет закрывающей пары. Точнее, закрывающий тег </li> может применяться, но он необязателен.
Давайте создадим еще одну html-страничку. Для этого опять откроем "Блокнот" и внесем туда следующий HTML-код:
<html>
<head>
<title>Списки</title>
</head>
<body>Mapкированный список</body>
<ul type="square" title="Ненумерованный список">
<li>Первый пункт списка
<li>Второй пункт списка
<li>Третий пункт списка
</ul>
</html>
|
Сохраним файл как spiski.html в папке "Мой сайт".
Посмотрим, что у нас получилось Результат
<ul> (Unordered List) - тег служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида. Требуется закрывающий тег </ul>
Атрибуты:
type - При помощи параметра type мы имеем возможность явно указывать, какой тип маркера следует использовать для отображения элементов списка. В качестве значений данного параметра применяется одно из трех предустановленных ключевых слов:
disk |
Закрашенный кружок (по умолчанию) |
circle |
Незакрашенный кружок |
square |
Квадратик |
title - Всплывающая подсказка при наведении курсора на список.
<li> (List Item) - тег служит для обозначения элемента (строки) списка. Используется в нумерованных(<ol>) и ненумерованных(<ul>) списках
Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается при помощи тегов <ol> и </ol>. А элементы списка объявляются при помощи все того же тега <li>. Рассмотрим пример создания простейшего нумерованного списка и увидим, как его обрабатывает и отображает браузер. Немного отредактируем нашу страничку spiski.html, внеся туда следующие изменения:
<html>
<head>
<title>Списки</title>
</head>
<body>Mapкированный список</body>
<ul type="square" title="Ненумерованный список">
<li>Первый пункт списка
<li>Второй пункт списка
<li>Третий пункт списка
</ul>
<br>Нумерованный список
<ol type="I" title="Нумерованный список">
<li>Первый пункт списка
<li>Второй пункт списка
<li>Третий пункт списка
</ol>
</html>
|
Результат
В теге <ol> атрибут type имеет следующие типы маркеров:
1 |
Нумерации обычными арабскими цифрами (по умолчанию) |
A |
Обозначение элементов списка при помощи символов латинского алфавита верхнего регистра (заглавные буквы). Нумерация идет по алфавитному порядку, начиная от A до Z |
a |
Обозначение элементов списка при помощи символов латинского алфавита нижнего регистра (маленькие буквы). Нумерация идет по алфавитному порядку, начиная от a до z |
I |
Устанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться латинские символы верхнего регистра |
i |
создает нумерацию при помощи римских цифр, которые будут состоять из символов латинского алфавита нижнего регистра |
* Параметр type с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр type с соответствующим значением разрешено указывать в теге элемента списка <li>
Пример записи: <li type="A">
Примечание:
Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента.
Давайте еще рассмотрим теги:
<dl> - служит для создания списка определений
<dd> и <dt>- являются описанием списка определений.
Опять редактируем нашу страничку spiski.html:
<html>
<head>
<title>Списки</title>
</head>
<body>Mapкированный список</body>
<ul type="square" title="Ненумерованный список">
<li>Первый пункт списка
<li>Второй пункт списка
<li>Третий пункт списка
</ul>
<br>Нумерованный список
<ol type="I" title="Нумерованный список">
<li>Первый пункт списка
<li>Второй пункт списка
<li>Третий пункт списка
</ol>
<br>Список определений
<dl title="Список определений">
<dt>HTML
<dd>Это язык гипертекстовой разметки
<dt>Браузер
<dd>Это программное обеспечение для просмотра веб-сайтов
</dl>
</html>
|
Результат
Со списками все, идем дальше.
5. Вставка изображения
Давайте вернемся к нашей страничке index.html и попробуем вставить в нее изображение. Делается это при помощи тега <img> с обязательным параметром scr (от source - источник), в котором указывается адрес картинки (место, где она находится).
Создайте в папке "Мой сайт" еще одну папку и назовите ее "picture". Теперь, сохраните в нее эту картинку:
Открываем папку "picture" и видим, что наша картинка носит имя kartinka и имеет расширение .jpg
Приступаем к редактированию index.html
<html>
<head>
<title>Первая страничка</title>
</head>
<body text="white" bgcolor="black">Добро пожаловать! :)</body>
<br><font color="red">Это моя первая страничка!</font>
<br><p align="center">Выравнивание по центру</p>
<br><center><img src="picture/kartinka.jpg" alt="Изображение"></center>
</html>
|
Результат
Тег <center> - выравнивание изображения по центру. Также, могут быть использованы теги:
<left> - выравнивание по левому краю
<right> - выравнивание по правому краю
Разберем параметры тега <img>, которые мы использовали в данном примере:
src="picture/kartinka.jpg" - здесь мы указали адрес нашего изображения, т.е. место, где находится наша картинка.
alt="Изображение"" - устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
А теперь перечислим все параметры тега <img>
• align - определяет как рисунок будет выравниваться по краю и способ обтекания текстом. Может принимать следующие значения:
bottom - выравнивание нижней границы изображения по окружающему тексту
left - выравнивает изображение по левому краю окна
right - выравнивает изображение по правому краю окна
middle - выравнивание середины изображения по базовой линии текущей строки
top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
• alt - альтернативный текст для изображения
• border
- толщина рамки вокруг изображения. Указывается в пикселях.
Пример: border="1"
• width - ширина изображения. Указывается в пикселях или процентах.
Пример: в пикселях - width="155", в процентах - width="100%"
• height - высота изображения. Указывается в пикселях или процентах.
Пример: в пикселях - height="155", в процентах - height="100%"
• hspace - горизонтальный отступ от изображения до окружающего контента. Указывается в пикселя
Пример: hspace="5"
• vspace - вертикальный отступ от изображения до окружающего контента. Указывается в пикселя
Пример: vspace="5"
• ismap - сообщает браузеру, что картинка является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
• lowsrc - путь к графическому файлу низкого разрешения для предварительного отображения
• src - путь к графическому файлу
• usemap - ссылка на тег <map>, содержащий координаты для клиентской карты-изображения
6. Ссылки
Ссылки (или гиперссылки) позволяют щелчком кнопки мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Ссылки применяются в большинстве существующих страниц. Они могут быть текстовыми и графическими. Текстовые ссылки представляют собой выделенное слово или целую фразу. Выделение ссылки производится цветом или подчеркиванием, в зависимости от настройки браузера.
В языке HTML структуры текстовых и графических ссылок подобны друг другу. Все они задаются тегом <a> с параметром href, которому соответствует закрывающий тег </a>. В ссылке сначала указывается имя файла, на который она ссылается, а затем текст или имя графического файла, содержащего изображение ссылки. Кроме простых графических ссылок, можно создать так называемую графическую карту ссылок: картинку с «горячими областями», щелчок на которых приводит к срабатыванию соответствующих ссылок.
Давайте попробуем создать на странице index.html ссылку на вторую страничку spiski.html. Для этого добавим следующий html-код (редактируем index.html):
<html>
<head>
<title>Первая страничка</title>
</head>
<body text="white" bgcolor="black">Добро пожаловать! :)</body>
<br><font color="red">Это моя первая страничка!</font>
<br><p align="center">Выравнивание по центру</p>
<br><center><img src="picture/kartinka.jpg" alt="Изображение"></center>
<br><a href="spiski.html">Ссылка</a>
</html>
|
Результат
Чтобы создать графическую ссылку, необходимо между тегами <a> и </a> вствить изображение. Приведем пример на нашей картинке. Ссылка будет выглядить следующим образом:
<a href="spiski.html"><img src="picture/kartinka.jpg" alt="Изображение"></a>
|
Рассмотрим параметр target, который может принимать следующие значения:
_blank - загружает страницу в новое окно браузера
_self - загружает страницу в текущее окно
_parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self
_top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self
* По умолчанию используется _self
|
|