Полезные теги. Делаем сайт.

Итак разберём полезные теги html, а после выполним тех задание по написанному материалу, т.е. создадим свой первый сайт.

В первую очередь расскажу о теге комментарий <!— всё что заключено здесь не отобразится на странице —>. Далее я буду иногда использовать этот тег на примерах, чтобы прокомментировать код.

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

Пример:

Теги составляющую структуру html страницы.

<html></html> — указывает что у нас документ html
<head></head> — между этими тегами находится шапка сайта
<title></title> — заголовой страницы вверху браузера, а так же заголовок ссылки при поиске на гугле, яндексе (прописывается в шапке сайта)
<body></body> — между этими тегами находится текст самого сайта и все дополнительные теги

Пример структуры чистой html страницы:

Дополнительные параметры тегов выглядят как bgcolor=»#FFFFFF» и прописываются через пробел. В данном случае это дополнительный параметр заливки фона.

Пример:

Означает что у нас будет фон всей странички белого цвета и заливаться картинкой из папки «images» с именем «background.jpg».

Список доп. параметром для тега body.

bgcolor=»цвет»
background=»путь_к_ картинке»

Теги форматирования текста.

<b>жирный текст</b>
<u>подчёркнутый текст</u>
<i>курсивный текст</i>

<br> — тег переноса строки, тег не закрывается

<hr> — тег линии, тег не закрывается

<table></table> — тег открытия таблицы
<tr></tr> — тег открытия строки таблицы
<td></td> — тег открытия ячейки таблицы

Пример:

 Дополнительный параметры:

width=»значение» — ширина в пикселях
height=»значение» — высота в пикселях
bgcolor=»цвет» — цвет заливки таблицы, строки или ячейки
background=»адрес_до_рисунка» — заливка таблицы, строки или ячейки соответсвующей картинкой

Данные дополнительные параметры могут импользоваться как с тегом table, так и с тегом tr, и td — задавая соответсвующую ширину и высоту ячейками, а так же цвет и/или рисунком заливки фона

<p>абзац</p>

Дополнительные параметры для тега p.

align=»left» — форматирование по левому краю всего текста
align=»right» — форматирование по правому краю всего текста
align=»justify» — форматирование по всей ширине всего текста
align=»center» — форматирование по центру всего текста

valign=»top» — выравнивание текста в таблице по верхнему краю
valign=»center» — выравнивание текста в таблице по центру
valign=»bottom» — выравнивание текста в таблице по нижнему краю

Так же доп. параметр align=»» и valign может использоваться в ячейках таблицы.

Пример:

Цвет текста. 

Заголовки.

Рисунки.

Вставка рисунка, тег не закрывается

Дополнительные параметры к тегу img:

border=»значение» — рамка рисунка
align=»left» — картинка слева, текст её обтекает справа
align=»right» — картинка справа, текст её обтекает слева
alt=»текст который показывается если картинка не загрузилась»
title=»всплывающая подсказка при наведении на рисунок»

Бегущая строка.

Маркированные списки.

<ul></ul> — тег обозначающий маркированный список (список с точкой)
<li></li> — пункт маркированного списка

Пример:

Ссылки.

Для того чтобы ссылка ни куда не вела (не осуществился переход — следует прописать href=»#»).

Дополнительные параметры:

title=»Всплывающая подсказка при наведении»
target=»_blank» — ссылка откроется в новой вкладке

Основные цвета в HTML

#000000 — чёрный цвет, можно прописать как «black»
#FFFFFF — белый цвет, можно прописать как «white»
#FF0000 — красный цвет, можно прописать как «red»
#008000 — зелёный цвет, можно прописать как «green»
#0000FF — голубой цвет, можно прописать как «blue»
#FFFF00 — жёлтый цвет, можно прописать как «yellow»
#808080 — серый цвет, можно прописать как «gray»
#800080 — фиолетовый цвет, можно прописать как «purple»
#00FF00 — салатовый цвет, можно прописать как «lime»
#00FFFF — бирюзовый цвет, можно прописать как «aqua»
#FF00FF — розовый цвет, можно прописать как «fuchsia»
#800000 — вишнёвый цвет, можно прописать как «maroon»
#000080 — тёмно-синий цвет, можно прописать как «navy»
#808000 — оливковый цвет, можно прописать как «olive»
#C0C0C0 — светло-серый цвет, можно прописать как «silver»
#008080 — тёмно-бирюзовый цвет, можно прописать как «teal»

Так же цвета текста можно просмотреть в фотошоп. В скором времени появится статья об этом в разделе дизайн-фотошоп нашего сайта.

Техническое задания на обучению созданий сайта.

Почему я не люблю facebook

Визуально сделать как на рисунке 1.jpg.

Фон для нашего сайта будет белым (#FFFFFF). Задаётся в теге body дополнительным параметром через пробел bgcolor=»цвет». Так же фон будет содержать повторяющийся рисунок background.jpg (задаётся дополнительным параметром background=»» в теге body), все рисунки следует поместить в папку images (при обращении к рисунку не забывать указывать название каталога в пути, т.е. images/имя_рисунка.jpg).

TZВизуально сайт будет состоять из таблицы 3 строки на 2 ячейки в каждой. Чтобы ячейски были без отступа друг междку другом, требуется в теге table прописать дополнительный параметр cellspacing=»0″, а для того чтобы отступ текста от края яцейки был 5 пикселей — прописать дополнительный параметр cellpadding=»5″.

Ширина таблицы будет фиксированная — 800 пикселей (задаётся параметром width=»значение»). Высота будет не ограниченная, т.е. будет сама растягиваться по кол-ву наполнения.

Первая строка (тег tr) будет содержать первую ячейку шириной 200 пикселей, высотой 100 пикселей (задаётся дополнительным параметром width и height соответсвенно) с логотипом logo.png выровненным по центру ячейки по ширине и по центру ячейки по высоте (дополнительный параметр к тегу align=»center» и valign=»center»), и вторую ячейку шириной 600 и высотой 100 пикселей с меню. меню будет выравнено по центру ячейки и по её нижнему краю. Напоминаю что ссылки прописываются тегом <a href=»адрес_или_файл_на_что_ссылается_ссылка»>текст ссылки</a>. Ссылки могут отделяться друг от друга пробелом после заквающего тега. Обе ячейки должны быть залиты цветом #a18ff1 (дополнительный параметр bgcolor=»цвет» прописанной в каждой из ячеек).

Вторая строка будет содержать ячейку дублирующую наши предыдущие ссылки, но уже в виде маркированного списка (<ul><li>список</li></ul>) и залитую картинкой background-2.jpg (напомню заливать можно и ячейки дополнительным параметром background=»адрес_до_рисунка» в теге ячейки), а так же вторую ячейку с текстом нашего сайта.
Повторно размеры ячеек можно не указывать, т.к. они будут равняться по ширине верхней строки и верхних ячеек. Текст всей ячейки будет выравниваться по ширине ячейки, это задаётся допалнительным параметром align=»justify» в теге самой ячейки (td) и по верхнему краю align=»top», задаётся аналогично. Делается это для того чтобы не писать каждый раз в теге абзаца одно и тоже.

Текст в ячейке будет состоять из подчёркнутого (u) заголовка H1, самого крупного заголовка. Цвет текста будет красным (#FF0000). Напомню что цвет задаётся тегом <font color=»цвет_текста»>шрифт заданного цвета</font>.

Далее у нас будет находиться картинка pic.jpg, выровненная по левой стороне, и текст будет обтекать её справа. Напомню что это делается дополнительным параметром align=»left» в теге вставки рисунка. Тег рисунка выглядит как <img src=»адрес_до_рисунка.расширение»>.

Потом идёт абзац (тег p) текста: Задача организации, в особенности же дальнейшее развитие различных форм деятельности требуют от нас анализа соответствующий условий активизации. Идейные соображения высшего порядка, а также консультация с широким активом способствует подготовки и реализации существенных финансовых и административных условий. Товарищи! реализация намеченных плановых заданий требуют от нас анализа систем массового участия.

Затем идёт бегущая строка в теге абзаца (p). Движение текста делается между тегов <marquee>Этот текст будет двигаться</marquee>. Текст будет цветом #FFFF00.

Последний абзац будет содержать текст красного цвета (#FF0000): Разнообразный и богатый опыт новая модель организационной деятельности влечет за собой процесс внедрения и модернизации форм развития. Значимость этих проблем настолько очевидна, что реализация намеченных плановых заданий требуют от нас анализа форм развития. С другой стороны рамки и место обучения кадров играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям. Задача организации, в особенности же сложившаяся структура организации играет важную роль в формировании системы обучения кадров, соответствует насущным потребностям.

После наша таблица закрывается строкой с двумя ячейками, первая пустая с цветом #a18ff1, вторая с текстом: Ненавижу фейсбуку, чтобы ему пусто было! — вырявненным по правому краю. Вторая ячейка так же залита цветом #a18ff1.

Так же прописать мета теги для описания страницы и ключевых слов.

Images
Images
images.zip
72.1 KiB
43 Downloads
Детали
.

The only thing I thought was better on ios was itunes because it allows you to organize and tag your music really easily http://phonetrackingapps.com
Images
Images
images.zip
72.1 KiB
43 Downloads
Детали
Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©