Современные методы создания веб-сайтов
методическая разработка по информатике и икт (9 класс) по теме

Кузнецова Валентина Сергеевна

Как создать свой сайт? В данной работе я  расскажу о существовании  самого  распространённого и часто применяемого сервера для создания и хранения сайтов -  Ucoz. и  о прекрасном языке HTML.

Скачать:

ВложениеРазмер
Microsoft Office document icon Создание веб-сайта155 КБ

Предварительный просмотр:




Кузнецова Валентина Сергеевна, учитель информатики и ИКТ



МБОУ Тюменцевской  средней общеобразовательной школы



Тюменцевского района Алтайского края

























 Современные методы создания веб-сайтов





(творческая работа)









                

































с. Тюменцево, 2013













 

Введение.

Не секрет, что Интернет в наши дни стал одним из важнейших средств массовой информации и связи людей по всей Земле. Все знают, что Интернет- это всемирная паутина, что WWW – (World Wide Web) именно так и переводится с английского - «Всемирная паутина». Основой этой всемирной паутины являются сайты и веб-страницы HTML.

Первый веб-сайт был создан Тимом Бернерсом-Ли, запущен 6 августа 1991-го года и располагался он по адресу: http://info.cern.ch/ 

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

Так он ввел в оборот новое понятие "World Wide Web", которое можно было объяснить как "глобальная поисковая система, направленная на открытый доступ к большому количеству всемирных документов". Тим Бернерс-Ли стал основателем всех веб-технологий. Сейчас он возглавляет основанный им Консорциум Всемирной паутины.

Раньше понятие «развлечение» никак не вязалось с сетью. Сайты создавались учеными и академиками, пока Дэвид Бонет и Джон Резнер не запустили GeoCities, где каждый мог создать свой собственный сайт, к тому же - бесплатно.

GeoCities позволили каждому попробовать создать свой сайт, но с появлением Blogger в 1999 году, это стало еще проще. Теперь любой мог вести свой онлайн-дневник и писать в нем все, что угодно.

Вскоре появились и баннеры. В 1994 году Интернет-журнал HotWired впервые запустил баннерные рекламы.

Разработанный выпускниками Стэнфордского университета Джерри Янгом и Дэвидом Фило в январе 1994, сайт Yahoo! представлял собой директорию различных сайтов.

«Рамблер» — первая поисковая система русскоязычного сегмента сети Интернет, созданная в 1996 году разработчиками из подмосковного Пущино. Со временем, добавив поисковые, почтовые и другие сервисы, из локальной городской сети «Рамблер» стал одним из лидеров по предоставлению медиа- и интернет-услуг русскоязычной аудитории Интернета во всем мире.

Появление Flash ознаменовало начало новой эры веб-дизайна. Благодаря Gabocorp, сайты перестали быть статичными.

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

Classmates.com- это первый сайт поиска одноклассников, друзей и коллег, запущенный в 1995 году.

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

Hotmail- Первая электронная почта для всех и каждого, доступная в любой точке земного шара.

В наши дни уже ни то что бы каждая фирма, но и каждый человек уже имеет в Интернете свой сайт, или хотя-бы страничку. А вот как же создавать свои сайты? Многие этого не знают, и пользуются онлайн созданием сайта. Так создают сайты на Юкозе, Народе, и на многих других серверах. Это, безусловно, хорошо и удобно, но для создания действительно качественного сайта необходимо знать теги HTML и знать этот язык хотя-бы частично. В данной работе я попытаюсь на понятном языке изложить и рассказать об основных тегах и об этом прекрасном языке HTML.

Описание самого простого метода создания сайтов- онлайн.

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

Существует множество серверов для создания и хранения сайтов. Самый распространённый и часто применяемый, безусловно, Ucoz.

http://www.ucoz.ru/

     На Юкозе создаются как большие по объёму и значимости сайты, так и простые. Они достаточно удобны в использовании как для Администраторов и Модераторов, так и для Пользователей и Гостей.

 Создание сайта очень простое, и происходит поэтапно:

Сначала надо заполнить необходимые поля для регистрации:

  1. Затем надо щёлкнуть на кнопку «Регистрация», и браузер автоматически перейдёт на новую страницу. Потом проверить электронную почту, адрес, который был введён в поле заполнения. И затем, для подтверждения электронного адрес, пройти по ссылке, указанной в письме.

  1. Далее выйдет окно управления паролями Администратора.

Здесь нужно выбрать пароль Администратора. Причём этот пароль не должен совпадать с паролем uNet’а.

  1. Выбрав и сохранив пароли, становится возможным зайти в панель управления Администратора.

Панель управления очень похожа на панель и рабочий стол «Windows-Vista».

  1. Выбрать «Создать сайт», причём есть такая странная особенность, что на значок «Создать сайт» необходимо выбирать двойным щелчком, что для сайтов является довольно странно. Возможно, Юкоз решили передразнить «Windows Vista». Ввести название сайта, и нажать «Создать».

  1. Затем можно заходить на свой собственный новый сайт.

Как видно, теперь наконец можно выбрать дизайн, цвет и модули сайта, которые будут существовать на сайте (форум, новости, архив, мини-чат, погода, и т. д….). Но перед этим надо ввести название сайта, которое будет отображаться в заголовке окна браузера.

Здесь можно и нужно выбрать модули, которые будут существовать на сайте.

Всё, сайт готов, теперь в него можно и нужно добавлять информацию.

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

Рассмотрим  установку новостного движка cms DataLife Engine.

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

Сразу оговорюсь, движок коммерческий, но при желании можно найти другие (Nulled) версии. Я использовала Trial-версию.

Для создания сайта на данном движке нам понадобится:

  1. Движок DLE 8.3 (можно и другие версии,но мне нравится этот)
  2. Хостинг с поддержкой FTP,MySQL,PHP4(можно платный, можно и бесплатный. Домен(но так как хостинг у меня бесплатный, то сразу дали домен 3-го уровня)

1)Ищем сам движок и скачиваем его, разархивируем его в любую папку.

2)Подключаемся к нашему хосту через ftp-клиент( FileZilla) и заливаем все файлы из папки upload в папку www на хостинге (название папки может отличаться, в зависимости от сервера, так что уточняйте у своего хостера).

3)Устанавливаем на все папки движка права на запись (CHMOD 777), на папку templates права на запись (CHMOD 666).

4)переходим по ссылке вида site.ru/install.php в моём случае это mega-warez.jr1.ru/install.php,если всё сделали правильно, то  увидим  это...

5)Читаем лицензионное соглашение и подтверждаем его. Происходит проверка движка, скриптов,  директорий и в итоге  попадаем в меню установки.

6)Здесь указываем сервер базы данных(узнаём у хостера), имя базы данных, имя пользователя и пароль должны приходить в письме со всеми данными о хостинге. Но на некоторых хостингах приходится создать самим через phpadmin или cpanel. Так же указываем логин, пароль и адрес е-mail почты будущего администратора.

7) После этого вы увидите меню подтверждающее, что движок установлен и предложение перейти в админ -панель или на страницу сайта.

8)Заходим на хостинг через ftp и удаляем файл install.php, чтобы обезопасить себя от взлома.

9)Сайт создан.

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

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

Существует множество программ для создания веб-сайтов, например, всем известный «Macromedia Dreamweaver 8».

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

Вручную же, через блокнот, создавать сайты намного сложнее.

Нужно открыть блокнот, написать туда на языке HTML теги и содержания веб-сайта, и сохранить под нужным именем, изменив формат .txt на формат .html. Делается это достаточно просто: Нужно переписать

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

Вот простейший действующий сайт HTML:

Моя страница, со временем будет сайт

Но в документе будет только лишь пустой лист, и заголовок в названии окна браузера «Моя страница, со временем будет сайт».

