Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html




Скачать 242.74 Kb.
НазваниеРайонный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html
страница1/5
Дата27.02.2013
Размер242.74 Kb.
ТипКонкурс
  1   2   3   4   5


Отдел образования администрации Юсьвинского района

МОУ «Пожвинская средняя

общеобразовательная школа №2»


Районный конкурс учебно-

исследовательских работ


Секция: информационные технологии




Создание Web – страниц c помощью языка гипертекстовой разметки HTML


Работу выполнил

ученик 9 «а» класса

Стариков Дмитрий

Александрович

Руководитель

Старикова И.Э.
учитель информатики


С. Пожва – 2007 год.

Содержание





Содержание 3

Введение 4

Часть 1. Web – сайты и Web – страницы 6

Часть 2. Основные теги HTML. 7

Часть 3. Подключение графических объектов. 11

Часть 4. Гиперссылки на Web – страницах. 13

Часть 5. Списки, формы, флажки на Web – страницах 15

Часть 6. Создание фреймовой структуры. 19

Заключение 22

Список используемой литературы 23



Введение



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

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

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

Тема нашей работы «Создание Web–страниц c помощью языка гипертекстовой разметки HTML».

Цель работы – разработать сайт школы с помощью языка HTML.

В процессе работы необходимо было решить следующие задачи:

  • Изучить основы языка HTML

  • Изучить основные способы создания Web – страниц

  • Продумать и спроектировать будующий сайт школы

  • Собрать информацию, необходимую для верстки страниц сайта

  • Продумать внешний вид сайта

  • Создать сайт

Результатом нашей работы является создание сайта школы, который в ближайшее время мы разместим в Глобальной сети Интернет.

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

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

Познакомим вас с нашим первым сайтом.

Сайт Школы

В дальнейшем мы вышли на новый качественный уровень – создание сайта с «чистого листа». Именно этот способ и описан в нашей работе.

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

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

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









На этом этапе необходимо запомнить основные правила:

1. Открыть текстовый редактор БЛОКНОТ

2. Внести HTML – код

3. Сохранить файл под именем index.htm в папке сайта

4. Просмотреть данный файл в окне браузера

5. Просмотреть HTML – код страницы
{ВИД-Просмотр HTML – кода}

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

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

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

Наш старый сайт мы дополнили новыми страницами, оформленными по правилам гипертекстовой разметки документов HTML.

Новые страницы сайта

Работа носит практический характер, т.к. основная часть работы – создание сайта. Познакомиться с сайтом нашей школы можно по адресу http//www.lempiha2.narod.ru


Часть 1. Web – сайты и Web – страницы


Информация в Интернете организована в виде системы связанных Web – страниц. Web–страница – файл в формате HTML (Hyper Text Mark-Up Language – язык разметки гипертекста). Это текстовый файл, содержащий воспроизводимый на экране текст, управляющие команды (теги), с помощью которых форматируется текст, организуются гиперссылки, присоединяются встроенные объекты, создаются формы для интерактивного контакта с пользователями. Содержимое HTML -файла можно просмотреть с помощью простого текстового редактора.

Страницы объединяются в сайты. Сайт – это совокупность информационных единиц – страниц, объединенных общей целью. Просмотр Web-страниц осуществляется с помощью специальных программ просмотра – браузеров. В настоящее время наиболее распространенными браузерами является Internet Explorer.

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

Web – сайты являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую и видеоинформацию.

Для создания Web – страниц существует целый ряд инструментальных средств высокого уровня, которые называются HTML - редакторы. Работа с ними не требует знаний языка HTML. Такие редакторы, как MS FrontPage, Macromedia Dreamweawer, позволяют создавать Web – страницы в минимальные сроки и без знания языка гипертекстовой разметки. Можно создавать Web – страницы и в текстовом процессоре Word. Но профессиональные разработчики сайтов редко используют автоматизированные средства для создания Web – страниц, так как такие сайты занимают много информационного пространства.

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

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

Основными достоинствами HTML – документов являются:

  • Малый информационный объём, профессиональные возможности дизайна.

Рассмотрим возможность создания Web-страниц и сайта с помощью языка гипертекстовой разметки HTML, в программе Блокнот.

