Учебно-методическом пособии «Создание Web

ОДИНЦОВСКИЙ МУНИЦИПАЛЬНЫЙ РАЙОН МУНИЦИПАЛЬНОЕ
БЮДЖЕТНОЕ ОБЩЕОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ
ЕРШОВСКАЯ СРЕДНЯЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ ШКОЛА
ИМЕНИ ГЕРОЯ СОВЕТСКОГО СОЮЗА
ВАСИЛИЯ ФАБРИЧНОВА
(145055, Московская область, Одинцовский район, с. Ершово, д. 6А)
Тел. 597-50-71
Ersh-@mail.ru
КОНКУРСНАЯ РАБОТА
Номинация (Информатика и ИКТ)
СОЗДАНИЕ Web-САЙТА «КОСМОС И МЫ»
(Проект)
Выполнила:
Обидина Анастасия Станиславовна, 8 «А» класс
Московская область, Одинцовский район,
г.Звенигород, ул. Радужная 17кв.72
Руководитель:
Пигалкина Ирина Анатольевна,
учитель информатики и ИКТ
Ершовской средней общеобразовательной школы
имени Героя Советского Союза Василия Фабричнова
Ершово
2015
Оглавление
Паспорт проекта ................................................................................................ 3
Введение ............................................................................................................ 5
Из истории ......................................................................................................... 7
Аппаратные и программные средства. ............................................................ 8
Организация рабочего места и соблюдение техники безопасности .............. 9
Структура HTML документа .......................................................................... 10
Разработка структуры сайта ........................................................................... 12
Дизайн .............................................................................................................. 13
Запуск сайта..................................................................................................... 14
Технология создания web-сайта ..................................................................... 14
Экономическая часть. ..................................................................................... 16
Расчет себестоимости ..................................................................................... 16
Итоги проектной работы ................................................................................ 17
Ресурсы ............................................................................................................ 18
Приложение 1 .................................................................................................. 19
2
Паспорт проекта
Название проекта
Автор проекта
Научный руководитель
Краткое описание
проекта:
Цель
Задачи
Результат проекта
(продукт)
Этапы проектной работы
Создание Web-сайта «Космос и Мы»
Обидина Анастасия Станиславовна, 8 «А» класс
Ершовской школы
учитель информатики и ИКТ Пигалкина И.А.
оказать эффективную
учебно-методическую
поддержку обучающемся по теме «язык разметки
гипертекста HTML»
 изучить язык разметки гипертекст html,
выявить все требования к дизайну и структуре
проекта;
 разработать дизайн, структуру Web-страниц,
выполнить вёрстку сайта и создание htmlстраницы;
 запуск Web-сайта «Космос и Мы»;
 разработать учебно-методическом пособии
«Создание Web-сайта на языке HTML».
 Web-сайта «Космос и Мы».
 разработать учебно-методическе пособии
«Создание Web-сайта на языке HTML».
1. Изучение учебно-методической литературы по
разметки гипертекста HTML и дизайну Webсайта (октябрь – ноябрь 2014гг.) – на данном
этапе в процессе изучения литературы
получены аналитические материалы, которые
легли в основу проекта.
2. Выбор темы сайта. Создание: логической
структуры, дизайн сайта. Создание HTML
страницы и заполнение контента сайта результатом работы стало создание Web-сайта
«Космос и Мы»
3. Составление учебно-методическего пособия
«Создание Web-сайта на языке HTML».
(январь-февраль 2014гг.) – на основе
полученных на предыдущих этапах знаний,
умений и результатов была составлена
вышеуказанное пособие.
4. Описание
проекта,
подготовка
презентационного материала (февраль-март
2014г.).
3
Научно-методическое и
Компьютер, мультимедийная презентация на
материально-техническое тему «Создание Web-сайта «Космос и Мы»»,
обеспечение проекта
раздаточный материал, учебно-методическое
пособии «Создание Web-сайта на языке HTML».
4
Введение
Актуальность: всемирная паутина Интернет разрастается не по дням, а
по часам и даже по минутам. Теперь это уже не просто виртуальная среда —
это неотъемлемая часть нашей реальной жизни. И для многих становится
крайне важно стать частичкой этой Глобальной Сети. Все чаще люди желают
улучшить свои дела в оффлайне, либо найти новую стезю для заработка
именно в Интернете, поэтому тема создания сайтов становится все более
актуальной [13].
Цель данного проекта состоит в том, чтобы изучить способы дизайна и
архитектуры создания Web-сайтов, совершенствовать свои возможности в
Web-программирование.
Задачи:

изучить язык разметки гипертекст html, выявить все требования к
дизайну и структуре проекта;
 разработать дизайн, структуру Web-страниц, выполнить вёрстку сайта
