Нижегородский файловый портал
RSS - каналы
Главное меню
Категории каталога
Мои статьи [5]
Школа покера [5]
Софт [40]
Радиолюбителям и электрикам [8]
Интернет [167]
Система [89]
Комплектующие ПК [47]
Безопасность [56]
Программирование [18]
Веб-дизайнеру [5]
Игры [6]
Полезные советы [24]
Кулинария [1]
Телефония [10]
Мобильник [17]
Планшеты [14]
Медицина [5]
Работа [4]
Домашнему мастеру [0]
Строительство и ремонт [19]
Для сада и огорода [2]
Юмор и приколы [12]
Интересное [114]
Пластики [3]
Разное [238]
Мини-чат
Правила мини-чата



Мини-чат в окне
Погода в Нижнем
Яндекс.Погода
Главная » Статьи » Веб-дизайнеру

КРАТКИЙ КУРС ЯЗЫКА HTML (базовый уровень)
    Перед Вами краткий популярный справочник по HTML - языку гипертекстовой разметки документов. Он часто используется в ВУЗах как учебник по HTML, а иногда — как самоучитель.


Цитата из Википедии:
HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») — это стандартный язык разметки документов во Всемирной паутине. Практически все веб-страницы создаются при помощи HTML.



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

    Справочник проверен временем, он долгое время гарантировал простоту и совместимость HTML-кода для разных браузеров. С появлением XHTML старый добрый HTML несколько растерял позиции, но всё ещё крепко стоит на ногах и незаменим для тех проектов, где не нужны фокусы в стиле "Веб 2.0", но нужна
максимальная совместимость с любыми, даже самыми древними или редкими браузерами. А таких проектов много, очень много. Обратите внимание - справочник базируется на HTML версии 3.2 с некоторыми наиболее распространенными элементами HTML 4.0.

    Итак, в центре внимания — создание чистого и простого «классического» HTML кода без излишеств, который нормально отображается во всех широко распространённых браузерах, даже в морально устаревших (но, увы, всё ещё установленных на огромном количестве компьютеров).

    Справочник не рассчитан лишь на начинающих. Я частенько пользуюсь им как шпаргалкой если что-нибудь подзабыл. Несмотря на то, что HTML – штука очень простая, иногда из головы напрочь вылетает какая-нибудь мелочь. Например, что у элемента HR есть жутко полезный атрибут NOSHADE.

    В языке HTML основными элементами являются ключевые слова, заключенные в треугольные скобки. Такая конструкция называется тегом. Теги могут быть одиночными или парными.
Структура документа:
<html>
<head>
<title> Заголовок окна</title>
</head>
<body>
Тело документа
</body>
</html>

Назначение тегов:
<html> ... </html> - говорит браузеру, что имеем дело именно с гипертекстовым документом
<head> ... </head> - описание заголовочной части документа
<title> ... </title> - текст между тегами пойдет в заголовок окна
<body> ... </body> - ограничивает тело документа (то, что мы видим на экране)

Некоторые теги могут иметь аттрибуты (различие в оформлении):

<body text="цвет текста" bgcolor="цвет фона" background="путь к фоновой картинке">

Цвет задается с помощью RGB-палитры: #RRGGBB
Каждые два символа задают яркость соответствующего оттненка (R - красный, G - зеленый, B - синий).
В качестве символов можно использовать цифры 16-ричной системы (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f).
Яркость может лежать в диапазоне 0 ... 255 (00 ... ff).


Некоторые цветовые комбинации:

#000000 - черный
#ff0000 - красный
#00ff00 - зеленый
#0000ff - синий
#ffff00 - желтый
#ff00ff - пурпурный
#00ffff - бирюзовый
#ffffff - белый

Также цвет можно задать словом-синонимом (black, red, green, blue, white, ...), их больше сотни. Цвет текста и цвет фона должны быть контрастными.
Рекомендую использовать RGB-палитру: так нагляднее и точнее можно подобрать любой оттенок.

Если по каким-то причинам однотонный фоновый цвет вам не подходит, можно задать фоновую картинку. Цвет фона следует установить максимально близко к основному цвету картинки.
Не стоит использовать анимацию - браузер может притормаживать!


Способы задания пути:

1. background="http://21nn.ru/fp_0008.gif" - рисунок с другого сайта
2. background="C:/users/arhiv.www/fp_0008.gif" - рисунок на вашем компьютере
3. background="pic/fp_0008.gif" - рисунок из директории pic
4. background="../fp_0008.gif" - рисунок из родительской директории
5. background="fp_0008.gif" - рисунок из той же директории

1,2 - абсолютный путь (жестко задаются, привязаны к определенному сайту или компьютеру)
3,4,5 - относительный путь (рекомендуются, хорошо переносимы на другие компьютеры)
При размещении вашего документа в интернете регистр букв имени имеет значение!


Заголовки:

<h1>Заголовок 1-го уровня (документ) </h1>
<h2>Заголовок 2-го уровня (раздел) </h2>
<h3>Заголовок 3-го уровня (подраздел) </h3>
<h4>Заголовок 4-го уровня (тема) </h4>
<h5>Заголовок 5-го уровня (пункт) </h5>
<h6>Заголовок 6-го уровня (подпункт) </h6>

