ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 02.04.2024

Просмотров: 392

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Уроки html'а. Урок # 1.

Уроки html'а. Урок # 2.

Заголовки

Набор текста

Разделители

Уроки html'а. Урок # 3.

Верхние и нижние индексы

Уроки html'а. Урок # 4.

Шрифты различного начертания

Управление цветом шрифта

Уроки html'а. Урок # 5.

Списки и таблицы

Что такое списки и таблицы

Как списки помогают организовать нам информацию

Как создать список на вашей странице

Нумерованный список

Списки определений

Списки в списках

Уроки html'а. Урок # 7.

Как построить таблицу

Объединение нескольких столбцов в одну ячейку

Включение списка в таблицу

Уроки html'а. Урок # 8.

Выравнивание текста в таблице

Цвета в таблице

Предварительное форматирование

Уроки html'а. Урок # 9.

Где вы сможете найти графику, изображения и рисунки

Создаем свое изображение

Как поместить изображение на страницу

Оптимальные размеры изображений

Миниатюра полное изображение

Алтернативный текст

Выравнивание изображений

Задание размера изображения

Пиктограммы

Линии и полосы

Фон страниц

Уроки html'а. Урок # 11.

Как браузеры работают с прозрачными изображениями

Создание прозрачных gif-изображений

Наложение изображений

Уроки html'а. Урок # 12.

Понятие гипертекстовой ссылки

Анатомия ссылки

Ссылки на любое место в www

Уроки html'а. Урок # 13.

Создание якоря и присвоение ему якоря

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

Компоновка ссылок в виде списков

Текст ссылок должен быть понятным

Уроки html'а. Урок # 14.

Изображения-карты

Как работают изображения-карты

Изображения-карты не являются новой технологией

Различия между серверными и клиентскими изображениями-картами

Разбиение изображения на фрагменты

Уроки html'а. Урок # 15.

Прямоугольники

Окружности

Многоугольники

Уроки html'а. Урок # 16.

Совершенствования веб-страницы

Развертывание веб-страницы в веб-узел

Зачем разделять веб-страницу

Правильно проектируйте свой узел

Подсчет числа посетителей домашней страницы

Набор текста

Давайте теперь набьем какой-нибудь текст в нашу страничку. Процедура набора текста в HTML-документ является самой простой. Итак, наберем:

Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:

Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)

Bjork (http://bjurk.by.ru)

Prodigy (http://prodiga.by.ru)

iPoizon.com (http://iPoizon.com)

Но запустив нашу страничку на браузере, мы увидим:

preview: index.html

Моя Домашняя Страничка

Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты: Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab) Bjork (http://bjurk.by.ru) Prodigy (http://prodiga.by.ru) iPoizon.com (http://iPoizon.com)

Все смешалось. Необходимо отформатировать текст. Существует тег <br>. Этот тег нужно вставлять в месте, где нужно делать перенос строки. Давайте теперь, после обработки посмотрим на результат:

preview: index.html

файл: index.html

Моя Домашняя Страничка

Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты: - Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab) - Bjork (http://bjurk.by.ru) - Prodigy (http://prodiga.by.ru) - iPoizon.com (http://iPoizon.com)

<HTML>   <HEAD>     <TITLE>Design LAB</TITLE>     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">   </HEAD>   <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME">     <H1>Моя Домашняя Страничка</H1>     Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:<br>     - Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)<br>     - Bjork (http://bjurk.by.ru)<br>     - Prodigy (http://prodiga.by.ru)<br>     - iPoizon.com (http://iPoizon.com)<br>   </BODY> </HTML>

Существует также тег параграфа, т.е. небольшой отступ от начала строки. Это тег <dd>. Давайте попробуем заменить в списке знаки - на <dd>:

preview: index.html

файл: index.html

Моя Домашняя Страничка

Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:

Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)

Bjork (http://bjurk.by.ru)

Prodigy (http://prodiga.by.ru)

iPoizon.com (http://iPoizon.com)

<HTML>   ...     Здравствуйте. Меня зовут Выскубов Семен. Мои любимые сайты:<br>     <dd>Desing Laboratory (http://cray.vision.krg.kz/~Sam/dlab)<br>     <dd>Bjork (http://bjurk.by.ru)<br>     <dd>Prodigy (http://prodiga.by.ru)<br>     <dd>iPoizon.com (http://iPoizon.com)<br>   ... </HTML>


Но, к сожалению, этот тег не работает в ранних версиях различных браузеров.

Разделители

Хотя простые линии очень полезны, они довольно скоро надоели создателям Web-страниц. Поэтому несколько лет назад, тег <hr> был доработан до его теперешнего, "резинового" в обращении, вида. Теперь помимо тонкой линии поперек страницы вы можете применить и другой тип линии, используя расширения тега <hr>. Давайте посмотрим что можно сделать с линиями:

Простая линия <hr>

Линия без тени <hr noshade>

Линия размером в 10px <hr size="10">

Линия шириной в 80% <hr width="80%">

Оранжевая линия <hr color="orange">

А теперь сгармонируем все параметры в одну линию <hr noshade width="80%" color="orange" size="10" >

А теперь спокойно разберем все возможные параметры линий:

 <hr noshade> - По умолчанию, линия отбрасывает трудно-видимую тень. Для того чтобы тени от линии не было, необходимо использовать такой синтаксис.

 <hr size="10"> - По умолчанию, линия имеет размер 1 пиксель. Но мы можем его менять. Для этого необходимо вписать size="ваше число", где ваше число - число пикселей.

 <hr width="80%"> - По умолчанию, линия имеет ширину равную 100%, т.е. во всю длинну окна браузера. В данном случае мы изменили этот параметр на 80%, т.е. ширина линии равна не 100, а 80 % занимаемой ширины окна.

 <hr color="orange"> - По умолчанию, линия имеет прозрачный цвет. Но из-за тени, нам кажется что линия серая. Мы можем изменить цвет линии. Чуть раньше было рассказано, и объяснено на примерах какими могут быть цвета. Синтаксис виден из примера.

Все эти параметры могут сочетаться и использоваться параллельно.


Уроки html'а. Урок # 3.

На этом уроке мы поговорим о стилевом оформлении текста. Теперь, когда вы уже знакомы с основными построениями странички, стоит освоить способы управления внешним видом текста.

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

Выравнивание текста по центру

Выравнивание текста по центру позволяют сделать тег <center> и <center>. При использовании этих тегов заголовки или текст не будут прижаты к левому краю, они равномерно заполнят область вывода текста. Чтобы выровнять текст по центру, просто вставьте теги <center> и </center> в начале и в конце нужного фрагмента:

<center><h1>Пример заголовка - размер 6</h1><center>

Вот что мы получим в результате:

Пример заголовка - размер 6

Вы можете центрировать заголовки (как на примере), текст, абзацы и веб-графику.

Полужирный шрифт

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

обычный текст сливается с <b>полужирным</b>

Вот что мы получим в результате:

обычный текст сливается с полужирным

Курсив

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

обычный текст сливается с <i>курсивным</i>


Вот что мы получим в результате:

обычный текст сливается с курсивным

Мерцание

Тег мерцания <blink> </blink> не работает в браузерах MicroSoft Internet Explorer. Вообще этот тег самый раздражающий из всех существующих тегов в HTML. Разумное использование тегов <blink> и </blink> может вполне только приукрасить вашу страничку. Итак, давайте посмотрим как нужно использовать тег

обычный текст сливается с <blink>мерцающим</blink>

Вот что мы получим в результате:

обычный текст сливается с мерцающим (НЕ MSIE!)

Подчеркивание

Существует в HTML также тег, который используется для подчеркивания какого-либо текста. Это теги <u> и </u>. Давайте посмотрим их синтаксис

обычный текст сливается с <u>подчеркнутым</u>

Вот что мы получим в результате:

обычный текст сливается с подчеркнутым

Перечеркивание

Существует в HTML также тег, который используется для перечеркивания какого-либо текста. Это теги <s> и </s>. Давайте посмотрим их синтаксис

обычный текст сливается с <s>перечеркнутым</s>

Вот что мы получим в результате:

обычный текст сливается с перечеркнутым

Размеры текста

Иногда при написании текста в веб-странице необходимо слегка выделить определенные фрагменты текста, чтобы читатель обратил на них особое внимание. HTML предлагает ряд возможностей для такого выделения, в числе которых еще два новых тега, дающих возможность изменить вид текста на экране. Это теги <big> и <small>. Они не оказывают существенного влияния на вид текста, но вызывают некоторые изменения в размере шрифта.


Шрифт текста между тегами <big> и </big> немного крупнее обычного текста. Как вы догадаетесь, действие тегов <small> и </small> прямо противоположно. Шрифт между ними становиться немного меньше.

обычный текст сливается с <big>большим</big> и <small>маленьким</small>

Вот что мы получим в результате:

обычный текст сливается с большим и маленьким

Если взять стандартный текст за 100%, то тег <big> увеличивает эту мерку до 110%, а тег <small> уменьшает до 90%.