и создание html-страницы;
 запуск Web-сайта «Космос и Мы»;

разработать учебно-методическом пособии «Создание Web-сайта на
языке HTML».
Сайт (от англ. website: web — «паутина, сеть» и site — «место»,
буквально «место, сегмент, часть в сети») — система электронных
документов (файлов данных и кода) частного лица или организации в
компьютерной сети под общим адресом (доменным именем или IP-адресом)
[15].
К
примеру,
задумывается
о
каждый
уважающий
разработке
сайта
себя
бизнесмен
корпоративного
обязательно
характера,
ведь
современная компания для успешного развития и ведения бизнеса не может
обойтись без собственного «представительства» в Интернете, а также
рекламы в сети интернет. Иметь свой сайт и рекламу в интернете необходимо
5
не только для роста имиджа компании, но и для расширения границ
собственной деятельности. Интернет — "Всемирная Сеть" потому так и
называется, что она охватывает все уголки земного шара. И не исключено,
что лишь благодаря созданию сайта и рекламы компания сумеет приобрести
новых партнеров, клиентов и единомышленников, поэтому обходить эту
возможность стороной было бы по меньшей мере неразумно[14].
С другой стороны, все большее значение приобретает бизнес-онлайн, где
практически каждый может «заработать» неплохое состояние с помощью
своего Интернет-ресурса. Вы можете предлагать собственные услуги,
заняться удаленной торговлей, зарабатывать на рекламе и партнерских
программах. И это лишь несколько примеров, на самом деле возможностей
заработка в Интернете — множество, а основное условие для их реализации
— создание сайта.
Если говорить непосредственно о самом процессе разработки сайта, то это
сложный и трудоемкий процесс. Всевозможных проектов в Сети Интернет
великое множество, наверное, столько же, сколько звезд на небе. И чтобы
действительно удивить избалованных подобным изобилием пользователей,
требуется приложить немало усилий. При этом в ходе создания сайта очень
важно гармонично совместить творческую идею, потенциал веб-ресурса и
реальные нужды будущих посетителей. Поэтому разработку сайта можно
назвать своеобразным искусством, в котором нужно знать и соблюдать
допустимые грани.
Для
самостоятельного
создания
сайта
необходимо
знать
язык
программирования, обладать определенными навыками управления базами
данных, овладеть массой других технических знаний, необходимых для
успешной разработки сайта. Тогда возможно будет получить отличный вебпроект,
который
порадует
своих
гостей
множеством
функций
и
возможностей, а также будет соответствовать всем современным стандартам
сайтостроения.
Грамотно разработанный сайт — это успешный сайт!
6
Из истории
Первый в мире сайт info.cern.ch появился в 1991 году. Его создатель, Тим
Бернерс-Ли, опубликовал на нём описание новой технологии World Wide
Web, основанной на протоколе передачи данных HTTP, системе адресации
URI и языке гипертекстовой разметки HTML. Также на сайте были описаны
принципы установки и работы серверов и браузеров. Сайт стал и первым в
мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём
список ссылок на другие сайты.
Все инструменты, необходимые для работы первого сайта, Бернерс-Ли
подготовил ещё раньше — в конце 1990 года появились первый
гипертекстовый браузер WorldWideWeb с функционалом веб-редактора,
первый сервер на базе NeXTcube и первые веб-страницы.
«Отец» веба считал, что гипертекст может служить основой для сетей
обмена данными, и ему удалось претворить свою идею в жизнь. Ещё в 1980
году Тим Бернерс-Ли создал гипертекстовое программное обеспечение
Enquire, использующее для хранения данных случайные ассоциации. Затем,
работая в Европейском центре ядерных исследований в Женеве (CERN), он
предложил коллегам публиковать гипертекстовые документы, связанные
между собой гиперссылками. Бернерс-Ли продемонстрировал возможность
гипертекстового доступа к внутренним поисковику и документам, а также
новостным ресурсам Интернета. В результате, в мае 1991 года в CERN был
утверждён стандарт WWW.
Тим Бернерс-Ли является «отцом» основополагающих технологий веба —
HTTP, URI/URL и HTML, хотя их теоретические основы были заложены ещё
раньше. В 1940-х годах Ванневар Буш выдвинул идеи расширения памяти
человека
с
помощью
технических
устройств,
а
также
индексации
накопленной человечеством информации для её быстрого поиска. Теодор
Нельсон и Даг Энгельбарт предложили технологию гипертекста —
«ветвящегося» текста, предоставляющего читателю разные варианты чтения.
7
Xanadu, так и не законченная гипертекстовая система Нельсона, была
предназначена для хранения и поиска текста, в который введены взаимосвязи
и «окна». Нельсон мечтал связать перекрёстными ссылками все тексты,
созданные человечеством.
В настоящее время Тим Бернерс-Ли возглавляет основанный им
Консорциум Всемирной паутины (World Wide Web Consortium), который
занимается разработкой и внедрением стандартов Интернета[16].
Аппаратные и программные средства.
Операционная система - MS Windows 7
Блокнот
— простой текстовый редактор, являющийся
частью операционных систем Microsoft Windows, начиная с вышедшей
в 1985 году Windows 1.0.
Веб-обозрева́тель, обозрева́тель, бра́узер или бра́узэр —
прикладное программное обеспечение для просмотра веб-страниц;
содержания веб-документов, компьютерных файлов и их каталогов.
Microsoft Office Picture Manager - менеджер базового
редактирования изображений и управления изображениями в ходть в
пакет
офисный
приложений
Microsoft
Office ,
созданных
корпорацией Microsoft для операционных
систем Microsoft
Windows, Apple Mac OS X .
В соответствии с выбранными программными средствами, были
выбраны следующие аппаратные средства.
Минимальная конфигурация:
тип процессора Pentium IV и более;
объём оперативного запоминающего устройства 1 Гб и более;
жесткий диск объемом не менее 20 Gb;
наличие адаптера подключения к сети (сетевой карты, модема и
т.п.);
монитор 60 Гц, разрешение не менее 1024х768;
стандартный манипулятор «мышь»;
стандартная клавиатура;
стандартный монитор[15].
8
Организация рабочего места и соблюдение техники
безопасности
Организация рабочего места с ПК должна учитывать требования
безопасности, удобство положения, движений и действий работника.
Рабочий стол с учетом характера выполняемой работы должен иметь
достаточный размер для рационального размещения монитора (дисплея),
клавиатуры,
другого
используемого
оборудования
и
документов,
поверхность, обладающую низкой отражающей способностью.
Клавиатура располагается на поверхности стола таким образом, чтобы
пространство перед клавиатурой было достаточным для опоры рук работника
(на расстоянии не менее чем 300 мм от края, обращенного к работнику).
Чтобы обеспечивалось удобство зрительного наблюдения, быстрое и
точное считывание информации, плоскость экрана монитора располагается
ниже
уровня
глаз
работника
предпочтительно
перпендикулярно
к
нормальной линии взгляда работника (нормальная линия взгляда - 15 град.
вниз от горизонтали).
Для исключения воздействия повышенных уровней электромагнитных
излучений расстояние между экраном монитора и работником должно
составлять не менее 500 мм (оптимальное 600 - 700 мм).
Применяемые подвижные подставки для документов (пюпитры)
размещаются в одной плоскости и на одной высоте с экраном.
Рабочий стул (кресло) должен быть устойчивым, место сидения
должно регулироваться по высоте, а спинка сиденья - по высоте, углам
наклона, а также расстоянию спинки от переднего края сиденья. Регулировка
каждого параметра должна быть независимой, легко осуществляемой и иметь
надежную фиксацию.
Для тех, кому это удобно, предусматривается подставка для ног.
9
Рабочее место размещается таким образом, чтобы естественный свет
падал сбоку (желательно слева).
Для снижения яркости в поле зрения при естественном освещении
применяются регулируемые жалюзи, плотные шторы.
Светильники общего и местного освещения должны создавать
нормальные условия освещенности и соответствующий контраст между
экраном и окружающей обстановкой с учетом вида работы и требований
видимости со стороны работника. Освещенность на поверхности стола в зоне
размещения рабочего документа должна составлять 300 - 500 люкс.
Для обеспечения оптимальных параметров микроклимата проводятся
регулярное в течение рабочего дня проветривание и ежедневная влажная
уборка помещений, используются увлажнители воздуха.
При работе с ПК обеспечивается доступ работников к первичным
средствам пожаротушения, аптечкам первой медицинской помощи.
Структура HTML документа
Поскольку HTML-документы записываются в ASCII-формате, то для ее
создания может использован любой текстовый редактор. Обычно HTMLдокумент - это файл с расширением .html или .htm, в котором текст размечен
HTML-тегами (англ. tag - специальные встроенные указания).
Средствами HTML задаются синтаксис и размещение тегов, в
соответствии с которыми браузер отображает содержимое Веб-документа.
Текст самих тегов Веб-браузером не отображается.
Все теги начинаются символом '<' и заканчиваются символом '>'.
Обычно имеется пара тегов - стартовый (открывающий) и завершающий
(закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в
математике), между которыми помещается размечаемая информация:
<p>Информация</p>
Здесь стартовым тегом является тег <P>, а завершающим - </P>.
10
Завершающий тег отличатся от стартового лишь тем, что у него
перед текстом в скобках <> стоит символ '/' (слэш).
Браузер, читающий HTML-документ, отображает его в окне, используя
структуру HTML-тегов. В каждом HTML-документе должны присутствовать
три главных части:
A) Объявление HTML;
B) Заголовочная часть;
C) Тело документа.
A) Объявление HTML
<HTML> и </HTML>. Пара этих тегов сообщает программе
просмотра (браузеру) что между ними заключен документ в формате HTML,
причем первым тегом в документе должен быть тег <HTML> (в самом начале
документа), а последним - </HTML> (в самом конце документа).
<HTML>
.
.
.
</HTML>
B) Заголовочная часть.
<HEAD> и </HEAD>. Между этими тегами располагается
информация о документе (название, ключевые слова для поиска, описание и
т.д.). Однако наиболее важным является название документа, которое мы
видим в верхней строке окна браузера и в списках "Избранное (BookMark)".
Специальные программы-спайдеры поисковых систем используют название
документа для построения своих баз данных. Для того чтобы дать название
своему HTML-документу текст помещается между тегами <TITLE> и
</TITLE>.
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
11
</HTML>
C) Тело документа.
Третьей главной частью документа является его тело. Оно следует сразу
за заголовком и находится между тегами <BODY> и </BODY>. Первый из
них должен стоять сразу после тега </HEAD>, а второй -перед тегом
</HTML>. Тело HTML-документа - это место, куда автор помещает
информацию, отформатированную средствами HTML[14].
Разработка структуры сайта
Разработка структуры сайта включает все, что касается его содержимого
и информационной стратегии, определяющей, как должна быть организована
информация, чтобы пользователи сайта могли найти ее легко и быстро.
Создается ли сайт " Космос и мы" проектировалась в начале логическая
структура необходима любому веб-сайту. Ведь разработка надежной, хорошо
продуманной схемы является залогом основы для всего остального, включая
и визуальный дизайн.
Без хорошего, информативного содержания никакой сайт не станет
неотразимым. Контент и структура сайта взаимозависимы: нельзя создать
одно, не продумав другое. Разбивка и классификация страниц напрямую
определяются содержимым сайта, а способ, которым организован контент,
определяет процесс структурирования.
При разработке сайта нельзя забывать основное - сеть создана для
предоставления информации, а также быстрого и легкого ее поиска.
Независимо от конкретной задачи пользователям необходимо, чтобы они
были ясно и просто направлены к разыскиваемым данным. Хороший
информационный дизайн снабжает пользователей «дорожными знаками»,
которые
помогают
им
ориентироваться
и
не
потеряться.
Структурирование любого сайта - прямо с нуля или при редизайне включает рассмотрение трех точек зрения: контента, сайта и страницы.
12
Контент,
или
содержимое
-
это
то,
что
дает
жизнь
сайту.
Усовершенствование структуры как с точки зрения сайта (схематизация
сайта), так и с точки зрения страницы (структурирование) позволяют
информационному дизайнеру представить организованное содержимое
таким
способом,
который
Структурирование
сайта
будет
на
логически
бумаге
перед
понятен
пользователю.
началом
визуального
проектирования - очень важный этап правильной адресации к целевой
аудитории.
Эффективный
информационный
дизайн
незаметен
для
пользователя. Однако если он плохо продуман, пользователи сразу
почувствуют неудобство и даже раздражение.
Дизайн
Успешная разработка веб-сайта во многом зависит от уровня разработки
дизайн-проекта. Высокопрофессиональный дизайн-проект, разработанный с
учетом особенностей целевой аудитории, на которую рассчитано создание
веб-сайта, может превратить сайт в эффективный бизнес-инструмент.
Разработка веб-сайта подразумевает создание эффектного и успешного
интернет-ресурса, который был бы простым и удобным в использовании.
Создание веб-сайта также может считаться успешным, если любой
посетитель сайта имеет возможность легко ориентироваться на сайте.
На этапе разработки дизайна создание веб-сайта производится с учетом
замечаний и пожеланий заказчика. В результате мы получаем дизайн проект,
полностью соответствующий целям и задачам сайта и ориентированный на
потенциальных партнеров или покупателей, на которых и рассчитана
разработка веб-сайта.
13
Запуск сайта
Для того что бы поместить свой сайт в Интернете для этого достаточно
скопировать файлы, из которых он состоит, на один из серверов WWW. Все
файлы, включая файл с рисунком, мы и должны поместить на сервер WWW.
Для передачи файлов на сервер WWW существует несколько
возможностей. Можете использовать специальные программы, например,
Издатель Web (Web Publishing Wizard), Netscape Composer или интерфейс
загрузки - файловый менеджер сервера бесплатной службы, на котором
собираетесь поместить сайт. Для передачи файлов все эти варианты
используют протокол HTTP - HyperText Transfer Protocol (Протокол передачи
гипертекста), который обеспечивает возможность обмена информацией
между передающей программой и Web-сервером. Еще один вариант
передачи файлов использует доступ по протоколу FTP - File Transfer Protocol
(Протокол передачи файлов). Основное назначение этого протокола пересылать файлы в Интернете с одного компьютера на другой. Кроме того,
с помощью протокола FTP можно работать с файлами на удаленном
компьютере: копировать, перемещать, удалять, создавать каталоги. Чтобы
воспользоваться протоколом FTP, понадобится специальная программа, так
называемый
FTP-клиент.
FTP-клиентом
может
служить,
например,
программа управления файлами FAR, программа CuteFTP и другие. Следует
иметь в виду, что способ передачи файлов на сервер определяет владелец
сервера[14].
Разместить сайт можно на сервере своего провайдера, на сервере одной
из бесплатных служб либо на сайте компании.
Технология создания web-сайта
На первом
этапе продумывается
тематика
сайта
и
создаться
логическая структура сайта т.е. как должен выглядеть. Мною была выбрана
тема " Космос и мы" так как эта тема является актуальной связи с тем, что
14
космос - является самой активно развивающееся частью науки и технологии.
После чего была разработана структура сайта в которой отображаются
задачи: рассказать о планетах солнечной системы и добавили гороскопы на
2015 год.
Главная
Меркурий
Венера
Земля
Марс
Юпитер
Сатурн
Уран
Нептун
Гороскоп
На втором этапе выполняется дизайн сайта т. е. создаётся его
оформление и внешний вид. В начале выбирается рисунок (фон) который
станет основой для дальнейшей работы над сайтом. Готовые графические
элементы для сайта, фоновые рисунки и т. п. мы брали на сайте Яндекс в
разделе картинки.
На третьем этапе делают вёрстку сайта и создание html-страницы.
Вёрстка - это процесс размещения на странице различных элементов - текста,
графики и т. п. таким образом, чтобы всё это выглядело так, как задумано
было при дизайне. Этот этап является наиболее важным. Страницы на языке
html - это основа любого сайта, и для того, чтобы создать свой собственный
15
сайт, надо создать страницы для этого сайта на языке html. Мы создали его с
помощью блокнота тесть сами написать html-код.
После выполнение
трёх этапов сайт уже готов. Однако сайт ещё
нужно разместить в интернете, а для этого нужно придумать сайту имя и
найти хостинг, т. е. место для размещения сайта в интернете. Хостинги
бывают разные - платные и бесплатные. Мы разместили свой сайт на сайте
школы в раздел «Одарённые дети» http://mbou-ershovo.odinedu.ru.
Однако и выбрать хостинг для своего сайта и разместить его на хостинге
всё ещё мало. Для того, чтобы на сайт стали заходить посетители, нужно
заняться его продвижением или, как ещё говорят, раскруткой. Тема о
способах привлечения посетителей на свой сайт - очень интересная и
объёмная и я планирую ее изучить в следующей работе.
Экономическая часть.
Для создания сайта необходимо:
- электроэнергия
- Интернет трафик
Расчет себестоимости
Наименование
Цена
Расход
Стоимость
электроэнергия
4,01
20 кВт/час.
80,2р.
Интернет трафик
500
500
500р.
ИТОГО:
580,2
Стоимость создания сайта визитки в среднем начинается от 5000 рублей
исходя из затрат, зарплата рабочего составляет 4419.20 рублей
16
Итоги проектной работы
Самостоятельное создание сайта с нуля (если, конечно, вы хотите
сделать его красивым и сложным) - это довольно кропотливый процесс,
который требует знания html и css, языков веб-программирования, умения
работать с графическими редакторами и другими программами для создания
сайтов. Однако, идя этим путём, вы можете сделать сайт, непохожий ни на
один другой, который полностью будет соответствовать всем вашим
задумкам. Используя БЛОКНОТ и знания языка Html, вы можете создать
сайт очень быстро, что не потребует от вас особых затрат, однако у такого
простого и быстро сделанного сайта будет стандартный набор настроек и
функций и дизайн.
Выбирать создание сайта с помощью блокнота, как правило, стоит также
в том случае, если вам нужен сайт не имеющий сложный функционал, т. к.
написание собственного скрипта, например, интернет-магазина с нуля может
занять весьма много времени. В таких случаях обычно целесообразнее
использовать готовые решения(шаблоны).
Производство Web-сайта, самостоятельно дома на ПК может быть
прибыльным бизнесом. Безусловный плюс данной деятельности заключается
в том, что для его начала не нужны большие финансовые затраты, ведь
компьютер есть почти у каждого дома.
В проекте ярко прослеживается метапредметный характер. В проекте
существует взаимодействие знаний астрономии, информатики и ИКТ. Это
способствует расширению кругозору обучающихся, развивает интерес к
предметам и логическое мышление.
17
Ресурсы
1. Леонтьев В.П. «Web-дизайн. Руководство пользователя»
2. Крамер Р. «HTML: наглядный курс Web-дизайна»
3. Нидерст М.В. «Web-мастеринг для профессионалов. Настольный
справочник»
4. Аленова Наталья «Html для чайников» (http://postroika.ru)
5. http:// w ww.rosdiplom.ru
6. http:// www.kursach.by
7. http://www.bankreferatov.ru
8. http://www.education.kulichki.net
9. http://www.imagiware.сom
10.http://www.ireferat.ru
11.http://www.km.ru
12.http://www. stydenty.ru
13.http://www. websitegarage.com
14.http://www. festival.1september.ru
15.https://ru.wikipedia.org/wiki/
18
Приложение 1
Учебно-методическом пособии «Создание Web-сайта на
языке HTML»
Структура HTML-документа
HTML — это теговый язык разметки документов, то есть любой документ на
языке HTML представляет собой набор элементов, причем начало и конец
каждого элемента обозначается специальными пометками, называемыми
тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет.
Элементы могут быть пустыми, то есть не содержащими никакого текста и
других данных (например, тег перевода строки <br>). В этом случае обычно
не указывается закрывающий тег. Кроме того, элементы могут иметь
атрибуты, определяющие какие-либо их свойства (например, размер шрифта
для тега <font>). Атрибуты указываются в открывающем теге. Вот пример
части разметки HTML-документа:
<p>Текст между двумя тегами - открывающим и закрывающим.</p>
<a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>
А вот пример пустого элемента: <br>
Каждый HTML-документ, отвечающий спецификации HTML какой-либо
версии,
обязан
начинаться
со
строки
декларации
версии
HTML
<!DOCTYPE>, которая обычно выглядит примерно так:
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Если эта строка не указана, то добиться корректного отображения документа
в браузере становится труднее.
Далее обозначается начало и конец документа тегами <html> и </html>
соответственно. Внутри этих тегов должны находиться теги заголовка
(<head></head>) и тела (<body></body>) документа.
19
Варианты DOCTYPE для HTML 4.01
 Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или
«не одобряемые» (deprecated).
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 Переходный
(Transitional):
содержит
устаревшие
теги
в
целях
совместимости и упрощения перехода со старых версий HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 С фреймами (Frameset): аналогичен переходному, но содержит также
теги для создания наборов фреймов.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPE для HTML 5
В отличие от предыдущих версий тег всего один [1]
<!DOCTYPE html>
Основные элементы («теги»)
Теги
и
их
параметры
нечувствительны
к
регистру.
То
есть
<A
HREF="http://example.com"> и <a href="http://example.com"> означают одно и
то же.
В последних версиях HTML практически у каждого тега огромное число
необязательных параметров — обычно не меньше 15. Мы приводим только
основные параметры тегов.
Гиперссылки
<A HREF="filename" target="_self">название ссылки</A>
 Атрибут HREF задает значение адреса документа, на который
указывает ссылка.
 filename — имя файла или адрес Internet, на который необходимо
сослаться.
 название ссылки — название гипертекстовой ссылки, которое будет
20
отображаться в браузере, то есть показываться тем, кто зашел на
страницу.
 TARGET — задает значение окна или фрейма, в котором будет открыт
документ, на который указывает ссылка. Возможные значения атрибута:
 _top — открытие документа в текущем окне;
 _blank — открытие документа в новом окне;
 _self — открытие документа в текущем фрейме;
 _parent — открытие документа в родительском фрейме.
Значение по умолчанию: _self.
Текстовые блоки
 <H1> … </H1>, <H2> … </H2>, … ,<H6> … </H6> — заголовки 1,
2, … 6 уровня. Используются для выделения частей текста (заголовок
1 — самый крупный, 6 — самый мелкий).
 <P> — новый абзац. Можно в конце абзаца поставить </P>, но это не
обязательно.
 <BR> — новая строка. Этот тег не закрывается (то есть не существует
тега </BR>)
 <HR> — горизонтальная линия
 <BLOCKQUOTE> … </BLOCKQUOTE> — цитата. Обычно текст
сдвигается вправо.
 <PRE> … </PRE> — режим preview (preformatted text). В этом режиме
текст заключается в рамку и никак не форматируется (то есть теги,
кроме </PRE>, игнорируются, и переводы строки ставятся там, и только
там, где они есть в оригинальном документе).
 <DIV> … </DIV> — блок (обычно используется для применения
стилей CSS)
 <SPAN> … </SPAN> — строка (обычно используется для применения
стилей CSS)
21
Форматирование текста
 <EM> … </EM> — логическое ударение (обычно отображается
курсивным шрифтом)
 <STRONG> … </STRONG>
— усиленное логическое ударение
(обычно отображается жирным шрифтом)
 <I> … </I> — выделение текста курсивом
 <B> … </B> — выделение текста жирным шрифтом
 <U> … </U> — подчёркивание текста
 <S> … </S> (или <STRIKE> … </STRIKE> )— зачёркивание текста
 <BIG> … </BIG> — увеличение шрифта
 <SMALL> … </SMALL> — уменьшение шрифта
 <BLINK> … </BLINK> — мигающий текст. Внимание! Этот тег не
работает в браузере Internet Explorer версий 5 и ниже без применения
JavaScript
 <MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст.
 <SUB>
…
</SUB>
—
подстрочный
текст.
Например,
текст.
Например,
H<SUB>2</SUB>O создаст текст H2O.
 <SUP>
…
</SUP>
—
надстрочный
E=mc<SUP>2</SUP> создаст текст E=mc2.
 <FONT параметры> … </FONT> — задание параметров шрифта. У
этого тега есть следующие параметры:
 COLOR=color — задание цвета. Цвет может быть задан в
шестнадцатеричной
форме
шестнадцатеричные
цифры
как
#rrggbb
задают
красную
(первые
2
компоненту,
следующие 2 — зелёную, последние 2 — синюю) или названием.
 FACE=шрифт задание гарнитуры шрифта
 SIZE=размер задание размера шрифта. Размер от 1 до 7:
стандартный по умолчанию 3. Есть много способов изменить
стандартный размер.
22
 SIZE=+изменение или SIZE=-изменение — изменение размера
шрифта от стандартного. Например, +2 означает размер на 2
больше стандартного.
Так, например,
Сигналом к началу атаки являются
<U>три</U>
<FONT
SIZE="+2">больших</FONT>
<FONT
COLOR="green">зелёных</FONT> свистка.
создаст текст
Сигналом к началу атаки являются три больших зелёных свистка.
Списки
<UL>
<LI> первый элемент </LI>
<LI> второй элемент </LI>
<LI> третий элемент </LI>
</UL>
создаёт список
 первый элемент
 второй элемент
 третий элемент
Если вместо <UL> (Unordered List — ненумерованный список) поставить
<OL>
(Ordered
List —
нумерованный
список),
список
получится
нумерованным:
1. первый элемент
2. второй элемент
3. третий элемент
У этих тегов есть параметры:
type = "тип"
где тип — форма: в <UL> — символов
 square — квадрат
 circle — окружность
23
 disk — круг: по умолчанию
а в <OL> — цифр или букв
 A или а (латинскими буквами) — буквенный список: соответственно
заглавными или строчными буквами
 I или i — римские цифры: соответственно заглавными или строчными
буквами
 1 — арабские цифры: по умолчанию
пишется так:
<ol type="i">
<li> Первое </li>
<li> Второе </li>
<li> И т.д. </li>
</ol>
и создаст следующее:
i. Первое
ii. Второе
iii. И т. д.
Параметр start="начало" (только для <OL> ), определяющий начало нового
отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26
Пишется так:
<ol start="24">
<li> Двадцать четыре </li>
<li> Двадцать пять </li>
<li> И т.д. </li>
и создаст следующее:
24. Двадцать четыре
25. Двадцать пять
26. И т. д.
и, наконец для тега <LI> параметр value="следующий" — если необходимо
перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23
24
<ol>
<li> Один </li>
<li> Два </li>
<li value="22"> Двадцать два </li>
<li> Двадцать три </li>
создаст следующее:
1. Один
2. Два
22. Двадцать два
23. Двадцать три
Наконец, третьим, и последним, списком является список определений:
<DL>
<DT> Кошка </DT> <DD> мяукающее домашнее животное </DD>
<DT> Кот </DT> <DD> муж кошки </DD>
<DT> Крокодил </DT> <DD> большой африканский зверь с острыми
зубами </DD>
</DL>
создаст следующее:
Кошка
мяукающее домашнее животное
Кот
муж кошки
Крокодил
большой африканский зверь с острыми зубами
Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.
Объекты
 EMBED — вставка различных объектов: не-HTML документов и
media-файлов
 APPLET — вставка Java-апплетов
 SCRIPT — вставка скриптов.
25
Изображения
 IMG — вставка изображения. Этот тег не закрывается.
 SRC — имя или URL
 ALT — альтернативное имя (отобразится, если в браузере
запретить отображать картинки)
 TITLE — краткое описание изображения (отобразится при
наведении курсора на картинку)
 WIDTH, HEIGHT — размеры (если не совпадают с истинными
размерами
картинки,
то
изображение
«растянется»
или
«сожмется»)
 ALIGN — задает параметры обтекания текстом (top, middle,
bottom, left, right)
 VSPACE,
HSPACE —
задают
размеры
вертикального
и
горизонтального пространства вокруг изображения
Пример:
<IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)"
HEIGHT="размер (пикс, %)">
Изображение можно сделать ссылкой:
<A HREF=url ><IMG SRC=url></A>
Карта изображений
 <MAP>…</MAP> — создание карты изображений позволяющей
