Структура веб страницы: Html/Структура веб-страницы — Викиверситет – Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице — Вебджем.рф

Содержание

Web-страницы и Web-сайты. Структура Web-страницы. Форматирование текста на Web-странице

Разработка Web-сайтов с использованием языка разметки гипертекста HTML

Web-страницы и Web-сайты

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» — «Что видишь, то и получишь»).

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

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

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

Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).

Контрольные вопросы

1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?

2. Каким образом Web-страницы объединяются в Web-сайты?

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

HTML-код страницы помещается внутрь контейнера <HTML>

Заголовок Web-страницы заключается в контейнер <HEAD>

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

контейнером).

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

Название страницы помещается в контейнер <TITLE>

Отображаемое в браузере содержание страницы помещается в контейнер <BODY>
<HEAD>
<ТITLE>Компьютер</ТITLE>
</HEAD>
<BODY>
Компьютер и ПО
</BODY>
</HTML>

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

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

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

Контрольные вопросы

1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?

Задания для самостоятельного выполнения

6.10. Практическое задание. Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере.

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

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

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

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

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

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

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

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

<Н1 ALIGN=»center»>Компьютер и ПО</Н1>

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

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

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

<Р ALIGN=»left»>Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>
<Р ALIGN= «right»>Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</Р>

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

<Н1 ALIGN=»center»>
Компьютер и ПО
</Н1>

<HR>
<Р ALIGN=»left»>Ha этом сайте…</Р>
<Р ALIGN =»right»> Терминологический словарь
…</Р>

Рис. 6.27. Web-страница «Компьютер» с отформатированным текстом

Контрольные вопросы

1. Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Ввода абзацев?

Задания для самостоятельного выполнения

6.11. Практическое задание. Создать Web-страницу «Компьютер» с отформатированным текстом и просмотреть ее в браузере.

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

Цели урока:

1) Обучающая: ввести понятия web-страницы, web-сайты, изучить структуру web-страницы.

2) Развивающая: развивать познавательный интерес, творческую активность учащихся.

3) Воспитывающая: воспитывать интерес к предмету, внимательность, дисциплинированность.

Литература:

Для учителя:

1) Угриноввич Н. Д. «Информатика 8 класс»,

2) Заславская О. Ю., Левченко И. В. «Информатика: весь курс».

Для учеников:

1) Угриноввич Н. Д. «Информатика 8 класс».

Тип урока: ознакомление с новым материалом

План урока:

1. Организационный этап.

2. Актуализация знаний.

3. Этап получения новых знаний.

4. Этап обобщения и закрепления нового материала.

5. Рефлексия.

6. Заключительный этап.

Ход урока

1. Организационный этап.

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

2. Актуализация знаний.

1) Какие способы поиска информации в Интернете вам известны?

2) Каким образом производится поиск документов по ключевым словам?

3) Какие поисковые системы вам известны?

4) Какие формы электронной коммерции существуют в Интернете?

5) Что такое хостинг?

6) Что такое интернет-аукционы? Интернет-магазины? Цифровые деньги?

3. Этап получения новых знаний.

Скачать видеоурок «Web-страницы и Web-сайты. Структура Web-страницы»

Скачать видеоурок «Web-страницы и Web-сайты. Структура Web-страницы» с яндекс-диска

Информация во Всемирной паутине хранится в форме Web-сайтов. Так, а что же такое Web-сайт и Вэб-страница? Чтобы разобраться в этом вопросе, давайте подумаем, а какая информация может содержаться на Вэб-сайте? Ответ очевиден — практически любая. Сайт может содержать информацию о различных рецептах, мифических существах, городах и странах мира и т. д. Список можно продолжать бесконечно. На сайте даже можно разместить, к примеру, литературные произведения. Как вам, например сайт, «Война и мир»? Получается, что сайт это книга? Да, Вэб-сайт, по своей сути, действительно является электронной книгой, журналом или учебником, который может содержать как полезную для вас информацию, так и ту, что на данный момент вас совсем не интересует.

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

Как и обычная книга, Вэб-сайт состоит из страниц, которые называются Вэб-страницами.

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

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

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

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

Обычно в качестве гиперссылок используют часть текста (слово или несколько слов) и графические изображения (рисунки или фотографии).

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

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

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

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

Выделяют две основные группы методов разработки веб-сайтов: визуальные и ручные (программные).

Визуальные методы позволяют производить разработку веб-страниц с высокой степенью автоматизации и не требуют знание языка разметки HTML. Процесс создания очень нагляден, т.к. производится в таком режиме -от английского What You See Is What You Get, что означает «Что видишь, то и получишь».

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

Наиболее известными такими редакторами являются Microsoft FrontPage, Macromedia Dreamweaver.

Конечно, трудно создать хороший сайт, не зная основ языка разметки HTML.

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

Давайте рассмотрим этапы создания вэб-сайта.

· определение тематики сайта, его целей и задач.

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

· подготовка материалов (текста и графики) для размещения на веб-страницах.

· конструирование страниц сайта, т. е. создание HTML-кода.

· протестировать, т. е. проверить правильность работы.

· размещение в сети Интернет.

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

В дальнейшем, конечно, сайту необходимо рекламирование и сопровождение.

А из чего же на самом деле состоит web-страница? Из команд и текста.

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

Теги и составляют основу языка разметки гипертекста HTML.

Тег всегда начинается со знака «меньше» и заканчивается знаком «больше».

Теги набирают латинскими буквами. Заглавные и строчные буквы при написании тегов не различаются.

Существует два типа тегов — парные и непарные.

Парные теги содержат открывающий и закрывающий тэги.

Открывающим тегом описывается команда и начинается её действие. Закрывающим тегом, который повторяет открывающий, но содержит слэш перед обозначением, это действие прекращает.

Такая пара тегов называется контейнером.

Например, тег задаёт жирное начертание. Размеченный текст «Урок „тег b“ информатики „/b“!» браузером будет отображаться так:

Урок информатики и слово «информатики» будет выделено жирным цветом.

Обратите внимание, этот тег парный.

А теперь рассмотрим структуру простейшего HTML-документа.

Теперь всё по порядку.

HTML-документ начинается открывающимся тегом html, а заканчивается — закрывающимся тегом html. Без этих тегов браузер не сможет определить формат документа и правильно его интерпретировать.

Внутри этих тегов расположены два контейнера.

В контейнере head размещается неотображаемая на странице служебная информация, а так же название страницы, которое отображается в заголовке окна браузера. Название страницы помещается в контейнер

Вся отображаемая браузером информация: тексты, рисунки, ссылки, звуки, видеофрагменты — помещается в контейнер

Созданная Веб-страница сохраняется в виде файла с разрешением «точка htm» или «точка html»

Например: «uroki точка htm», «planet точка html»

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

А теперь создадим HTML-документ, который будет содержать текст:

Это моя первая web-страница!!!

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

Для этого отрываем Пуск, все программы, стандартные, Блокнот.

Мы уже знаем, что HTML-документ начинается с открывающегося тега html. Я рекомендую сразу же парные теги и закрывать, чтобы потом не забыть. Ведь, если мы откроем уже готовый сайт с помощью редактора блокнот, то увидим, что тегов в нём очень-очень много.

Итак, тег открыли и сразу закрыли.

Внутри этих тегов расположены два контейнера.

Первый контейнер head. Опять тег открыли и закрыли.

В этом контейнере помещаем заголовок окна в парном теге title. Заголовок напишем ИНФОРМАТИКА.

После контейнера head следует контейнер body, в котором, как вы уже узнали, размещается содержание страницы.

Между открывающимся и закрывающимся тегами мы пишем текст, который будет размещаться на нашей веб-странице: «Это моя первая web-страница!!!»

Сохраним документ в формате HTML. Т.к. редактор Блокнот сохраняет документы по умолчанию с расширение .txt, воспользуемся меню Файл — Сохранить как, выберем вариант Все файлы, введём имя Проект с расширение HTML.

Далее откроем созданный документ в браузере. В контекстном меню выберем команду, открыть с помощью браузера Internet Explorer. Текст «Это моя первая web-страница!!!» отображается на странице. Обратите внимание, где располагается заголовок окна.

Итак, наш первый сайт готов!

4. Этап обобщения и закрепления нового материала.

1) В Блокноте создайте документ следующей структуры.

Сохраните его в своей папке под именем Упражнение1.HTML.

Просмотрите созданный HTML-документ в браузере.

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

2) В Блокноте создайте документ следующей структуры.

Сохраните его в своей папке под именем Упражнение2.HTML.

Просмотрите созданный HTML-документ в браузере.

3) Создать Web-страницу в соответствии с рисунком

4) Рефлексия.

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

