ЛитМир - Электронная Библиотека
ЛитМир: бестселлеры месяца
Няня для олигарха
Иллюзия греха. Поддельный Рай
Иди туда, где страшно. Именно там ты обретешь силу
Шкатулка Судного дня
Попутчица. Рассказы о жизни, которые согревают
Правила развития мозга вашего ребенка. Что нужно малышу от 0 до 5 лет, чтобы он вырос умным и счастливым
Заставь меня влюбиться
Дети страны хюгге. Уроки счастья и любви от лучших в мире родителей
Дети мои
Содержание  
A
A

Сохраним введенные данные в файле с расширением

html

(предположим, что наш файл будет называться

Пример.html

). Для этого выполним команду главного меню

Файл ►

Сохранить

(эта команда вызывается также нажатием комбинации клавиш

Ctrl+S

), после чего в открывшемся окне укажем путь для сохранения и имя файла.

Теперь дополним код нашего HTML-документа, добавив в него между соответствующими тегами заголовок веб-страницы и основной текст. Назовем нашу страницу

Тестовая страница

, а в качестве основного текста введем

Эта страница является тестовой

(рис. 2.4).

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_019.png

Рис. 2.4.

Добавление в код страницы заголовка и основного текста

Теперь сохраним выполненные изменения с помощью команды главного меню

Файл ►

Сохранить

или нажатием комбинации клавиш

Ctrl+S

. После этого откроем нашу страницу в окне Интернет-обозревателя. Если все сделано правильно, то она должна выглядеть так, как показано на рис. 2.5.

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_020.png

Рис. 2.5.

Тестовая страница в окне Интернет-обозревателя

Как видно на рисунке, заголовок страницы, который отображается вверху окна Интернет-обозревателя, и основной ее текст полностью соответствуют программному коду. На этом можете себя поздравить: вы только что создали простейшую веб-страницу.

Теперь доработаем нашу веб-страницу, чтобы придать ей более эргономичный вид. Вначале, используя теги

<h1>

и

</h1>

, озаглавим содержащийся на странице текст. Для этого дополним программный код так, как показано на рис. 2.6.

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_021.png

Рис. 2.6.

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

Обратите внимание – теги

<h1>

и

</h1>

и находящийся между ними текст расположены внутри тегов

<body>

и

</body>

, а также перед основным текстом.

Теперь сделаем так, чтобы слово

страница

отображалась курсивом, а слово

тестовой

– полужирным шрифтом. Для этого предназначены пары тегов соответственно

<i> </i>

и

<b> </b>

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

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_022.png

Рис. 2.7.

Добавление курсивного и полужирного начертания

Теперь изменим цвет фона страницы. Для этого применим атрибут

b

gcolor

тега

<body>

. Отметим, что этот атрибут не является обязательным: если он не используется – цвет фона по умолчанию будет белым (в чем мы уже могли убедиться). Сделаем цвет фона нашей страницы желтым, дополнив ее программный код так, как показано на рис. 2.8.

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_023.png

Рис. 2.8.

Изменение цвета фона веб-страницы

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

text

тега

<body>

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

Чтобы цвет шрифта стал голубым, код нашей веб-страницы должен выглядеть так, как показано на рис. 2.9.

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_024.png

Рис. 2.9.

Изменение цвета шрифта веб-страницы

Теперь сохраним все выполненные изменения и откроем нашу веб-страницу в окне Интернет-обозревателя. Результат выполненных действий показан на рис. 2.10.

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_025.png

Рис. 2.10.

Веб-страница после выполненных доработок

Как видно на рисунке, в соответствии с изменениями программного кода слово

страница

написано курсивом, слово

тестовой

– полужирным шрифтом, а над основным текстом появился заголовок. Кроме этого, изменился фон цвет фона страницы и цвет шрифта, которым отображается текст.

Как мы уже отмечали ранее, одним из основных элементов любой веб-страницы является гиперссылка. Именно с помощью гиперссылок пользователи Интернета имеют возможность безгранично путешествовать по Сети, переходя с сайта на сайт. Поэтому следующим элементом, который мы добавим на нашу веб-страницу, будет гиперссылка.

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

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_026.png

Рис. 2.11.

Страница, которая должна открываться по ссылке

Файл этой страницы в нашем примере будет называться

Test.html

. Здесь мы не приводим ее исходный код, поскольку имеющихся знаний уже вполне достаточно для того, чтобы создать ее без подсказок. Именно эта страница должна будет открываться после того, как мы добавим гиперссылку на страницу, с которой только что экспериментировали (см. рис. 2.10).

Для создания гиперссылок в языке программирования HTML предусмотрен парный тег

<a> </a>

, который используется совместно с атрибутом

href

. Значением данного атрибута является тот адрес, на который ведет гиперссылка.

Поместим оба наши файла (

Пример.html

и

Test.html

) в один каталог. Чтобы создать гиперссылку на страницу

Test.html

, изменим код страницы

Пример.html

так, как показано на рис. 2.12.

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_027.png

Рис. 2.12.

Создание гиперссылки

Попутно мы познакомимся с еще одним тегом HTML-языка –

<br>

. Характерной особенностью данного тега является то, что он применяется не парно, а индивидуально. Иначе говоря, здесь нет открывающего и закрывающего тега, он один. Этот тег предназначен для вставки разрыва строки (от английского слова «break»). После того тега текст будет продолжен с новой строки.

ВНИМАНИЕ

Учтите, что при вводе основного текста язык HTML не реагирует на нажатие клавиши Enter. Несмотря на то, что в текстовом редакторе текст веб-страницы после каждого нажатия Enter будет продолжен с новой строки, при просмотре этой страницы в окне Интернет-обозревателя текст будет идти в одной строке. Поэтому для осуществления перехода на новую строку используйте тег <br>.

В рассматриваемом примере мы добавили в программный код страницы новую строку, поэтому после слова

тестовой

вставлен тег

<br>

.

Что касается ссылки, то она сформирована в новой строке текста. Вот ее код:

 

<

a

href="

Test.

html">здесь</

a>

В данном коде вначале следует открывающий тег

<a>

вместе со своим атрибутом

href

, имеющим значение

Test.html

(очевидно, что значением атрибута является в имя страницы, на которую ведет ссылка). Обратите внимание: в скобки

<>

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

Далее следует слово текста, которое, собственно, и будет являться ссылкой (в нашем случае это слово

здесь

), а после него идет закрывающий тег

</a>

.

В результате выполненных изменений наша веб-страница

Пример.html

будет выглядеть так, как показано на рис. 2.13.

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - i_028.png
12
{"b":"222277","o":1}