Итак, в предыдущем уроке мы с вами рассмотрели то, как создать саму html страницу, с прописанными стандартами, форматом, мета-тегами, областью для служебных тегов и областью для контента. Теперь мы начнем рассматривать теги оформления, которые собственно и формируют и придают внешний вид всем сайтам. Так как основная составляющая или основа любого сайта, это преимущественно текст, то и начнем мы именно с оформления текста.
И в данной статье мы рассмотрим такие теги как
- абзацы
- перенос строки
- заголовки
- подчеркивание, выделение, курсив
- контейнер <font> и его базовые свойства
Для того чтоб хорошо закрепить материал данного урока я бы посоветовал все прочитанное одновременно проделывать на практике. Для этого вы можете взять созданную в уроке №1 страницу и между тегами <body>…..</body> вставить какой ни будь текст. Кстати для удобства работы советую пользоваться не стандартным блокнотом, а Notepad++ — так гораздо удобнее.
Для примера я взял кусок не отформатированного текста, который рассказывает об одной лекции по философии, над которым мы сейчас и будем работать. Изначально все выглядит вот таким образом:
И первый тег в нашем списке – это тег <p>.
Тег <p>…. </p> — является парным тегом и позволяет делить текст на абзацы формируя двойной перенос строки. Соответственно <p> ставиться в начале предполагаемого абзаца, а </p> в конце.
Как видите, теперь наш текст поделился на абзацы, между которыми установлен перенос строки. Хотя для этого не обязательно использовать тег <p>, можно использовать <br>
<br> — тег не парный, и используется исключительно для того чтоб выполнить функцию переноса строки. Давайте до и после слов «студенты смеялись» применим этот тег:
Получается тот же самый результат. Разница только в том, что к тегу <p> в будущем можно будет применять css стили для оформления, о которых мы будем говорить позже, а вот к тегу <br> уже ничего подключить не удастся.
Дальше – заголовки. Заголовки в html 4.01 обозначаются тегами <h>.
Тег <h1>….</h1> — парный, и может быть шести видов в зависимости от значения заголовка и его размеров. Самый крупный вид заголовков – <h1>, самый мелкий — <h6>.
Для примера давайте сделаем слово «Лекция» заголовком второго порядка <h2>.
Убираем теги абзаца и прописываем заголовок. Видим, что шрифт выбранного нами слова увеличился, и он стал жирным.
Есть еще три простых тега выделения текста, которые позволяют делать текст жирным, курсивом и подчеркнутым. Все три тега парные – не забывайте об этом.
- <b>……</b> — или же <strong>…</strong> жирный текст
- <em>…..</em> — курсив
- <ins>.…</ins>- подчеркнутый
Теперь смотрим, как это выглядит:
Можно использовать эти теги по отдельности, а можно и вместе как показано на картинке и в коде.
Для того чтоб форматировать текст в html документе нам нужно будет усвоить не только сами теги, которые задают те или иные параметры, но и запомнить несколько базовых тегов которые создают так называемые контейнеры свойства который действуют в средине данного контейнера. Но это сложно – давайте разбираться постепенно.
Теги <font>…. </font> образуют собой контейнер, внутри которого текст, будет подчиняться указанным нам свойствам. Сам по себе тег, в том виде котором он написан сейчас ни несет никакой функциональности, то есть на внешний вид текста абсолютно не влияет. Для того чтоб его действие стало заметным ему нужно задать свойства следующим образом:
<font face=”verdana” size=”3” color=”#000000” >…. </font>
Теперь давайте разбираться что эти свойства значат:
- Face – свойство которое задает шрифт текста, самые распространенные на сегодня шрифты это Verdana, Tahoma, Arial и другие.
- Size – размер шрифта, можно задавать числами от 1 до 7 – это заранее предусмотренные размеры шрифтов. А можно задавать значение в пикселях в виде size=”15px”
- Color – задает цвет текста, может указываться как в виде кода шестизначного кода типа #00000 так и в виде основных цветов red, grean и так далее.
Теперь давайте применим контейнер font со свойствами для нашего текста. Берем произвольно:
<p><font size=»3″ face=»Tahoma» color=»grean»>Профессор философии, перед лекцией заходит в зал и раскладывает на столе несколько различных вещей. Когда начинаются занятия, он, молча, берет большую, пустую, банку и заполняет ее большими камнями.Затем спрашивает: Банка была полна? Да! – соглашаются студенты.</p></font>
В результате проведения всех вышеперечисленных работ у нас получается следующая страничка: index В качестве шпаргалки можете использовать ее, и ее исходный код (в браузере это ctrl+U)
Читайте так же статьи:
- HTML для начинающих. Урок №1
- Новая рубрика на сайте – основные теги html и css
- Оптимизация HTML сайта своими руками
- Становимся журналистами в интернете. Заработок на рерайте и копирайте
- Яндекс — сказки на ночь
