Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.

Вам скорей всего уже известно, что основным языком Internet-а является язык гипертекстовой разметки HTML (HyperText Markup Language) . В этой статье мы узнаем базовые понятия HTML и научимся создавать простейшие WEB-страницы.

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

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

Браузер — это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам. Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы. С помощью команд — тегов , HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например

,

, .

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

Язык HTML и его теги

Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org . Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.

Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad) (вообще в дальнейшем для редактирования html-кода я советую использовать ). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку об автомобилях. Итак, откроем Блокнот и наберем в нем текст:

Сайт об автомобилях.

Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях. На сайте есть описания многих импортных и отечественных автомобилей.

Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:

Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:

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

Что такое тег?

Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент:

Сайт об автомобилях

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

и

. Что же такое тег в html языке?

Тег HTML - это обычные слова и символы, заключенные в угловые скобки, например

,

, . Так тег

является открывающим тегом, тег

закрывающим тегом, а текст между ними называется содержимым тега. Также тег

и тег

называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:

Так парный тег

определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы

—

.

Элементы бывают блочные и строчные (текстовые). Блочные элементы осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы осуществляют непосредственное форматирование текста или логическое форматирование. Элемент

является блочным элементом.

На этом у меня все!!! До встречи в следующих постах!

МОСКОВСКИЙ ИНСТИТУТ ОТКРЫТОГО ОБРАЗОВАНИЯ
КАФЕДРА МАТЕРИАЛЬНЫХ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ

Материалы дистанционного курса
"Информационные технологии и образование"

Полилова Татьяна Алексеевна
[email protected]

Как создать web-страницу

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

Возможности Word

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

Возьмем некоторый текст.

Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню - позиция Файл). Тогда html-представление документа будет иметь вид:

Первое, что бросается в глаза - текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.

Использование таблицы

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

Фон и стиль

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

Вставка картинки

В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.

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

Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):

В документе при этом не будет создаваться лишнего пустого пространства.

Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование - Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.

Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.

Бегущая строка

Word позволяет внести на web-страницу и другие оформительские элементы, например "бегущую строку". Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню - позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.

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

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

Использование шаблонов оформления

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

Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат - Тема.

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

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

Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка - Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.

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

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

Веб-презентация в PowerPoint

Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.

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

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

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

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

С помощью кнопки Показ сладов можно просматривать слайды на полном экране.

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

В презентации можно создать гиперссылки, которые связывают объекты на слайде, например, с другими слайдами. Тем самым можно создать структуру гипермедиа, которая естественным образом будет соответствовать идеологии Интернета. Поясним этот прием на примере.

Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд - оглавление коллекции.

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

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

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

Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.

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

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

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

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

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

Описание html тегов из примера

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

Любая html страница имеет следующую структуру:

... Заголовочные теги ... ... Тело страницы ...

2. - между этими тегами заключается весь видимый контент страницы.

4. - между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег . Это название при загрузке документа появляется в строке заголовка браузера (рисунок 3).

Рисунок 3

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

Рисунок 4

Та же страничка после вставки кодировки (рисунок 5)

Рисунок 5

Примечание: вместо кодировки charset="windows-1251" можно использовать кодировку charset=" utf -8" , которая позволяет создавать мультиязычные сайты, так как все существующие в мире символы в ней присутствуют. В этом случае в Notepad ++ необходимо до верстки и сохранения html -файла выбрать из верхнего меню Кодировки - Кодировать в UTF -8 без BOM (UTF-8 without BOM)

Для создания первого документа этой информации достаточно.

Практическое задание 1

1. Создайте папку, назовите ее my house . Имена всех папок и файлов необходимо создавать латинскими строчными буквами, русские названия использовать нельзя . Задавайте имена короткими и смысловыми.

Код web-страницы будем писать в Блокноте. Лучше пользоваться не тем Блокнотом, который идет в поставке Windows, а более «продвинутым», например Notepad++. Дистрибутив Notepad++ есть в папке CD/distr .

2. Откройте Notepad++. Убедитесь, что установлена кодировка ANSI, для этого в меню в пункте Кодировки , установите позицию Кодировать в ANSI .

3. Наберите в Notepad++ код из листинга на рисунке 2.

