Для какой цели был создан язык html. HTML: основы для начинающих
Здравствуйте уважаемые начинающие веб-мастера. Начинаем изучать языки программирования.
И начнём мы их изучать с html.
Сразу скажу, что в конце курса Вы уже сможете самостоятельно написать сайт на чистом html, и выложить его в интернет. Но я всё же порекомендую не торопиться, и после html, познакомиться с css.
Тогда и сайт Вы сделаете покруче, и сможете исправлять внешний вид сайта, созданного на готовой CMS(система управления контентом).
Изучение языка программирования, и изучение иностранного языка — это далеко не одно и тоже, и оно гораздо легче. Более того, это не страшно, а очень увлекательно.
Просто непонятное всегда пугает, но я вам обещаю, что после первых же занятий, пройдут все страхи.
Учиться мы будем при помощи редактора , который Вам нужно установить на свой компьютер.
В этом редакторе файлов, можно написать код, и тут-же посмотреть, как отобразит его браузер. Очень удобно.
Давайте, сначала я Вам немного расскажу, что из себя представляет HTML, и это будет скучная часть нашего курса, а затем займёмся интереснейшей практикой. Там уж, точно, скучно не будет.
НТМL (HyperText Markup Language) дословно — язык разметки гипертекста. С помощью его создаются веб-страницы.
И если, совокупность просто страниц, объединённых одной тематикой, в нашем понимании — книга, или даже, лучше сказать, толстый журнал, то совокупность веб-страниц объединённых одним доменным именем — это и есть сайт.
Каждая веб-страница имеет свой уникальный текст, написанный Вами, и заключенный в html-код.
Код — это команды браузеру, как отображать тот или иной элемент. Допустим, написали Вы слово, а вот в каком виде оно будет на экране, зависит от того, в какой код вы его заключите.
Код html состоит из следующих элементов:
2. Атрибуты тегов.
3. Значения атрибутов.
Давайте рассмотрим их по порядку.
Тег html — это основной элемент кода. Пишется он так:
Как видите, состоит он из двух частей. Первые угловые скобки — это открывающая часть, а вторые, со слешем — закрывающая.
Между этими двумя частями, пишется весь остальной код страницы, которая будет отображаться на экране.
Тег сообщает браузеру, что это html-документ, и является основным (родительским) тегом для всех остальных элементов.
В остальных тегах, элементах кода, в угловых скобках пишется буква, или слово, которое будет являться названием тега и определит, какой элемент будет этим тегом выведен на экран.
Например, если поставить в угловых скобках букву h1
, то на экране выведется текст в виде заголовка.
Здравствуйте
То есть шрифт слова «Здравствуйте», будет крупнее и жирнее остального текста.
Если в угловые скобки поставить букву p
, то текст заключённый в тег, будет выведен в виде абзаца.
Здравствуйте
То есть, шрифт будет обычный, но всё, что написано после этого тега, будет начинаться с новой строки.
И таких букв, и даже слов, определяющих вид команды, в html несколько десятков, хотя в частом использовании находятся не больше 10-15 тегов.
Более подробно, каждый из них, мы рассмотрим по ходу
Следующие — это атрибуты тегов. Часто используемых, тоже не более десятка. А в последнее время и того меньше, так как все функции атрибутов перенесены в css.
Но об этом попозже, а пока всё же узнаем, что такое атрибут, так как некоторые из них не потеряли актуальности и не потеряют никогда.
Атрибут — это дополнительная команда. Пишется он в открывающей части тега. Например, захочется вам сделать заголовок цветным, тогда в открывающую часть тега h1
, нужно вставить атрибут color
И сразу переходим к значениям атрибутов. Дело в том, что атрибут обязательно должен быть со значением. То есть, дали вы команду, что заголовок должен быть цветным, значит нужно указать, какой будет цвет.
Это указание и будет значением атрибута. Выглядит оно так:
Это красный цвет.
Точно так же, но при помощи других атрибутов, можно задавать размер текста, отступы, выравнивания, и много чего ещё.
Хотя, оформление всё больше переходит к CSS, а атрибуты оформления постепенно устаревают и выходят из практики.
А сейчас делаем вывод из всего вышесказанного:
Язык HTML — это язык, который понимают браузеры. Нам он необходим для того, чтоб общаться с браузером, или можно сказать, управлять им, то есть давать ему команды на то, как воспринимать и отображать на экране то, что мы напишем.
Хочу добавить, что теги, атрибуты, и их значения, легко запоминаются во время практических занятий, чем и будут по сути все последующие статьи.
Там сразу видишь тег, узнаёшь его значение, в каком случае и каком месте он применяется, какими знаками сопровождается, и как пишется, так что сейчас я не буду показывать Вам все теги и атрибуты, увидим всё на практике.
Полный список тегов и атрибутов 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 пикселов + толщина рамки. Таким образом, вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".
Цель:
научиться создавать 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
>
текст
I
> <
B
>текст
B
> <
U
>
текст
U
> <
S
>
текст S
> <
SUP
>
текст
SUP
> <
SUB
>
текст SUB
>,
а также их сочетанием, например, <U
> текст
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
>…
EM
>
используется для выделения элементов текста (обычно курсивом). Тег <
STRONG
>…
STRONG
>
используется для более сильного выделения элементов текста (полужирным шрифтом). Пример. Это обычный текст А это уже текст с использованием тега . Так как здесь используется смысловое выделение вместо оформительского, рекомендуется использовать эти теги вместо тегов и <
B
>.
Практическая работа № 2
“Форматирование текста на Web-странице”
Цель:
научиться форматировать шрифт и текст на Web
-странице.
Указания к выполнению
В элементе <
TITLE
>
укажите название странички “П/р № 2”.
Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке.
Домашние животные
(заголовок
H
1)
(выравнивание по центру)
Собаки
(заголовок
H
2)
(выравнивание по центру)
Сторожевые
(выравнивание слева, полужирный шрифт)
Охотничьи
(выравнивание справа, полужирный шрифт)
Дрессировка
(выравнивание по центру, полужирный курсив)
Клубы Выставки Площадки
(выравнивание по центру, размер шрифта 10, цвет шрифта красный, шрифт
Arial
)
Стихотворение
(цвет шрифта синий, размер шрифта 6, выравнивание по центру)
По жизни я скромен,
Оваций не надо,
Но как же я классно
Смотрюсь у снаряда!
(выравнивание по левому краю, размер шрифта 6)
Создание списков
Маркированные списки.
Список отличается от обычного текста тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый вид.
Теги создания ненумерованного списка:
<
LI
>
UL
> Тег
является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Тег
обозначает каждый из пунктов.
Пример.
Пункт 1 списка Пункт 2 списка Пункт 3 списка
Вид на экране:
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
Теги создания нумерованного списка: <
O
L> <
LI
>
OL
>
Нумерованные списки.
Структура нумерованного списка похожа на структуру ненумерованного списка. Только для обрамления используется тег
. Каждый пункт нумеруется арабскими или римскими числами, буквами латинского алфавита.
Пример.
Пункт 1 списка Пункт 2 списка Пункт 3 списка O
L>
Вид на экране:
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
Способ нумерации задается при помощи атрибута type
. В таблице приведены все способы нумерации:
Вид нумерации
Практическая работа № 3
«Создание нумерованных и ненумерованных списков»
Цель
:
научиться создавать списки на Web
–страницах.
Указания к выполнению
:
1
. Создайте новую Web
–страницу в редакторе Блокнот.
2
. В элементе
укажите названия странички «П/р № 3».
3
. Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке:
Солнце должно быть:
(Шрифт размером 8, красного цвета,
выравнивание по центру)
1. Теплым.
2. Круглым.
3. Желтым.
Снег должен быть:
(Шрифт размером 6, синего цвета,
выравнивание по центру)
В. Холодным.
С. Пушистым.
(Шрифт обоих списков черный, размер 3).
Гиперссылки Виды гиперссылок.
<
A
>…
A
>
создание гипертекстовой ссылки. В этом теге обязателен атрибут href
.
Его значением является адрес URL, на который указывает ссылка. Текст ссылки размещают между тегами <
A
>…
A
>.
При отображении документа в браузере текст ссылки обычно подчеркивается и изображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу URL.
Можно выделить несколько видов гиперссылок.
Внешние (связывают Web-страницу с документами, не принадлежащими данному Web-узлу).
Внутренние (связывают документы внутри одного и того же Web-узла).
Относительный путь.
Если гиперссылка внутренняя, то указывается только та часть
URL
, которая отличается у двух связываемых документов (так называемыйотносительный путь
),
например, если два документа находятся в одной папке, то достаточно указать имя файла, на который указывает гиперссылка. Если документы находятся в разных папках, то сначала указывается имя папки, затем имя файла, на который указывает гиперссылка.
Указание почтового адреса в гиперссылке
. Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например, Иванов АлексейA
>
Цель:
научиться связывать два HTML
–документа с помощью гиперссылок.
Указания к выполнению:
Создайте две Web
–страницы в редакторе Блокнот. Одну назовите page
1.htm
, вторую page
2.htm
. Обе странички сохраните в одной папке под названием site
. Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчной буквы.
В элементе
укажите названия странички «П/р № 4. Задание 1».
На страницу 2
На страницу 1
Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно.
Задание 2.
Создание гиперссылок.
Цель:
научиться связывать три HTML
–документа с помощью гиперссылок.
Выполнить второе задание вы можете, если успешно справились с Заданием 1.
Создайте третью страничку page
3.htm
.
На страничке page
3.htm
создайте гиперссылки для перехода на странички page
1.htm
и page
2.htm
.
На страничках page
1.htm
и page
2.htm
добавьте гиперссылку для перехода на страничку page
3.htm
.
Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных.
Задание 3.
Цвет гиперссылок.
Цель:
научиться определять цвет гиперссылок.
Выполнить задание вы можете, если успешно справились с Заданием 2.
На страничках page
1.htm
, page
2.htm
и page
3.htm
в тэге
определите цвет гиперссылок:
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что цвет гиперссылок задан верно.
Рисунки на
Web
-странице.
Иллюстрации (рисунки, фотографии) играют важнейшую роль в оформлении Web
-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML
, но отображаются браузером внутри. Для этого служит одиночный тег <
IMG
>.
Обязательным атрибутом этого тега является атрибут src
, значением которого является путь к файлу с рисунком или фотографией,
Если картинка лежит в той же папке, что и Web
-страница, то путь представляет собой просто имя файла, например: . Если картинка лежит в другой папке, то эту папку надо указать, например: . Если картинка лежит на другом сайте, то путь прописывается полностью: .
В теге можно также использовать такие атрибуты, как: height
,
width
– задают высоту и ширину области, в которой демонстрируется рисунок. Если задан только один из этих атрибутов, то второй размер устанавливается в соответствующей пропорции. Но нужно помнить, что масштабирование ухудшает качество изображения. Размер рисунка измеряется в пикселях или в процентах, например: , border
–
задаёт толщину рамки вокруг картинки (в пикселях). Этот атрибут можно не задавать, так как, по умолчанию, рамка вокруг картинки есть всегда. Но, если вы хотите её убрать, то выставляйте значение атрибута border равным нулю, bordercolor
– задаёт цвет рамки вокруг картинки, например: < IMG
src="picture.gif" border="3" bordercolor="#CC0000"> В нашем примере цвет рамки задан красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки, align –
выравнивание картинки относительно других объектов: картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа, картинка - справа, текст - слева.
Текст может располагаться также внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3): (1) - (2) - (3) -
vspace
- задает расстояние между текстом и рисунком (по вертикали): , hspace
- задает расстояние между текстом и рисунком (по горизонтали):
<
imgsrc="
pr1.
png"
hspace="30"> Расстояние задается в пикселях.
С помощью тега можно использовать изображения в гиперссылках, вставлять картинки в таблицы, решать задачи дизайна…
Практическая работа № 5
«Использование рисунка в качестве гиперссылки»
Цель
: научиться использовать рисунок в качестве гиперссылки.
На страничках page
1.htm
, page
2.htm
и page
3.htm
вместо текстовых гиперссылок используйте рисунки. Для этого:
откройте папку, указанную учителем (в папке находятся файлы с изображением цветных кнопок), вставьте на первую страничку изображение голубой кнопки и создайте гиперссылку для перехода на вторую страницу:
Самостоятельно вставьте изображение оранжевой кнопки для перехода с первой страницы на третью;
Задайте бордюр обоих изображений равным 2;
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки работают верно.
Самостоятельно вставьте изображения кнопок на страницы page
2.htm
и page
3.htm
и задайте соответствующие гиперссылки.
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страничках работают верно.
Альтернативный текст.
Web-страница может отображаться браузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст, который задается в теге <
IMG> атрибутом
alt
(или
title
),
этот атрибут выводит текст в месте расположения картинки во время её загрузки. Например:
Использование рисунка в качестве фона
. Если вы хотите использовать рисунок в качестве фона странички (“обоев”), то в теге
используем этот атрибут с указанием адреса картинки. Например: .
Фреймы
Размещение нескольких документов на одной Web-странице.
Язык HTML
позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами.
Чем отличается структура документа HTML
, содержащего фреймы, от обычного документа HTML
? Такой документ не содержит раздела «тела» документа и не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов и названия документов, загружаемых в отдельные области. <
FRAMESET
>…
FRAMESET
>
тегописания фреймов. Между тегами <
FRAMESET
>…FRAMESET
> содержится описание размеров и порядка размещения областей в окне броузера, а также задаются документы, которые должны загружаться в каждую из этих областей. Тег