хранить в одном изображении несколько ссылок.
Пример:
<IMG width="500" height="200" usemap="#somemap" src="url">
<MAP name="somemap">
<AREA shape="rect" coords="6, 7, 140, 196" href="url1">
<AREA shape="circle" coords="239, 98, 92" href="url2">
<AREA shape="polygon" coords="386,16, 344,56, 350,189, 385,132, 489,190,
496,74" href="url3">
26
</MAP>
Таблицы
 TABLE — создание таблицы. Параметры тега:
 BORDER — толщина разделительных линий в таблице
 CELLSPACING — расстояние между клетками
 CELLPADDING — отступ от рамки до содержимого ячейки.
 CAPTION — заголовок таблицы (этот тег необязателен)
 TR — строка таблицы
 TH — заголовок столбца таблицы (этот тег необязателен)
 TD — ячейка таблицы
 height — высота таблицы
 width — ширина таблицы
Так, например,
<TABLE BORDER="1" CELLSPACING="0">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD>
<TD> 214 </TD>
</TR>
<TR>
<TD> 1998 </TD>
<TD> 216 </TD>
</TR>
<TR>
<TD> 1999 </TD>
<TD> 207 </TD>
</TR>
27
</TABLE>
Создаст таблицу:
Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207
У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние
в пикселях между рамкой ячейки и её содержимым. Например, если заменить
первую строку таблицы на
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">
таблица получится такой:
Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207
Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет
выравнивание. Возможные значения — center (по центру), left (по левому
краю), right (по правому краю).
Параметр ALIGN в TD или TH определяет выравнивание для содержимого
внутри данной ячейки, в TR — для содержимого всех ячеек строки,
TABLE — для самой таблицы на страничке. Для каждой ячейки берётся
выравнивание из TD или TH, если оно не задано — из TR, если и оно не
задано — по центру для TH или по левому краю для TD.
Например, если заменить первые строки таблицы на
<TABLE BORDER="1" CELLSPACING="0" ALIGN="center">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
28
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>
таблица получится такой:
Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207
Незакрытые теги TD, TR и TH приводят к некорректному отображению,
особенно при работе со вложенными таблицами.
Формы
Основная статья: форма (HTML)
Создание форм в HTML является довольно сложным делом. Здесь приводятся
только названия основных тегов.
 FORM — создание формы
 INPUT — элемент ввода (может иметь разные функции — от ввода
текста до отправки формы)
 TEXTAREA — текстовая область (многострочное поле для ввода
текста)
 SELECT — список (обычно в виде выпадающего меню)
 OPTION — пункт списка
Символы
Чтобы создать символ, необязательно искать его на клавиатуре. Можно
просто набрать тег (например, чтобы получить ¢, надо набрать следующее:
¢). Пробел —   , ударение — ́ и т. д.
Названия цветов
Основная статья: Цвета HTML
29
В HTML определены следующие цвета.
Названи Шестнадцатиричный
е
цвет
black
#000000
silver
#c0c0c0
maroon
#800000
red
#ff0000
navy
#000080
blue
#0000ff
purple
#800080
fuchsia
#ff00ff
green
#008000
lime
#00ff00
olive
#808000
yellow
#ffff00
teal
#008080
aqua
#00ffff
gray
#808080
white
#ffffff
Основные символы
Основная статья: Мнемоники в HTML
Код
Симво
л
Смысл
<
<
меньше
>
>
больше
&
&
амперсанд
30
неразрывный
 
§
пробел
(на
этом
пробеле
не
переводится строка)
§
параграф
№ №
номер
©
©
копирайт (copyright)
®
®
™
™
товарный знак (trademark)
°
°
градусы
«
«
открывающая кавычка в русском языке
»
»
закрывающая кавычка в русском языке
…
…
многоточие
зарегистрированный
тире
•
жирная точка
± ±
плюс-минус
−
минус
−
знак
(registered
trademark)
— —
•
товарный
Клавиатурные символы ' и " в русском языке кавычками не являются. Также
неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), TM, C.
Дефис, тире и минус — три разных знака.
31