Поддерживают аттрибут выравнивания align: <h1 align="...">текст</h1>

align="left" - по левому краю (по-умолчанию)
align="right" - по правому краю
align="center" - по центру


Абзац текста:

<p> Длинная, длинная строка текста. Если не умещается, происходит автоперенос... </p>
<p> А это уже другой абзац. От предыдущего отделяется отступом. </p>

Поддерживают аттрибут выравнивания align: <p align="...">текст</p>

align="left" - по левому краю (по-умолчанию)
align="right" - по правому краю
align="center" - по центру
align="justify" - по обоим краям (рекомендуется)


Теги, влияющие на разбиение текста:

<br> - принудительный переход на новую строку
<nobr>несколько слов</nobr> - запрет разрывать словосочетание (переносится целиком)
<wbr> - указывает, где все-таки допустим разрыв


Оформительные теги:

<b> фрагмент 1 </b> - жирный шрифт
<i> фрагмент 2 </i> - наклонный (курсив)
<u> фрагмент 3 </u> - подчеркнутый
<s> фрагмент 4 </s> - перечеркнутый
<strike> фрагмент 5 </strike> - перечеркнутый
<sub> фрагмент 6 </sub> - нижний индекс
<sup> фрагмент 7 </sup> - верхний индекс
<big> фрагмент 8 </big> - крупный шрифт
<small> фрагмент 9 </small> - мелкий шрифт

