КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Организация текста внутри документа, связывание, изображения
Для форматирования текста существует много тегов. Одни их них используются часто (и их вы быстро запомните), другие - редко (их и не надо запоминать).
Здесь мы рассмотрим те, которые используются часто.
Теги, делающие текст заголовками
<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; просмотров: 143; Мы поможем в написании вашей работы!; Нарушение авторских прав |