Языки программирования и технологии для веб-разработки. Учебное пособие "Создание Web-страниц средствами языка HTML" Веб страницы создаются на языке

28.05.2021

МИНИСТЕРСТВО ОБРАЗОВАНИЯ МОСКОВСКОЙ ОБЛАСТИ

ГБПОУ МО «ПАВЛОВО-ПОСАДСКИЙ ТЕХНИКУМ»

ПО ВЫПОЛНЕНИЮ КУРСОВОЙ РАБОТЫ

По дисциплине

«Курсовая на тему Web-Дизайн и программы для создания web-страниц»

По специальности 230701

«Прикладная информатика в экономике» 4 курс

Преподаватель: Г.Е

Рассмотрен цикловой методической комиссией

Социально-экономического профиля

Протокол№от «»20г.

Предсидатель цикловой комиссии Мишина Е.Н.

2016-2017 уч. год

Введение

1. World Wide Web3

1.1. Распространение World Wide Web в Internet. 5

2.. Создание Web-страницы с помощью языка HTML5

2.1. Язык HTML 5

2.2. Структура HTML документа5

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

3. Программы для создания Web-страниц8

3.1 HTML-редакторы8

3.2 Графические редакторы13

3.3 Технология Flesh13

4. Создание WEB-страниц в WORD12

4.1 Способы создания WEB-страниц в WORD12

4.2 Создание маркированных и нумерованных списков13

4.3 Горизонтальные линии13

4.4 Добавление фона13

4.5 Работа с таблицами13

4.6 Работа с рисунками13

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

4.8 Вставка видеозаписи в Web-страницу14

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

1. World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

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

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

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

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

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

1.1. Распространение World Wide Web в Internet .

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

Так что же такое World Wide Web, или, как говорят в просторечии, WWW, the Web, или еще более простое - 3W? WWW - это распределенная информационная система мультимедиа, основанная на гипертексте. Давайте разберем это определение по порядку.

Распределенная информационная система: информация сохраняется на великом множестве так называемых WWW-серверов (servers). То есть компьютеров, на которые установленное специальное программное обеспечение, которое объединенные в сеть Internet. Пользователи, которые имеют доступ к сети, получают эту информацию с помощью программ-клиентов, программ просмотра WWW-документов. При этом программа просмотра посылает по компьютерной сети запрос серверу, который сохраняет файл с необходимым документом. В ответ на запрос сервер высылает программе просмотра этот необходимый файл или сообщение об отказе, если файл по тем или иным причинам недоступен. Взаимодействие клиент-сервер происходит по определенным правилам, или, как говорят иначе, протоколам. Протокол, принятый в WWW, называется HyperText Transfer Protocol, сокращенно - HTTP.

Мультимедиа: информация включает в себя не только текст, но и двух- и трехмерную графику, видео и звук.

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

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

Итак, Web-страница может содержать стилизованный и форматованый текст, графику и гиперсвязи с разными ресурсами Internet. Чтобы реализовать все эти возможности, был разработанный специальный язык, названная HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы Просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра. О языке HTML будет детально рассказано в следующем разделе, поскольку без знания основ этого языка невозможно создать Web-страницу для публикации в WWW.

Создание Web-страницы с помощью языка HTML

Язык HTML

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

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

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

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.

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

В HTML документе стартовым тегом является тег , а завершающим - .

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

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

1) Объявление HTML

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

2) Заголовочная часть.

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

Моя первая страница

3) Тело документа.

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

Моя первая страница......................................

Теперь мы можем написать HTML-код нашей странички:

Моя первая страница!

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

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

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

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

(англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя атрибута="значение". Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег

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

Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:

Моя первая страница

Здесь будут мои личные страницы!

На них Вы сможете найти:- рассказ обо мне и о моих увлечениях;- мои фотографии.

С одной из моих страниц можно будет отправить мне электронное письмо.

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

Например:

Это текст написан в две строки.

В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег может содержать несколько атрибутов. и дают контурную линию с трехмерным эффектом углубления. дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселов. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега, но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину линии в пикселах от 1 до 175; по умолчанию 1, но если, (линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления. Линии, наряду с абзацами, позволяют выделить логические фрагменты текста. Но большое количество горизонтальных линий неприятно для посетителя вашей Веб-страницы, поэтому после каждого абзаца их ставить не следует. Они больше подходят для выделения целых разделов.

Web-страница может содержать текст, графику и гиперсвязи с разными ресурсами Интернет. Чтобы реализовать все эти возможности, был разработанный специальный язык, названная Hyper Text Markup Language (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра.

Обычно HTML-документ - это файл с расширением.html или. htm, в котором текст размечен HTML-тегами. Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Web-документа. Текст самих тегов Web-браузером не отображается.

Все теги начинаются символом "<" и заканчиваются символом ">". Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег, между которыми помещается размечаемая информация:

HTML - стандартный язык разметки гипертекстовых документов

Здесь стартовым тегом является тег

А завершающим -

. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ "/" (слэш).

Объявление HTML

Заголовок

Тело документа

Рассмотрим каждый из пунктов в отдельности:

Объявление HTML

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

Заголовок

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

О лощадях

Тело документа

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

О лошадях ... .

Из всего вышесказанного, можем написать код HTML странички:

О лошадях Содержание моих станиц

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

Каскадные таблицы стилей CSS

Предположим, вам нужно изменить цвет текста в HTML-сайте с черного на синий, для этого вам придется менять цвет фона на каждой страницы вашего сайта, но есть более простое решение этой проблемы. Можно воспользоваться каскадными таблицами стилей или по-другому - CSS (Cascading Style Sheets).

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

Итак, CSS используется создателями Web-страниц для задания цвета, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS).html используется для структурирования содержимого страницы, а CSS - для форматирования этого структурированного содержимого.

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

CSS при отображении страницы может быть взята из различных источников:

Внешних таблиц стилей, то есть отдельного файла. css, на который делается ссылка в документе.

Встроенных стилей - блоков CSS внутри самого HTML-документа.

Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.

Пользовательские стили: локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.

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

Описания стилей находятся в тегах и размешаются между тегами .

Если Вы располагаете стили в отдельном файле, тогда между тегами каждого HTML документа нужно добавить ссылку на CSS файл:

Default. css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS.

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

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

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

Браузер — это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам.

Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы.

С помощью команд — тегов , HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например «p», «h1», «table» .

Срочно нужен интернет-магазин, а времени на изучение 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-страницу в Блокноте, хоть и немного невзрачную, но уже содержащую большой заголовок и абзац текста, который автоматически разбивается на строки и содержит фрагмент, выделенный полужирным шрифтом.

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

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

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

Тег HTML — это обычные слова и символы, заключенные в угловые скобки, например «h1», «p», «body». Так тег «h1» является открывающим тегом, тег «/h1» закрывающим тегом, а текст между ними называется содержимым тега.

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

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

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

Далее идет , который создает на HTML-странице абзац. Содержимое данного тега станет текстом этого абзаца. Элемент «p» также является блочным элементом и как мы видим он начинается с новой строки и между заголовком h1 и абзацем есть отступ.

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

Данный тег «strong» вложен внутрь содержимого тега «p». Это значит, что содержимое тега strong будет отображаться как часть абзаца. Такие вложенные теги называются дочерними , а теги в которые вложены другие теги называются родительскими . Таким образом, тег «strong» является дочерним, а тег «p» — родительским. Такая вложенность тегов встречается в HTML сплошь и рядом.

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

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

Вы могли заметить, что открывающий тег «h1» кроме названия содержит еще какой-то текст: align="center". Это атрибут тега , который задает его параметры. Каждый атрибут имеет имя, после которого идет знак =, и далее идет его значение взятое в кавычки:

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

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

Структура WEB — страницы. Основные html теги.

Для корректного отображения страницы в браузере, в html-коде обязательно наличие следующих парных тегов: html, head и body .

Во-первых весь ваш html-код должен быть заключен в теги «html» и «/html». Они сообщают браузеру, что страница содержит html-код.

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

Тело документа выделяется с помощью тегов «body» и «/body». Сюда помещается весь контент страницы, то что будет отображаться в браузере.

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

Метаданные html страницы

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

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

Следующий метатег «meta» сообщает браузеру кодировку нашего документа. В данном случае мы создали нашу web-страницу в кодировке utf-8. Информацию о кодировке мы передали браузеру с помощью атрибута «content» тега «meta».

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

Тип HTML документа (doctype)

Осталось рассмотреть один тег нашей первой WEB-страницы, который находится в самом начале html-кода: «!doctype html». Данный тег задает версию языка HTML, на котором написана страница, и его версию.

Он необходим, чтобы браузер понимал согласно какому стандарту отображать веб-страницу. , и они различаются в зависимости от версии языка, на котором написан html-код. Так, наш тег !doctype html указывает на версию языка HTML5.

Итак, подведем итоги:

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

2. HTML — это язык , который используется для создания web-страниц. HTML — это аббревиатура HyperText Markup Language (язык гипертекстовой разметки).

3. WEB-страницы состоят из html-тегов и их содержимого. Теги состоят из символов и имени внутри них. Имена тегов можно писать как прописными(большими), так и строчными(маленькими) буквами. Между символами и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк. Теги бывают парные и одиночные , а также теги могут быть вложенными друг в друга.

4. Открывающий тег + содержимое + закрывающий тег образуют элемент . Бывают также элементы состоящие из одного открывающего тега. В HTML есть блочные элементы и строчные . Блочные элементы всегда выводятся с новой строки и имеют отступ сверху и снизу от соседних элементов. Строчные элементы осуществляют логическое форматирование текста.

Курс «Создание Web-страниц средствами языка HTM L »

Тема 1. Начальные сведения о языке HTML

Назначение языка HTML

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

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

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

Язык HTML появился одновременно со службой Worl d Wide Web и развивался вместе с ней. Он является основой Worl d Wide Web и одновременно причиной ее широчайшей популярности.

HTML - файл

HTML - файл – текстовый файл, имеющий расширение .htm или . html Web -страница хранится в виде HTML - файла. Для создания HTML - файла могут использоваться как простые текстовые редакторы, такие как Блокнот или Word Pad , так и редакторы Web.

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

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

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

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

Сам текст документа располагается в теле документа . Тело документа располагается между тегами и BODY >. На практике определить место положения этих основных тегов можно и при их отсутствии. Поэтому, если теги, и , а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Но всё-таки при создании Web-страниц опускать эти теги не рекомендуется.

Простейший правильный документ HTML.

< HEAD >

< TITLE >Заголовок документа TITLE >

HEAD >

< BODY >

BODY >

Теги HTML

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

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

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

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

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

Например, < HTML > HTML >, < P > P >, H 3>

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

Например,
, ,

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

Пример.

Пример создания таблицы

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

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

Атрибуты тегов

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

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

Атрибуты могут иметь значения, записываемые после знака равенства (=). Всегда полезно заключать значение атрибута в кавычки (одинарные либо двойные). Строка в кавычках не должна содержать такие же кавычки внутри себя. Можно опускать кавычки для значений атрибутов, которые состоят только из следующих символов:

символов английского алфавита;

промежутков времени;
дефисов (-).

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

символов английского алфавита (A - Z , a - z )

цифр (0 - 9 )

промежутков времени

дефисов (- )

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER" .
Закрывающие теги не содержат атрибутов.

Примеры. FONT >

Комментарии

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

Принцип наследования тегов

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

<начало 2-го тега>

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<начало 3-го тега>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<Конец 3-го тега>

<Конец 2-го тега>

<Конец 1-го тега>

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

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

Практическая работа № 1

«Создание простейшей Web -страницы»

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

Указания к выполнению

Наберите в нём структуру HTML -документа, которая приведена ниже:

О братьях наших меньших.

Здесь будет размещено содержание Web-страницы

Сохраните файл, присвоив ему имя index .htm .

Откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне браузера.

Закройте браузер.

Вернитесь к сохранённому в Блокноте файлу.

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

В строке < TITLE > укажите: «Домашняя страничка (ваше имя и фамилия)».

Сохраните файл как page 2.htm .

Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи Блокнота.

Тема 2. Теги HTML

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

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

Рассмотрим более подробно стандартные элементы языка HTML, позволяющие форматировать текст.

Шрифт - это таблицы замены кода видимым изображением.
Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:

Arial

Ариал

Courier New

Курьер Нью

Comic Sans

Комик Санс

Times New Roman

Таймс Нью Роман

Verdana

Вердана

Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf. Как в HTML придать шрифту тот или иной вид?
< FONT >… FONT > определение типа, размера и цвета шрифта . Все эти характеристики определяются при помощи соответствующих атрибутов.

Абсолютный размер шрифта задается атрибутом si ze (размер) . Этот атрибут может принимать значения от 1 до 7, при этом шрифт 1-го размера - самый маленький, а 7-го – самый большой.
Примеры.

текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5

текст размера 6
текст размера 7

Тише едешь – дальше будешьONT >.
В дизайне обычно используются первые четыре размера. Все, что выше, дурной тон и признак дилетантства, ибо занимает слишком много места и трудно читается. Правда, и большим размерам находится применение. Например, седьмым размером можно писать буквицу (первую букву начала главы): Т екст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это атрибутом face (вид).

Примеры. Это шрифт arial размером 3 ONT >
текст FONT >
Как видим, э ти два атрибута - размер и вид шрифта, - можно расположить в любой последовательности в теге :
Можно также использовать атрибут color (цвет). Название цвета задается либо числом, написанным в шестнадцатеричной системе, например, co lor=”#ff 0000”, либо просто его названием, написанным на английском языке, например, color =”red ”.Примеры. Это шрифт синего цвета FONT >
Это шрифт arial размером 3, цвет синий FONT >
Шрифт так же может быть: наклонный (курсив), жирный, подчеркнутый, перечеркнутый, надстрочный, подстрочный, а также сочетающий в себе несколько указанных видов. Достигается это, соответственно, тегами:
 текст I >
текст B >
 текст U >
< S > текст S >
< SUP > текст SUP >
< SUB > текст SUB >,
а также их сочетанием, например, текст U >B >
Форматирование абзаца. В большинстве обычных документов основными функциональными разделами являются заголовки и абзацы. Web -документы не являются исключением. Для обозначения обычных абзацев в языке HTML используют тег

…P > (Paragraph ). Причем, можно использовать только начальный тег, так как следующий элемент

обозначает не только начало следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег.
Вместе с тегом абзаца можно использовать и атрибут align (выравнивание) :
align =”left ” – выравнивание по левому краю;
align =”right ” - выравнивание по правому краю;
align =”center ” - выравнивание по центру.
Пример.

Глава 1P >

АнимацияP >

стр. 3P >

В языке HTML нет средств для создания абзацного отступа (”красной строки”), поэтому для удобочитаемости текста между абзацами броузер обычно вводит пустую строку. Если нужно осуществить переход на новую строку без создания абзаца, используется одиночный тег
. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки. Этот тег удобно использовать, чтобы, например, писать стихи в столбик:
Уронили мишку на пол,
Оторвали мишке лапу,
Все равно его не брошу,
Потому, что он хороший.
На экране браузера мы увидим стандартным образом написанное четверостишие.

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

Выравнивание

align = “left”

align = “ center”

align = “ right ”

align = “ justify ”

Толщина и длина линии в пикселях.

Size = 3(ширина в пикселях)

width= 300 (длина в пикселях)

width= 100% (длина в процентах)

Цвет линии

color =”red ”

Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от

…

до

…

.
Заголовок первого уровня самый крупный, а шестого уровня – самый мелкий. Для заголовков можно использовать атрибуты выравнивания влево, по центру, вправо.
Пример. Самый большой заголовок
Самый маленький заголовок

Домашние животные

Логическое форматирование текста . В данном пункте мы рассмотрим теги, по своему эффекту очень напоминающие теги, задающие размер, цвет и начертание шрифта. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может по разному отображаться в разных браузерах, но какой-то эффект гарантирован даже в том случае, когда по какой-то причине нет возможности применить шрифтовые эффекты. Все эти теги парные и воздействуют на текст, заключенный между открывающим и закрывающим тегами. Закрывающий тег обязателен.
Тег … используется для цитат, названий книг. Обычно изображается курсивом.
Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними.
Тег < CODE >… CODE > указывает на исходный текст компьютерной программы, обычно отображается моноширинным шрифтом (чаще всего шрифт Courier), то есть шрифтом с фиксированным размером.
Тег < KBD >… KBD > оформляет текст, который должен быть (или был) введен с помощью клавиатуры, обычно отображается моноширинным полужирным шрифтом. От английского keyboard - клавиатура
Пример.

Для запуска Windows наберите: win .
Код :
Для запуска Windows наберите: win
Тег … отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом.
Пример.
Это обычный текст
Тег … используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского var iable – переменная.
Пример .
A , B , C
Код:
A , B , C var >

Тег … EM > используется для выделения элементов текста (обычно курсивом).
Тег < STRONG >… STRONG > используется для более сильного выделения элементов текста (полужирным шрифтом).
Пример.
Это обычный текст
А это уже текст с использованием тега .
Так как здесь используется смысловое выделение вместо оформительского, рекомендуется использовать эти теги вместо тегов и < B >.

Практическая работа № 2

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

Цель: научиться форматировать шрифт и текст на Web -странице.

Указания к выполнению

В элементе < TITLE > укажите название странички “П/р № 2”.

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

Домашние животные

(заголовок H 1)

(выравнивание по центру)

Собаки

(заголовок H 2)

(выравнивание по центру)

Сторожевые

(выравнивание слева, полужирный шрифт)

Охотничьи

(выравнивание справа, полужирный шрифт)

Дрессировка

(выравнивание по центру, полужирный курсив)

Клубы Выставки Площадки

(выравнивание по центру, размер шрифта 10, цвет шрифта красный, шрифт Arial )

Стихотворение

(цвет шрифта синий, размер шрифта 6, выравнивание по центру)

По жизни я скромен,

Оваций не надо,

Но как же я классно

Смотрюсь у снаряда!

(выравнивание по левому краю, размер шрифта 6)

Создание списков

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

Теги создания ненумерованного списка:

< LI > UL >
Тег

является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Тег
обозначает каждый из пунктов.
Пример.
Вид на экране:
Теги создания нумерованного списка: < O L> < LI > OL >

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