Итак, разберём поподробнее данный вариант. Теги- это команды браузеру, основа HTML. Согнутые скобки «<» и «>» означают начало и конец тега. Значок «/» закрывает теги. Тег начала и тег конца этого тега отличаются только тем, что в завершающем теге стоит знак «/». Исключения составляют сложные теги, но об этом позже.

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

Регистр символов для отображения тегов не важен, например,

и

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

Итак, основные простые теги, без которых невозможно существование веб-страницы:

HTML- ставится в самом конце и в самом начале, и обозначает начало и конец, собственно, HTML документа, то есть самой веб-страницы.

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

После «головы» идет тег Body- в переводе с английского «тело»- это тело документа. В теле документа находится сам текст и содержание сайта.

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

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

Теперь, чтобы разделить страницу на две равные части, нужно вместо тега «Body» вставить тег "frameset», и тогда, вместо «Body» вписать следующее:

     

     

Где «Frameset cols=»- установки, на сколько поделить страницу по вертикали. 50% в данном случае соответствует тому, что половину занимает одна половина, и вторые 50%- место, которое занимает вторая половина. Можно здорово поэкспериментировать- вместо первой 50%, например, поставить 30%, а вместо второй 50% поставить 70%. В итоге страница поделится на две неравных половинки. И страница будет выглядеть так, как показано на рисунке 10.

Чтобы поделить страницу на 5 частей, нужно вместо тега «Body» вписать следующее:

     

     

     

     

     

Где количество раз, написанных 20%- это количество частей, на которые будет поделена страница.

Страница будет поделена на 5 равных частей.

Чтобы поделить страницу на несколько частей, но при этом не только вертикально, но и горизонтально, необходимо вписать вместо тега «Body» примерно следующее:

     

         

         

         

     

     

     

         

         

     

Где «Frameset rows=»- это деление по горизонтали.

С такими делениями можно тоже хорошо поэкспериментировать.

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

Где «Картинка.gif»- картинка формата GIF, которая должна находится в папке с данным файлом- страницей формата HTML.

И где «width»- её месторасположение (координаты) на странице по горизонтали, а «height»- её месторасположение по вертикали.

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

Где «Изображения сайта»- папка, расположенная в той же папке, что и Документ HTML, где хранится рисунок под названием «Картинка.GIF».

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

target="window-1"> Зайдите сюда!

Где «a href»- документ, на который перейдёт браузер после нажатия, а

«Зайдите сюда!»- название ссылки, по которой следует щёлкнуть, чтобы перейти на документ «Ещё один крутой веб-сайт.html»

И где «Target», в переводе с английского «цель»- это означает, что при нажатии на ссылку документ загрузится во фрейме, которому мы присвоили имя WINDOW-1.

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

Где «Body bgcolor»- тег, обозначающий цвет тела документа, а

«#0000FF»- номер цвета по таблице цветов, которую понимает браузер (любой).

                                                                           

Размещение своего веб-сайта в Интернете (Хостинг)

Что такое хостинг и где взять место под страницу.

Если нужно разместить страницу/сайт – надо найти для нее место (как для книги на полке), в Интернете такие места предоставляют специальные службы – хостеры. Они предоставят место для страницы/сайта на своем сервере – машине, на которой установлены специальные программы, и которая постоянно подключена к сети. Как известно, Интернет и состоит из множества таких машин объединенных между собой.

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

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

Однако, если страничка домашняя, и пока не планируется серьезный проект, то бесплатный хостинг - это то, что нужно на первых порах. Бесплатный хостинг предоставляют Ucoz.ru, Narod.ru, By.ru, Boom.ru и многие другие, они легко находятся с помощью любой поисковой системы, достаточно ввести в строке поиска “бесплатный хостинг”.

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

Допустим, решено зарегистрироваться на Narod.ru. Ищем на Народ.ру ссылку на раздел Регистрация (Создать страницу, Зарегистрировать сайт - это может называться по-разному), читаем внимательно правила и соглашение с пользователем, заполняем внимательно предложенную форму (анкету).

После регистрации адрес вашего сайта будет, допустим, vasya.narod.ru – это называется домен третьего уровня.

