Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты



Документация - WebMoney
- HTML - основы
- Сервер - локально
- Справочник свойств CSS1

главная > документация

HTML - основы

Вы решили сделать сайт или домашнюю страничку, выбрали тему. А дальше сидите и думаете что же делать дальше. Ответ прост.

Сайт пишется на языке HTML. Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.

Теперь давайте проведем эксперимент:

1) Создадим на компьютере текстовый документ. Это можно сделать следующим образом: Нажав правой кнопкой мыши выбрать пункт меню создать, а затем выбрать пункт текстовый документ. У нас появился документ с названием Текстовый документ.txt

2) Открываем этот файл и вставляем туда следующий текст. (не переживайте что вы совершенно не понимаете что означают все эти <HTML> и пр.)

<HTML>
<HEAD>
<TITLE> У вас все вышло </TITLE>
</HEAD>
<BODY>
<p> Поздравляю у Вас все вышло. </p>
</BODY>
</HTML>
(для быстроты скопируйте правой кнопкой мыши)

3) И сохраняем изменения

4) Переименуем файл Текстовый документ.txt в Текстовый документ.html По сути мы просто сменили расширение с txt в html.

5) Открываем только что переименованный документ Текстовый документ.html. Мы видим фразу Поздравляю у Вас все вышло. Заметьте никаких <HTML> и прочих заковырок здесь не видно. Только эта фраза.

6) В меню вид выберите пункт просмотр HTML-кода. И мы опять увидим все эти заковыки.

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

Все теги заключены в кавычки < >

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

<HTML> // Этот тэг открывает документ
<HEAD>
// Голова документа (с английского head) Сюда вписывается служебная информация
<TITLE> </TITLE>
// Заголовок (см. заголовок окна в Internet Explore)
</HEAD>

<BODY>
//Тело документа (с английского body). Здесь само содержание документа
</BODY>

</HTML>
// Этот тэг закрывает документ

План схема

Как правило, существует стартовый тэг и завершающий тэг (некоторые теги могут использоваться и без завершающего тега)

Обратите внимание на теги с </тег> это закрывающий тег. Закрывающий теги начинаются со знака "/".

<html> открывающий тег
</html> закрывающий тег
<title> открывающий тег
</title> закрывающий тег
и т.д. и т.п.

Тег параграфа (абзаца)

<p></p> тег параграфа.

У тегов могут быть атрибуты и значение. Они нужны для уточнения. Допустим можно вставить просто текст, а можно уточнить точное положение (центр, левый или правый край)

Должна быть вот такая конструкция.
<тег атрибут="значение">

Применим наши знания на практике.

1)Создадим документ с расширением html (см. как это делалось ранее или используйте ранее созданный файл Текстовый документ.html)

2) Вставляем туда обязательные теги

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

3) Между <TITLE> </TITLE> вставляем заголовок Изучаем HTML

<HTML>
<HEAD>
<TITLE>Изучаем HTML </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

4) Как мы помним между тегами <BODY> и </BODY> находится само содержание документа. Сюда то мы и вставим тег параграфа. А между тегами<p> </p> напишим сам текст.

<HTML>
<HEAD>
<TITLE>Изучаем HTML </TITLE>
</HEAD>
<BODY><p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.</p>
</BODY>
</HTML>

Сохраняем и смотрим что вышло. Открыв файл мы видим текст и заголовок вверху окна в Internet Explore изучаем HTML

5) Теперь добавим атрибут. Напомню конструкцию <тег атрибут ="значение">

<HTML>
<HEAD>
<TITLE>Изучаем HTML </TITLE>
</HEAD>
<BODY><p align="right"> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.</p>
</BODY>
</HTML>

Текст выравнивается по правому краю.

6) Заменим значение right на justify

<HTML>
<HEAD>
<TITLE>Изучаем HTML </TITLE>
</HEAD>
<BODY><p align ="justify"> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.</p>
</BODY>
</HTML>

Текст выравнивается по обоим краям документа.

7) Допустим мы хотим сделать новый абзац. Просто добавляем в этом месте <p>, а в конце абзаца - закрывающий тег - </p>

<HTML>
<HEAD>
<TITLE>Изучаем HTML </TITLE>
</HEAD>
<BODY><p align ="justify"> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. </p>
<p> Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.</p>
</BODY>
</HTML>

8) Поэкспериментируете сами. Меняя параметры, заголовок и добавляя все новые параграфы.

По материалам рассылки
Строим сайт от А до Я.

дальше >>

главная > документация

Реклама