Введение в HTML

БЕЛОРУССКИЙ ГОСУДАРСТВЕНННЫЙ УНИВЕРСИТЕТ

ГУМАНИТАРНЫЙ ФАКУЛЬТЕТ

Кафедра информационных технологий

И.С. Хасеневич

СОЗДАНИЕ WEB-СТРАНИЦ СРЕДСТВАМИ HTML И CSS

Учебно-методическое пособие для студентов специальности 1-19 01 01 «Дизайн»

В двух частях

Часть 1

ВВЕДЕНИЕ В HTML

МИНСК

2012

УДК 004.439:004.55:004.738.5HTML+004.774.6(075.8)

ББК 32.973.202я73-1

Х24

Рекомендовано ученым советом гуманитарного факультета

28 ноября 2011 г., протокол № 3

Р ец ен з ен ты :

заведующий кафедрой математики и информатики Минского филиала московского университета экономики, статистики и информатики, кандидат педагогических наук В. Н. Курбацкий;

доцент кафедры интерьера и оборудования факультета дизайна и декоративно-прикладного искусства Белорусской

академии искусств Р. М. Климин

Хасеневич, И. С.

Х24 Создание Web-страниц средствами HTML и CSS: учеб.метод. пособие длястудентовспец. 1-190101 «Дизайн». В 2ч. Ч. 1. Введение в HTML/И. С. Хасеневич. – Минск : БГУ, 2012. –35с.

Учебно-методическое пособие предназначено для студентов 4 курса специальности «Дизайн». Пособие позволяет обеспечить студентов знаниями в области компьютерного проектирования с учетом требований к уровню подготовки согласно образовательному стандарту Республики Беларусь для специальности 1-19 01 01 «Дизайн», подготовить студентов к профессиональной самостоятельной работе, что предполагает наличие представления об основных принципах создания Web-сайта, знания языка разметки и верстки Web-страниц средствами HTML.

УДК.004.439:004.55:004.738.5HTML+004.774.6(075.8)

ББК.32.973.202я73-1

© Хасеневич И.С.,2012 ©БГУ, 2012

ВВЕДЕНИЕ. НАЧАЛО СОЗДАНИЯ

Весь процесс создания сайта можно разбить на этапы, или попросту составить план, следуя которому будет проще создать свой сайт.

1.Четко определить, зачем нужен будущий сайт (покупка или продажа, обмен какими-то вещами, просто информационный ресурс и т.д.).

2.Четко представить, что должно размещаться на сайте.

3.Можно взять простой лист А4 и схематично или блочно

4.нарисовать будущий сайт.

5.Итогом создания сайта будет верстка сайта, или как еще

6.говорят «перевести шаблон в HTML».

ЛОГИЧЕСКАЯ И ФИЗИЧЕСКАЯ СТРУКТУРА САЙТА

Каждый ресурс Интернета, от любительской домашней странички до большого информационного портала, содержит несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими, анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.html.

Такое имя файла рекомендуется присваивать всем стартовым документам сайта, т.к. в противном случае при обращении к какомулибо разделу посредством сокращенного URL без указания названия стартовой страницы браузер отобразит не саму web-страницу, а перечень хранящихся в данной папке файлов.

Подобный набор тематических рубрик с распределенными по соответствующим разделам документами и заранее спроектированными гиперсвязями между всеми страницами ресурса и называется

логической структурой сайта.

Физическая структура, напротив, подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт.

Логическая и физическая структуры могут не совпадать, поскольку в общем случае физическая структура ресурса разрабатыва-

3

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

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

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

1.Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре. Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по длине восьми символов.

2.При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были смысловыми. Впоследствии вы легко можете забыть содержимое и назначение какой-либо webстраницы, если имена файлов будут выглядеть, например, как l.htm, 2.htm, 3.htm и т. д.

ЧТО ТАКОЕ HTML

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

4

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

