Главная / Верстка / Html / Ваша первая интернет-страничка +

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


30.06.2015 14:431116

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

Ну что же. Пришло время создать вашу первую HTML-страничку.

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

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

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

Теперь открываем наш текстовой документ в программе Блокнот (Все же я рекомендую установить редактор NotePad++, он поддерживает различные кодировки и подсвечивает код. Программа бесплатна) и пишем минимальный набор тегов. Между тегами вписываем соответствующий текст.

Например:

<!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", в строке Тип файла выбираете "Все файлы". Оставшийся текстовой документ удалите.

per_cr.gif   Теперь дважды кликаем по нашему файлу "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. Они выровняют абзац по умолчанию.

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

 


Html



Верстка / Html PRoHtml


«Ваша первая интернет-страничка +» - Похожие страницы

Памятка по интернет-маркетингу Что вам нужно знать об интернет-маркетинге: 1.Веб-статистика Количество просмотров страницы: сколько страниц в среднем, которые просматриваются каждый день; Просмотров: сколько индивидуальных визитов, с...
к любви – через Интернет К любви – через Интернет++ Случайные встрeчи и знакомства при учaстии друзей остaются в прошлом: всe больше современных мужчин и жeнщин предпочитают самостоятельно зaниматься поиском второй половинки, иcпользуя для этого всeвозможные ...
Навигация для интернет-магазина Интернет не имеет государственных границ, поэтому многие онлайн-магазины предлагают свои товары покупателям из разных стран или регионов. Многие шаблоны сайтов для электронной торговли предусматривают возмож...
Услуги создания интернет сайтов Современный мир развивается со стремительной скоростью, а успех практически каждого проекта или начинания полностью зависит от информированности целевой аудитории. Одним из самых эффективных и недорогих спос...
Покупка духов в интернет-магазине Покупка духов в интернет-магазине На рынке представлено множество различных ароматов женских духов – от сладких и фруктовых до мускусных и обольстительных. У каждого человека есть собственный уникальный запах, который исходит от тела. Именн...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям