Задание 1. Создание простейших файлов HTML
Чтобы создать свой файл HTML, сделайте следующее:
Создайте папку HTML , в которой мы будем сохранять созданные Web-страницы.
Запустите стандартную программу Блокнот (Notepad).
Наберите в окне редактора простейший текст файла HTML:
Расписание занятий на вторник
Сохраните файл под именем RASP.HTM.
Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.
Откройте в меню броузера Файл (File) , Открыть (Open) , Просмотр (Обзор - Browse ) и найдите в папке KURS файл RASP.HTM и загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.
Задание 2. Управление расположением текста на экране
Информация.
При отображении HTML-документов броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущие подряд пробелов.
При необходимости выполните п.п. 5-6 задания 1.
Откройте первоисточник Web-страницы – в меню броузера Вид (View) , Источник (В виде HTML) откроется окно со стандартной программой Блокнот (Notepad), в котором ваша Web-страница представлена в командах HTML.
Внесите изменения в текст файла HTML, расположив слова "Расписание", "занятий", "на вторник" на разных строках:
Расписание
занятий
на вторник
Сохраните внесенные изменения в файле RASP.HTM, с помощью командФайл (File) , Сохранить (Save) . Закройте программу Блокнот (Notepad).
Просмотрите с помощью броузераMicrosoft Internet Explorerновую полученнуюWeb-страницу используя клавишуF5 или с помощью командВид (View) , Обновить (Refresh). Изменилось ли изображение текста на экране?
Примечание
В дальнейшем после внесения изменений в Web-страницу всегда выполняйте п.п.4-5.
Задание 3. Тэги перевода строки и абзаца
Информация.
Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тэг
перевода строки
отделяет
строку от последующего текста или
графики. Тэг абзаца
Тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзаца. Оба тэга являются одноэлементными.
Внесите изменения в текст файла HTML:
Расписание
занятий
на вторник
4. Сохраните внесенные изменения в файлеRASP.HTM.
Просмотрите с помощью броузераMicrosoft Internet Explorerновую полученнуюWeb-страницу.Как изменилось изображение текста на экране?
Задание 4. Выделение фрагментов текста
Информация.
Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:
… для выделения полужирным ,
… для выделения курсивом,
… для выделения подчеркиванием .
Расписание занятий на вторник
2. Посмотрите новую полученную Web-страницу.
Возможно использование комбинированных шрифтов:
Расписание занятий на вторник
Но при этом необходимо помнить следующее правило записи комбинированных тэгов:
|
<Тэг-1> <Тэг-2> … Тэг-2 > |
ошибочная запись |
Задание 5. Использование стилей заголовка
Информация.
Существует два способа управления размером текста, изображаемого броузером:
использование стилей заголовка,
задание размера основного документа или размера текущего шрифта.
Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки броузера. Стиль Н1 – самый крупный.
Внесите изменения в файл RASP.HTM:
Расписание
занятий
на вторник
Посмотрите новую полученную Web-страницу.
Задание 5. Задание размера текущего шрифта.
Информация.
Тэг шрифта позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.
Внесите изменения в файл RASP.HTM:
Расписание
занятий на вторник
Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тэг .
Измените текст HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.
Задание 6. Гарнитура и цвет шрифта
Информация.
Тэг предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать .
Для изменения цвета шрифта в тэге можно использовать атрибут COLOR="X" .
Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие:
красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF.
Примеры записи цвета в формате RGB приведены в таблице:
Таблица 1
|
Цвет |
Цвет | ||||
|
фиолетовый | |||||
|
коричневый | |||||
|
оранжевый | |||||
|
бирюзовый | |||||
Внесите изменения в файл RASP.HTM:
Расписание >
занятий на вторник
Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.
Задание 7. Выравнивание текста по горизонтали
Информация.
С помощью тэгов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле (см. Рис.2).
Современные броузеры для выравнивания текста используется атрибут ALIGN= , который встраивается в теги абзаца или заголовка.
Внесите изменения в файл RASP.HTM:
Расписание>
занятий на вторник
Задание 8. Задание цвета фона и текста
Информация.
При
изображении фона, текста броузеры
используют цвета, установленные по
умолчанию, - они заданы параметрами
настройки броузера. Эти цвета
устанавливаются в начале файла HTML в
тэге
Внесите изменения в файл RASP.HTM:
Расписание>
занятий на вторник
Задание 9.
Проведите экспериментальную работу с созданным документом. Меняя размеры окна, посмотрите, как броузер показывает текст с принудительным разрывом строк. Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?
Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях.
Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.
В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше.
Как создать страничку
Первую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.
Откройте документ.
Вставьте в него вот этот код.
<html
>
<head
>
<title
>
Моя первая страница</
title
>
</
head
>
<body
>
<center
></ h1 > <br / ><center > <font style = "color:red" > </ font > <br / > <b > </ b > <br / > Мы дошли до самого низа <br / > Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br / > <hr > К примеру, вот ссылка на мой блог - <a href = "https://сайт/" > Start-Luck</ a > - рассказывает просто о "сложном". <br / > <br / > </ body > </ html > |
Создать страницу проще, чем вы думаете
Простой код позволяет сделать текст красным
Написать жирным не намного сложнее
Мы дошли до самого низа
Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино..
Ну вот и все. Ваша первая страница готова
Файл нужно назвать index.html . Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.
Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.
Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.
Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center » и вставим строчку, в которой содержится слово «Color ». Кстати, я уже писал. Это очень просто, рекомендую к прочтению.
Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5
Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: .
Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.
Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на , который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение.
Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.
Теги
С вашего позволения я перейду в программу NotePad++. Она обладает целым рядом преимуществ в сравнении с обычным блокнотом. Сейчас мне очень пригодится подсветка тегов, чтобы показывать вам те элементы, о которых я буду рассказывать. Вообще, если вы собираетесь, изучать html, то я очень рекомендую установить эту бесплатную программу.
Она не единственная и я могу предложить вам еще несколько если кого-то заинтересуют альтернативы. Мы же перейдем к теоретической части.
Основные
Начинается и заканчивается страница с тегов . Они показывают браузеру, что это веб-документ, созданный при помощи html.
Далее идет или заголовок. В ней располагается самая важная информация о странице, в нашем случае – . Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.
Именно теги
Тег
указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style
, как мы это делали в примере. Хотя об этом тоже рановато.
Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к . Помимо h1, существуют еще и h2, h3,h4.
В этой же строчке есть открывающийся и закрывающийся
— один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.
Картинка
Далее идет тег img , то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.
Первым делом идет alt , то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title . При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.
Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку.
В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.
Форматирование текста
отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.
помогает выделить текст жирным.
рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете
несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере.
Ссылки
указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес” . В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег .
После того как основная часть страницы написана, вы закрываете тег body , так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html .
Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html ». Всего 33 урока помогут вам выйти на новый уровень.
Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup
Помимо этого заберите Бесплатную книгу по созданию сайтов ! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.
Сегодня вы сделали много, ведь первый шаг самый сложный.
Подписывайтесь на рассылку и группу ВКонтакте , и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое.
До новых встреч и удачи!
Разработка 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-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.
Заголовок Web-страницы заключается в контейнер
и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером ).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
Название страницы помещается в контейнер
Отображаемое в браузере содержание страницы помещается в контейнер
(рис. 6.26):<ТITLE>Компьютер
Компьютер и ПО
 |
| Рис. 6.26. Заготовка Web-страницы "Компьютер" |
Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
Контрольные вопросы
1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?
6.10. Практическое задание. Создать заготовку Web-страницы "Компьютер" и просмотреть ее в браузере.
Форматирование текста на Web-странице
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.
Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1> (самый крупный) до <Н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">Компьютер и ПО
Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга
.
Абзацы. Разделение текста на абзацы производится с помощью контейнера <Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.
Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта "Компьютер" текст, разбитый на абзацы с различным выравниванием:
<Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
<Р ALIGN= "right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
Таким образом, домашняя страница сайта "Компьютер" будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27):
<Н1 ALIGN="center">
Компьютер и ПО
<Р ALIGN="left">Ha этом сайте...
<Р ALIGN ="right"> Терминологический словарь
...
 |
| Рис. 6.27. Web-страница "Компьютер" с отформатированным текстом |
Контрольные вопросы
1. Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Ввода абзацев?
Задания для самостоятельного выполнения
6.11. Практическое задание. Создать Web-страницу "Компьютер" с отформатированным текстом и просмотреть ее в браузере.
Вставка изображений в Web-страницы
На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.
Вставка изображений.
Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:
Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
На домашней странице сайта "Компьютер" логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28):
 |
| Рис. 6.28. Вставка изображения в Web-страницу "Компьютер" |
Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.
Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
Контрольные вопросы
1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?
Задания для самостоятельного выполнения
6.12. Практическое задание. Вставить в Web-страницу "Компьютер" изображение и просмотреть ее в браузере.
Гиперссылки на Web-страницах
Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:
Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:
<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылки
Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.
- к просмотру изображения в браузере:
<А HREF="picture.jpg">Изображение - к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла:
<А HREF="sound.wav">Звук - к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов:
<А HREF="Apxив.ziр">Скачать файл
Панель навигации по сайту. Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания:
<ТITLЕ>Заголовок страницы
На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.
Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:
<Р ALIGN="center">
[<А HREF="software . htm">Программы]
[Словарь]
[Комплектующие]
[Aнкетa]
Гиперссылка на адрес электронной почты. Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер
, который задает стиль абзаца, принятый для указания адреса:<А HREF="mailto:[email protected]">E-mail:
[email protected]
Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому будет указан заданный в ссылке адрес.
Итак, созданная домашняя страница Web-сайта "Компьютер" содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).
 |
| Рис. 6.29. Готовая домашняя страница сайта "Компьютер" |
Контрольные вопросы
1. Какой тэг и его атрибуты используются для создания гиперссылок?
Задания для самостоятельного выполнения
6.13. Практическое задание. Создать Web-страницу "Компьютер", содержащую панель гиперссылок на другие страницы сайта, и просмотреть ее в браузере.
Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
- нумерованные списки, когда элементы списка идентифицируются с помощью чисел;
- маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров);
- списки определений, позволяющие составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
Нумерованные списки. Нумерованный список располагается внутри контейнера
- можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР.:
- и определений, которые следуют за одинарными тэгами
- .
Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов (рис. 6.31):
- Центральное устройство компьютера, производящее обработку информации в двоичном коде.
Оперативная память
- Устройство, в котором хранятся программы и данные.
- Устройство, в котором хранятся программы и данные.
Процессор
Контрольные вопросы
1. Какие тэги используются для создания нумерованных списков? Маркированных списков?
Задания для самостоятельного выполнения
6.14. Практическое задание. Создать Web-страницу "Программы" с нумерованным списком и вложенным маркированным списком.
6.15. Практическое задание. Создать Web-страницу "Словарь" со списком терминов.
Любая Web-страница должна начинаться с тега , а заканчиваться его закрывающим близнецом . Структурно Web-страница разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами и , а тело документа обозначается тегами и
Итак, для начала создайте новую папку и назовите ее, к примеру, "Мой сайт ". Затем откройте программу "Блокнот" и наберите в нем следующий HTML-код:
Выбираем в "Блокноте": "Файл" - "Сохранить как..." , задаем имя index.html и сохраняем в нашу папку "Мой сайт ". Посмотрим, что у нас получилось. Результат
Теперь разберем то, что мы набирали:
Указывает программе просмотра страниц что это HTML-документ
- определяет место, где помещается различная информация не отображаемая в теле документа (тег ). Здесь располагается тег названия документа и теги для поисковых машин
- в этом теге указывается заголовок страницы
- определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты)2. Изменяем цвета фона и текста
Теперь попробуем изменить цвета фона и текста. Для этого отредактируем наш файлик index.html . Кликаем по нему правой кнопкой мыши и выбираем:
"Открыть с помощью" - "Блокнот"Вносим следующие изменения:
Результат
Посмотрим, что нового у нас появилось в нашем html-коде:
Параметры тега - text и bgcolor :
text - устанавливает цвет текста документа, используя значение цвета в виде RRGGBB (пример: 000000 - черный цвет), либо используя константы цвета, например для черного цвета, используемой в нашем уроке
bgcolor - устанавливает цвет фона документа, используя значение цвета в виде RRGGBB (пример: FF0000 - красный цвет), либо используя константы цвета, например для красного цвета, используемой в нашем урокеТеги
и :
- (BReak line) устанавливает перевод строки в том месте, где этот тег находится.
*не требует парного закрывающего тега
- представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура
Параметр color - устанавливает цвет текстаДля установки выравнивания текста обычно используется тег параграфа с параметром align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега
с аналогичным параметром align
Текст Добавляет новый параграф, по умолчанию выровненный по левому краю. Перед параграфом и после него автоматически добавляются небольшие вертикальные отступы. Текст Выравнивание по центру Текст Выравнивание по левому краю Текст Выравнивание по правому краю align="justify">
ТекстВыравнивание по ширине Текст Текст Отключает автоматический перенос строк, даже если текст шире окна браузера align="center">Текст
Выравнивание по центру align="left">Текст
Выравнивание по левому краю align="right">Текст
Выравнивание по правому краю align="justify">Текст
Выравнивание по ширине * По умолчанию текст выравнивается по левому краю.
Отличие между параграфом (тег ) и тегом
в том, что в начале и в конце параграфа появляется вертикальный отступ, чего нет в случае использования тега
Давайте попробуем разместить текст по центру при помощи тега параграфа . Вносим изменения в index.html
Результат
Думаю, что теперь принцип выравнивания текста Вам понят. Попробуйте поэкспериментировать с тегами, которые указаны в этом уроке в таблице выше.
Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованные и ненумерованные. В нумерованных списках каждый пункт обозначен некоторым номером. У ненумерованных списков пункты выделяются при помощи графических маркеров. Списки также разделяют на одноуровневые и многоуровневые. В одноуровневых списках все элементы равноценны. А в многоуровневых каждый элемент может содержать еще несколько пунктов, которые организуют новый список, вложенный в исходный элемент. Может быть, звучит несколько туманно, но единожды увидев это на примере, уже ни с чем нельзя будет спутать.
Итак, начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом и его закрывающим близнецом . Отдельные элементы списка объявляются при помощи обозначающего тега , который не имеет закрывающей пары. Точнее, закрывающий тег может применяться, но он необязателен.
Давайте создадим еще одну html-страничку. Для этого опять откроем "Блокнот" и внесем туда следующий HTML-код:
Списки
Mapкированный список
Первый пункт списка
Второй пункт списка
Третий пункт спискаСохраним файл как spiski.html в папке "Мой сайт ".
Посмотрим, что у нас получилось Результат(Unordered List) - тег служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида. Требуется закрывающий тег
Атрибуты:
type - При помощи параметра type мы имеем возможность явно указывать, какой тип маркера следует использовать для отображения элементов списка. В качестве значений данного параметра применяется одно из трех предустановленных ключевых слов:
title - Всплывающая подсказка при наведении курсора на список.
(List Item) - тег служит для обозначения элемента (строки) списка. Используется в нумерованных() и ненумерованных() списках
Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается при помощи тегов и . А элементы списка объявляются при помощи все того же тега
- . Рассмотрим пример создания простейшего нумерованного списка и увидим, как его обрабатывает и отображает браузер. Немного отредактируем нашу страничку spiski.html , внеся туда следующие изменения:
Списки
Mapкированный список
- Первый пункт списка
- Второй пункт списка
- Третий пункт списка
Нумерованный список
Первый пункт списка
Второй пункт списка
Третий пункт спискаРезультат
В теге атрибут type имеет следующие типы маркеров:
1 Нумерации обычными арабскими цифрами (по умолчанию) A Обозначение элементов списка при помощи символов латинского алфавита верхнего регистра (заглавные буквы). Нумерация идет по алфавитному порядку, начиная от A до Z a Обозначение элементов списка при помощи символов латинского алфавита нижнего регистра (маленькие буквы). Нумерация идет по алфавитному порядку, начиная от a до z I Устанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться латинские символы верхнего регистра i создает нумерацию при помощи римских цифр, которые будут состоять из символов латинского алфавита нижнего регистра * Параметр type с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр type с соответствующим значением разрешено указывать в теге элемента списка
Пример записи:
Примечание:
Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента.Давайте еще рассмотрим теги:
- служит для создания списка определений
и - являются описанием списка определений.Опять редактируем нашу страничку spiski.html :
Результат
Давайте вернемся к нашей страничке index.html и попробуем вставить в нее изображение. Делается это при помощи тега
с обязательным параметром scr (от source - источник ), в котором указывается адрес картинки (место, где она находится).
Создайте в папке "Мой сайт " еще одну папку и назовите ее "picture ". Теперь, сохраните в нее эту картинку:
Открываем папку "picture " и видим, что наша картинка носит имя kartinka и имеет расширение .jpg
Приступаем к редактированию index.html
Результат
Тег - выравнивание изображения по центру. Также, могут быть использованы теги:
Выравнивание по левому краю
- выравнивание по правому краюРазберем параметры тега
, которые мы использовали в данном примере:
src="picture/kartinka.jpg"
- здесь мы указали адрес нашего изображения, т.е. место, где находится наша картинка.Устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
А теперь перечислим все параметры тега
. align - определяет как рисунок будет выравниваться по краю и способ обтекания текстом. Может принимать следующие значения:
bottom - выравнивание нижней границы изображения по окружающему тексту
left - выравнивает изображение по левому краю окна
right - выравнивает изображение по правому краю окна
middle - выравнивание середины изображения по базовой линии текущей строки
top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
. alt - альтернативный текст для изображения
. border - толщина рамки вокруг изображения. Указывается в пикселях.
Пример: border="1"
. width - ширина изображения. Указывается в пикселях или процентах.
Пример: в пикселях - width="155" , в процентах - width="100%"
. height - высота изображения. Указывается в пикселях или процентах.
Пример: в пикселях - height="155" , в процентах - height="100%"
. hspace - горизонтальный отступ от изображения до окружающего контента. Указывается в пикселя
Пример: hspace="5"
. vspace - вертикальный отступ от изображения до окружающего контента. Указывается в пикселя
Пример: vspace="5"
. ismap - сообщает браузеру, что картинка является серверной картой-изображением. Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
. lowsrc - путь к графическому файлу низкого разрешения для предварительного отображения
. src - путь к графическому файлу
Ссылки (или гиперссылки) позволяют щелчком кнопки мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Ссылки применяются в большинстве существующих страниц. Они могут быть текстовыми и графическими. Текстовые ссылки представляют собой выделенное слово или целую фразу. Выделение ссылки производится цветом или подчеркиванием, в зависимости от настройки браузера.
В языке HTML структуры текстовых и графических ссылок подобны друг другу. Все они задаются тегом с параметром href , которому соответствует закрывающий тег . В ссылке сначала указывается имя файла, на который она ссылается, а затем текст или имя графического файла, содержащего изображение ссылки. Кроме простых графических ссылок, можно создать так называемую графическую карту ссылок: картинку с «горячими областями», щелчок на которых приводит к срабатыванию соответствующих ссылок.
Давайте попробуем создать на странице index.html ссылку на вторую страничку spiski.html . Для этого добавим следующий html-код (редактируем index.html ):
Результат
Чтобы создать графическую ссылку, необходимо между тегами и вствить изображение. Приведем пример на нашей картинке. Ссылка будет выглядить следующим образом:
Рассмотрим параметр target , который может принимать следующие значения:
Blank - загружает страницу в новое окно браузера
Self - загружает страницу в текущее окно
Parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self
Top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self
* По умолчанию используется _self
Основы языка гипертекстовой разметки документов
Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из Web-страниц.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.
Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницы в том виде, который задается тэгами.
Основными достоинствами HTML-документов являются:
· малый информационный объем;
· возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Рассмотрим, как создаются Web-сайты, на примере разработки тематического сайта «Компьютер». Сначала необходимо разработать проект сайта, то есть определить, какова будет их тематика и как они будут связаны между собой.
Пусть наш сайт кроме титульной страницы «Компьютер» будет содержать:
· страницу «Программы», содержащую классификацию программного обеспечения;
· страницу «Словарь», содержащую словарь компьютерных терминов;
· страницу «Комплектующие» с ценами на устройства компьютера;
· страницу «Анкета», содержащую анкету для посетителей сайта.
Форматирование текста и размещение графики
1. Открыть окно текстового редактора Блокнот.
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется контейнером ). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут обозначаться как прописными, так и строчными буквами.
Тэги и атрибуты Обозначения HTML-код страницы помещается внутрь данного контейнера без них браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание. Заголовок Web-страницы заключается в данный контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения. Название Web-страницы содержится в данном контейнере и отражается в строке заголовка браузера при просмотре страницы. Основное содержание страницы помещается в данный контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и так далее. Назовем нашу Web-страницу «Компьютер» и поместим для начала на страницу текст «Все о компьютере». Компьютер Все о компьютереСозданную Web-страницу сохранить в виде файла в своей папке. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.htm. Для этого в поле Имя файла вместо * набрать имя index, а после точки расширение txt заменит на htm или html. Значок файла будет содержать значок браузера Internet Explorer. Не закрывать. Загрузить файл index.htm в окно браузера для просмотра (для этого открыть файл с помощью программы Internet Explorer). Не закрывать. Для удобства работы можно окна уменьшить и расположить их рядом. Теперь научимся форматировать текст. Размер шрифта задается с помощью данных тэгов (от (самый крупный) до
(самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом.
Компьютер Все о компьютере
Отредактировать текст в Блокноте, сохранить и просмотреть в Internet Explorer, для этого не забудьте обновить окно командой Вид - Обновить. (данные команды повторяйте после каждого этапа редактирования)ALIGN Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания для тэга заголовка позволяет заданный атрибут, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN=”right”, а по центру - ALIGN=”center ”. Компьютер Все о компьютере
- Центральное устройство компьютера, производящее обработку информации в двоичном коде.
< LI >Системные программы
< LI >Прикладные программы
< LI >Системы программирования
Маркированные списки. Маркированный список располагается внутри контейнера , а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга
- можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):
< LI >текстовые редакторы;
< LI >графические редакторы;
< LI >электронные таблицы;
< LI >системы управления базами- данных.
На Web-страницу "Программы" поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.
Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).
Список определений. Список определений располагается внутри контейнера
- /
- . Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами