Картинки и графика.
htmlprovodnik
    Сейчас трудно представить себе сайт, на страницах которого не содержались бы картинки и графика. Изображения делают сайт более привлекательным и непохожим на другие ресурсы, но главное тут — чувство меры. Переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время ее загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру, используй картинки только там, где это нужно и будет тебе счастье.
    Ранее я уже рассказывал о том, как графика может использоваться в качестве фона html-документа, сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
    Для вставки картинок в HTML используется тег < IMG> с обязательным атрибутом SRC. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место html-страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:

< img src="logo.jpg">

    Если графика и страница расположены в разных каталогах, то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге site, в этом же каталоге расположен подкаталог images, в котором и находится наша картинка logo.jpg, то для ее вставки нужно написать так:

< img src="images/logo.jpg">

    Помимо обязательного атрибута src у тега IMG есть еще несколько необязательных атрибутов. Рассмотрим их подробнее:
width — ширина изображения в пикселах или процентах;
height — высота изображения в пикселах или процентах.
    Если используются эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота больше (сожмет) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится. Ширину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:

< img src="logo.jpg" width="50" height="20">

или

< img src="logo.jpg" width="10%" height="5%">

    В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путем применения атрибута alt:

< img src="logo.jpg" alt="Логотип сайта www.seoded.ru">

    В этом случае браузер зарезервирует место на странице под картинку, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута alt (повторю, если пользователь отключил показ графики. Если нет, то картинка скроет собой альтернативный текст).
    С помощью уже знакомого тебе атрибута align можно управлять выравниванием изображений относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
left — графика располагается у левого края страницы, а текст и другие элементы обтекают изображение справа;
right — графика располагается у правого края страницы, а текст и другие элементы обтекают изображение слева.
Например, HTML-код

< img src="logo.jpg" align="left">Это мой аватар на форумах.

браузер покажет так
Это мой аватар на форумах.

,а этот HTML-код

< img src="logo.jpg" align="right">Это мой аватар на форумах.

будет выглядеть вот так
Это мой аватар на форумах.

    Для прекращения обтекания текстом изображения можно использовать тег < BR> . У тега BR есть атрибут clear, который может принимать три значения:
left — прекращение обтекание текстом изображений, выровненных по левому краю;
right — прекращение обтекание текстом изображений, выровненных по правому краю;
all — прекращение обтекание текстом изображений, выровненных и по левому, и по правому краю.
    По умолчанию графика встраивается в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать пустые поля вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:
vspace — создает верхнее и нижнее поля;
hspace — создает боковые поля (слева и справа).
    Значения этих атрибутов указывается в пикселах. Например, если мы немного дополним предыдущий пример

< img src="logo.jpg" align="left" vspace="5" hspace="20">Это мой аватар на форумах.

,то получим следующее
Это мой аватар на форумах.

    Вокруг изображений можно создать черную рамку с помощью атрибута border. Значение этого атрибута указывается в пикселах и определяет толщину рамки. Например, HTML-код

< img src="logo.jpg" border="5">

в браузере выглядит так

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

Создаём HTML форму за несколько минут
htmlprovodnik
Давно ничего не писал в блог — сегодня решил рассказать про специальный инструмент , который поможет вам быстро и грамотно создать HTML форму. Часто при создании сайтов веб-разработчиков требуется , сделать форму для обратной связи , или форму для регистрации , то есть данный вопрос очень часто является актуальным для разработчиков.

 

Этим инструментом является специальный онлайн сервис
pForm от Appnitro Software. Данный сервис и его интерфейс создан при помощи JavaScript-а , тем самым он несёт в себе возможность динамически создавать формы. Также вы можете выбрать один из 25 возможных дизайнов ( различия только в оттенках ) , который предлагает сервис.

sshot-3

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

sshot-1

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

sshot-4

После того как вы создали форму , вы можете ознакомится с её demo вариантом , либо сразу скачать форму и установить её себе на сайт. Так что пользуйтесь и создавайте формы быстро и на лету , не тратя время на написание HTML кода.


Таблица «безопасных» цветов
htmlprovodnik
255.255.204 255.255.153 255.255.102 255.255.51 255.255.0 204.204.0
FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00
           

255.204.102 255.204.0 255.204.51 204.153.0 204.153.51 153.102.0
FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600
           

255.153.0 255.153.51 204.153.102 204.102.0 153.102.51 102.51.0
FF9900 FF9933 CC9966 CC6600 996633 663300
           

