Главная Карта сайта Учебник HTML
Введение Что такое HTML язык Редактируем текст Параграфы Заголовки Цвет Стиль текста Шрифт.. Полезные советы Графические изображения Таблицы Ссылки И ещё… Фреймы Навигационные карты Списки Meta теги
Учебник CSS Справочник Публикация сайта Форум От автора

Глава 2

Редактируем текст на своей странице..

Вы наверняка не раз печатали документы в текстовых редакторах, так вот.. что можно сделать с текстом в том же Word, то же можно сделать и с текстом на нашей страничке.

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

Параграф.

Начну с тега <p> </p> - это параграф. Параграф имеет атрибут align "выравнивание" который в свою очередь может быть равен тому ли иному значению.

Рассмотрим на примерах:

С помощью параграфа можно расположить наш текст по центру:

<p align="center">Привет мир!!!</p>

По левому краю:

<p align="left"> Привет мир!!!</p>

По правому краю:

<p align="right"> Привет мир!!!</p>

Или же обоим краям документа:

<p align="justify"> Привет мир!!! - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>

Давайте слегка изменим нашу первую страничку:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
<p align="center">Привет мир!!!</p>
<br>
<p align="justify">
Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</p>
</body>
</html>

Так уже лучше не правда ли?

Запомним некоторые вещи:

1) Тег <p> </p> не может содержать в себе других параграфов, то есть писать вот так:

<p>
<p>
</p>
</p>

Нельзя!

2) Так же, нельзя писать пустые теги без текста или других тегов.

<p> здесь, что-то обязательно должно быть!!!</p>

3) Тег <p> </p> подразумевает в себе перенос строки, если это Вам не нужно, пишите так:

<center>Привет мир!!!</center>

4) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо параграф можно не указывать.

5) Альтернативой тегу <p></p> в данном случае может служить тег <div></div>

<div align="center">Привет мир!!!</div>
<div align="left">Привет мир!!!</div>
<div align="right">Привет мир!!!</div>
<div align="justify">Привет мир!!!</div>

Все тоже самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p></p> по принципу:

<div>
<p align="left"> Пишем слева</p>
<p align="right"> Пишем справа </p>
</div>

Заголовки

В наборе тегов html языка имеется шесть типов заголовков:

<h1> Привет мир!!! </h1>

<h2> Привет мир!!! </h2>

<h3> Привет мир!!! </h3>

<h4> Привет мир!!! </h4>

<h5> Привет мир!!! </h5>
<h6> Привет мир!!! </h6>

Думаю с этим понятно.. <hx> </hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести)

Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст?

Знакомимся тег <font></font> в переводе на русский - "шрифт".

Тег <font></font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size - размер.

Пишется и выглядит это так:

<font size="+4">Привет мир!!!</font>
<font size="+2">Привет мир!!!</font>
<font size="+0">Привет мир!!!</font>
<font size="-1">Привет мир!!! </font>
<font size="-2">Привет мир!!!</font>

Добавим эти теги на нашу страницу.

<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<center><h2>Привет мир!!!</h2></center>
<br>
<p align="justify">
<font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font>
</p>
</body>
</html>

Попробуйте поэкспериментировать с размерами шрифта и заголовком, подставьте свои значения, измените расположение тегов..

Цвет

Для придания страничке красивого вида не обойтись без палитры с красками..

В html языке используется своя палитра красок. Вот основные цвета, выглядят они так:

#000000
black
#ffffff
white
#ff0000
red
#ffa500
orange
#ffff00
yellow
#008000
green
#00ffff
cyan
#0000ff
blue
#800080
purple

Полная палитра базовых красок приведена здесь.

Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB - например #008000 - зелёный цвет, либо используя константы цвета - green (для тех кто учил французский, green -зелёный.)

Краски есть, давайте рисовать!

Мы уже знакомы с тегом <font></font> у него есть еще один атрибут - color.

Так вот, если к примеру написать так:

<font color="#ff0000">Привет мир!!!</font> - То цвет шрифта станет красным. Попробуйте..

А можно так:

<font color="red">Привет мир!!!</font> - Будет тоже самое..

Но советую писать всё же шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых, поговаривают, что не все браузеры знают названия тех или иных красок…

Есть еще один способ изменить цвет текста. Тег <body></body> "тело" - имеет атрибут text - "текст" если присудить этому атрибуту любой цвет из доступной палитры то весь текст в нашей странице окрасится, кроме тех мест, где мы "принудительно" указали другой цвет.

В строчке где стоит открывающий тег <body> пишем так:

