Ваша первая интернет-страничка

 

Я исхожу из того, что вы в общих чертах поняли структуру HTML-документа.

Ну что же. Пришло время

создать вашу первую HTML-страничку.

На вашем жестком диске (например, диск С) создадим отдельную папку для нашего сайта. Где именно ее создавать не имеет принципиального значения, поэтому пойдем по пути наименьшего сопротивления. Кликаем дважды ярлычок "Мои документы", в меню "Файл" выбираем строку "Создать" и в выпадающем списке выбираем "Папку".

Назовем ее, к примеру, my_site. Я вам предлагаю с самого начала делать все правильно. Поэтому в этой вновь созданной папке создаем еще одну, с именем www, а в ней еще одну, с именем images. В нее мы будем помещать картинки, используемые на нашем сайте. Далее, находясь в папке www, кликаем правой кнопкой мыши (вызываем контекстное меню) и в выпавшем меню выбираем строку "Создать" >> "Текстовой документ".

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

Теперь открываем наш текстовой документ (в программе Блокнот) и пишем минимальный набор тегов. Между тегами вписываем соответствующий текст.

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>Моя первая интернет-страничка.</title>

</head>

<body>

<!-- Здесь будет текст моей первой страницы -->

<p>Я создал свою первую интернет-страничку!<br> Это было не сложно.</p>

</body>

</html>

Если вы ознакомились с основными HTML-тегами, то знаете, что тег <p> определяет параграф и позволят разбивать текст на абзацы. Тег <br> просто переносит строку.
Тег <!-- --> — комментарий, нужный только вам и не отображаемый браузером.

Отлично! Вы создали свою первую интернет-страницу при помощи языка HTML.

Теперь необходимо сохранить ваш документ под именем "index.html". Расширение ".html" говорит о том, что это HTML-документ, и что этот файл должен открываться в браузере.

В меню "Файл" выбираем строку "Сохранить как...". В появившемся окне в строке Имя файла вписываете "index.html", в строке Тип файла выбираете "Все файлы". Оставшийся текстовой документ удалите.

Теперь дважды кликаем по нашему файлу "index.html". Он должен открыться в вашем браузере по умолчанию. В моем случае это Mozilla Firefox. У вас все должно выглядеть примерно так же.

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

Теперь чтобы внести какие-нибудь изменения в вашу HTML-страницу, вы должны открыть файл "index.html" с помощью программы блокнот: кликнуть по файлу правой кнопкой мыши, в контекстном меню выбрать Открыть с помощью >> Блокнот. А если у вас браузер Opera, можно редактировать прямо в нем. Нажимайте сочетание клавиш Ctrl+U и у вас в новой вкладке откроется HTML-код текущей страницы. Редактируйте там все, что вам будет угодно. Затем просто нажмите кнопку "Применить изменения".

Теги форматирования текста

Давайте изучим еще несколько тегов и их атрибутов.

Если вы откроете файл index.html в Блокноте и вставите между тегами <body> какой-нибудь текст, то , открыв файл в браузере, увидете, что текст вставился сплошной кашей, без заголовков, без разделения на абзацы, без выделения жирным или курсивом.

Для придания тексту того или иного начертания используются теги:
<strong> — выделяет текст жирным;
<em> — выделяет текст курсивом (Emphasis);
<u> — подчеркнутый текст (Underline);
<s>— перечеркнутый текст (Strike).

Тег <p> вы уже знаете. Он разбивает текст на параграфы. Основной атрибут align — задает способ выравнивания.
Атрибут может иметь значения:
left — по левому краю;
center — по центру;
right — по правому краю;
justify — по ширине.
Значение по умолчанию: left.

Например:
(все пишем внутри тега <body>)

<p align="left"><strong>Абзац выделен жирным шрифтом и выровнен по левому краю.</strong></p>

<p align="center"><em>Абзац выделен курсивом и выровнен по центру.</em></p>

<p align="right"><u>Абзац выделен подчеркиванием и выровнен по правому краю.</u></p>

<p align="justify"><s>Абзац выделен перечеркиванием и выровнен по ширине. Не все браузеры понимают значение justify. Они выровняют абзац по умолчанию.</s></p>

Можете просто все это скопировать себе в Блокнот, но я бы посоветавал написать все руками для тренировки и лучшего запоминания. Следите чтобы атрибут и значение были написаны слитно, без пробелов. Иначе работать не будет.

Теперь сохраним документ: меню Файл >> Схранить. Или просто нажмите сочетание клавиш Ctrl+S (учите сочатания клавиш, они экономят кучу времени).

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

Абзац выделен жирным шрифтом и выровнен по левому краю.

Абзац выделен курсивом и выровнен по центру.

Абзац выделен подчеркиванием и выровнен по правому краю.

Абзац выделен перечеркиванием и выровнен по ширине.. Не все браузеры понимают значение justify. Они выровняют абзац по умолчанию.

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

Немного поупражняемся и... переходим к изучению остальных тегов форматирования текста >>

Дорогой посетитель. Сохрани для себя эту статью
и поделись ссылкой с друзьями