Проект на тему:"Разработка web-страницы" (8 класс)

Министерство образования и науки РФ

МБОУ

«Лицей №6»

ПРОЕКТ

на тему:

«Разработка Web-сайтов

при помощи языка разметки HTML»

Выполнила:	Щипанова А.Е. , ученица 8 класса «Б»
Руководитель:	Попова Е.Г., учитель информатики

Рубцовск

2021

Содержание

I. Введение. 3

II. Основная часть. 8

2.1.  История возникновения языка  HTML. 8

2.2. Web-сайты.. 8

2.3. Web-страница. 10

2.4. Структура Web-страниц. 12

2.5. Форматирование текста на Web-странице. 13

2.7. Главная страница сайта. 16

2.8. Остальные страницы сайта. 17

III. Этапы реализации проекта. 17

3.1. Этап–предварительный. 17

3.2.Этап – основной. 22

3.3. Этап – заключительный. 24

IV. Заключение. 25

V. Использованные ресурсы. 26

VI. Приложение. 27

Полный список HTML-элементов. 27

I. Введение

Интернет — «Всемирная Сеть» потому так и называется, что она охватывает все уголки земного шара и все активнее входит в нашу жизнь. Возможности, представленные им, привлекают все больше и больше пользователей. Многие люди начинают обращаться к глобальной сети для обмена информацией. Сайт – упорядоченная информация, доступная по сети Интернет. Он отражает деятельность сообщества, дает людям  потенциальную сферу деятельности. В современном, информационном, обществе каждый человек, рано или поздно, обязательно задумывается о разработке собственного сайта. Иметь свой сайт необходимо для расширения границ собственной деятельности – учебной, профессиональной, научной и не исключено, что лишь благодаря созданию сайта можно приобрести новых друзей, единомышленников,  поэтому обходить возможность научиться создавать сайты стороной, было бы, по меньшей мере, неразумно.

Умение создавать Web – сайты со временем становится актуальным навыком простого пользователя. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей. Однако Web – сайт может привлечь к себе внимание лишь в том случае, если его содержание вызывает какой-то интерес и если он имеет привлекательное внешнее оформление.

Оформление Web – страниц становится своеобразным видом прикладного искусства. У него даже появилось свое название – «Web-дизайн». И если человек решил опубликоваться в Интернете, то следует разобраться – как и какими средствами создаются Web – страницы.

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

Для самостоятельного создания сайта необходимо знать язык  разметки  гипертекста(HTML), обладатьопределенныминавыкамипрограммирования,управлениябазамиданных,овладеть массой других технических знаний (работа с графикой, мультимедиа-технологии и т.д.),необходимых для успешной разработки сайта. Тогда можно получить отличный веб-проект, который порадует своих гостей множеством функций и возможностей, а также будет соответствовать всем современным стандартам сайт построения.

Создание сайта в в наше время очень актуальная тема.

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

Анкетирование

Тест с ответами: “Создание сайта”

1. HTML – это:
а) язык разметки гипертекста +
б) страница Internet Explorer
в) браузер

2. Что такое тэг:
а) гиперссылка
б) команда, заключенная в угловые скобки +
в) указатель ссылки

3. Контейнер предназначен для:
а) разделения текста на заголовки
б) форматирования шрифта любого фрагмента текста
в) разделения текста на абзацы +

4. Web-страница (документ HTML) представляет собой:
а) текстовый файл с расширением txt или doc
б) двоичный файл с расширением com или exe
в) текстовый файл с расширением htm или html +

5. Для просмотра Web-страниц в Интернете используются программы:
а) Internet Explorer или NetScape Navigator +
б) MicroSoft Word или Word Pad
в) HTMLPad или Front Page

6. Гипертекст – это:
а) текст очень большого размера
б) структурированный текст, где возможны переходы по выделенным меткам +
в) текст, в котором используется шрифт большого размера

7. Для создания Web-страниц используется эта программа:
а) Блокнот +
б) ScanDisk
в) QBasic

8. Сайт можно создать, воспользовавшись:
а) языком программирования Си
б) языком разметки гипертекста HTML +
в) электронными таблицами

9. Кто занимается проектированием структуры wеb-сайта:
а) wеb-программист
б) системный администратор
в) wеb-дизайнер +

10. Как называется услуга размещения сайта на сервере, постоянно находящемся в сети Интернет:
а) моделинг
б) адаптация
в) хостинг +

11. Как можно создать сайт:
а) сохранив документ в формате HTML +
б) с помощью электронных таблиц
в) воспользовавшись языком программирования Си

12. Недостаток бесплатного хостинга:
а) доменное имя
б) коммерческая реклама от поставщика услуги +
в) отсутствие вариантов размещения

Результаты анкетирования

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

48 чел.
8 чел.	12 вопросов
12 чел.	7 вопросов
28 чел.	3 – 4 вопроса

Цель проектной работы: Научиться создавать персональный сайт.

Реализация проекта решает следующие задачи:

¾    изучить информацию по данной теме;

¾    выбрать подходящую систему создания сайта;

¾    изучить основы языка HTML;

¾    разработать концепцию и структуру сайта;

¾    подобрать подходящий материал для наполнения сайта;

¾    результат своей работы оформить в виде действующего сайта.

Предполагается в  долгосрочном проекте сначала отработать технику создания сайтов на создании сайта «Времена года». По итогу работы создать сайт «Мой класс».

Методы исследования:

-       поисково-аналитический;

-       анкетирование.

II. Основная часть

2.1.  История возникновения языка  HTML

HTML (от англ. HyperTextMarkupLanguage — «язык гипертекстовой разметки») — стандартизированный язык разметки веб-страниц во Всемирной паутине. Код HTML интерпретируется браузерами; полученная в результате интерпретации страница отображается на экране монитора компьютера или мобильного устройства.

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

Язык гипертекстовой разметки HTML был разработан британским учёным Тимом Бернерсом-Ли в 1986-1991 годах в Женеве в Швецарии.

HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно набирался при помощи небольшого набора структурных элементов — дескрипторов. Дескрипторы также часто называют «тегами» (см. таблицу «тег» а приложении). С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Первым общедоступным описанием HTML был документ «Теги HTML», впервые упомянутый в Интернете ТимомБернерсом-Ли в конце 1991 года. В нём описываются 18 элементов, составляющих первоначальный, относительно простой дизайн HTML.

2.2. Web-сайты

Что же такое Web-сайт?

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

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

На сайтах может содержаться абсолютно любая информация. Например, о компьютерных играх, автомобилях, аквариумных рыбках, городах и странах мира и т.д. и т.п. Список можно продолжать бесконечно. Как вам например сайт "Война и мир"? Получается, что сайт это книга, но только электронная.

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

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

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

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

Есть желание создать сайт «живым». Именно на нём можно сообщить все, чтоможет оказаться полезным или интересным для моих сверстников, друзей и других учеников. В наше время нам часто бывает недостаточно общения в школе, иногда хочется пообщаться и за ее пределами.  Казалось бы при таком засилие интернета социальными сетями (Одноклассники, Вконтакте, Мой Мир, Народ.Ру, Фейсбукит.д.)это не проблема.

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

Не секрет, что элемент творчества в любой сфере деятельности повышает интерес к выполняемой работе. Веб-дизайн, как раз, заключает в себя умения и навыки создания и форматирования гипертекстовых документов, табличных моделей (применяется в создании макета веб-страниц), работу с графикой (дизайн страницы, подготовка графических материалов для размещения на сайте, обзора и обмена), использования мультимедиа технологий. Размещение контента (информационного наполнения страницы), особенно мультимедийного, подразумевает знакомство с соответствующими сервисами интернета (Mail.RuCloud, Яндекс.Диск, GoogleDrive), умение пользоваться приложениями для конвертирования форматов файлов (FormatFactory,  doPDF).

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

2.3. Web-страница

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

Основными достоинствами Web-страниц являются:     

¾   малый информационный объем;

¾   возможность просмотра в различных операционных системах.

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.

Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").

Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображённые страницы можно изменить добавлением стилей, что позволяет централизовать в определённом файле все элементы формирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.

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

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

2.4. Структура Web-страниц

HTML-код страницы помещается внутрь контейнера <HTML>. Заголовок Web-страницы заключается в контейнер <HEAD>. Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется  контейнером).

Закрывающий тэг содержит прямой слэш(/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами. Название страницы помещается в контейнер <TITLE>.Отображаемое в браузере содержание страницы помещается в контейнер

<BODY>
<HEAD>
<ТITLE>Компьютер</ТITLE>
</HEAD>
<BODY>
Компьютер и ПО
</BODY>
</HTML>

Рис. 1. Заготовка Web-страницы "Компьютер"

Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.

Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, «Компьютер»), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.

2.5. Форматирование текста на Web-странице

Пока страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов можно задать различные параметры форматирования текста.

Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1></Н1> (самый крупный) до <Н6></Н6> (самый мелкий).

Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE - размер шрифта (например, SIZE=4).

Атрибут COLOR позволяет задавать цвет шрифта (например, CОLОR="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.

Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением "#0000FF".

Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center".

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

<FONT COLOR="blue">   
<Н1 ALIGN="center">Главная страница сайта</Н1>
</FONT>

Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга <HR>.

Абзацы. Разделение текста на абзацы производится с помощью контейнера <Р></Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта "Главная страница" текст, разбитый на абзацы с различным выравниванием:

<Р ALIGN="left">(это могут быть стихи или информация о 4 сезонах года)

</Р>
<Р ALIGN= "right">

(весна, лето, осень, зима).</Р>

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

 

Рис. 2. Web-страница "Главная страница сайта" с отформатированным текстом

<FONT COLOR="blue">
<Н1 ALIGN="center">
Главная страница</Н1>
</FONT>
<HR>
<Р ALIGN="left"> «Времена года….»</Р>
<Р ALIGN ="right"> (текст поясняющего характера) ...</Р>

2.6. Форматирование дизайна на Web-странице

Для создания дизайна страницы сайта используют основные  структуры компоновки.

Существует несколько основных структур:

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

 Иерархическая –  страницы разбиты по категориям и подкатегориям. Такая структура наиболее удобна.

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

2.7. Главная страница сайта

Обычно это первая страница, на которую попадает пользователь. Поэтому она должна удовлетворять некоторым условиям:

¾   главная страница должна отражать тематику сайта;

¾   она должна быть интересной, чтобы пользователю захотелось пройтись по другим страницам сайта;

¾   желательно разместить на ней функцию поиска по сайту;

¾   пусть на ней будет раздел с постоянно обновляющейся информацией, например: новости, акции, советы дня;

¾   обязательно должен присутствовать способ обратной связи (e-mail, телефон, адрес);

¾   сделайте главную страницу отличающейся от остальных, но соответствующей общей стилистике сайта.

2.8. Остальные страницы сайта

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

¾   следите за длиной страницы, если она больше 2,5 экранов, разбейте страницу на две;

¾   разбивайте текст на абзацы, делайте отступы и поля, выделяйте текст заголовками и подзаголовками;

¾   снабжайте текст картинками и графиками, но не переусердствуйте – всё должно быть обоснованно.

Web-страницы разделяются на две логические части: заголовок и содержание.

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

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

Созданную Web-страницу необходимо сохранить в виде файла.

III. Этапы реализации проекта

3.1. Этап–предварительный

     Сбор и изучение информации по данной теме (что такое сайт, какие бывают виды сайтов…)

Сайт (от англ. website: web— «паутина, сеть» и site— «место», буквально «место, сегмент, часть в сети») — система электронных документов (файлов данных и кода) частного лица или организации в компьютерной сети под общим адресом (доменным именем или IP-адресом).

Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое — базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол HTTP.

В наше время создание сайта актуальная тема сайт используют все компании, фирмы, кинотеатры, государство. На сайт можно выкладывать: файлы, текстовые документы, приложения ит.д.

Виды сайтов:

¾   Персональные сайты или персональные страницы «Личные блоги».

¾   Сайты-визитки.

¾   Сайты-галереи.

¾   Официальные сайты компаний.

¾   Тематические сайты.

¾   Сайты-каталоги.

¾   Сайты Интернет-магазины.

¾   Новостные сайты.

¾   Корпоративные сайты.

¾   Сайты-порталы.

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

Персональные сайты или персональные страницы

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

Объем такого сайта небольшой и часто ограничивается одной страницей (отсюда и название «персональная страница»).

Дизайн сайта, чаще всего сложный, подчеркивающий индивидуальность автора.

Личные блоги

Личный блог (от англ. blog, weblog) – это web-сайт, основное содержимое которого – регулярно добавляемые записи(посты),содержащие текст, изображения, мультимедиа.

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

Блоги могут содержать несколько страниц. Их число зависит от активности автора и иногда оно может быть достаточно большим.

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

Сайты-визитки

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

Основное назначение сайта – представить своего владельца (реализуемые им идеи, предоставляемые услуги) и дать максимум сведений необходимых для контакта с ним –  адрес, телефоны,   e-mail и т.п.

Ввиду небольшого объема размещаемой на сайте информации, структура сайта - визитки всегда проста и понятна. Традиционно сайт -визитка состоит из 3 – 5-и страниц и не содержит дополнительных разделов и много уровневых меню.

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

Устройство сайта

Страницы сайтов — это набор текстовых файлов, размеченных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя (монитор, экран КПК, принтер …).  Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы.

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

Технологические особенности сайтов

По технологическим особенностям создания и отображения сайты различаются:

Статические— состоящие из статичных html (htm, dhtml) страниц, составляющих единое целое. Пользователю выдаются файлы в том виде, в котором они хранятся на сервере.

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

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

Требования к сайту

Я изучила много информации и сформулировала требования к официальному сайту.

Обязательные требования:

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

Чаще всего начинающие авторы нарушают закон об авторском праве. Все изображения и материалы, которые будут размещены на сайте, должны быть созданы самой, нельзя забывать, что у каждой картинки или материала взятого из Интернета есть автор. Если для написания, какого-то материала потребуются статьи из газет, обязательно нужно указать автора.

Очень важный момент при работе с материалами - соблюдение авторских прав. Нужно относиться  с уважением  к чужому труду.

А также, очень важное замечание, прежде чем опубликовать чью-либо фотографию заранее спросите согласие.

               Выбор технологии для создания сайта

Для создания сайтов существует множество различных технологий, основанных на применении программных продуктов различного уровня сложности. От простейших – Notepad (Блокнот–входит в состав Windows), веб-редакторов типа WYSIWYG (от англ. What You See Is What You Get  –что вижу, то и получаю) — это принцип соответствия экранного образа готовому документу, когда автор непосредственно видит на экране готовый результат и работает с ним, до мощных программных сред типа Microsoft Frontpage и т.п.

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

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

Для создания сайта класса я выбрала технологию «чистого листа», т.е. создавать сайт с нуля, используя язык гипертекстовой разметки текста HTML.  Выбор основывался исходя из следующего:

¾   недостаточно знаний и опыта в программировании;

¾   изучение серьезных программных продуктов требует значительного времени и знание языка HTML;

¾   для создания сайта на основе шаблонов требует изучение как редакторов (для правки шаблонов), так и языка HTML;

¾   в  любом случае, для выше перечисленных технологий, требуется знание языка HTML;

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

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

          Изучение основ языка HTML

Для изучения языка гипертекстовой разметки текста HTML использовалась следующий информационный ресурс:

¾    Материалы с сайта: http://u4isna5.ru/doklad/92-2012-06-05-05-48-03/692-html, основы языкаHTML;

3.2.Этап – основной.

     Разработка концепции структуры сайта

В основе работы по созданию сайта «Времена года», естественно, лежат цели и задачи, для реализации которых он создаётся. Функции сайта можно разложить на несколько уровней, от простого к сложному.

С чего же начать?  О чем писать? Где брать информацию? Сбор информации, вот самое главное. Сайт должен быть информативным и интересным.

Нужно хорошо подумать, что разместить на своем ресурсе.

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

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

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

Таблица 1. Психологическое восприятие основных цветов

Цвет	Обозначение
Красный	Мощь, энергия, любовь, страсть, агрессия, опасность
Синий	Доверие, консерватизм, защищенность, чистота, печаль, порядок
Зеленый	Природа, земля, здоровье,  обновление
Оранжевый	Веселье, счастье
Желтый	Оптимизм, надежда, философское отношение к жизни, трусость
Фиолетовый	Величие, тайна, религия
Коричневый	Надежность, комфорт, выносливость, земля
Серый /серебристый	Интеллект, футуризм, скромность, грусть, элегантность
Черный	Сила, утонченность, тайна, страх, несчастье, смерть
Белый	Чистота, непорочность, точность, невинность

     Подбор материала для наполнения сайта

Проанализировав собранную информацию, было принято решение:

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

¾   фотография природы в конкретный период;

¾   краткая информация о времени года;

¾   умение использовать элементы дизайна;

¾   умение использовать графику.

3.3. Этап – заключительный

IV. Заключение

Поставленная цель: научиться создавать сайты в виде Web-страниц, была достигнута. Результатом стала страница

C:\Users\Ася\Desktop\веб-страница\ПРОЕКТ ЩИПАНОВА\ Главная страница Времена года.htm.

Для достижения поставленной цели я решала следующие задачи:

¾   изучила готовые проекты на схожие темы;

¾   изучила основы HTML-программирования;

¾   подобрала подходящие для моего проекта материалы;

¾   результат своей работы оформила виде веб-страницы;

Входе, выполнения проекта, я научилась оценивать свою деятельность, в процессе решения исследовательской задачи, совершенствовала умения работать с компьютером (активно использовала программы Блокнот, MS Word).

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

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

V. Использованные ресурсы

          1.            Чтотакоесайтhttps://ru.wikipedia.org/wiki/%D0%A1%D0%B0%D0%B9%D1%82

          2.            Видысайтовhttp://alpha-spb.ru/helpful-information/43-types-of-sites

          3.            Устройствосайтаhttps://ru.wikipedia.org/wiki/%D0%A1%D0%B0%D0%B9%D1%82

          4.            Технологические особенности создания веб-страницhttps://ru.wikipedia.org/wiki/%D0%A1%D0%B0%D0%B9%D1%82

          5.            ОсновыязыкаHTMLhttp://u4isna5.ru/doklad/92-2012-06-05-05-48-03/692-html

          6.            Видео уроки из «Арсенала учителя информатики», с сайтаhttps://videouroki.net/video/informatika/

VI. Приложение

Все HTML-элементы делятся на пять типов:

¾      пустыеэлементы — <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <menuitem>, <meta>, <param>, <source>, <track>, <wbr>;

¾      элементы с неформатированным текстом — <script>, <style>;

¾      элементы, выводящие неформатированный текст — <textarea>, <title>;

¾      элементы из другого пространства имён — MathML и SVG;

¾      обычные элементы — все остальные элементы.

Полный список HTML-элементов

Таблица 1. HTML-элементы
Тег	Описание
<!--...-->	Используется для добавления комментариев.
<!DOCTYPE>	Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a>	Создаёт гипертекстовые ссылки.
<abbr>	Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address>	Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area>	Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article>	Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside>	Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio>	Загружает звуковой контент на веб-страницу.
<b>	Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base>	Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi>	Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo>	Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote>	Выделяет текст как цитату, применяется для описания больших цитат.
<body>	Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br>	Перенос текста на новую строку.
<button>	Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
<canvas>	Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption>	Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite>	Используется для указания источника цитирования. Отображается курсивом.
<code>	Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col>	Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup>	Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data>	Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
<datalist>	Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd>	Используется для описания термина из тега <dt>.
<del>	Помечает текст как удаленный, перечёркивая его.
<details>	Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn>	Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog>	Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div>	Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl>	Тег-контейнер, внутри которого находятся термин и его описание.
<dt>	Используется для задания термина.
<em>	Выделяет важные фрагменты текста, отображая их курсивом.
<embed>	Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset>	Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption>	Заголовок/подпись для элемента <figure>.
<figure>	Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer>	Определяет завершающую область (нижний колонтитул) документа или раздела.
<form>	Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h1-h6>	Создают заголовки шести уровней для связанных с ними разделов.
<head>	Элемент-контейнер для метаданных HTML-документа, таких как <title>, <meta>, <script>, <link>, <style>.
<header>	Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr>	Горизонтальная линия для тематического разделения параграфов.
<html>	Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i>	Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe>	Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img>	Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input>	Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins>	Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd>	Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<label>	Добавляет текстовую метку для элемента <input>.
<legend>	Заголовок элементов формы, сгруппированных с помощью элемента <fieldset>.
<li>	Элемент маркированного или нумерованного списка.
<link>	Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
<main>	Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента <main>.
<map>	Создаёт активные области на карте-изображении. Является контейнером для элементов <area>.
<mark>	Выделяет фрагменты текста, помечая их желтым фоном.
<meta>	Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter>	Индикатор измерения в заданном диапазоне.
<nav>	Раздел документа, содержащий навигационные ссылки по сайту.
<noscript>	Определяет секцию, не поддерживающую сценарий (скрипт).
<object>	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol>	Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup>	Контейнер с заголовком для группы элементов <option>.
<option>	Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output>	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p>	Параграфы в тексте.
<param>	Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture>	Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre>	Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress>	Индикатор выполнения задачи любого рода.
<q>	Определяет краткую цитату.
<ruby>	Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb>	Определяет вложенный в него текст как базовый компонент аннотации.
<rt>	Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc>	Отмечает вложенный в него текст как дополнительную аннотацию.
<rp>	Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s>	Отображает текст, не являющийся актуальным, перечеркнутым.
<samp>	Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script>	Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section>	Определяет логическую область (раздел) страницы, обычно с заголовком.
<select>	Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small>	Отображает текст шрифтом меньшего размера.
<source>	Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span>	Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong>	Расставляет акценты в тексте, выделяя полужирным.
<style>	Подключает встраиваемые таблицы стилей.
<sub>	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary>	Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup>	Задает надстрочное написание символов.
<table>	Тег для создания таблицы.
<tbody>	Определяет тело таблицы.
<td>	Создает ячейку таблицы.
<template>	Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
<textarea>	Создает большие поля для ввода текста.
<tfoot>	Определяет нижний колонтитул таблицы.
<th>	Создает заголовок ячейки таблицы.
<thead>	Определяет заголовок таблицы.
<time>	Определяет дату/время.
<title>	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr>	Создает строку таблицы.
<track>	Добавляет субтитры для элементов <audio> и <video>.
<u>	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul>	Создает маркированный список.
<var>	Выделяет переменные из программ, отображая их курсивом.
<video>	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr>	Указывает браузеру возможное место разрыва длинной строки.

Определения

Обозначение html документа	<HTML></HTML>
Определение HTML 3.2	<!DOCTYPEHTML PUBLIC "/W3C//DTD HTML 3.2//EN">
Заголовок	<HEAD></HEAD>
Имя документа	<TITLE></TITLE>
Тело (содержимое страницы)	<BODY></BODY>
URL файла	<BASE rel="nofollow ugc" target="_blank" href="URL">
Имя базового окна	<BASE TARGET=" *">
Метаинформация	<META>

Форматирование текста

Форматированый	<PRE></PRE>
Жирный текст	<B></B>
Курсив	<I></I>
Высота заголовка	<H?></H?>(от 1 до 6)
Размер шрифта	<FONT SIZE=?></FONT>(от 1 до 7)
Изменение размера шрифта	<FONT SIZE="+,-?"></FONT>
Цвет шрифта	<FONT COLOR="#цвет"></FONT>
Выбор шрифта	<FONT FACE="*"></FONT>
Базовый размер шрифта	<BASEFONT SIZE=?>(от 1 до 7)
Верхний индекс(пример 500)	<SUP></SUP>Запись 5<SUP>00</SUP>
Нижний индекс(пример H2SO4)	<SUB></SUB>
Выделение цитат курсивом	<CITE></CITE>
Наклонный текст (выделение)	<EM></EM>
Жирный текст (особо сильное выделение	<STRONG></STRONG>
Стиль печатной машинки (рекомендованный)	<KBD></KBD>
Печатная машинка(нерекомендованный)	<TT></TT>
Ширина	<PRE WIDTH=?></PRE>
Центрировать	<CENTER></CENTER>
Мигающий	<BLINK></BLINK>
Многоколоночный текст	<MULTICOL COLS=?></MULTICOL>
Пробел между колонками	<MULTICOL GUTTER=?></MULTICOL>
Ширина колонки	<MULTICOL WIDTH=?></MULTICOL>
Пустой блок	<SPACER>
Стили	<STYLE></STYLE>
Создает отступы с обеих сторон текста	<BLOCKGUOTE></BLOCKGUOTE>

Ссылки

Ссылка на другой сайт	<A rel="nofollow ugc" target="_blank" href="имя"></A>
Ссылка на другую страницу	<A rel="nofollow ugc" target="_blank" href="имя"></A>
На другое окно	<A rel="nofollow ugc" target="_blank" href="имя" TARGET=" *| |_blank|_self|_parent|_top"></A>
Определить закладку	<A NAME=" *"></A>

Графика

Вставка изображения	<IMG SRC="имя изображения">
Выравнивание по горизонтали	<imgsrc="имя" align=top|bottom|middle|left|right>
Выравнивание по вертикали	<IMG SRC="имя" ALIGN=TEXTTOP|ABSMIDDLE| BASELINE ABSBOTTOM>
Текст при наведении на картинку	<IMG SRC="имя" ALT="текст">
Локальная карта	<IMG SRC="имя" USEMAP="URL">
Определение карты	<MAP NAME=" *"></MAP>
Области карты	<AREA SHAPE="RECT"COORDS=",,," rel="nofollow ugc" target="_blank" href="URL"|NOHREF>
Размеры	<IMG SRC="имя" WIDTH=? HEIGHT=?>(в точках)
Рамка	<IMG SRC="имя" BORDER=?>(в точках)
Отступ	<IMG SRC="имя" HSPACE=? VSPACE=?>(в точках)
Замена в низком разрешении	<IMG SRC="имя" LOWSRC="URL">
Обновить	<META HTTP-EQUIV="Refresh"CONTENT="?; URL=URL">
Вставка объекта	<EMBED SRC="имя">
Размер объекта	<EMBED SRC="имя" WIDTH=? HEIGHT=?>
Указывает в каком окне открывать гиперссылку	<ATARGET="?">

Разделители

Параграф	<P></P>
Выравнивание	<P ALIGN=LEFT|CENTER|RIGHT></P>
Перевод строки	<BR>
Убрать выравнивание	<BR CLEAR=LEFT|RIGHT|ALL>
Горизонтальный разделитель	<HR>
Выравнивание	<HR ALIGN=LEFT|RIGHT|CENTER>
Толщина	<HR SIZE=?>
Ширина	<HR WIDTH=?>
Ширина в процентах	<HR WIDTH="%">(в процентах)
Сплошная линия	<HR NOSHADE> (без эффекта)
Нет разбивки	<NOBR></NOBR>
Перенос	<WBR>

Списки

Нумерованый	<OL><LI></OL><LI> перед каждым элементом)
Компактный	<OL COMPACT></OL>
Тип нумерации	<OL TYPE=A|a|I|i|1>(для всего списка)<LI TYPE=A|a|I|i|1>
Первый номер	<OL START=?>(для всего списка)<LI VALUE=?>
Неупорядоченный	<UL><LI></UL>(<LI>(перед каждым элементом)
Компактный	<UL COMPACT></UL>
Тип метки	<UL TYPE=DISC|CIRCLE|SQUARE>(для всего списка)
Список определений	<DL><DT><DD></DL>
Компактный	<DL COMPACT></DL>
Меню	<MENU><LI></MENU> (<LI> перед каждым элементом)
Компактное	<MENU COMPACT></MENU>
Каталог	<DIR><LI></DIR> (<LI> перед каждым элементом)
Компактный	<DIR COMPACT></DIR>

Фон и цвета

Фоновая картинка	<BODY BACKGROUND="URL">
Цвет фона	<BODY BGCOLOR="#цвет">(порядок: красный/ зеленый/ синий)
Цвет текста	<BODY TEXT="#цвет">
Цвет ссылки	<BODY LINK="#цвет">
Пройденная ссылка	<BODY VLINK="#цвет">
Активная ссылка	<BODY ALINK="#цвет">

Структура документа

Секция	<DIV></DIV>
Переменная	<VAR></VAR>
Адрес автора	<ADDRESS></ADDRESS>
Большой шрифт	<BIG></BIG>
Маленький шрифт	<SMALL></SMALL>

Специальные символы

Вид	Запись	Название
<	&lt;	стрелка влево;
>	&gt;	стрелка вправо;
&	&	Амперсанд
"	quot;	Кавычки
	&nbsp;	Неразрывный пробел
§	&sect;	Параграф
©	&copy;	Знак copyright
°	&deg;	Градус
±	&plusmn;	Плюс минус

Формы

Определить форму	<FORM ACTION="URL"METHOD=GET|POST></FORM>
Посылка файла	<FORM ENCTYPE="multipart/form-data"></FORM>
Поле ввода	<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT| RESET">
Имя поля	<INPUT NAME=" *">
Значение поля	<INPUT VALUE=" *">
Размер поля	<INPUT SIZE=?>(в символах)
Список вариантов	<SELECT></SELECT>
Имя списка	<SELECT NAME=" *"></SELECT>
Число вариантов	<SELECT SIZE=?></SELECT>
Множественний выбор	<SELECT MULTIPLE>( выбор больше одного)
Опция	<OPTION>(элемент который может быть выбран)
Опция по умолчанию	<OPTION SELECTED>
Ввод текста, размер	<TEXTAREA ROWS=? COLS=?></TEXTAREA>
Имя текста	<TEXTAREA NAME=" *"></TEXTAREA>
Разбивка на строки	<TEXTAREAWRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

Таблицы

Таблица	<TABLE></TABLE>
Рамка таблицы	<tableborder=?></TABLE>
Расстояние между ячейками	<TABLE CELLSPACING=?>
Дополнение ячеек	<TABLE CELLPADDING=?>
Ширина в пикселях	<TABLE WIDTH=?>
Ширина в процентах	<TABLE WIDTH="?%">
Строка таблицы	<TR></TR>
Выравнивание	<TR ALIGN=LEFT|RIGHT| CENTER| MIDDLE|BOTTOM>
Ячейка таблицы	<TD></TD>
Выравнивание	<TD ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM>
Без перевода строки	<TD NOWRAP>
Объединение ячеек по ширине	<TD COLSPAN=?>
Объединение ячеек по высоте	<TD ROWSPAN=?>
Желаемая ширина	<TD WIDTH=?>
Ширина в процентах	<TD WIDTH="%">
Цвет ячейки	<TD BGCOLOR="#******">
Заголовок таблицы	<TH></TH>
Выравнивание	<TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
Запрет перевода строки	<TH NOWRAP>
Растягивание по колонке	<TH COLSPAN=?>
Растягивание по строке	<TH ROWSPAN=?>
Ширина в пикселях	<TH WIDTH=?>
Ширина в процентах	<TH WIDTH="%">
Цвет ячейки	<TH BGCOLOR="#$$$$$$">
Заглавие таблицы	<CAPTION></CAPTION>
Выравнивание	<CAPTION ALIGN=TOP|BOTTOM>(сверху/снизу таблицы)

Фреймы

Документ с фреймами	<FRAMESET></FRAMESET>(вместо <BODY>)
Высота строк	<FRAMESET ROWS=,,,></FRAMESET>
Ширина колонок	<FRAMESET COLS=,,,></FRAMESET>
Ширина колонок	<FRAMESET COLS=?></FRAMESET>
Ширина окантовки	<FRAMESET BORDER=?>
Окантовка	<FRAMESET FRAMEBORDER="yes|no">
Цвет окантовки	<FRAMESET BORDERCOLOR="#цвет">
Определить фрейм	<FRAME> (содержание отдельного фрейма)
Документ	<FRAME SRC="URL">
Имя фрейма	<FRAME NAME="?"|_blank|_self|_parent|_top>
Ширина границы	<FRAME MARGINWIDTH=?>
Высота границы	<FRAME MARGINHEIGHT=?>
Постоянный размер	<FRAME NORESIZE>
Окантовка	<FRAME FRAMEBORDER="yes|no">
Цвет окантовки	<FRAME BORDERCOLOR="#цвет">
Запрет изменению размеров фрейма	<framenoresize>

Ифреймы

Контейнер содержащий любые элементы	<iframe></iframe>
Какой HTML документ будет показан	<iframesrc="URL">
Указывает имя ифрейма	<iframename="name">
Наружнее поле сверху и снизу от ифрейма	<iframevspase="?">
Наружнее поле сбоков от ифрейма	<iframehspase="?">
Внутренний отступ по левому и правому краям	<iframemarginwidth="#">
Внутренний отступ по верхнему и нижнему краям	<iframemarginheight="#">
Полоса прокрутки ,значение value "yes","no","auto"	<iframescrolling=VALUE>
Определяет ширину ифрейма	<iframewidth="#">
Определяет высоту ифрейма	<iframeheight="#">
Текст всплывающей подсказки	<iframetitle="?">

Краткое описание документа:

Умение создавать Web – сайты со временем становится актуальным навыком простого пользователя. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей. Однако Web – сайт может привлечь к себе внимание лишь в том случае, если его содержание вызывает какой-то интерес и если он имеет привлекательное внешнее оформление. Оформление Web – страниц становится своеобразным видом прикладного искусства. У него даже появилось свое название – «Web-дизайн». И если человек решил опубликоваться в Интернете, то следует разобраться – как и какими средствами создаются Web – страницы.