Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
Непарные метки
Не все метки обязательно закрывать, здесь мы рассмотрим какие же теги не надо закрывать.
<BR>
Не прерывая абзаца. Используется если надо перейти на новую строку.
<HR>
Вставляет горизонтальною линию. Цвет этой линии можно менять, но это будит отображаться только в браузере Internet Explorer.
Атрибуты
SIZE - определяет толщину линии в пикселах
WIDTH - определяет длину линии в процентах от ширины экрана или в пикселах.
ALIGN - уже знакомый нам атрибут выравнивания.
COLOR - этот атрибут изучим позже. Определяет цвет линии.
TITLE - определяет текст, который выходит при наведении на эту линию.
&-последовательности
Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак ">" кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем).
Символ "&" (амперсанд) кодируется последовательностью &
Двойные кавычки (") кодируются последовательностью "
Полный набор символов смотрите на странице таблица символов.
Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа " или & не допускается.
Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.
Форматирование шрифта
<B> и </B> выделяет текст жирным шрифтом.
<I> и </I> текст между тегами будит отображаться курсивом.
<U> и </U> подчеркивает текст.
<TT> и </TT> текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.
Логические стили
При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.
<EM>... </EM>
От английского emphasis — акцент.
<STRONG>... </STRONG>
От английского strong emphasis — сильный акцент.
<CODE>... </CODE>
Рекомендуется использовать для фрагментов исходных текстов.
<SAMP>... </SAMP>
От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.
<KBD>... </KBD>
От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.
<VAR>... </VAR>
От английского variable — переменная. Рекомендуется использовать для написания имен переменных.
Вот что мы изучили в этом уроке:
<html> <head> <title>Пример 5</title> </head> <body>
<H1>Шрифтовое выделение фрагментов текста</H1>
<P>Теперь мы знаем, что фрагменты текста можно выделять
<B>жирным</B>, <I>наклонным</I> или <U>подчерктутым</U> шрифтом.
</body> </html>
Урок 3
Ссылки
Ссылки очень важная часть любого сайта, так как именно они делают сайт – сайтом, связывая его отдельные страницы и файлы в одно целое. Что же такое ссылка? Ссылка это, в принципе и есть гипертекст о котором так много говорят. Ссылка осуществляет мгновенный переход к заранее определенному документу, месту в документе, файлу и т.д.
Ссылка осуществляется с помощью тега <A HREF>. Это выглядит так: <a href=“адрес, куда надо осуществить переход”>текст который будит отображаться на экране</a>
Например, мы уже знаем что главная страница называется index.html, значит чтобы перейти из любой другой страницы на главную необходимо набрать следующее <a href=“index.html”> На главную </a> (это в том случае если обе страницы лежат в одной и той же папке, в противном случае надо вписывать и имя папки, к примеру <a href=“info/index.html”>) После нажатия на эту ссылку Вы перейдёте на главную страницу.
Теперь чтобы усвоить выше описанную информацию создадим еще один html документ (следующую страницу Вашего сайта), пускай это будет история (history.html), и добавим туда ссылку на главную страницу Вашего будущего сайта.
На пример:
<html><head><title>История</title>
</head><body>
История моего сайта – я уже начал его создавать!
<a href=“index.html”>А вот это его главная страница</a>
</body> </html>
Добавим в index.html вот такой текст:
<html><head><title>Главная</title>
</head><body>
<H1>Это главная страница моего сайта</H1>
Кому интерестна история моего сайта загляните
<A HREF="history.html">сюда</A><BR>
</body> </html>
Ну а как же сделать ссылку на другой сайт?
Пример:
<A HREF="http://www.bsportal.com.ua/uch-html.html">Изучить HTML</A>,
где http://www.bsportal.com.ua - URL или адрес сайта.
Но ссылки можно делать не только на какие-то определенные документы но и на место в странице. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере.
Допустим, что необходимо осуществить переход из файла 1.html к словам "Переход закончен" в файле 2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.html:
<A NAME="AAA">Переход закончен</A>
Слова "Переход закончен" при этом никак не будут выделены в тексте документа. Затем в файле 1.html (или в любом другом) можно определить переход на этот анкер:
<A HREF="2.html#AAA">Переход к анкеру AAA</A>
Т.е. после адреса страницы, на которую должен быть осуществлен переход, пишется знак "#", а затем анкер, который вы задали. Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2.html — достаточно только включить в него вот такой фрагмент:
<A HREF="#AAA">Переход к анкеру AAA</A>
Анкеры лучше всего писать латинскими буквами, к тому же одинаковыми. Например если Вы поставили анкер AAA то и ссылка должна прописываться как #AAA но не как aaa потому что некоторые браузеры различают маленькие и большие буквы.
Нужно отметить. Для того, чтобы страница, на которую вы хотите осуществить переход открылась в новом окне, нужно использовать атрибут target, который может принимать 4 значения но нас интересует только одно: _blank. Например,
<A target="_blank" HREF="index.html">Главная</A>
Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
<A HREF="ftp://server/winamp.exe">Скачать проигрыватель</A>
Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет скачивание файла winamp.exe, находящегося на сервере server, на локальный диск пользователя.
<A HREF="mailto:[email protected]">Напишите мне</A>
Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Кому") окна почтовой программы будет указано [email protected]
Разберем все, что мы знаем о связывании, с помощью примера
<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY>
<H1>Ссылки </H1>
<P>С помощью ссылок можно переходить к другим файлам (например, к <A target=“_blank”HREF="http://www.bsportal.com.ua/uch-html.html">Изучить HTML</A>).</P>
<P>Можно дать пользователю возможность послать почту (например, <A HREF=" mailto:[email protected]"> автору этого самоучителя</A>).</P>
</BODY>
</HTML>
Изображения в HTML-документе
Вставить картинку в html документ намного проще чем кажется на первый взгляд. Для этого нужно иметь эту картинку в формате *.GIF, или *.jpg или *.jpeg(* - естественно название файла картинки) и написать одну строку на HTMLе.
Допустим, нам нужно включить в документ index.html изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="picture.gif">
Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:
<IMG SRC="picture.gif" ALT="Картинка">
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя (см. раздел о ссылках).
Без атрибутов width - ширина фотографии, height - высота фотографии, не обойтись, если вы хотите уменьшить или увеличить фото. Атрибут border задает ширину рамки вокруг изображения
Разберем все, что мы знаем об изображениях, с помощью примера.
<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY>
<H1>Картинка </H1>
<P>Моя первая картинка в документе: </P>
<P><IMG src="picture.gif" width="100" height="30" border="0" alt="картинка"></P>
<P>Также можно сделать картинку ссылкой:</P>
<P><A HREF="history.html"><IMG src="picture.gif" width="100" height="30" border="1" alt="картинка"> </A></P>
</BODY>
</HTML>
Обратите внимание на вторую часть примера. Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке.
Урок 4
Date: 2015-09-17; view: 303; Нарушение авторских прав; Помощь в написании работы --> СЮДА... |