5) Домашнее задание.

§ 3.6, 3.4.4, 3.4.6

Структура веб-страницы. Структура веб-страниц

В основном веб-страницы создаются с помощью языка гипертекстовой разметки (HTML — Hyper Text Markup language ). HTML — это простой язык программирования, основная задача которого заключается в форматировании страницы при отображении в веб-браузере, например в Microsoft Internet Explorer . В данной главе представлен минимум информации, который необходимо знать для создания веб-страниц и их объединения в работающий сайт.

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

1.Теги. Это простые дескрипторы, которые указывают веб-браузеру на расположение элементов на странице и их форматирование.

Открывающий тег. Начало каждого элемента в HTML обозначается открывающим тегом: имя элемента указывается в угловых скобках. Например, открывающий тег абзаца — это , а открывающий тег изображения -.

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

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

3.Содержимое. Содержимое располагается между закрывающим и открывающим тегами, как. например, в следующем фрагменте программного кода:

Здесьрасположено содержимое этого абзаца.Р>

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

Существует две разновидности структур веб-страниц: стандартная и фреймовая. Стандартная веб-страница представляет собой отдельную структуру.

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

Веб-страницы состоят из элементов. Базовая структура типовой веб-страницы содержит три элемента: HTML , HEAD и BODY . В состав элемента-контейнера HTML входят элементы HEAD и BODY .

На самом деле технически возможно реализовать веб-страницу без использования тегов HTML , HEAD и BODY (стандарт HTML позволяет это сделать), однако удачным решением это не назовешь. Исключив эти теги, разработчик ничего не добьется, а их использование позволяет упорядочить другие элементы страницы.

Все видимые на странице элементы расположены внутри тега BODY . Элемент HEAD содержит информацию типа заголовка страницы, который записывается между тегами

и , как, например, в следующем фрагменте программного кода.

Это заголовок страницы.

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

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

Размещено на /

Пензенский Государственный Университет

Кафедра: Коммуникационный менеджмент

Курсовая работа

Тема: Создание структуры Web-сайта

Выполнила: студентка гр.05ЗИЖ61

Тюрина Е.Г.

Проверила: Карпова М.К

Введение

1. Базовые знания необходимые для создания Web-сайта

1.1 Web-страницы и Web-сайты

1.2 Язык разметки гипертекстовых страниц HTML

1.3 Web-редактор Macromedia Dreamweaver

2. Как построить хороший сайт

2.1 Представление текста на Web-страницах

2.2 Представление графики на Web-страницах

2.3 Планирование информационного потока

2.4 Условия для создания успешного сайта

3. Разработка Web-сайта посвященного компании «Марс»

3.1 Создание новой web-страницы (шаблона)

3.2 Ввод и форматирование текста

3.3 Работа с графикой

3.4 Создание гиперссылок

Заключение

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

Введение

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

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

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

Каждый из нас уже сейчас может сделать свой вклад в развитие Internet. Для этого достаточно создать свой веб-сайт и разместить его в Сети.

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

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

Тема моей курсовой работы: Разработка Web-сайта посвященного компании «Марс».

Объект исследования: Web-сайт салона ООО Марс.

Предмет – создание структуры Web-сайта.

Цель — создание Web-сайта компании «Марс».

Для этого необходимо решить следующие частные задачи:

– ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;

– изучить основные понятия и программный инструментарий, применяемый для разработки и создания Web-сайтов;

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

Структура веб-страницы

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

Это язык программирования, имеющий свой набор команд.

Каждый веб-документ представляет собой программу, написанную на этом языке (HTML-код).

Команды HTML называются тегами (от англ. tag — ярлык, метка). Чтобы отличить теги от текста документа их заключают в угловые скобки. Например, тег означает команду “начало новой строки”. Теги могут быть как одиночными, так и парными. Одинарные задают действие на один раз. Парные теги указывают начало и окончание действия команды. Тег, указывающий на окончание, помечается символом слеш (/).

Структура веб-страницы задается следующими парными тегами:

Пара <html> и </html> указывает формат страницы и отмечает его границы
Пара <head> и </head> указывает на начало и конец заголовка. Включают описание документа, ключевые слова (keywords) для поиска, название документа и другую информацию идентифицирующую страницу.
Пара <title> и </title> указывает имя страницы.
Пара <body> и </body> указывает на начало и конец “тела” страницы. Тело — это последовательность команд, обеспечивающая вывод в окно браузера форматированного текста, ссылок и других элементов веб-страницы.

Создавать веб-страницы можно как в HTML-редакторах (FrontPage), так и в текстовых редакторах разного уровня (Word, Блокнот).

Рисунки и другие объекты веб-страницы хранятся отдельно от HTML-кода.

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

Таким образом, веб-страница, как правило, хранится в виде файла формата .html и папки с объектами.

Путешествие по www

Для работы с WWW используются:

Панель Адресная строка — переход к новому сайту.
Панель инструментов — работа с полученными данными.
Элементы веб-страницы — работа с текущим сайтом или переход на другой сайт.

Адресную строку можно заполнять разными способами:

Ввести URL вручную.
Скопировать адрес из какого-либо электронного документа (например, из электронного письма).
Выбрать адрес из списка использованных ранее адресов.

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

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

Кнопка Остановить позволяет прервать загрузку ресурса.

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

В Internet Explorer нет окон документов. Если нужно одновременно работать с несколькими веб-страницами, следует открыть новое окно программы:

Новое окно с текущей страницей — команда Файл/Создать/Окно.
Новое окно со страницей, указанной в ссылке — выбор команды Открыть в новом окне из контекстного меню ссылки.

Заметьте, что из нового окна браузера нет возможности возврата к просмотренным страницам — кнопка Назад недоступна.

Некоторые ссылки настроены так, что страница открывается в новом окне автоматически.

Базовая структура веб-страницы — О верстке и котах

Сегодня мы поговорим о совсем очевидных вещах. Почему бы и нет?

Структура веб-страницы выглядит следующим образом:

The Doctype

Объявление doctype – первый элемент, отображающийся в исходном коде страницы. Оно предоставляет браузеру информацию о языке разметки, на котором написана страница, что может повлиять на отображении браузером контента. На первый взгляд, это довольно пугающе, но есть и хорошая новость – большинство веб-редакторов WYSIWYG создают doctype автоматически после того, как был выбран тип создаваемого документа (действительно, кто и когда в последний раз заморачивался с определением doctype??)
Doctype выглядит следующим образом:

<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01//EN»»http://www.w3.org/TR/html4/strict.dtd»>

А вот более привычный, знакомый и родной doctype для HTML5, благослави его небеса

Дерево документов

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

Мы видим, что html включает в себя два элемента: head и body. У head, в свою очередь, еще два подраздела: meta и title. Элемент body включает в себя несколько заголовков, параграфов и цитату.

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

html

Сразу после doctype идет html-тег – корневой элемент дерева документов. Все узлы, что следуют за ним, является его потомками.
html разбивает документ на две части: head и body.

head

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

base – определяет baseURL для ссылок и ресурсов на странице и целевые окна для открытия связанного контента.
link – источник каких-либо данных, чаще всего ссылка на таблицу стилей, которая содержит инструкции по стилизации элементов веб-страниц.
meta – предоставляет дополнительную информацию о странице: кодировку, краткое описание содержимого страницы, инструкции индексации для поисковых систем и подобное.
object – универсальный контейнер для медиаобъектов.
script – вставка скрипта или ссылка на внешний скрипт.
style – здесь располагаются встроенные (специфичные для данной страницы) стили CSS.

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

body

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

Оригинал статьи

Что нового нам сообщила эта статья? Ничего, кроме забавного факта, что когда-то у body были свои атрибуты. Но, знаете что, неделю я брожу от статьи к статье и выясняю, что все описанное там старо, известно и избито. С основами всегда так, сначала тебе кажется, что ты ничего не знаешь, а потом выясняется, что все оно едва ли не в подкорке сидит. А потом тебя спрашивают, а ты и сказать ничего не можешь, это ведь так очевидно!
Так что, пусть будет, надо ведь писать-то о чем-то.

Урок «Web-страницы и web-сайты. Структура Web-страниц»

Тема урока: Web-страницы и web-сайты. Структура web-страницы.

Класс 8

Цели урока:

Тип урока: урок освоения новых знаний

Цели урока:

Познавательная: изучить структуру web-страницы и ознакомиться со средствами ее создания.

Развивающая: развивать умения пользоваться программой-браузером.

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

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

Формы познавательной деятельности: фронтальная, индивидуальная, парная

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

Ход урока.

Организационный момент.

Здравствуйте, ребята! Я……

Ребята, какой значок изображен на слайде? (сл.1)