Код в листинге на рисунке 2 в дальнейшем будет служить нам шаблоном, чтобы каждый раз не набирать структуру html-документа. Конструкцию DOCTYPE скопируйте отсюда (запоминать и заучивать ее не надо).

4. Сохраните файл под именем shablon.html в папке myhouse , при этом в поле Тип файла установите All types (рисунок 6), иначе Ваша web-страничка потом не откроется в браузере.

Рисунок 6

5. После сохранения запустите shablon . html двойным щелчком. В результате Ваш файл будет выглядеть следующим образом (рисунок 7).

Рисунок 7

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

6. Внутри папки myhouse создайте папку public _ html . Таким именем обычно называется папка, в которой хранится сайт при размещении на настоящем хостинге (также эта папка может называться www).

7. Сохраните файл shablon . html в папке public _ html под новым именем main . html .

8. Из папки CD / html_css_1 откройте файл text_main.txt в Notepad++, а также откройте файл, сохраненный под именем main . html

9. Скопируйте весь текст из файла text_main.txt и вставьте в файл main . html вместо фразы «Содержимое web-страницы». В теге .

10. Сохраните изменения и просмотрите файл main . html в браузере. Вы увидите неотформатированный текст. Даже переносы строк, которые есть в исходном тексте, браузер не делает (рисунок 8).

Рисунок 8

2. Форматирование web -страницы тегами HTML

В данном уроке «Как создать HTML-страницу» рассматриваются основные теги, которые используются для разметки веб-страницы.

Теги предназначены для форматирования текста web-страницы. Список тегов более подробно можно посмотреть в папке CD /Справочник HTML в справочнике html401_ru.chm (в верхнем меню пункт элементы ).

Рассмотрим некоторые из тегов.

Элементы h 1, h 2, h 3, h 4, h 5, h 6

Структурирование тела документа выполняется внутри элемента < body > с помощью заголовков, задаваемых элементами h1, h2, h3, h4, h5, h6.

Элементы заголовков являются парными, поэтому должны имеет открывающий < h 1> и закрывающий h 1> теги.

HTML располагает шестью уровнями заголовков: h1 (самый верхний), h2, h3, h4, h5 и h6 (самый нижний). Функции элементов заголовков подобны обычным стилям заголовков в текстовых редакторах.

Действие этих шести тегов представлено на рисунках ниже. На одном рисунке исходный код (рисунок 9), на другом - вид в браузере (рисунок 10).

Рисунок 9

Рисунок 10

Разделение текста на абзацы

Тег < p > задает начало абзаца и вставляет сверху абзаца расстояние - отступ для отделения этого абзаца от предыдущего.

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

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

Практическое задание 2

1. Отформатируйте заголовок «Каталог архитектурных проектов» с помощью тегов

и

.

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

и

.

3. Отформатируйте заголовки «Проекты домов» и «Площади домов» с помощью тегов

и

.

4. Основной текст разделите на абзацы с помощью тега

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

5. Просмотрите результат в браузере.

Рисунок 11

Маркированные и нумерованные списки

Средствами HTML можно создавать любые списки: нумерованные (цифровые и буквенные) и маркированные с разными типами маркеров.

Тег < ul >…ul > формирует маркированный список.

Тег < ol >…ol > формирует нумерованный список.

Отдельный элемент списка как в

, так и в
формируется с помощью тега < li > .

Практическое задание 3

1. Создайте нумерованный список под заголовком «Проекты домов».

2. Создайте маркированный список под заголовком «Площади домов». Ваш код будет выглядеть следующим образом (рисунок 12).



Рисунок 12

3. Просмотрите страницу в браузере.

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

Пример вложенного списка приведен на рис. 13

Практическое задание 4

1. Реализуйте в новом файле код, приведенный на рисунке 13.
2. Сохраните файл в папке myhouse под именем spisok _ vlozh . html . Результат на рис. 13



Рисунок 13. Пример вложенного списка

Начертания шрифтов

Тег … - позволяет отобразить текст полужирным шрифтом.

Тег … - позволяет отобразить текст в курсивном начертании.

Тег … - отображает подчеркнутый текст.

Например:

В этом случае текст будет отображен жирным курсивом , но не подчеркнутым.