255.204.153 255.153.102 255.102.0 204.102.51 153.51.0 102.0.0
FFCC99 FF9966 FF6600 CC6633 993300 660000
           

255.102.51 204.51.0 255.51.0 255.0.0 204.0.0 153.0.0
FF6633 CC3300 FF3300 FF0000 CC0000 990000
           

255.204.204 255.153.153 255.102.102 255.51.51 255.0.51 204.0.51
FFCCCC FF9999 FF6666 FF3333 FF0033 CC0033
           

204.153.153 204.102.102 204.51.51 153.51.51 153.0.51 51.0.0
CC9999 CC6666 CC3333 993333 990033 330000
           

255.102.153 255.51.102 255.0.102 204.51.102 153.102.102 102.51.51
FF6699 FF3366 FF0066 CC3366 996666 663333
           

255.153.204 255.51.153 255.0.153 204.0.102 153.51.102 102.0.51
FF99CC FF3399 FF0099 CC0066 993366 660033
           

255.102.204 255.0.204 255.51.204 204.102.153 204.0.153 153.0.102
FF66CC FF00CC FF33CC CC6699 CC0099 990066
           

255.204.255 255.153.255 255.102.255 255.51.255 255.0.255 204.51.153
FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399
           

204.153.204 204.102.204 204.0.204 204.51.204 153.0.153 153.51.153
CC99CC CC66CC CC00CC CC33CC 990099 993399
           

204.102.255 204.51.255 204.0.255 153.0.204 153.102.153 102.0.102
CC66FF CC33FF CC00FF 9900CC 996699 660066
           

204.153.255 153.51.204 153.51.255 153.0.255 102.0.153 102.51.102
CC99FF 9933CC 9933FF 9900FF 660099 663366
           

153.102.204 153.102.255 102.0.204 102.51.204 102.51.153 51.0.51
9966CC 9966FF 6600CC 6633CC 663399 330033
           

204.204.255 153.153.255 102.51.255 102.0.255 51.0.153 51.0.102
CCCCFF 9999FF 6633FF 6600FF 330099 330066
           

153.153.204 102.102.255 102.102.204 102.102.153 51.51.153 51.51.102
9999CC 6666FF 6666CC 666699 333399 333366
           

51.51.255 51.0.255 51.0.204 51.51.204 0.0.153 0.0.102
3333FF 3300FF 3300CC 3333CC 000099 000066
           

102.153.255 51.102.255 0.0.255 0.0.204 0.51.204 0.0.51
6699FF 3366FF 0000FF 0000CC 0033CC 000033
           

0.102.255 0.102.204 51.102.204 0.51.255 0.51.153 0.51.102
0066FF 0066CC 3366CC 0033FF 003399 003366
           

153.204.255 51.153.255 0.153.255 102.153.204 51.102.153 0.102.153
99CCFF 3399FF 0099FF 6699CC 336699 006699
           

102.204.255 51.204.255 0.204.255 51.153.204 0.153.204 0.51.51
66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333
           

153.204.204 102.204.204 51.153.153 102.153.153 0.102.102 51.102.102
99CCCC 66CCCC 339999 669999 006666 336666
           

204.255.255 153.255.255 102.255.255 51.255.255 0.255.255 0.204.204
CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC
           

153.255.204 102.255.204 51.255.204 0.255.204 51.204.204 0.153.153
99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999
           

102.204.153 51.204.153 0.204.153 51.153.102 0.153.102 0.102.51
66CC99 33CC99 00CC99 339966 009966 006633
           

102.255.153 51.255.153 0.255.153 51.204.102 0.204.102 0.153.51
66FF99 33FF99 00FF99 33CC66 00CC66 009933
           

153.255.153 102.255.102 51.255.102 0.255.102 51.153.51 0.102.0
99FF99 66FF66 33FF66 00FF66 339933 006600
           

204.255.204 153.204.153 102.204.102 102.153.102 51.102.51 0.51.0
CCFFCC 99CC99 66CC66 669966 336633 003300
           

51.255.51 0.255.51 0.255.0 0.204.0 51.204.51 0.204.51
33FF33 00FF33 00FF00 00CC00 33CC33 00CC33
           

102.255.0 102.255.51 51.255.0 51.204.0 51.153.0 0.153.0
66FF00 66FF33 33FF00 33CC00 339900 009900
           

204.255.153 153.255.102 102.204.0 102.204.51 102.153.51 51.102.0
CCFF99 99FF66 66CC00 66CC33 669933 336600
           

153.255.0 153.255.51 153.204.102 153.204.0 153.204.51 102.153.0
99FF00 99FF33 99CC66 99CC00 99CC33 669900
           

204.255.102 204.255.0 204.255.51 204.204.153 102.102.51 51.51.0
CCFF66 CCFF00 CCFF33 CCCC99 666633 333300
           

204.204.102 204.204.51 153.153.51 153.153.102 153.153.0 102.102.0
CCCC66 CCCC33 999966 999933 999900 666600
           

255.255.255 204.204.204 153.153.153 102.102.102 51.51.51 0.0.0
FFFFFF CCCCCC 999999 666666 333333 000000
           

Все цвета интернета

Вашему вниманию предлагается палитра цветов, рекомендуемых для экранного дизайна.

При создании изображения для публикации в сети главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает похожий или смешивает несколько соседних цветов (dithering). Иногда первоначальный цвет может быть заменен на что-то совершенно неподходящее.

Цвета из нашей палитры везде будут отображаться правильным образом и без искажений. Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов.

Как пользоваться палитрой

Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого и синего. Эти градации — 0, 51, 102, 153, 204, 255.

Над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе) и HEX (для


HTML и СSS — эффект тени
htmlprovodnik
В этой статье я приведу небольшой пример , как при помощи CSS и HTML создать окна , таблицы или рамки с тенью вокруг.

Обычно рамка в-виде тени , помогает объекту выделиться на фоне других объектов , то-есть создав например всплывающее окно ( которые я так не люблю ) вы сможете выделить его тем самым привлечь к нему внимание посетителя вашего сайта.

 

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

Стандартным решением данной задачи , является создание контейнера с использованием прозрачных PNG элементов , и размещение в него содержимого.

Мы решим эту задачу таким способом

И так , для начала создаём специальный контейнер , на HTML , выглядеть это будет так:

 

<div class="dialog" style="display: block; top: 236px; opacity: 1;">
<div class="body">
<div class="content">
Содержимое , типо - блах блах блах!</div>
</div>
</div>
.dialog {
left: 50%;
margin-left: -315px;
width: 630px;
 
position: absolute;
z-index: 100001;
 
}
.dialog .body {
background: url(fon.png) 0 0;
padding: 40px 13px 10px 40px;
}

Специальные символы html-документа
htmlprovodnik

Иногда возникает необходимость в использовании символа, которого нет на клавиатуре. Как быть в этом случае? Для этого существуют специальные символы, состоящие из знаков амперсанда (&), фунта (#), числового кода и точки с запятой (;). Либо из амперсанда, наименования символа и точки с запятой (;).

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

Таблица часто используемых спецсимволов

Мнемокод       Символ

&quot; "
&amp; &
&lt; <
&gt; >
&curren; ¤
&brvbar; ¦
&sect; §
&copy; ©
&ordf; ª
&laquo; «
&reg; ®
&deg; °
&plusmn; ±
&micro; µ
&para; ¶
&middot; ·
&sup1; ¹
&euro; €
&#153; ™ торговая марка
&#161; ¡ перевернутый восклиц-й знак
&#162; ¢ цент
&#163; £ фунт стерлингов
&#164; ¤ денежная единица
&#165; ¥ иена, юань
&#166; ¦ разорванная вертикальная черта
&#167; § параграф
&#168; ¨
&#169; © авторские права
&#170; ª
&#171; « левая двойная угловая скобка
&#172; ¬ знак отрицания
&#174; ® зарегистрированная ТМ
&#175; ¯
&#176; ° градус
&#177; ± плюс-минус
&#178; ² "квадрат"
&#179; ³ "куб"
&#180; ´
&#181; µ микро
&#182; ¶
&#183; ·
&#184; ¸
&#185; ¹
&#186; º
&#187; » правая двойная угловая скобка
&#188; ¼ одна четверть
&#189; ½ одна вторая
&#190; ¾ три четверти
&#191; ¿ перевернутый вопрос-й знак
&#8226; •
&#8230; …
&#8242; ′
&#8243; ″
&#8254; ‾
&#8260; ⁄
&#8592; ←
&#8593; ↑
&#8594; →
&#8595; ↓
&#8596; ↔
&#9674; ◊
&#9824; ♠
&#9827; ♣
&#9829; ♥

Шрифты и CSS. Нюансы.
htmlprovodnik

Многие мучаются при создании сайта. Во многих случаях на сайте требуется применить нестандартный шрифт или иероглиф. Вы скачиваете красивый шрифт и начинаете верстать страницу, но не у всех пользователей есть такие шрифты.
Некоторые не смущаются и просто создают графический файл, используя нужный им шрифт, но дополнительная графика не всегда подходит странице и у многих её и так хватает. Но есть один подходящий выход ! Этим выходом является использования технологии CSS (Cascading Style Sheets) или просто "Каскадных таблиц стилей". Обычно CSS заключается в сам, создаваемый файл, страничку, но можно создать файл CSS (.css) отдельно и соединить его путём прописки между тегом <head> таким образом:

<LINK href="scooter.css" rel=stylesheet type=text/css>

И нам с помошью CSS нужно автоматически закачать и установить файл шрифта True Type Font (.ttf), но установка произойдет только в том случае, если компьютер пользователя не обнаружит требуемого шрифта. Первым делом мы должны указать место положения шрифта. Для этого прописываем между тегами <head> и </head> так :

<style>
p {font-family: URL шрифта (например, www.domen.ru/fonts/font.ttf) ;}
</
style>

Таким образом вы можете использовать любые шрифты на своём сайте. Но советую сильно не изощряться, так как сам процесс закачки и установки шрифта тоже требует определённого времени. И если у вас сам шрифт "весит" 500kb и больше, то его не рекомендуется использовать в этом случае.

CSS текст – форматирование
htmlprovodnik
Атрибут со значениемПолученный результат
font-family:Tahoma, sans-serif CSS текст – форматирование
font-size:15px CSS текст – форматирование
font-style:italic CSS текст – форматирование
font-variant:small-caps CSS текст – форматирование
font-weight:bold CSS текст – форматирование
letter-spacing:2px CSS текст – форматирование
word-spacing:7px CSS текст – форматирование
color:#cc0033 CSS текст – форматирование
text-indent:40px
CSS текст – форматирование
text-decoration:underline
CSS текст – форматирование
text-decoration:overline
CSS текст – форматирование
text-decoration:line-through
CSS текст – форматирование
text-transform:capitalize
CSS текст – форматирование
text-transform:lowercase
CSS текст – форматирование
text-transform:uppercase
CSS текст – форматирование
vertical-align:super CSS текст – форматирование text
vertical-align:sub CSS текст – форматирование text

Атрибуты и значения

  • font-family:Tahoma, sans-serif   –   определяет вид и семейство шрифта.
  • font-size:13px   –   устанавливает размер шрифта в пикселях или процентах.
  • font-style:italic   –   преобразует текст в наклонный (курсив).
  • font-variant:small-caps   –   выводит капитель – большие буквы маленького размера.
  • font-weight:bold   –   преобразует текст в полужирный.
  • letter-spacing:2px   –   создает дополнительное расстояние между символами в пикселях.
  • word-spacing:7px   –   создает дополнительное расстояние между словами в пикселях.
  • color:#cc0033   –   определяет цвет текста.
  • text-indent:40px   –   устанавливает отступ строки в пикселях или процентах.
  • text-decoration:underline   –   выводит подчеркнутый текст.
  • text-decoration:overline   –   выводит надчеркнутый текст.
  • text-decoration:line-through   –   выводит перечеркнутый текст.
  • text-transform:capitalize   –   отображает каждое слово с заглавной буквы.
  • text-transform:lowercase   –   преобразует все буквы в маленькие.
  • text-transform:uppercase   –   преобразует все буквы в заглавные.
  • vertical-align:super   –   отображает текст в верхнем индексе.
  • vertical-align:sub   –   отображает текст в нижнем индексе.

Еще пример по форматированию текста:

<head>
<style type="text/css">
body {
color:#000066
}
.primer {
text-decoration:underline;
text-align:right;
letter-spacing:5px
}
#example {
text-indent:50px;
word-spacing:20px;
color:Green
}
</style>
</head>
<body>
<div class="primer">Подчеркнутый текст, с расстоянием между символами в пять пикселей, выровнен по правому краю, темно-синий</div>
<div>Текст темно-синего цвета</div>
<p id="example">Отступ строки слева, дополнительное расстояние между словами в 20 пикселей, текст зеленый</p>
</body>

Основные атрибуты тега BODY и их значения.
htmlprovodnik
Все атрибуты тега BODY оказывают свое влияние на объекты, находящиеся между тегами < BODY> и < /BODY>, т.е. на все элементы html-страницы. Это означает, что по умолчанию браузер будет выводить html-страницу так, как это прописано или не прописано в теге BODY. Если в каком-либо месте html-документа нужно отобразить текст, фон или другой элемент иначе, то это нужно прописать в значениях атрибутов соответствующего тега html. Я пока не рассматриваю каскадные таблицы стилей (CSS), с помощью которых также можно задать отображение html-страницы. Кроме того, я в этом разделе не буду рассказывать обо всех атрибутах тега BODY.   Итак, наиболее часто используемые атрибуты тега BODY:
bgcolor — цвет фона html-страницы. По умолчанию браузер заполняет фон сплошным цветом (в настройках по дефолту — белым) или в зависимости от настроек пользователя этого браузера. Допустим, если вам нужен html-документ с черным фоном, то нужно написать так:
< BODY bgcolor="black">< /BODY>
или так:
< BODY bgcolor="#000000">< /BODY>
    Здесь нужно коротко сказать о способах представления цвета в HTML. Цвета в HTML можно задать либо именем цвета из предопределенного списка, либо шестнадцатеричным (hex) значением выбранного цвета. В предопределенном списке содержится 140 цветов и все они соответствуют так называемой 
[Error: Irreparable invalid markup ('<a [...] solidlucho.files.wordpress.com>') in entry. Owner must fix manually. Raw contents below.]

<span style="font-size: larger;"><span class="pb">В</span>се <strong>атрибуты тега BODY</strong> оказывают свое влияние на объекты, находящиеся между тегами &lt; BODY&gt; и &lt; /BODY&gt;, т.е. на все элементы html-страницы. Это означает, что <strong>по умолчанию</strong> браузер будет выводить html-страницу так, как это прописано или не прописано в теге BODY.<img align="right" src="http://solidlucho.files.wordpress.com/2009/12/html.jpg?w=300&amp;h=225" alt="" /> Если в каком-либо месте html-документа нужно отобразить текст, фон или другой элемент иначе, то это нужно прописать в значениях атрибутов соответствующег</span><span style="font-size: larger;">о тега html. Я пока не рассматриваю каскадные таблицы стилей (CSS),<!--ВСТАВИТЬ ССЫЛКУ НА CSS --> с помощью которых также можно задать отображение html-страницы. Кроме того, я в этом разделе не буду рассказывать обо всех атрибутах тега BODY.</span><span style="font-size: larger;">&nbsp;&nbsp; <span class="pb">И</span>так, наиболее часто используемые атрибуты тега BODY:</span><br /><span style="font-size: larger;"><strong><u>bgcolor</u></strong> &mdash; цвет фона html-страницы. По умолчанию браузер заполняет фон сплошным цветом (в настройках по дефолту &mdash; белым) или в зависимости от настроек пользователя этого браузера. Допустим, если вам нужен html-документ с черным фоном, то нужно написать так:</span><br /><span style="font-size: larger;">&lt; BODY bgcolor=&quot;black&quot;&gt;&lt; /BODY&gt;</span><br /><span style="font-size: larger;">или так:</span><br /><span style="font-size: larger;">&lt; BODY bgcolor=&quot;#000000&quot;&gt;&lt; /BODY&gt;</span><br /><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">З</span>десь нужно коротко сказать о способах представления <strong>цвета в HTML</strong>. Цвета в HTML можно задать либо <strong>именем цвета</strong> из предопределенного списка, либо <strong>шестнадцатеричным (hex) значением</strong> выбранного цвета. В предопределенном списке содержится 140 цветов и все они соответствуют так называемой&nbsp; </span><a align="right" solidlucho.files.wordpress.com="" http:="" title="Безопасные цвета, &lt;br &gt;&lt;/a&gt;&lt;img src=" href="http://www.seoded.ru/beginner/pril/bezopasnie_cveta.html">Веб-палитра&quot;&gt;</a><span style="font-size: larger;">web-палитре. Использование цветов из этой палитры гарантирует их одинаковое воспроизведение всеми браузерами. Список цветов из Web-палитры ты найдешь на странице </span><span style="font-size: larger;">Приложения. Там же ты найдешь и шестнадцетиричные (hex) значения этих цветов (при использовании шестнадцетиричных (hex) значений перед числом нужно ставить символ #). В hex-значении цвета используется модель RGB: первые две цифры задают яркость красной (Red), вторые две цифры &mdash; зеленой (Green), а последние две цифры &mdash; синей (Blue) составляющей цвета. Для того, чтобы использовать цвета, не входящие в Web-палитру, нужно знать их hex-значение. Я для этого использую программу, которую можно взять с моего сайта:</span> <span style="font-size: larger;">Color Final.</span><br /><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">С</span> представлением цвета в HTML разобрались, теперь продолжим разговор об атрибутах тега BODY:</span><br /><span style="font-size: larger;"><strong><u>background</u></strong> &mdash; позволяет задать в качестве фона html-страницы картинку. Допустим есть картинка logo.jpg, расположенная по адресу http://www.seoded.ru/images/logo.jpg. Для того, чтобы сделать ее фоном html-страницы нужно записать так:</span><br /><span style="font-size: larger;">&lt; BODY background=&quot;http://www.seoded.ru/images/logo.jpg&quot;&gt;&lt; /BODY&gt;</span><br /><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">Е</span>сли html-страница и картинка logo.jpg находятся в одном каталоге (папке), то можно записать так:</span><br /><span style="font-size: larger;">&lt; BODY background=&quot;logo.jpg&quot;&gt;&lt; /BODY&gt;</span><br /><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">Е</span>сли logo.jpg находится в подкаталоге images каталога с html-страницей (т.е. в папке images, которая находится в каталоге с html-страницей), то можно записать так:</span><br /><span style="font-size: larger;">&lt; BODY background=&quot;images/logo.jpg&quot;&gt;&lt; /BODY&gt;</span><br /><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">О</span>бычно в качестве фона используется небольшой и простой рисунок, так называемая <strong>текстура</strong>, который многократно выводится на экран, заполняя все окно. Поскольку размер такого изображения небольшой, то создание фона происходит очень быстро. Думаю с этим атрибутом все понятно, перейдем к следующим:</span><br /><span style="font-size: larger;"><strong><u>text</u></strong> &mdash; устанавливает цвет текста html-документа. Например, сделаем текст зеленым:</span><br /><span style="font-size: larger;">&lt; BODY text=&quot;#008000&quot;&gt;&lt; /BODY&gt;</span><br /><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">С</span>ледующие атрибуты относятся к представлению вида ссылок на странице:</span><br /><span style="font-size: larger;"><strong><u>link</u></strong> &mdash; цвет еще неиспользованной (непросмотренной) ссылки (по умолчанию синий).</span><br /><span style="font-size: larger;"><strong><u>vlink</u></strong> &mdash; цвет уже использованной (просмотренной) ссылки.</span><br /><span style="font-size: larger;"><strong><u>alink</u></strong> &mdash; цвет гиперссылок при нажатии.</span><br /><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">Д</span>опустим, нам нужно, чтобы цвет еще неиспользованных ссылок был красным (#FF0000), а уже нажатых &mdash; синим (#0000FF). Сделать это можно так:</span><br /><span style="font-size: larger;">&lt; BODY link=&quot;#FF0000&quot; vlink=&quot;#0000FF&quot;&gt;&lt; /BODY&gt;</span><br /><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">Д</span>а, я думаю ты уже заметил, что атрибутов в теге (не только &lt; BODY&gt;, но и в любом другом) может быть как один, так и несколько сразу. А может и ни одного, в этом случае браузер будет использовать настройки по умолчанию. В следующем примере мы создадим html-страницу с черным фоном, зеленым текстом, неиспользованные ссылки &mdash; красные, а посещенные &mdash; синие. Весь этот ужас можно создать так:</span><br /><p><span style="font-size: larger;">&lt; HTML&gt;<br />&lt; HEAD&gt;<br />&lt; /HEAD&gt;<br />&lt; BODY bgcolor=&quot;#000000&quot; text=&quot;#008000&quot; link=&quot;#FF0000&quot; vlink=&quot;#0000FF&quot;&gt;<br />&lt; /BODY&gt;<br />&lt; /HTML&gt;</span></p><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">Н</span>абери этот html-код в любом &nbsp;</span><span style="font-size: larger;"> текстовом редакторе или</span><span style="font-size: larger;"> визуальном. Набирай весь код вручную. Между тегами &lt; BODY&gt; и &lt; /BODY&gt; вставь текст, какой захочешь, сохрани этот файл под любым именем, но <strong>обязательно с расширением html</strong>. А затем открой его в</span><span style="font-size: larger;"> браузере и наслаждайся открывшейся тебе авангардистской картиной.</span><br /><div class="prim"><span style="font-size: larger;"><span class="slink" style="font-weight: bold;">Примечание.</span> Не забывай &mdash; <em>я ставлю после скобки &lt; пробел</em> для того, чтобы браузер выводил код HTML, как текст. В самом html-коде этого делать <strong>НЕ НАДО</strong>.</span></div><span style="font-size: larger;">&nbsp;&nbsp;&nbsp; <span class="pb">П</span>омимо собственных атрибутов (атрибуты, которые используются только в этом теге) в теге BODY можно применять атрибуты и других тегов (их можно употреблять в разных тегах, они общие для них всех). О них ты узнаешь в следующих частях этого раздела. Пока же настоятельно рекомендую поэкспериментировать с полученными знаниями. Только на практике ты <strong>увидишь результаты</strong> этих знаний и поймешь, как это работает. И только поняв и запомнив, как <strong>атрибуты тега BODY</strong> используются для создания html-страницы, переходи к следующей главе, в которой мы поговорим о </span><span style="font-size: larger;">форматировании текста в HTML</span>.

HTML текст и шрифт
htmlprovodnik
  • HTML текст является основной составляющей большинства страниц интернета.
  • По ключевым фразам в тексте HTML-страницы пользователи могут найти ваш сайт.
  • Можно установить размер и цвет HTML текста по своему усмотрению. Вы также можете определить вид шрифта и его объемность.
  • К HTML тексту очень часто применяются различные форматирующие теги.

Ниже представлены HTML теги, форматирующие текст:

  • <strong> </strong> – отображают HTML текст полужирным шрифтом.
  • <b> </b> – отображают HTML текст полужирным шрифтом.
  • <kbd> </kbd>   – отображают HTML текст моноширинным шрифтом.
  • <code> </code> – отображают HTML текст моноширинным шрифтом.
  • <samp> </samp> – отображают HTML текст моноширинным шрифтом.
  • <big> </big> – отображают HTML текст размером больше обычного.
  • <em> </em> – отображают HTML текст наклонным (курсивным) шрифтом.
  • <i> </i> – отображают HTML текст наклонным (курсивным) шрифтом.
  • <dfn> </dfn> – отображают HTML текст наклонным (курсивным) шрифтом.
  • <ins> </ins> – определяют подчеркнутый текст.
  • <del> </del> – определяют зачеркнутый текст.
  • <small> </small> – отображают HTML текст размером меньше обычного.
  • <sub> </sub> – отображают HTML текст в нижнем индексе.
  • <sup> </sup> – отображают HTML текст в верхнем индексе.
  1. Форматируем HTML текст
  2. Размер HTML текста

Форматируем HTML текст

 
<strong>... текст полужирным шрифтом</strong>

Результат: ... текст полужирным шрифтом

 
<code>... текст моноширинным шрифтом</code>

Результат: ... текст моноширинным шрифтом

 
<big>текст больше обычного</big>

Результат: текст больше обычного

 
<em>... текст курсивным шрифтом</em>

Результат: ... текст курсивным шрифтом

 
<ins>подчеркнутый текст</ins>

Результат: подчеркнутый текст

 
<del>зачеркнутый текст</del>

Результат: зачеркнутый текст

 
<small>текст меньше обычного</small>

Результат: текст меньше обычного

 
<sub>текст в нижнем индексе</sub>

Результат: текст в нижнем индексе

 
<sup>текст в верхнем индексе</sup>

Результат: текст в верхнем индексе

Cпособы форматирования, представленные выше, должны применяться только для небольших участков текста. Пользуйтесь CSS если хотите установить определенный шрифт для всей страницы, или для нескольких строк, например.


Азы HTML
htmlprovodnik


Перед тем как начать изложение материала хочу сделать существенное замечание.

Существует несколько версий HTML. Стандарт языка непрерывно обновляется и дополняется, следствие этого - каждый год выходит новая версия HTML. С другой стороны - вэб-браузеры, с помощью которых пользователи просматривают html-страницы, также имеют свои различия в части интерпретации и поддержки отдельных тэгов. Это обусловлено тем, что разработкой браузеров занимаются различные компании. Что из этого следует? Попросту говоря, один и тот же html-код разные браузеры будут отображать по-разному, а некоторые тэги отдельные браузеры вообще "не понимают".

На страницах своего сайта я буду рассматривать дескрипторы, поддерживаемые Microsoft Internet Explorer 5.0 (IE 5.0). Это следует учитывать, когда будете разбирать приводимые примеры.

Вообще-то, язык HTML не является языком программирования. Это язык разметки гипертекста (HyperText Markup Language), т.е. называть его «языком HTML» не верно. Если говорить проще, то HTML это набор тегов (управляющих слов), которые позволяют представить обычный текст в форматированном виде.

А теперь хочу познакомить Вас с основными тегами, при помощи которых редактируется текст.

 
Что такое HTML теги?
Я не претендую на роль эксперта в этой области, но говоря профессиональным языком, тег – это своеобразный код, который используется при написании текстов страниц сайта; и указывает браузерам, каким образом визуально отобразить на странице значение данного кода.
Теги обычно парные. То есть есть тег, который сигнализирует об открытии определенного значения текста, а в конце его завершает тег, который закрывает его действие. Такие теги обычно заключаются в две угловые скобки: (<>) Закрывающая скобка обычно используется вместе со слешем (/) – это и есть сигнал к завершению данного тега! Обычно эти теги выглядят так: <></>
Представляю Вашему вниманию наиболее часто используемые теги и их значение, которые Вы легко и просто сможете применить, как в блоге, так и при редактировании сайта.
 
Основные теги форматирования текста:
  • <b>Выделяет текст жирным</b>
  • <strong>Так же жирный, сейчас этот тег используется наиболее часто</strong>
  • <u>подчеркивание</u>
  • <i>курсив</i>
  • <em>еще одно выделение курсивом</em>
  • <strike>зачеркивание</strike>
  • <center>Этот тег центрует Ваш текст на странице</center>
  • <p>Этот тег указывает на новую строку</p>
  • <blockquotes>«цитата»</blockquotes> (Этот тег обычно выглядит, как параграф с цитатой. Его вид зависит от заданных параметров шаблона Вашего блога.)

 
Теги ссылок:
  • Основная ссылка <a href=”url”>заголовок ссылки</a> (где‘url’ – это страница, на которую Вы ссылаетесь, а ‘заголовок ссылки’ – это описание страницы, на которую Вы ссылаетесь).

  • Ссылка эл.почты <a href=”mailto:Ваш e-mail”></a> (где ‘Ваш e-mail’ это ссылка на адрес Вашей электронной почты).
 
Теги заголовков:
  • <h1>Самый крупный и важный заголовок</h1>
  • <h2>Чуть менее важный заголовок</h2>
  • <h3>Еще менее важный заголовок</h3>
  • <h6>Самый маленький заголовок</h6>
 
Теги параметров текста:
  • Размер текста – <font size=”x”>редактируемый текст</font> – измените значение ‘x’ на нужный размер шрифта, где 1 – самый маленький, а 7 – самый большой.
  • Цвета – <font color=”#FF0000”>К примеру, красный!</font> (Где #FF0000 – это код для красного цвета. Коды цветов выложу в следующем посте).
  • Вид текста – <font face=”Arial”>Привет!</font> (где Arial – это один из видов текста).
 
Теги картинок:

Тег самой картинки – <img src=”url”> (где url – это ссылка на само изображение)
Тег картинки с указанием ее размеров <img src=”url” width=”200″ height=”150″> (где width – ширина, height – высота).
Расположение картинки- <img src=”url” align=left> (где ‘left’ – расположение слева. Так же можно указать расположение справа – ‘right’ и по центру – ‘center’)
Тег-описание (alt) - <img src=”url” alt=”краткое описание картинки”> (этот тег предоставляет описание картинки. Это описание помогает пользователям, которые отключили загрузку картинок на страничке, примерно понять, что на ней изображено).
Тег изображения в виде ссылки – <a href=”link url”><img src=”url”></a> (где ‘link url’ это ссылка на страничку, на которую ссылается Ваша картинка, а ‘url’ это ссылка на саму картинку).
Тег картинки с рамкой – <img border=”1″ src=”url”> (чем больше число в значении border “” , тем толще будет рамочка)
Тег свободного пространства вокруг картинки <img src=”url” hspace=10 vspace=10> (hspace – это пространство вокруг картинки по горизонтали, vspace  – по вертикали. Указываемое число соответствует размеру пикселей.)


 
Ненумерованный список:
    <ul>
  • <li>первый пункт</li>
  • <li>второй пункт</li>
  • <li>третий пункт</li>
  • </ul>
 
Нумерованный список:
    <ol>
  1. <li>первый пункт</li>
  2. <li>второй пункт</li>
  3. <li>третий пункт</li>
  4. </ol>
Это основные теги, которые пригодятся вам для редактирования текста!
Несколько лет назад я очень подробно изучал язык HTML. Этот опыт помог мне, как в редактировании шаблонов своих блогов, так и в создании сайтов своими руками!
Мои подписчики мне часто задают вопрос, как я внёсл в свой шаблон то или иное изменение. Отвечаю Вам – знание HTML просто необходимо в таких вещах! Зная теги и основы HTML, Вы самостоятельно и без особого труда сможете отредактировать любой шаблон и HTML страницу на свой вкус!

?

Log in