<font color="" size="" face=""> ... </font>
color - цвет текста (#RRGGBB или слово-синоним)
size - размер текста (1,2,3,4,5,6,7)
face - шрифт текста ("Arial","Times New Romans", ...)

Допускается комбинирование: <b><i><u>текст</u></i></b> - жирный, наклонный, подчеркнутый
<big><big>текст</big></big> - на два размера крупнее

Примечание: в настоящее время они все являются устаревшими, хотя пока поддерживаются браузерами.


Рисунки:

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

<img src="" alt="" border="" width="" height="" vspace="" hspace="" align="">

src - путь к рисунку (абсолютный или относительный)
alt - текст на случай, если рисунок не загрузился ("Комментарий")
border - ширина бортика (целое неотрицательное число пикселей)
width - ширина рисунка (целое неотрицательное число
пикселей или процент от обычного размера)
height - высота рисунка (целое неотрицательное число
пикселей или процент от обычного размера)
vspace - поля сверху и снизу (целое неотрицательное число
пикселей)
hspace - поля слева и справа (целое неотрицательное число
пикселей)

Здесь мог быть рисунок

Если рисунок встроен в текст, то строка будет располагаться:

align="top" - по верхнему краю рисунка
align="middle" - по середине
align="bottom" - по низу
align="left" - рисунок слева, текст его обтекает
align="right" - рисунок справа, текст его обтекает

Совсем не обязательно указывать все аттрибуты: <img src="item_0028.gif" alt="Свинья-копилка">

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

Популярные графические форматы:

*.bmp - хранит информацию о цвете каждой точки, одной за другой,
точно передает изображение, но крайне большой размер файла.

*.jpg - использует сжатие данных, хранит изображения послойно (в виде текстур),
хорошо подходит для фотографий, но неизбежны искажения (размытие, потери).

*.gif - использует ограниченное количество цветов в палитре (не более 256),
небольшой по размеру, точно передает оттенки, доступны эффекты:
анимация, прозрачный фон, чрезстрочность.

Остальные форматы также имеют право на существование, но используются значительно реже.


Гиперссылки:

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

<a href="..." title="..." target="...">НАЖМИ МЕНЯ</a> - типичная гиперссылка

href="путь" - путь к другому документу
title="надпись" - всплывающая подсказка
target="область" - область, в которой будет отображен документ:
"_top" - во всем окне
"_self" - в текущей части окна (по-умолчанию)
"_blank" - в новом открывающемся окне
"имя фрейма" - в указанном фрейме (рассмотрим позднее)

Все, что помещается внуть тегов <a>...</a>, является гиперссылкой. Там можно разместить не только текст, но и рисунок, и любые другие теги.


Цвет ссылок:

Цвет ссылок в документе можно задать с помощью аттрибутов тега <body>:

<body link="#RRGGBB" alink="#RRGGBB" vlink="#RRGGBB">

link - цвет ссылки
alink - цвет нажатой ссылки
vlink - цвет уже посещенной ссылки


Таблицы:

Таблицы в HTML являются одним из главных средств формирования. Воспроизведем следующий пример:

<table width="300" height="200" border="1" cellpadding="5" cellspacing="1">
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr>
<td>111111</td>
<td>222222</td>
<td>333333</td>
</tr>
<tr>
<td>444444</td>
<td>555555</td>
<td>666666</td>
</tr>
</table>

width ="..." - ширина таблицы (в пикселях или процентах)
height ="..." - высота таблицы (в пикселях или процентах)
border ="..." - толщина бортика (если указать 0 - таблица станет невидимой!)
cellpadding="..." - поля вокруг объектов в ячейках
cellspacing="..." - расстояние между ячейками

Результат будет следующим:
Заголовок 1 Заголовок 2 Заголовок 3
111111 222222 333333
444444 555555 666666


<tr> ... <tr> - обрамляет строку таблицы
<th> ... <th> - обрамляет ячейку в строке (заголовок колонки)
<td> ... <td> - обрамляет ячейку в строке (обычная ячейка)

Для каждой строки или ячейки, отдельно от всей таблицы, мы можем задать фон и выравнивание:

Заголовок 1 Заголовок 2 Заголовок 3
111111 222222 333333
444444 555555 666666


<table background="путь"> - фоновая картинка для всей таблицы
<tr bgcolor="#ccffcc"> - цвет фона во всей строке (зеленоватый)
<td align="right"> - выравнивание по горизонтали в ячейке (вправо)
<th valign="bottom"> - выравнивание по вертикали в ячейке (к низу)
<tr height="10"> - высота строки (10)
<td width="100"> - ширина колонки (100)

Склейка ячеек:


Заголовок 1,2 Заголовок 3
111111 222222 333333
444444 555555


<th colspan="2"> - склейка по горизонтали (эта ячейка заменяет собой две горизонтальные)
<td rowspan="2"> - склейка по вертикали (эта ячейка заменяет собой две вертикальные)

Фреймы:

Ранее мы работали с единственным документом, занимающим весь экран. Вообще, мы можем поделить экран на несколько частей (фреймов) и в каждой загрузить свой документ.
Это полезно использовать для статической информации, которая должна постоянно присутствовать на экране. Например, навигационная панель с кнопочками, при нажатии на которые происходит переход к
другому разделу.

В HTML существует два вида фреймов: встроенные и внешние.


Встроенные:

<iframe name="..." src="..." frameborder="..." width="..." height="..." scrolling="..."></iframe>

name="..." - имя (указывается в теге <a>)
src="..." - путь к отображаемому во фрейме документу
frameborder="..." - толщина бортика (
пикселях)
width="..." - ширина фрейма (в пикселях или процентах)
height="..." - высота фрейма (в
пикселях или процентах)
scrolling="..." - нужны ли полосы прокрутки ("yes"/"no"/"auto")



Достаточно удобный элемент языка. К сожалению, поддерживается только браузерами MS Internet Explorer версии 4.0 и выше.
Внешние:
А вот они включены в стандарт HTML и должны поддерживаться всеми современными браузерами. Правда, для их создания требуется отдельный документ, формирующий структуру страницы.
Вот его примерное содержимое:

<html>
<head>
<title>Заголовок окна</title>
</head>
<frameset>
<frame>
<frameset>
<frame>
<frame>
</frameset>
</frameset>
</html>

Он делит экран на несколько областей-окошек. В каждом из них можно загрузить свой документ.

Добавил: Админ-21NN | Просмотров: 3702 | Рейтинг: 5.0/8


Обратите Ваше внимание на другие статьи:

Уважаемые пользователи, пожалуйста, оставляйте комментарии! Нам очень важно Ваше мнение!
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.

    
Меню пользователя
Аватар гостя

Приветствуем Вас, Гость

Логин:
Пароль:
Поиск по сайту
Поиск по названию
Поиск по тегам
Горячие темы форума
Зарабатываем деньги
Детская игра Подарки...
Тест скорости подклю...
кое что о Windows
Кто ты, человек?
Новая валюта портала
Все о сексе
"Что мешает нам...
Культура
Афоризмы
Лучшие 13 анекдотов ...
как защитить свой ко...
поговорим о софте
восстановление данны...
Я ненавижу Дом-2
Волга-Телеком
Кулинария "Кокт...
Стол заказов
Жалобы
С Днем Победы!!!
Прикольные картинки
С праздником Пасхи !...
Статистика
Новых за месяц: 149
Новых за неделю: 44
Новых вчера: 6
Новых сегодня: 3
Всего: 5314
Из них:
Администраторов: 3
$$$-Модераторов: 1
Модераторов: 3
Прокураторов: 3
-----------------
далее:
Проверенных: 247
Пользователей: 2884
Новичков: 1880
Заблокированных: 100
-----------------
Из всех пользователей:
Мужчин и парней: 4153
Женщин и девушек: 1160
Именинники
Поздравляем с Днем рожденья:

luden1(38), azarqwer(36), qwer2x(69), Padonok(20), katya1988(29), olemar63(48), Ювелиp(23), Nadinochka91(26)
Режим ON-LINE
Онлайн всего: 6
Гостей: 6
Пользователей: 0

Сейчас на портале:
Наша кнопочка
Нижегородский файловый портал

HTML-код кнопки:
Реклама
Размещение рекламы

Яндекс.Метрика
Регистрация сайта в каталогах, раскрутка и оптимизация сайта, контекстная реклама Ремонт холодильников в Нижнем Новгороде

Copyright © BankRemStroy © 2009-2017