А в этом случае текст будет написан жирным подчеркнутым курсивом .

Нижние и верхние индексы

Тег < sub > и sub > позволяет опустить текст на полстроки ниже обычного текста.

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

Практическое задание 5

1. Отформатируйте в первом абзаце название myhouse.ru полужирным шрифтом (рисунок 14).

Рисунок 14

2. Отформатируйте во втором абзаце фразу «Более 95% проектов» подчеркнутым курсивом (рисунок 15).

Рисунок 15

3. Отформатируйте верхние индексы в тех местах, где используются квадратные метры (рисунок 16).



Рисунок 16

4. Сохраните файл. Просмотрите через браузер. Web-страница должна выглядеть следующим образом (рисунок 17).



Рисунок 17

3. Вставка изображений

В нашей статье «Как создать HTML-страницу» мы рассмотрим, как размещать на веб-странице изображения.

Для вставки изображений используется тег . Обязательным для этого тега является атрибут src (от английского SouRCe - источник). Он определяет путь до графического файла, изображение которого должно быть выведено на web-странице.

Для вставки изображения используется команда

Например: " image1.jpg " alt="Картинка" />

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

Графические файлы могут быть в формате jpg, gif, png и обязательно в цветовой модели RGB .

Практическое задание 6

1. После списка площадей домов вставьте в web-страницу изображения проектов коттеджей project _1.jpg и project _2.jpg из папки CD/ html_ css _1 . Для этого сначала скопируйте два этих изображения в ту папку, в которой расположен файл main.html. Код вставки изображений будет выглядеть следующим образом (рисунок 18).

Рисунок 18

2. Просмотрите результат в браузере (рисунок 19).



Рисунок 19

В основном принцип использования тегов HTML должен быть понятен. Они используются по одному и тому же принципу: если тег контейнерный, то есть открывающий и закрывающий тег. Если тег одиночный, то закрывающего тега нет, в этом случает правый слэш пишется до закрывающей угловой скобки, например < br />. Является ли тег контейнерным или одиночным Вы всегда можете посмотреть в спецификации html401_ru.chm в разделе «элементы».

4. Адресация внутри сайта

В нашем первом уроке «Как создать HTML-страницу» мы разберем понятия адресации в HTML.

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

Существует два вида адресации:

• абсолютная;
• относительная.

Абсолютная адресация (с использованием названий дисков компьютера) не используется (рисунок 20)



Рисунок 20

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

Пример 1 Изображение расположено в одной папке с HTML-документом (рисунок 21). То есть изображение и HTML-файл находятся на одном уровне в файловой системе и HTML-документ может сразу присоединить изображение. В этом случае вставка изображения в web-страницу будет выглядеть следующим образом. / > Рисунок 21 Практическое задание 7 Реализуйте пример 1 (создайте папку, файл doc.html, возьмите любое изображение). Изображение

Пример 2 Изображение pic . jpg находится в папке folder _1 . HTML-документ расположен за пределами папки folder_1. Т.е. в файловой системе сайта HTML-документ расположен на один уровень выше, чем изображение (рисунок 22). Необходимо войти в папку folder_1, затем присоединить изображение Рисунок 22 Практическое задание 8 Реализуйте пример 2 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 3 Изображение pic . jpg находится в папке folder _1 , которая в свою очередь лежит в папке folder _2 . HTML-документ расположен за пределами этих папок (рисунок 23). Таким образом, HTML-документ расположен на два уровня выше, чем изображение. Необходимо: войти в папку folder_2, затем войти в папку folder_1, затем присоединить изображение. Рисунок 23 Практическое задание 9 Реализуйте пример 3 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 4 folder _1 . Изображение находится за пределами папки folder_1. Т.е. HTML-документ расположен на один уровень ниже, чем изображение (рисунок 24). Необходимо выйти из папки folder_1, затем присоединить изображение. Выход из папки обозначается конструкцией ../ (две точки и слэш вправо). / > Рисунок 24 Практическое задание 10 Реализуйте пример 4 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 5 HTML-документ находится в папке folder _1 , которая в свою очередь находится в папке folder _2 . Изображение находится за пределами этих папок. Таким образом, HTML-документ расположен на два уровня ниже, чем изображение (рисунок 25). Необходимо: выйти из папки folder_1, выйти из папки folder_2, присоединить изображение. Так как надо выйти два раза, то и конструкция ../ повторяется два раза. / > Рисунок 25 Практическое задание 1 1 Реализуйте пример 5 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 6 (рисунок 26) Необходимо: выйти из папки folder_1, выйти из папки folder_2, зайти в папку folder_3, зайти в папку folder_4, присоединить изображение pic.jpg Рисунок 26 Практическое задание 1 2 Реализуйте пример 6 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 7 (рисунок 27) Необходимо: выйти из папки folder_1, выйти из папки folder_2, выйти из папки folder_3, войти в папку folder_4, присоединить изображение pic.jpg. Так как выйти надо три раза, то и конструкция ../ повторяется три раза. Рисунок 27 Практическое задание 1 3 Реализуйте пример 7 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html. Таким образом, сколько раз надо выйти, столько раз ставим конструкцию../, а если заходим, то перечисляем имена встречающихся на пути папок.