Да. Это значок информации. Надеюсь, мы сегодня взаимно получим полезную информацию друг от друга.

Актуализация знаний. Мотивация.

Ребята, наверняка у вас у всех есть компьютеры, возможно ноутбуки. Планшеты…И каждый из вас каждый день совершает путешествие через компьютер куда? В Интернет. И точно таких же, как Вы миллионы людей в это же время тоже путешествуют по интернету. А Что такое Интернет? (сл.2) Правильно – это глобальная компьютерная сеть. Благодаря этой сети каждый из миллионов людей имеет доступ к информации, хранящейся в компьютере, находящемся в любой точке земного шара. Это так называемая Всемирная паутина.

Что мы с вами берем с собой собираясь в путешествие? А вот собираясь в путешествие по Интернету хорошо бы взять с собой такие инструменты. (сл.3) Ребята, а вы знаете для чего они используются? Надеюсь, в ходе нашей встречи мы узнаем, что это такое.

Ребята, как мы попадаем в Интернет?

Через браузер. Какие браузеры вы знаете? (сл.4)

Каждый из нас выходит в Интернет для поиска нужной информации. Ища эту информацию, мы посещаем различные сайты. (сл.5)

Например. Сайт школы или сайт военного училища. А вот еще один сайт. Это, ребята сайт «Бессмертный полк» — это сайт, куда записывают всех тех, кто ковал победу в ВОВ. Это ваши прадедушки и прабабушки, др. родственники… Если мы откроем регион Марий Эл, то к сожалению нет там нашего Сернурского района. На данный момент всего в этом полку 86485 человек.

Итак. Ребята, вы, наверное, догадались, что речь пойдет о … сайтах

Запишем тему урока (сл.6)

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

Этап изучения нового материала.

Структура Web-страницы. (сл.9)

На партах у учащихся лежат листочки с расшифровками тегов.

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

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

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

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

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

<ТITLE>КомпьютерТITLE>

BODY>
HTML>

Рассказ по слайдам 11-15

Динамическая пауза

Практическая работа (сл.16)

Сопровождается песней «Поклонимся великим тем годам!»

Тестирование (сл.17-22)

Самооценка (сл.23)

Подведение итогов урока.

Сегодня на уроке мы хорошо поработали. В журнал будет выставлена средняя оценка.

Домашнее задание.

Записать, что означает каждый тег

Рефлексия (сл.24)

Закончите предложение.

На уроке мне понравилось…..
Я сегодня научился(лась)……
Самым трудным на уроке для меня было …

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

Так мало их осталось ветеранов,

Освободивших мир наш от чумы.

Кровавыми, мозольными руками

Мать-Родину они спасли от нищеты.

Так мало их осталось ветеранов,

Так много не пришедших с той войны.

Друзья, не забывайте о деяньях,

О подвигах солдат своей страны!

Друзья, не забывайте близких,

В истории оставьте след,

Вы напишите на страничке

О подвигах героев давних лет! (сл.26)

Спасибо за урок!

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

Государственное бюджетное профессиональное образовательное учреждение

Ишимбайский профессиональный колледж

Методическая разработка

урока информатике

Тема: Web-страницы и Web-сайты. Структура Web-страницы

Разработала:

преподаватель информатики

Трондина Марина Витальевна

группа № ЭВМ-14

Профессия: «Мастер по обработке

цифровой информации»

2017 год

Цели урока:

1) Обучающая: ввести понятия web-страницы, web-сайты, изучить структуру web-страницы.

2) Развивающая: развивать познавательный интерес, творческую активность учащихся.

3) Воспитывающая: воспитывать интерес к предмету, внимательность, дисциплинированность.

Литература:

Цветкова, М. С. Информатика и ИКТ: учебник для СПО/ М.С. Цветкова, Л.С. Великович. – Москва: Академия, 2016. – 352с.
Михеева, Е.В. Информатика: учебник для СПО/ Е. В. Михеева, О. И. Титова. — 3-е изд., стер. — Москва : Академия, 2016. — 352 с.
Гохберг, Г. С. Информационные технологии: учебник для СПО/ Г.С. Гохберг и др.. – 8-е изд., стер. – Москва: Академия, 2013. – 208с.
Михеева, Е.В. Практикум по информационным технологиям в профессиональной деятельности: учебное пособие для СПО/ Е.В. Михеева. – 9-е изд., стер. – Москва: Академия, 2015. – 256с