HTML (Hyper Text Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Web-страницы.

Web-страницы - это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML.

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

ОСНОВНЫЕ ТЕГИ HTML - СТРАНИЦЫ

К основным тегам HTML, которые обязательно нужно использовать в каждом html-документе, относятся:

<HTML>

<HEAD></HEAD>

<BODY></BODY>

</HTML>

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

Самыми главными тегами считаются <HTML> и </HTML>, которые дают команду браузерам воспринимать текст страницы как гипертекстовый. Любая страничка должна начинаться с <HTML> и заканчиваться </HTML>.

Теги <HEAD> и </HEAD> называют заголовком html-документа, и содержит всю информацию о нем. Он не считается обязательным.

Все символы, которые содержат эти теги, не выводятся на странице, за исключением тегов <TITLE> </TITLE>, в котором располагается заголовок страницы.

Следующим по важности тегами являются <BODY> и </BODY>, между которыми располагается тело html-странички. В область данных тегов можно размещать весь ваш материал, который

5

хотели бы видеть в браузере: текст, графику, видео, меню, кнопки и т.д. Можно сказать, что это «тело» страницы.

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

тег <BODY></BODY>:

<BODY bgcolor="#666666"></BODY>

Данный атрибут делает фон страницы серым.

Вэтом случае <BODY> является тегом, а bgcolor - его атрибутом,

а"#666666" - значение атрибута. У тега может быть больше 1 атрибута. Атрибуты пишутся в открывающемся теге.

ПРАКТИЧЕСКАЯ РАБОТА 1

Перед началом работы мы создадим на нашем компьютере отдельную папку для будущей страницы. D:\My_site\

Теперь откроем блокнот - notepad (start - programs - accessories - notepad или пуск - программы - стандартные - блокнот) и скопируем туда следующий текст:

<html>

<head>

<title>Моя первая страница </title>

</head>

<body>

Здравствуйте, это моя первая страница. <br> Добро пожаловать!

</body>

</html>

Сохраним этот документ, присвоив ему имя *.html

D:\My_site\index.html

Если вы сохраняете документ, через Файл - Сохранить (File - Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:

Файл - Сохранить Как (File - Save as). Дальше вводите имя своего документа: index.html. Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл - Сохранить (File - Save).

6

Теперь откроем браузер, допустим, Internet Explorer (не закрывайте блокнот, он нам понадобиться), и откроем в браузере наш д о- кумент.

Файл - Открыть - кнопка Обзор - Наш документ (index.html)

File - Open - Browse - index.html. Если мы что-либо изменим в нашем

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

ПРАКТИЧЕСКАЯ РАБОТА 2

<html>

<head>

<title>Моя первая страница </title>

</head>

<body>

Здравствуйте, это моя первая страница.

<br>

Добро пожаловать!

</body>

</html>

Пример тэга: <br> (перенос текста на другую строку). Попробуйте вставить еще несколько тэгов <br> в нашем документе

перед	«Добро пожаловать!».		Сохраните.	Посмотрите		в	вашем
браузере, что получилось.
Итак, все, что находится между скобками					< >	-	это тэг.
Текст,	не	находящийся	между такими		скобками		< > -
весь	виден	при просмотре	в браузере.	Тэгов много, и они раз-
ные.

ПРАКТИЧЕСКАЯ РАБОТА 3

<html>

<head>

<title>Моя первая страница</title> </head>

<body>

Здравствуйте, это моя первая страница.

7

<br>

Добро пожаловать! :)

</body>

</html>

<head> </head> - голова документа. <body> </body> - тело документа.

Все тэги, расположенные между <head> </head>, это своего рода служебная информация. Например, <title>- заголовок. Откройте Internet Explorer с нашим документом и посмотрите на заголовок окна. Все тэги, расположенные между <body> </body> - непосредственное содержание документа.

<тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).

Обратите внимание:

<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1> .

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

<тэг1><тэг2><тэг3> … </тэг3></тэг1></тэг2>

ПРАКТИЧЕСКАЯ РАБОТА 4

В этой работе мы будем учиться раскрашивать. Для начала нам будет нужна палитра. Все цвета интернета:

http://www.artlebedev.ru/tools/colors/.

Сохраните палитру у себя на компьютере. Все обозначения цвета в html прописываются именно таким способом. Например, белый цвет -ffffff. Давайте окрасим слова «Добро пожаловать!» в красный.

<font color="#CC0000"> Добро пожаловать! :) </font>

Color - атрибут для тэга font, он отвечает за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам. Попробуйте вместо СС0000 подставить другие значе-

8

ния цветов для атрибута color. Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» - #.

<html>

<head>

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

</head>

<body>

Здравствуйте, это моя первая страница.

<br>

<font color="#CC0000"> Добро пожаловать! </font>

</body>

</html>

Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта. Как же еще задавать цвета в документе? Вспомним об открывающем тэге <body>: <body text="#336699">.

Весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font> </font>. Если цвет текста

не задавать, то по умолчанию он будет черным.

<html>

<head>

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

</head>

<body text="#336699">

Здравствуйте, это моя первая страница.

<br>

<font color="#CC0000"> Добро пожаловать!</font>

</body>

</html>

ПРАКТИЧЕСКАЯ РАБОТА 5

В этой работе вы узнаете, как изменять цвет фона документа. Цвет фона устанавливается в уже знакомом нам тэге <body>:

<body bgcolor="#000000">

9

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

<html>

<head>

<title>Мой первая страница. </title>

</head>

<body text="#336699" bgcolor="#000000">

Здравствуйте, это моя первая страница.

<br>

<font color="#CC0000"> Добро пожаловать!</font>

</body>

</html>

Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона (одному тэгу может быть присвоено несколько атрибутов).

<body text="#336699" bgcolor="#000000">

ПРАКТИЧЕСКАЯ РАБОТА 6

В этой работе мы поговорим о параграфах. Параграфы вводятся тэгом:<p></p>. С помощью параграфов мы можем центрировать текст:

<p align="center">текст</p>.

С помощью параграфов мы можем выровнять текст: по левому краю:

<p align="left">текст</p>.

по правому краю документа: <p align="right">текст</p>.

по обоим краям документа:

<p align="justify">текст</p>.

10