Категории
Меню
Лучшие книги » Компьютеры и Интернет » Программы » Работа в Интернете - Дмитрий Макарский

Работа в Интернете - Дмитрий Макарский

Читать онлайн Работа в Интернете - Дмитрий Макарский

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 22 23 24 25 26 27 28 29 30 ... 33
Перейти на страницу:

Глава 8

Создание собственного веб-сайта

Основы HTML

Создание сайтов в визуальном режиме WYSIWYG

Размещение сайта в Интернете

Познакомившись с Интернетом и узнав о его возможностях, пользователи, как правило, рано или поздно задумываются: «Как же все-таки делаются те красивые веб-странички, которые выводит нам браузер, и откуда они берутся?» Многие начинают подумывать и о том, чтобы создать свой собственный сайт в Сети. Цели создания такого сайта могут быть самые разные. Кто-то хочет рассказать миру о себе, своих увлечениях, мыслях, делах. Для кого-то создание веб-сайта – способ продвижения услуг собственного бизнеса, а также привлечение новых партнеров и клиентов. Кто-то мечтает создать крупный и популярный веб-портал. Во всех перечисленных случаях создателю сайта, от простейшего до большого и сложного, не обойтись без знания основ языка HTML. С этого и начнем.

Основы HTML

Язык HTML (от англ. HyperText Markup Language) – это язык гипертекстовой разметки. Многие читатели, далекие от программирования, наверняка занервничали, увидев слово «язык» и почувствовав аналогию с языками программирования. Следует отметить, что HTML не является языком программирования, хотя положа руку на сердце нужно отметить, что есть что-то общее между языками программирования и HTML. Однако это не должно пугать читателей, считающих программирование чем-то сложным и непонятным. Ведь HTML служит не для написания программ, а лишь для разметки странички, придания определенного вида тому или иному элементу: таблице, тексту или картинке. Создание HTML-страницы – увлекательное и творческое занятие, тем более что этот процесс в настоящее время усовершенствован и автоматизирован, а автору веб-сайта достаточно порой лишь базовых знаний HTML. Рассказать подробно о языке гипертекстовой разметки в рамках одной главы невозможно, поэтому поговорим лишь об основных понятиях.

Базовые понятия

HTML-страница – это по сути текстовый файл, который можно создать с помощью обычного Блокнота. Помимо текста, который будет выводиться браузером при просмотре такой странички, этот файл содержит невидимый для программы навигации по Сети и пользователя код. Вот этот код и есть язык гипертекстовой разметки – HTML. Чтобы начать знакомство с этим языком, нужно открыть Блокнот и создать в нем текстовый файл с содержимым, приведенным в листинге 8.1.

Листинг 8.1. Пример простейшей веб-страницы

<HTML>

<HEAD>

<TITLE>Простейшая веб-страница</TITLE>

</HEAD>

<BODY>

<H1>Пример веб-страницы</H1>

<P>Это простейшая web-страничка, созданная в стандартном <I>Блокноте</I>

и отображенная в браузере <B>Microsoft Internet Explorer</B>.</P>

</BODY>

</HTML>

Созданный файл следует сохранить на диске под именем 1.htm.

Примечание

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

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

Рис. 8.1. Пример простейшей веб-страницы в окне браузера Internet Explorer

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

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

Определим значения остальных тегов, присутствующих в примере.

• <HTML> – весь HTML-код страницы заключен в этот тег (открывающий <HTML> и закрывающий </HTML>), данный тег сообщает браузеру, что обрабатываемый текст написан на языке HTML.

• <HEAD> – данный тег означает заголовок страницы, обычно в заголовке задаются разные параметры, которые не выводятся на экран в теле веб-страницы.

• <TITLE> – определяет текст, который будет выводиться в заголовке окна браузера, то есть название страницы, данный тег располагается внутри тега <HEAD>.

• После закрытия тега <HEAD> сразу же открывается тег <BODY> – в этот тег заключено тело страницы, то есть то, что пользователь будет видеть в окне браузера.

• <H1> – данный тег обозначает заголовок первого уровня, встречаются также теги <H2>, <H3> и т. д. Как видно из рисунка, заголовок отличается от остального текста.

• <P> – служит для обозначения абзаца основного текста, в такой тег заключается каждый новый абзац.

• <I> и <B> – теги для определения начертания шрифтов, означают соответственно курсив и полужирный шрифт.

Как видите, ничего сложного нет. Главное – уяснить, что существуют обязательные теги, которые встречаются на всех веб-страницах, а также то, что теги, как правило, парные, то есть присутствуют открывающий и закрывающий теги. Впрочем, существуют и непарные, то есть такие, где открывающий тег присутствует, а закрывающего нет. Среди таких тегов следует назвать тег <BR>, означающий перенос строки без начала нового абзаца, а также тег <HR>, который вставляет горизонтальную линию на страницу.

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

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

Работа со шрифтами

Рассмотрим подробнее, как можно видоизменять отображение шрифта с помощью не только тегов <B> и <I>, но и других.

Для определения параметров шрифта, которым будет выводиться текст, служит парный тег <FONT>. Этот тег имеет дополнительные параметры, с помощью которых можно управлять внешним видом шрифта. Один из таких параметров – SIZE – задает размер шрифта. Создадим еще один файл – 2.htm и впишем в него содержимое листинга 8.2.

Листинг 8.2. Демонстрация шрифтов разных размеров

<HTML>

<HEAD>

<TITLE>Шрифты разных размеров</TITLE>

</HEAD>

<BODY>

<FONT SIZE="1">текст размера 1</FONT><BR>

<FONT SIZE="2">текст размера 2</FONT><BR>

<FONT SIZE="3">текст размера 3</FONT><BR>

<FONT SIZE="4">текст размера 4</FONT><BR>

<FONT SIZE="5">текст размера 5</FONT><BR>

<FONT SIZE="6">текст размера 6</FONT><BR>

<FONT SIZE="7">текст размера 7</FONT><BR>

</BODY>

</HTML>

В результате обработки этого HTML-кода браузером получим шрифты размером от 1 до 7, показанные на рис. 8.2. Из приведенного примера также становится ясно, каким образом задаются параметры тега: после его названия пишется параметр, а затем знак =, после которого в кавычках указывается значение этого параметра.

Рис. 8.2. Пример работы параметра SIZE тега FONT

Если нужно задать несколько параметров, то они отделяются друг от друга пробелом. Если первую строку после тега <BODY> привести к виду <FONT SIZE="1" FACE="COMIC SANS MS">текст размера 1</FONT> и то же самое сделать с остальными строками вплоть до шрифта с размером 7, то получится страница другого вида (рис. 8.3).

Рис. 8.3. Пример одновременного использования двух параметров – FACE и SIZE тега FONT

1 ... 22 23 24 25 26 27 28 29 30 ... 33
Перейти на страницу:
Пожаловаться на ошибку
Похожие материалы
Ubuntu 10. Краткое руководство пользователя - Д. Колисниченко Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Ubuntu 10. Краткое руководство пользователя - Д. Колисниченко
27.12.2023 - 19:38
Видео на вашем компьютере: ТВ тюнеры, захват кадра, видеомонтаж, DVD - Оксана Буковецкая Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Видео на вашем компьютере: ТВ тюнеры, захват кадра, видеомонтаж, DVD - Оксана Буковецкая
27.12.2023 - 21:20
Комментарии

Copyright @ bibliotekaonline.com 2024 - 2025. Все права защищены.


Почта для связи: [email protected]