Тип урока: ознакомление с новым материалом

План урока:

1. Организационный этап.

2. Актуализация знаний.

3. Этап получения новых знаний.

4. Этап обобщения и закрепления нового материала.

5. Рефлексия.

6. Заключительный этап.

Ход урока

1. Организационный этап.

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

2. Актуализация знаний.

1) Какие способы поиска информации в Интернете вам известны?

2) Каким образом производится поиск документов по ключевым словам?

3) Какие поисковые системы вам известны?

4) Какие формы электронной коммерции существуют в Интернете?

5) Что такое хостинг?

6) Что такое интернет-аукционы? Интернет-магазины? Цифровые деньги?

3. Этап получения новых знаний.

Информация во Всемирной паутине хранится в форме Web-сайтов. Так, а что же такое Web-сайт и Вэб-страница? Чтобы разобраться в этом вопросе, давайте подумаем, а какая информация может содержаться на Вэб-сайте? Ответ очевиден — практически любая. Сайт может содержать информацию о различных рецептах, мифических существах, городах и странах мира и т.д. Список можно продолжать бесконечно. На сайте даже можно разместить, к примеру, литературные произведения. Как вам, например сайт, «Война и мир»? Получается, что сайт это книга? Да, Вэб-сайт, по своей сути, действительно является электронной книгой, журналом или учебником, который может содержать как полезную для вас информацию, так и ту, что на данный момент вас совсем не интересует.

Как и обычная книга, Вэб-сайт состоит из страниц, которые называются Вэб-страницами.

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

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

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

Выделяют две основные группы методов разработки веб-сайтов: визуальные и ручные (программные).

Визуальные методы позволяют производить разработку веб-страниц с высокой степенью автоматизации и не требуют знание языка разметки HTML.Процесс создания очень нагляден, т.к. производится в таком режиме –от английского What You See Is What You Get, что означает «Что видишь, то и получишь».

Наиболее известными такими редакторами являются Microsoft FrontPage, Macromedia Dreamweaver.

Конечно, трудно создать хороший сайт, не зная основ языка разметки HTML.

Давайте рассмотрим этапы создания вэб-сайта.

· определение тематики сайта, его целей и задач.

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

· подготовка материалов (текста и графики) для размещения на веб-страницах.

· конструирование страниц сайта, т.е. создание HTML-кода.

· протестировать, т.е. проверить правильность работы.

· размещение в сети Интернет.

В дальнейшем, конечно, сайту необходимо рекламирование и сопровождение.

А из чего же на самом деле состоит web-страница? Из команд и текста.

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

Теги и составляют основу языка разметки гипертекста HTML.

Тег всегда начинается со знака «меньше» и заканчивается знаком «больше».

Теги набирают латинскими буквами. Заглавные и строчные буквы при написании тегов не различаются.

Существует два типа тегов – парные и непарные.

Парные теги содержат открывающий и закрывающий тэги.

Такая пара тегов называется контейнером.

Например, тег задаёт жирное начертание. Размеченный текст «Урок « тег b» информатики «/b»!» браузером будет отображаться так:

Урок информатики и слово «информатики» будет выделено жирным цветом.

Обратите внимание, этот тег парный.

А теперь рассмотрим структуру простейшего HTML-документа.

Теперь всё по порядку.

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

Внутри этих тегов расположены два контейнера.

Вся отображаемая браузером информация: тексты, рисунки, ссылки, звуки, видеофрагменты – помещается в контейнер

Созданная Веб-страница сохраняется в виде файла с разрешением «точка htm» или «точка html»

Например: «uroki точка htm», «planet точка html»

А теперь создадим HTML-документ, который будет содержать текст:

Это моя первая web-страница!!!

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

Для этого отрываем Пуск, все программы, стандартные, Блокнот.

Итак, тег открыли и сразу закрыли.

Внутри этих тегов расположены два контейнера.

Первый контейнер head. Опять тег открыли и закрыли.

В этом контейнере помещаем заголовок окна в парном теге title. Заголовок напишем ИНФОРМАТИКА.

После контейнера head следует контейнер body, в котором, как вы уже узнали, размещается содержание страницы.

Сохраним документ в формате HTML. Т.к. редактор Блокнот сохраняет документы по умолчанию с расширение .txt, воспользуемся меню Файл – Сохранить как, выберем вариант Все файлы, введём имя Проект с расширение HTML.