Редактируем текст

Параграфы
Заголовки
Цвет
Стиль текста
Шрифт..
Отформатированный
текст
Полезные советы
Рисунки
Таблицы
Ссылки
И ещё…
Фреймы
Навигационные карты
Списки
Meta теги
Заголовок <!DOCTYPE>
И снова таблицы..
Фоновая музыка
Текст - логика и физика
Учебник CSS
Учебник CSS 3
Публикация сайта
Раскрутка сайта
Справочник
Уроки
Форум
Новости
От автора
Дочка спрашивает маму:
- А кто этот страшный,
волосатый дядя с
красными глазами?
- Это твой папа..
- А он что заболел?
- Нет, к интернету
подключился
Г лава 2
Редактируем текст на
своей странице..
В ы наверняка не раз печатали
документы в текстовых редакторах,
так вот.. что можно сделать с
текстом в том же Word, то же
можно сделать и с текстом на
нашей страничке.
В этой главе я расскажу о том, как
изменить шрифт и его размер, как
сделать текст жирным, курсивом,
подчёркнутым и о том как его
выравнивать по краям или центру
документа.
Параграф.
Я думаю, Вы знаете, что такое
параграф.. это такой кусочек текста,
одно или несколько предложений,
который в книгах обычно
печатается с новой строки, тем
самым, выделяя этот текст из
основной массы, Книгу разбитую на
параграфы легко читать, потому
что, как правило, одному параграфу
соответствует одна мысль или
логическая часть текста.
Т ак вот, для того чтобы на
странице сайта разбить текст на
параграфы, необходимо
воспользоваться тегом <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>
Н ельзя! - это нелогично, как
может один параграф содержать в
себе другой?
2) Так же, нельзя писать пустые
теги без текста или других тегов.
<p> здесь, что-то обязательно
должно быть!!!</p>
3) По умолчанию Ваш текст
выравнивается браузером по
левому краю, так что если Вам так
и надо атрибут align="left" для
параграфа можно не указывать.
4) Тег <p> подразумевает в себе
перенос строки, если это Вам не
нужно, используйте вместо тега
<p> тег <div> данный тег
является альтернативой тегу <p>
пишется так:
<div align="center">Привет мир!!!
</div>
<div align="left">Привет мир!!!</
div>
<div align="right">Привет мир!!!</
div>
<div align="justify">Привет мир!!!
</div>
В се то же самое, только данный
тег не будет переносить текст на
следующую строку и в него можно
вставлять тег <p> по принципу:
<div>
<p align="left">Пишем слева</
p>
<p align="right">Пишем
справа</p>
</div>
А вообще тег <div>
многофункциональный.. и по своей
сути он является пустым блоком-
контейнером, который может
содержать в себе как текст, так и
другие теги.. в общем, хочу сказать,
что работа с текстом это далеко не
основная задача тега <div> , но об
остальных возможностях данного
тега мы поговорим позже..
5) Еще одним способом
выравнивания текста по центру
является использование тега
<center> любое содержание взятое
в данный тег выравнивается по
центру экрана. Пишется так:
<center>Привет мир!!!</center>
Заголовки
В наборе тегов html языка
имеется шесть типов заголовков:
<h1> Привет
мир!!! </h1>
<h2> Привет мир!!! </
h2>
<h3> Привет мир!!! </h3>
<h4> Привет мир!!! </h4>
<h5> Привет мир!!! </h5>
<h6> Привет мир!!! </h6>
Д умаю с этим понятно.. <hx> тег
заголовка, где значение x является
величиной буковок (может быть от
одного до шести). Помните, что
после использования того или
иного заголовка происходит
перенос строки - на то он и
заголовок.
З аголовки дело хорошее и
достаточно удобное, но ими можно
выделять только маленькие кусочки
текста, а что если нам надо
выделить весь текст?
З накомимся тег <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> у
него есть еще один атрибут -
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(ом) в грязь, не
стоит указывать какие-то
"экзотические" нестандартные
шрифты, так как супер модный
шрифт на компьютере Вашего
друга сильно рискует превратиться
в обыкновенный.
Предварительно
отформатированный текст.
Е сли Вы обратили внимание, а
если не обратили то знайте, что в
браузерах текст набранный с
помощью текстовых редакторов
проходит "обработку" перед
выводом его на экран компьютера.
Так в набранном Вами тексте
удаляются все переносы строк и
лишние пробелы, пробелов между
словами или просто символами
может быть не более одного.
П роводится данная "обработка",
для того чтобы на мониторах с
разным расширением экрана текст
переносился на следующую строку
в тех местах где это действительно
необходимо, а не там где были
раннее расставлены пробелы и
переносы строк.
О днако такая политика браузеров,
в ряде случаев, не всегда
оправданна.. Как например,
написать стихи? Нет можно
конечно после каждой строчки
писать тег <br> , но есть вариант
куда проще..
З накомимся тег <pre> , текст
заключённый в данный тег
выводится браузерами на экран в
том виде в котором он был набран,
т.е. со всеми пробелами и
переносами строк
П ример:
<html>
<head>
<title>Пробелы и перенос
строки</title>
</head>
<body>
<pre>
СЛОН.
Дали туфельки слону.
Взял он туфельку одну
И сказал: - Нужны пошире,
И не две, а все четыре!
С. Я. Маршак.
</pre>
</body>
</html>
смотреть пример
Т акие вот дела..
Полезные советы:
П исать странички в блокноте
конечно можно, но я Вам
настоятельно рекомендую
воспользоваться полноценным
HTML редактором, благо их на
рынке программного обеспечения
великое множество. Я не буду
давать их подробное описание,
скажу лишь что они, как правило,
несут в себе одинаковые
стандартные наборы инструментов
и отличаются друг от друга пожалуй
только интерфейсом.. сравнивать
их не берусь, так как они носят
исключительно характер привычки
пользования веб мастером тем или
иным редактором html кода.
Р асскажу про основные плюсы
использования подобного
редактора.
Как правило, html редакторы
имеют два окна, в одном Вы
пишите код, а во втором сразу
видите результат написанного!
То есть теперь Вам не придётся
постоянно сохранять текущий
результат, чтобы открыть его
браузером и оценить
написанное.
Как правило, они содержат в себе
стандартные наборы шаблонов
кода, в который Вы просто
подставляете свою информацию,
избавляя себя от прописывания
тегов.
Ну и "общие" удобства -
сохранить, открыть,
редактировать сразу несколько
страниц сайта перелистывая их…
много короче разных полезных
штук.. одна подсветка синтаксиса
чего стоит!
P. S. Однако, дальше буду писать
эту книгу подразумевая, что Вы
тренируетесь в стандартном
блокноте… иначе мы друг друга не
поймём.
Н емного об этике и здоровье
глаз..
Е сли создаваемый Вами сайт его
дизайн и назначение не требуют
обратного, то советую избегать
следующих вещей: Использовать
яркие контрастные цвета фона и
шрифта. Поверьте, когда у человека
начинают слезиться глаза от
чтения такой страницы, он резко
теряет к ней интерес. Это же
касается и размеров текста. Не
стоит использовать огромные
заголовки, впрочем, как и
содержание малюсенькими буквами
- это напрягает, ищите золотую
середину..

Комментарии

Комментариев нет.