Часть 2. Основные теги HTML.



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

Рассмотрим, создание Web – сайта на примере тематического сайта «Партийная жизнь школы». Сначала разработаем проект сайта, то есть, определим, сколько Web – страниц будет входить в сайт, какова их тематика и как они будут связаны между собой.

Наш сайт кроме титульной страницы «Партийная жизнь школы» будет содержать:

  • Страницу партии Пионеры

  • Страницу партии Детство

  • Страницу партии Красоты

  • Страницу Информационной партии


Открываем окно текстового редактора Блокнот.

Вид Web – страницы создаётся тегами, которые заключаются угольными скобками. Теги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тегов называется контейнером). Закрывающий тег содержит прямой слэш (/) перед обозначением. Теги могут записываться как прописными, так и строчными буквами.

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

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

Название Web - страницы содержится в контейнере и отображается в строке заголовка браузера при просмотре страницы. Назовём нашу Web-страницу «Партии»:



Партии



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



Партийная жизнь школы



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

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

HTML – код Web – страницы будет иметь вид:






Партии





Партийная жизнь школы






На этом этапе необходимо запомнить основные правила:

1. Открыть текстовый редактор БЛОКНОТ

2. Внести HTML – код

3. Сохранить файл под именем index.htm в папке сайта

4. Просмотреть данный файл в окне браузера

5. Просмотреть HTML – код страницы
{ВИД-Просмотр HTML – кода}


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

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

- тег абзаца; используется с закрывающим тегом

. Каждый абзац начинается с новой строки. Между абзацами браузер оставляет небольшой промежуток.

- полужирный текст; используется с закрывающим тегом . Любой текст становится полужирным.


- перевод строки.


- горизонтальная разделительная линия

  1   2   3   4   5

Похожие:

Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconКурс посвящен практике применения языка гипертекстовой разметки html
На большом количестве примеров рассматриваются основные конструкции языка, приемы разметки и связь с другими инструментами разработки...
Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconУрок информатики в 10Б классе по теме «Основы языка разметки гипертекста»
Образовательные – познакомить с основами языка разметки гипертекста html, сформировать представление о структуре html-документа,...
Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconСоставление Web-страницы с помощью языка разметки гипертекста html (HyperText Markup Language)
Постановка задачи. Написать Web-страницу в редакторе Блокнот (Notepad) Windows с интерактивными графическими элементами (файлы с...
Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconУчебно-методический комплекс факультатива «Использование интернет-технологий в социально-экономической сфере»
Сетевые формы организаций», «Дистанционные трудовые отношения», «Интернет-технологии. Html – язык структурирования документов», «Основные...
Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconПрограмма разработана на основе “Обязательного минимума содержания среднего (полного) общего образования РФ
Дизайн web-страниц и виды сайтов. Введение в стандарт Hyper Text Markup Language (html). Использование программных средств для Создания...
Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconСоздание базовых элементов Web-страниц с помощью Adobe Dreamweaver
Цель: Освоение базовых принципов создания Web-сайтов. Ознакомление с интерфейсом программы Adobe Dreamweaver и создание первой простой...
Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconПрограмма и материалы элективного курса для учащихся 9-10 классов «Основы создания web-страниц с помощью html»
Домашний адрес: 629860, Ямало-Ненецкий автономный округ, Пуровский район, пгт. Уренгой
Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconКонкурс творческих исследовательских работ школьников
Тема данного исследования: «Особенности изучения английского языка с помощью компьютера и интернета» обусловлена необходимостью применения...
Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconКонкурс исследовательских работ учащихся в области социально- гуманитарных наук
Районный конкурс исследовательских работ учащихся в области социально- гуманитарных наук
Районный конкурс учебно- исследовательских работ Секция: информационные технологии Создание Web страниц c помощью языка гипертекстовой разметки html iconКонкурс исследовательских работ учащихся учреждений общего и дополнительного образования
Районный конкурс исследовательских работ учащихся учреждений общего и дополнительного образования
Разместите кнопку на своём сайте:
Библиотека


База данных защищена авторским правом ©lib.znate.ru 2014
обратиться к администрации
Библиотека
Главная страница