Практическое задание 1 4

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

" ../../../../../../folder_1/folder_2/folder_3/image.jpg " / >

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

В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:

• shablon.html
• main.html
• spisok_vlozh.html
  
• внутри папки myhouse должна быть папка public _ html с файлами будущего сайта
• семь примеров на относительную адресацию и два примера в качестве контрольных из практического задания 14

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

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

Что такое web-страница?

Гипертекстовый документ либо веб-страница представляет собой текстовый файл, размеченный тегами при помощи языка HTML (HyperText Markup Language).

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

К примеру, тег, говорящий браузеру, что ниже находится документ на HTML языке, имеет следующий вид: . А закрывающий, говорящий, что тут код заканчивается, выглядит так: . Таким образом, единственным отличием закрывающего тега от открывающего является наличие слэша после скобки открытия.

Данный язык разметки позволяет форматировать текст web-страницы, устанавливать на ней рисунки, графические элементы, создавать гипертекстовые ссылки, добавлять мультимедийные элементы, звукозаписи, скрипты (VBScript, JavaScript).

Чтобы узнать, что из себя представляет этот язык, вовсе не обязательно лезть в скучные учебники. Мне лично вполне достаточно было открыть мой браузер, и выбрать опцию «Посмотреть исходный код» (нажать правую кнопку мыши). Представленные в окне строчки кода и есть тот самый html-код. Именно этот код браузер в дальнейшем трансформирует в web-страницу.

Виды страниц в Интернете

Существует три типа веб-страниц:

1. Интерактивные . Они включают в себя формы, сформированные на языках VBScript, JavaScript, РНР, при помощи которых сервер обменивается с пользователем данными;
2. Динамические . Они написаны на языке ASP, РНР с разрешениями.aspx, .php. Данные страницы создаются движком либо особой программой, формирующей по пользовательским запросам web-страницу, используя при этом данные с сервера базы данных;
3. Статические . К ним относятся статические файлы (рисунки, таблицы, набор текста и прочее), сформированные на языке разметки HTML.

Как создать?

Для создания веб-страниц используются редакторы html: FCKeditor, TinyMCE WYSIWYG Editor, Macromedia Dreamweaver, Microsoft FrontPage и прочие. Во всех этих редакторах имеется масса различных мастеров, дающих возможность с лёгкостью создавать web-сайты, а также шаблоны для страничек с дизайном и структурой. С их помощью можно быстро создать собственную web-страницу.

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

Инструкция:

1. С помощью текстового редактора создаём файл. Это первое, что необходимо сделать. В блокноте создайте пустой файл под названием index.html. Именно эту страничку сперва ищет сервер, если вы вводите адрес ресурса без указания определённой web-страницы сайта.
2. Сформировать инструкцию. Помещённый между тегами и код должен состоять из двух частей – тела документа и заголовка.
3. Делаем заголовок. Открывающие и закрывающие заголовочную часть теги: и . На этой «служебной» части страницы находятся данные для заголовка окна, описания, слов-ключей для поисковых систем, скриптов, описания стилей и прочее. Между этими словами прописываем заглавие окна страницы с помощью тегов: . Ваша веб-страница к этому моменту должна иметь следующий вид:

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

Итак, код в общем должен иметь следующий вид: