Интернет портал

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Интернет портал » Web-Дизайн » Основы HTML


Основы HTML

Сообщений 1 страница 9 из 9

1

1.Что такое HTML? Что нужно для создания Web-страницы? Что такое дескриптор? 

HTML(Hypertext Markup Language) - язык разметки текста.Web-страницу(созданную HTML) может просмотреть каждый,у кого есть компьютер и Web-браузер.Создать же Web-страничку можно в любом текстовом документе.Чтобы открыть созданную страницу,нужно всего лишь изменить расширение текстового документа на html или htm.
Пример:
my_first_page.txt  my_first_page.htm
Сама страница предславляет собой текстовый документ,который содержит HTML-коды(дескрипторы)и атрибуты.Дескрипор - это команда,с помощью которой браузер форматирует текст,вставляет изображение...
Каждый дескриптор начинается со знака < и заканчивается знаком >.Между знаками - имя дескриптора и атрибут.Для того чтобы создать конечный дескриптор,нужно поставить / перед именем дескриптора!
(Примечание:еще дескрипторы называют тэгами)
Дескрипторы бывают парными и не парными.
Пример не парного дескриптора : <br>
Пример парного дескриптора : <b></b>

2

2.Дескрипторы разделов.

<html></html> - дескрипторы,которые заключают в себя все прочие HTML-дескрипторы
<head></head> - дескрипторы,которые обозначают заголовок страницы.В этот раздел можна поместить дескрипторы,которые содержат описательную информацию страницы.Также,в этот раздел помещаются дескрипторы заголовка(<title></title>).
<body></body> - тело документа,которое содержит дескрипторы,сообщающие браузеру,что нужно отобразить на дисплэй и как всё это будет выглядеть.

Внимание!Дескрипторы <html></html>,<head></head>,<body></body> являются обязательными для Web-документа!

3

3.Пример создания простейшей Web-страницы.

Создать простейшую Web-страницу можно за три шага!
ШАГ 1. Открыть любой текстовый редактор(например,блокнот)
ШАГ 2. Ввести следующее:

<html>
<head>
<title>Пример простейшей Web-страницы</title>
</head>
<body>
Это моя первая Web-страница!
</body>
</html>

ШАГ 3. Сохранить документ с расширением htm или html (к примеру index.htm)

Всё готово!Теперь можно запустить любой браузер и открыть Вашу страницу.

4

4.Форматирование текста.

<p></p> - дескрипторы абзаца.
<b></b> - дескрипторы выделения полужирным шрифтом
<i></i> - дескрипторы выделения курсивом
<u></u> - дескрипторы выделения подчеркиванием

5

5.Шрифты

С помощью дескрипторов <font></font> Вы можете управлять внешним видом текста страницы.В дескрипторе <font> есть свои атрибуты : color, size, face.
<font color="цвет"> - определяет цвет текста.Значениями цвета могут быть имена ("red", "green", ...) или шестнадцатиричные триплеты (#FF0000, #008000, ...).
<font size="##"> - определяет размер текста.
<font face="название шрифта"> - определяет название гарнитуры шрифта (Times New Roman, Helvetica, Arial, ...).

6

6.Коментарии

С помощью коментариев можно дать объяснение определенных фрагментов документа, временно скрыть некоторые операторы документа от браузера.
Чтобы создать коментарий, нужно заключить то,что Вы хотите закоментировать, между начальным и конечным дескрипторами коментария.
<!-- - начальный дескриптор коментария
--> - конечный дескриптор коментария

7

7.Графика

С помощью дескриптора <img> можно вставлять графическое изображение в тело документа. Дескриптор содержит  лишь один атрибут src, который сообщает браузеру путь к графическому объекту. Следовательно, дескрипторы вставки изображений имеют вид <img src="путь/имя_файла">
Пример: <img src="images/photo.jpg">

Также Вы можете управлять изображением в окне браузера с помощью атрибутов alt, height, width, border.
alt предоставляет альтернативный текст для браузеров, которые не поддерживают графику(или она отключена пользователем),а также служит подсказкой.
Пример: <img src="images/photo.jpg" alt="Мое фото">
height(высота) и width(ширина) определяют размер рисунка в окне браузера.
Пример: <img src="images/photo.jpg" width="200" height="50">
border(рамка) дает ширину(в пикселях) рамки, которую браузер рисует вокруг изображения. (при значении 0 рамки нет)
Пример: <img src="images/photo.jpg" border="0">

8

8.Гиперссылки

Гипертекст - это текст между начальным и конечным дескрипторами привязки.
Чтобы создать гипертекстовую ссылку, поместите начальный и конечный дескрипторы привязки(<a></a>) вокруг текста, на котором посетитель должен щелкнуть для активизации ссылки. Установите атрибут href в дескрипторе <a> равным пути и имени файла, который должен будет извлечь браузер, когда посетитель щелкнет по ссылке.
Пример: <a href="https://work.6bb.ru">Щелкните здесь, чтобы попасть на главную страницу интернет портала</a>
Также Вы можете сделать гиперссылкой любое графическое изображение.
Пример: <a href="https://work.6bb.ru"><img src="images/photo.jpg" width="200" height="50" border="0"></a>

9

9.Упорядочные и неупорядочные списки

Чтобы создать упорядочный список, нужно поместить элементы списка между начальным и конечным дескрипторами упорядочного списка (<ol></ol>). Затем, чтобы добавить в список элементы, поместите текст каждого элемента между начальным и конечным дескрипторами элемента списка (<li></li>).
Пример:
                                          <ol>
                                                  <li>windows 98</li>
                                                  <li>windows 2000</li>
                                                  <li>windiws XP</li>
                                          </ol>
Если Вы хотите использовать вместо арабских цифр буквы или римские цифры, поместите в начальный дескриптор упорядочного списка атрибут type.
<ol type="1"> - арабские цифры (по дефолту)
<ol type="a"> - буквы нижнего регистра
<ol type="A"> - буквы верхнего регистра
<ol type="i"> - римские цифры нижнего регистра
<ol type="I"> - римские цифры верхнего регистра

Неупорядочные списки позволяют создавать группы текста, в которых порядок элементов списка не имеет значение.
(всё как в упорядочных списках, только другие дескрипторы)
Пример:
                                          <ul>
                                                  <il>windows 98</il>
                                                  <il>windows 2000</il>
                                                  <il>windiws XP</il>
                                          </ul>
<ul type="disc"> - маркирует элементы жирными черными точками (по дефолту)
<ul type="square"> - маркирует элементы черными контурными квадратами
<ul type="circle"> - маркирует элементы черными контурными точками


Вы здесь » Интернет портал » Web-Дизайн » Основы HTML