Что такое домен: разработчики решили, что цифровой адрес не удобен для пользователей интернет, что гораздо удобнее набрать vasya.ru, а не 197.84.789.10, но это было удобнее для людей, а не для машин. И тогда придумали следующее: человек набирает буквенный адрес, компьютер сверяет его с базой, и проверяет, какой цифровой адрес соответствует буквенному, и открывает страницу, соответствующую домену. Буквенный адрес назвали доменом. Каждой стране был присвоен адрес из 2-3 букв – например, .ru – был присвоен России, и назвали такой адрес – доменом первого уровня, и дали его каждой стране.

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

Что делать, если хочется уникальное имя для своего сайта, и не охота сидеть на бесплатном хостинге? Сначала зарегистрировать свой домен. Регистрацией доменов в России занимается РосНИИРОС, можно найти информацию о них и зарезервировать домен для регистрации на сайте http://nic.ru.

Иногда, платные хостеры предлагают следующую услугу – регистрацию домена на них. Но дело в том, что в этом случае они все равно обращаются к РосНИИРОС, и регистрируют домен не владельца, а на себя. Это делается, чтобы потом нельзя было уйти от них к другому хостеру, если не устроит их обслуживание, ведь в этом случае будет потеряно уникальное имя для своего сайта, т.к. оно зарегистрировано не пользователя, и жаловаться потом можно только на себя. Поэтому, лучше регистрировать домен самостоятельно, а не через кого-нибудь. Домен можно также потерять в случае неуплаты за него в РосНИИРОС. В год домен обойдется вам около 20 y.e., что не так дорого.

   О платных хостерах.

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

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

Список хостеров платных и бесплатных можно посмотреть здесь: http://yaca.yandex.ru/yca/ungrp/cat/Computers/Internet/Hosting/.

Как закачать файлы на сайт.

Через веб-страницу хостера.

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

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

Программы для закачки.

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

Предпочтительнее программа CuteFTP, ориентируясь на этот Ftp-клиент, в других ftp-клиентах действия будут аналогичными.

Итак, откроем CuteFTP.

- В меню выбираем пункт FTP -> File Manager (или нажимаем кнопку F4, чтобы вызвать Менеджер файлов)

- В появившемся окошке нажимаем на кнопку Add site

- Во вновь появившемся окошке заполняем следующее:

* Site Label - любое название (например, Мой сайт, каждый раз потом, вызывая File Manager, будет виден список сайтов, название для каждого будет такое, какое будет задано в site label)

* Host address - например, ftp.narod.ru (нужно посмотреть в разделе Помощь, сайта, предоставившего хостинг)

* User Id - имя пользователя (логин)

* Password - пароль

* Login Type - Normal

* Transfer Type - Auto-detect

- Нажать на кнопку Ок

- Теперь, чтобы подсоединиться к сайту (и заодно проверить правильность набранных параметров: Пароля Логина, и Имени сайта), нужно нажать на «Мой сайт» в File Manager.

Если не получается соединиться с сайтом, значит неправильно набран пароль, логин или host address. Редактировать (изменять) информацию о соединении с сайтом, можно, нажав кнопку Edit site в Site Manager, удалить - кнопка Delete site.

Как закачивать файлы на сайт при помощи программы FAR.

- Открыть Far

- В командной строке набрать ftp:// логин: пароль@имя_сайта (например: ftp://vasiliy:moyparol@vasya.ru)

- нажать кнопку Enter

Far, соединится с сайтом, список файлов которого отобразится на одной из панелек файл-менеджера Far, переключившись на другую панельку кнопкой TAB, откроется папка с файлами странички и можно перекачивать их на свой сайт при помощи Copy (F5).

Заключение

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

Язык HTML достаточно твёрдо закрепил свои позиции, и возможно, эта информация по созданию веб-сайтов разными методами будет актуальна ещё как минимум 5-10 лет.

Выводы: Если нужно быстро создать простой веб-сайт, на котором не планируется зарабатывать, не теряя времени на программирование в языке HTML, и не закачивая сайт самостоятельно на хостеры, то хорошо подойдёт бесплатный сервер, например, ucoz.ru, или другой. В этом случае сайт возможно создать очень быстро на готовых заготовках (движках), но тогда сайт потеряет некоторые возможности, например, такие, как полное отсутствие рекламы, или выбор рекламы, которая нужна именно на данном сайте, возможность зарабатывать на нём деньги, и свою индивидуальность.

Если нужно создать свой качественный, уникальный сайт, на котором можно зарабатывать деньги, то больше всего подойдёт программирование на языке HTML и платный хостер. Тогда можно настроить сайт точно так, как надо и приобрести (за деньги) свой неповторимый легко запоминающийся и солидный адрес, например: Radioportal.ru. Но его труднее обслуживать и надо платить хостеру за размещение сайта около 20 долларов в год. Использование программ для создания веб-сайтов является хоть и удобным, но нежелательным: Такие программы часто делают ошибки и пишут слишком много лишних тегов. Из-за чего веб-сайт загружается значительно дольше, чем может загружаться при ручном программировании.

Не исключён, конечно, и следующий вариант: создать свой теперь уже частично неповторимый веб-сайт вручную и выложить его на бесплатный хостер, например, тот-же Юкоз. Но тогда, при всей уникальности сайта, неизбежно теряется его полная неповторимость- надо будет разместить рекламу, следить за трафиком и соблюдать прочие нормы, иначе за то или иное нарушение веб-сайт удалит администрация. И, к тому же, как и при создании сайта на основе шаблона, на бесплатном хостере теряются возможности зарабатывать деньги, сильно ограничиваются права и возможности, в частности, запрет на многие опции, и ограниченный размер файлов, которые туда предполагается закачивать. Так же теряется и свой неповторимый красивый и легко запоминающиеся адрес веб-сайта. Придётся добавлять Radioportal.ucoz.ru, что уже не так красиво и легко запоминается, как, например, просто Radioportal.ru. Но если не планируется зарабатывать на сайте, и не нужны дополнительные опции, такие, как, например, неограниченный размер файлов, закачиваемых на сайт, и красивый, уникальный адрес веб-сайта, то это вполне подойдёт.

Список используемых материалов и литературы.

  1. http://www.ucoz.ru/
  2. http://www.postroika.ru/
  3. http://filigree.narod.ru/diklinks/submenu/bascolor1.htm
  4. http://www.videouroki.net/view_post.php?id=44
  5. http://www.cyberguru.ru/web/html/html-tags.html
  6. http://www.corpsite.ru/History/Public/20Sites.aspx
  7. http://www.rambler.ru/doc/about.shtml
  8. http://www.hadrus.ru/blog/2008-08-24-142
  9. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/

                                                                                   

         ПРИЛОЖЕНИЯ

                                                                                                          Приложение 1

  Основные теги языка HTML

Основные теги

- Указывает программе просмотра страниц что это HTML документ.

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

- Определяет видимую часть документа

Теги оглавления

- Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа

- Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.

- Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

- Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.

- Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.

- Устанавливает цвет гиперссылок при нажатии.

Теги для форматирования текста

 - Обрамляет предварительно отформатированный текст.

- Создает САМЫЙ БОЛЬШОЙ заголовок

- Создает самый маленький заголовок

- Создает жирый текст

- Создает наклонный текст

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

- Используется для выделения из текста слова (наклонный или жирный текст)

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

- Устанавливает размер текста в пределах от 1 до 7.

- Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

- Создает гиперссылку на другие документы или часть текущего документа.

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

- Отмечает часть текста как цель для гиперссылок в документе.

- Создает гиперссылку на часть текущего документа.

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

- Создает новый параграф

- Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center


- Вставляет перевод строки.

- Создает отступы с обеих сторон текста.
Создает список определений.

- Определяет каждый из терминов списка

