Студопедия

КАТЕГОРИИ:

АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника


Организация текста внутри документа, связывание, изображения




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

Здесь мы рассмотрим те, которые используются часто.
Теги, делающие текст заголовками

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

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

Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:

  • left - слева,
  • right - справа,
  • center - по центру,
  • jastify - по ширине.

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

<h1>Это заголовок первого уровня</h1>

<h2>Это заголовок второго уровня</h2>

<h3>Это заголовок третьего уровня</h3>

<h4 align="right">Это заголовок четвертого уровня</h4>

<h5 align="center">Это заголовок пятого уровня</h5>

<h6 align="jastify">Это заголовок шестого уровня</h6>

Это просто текст

</body>

</html>

В окне браузера это будет выглядеть так:

Теги разделения на абзацы и переноса строки

Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен. В отличии от тега <br> абзацы отделяются друг от друга пустой строкой.

У тега <p> есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра:

  • left - слева,
  • right - справа,
  • center - по центру,
  • jastify - по ширине.

Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

<p align="left">Это абзац, он отделен от всего текста

пустыми строками сверху и снизу и выровнен

по левому краю.</p>

<p align="right">Это абзац, он отделен от всего текста

пустыми строками сверху и снизу и выровнен

по правому краю.</p>

 

<p align="center">Это абзац, он отделен от всего текста

пустыми строками сверху и снизу и выровнен

по центру.</p>

Это просто текст. <br> Это текст с новой строки.

</body>

</html>

В окне браузера это будет выглядеть так:

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

В окне браузера это будет выглядеть так:

Теги, выделяющие текст подчеркиванием
<ins></ins>
<u></u>
Оба используются для подчеркивания важных фрагментов текста, но предпочтительнее использовать первый.

 

В окне браузера это будет выглядеть так:

Тег font и его параметры

Теги <font></font> указывают параметры шрифта текста:
face - название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.
size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.
color - цвет текста (по умолчанию - черный).

Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.

С именными цветами (их 156) все просто, смотрим в соответствующую таблицу, выбираем понравившийся цвет и пишем его имя в значение параметра (например, color="blue").

Но гораздо больший выбор предоставляет второй способ. Здесь мы можем выбирать из миллиона цветов, указав его шестнадцатеричный код. Этот код представляет собой 6 цифр и начинается с символа "#". Не будем вдаваться в подробности, как формируется код цвета, укажем лишь на то, что получить его можно, например, в программе Photoshop.
Пример кода:

<html>

<head>

<title>Форматирование html</title>

</head>

<body>

Это простой текст.<br>

<font face="Verdana" size=5 color="red">

Этот текст красный, размера 5.

</font><br>

<font face="Arial" size=2 color="blue">

Этот текст синий, размера 2.

</font>

</body>

</html>

 

В окне браузера это будет выглядеть так:

Совместное использование тегов

Мы рассмотрели основные теги форматирования текста, но что если вам необходимо сделать какое-нибудь слово в тексте жирным красным курсивом? Для этого вам придется применить теги strong, font и em вместе. Здесь главное соблюдать порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним.
Понятнее будет на примере:
Выделим слово "текст" красным цветом:

<font color="red">Текст</font>
Теперь добавим теги курсива (открывающий - слева, закрывающий - справа):

<em><font color="red">Текст</font></em>

А теперь - теги полужирного начертания:

<strong><em><font color="red">Текст</font></em></strong>

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

Изображения

Для того, чтобы вставить какое-либо изображение, картинку, фотографию на страницу сайта, следует использовать тег <img>, имеющий единственный обязательный атрибут src, который определяет адрес файла с изображением.

Общая конструкция выглядит вот так:

<img src="Название изображения.jpg">

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

Гипперссылки.

Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:

<a href="page2.htm">Щёлкните здесь для перехода на page 2</a>
Поделиться:

Дата добавления: 2015-09-15; просмотров: 62; Мы поможем в написании вашей работы!; Нарушение авторских прав





lektsii.com - Лекции.Ком - 2014-2024 год. (0.007 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты