Введение в язык HTML

Размещено на http://www.Allbest.Ru/

Размещено на http://www.Allbest.Ru/

Размещено на http://www.Allbest.Ru/

Лекция

Введение в язык HTML

1. Понятие о HTML

2. Понятие о гипертексте

3. Понятие о html-файле

4. Понятие о тегах языка html

5. Структурные теги

6. Создание шаблона HTML-документа и первой Web-страницы

1. Понятие о HTML

HTML расшифровывается как HyperText Markup Language, или язык гипертекстовой разметки.

Важно понять, что HTML это не язык программирования - а язык разметки текста. Он позволяет определить внешний вид документа. Если обычные языки программирования используются для написания программ (алгоритмов), предназначенных для выполнения определенных задач, то язык разметки HTML используется для представления документа в определенном виде.

2. Понятие о гипертексте

Гипертекст (hypertext) - это особый текст, в котором есть ссылка на другую Web-страницу или документ. В данном случае приставка гипер- означает более чем или сверх, так как вы видите перед собой нечто большее, чем просто текст. В большинстве браузеров гипертекст (или гиперссылка) обычно подчеркивается и выделяется другим цветом, в отличие от остального текста. Если щелкнуть на гипертексте, то его цвет изменится. Щелчок на гиперссылке приводит к тому, что Web-браузер запрашивает документ, на который указывает ссылка, а затем загружает его в окно браузера. Таким образом, благодаря гипертексту Web-страница приобретает свойство интерактивности.

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

3. Понятие о html-файле

Для разработки html-файлов нужен всего лишь текстовый редактор. Запомните, что, хотя html-страницы и представляют собой файлы с расширением .htm или .html, на самом деле это обычные текстовые файлы формата ASCII. Для того чтобы создать html-страницу, необходимо воспользоваться командой Файл - Сохранить как и сохранить файл в текстовом формате и добавить к его имени расширение .htm или .html, в зависимости от используемой операционной системы.

Лучше всего для упорядочения html-файлов создать на жестком диске специальный каталог (или папку) для хранения Web-страниц. Это особенно важно в случае, если мы собираемся создать несколько взаимосвязанных страниц. Необходимо для начала определить структуру расположения файлов на жестком диске. Для создания простого Web-сервера, как правило, нужно иметь несколько текстовых и графических файлов и, возможно, пару файлов мультимедиа. Создавая Web-сервер, содержащий относительно небольшое количество страниц и изображений, можно сохранить все файлы в одном каталоге. Если же файлов много, следует разместить их в нескольких папках.

4. Понятие о тегах языка html

язык разметка дескриптор файл гипертекст

Как мы уже говорили, язык разметки позволяет определить внешний вид документа. Для этого в текст документа вставляются специальные коды, или дескрипторы (tags). Причем сделать это можно с помощью программы Блокнот или другого текстового процессора. И вообще, при создании Web-страниц вам придется делать многое из того, к чему вы привыкли, работая в текстовом процессоре, например, выделять текст полужирным шрифтом или преобразовывать отдельные фразы в заголовки.

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

Дескрипторы заключается в угловые скобки (<>). Например, дескриптором абзаца является <P>, а дескриптором горизонтальной линии - <НР>. Дескрипторы можно записывать как прописными, так и строчными буквами. Однако запись дескрипторов прописными буквами значительно облегчает зрительное восприятие текста.

Существует два типа дескрипторов: контейнеры и одиночные дескрипторы. Контейнер - это дескрипторная пара, состоящая из начального (или открывающего) и конечного (или закрывающего) дескрипторов. Начальный дескриптор имеет вид <TAG>, а конечный </TAG>. Контейнеры предназначены для хранения некоторой информации, например текста или других дескрипторов. Поэтому между начальным и конечным дескрипторами заключено содержимое контейнера. Например, элемент, представляющий собой заголовок первого уровня заключается между дескрипторами <H1> и </H1>:

<H1> Мой первый HTML-документ! </H1>

Пустой дескриптор отличается от контейнера тем, что не содержит никакой информации. У него есть только начальный дескриптор. Пустой дескриптор обычно выполняет самостоятельную задачу, не связанную с конкретным текстом. Например, дескриптор <HR> создает горизонтальную линию и не выполняет при этом никаких действий над текстом, в противоположность начальному и конечному дескрипторам контейнера.

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

5. Структурные теги

Познакомимся с основными дескрипторами, определяющими структуру Web-страницы.

Дескрипторы элемента HTML (<HTML> </HTML>) являются самыми внешними, т.е. заключают в себе весь остальной текст и другие дескрипторы. Начальный дескриптор, <HTML>, - это первое, что вы должны набрать. А конечный дескриптор, </HTML>, обозначает окончание документа. Большинство браузеров не воспринимает текст, находящийся за пределами этих двух дескрипторов.

У HTML-документа есть "голова" (заголовок) и "тело" (основная часть).

В любом HTML-документе элемент HEAD предшествует основной части (или телу) Web-страницы. Содержимое элемента HEAD заключено между дескрипторами <HEAD> и </HEAD>. Этот текст представляет собой общую информацию о файле и не отображается в самом документе. В дескрипторе HEAD может находиться ряд других элементов. Нас в первую очередь интересует дескриптор <TITLE>, который определяет название документа. Текст, заключенный между дескрипторами <TITLE> и </TITLE>, отображается в верхней части окна программы (строка заголовка).

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

6. Создание шаблона HTML-документа и первой Web-страницы

Откройте Блокнот и введите следующий текст:

<HTML>

<HEAD>

<TITLE>Название Web-страницы</TITLE>

</HEAD>

<BODY>Содержимое Web-страницы: тест, графика, ссылки и т.д.

</BODY>

</HTML>

Сохраните файл в своей папке под именем template.html.

Теперь создайте новый документ и загрузите в него созданный нами шаблон. Затем воспользуйтесь командой Сохранить как, чтобы присвоить имя новой странице.

Замените текст, заключенным между дескрипторами <TITLE> и </TITLE> на "Моя первая Web-страница!". Теперь замените текст между дескрипторами <BODY> и </BODY> на следующий:

<H1>Это моя первая Web-страница!</H1>

<HR>

Окончательный вариант вашего файла должен иметь следующий вид:

<HTML>

<HEAD>

<TITLE>Моя первая Web-страница!</TITLE>

</HEAD>

<BODY>

<H1>Это моя первая Web-страница!</H1>

<HR>

</BODY>

</HTML>

Сохраните файл в вашей папке присвоив ему имя first.html.

Размещено на allbest.ru