<body text="#ff8c40 ">

Теперь весь текст у нас стал оранжевым кроме заголовка "Привет мир!!!" который мы отдельно перекрасили в красный.

А вот атрибут тега <body> bgcolor и его значение задает цвет фона страницы

<body bgcolor="#40caff"> - залили всё голубым..

Раскрасьте свою страницу на свой лад.. пробуйте, экспериментируйте!

Сейчас Вам нужно понять принцип построения html кода иначе рано или поздно станете в тупик.. конечно, я и дальше буду выкладывать готовые примеры, но нет ничего лучше чем самостоятельная практика.

На данный момент у меня получилось вот так: .. а у Вас?

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text="#484800" bgcolor="#e8e8e8">
<center>
<h2>
<font color="#008000">Привет мир!!!</font>
</h2>
</center>
<p align="justify">
<font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>

Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text="#ff207b" bgcolor="#1a77f0"> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками..

Стиль текста

Здесь все достаточно просто..

Итак, новые теги:

<b> </b>- Полужирный текст
<i> </i>- Наклонный текст
<u> </u>- Подчеркнутый текст
<strike> </strike>- Перечеркнутый
<s> </s>- Перечеркнутый (второй вариант, от первого ничем не отличается)
<tt> </tt>- моноширинный шрифт
<small> </small>- Малый
<big> </big>- Большой
<sup> </sup>- Верхний индекс
<sub> </sub>- Нижний индекс

Ну думаю понятно.. текст заключённый между этими открывающими и закрывающими тегами приобретёт нужный нам стиль.

Вот пример на всякий случай…

<html>
<head>
<title>Стили текста</title>
</head>
<body>
<big><b><u>Научная статья.</u></b></big>
<br>
<br>
Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>- водка.</i>
<br>
Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ.</tt>
<br>
<br>
<br>
<small>Распитие спиртных напитков вредит вашему здоровью.</small>
</body>
</html>

Шрифт

Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face - лицо то бишь..

Пишется так:

<font face="arial">Эта строчка будет написана с помощью шрифта Arial</font>

Пример:

<html>
<head>
<title>Использование различных шрифтов</title>
</head>
<body>
<font face="arial">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
<font face="times new roman">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
<font face="comic sans ms">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
</body>
</html>

Здесь необходимо отметить, что браузер использует библиотеку шрифтов, установленную на компьютере пользователя, и если вдруг указанного Вами шрифта в этой библиотеке не окажется, то он заменит его на тот который присутствует. Следовательно, чтобы не ударить face(ом) в грязь, не стоит указывать какие-то "экзотические" нестандартные шрифты, так как супер модный шрифт на компьютере Вашего друга сильно рискует превратится в обыкновенный.

Полезные советы:

  • Писать странички в блокноте конечно можно, но я Вам настоятельно рекомендую воспользоваться полноценным HTML редактором, благо их на рынке программного обеспечения великое множество. Я не буду давать их подробное описание, скажу лишь что они, как правило, несут в себе одинаковые стандартные наборы инструментов и отличаются друг от друга пожалуй только интерфейсом.. сравнивать их не берусь, так как они носят исключительно характер привычки пользования веб мастером тем или иным редактором html кода.

    Расскажу про основные плюсы использования подобного редактора.

    • Как правило, html редакторы имеют два окна, в одном Вы пишите код, а во втором сразу видите результат написанного! То есть теперь Вам не придётся постоянно сохранять текущий результат, чтобы открыть его браузером и оценить написанное.
    • Как правило, они содержат в себе стандартные наборы шаблонов кода, в который Вы просто подставляете свою информацию, избавляя себя от прописывания тегов.
    • Ну и "общие" удобства - сохранить, открыть, редактировать сразу несколько страниц сайта перелистывая их… много короче разных полезных штук.. одна подсветка синтаксиса чего стоит!

    P.S. Однако, дальше буду писать эту книгу подразумевая, что Вы тренируетесь в стандартном блокноте… иначе мы друг друга не поймём.

  • Немного об этике и здоровье глаз..

    Если создаваемый Вами сайт его дизайн и назначение не требуют обратного, то советую избегать следующих вещей: Использовать яркие контрастные цвета фона и шрифта. Поверьте, когда у человека начинают слезиться глаза от чтения такой страницы, он резко теряет к ней интерес. Это же касается и размеров текста. Не стоит использовать огромные заголовки, впрочем, как и содержание малюсенькими буквами - это напрягает, ищите золотую середину..

<<< ^^^ >>>
Главная >> Учебник html >> | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |