Редактируем текст на своей странице..
Вы наверняка не раз печатали документы в текстовых редакторах, так вот.. что можно сделать с текстом в том же Word, то же можно сделать и с текстом на нашей страничке.
В этой главе я расскажу о том, как изменить шрифт и его размер, как сделать текст жирным, курсивом, подчёркнутым и о том как его выравнивать по краям или центру документа.
Параграф.
Я думаю, Вы знаете, что такое параграф.. это такой кусочек текста, одно или несколько предложений, который в книгах обычно печатается с новой строки, тем самым, выделяя этот текст из основной массы, Книгу разбитую на параграфы легко читать, потому что, как правило, одному параграфу соответствует одна мысль или логическая часть текста.
Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> — собственно параграф.
Параграф имеет атрибут align «выравнивание» который в свою очередь может быть равен тому ли иному значению.
Рассмотрим на примерах:
С помощью параграфа можно расположить наш текст по центру:
<p align=»center»>Привет мир. </p>
По правому краю:
<p align=»right»>Привет мир. </p>
Или же обоим краям документа:
<p align=»justify»>Привет мир. — здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>
Давайте слегка изменим нашу первую страничку:
Так уже лучше, не правда ли?
Запомним некоторые вещи:
1) Тег <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> многофункциональный.. и по своей сути он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <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 языке используется своя палитра красок. Вот основные цвета, выглядят они так:
Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета 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 кода иначе рано или поздно станете в тупик.. конечно, я и дальше буду выкладывать готовые примеры, но нет ничего лучше чем самостоятельная практика.
На данный момент у меня получилось вот так: .. а у Вас?
Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <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> | — Нижний индекс |
Ну думаю понятно.. текст заключённый между этими открывающими и закрывающими тегами приобретёт нужный нам стиль.
Вот пример на всякий случай…
Шрифт
Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face — лицо то бишь..
<font face=»arial»> Эта строчка будет написана с помощью шрифта Arial </font>
Здесь необходимо отметить, что браузер использует библиотеку шрифтов, установленную на компьютере пользователя, и если вдруг указанного Вами шрифта в этой библиотеке не окажется, то он заменит его на тот который присутствует. Следовательно, чтобы не ударить face(ом) в грязь, не стоит указывать какие-то «экзотические» нестандартные шрифты, так как супер модный шрифт на компьютере Вашего друга сильно рискует превратиться в обыкновенный.
Предварительно отформатированный текст.
Если Вы обратили внимание, а если не обратили то знайте, что в браузерах текст набранный с помощью текстовых редакторов проходит «обработку» перед выводом его на экран компьютера. Так в набранном Вами тексте удаляются все переносы строк и лишние пробелы, пробелов между словами или просто символами может быть не более одного.
Проводится данная «обработка», для того чтобы на мониторах с разным расширением экрана текст переносился на следующую строку в тех местах где это действительно необходимо, а не там где были раннее расставлены пробелы и переносы строк.
Однако такая политика браузеров, в ряде случаев, не всегда оправданна.. Как например, написать стихи? Нет можно конечно после каждой строчки писать тег <br> , но есть вариант куда проще..
Знакомимся тег <pre> , текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк
Полезные советы:
Писать странички в блокноте конечно можно, но я Вам настоятельно рекомендую воспользоваться полноценным HTML редактором, благо их на рынке программного обеспечения великое множество. Я не буду давать их подробное описание, скажу лишь что они, как правило, несут в себе одинаковые стандартные наборы инструментов и отличаются друг от друга пожалуй только интерфейсом.. сравнивать их не берусь, так как они носят исключительно характер привычки пользования веб мастером тем или иным редактором html кода.
Расскажу про основные плюсы использования подобного редактора.
- Как правило, html редакторы имеют два окна, в одном Вы пишите код, а во втором сразу видите результат написанного! То есть теперь Вам не придётся постоянно сохранять текущий результат, чтобы открыть его браузером и оценить написанное.
- Как правило, они содержат в себе стандартные наборы шаблонов кода, в который Вы просто подставляете свою информацию, избавляя себя от прописывания тегов.
- Ну и «общие» удобства — сохранить, открыть, редактировать сразу несколько страниц сайта перелистывая их… много короче разных полезных штук.. одна подсветка синтаксиса чего стоит!
P.S. Однако, дальше буду писать эту книгу подразумевая, что Вы тренируетесь в стандартном блокноте… иначе мы друг друга не поймём.
Немного об этике и здоровье глаз..
Если создаваемый Вами сайт его дизайн и назначение не требуют обратного, то советую избегать следующих вещей: Использовать яркие контрастные цвета фона и шрифта. Поверьте, когда у человека начинают слезиться глаза от чтения такой страницы, он резко теряет к ней интерес. Это же касается и размеров текста. Не стоит использовать огромные заголовки, впрочем, как и содержание малюсенькими буквами — это напрягает, ищите золотую середину..
Как изменить размер текста в html в блокноте
The HTML <font> size Attribute is used to specify the size of text which is present inside <font> element.
Syntax:
Attribute Values: It contains a single value number that specifies the size of the text. The font size lies between 1 to 7. The default value of font size is 3.
Note: The <font> size attribute is not supported by HTML 5.
Example 1: This example illustrates the use of the font size property whose value ranges from 1 to 7 in HTML.
Как изменить размер текста в html в блокноте
Школа Продающих Сайтов
Школа Продающих Сайтов
A5.ru: конструктор сайтов
Шрифт html — Урок 12
- Автор: MilovanovV
- Категория: HTML сайты » Создать сайт в блокноте
- 28-10-2013, 12:44
Шрифт html — в этом уроке мы с Вами рассмотрим основные способы разметки текста на web странице.
Текст, является одним из важных видов контента, который добавляется на страницы сайта. Текст на сайте, это различные статьи, новостные заметки, различные текстовые каналы, например RSS, и так далее.
В HTML, при разметке текста на веб странице основные параметры задаются тегом FONT. С помощью тега FONT, можно задать названия шрифта (гарнитуру текста), размер текста и его цвет.
На самом деле, кроме тега FONT, в HTML существует множество других тегов, с помощью которых можно изменять параметры шрифта текста на странице.
В рамках нашего курса: «Как создать сайт в блокноте», некоторые из этих дополнительных тегов, мы будем использовать для изменения параметров шрифта.
Необходимо сделать следующее замечание.
На сегодняшний день, для разметки текста на странице, широко используют CSS стили. Использование CSS стилей, дает гораздо больше возможностей для управления текстом на странице.
Но в некоторых случаях, для задания характеристик текста в html коде, веб мастеру проще использовать тег FONT.
Ну что же, давайте продолжим создавать сайт в блокноте и вернемся к нашему html коду.
Итак, мы с Вами остановились на том, что в прошлом уроке, задали фон для шапки сайта. Текст заголовка нашего сайта мы еще не придумали.
По большому счету, заголовок сайта должен отражать основную его идею, то есть содержать в себе суть той темы, которая раскрывается на страницах сайта.
Предположим, что я хочу создать сайт, состоящий из несколько страниц с краткой информацией и небольшим обзором моего курса: «Как создать сайт в блокноте» поэтому, я свой сайт назову по названию курса.
Откроем html код главной страницы сайта – index.html блокнотом для редактирования. Кроме того, откроем наш файл браузером — для проверки изменений которые мы делаем.
Найдем в html коде строку:
<td align=»center» colspan=»2″ bgcolor=»#add2ea» height=»79px» background=»img\header.jpg»>Header</td>
Давайте удалим текстовую фразу — Header и добавим новое название сайта — Как создать сайт в блокноте.
Нажмем в блокноте на кнопку «Сохранить» и обновим страницу сайта в браузере.
Как видите, название шапки сайта изменилось, но текст, который мы добавили, набран шрифтом черного цвета и имеет маленькие размеры. Дело тут в том, что если форматирование текста не задано, браузер выводит в свое окно текст с параметрами по умолчанию.
Какими размерами вывести текст в шапку сайта, и какого он должен быть цвета? Чтобы ответить на этот вопрос нужно исходить из следующих соображений.
В первую очередь, как я говорил ранее, на нашем сайте должна быть гармония в плане дизайна.
И еще, нужно помнить, что заголовок сайта, это важный элемент html кода, на который обращают внимание поисковые системы Интернет.
Чтобы поисковая система, обратила внимание на заголовок, есть такое правило – заголовок сайта должен быть размещен в секции заголовка первого уровня, который формируется тегом <H1> .
Если мы откроем html справочник и выберем по алфавиту латинскую букву H, то увидим описание тегов H1 … H6. Синтаксис применения тегов заголовков разного уровня очень простой:
Итак, с размером шрифта текста заголовка сайта мы определились. Теперь определимся с цветом шрифта текста.
Как я отмечал выше, для задания и изменения таких характеристик шрифта, как цвет размер и гарнитура (название шрифта), используется тег FONT.
Тег FONTприменяется с параметрами — color (цвет шрифта), size (размер шрифта), face (гарнитура, или название шрифта).
Ну что же, я думаю, можно редактировать html код нашей страницы. Так как фон шапки сайта темно синий, то белый цвет шрифта на этом фоне, будет смотреться нормально.
Размер шрифта, я пока задавать не буду, так как мы его зададим тегом h1, в результате у нас получится следующий код:
<td align=»center» colspan=»2″ bgcolor=»#add2ea» height=»79px» background=»img\header.jpg»><h1><font color=»white» face=»Arial»>Как создать сайт в блокноте</font></h1></td>
Сохраним изменения в блокноте и вновь обновим окно браузера с нашей страницей.
Мы увидим, что сработал тег h1 и шрифт заголовка сайта стал крупным. Если шрифт нужно будет уменьшить или увеличить, то для этого мы просто добавим параметр size.
Параметру size, в качестве аргумента присваивается условное значение от 1 до 7, значением по умолчанию, является 3.
Кроме того, аргументом параметра size, может быть относительное значение (+1 или -1), которое суммируется с базовым значением, то есть с 3.
Имейте ввиду, что размер шрифта зависит от гарнитуры, например, шрифт гарнитуры Ariel, имеет меньший размер, чем шрифт гарнитуры Verdana.
Итак, результирующий html код, на котором мы закончим этот урок у нас получился следующий:
<td align=»center» colspan=»2″ bgcolor=»#add2ea» height=»79px» background=»img\header.jpg»><h1><font color=»white» face=»Arial» size=»5″>Как создать сайт в блокноте</font></h1></td>
Выше я писал, что в html, кроме тега FONT, есть целый арсенал тегов, с помощью которых можно изменять характеристики и параметры шрифтов.
Откройте html справочник на пункте – «Теги по типам» — «Текст».
Обратите внимание, здесь представлены теги, с помощью которых вы сможете сделать шрифт курсивным — тег i и em; сделать шрифт более жирным – тег b и strong; отобразить шрифт моноширинным текстом – тег tt, и так далее.
Оформляем html-страницу и форматируем текст.
Сначала пару слов о текстовом редакторе, которым вы пользуетесь. Конечно, вы можете это делать в блокноте, но гораздоо удобнее пользоваться Notepad++ (скачать можно, например, на http://www.softportal.com/get-5406-notepad.html . В нем весь html подсвечивается другим цветом, что облегчает восприятие и поиск ошибок.
А теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad.
Сейчас в ней написана фраза «Привет всем!», она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты. Проще это объяснить на практике.
Шаг 1. Меняем фон html-страницы и цвет текста
Для этого добавим в наш код, в тег <body> следующие атрибуты — bgcolor=»blue» text=»yellow». Здесь bgcolor — атрибут, отвечающий за цвет фона страницы, а blue — его значение (в нашем случае — голубой, но можете сделать и красный — red, и зеленый — green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow — желтый.