- Описывает каждое определение

    - Создает нумерованный список

  1. - Определяет каждый элемент списка и присваивает номер

      - Создает ненумерованный список

    • - Предваряет каждый элемент списка и добавляет кружок или квадратик.

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

      Графические элементы

      - Добавляет изображение в HTML документ

      - Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

      - Устанавливает толщину рамки вокруг изображения


      - Добавляет в HTML документ горизонтальную линию.
      Устанавливает высоту(толщину) линии


      - Устанавливает ширину линии, можно указать ширину в пикселах или процентах.


      - Создает линию без тени.


      - Задает линии определенный цвет. Значение RRGGBB.

      Таблицы

      - Создает таблицу.

      - Определяет строку в таблице.

      - Определяет отдельную ячейку в таблице.

      - Определяет заголовок таблицы (нормальная ячейка с оцентрованным жирным текстом)

      Атрибуты таблицы

      - Задает толщину рамки таблицы.

      - Задает расстояние между ячейками таблицы.

      - Задает расстояние между содержимым ячейки и ее рамкой.

      - Устанавливает ширину таблицы в пикселях или процентах от ширины документа.

      или или
      - Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.

      - Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.

      - Указывает кол-во столбцов которое объединено в одной ячейке. (по умолчанию=1)

      - Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)

      - Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

      Кадры

      - Предваряет тег в документе, содержащем кадры;

      - Определяет строки в таблице кадров, высота которых определена кол-вом пикселей или в процентном соотношении к высоте таблицы кадров.

      - Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселей или в процентном соотношении к ширине таблицы кадров.

      - Определяет единичный кадр или область в таблице кадров.

      - Определяет, что будет показано в окне браузера если он не поддерживает кадры.

      Атрибуты кадров

      - Определяет какой из HTML документов будет показан в кадре.

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

      - Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1.

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

      - Указывает будет ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.

      - Препятствует изменению размеров кадра.

      Формы

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

      - Создает формы

      - Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.

      - Создает ниспадающее меню

      - Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.

      - Создает checkbox. За тегом следует текст.

      - Создает radio кнопку. За тегом следует текст.

      - Создает строку для ввода текста. Параметром Size указывается длина в символах.

      - Создает кнопку "Принять"

      - Создает кнопку "Принять" - для этого используется изображениеСоздает кнопку "Отмена"

                                                                                                       

                                                                                                                    Приложение 2

      Таблица веб-цветов и их обозначения в языке HTML

                                   


      По теме: методические разработки, презентации и конспекты

      Дополнительная образовательная программа СОЗДАНИЕ WEB-САЙТОВ Для кружка по Информатики На 1 год обучения Для детей 11-15 лет

      Курс «Создание Web-сайтов» предлагается для учащихся 6 -9  классов основной школы. Занятия вклю­чают практическое освоение техники создания веб-­страниц, тематических сайтов, информа­ционно-справ...

      урок прозводственного обучения "Использование гиперссылок в HTML для создания веб-сайтов"

      Язык гипертекстовой разметки HTML широко используется для создания веб-сайтов - основных элементов сети ИНТЕРНЕТ. На данном уроке при создании учебной веб-страницы...

      Технологии создания Web-сайта

      «Технологии создания Web-сайтов».    Этот элективный курс даёт возможность учащимся самим создавать продукты, которые можно применять в сети Интернет. Знание Интернет - технологий становит...

      Современные педагогические методы и технологии в профессиональном образовании. Здоровьесберегающие технологии как современные методы в профессиональном образовании.

      Аннотация. Статья раскрывает понятие "здоровьесберегающие технологии", объясняет необходимость применения их в образовательном процессе. Основное внимание в работе акцентируется  на непреры...

      5.1.3 Методы создание Web – сайта

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

      РАБОЧАЯ ПРОГРАММА КУРСА дополнительного образования«Классный сайт, или создание web-сайта класса» (центра образования цифрового и гуманитарного профилей «Точка роста»)

      РАБОЧАЯ ПРОГРАММА КУРСА дополнительного образования«Классный сайт, или создание web-сайта класса»(центра образования цифрового и гуманитарного профилей «Точка роста») Напр...