| karabawka |
Дата: Четверг, 01.11.2012, 22:27 | Сообщение # 1
|
Главный предприниматель
Сообщений: 1121
Статус: Offline
|
Работа с текстом в HTML. 1 часть урока!
Вы наверняка не раз печатали документы в текстовых редакторах, так вот.. что можно сделать с текстом в том же Word, то же можно сделать и с текстом на нашей страничке.
В этом уроке я расскажу о том, как изменить шрифт и его размер, как сделать текст жирным, курсивом, подчёркнутым и о том как его выравнивать по краям или центру документа.
Параграф
Я думаю, Вы знаете, что такое параграф.. это такой кусочек текста, одно или несколько предложений, который в книгах обычно печатается с новой строки, тем самым, выделяя этот текст из основной массы, Книгу разбитую на параграфы легко читать, потому что, как правило, одному параграфу соответствует одна мысль или логическая часть текста.
Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> - собственно параграф.
Параграф имеет атрибут align "выравнивание" который в свою очередь может быть равен тому ли иному значению.
Рассмотрим на примерах:
С помощью параграфа можно расположить наш текст по центру:
Code <p align="center">Привет мир!!!</p>
По левому краю:
Code <p align="left">Привет мир!!!</p>
По правому краю:
Code <p align="right">Привет мир!!!</p>
Или же обоим краям документа:
Code <p align="justify">Привет мир!!! - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>
Давайте слегка изменим нашу первую страничку:
Code <html> <head> <title>Мой первый сайт </title> </head> <body> <p align="center">Привет мир!!!</p> <br> <p align="justify"> Это моя первая страница, написанная на HTML!!! </p> </body> </html>
Так уже лучше, не правда ли? 
Запомним некоторые вещи:
1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так:
<p>
<p>
</p>
</p>
Нельзя! - это нелогично, как может один параграф содержать в себе другой?
2) Так же, нельзя писать пустые теги без текста или других тегов.
<p> здесь, что-то обязательно должно быть!!!</p>
3) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо атрибут align="left" для параграфа можно не указывать.
4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пшится так:
Code <div align="center">Привет мир!!!</div> <div align="left">Привет мир!!!</div> <div align="right">Привет мир!!!</div> <div align="justify">Привет мир!!!</div>
Все то же самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p> по принципу:
Code <div> <p align="left">Пишем слева</p> <p align="right">Пишем справа</p> </div>
А вообще тег <div> многофункциональный.. и по своей сути он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <div>, но об остальных возможностях данного тега мы поговорим позже..
5) Еще одним способом выравнивания текста по центру является использование тега <center> любое содержание взятое в данный тег выравнивается по центру экрана. Пишется так:
<center>Привет мир!!!</center>
Заголовки
В наборе тегов html языка имеется шесть типов заголовков:
*Примичание: К сожалению, из-за ограниченных возможностей форума ucoz, я не могу предоставить эти заголовки в развернутом виде. Попробуйте как-нибудь сами.
Code <h1> Привет мир!!! </h1>
<h2> Привет мир!!! </h2>
<h3> Привет мир!!! </h3>
<h4> Привет мир!!! </h4>
<h5> Привет мир!!! </h5>
<h6> Привет мир!!! </h6>
Думаю с этим понятно.. <hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести). Помните, что после использования того или иного заголовка происходит перенос строки - на то он и заголовок.
Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст?
Знакомимся тег <font> в переводе на русский - "шрифт".
Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size - размер.
Пишется это так:
Code <font size="+4">Привет мир!!!</font>
<font size="+2">Привет мир!!!</font>
<font size="+0">Привет мир!!!</font>
<font size="-1">Привет мир!!! </font>
<font size="-2">Привет мир!!!</font>
Добавим выше изученные теги на нашу новенькую страничку:
Code <html> <head> <title>Мой первый сайт</title> </head> <body> <center><h2>Привет мир!!!</h2></center> <br> <p align="justify"> <font size="+1">Это моя первая страница, написанная на HTML!!!</font> </p> </body> </html>
Попробуйте поэкспериментировать с размерами шрифта и заголовком, подставьте свои значения, измените расположение тегов..
Цвета.
Для придания страничке красивого вида не обойтись без палитры с красками..
В html языке используется своя палитра красок. Вот основные цвета, выглядят они так:
Полная палитра базовых красок приведена здесь: http://www.webremeslo.ru/spravka/spravka1.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 кода иначе рано или поздно станете в тупик.. конечно, я и дальше буду выкладывать готовые примеры, но нет ничего лучше чем самостоятельная практика.
На данный момент у меня получилось вот так: .. а у Вас?
Code <html> <head> <title>Мой первый сайт </title> </head> <body text="#484800" bgcolor="#e8e8e8"> <center> <h2> <font color="#008000">Привет мир!!!</font> </h2> </center> <p align="justify"> <font size="+1"> Это моя первая страница, написанная на HTML!!! </font> </p> </body> </html>
Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text="#ff207b" bgcolor="#1a77f0"> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками..
И так...
Из этого урока вы узнали:
- Что такое "параграф" в HTML языке
- Новые для вас теги для редактирования текста в HTML.
- О загаловках текста в HTML
- О цветах HTML и таблице цветов.
Спасибо за то что уделили время этой статье. В следущем уроке расскажу о:
- Стилях текста в HTML.
- Шрифтах
- О Предварительно отформатированном тексте.
Счастливого изучения. 
|
|
|
|
|
| qttesssgghh22 |
Дата: Суббота, 15.10.2016, 18:25 | Сообщение # 2
|
Любитель
Сообщений: 40
Статус: Offline
|
Благодарю) Когда-то данную информацию искал.
Читер Samp Virtual Life
|
|
|
|
|
| [CM]OlegEhtler |
Дата: Воскресенье, 05.02.2017, 13:50 | Сообщение # 3
|
100$
Сообщений: 633
Статус: Offline
|
Цитата qttesssgghh22 (  ) Благодарю) Когда-то данную информацию искал.
Набил пост. Старая информация 2012 года.
|
|
|
|
|
| MaxSanchez |
Дата: Воскресенье, 06.08.2017, 10:39 | Сообщение # 4
|
Боец
Сообщений: 191
Статус: Offline
|
Годные уроки, все прекрасно расписал, было приятно почитать, мб когда нибудь займусь html 
Мои темы:
» http://cheat-master.ru/forum/25-706858-1 - JetBoost - оптимизация вашей системы
» http://cheat-master.ru/forum/25-708067-1 - Wallpaper Engine - ставим GIFку на раб.стол
» http://cheat-master.ru/forum/160-707037-1 - AVP GameProtect - программа для выявления стиллера
» http://cheat-master.ru/forum/214-707161-1 - [SF Plugin] KillListMove
» http://cheat-master.ru/forum/150-707266-1 - [AHK] Private Macro C-Bug [SAMP 0.3.7 + MTA]
» http://cheat-master.ru/forum/214-707475-1 - [ASI] RenderFix
» http://cheat-master.ru/forum/165-708927-1 - [Evolve-RP] Телепорт на места | notSpawn
|
|
|
|
|
