Код:

Lilitochka-club

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Lilitochka-club » Уроки по созданию сайтов » Программирование на языке HTML


Программирование на языке HTML

Сообщений 21 страница 29 из 29

21

Урок 10.
Строки в таблицах.

Как упоминалось ранее, для создания строки таблицы используют тэг <tr> и обязательный парный ему тэг </tr>.
Атрибуты тэга <tr>:
1) align - выравнивает текст в ячейке по горизонтали. Обратите внимание! Несмотря на то, что это атрибут строки, текст всё равно вставляется в ячейку, поэтому атрибут и воздействует на него.
Параметры:
- center - выравнивание по центру;
- left - выравнивание по левому краю;
- right - выравнивание по правому краю.
Синтаксис:

Код:
<table width="100%" border="3">
     <tr align="left">
          <td>Привет, Мир!</td>
          <td>Привет, Мир!</td>
     </tr>
     <tr align="right">
          <td>Привет, Мир!</td>
          <td>Привет, Мир!</td>
     </tr>
</table>

2) valign - выравнивает текст в ячейке по вертикали.
Параметры:
- top - выравнивание по верхнему краю;
- middle - выравнивание по центру;
- bottom - выравнивание по нижнему краю.
Синтаксис:

Код:
<table width="100%" border="3">
     <tr align="left" valign="top">
          <td>Привет, Мир!</td>
          <td>Привет, Мир!</td>
     </tr>
     <tr align="right" valign="bottom">
          <td>Привет, Мир!</td>
          <td>Привет, Мир!</td>
     </tr>
</table>

0

22

Урок 11.
Ячейки таблицы.

Для создания строки таблицы используют тэг <td> и обязательный парный ему тэг </td>.
Атрибуты тэга <td>:
1) height - задает высоту ячейки таблицы в пикселях.
2) width - задает ширину ячейки таблицы в пикселях.
http://s017.radikal.ru/i430/1110/4d/adc9d1d7cc48.jpg
Ситнтаксис:

Код:
<table border="3" align="center" bordercolor="#CC3366" bgcolor="#FFFFCC">
     <tr align="center">
          <td width="200" height="35">Привет, Мир!</td>
          <td width="110" height="35">Привет, Мир!</td>
     </tr>
     <tr align="center">
          <td width="200" height="25">Привет, Мир!</td>
          <td width="110" height="25">Привет, Мир!</td>
     </tr>
</table>

Обратите внимание! Что ячейки в одной строке должны быть одинаковой высоты, а ячейки находящиеся в одной колонке одинаковой ширины.
3) align - выравнивает текст в ячейке по горизонтали.
Параметры:
- center - выравнивание по центру;
- left - выравнивание по левому краю;
- right - выравнивание по правому краю.
4) valign - выравнивает текст в ячейке по вертикали.
Параметры:
- top - выравнивание по верхнему краю;
- middle - выравнивание по центру;
- bottom - выравнивание по нижнему краю.
http://s017.radikal.ru/i427/1110/cb/7fba84e33886.jpg
Синтаксис:

Код:
<table border="3" align="center" bordercolor="#CC3366" bgcolor="#FFFFCC">
     <tr>
          <td width="150" height="50" align="left" valign="top">Привет, Мир!</td>
          <td width="150" height="50" align="right" valign="top">Привет, Мир!</td>
     </tr>
     <tr>
          <td width="150" height="50" align="left" valign="bottom">Привет, Мир!</td>
          <td width="150" height="50" align="right" valign="bottom">Привет, Мир!</td>
     </tr>
</table>

Главный принцип! Если у вас содержимое всех ячеек в строке таблицы должно выравниваться везде одинаково, то лучше использовать атрибуты тэга <tr>, т.е. задать глобальное выравнивание содержимого всех ячеек в строке, а не атрибуты каждой отдельной ячейки. Чем меньше кода у вас будет в исходнике веб-страницы, тем вам будет проще в нем разобраться, меньше путаницы, больше скорость загрузки страницы. Но если в каждой ячейке текст должен выравниваться по разному, как в примере выше, то атрибуты выравнивания в строках лучше не использовать, чтобы они не конфликтовали друг с другом.

0

23

Урок 12.
Нестандартные таблицы.

Пока что мы рассматривали только простые таблицы, где в каждой строке имелось одинаковое количество ячеек, но иногда требуется сделать и более сложные таблицы.
Рассмотрим два простых примера. Допустим, вам надо создать таблицы содержащую две строки, в верхней одна яцейка, в нижней две.
http://s011.radikal.ru/i317/1110/aa/ba4cb1546489.jpg
1. Неправильный способ.
http://s017.radikal.ru/i411/1110/ba/43c0b9893c67.jpg
Синтаксис:

Код:
<table border="3" align="center" bordercolor="#CC3366" bgcolor="#FFFFCC">
     <tr>
          <td width="150" height="50" align="right" valign="top">Привет, Мир!</td>
     </tr>
     <tr>
          <td width="150" height="50" align="left" valign="bottom">Привет, Мир!</td>
          <td width="150" height="50" align="right" valign="bottom">Привет, Мир!</td>
     </tr>
</table>

Как видите, была совершена грубая ошибка в написании кода. Оставив в верхней строке всего одну ячейку, можно было предположить, что "растянется" по всей ширине строки, но этого не произошло.
2. Правильный способ.
http://s017.radikal.ru/i415/1110/04/df436c13b680.jpg
Синтаксис:

Код:
<table border="3" align="center" bordercolor="#CC3366" bgcolor="#FFFFCC">
     <tr align="center" valign="middle">
          <td width="150" height="50" colspan="2">Привет, Мир!</td>
     </tr>
     <tr align="center" valign="middle">
          <td width="150" height="50">Привет, Мир!</td>
          <td width="150" height="50">Привет, Мир!</td>
     </tr>
</table>

Заметили появление неизвестного атрибута? Хорошо! Сейчас мы его и изучим.
У тэга <td> есть еще два атрибута, которых мы не рассматривали ранее.
1) colspan - задает количество столбцов, которое объединено в одной ячейке одной строки таблицы.
Синтаксис этого атрибута и его параметров был приведен выше. Как вы видите из примера, в нижней строке таблицы две ячейки, поэтому условно это принимается за два столбца. В верхней строке должна располагаться всего одна ячейка шириной в две нижних, т.е. условно в ширину двух столбцов. Поэтому задаем значение параметра это атрибута равного количеству столбцов, т.е. "2".
2) rowspan - задает количество строк, которое объединено в одной ячейке.
http://s019.radikal.ru/i609/1309/4b/d2100d873362.jpg
Синтаксис:

Код:
<table border="3" align="center" bordercolor="#CC3366" bgcolor="#FFFFCC">
     <tr align="center" valign="middle">
          <td width="150" height="50">Привет, Мир!</td>
          <td width="150" height="50" rowspan="2">Привет, Мир!</td>
     </tr>
     <tr align="center" valign="middle">
          <td width="150" height="50">Привет, Мир!</td>
     </tr>
</table>

Для отображения ячейки таблицы высотой в две строки лучше использовать данный атрибут в последней ячейки верхней строки, так как если это сделать в самой нижней строке, то у вас может ничего не получиться.
Для лучшего усвоение приведу еще один пример.
http://s017.radikal.ru/i440/1110/78/8974683dce36.jpg
Синтаксис:

Код:
<table border="3" align="center" bordercolor="#CC3366" bgcolor="#FFFFCC">
     <tr align="center" valign="middle">
          <td width="150" height="50" colspan="2">Привет, Мир!</td>
     </tr>
     <tr align="center" valign="middle">
          <td width="150" height="50">Привет, Мир!</td>
          <td width="150" height="50" rowspan="2">Привет, Мир!</td>
     </tr>
	 <tr align="center" valign="middle">
          <td width="150" height="50">Привет, Мир!</td>
     </tr>
	 <tr align="center" valign="middle">
          <td width="150" height="50" colspan="2">Привет, Мир!</td>
     </tr>
</table>

А также таблицы можно вставлять в таблицы на манер матрешки.
http://s017.radikal.ru/i444/1110/65/adc1ab8a86ab.jpg
Синтаксис:

Код:
<table border="3" align="center" bordercolor="#0033CC">
     <tr>
          <td>
	<table border="1" align="center" bordercolor="#00FF66">
	     <tr align="center">
	          <td>Привет, Мир!</td>
	     </tr>
	</table>
          </td>
     </tr>
     <tr>
          <td align="center">Миру мир!</td>
     </tr>
</table>

0

24

Урок 13.
Нумерованные списки.

Для создания нумерованного списка служит тэг <ol> и обязательный парный ему </ol>. А строки в списке задаются тэгом <li> и необязательным закрывающим тэгом </li>.
Посмотрите на два примера. В одном используются закрывающие тэги, в другом нет, но отображаются они одинаково. Правда большинство html-редакторов предпочитают всё таки использовать закрывающий тэг, поэтому и я буду делать тоже самое.
Синтаксис:

Код:
<ol>
     <li>Один.
     <li>Два.
     <li>Три.
</ol>

или

Код:
<ol>
     <li>Один.</li>
     <li>Два.</li>
     <li>Три.</li>
</ol>

Атрибуты тэга <ol>:
1) type - задает вид маркеров в списке.
Параметры:
- 1 - арабские цифры. Этот параметр применяется к списку по умолчанию, т.е. если не указать никакого параметра, то у вас список буден нумерован арабскими цифрами. Поэтому для экономии кода его не применяю.
- A - заглавные буквы.
- a - строчные буквы.
- I - заглавные римские цифры.
- i - строчные римские цифры.
2) start - задает начальное значение нумерованного списка при использовании в качестве маркеров арабские цифры.
http://s002.radikal.ru/i197/1110/25/1b0e0263ce7e.jpg
Синтаксис:

Код:
<p>Обычный нумерованный список:</p>
<ol>
     <li>Один.</li>
     <li>Два.</li>
     <li>Три.</li>
</ol>
<p>Заглавные буквы:</p>
<ol type="A">
     <li>Эй.</li>
     <li>Би.</li>
     <li>Си.</li>
</ol>
<p>Строчные буквы:</p>
<ol type="a">
     <li>Эй.</li>
     <li>Би.</li>
     <li>Си.</li>
</ol>
<p>Заглавные римские цифры:</p>
<ol type="I">
     <li>Один.</li>
     <li>Два.</li>
     <li>Три.</li>
</ol>
<p>Строчные римские цифры:</p>
<ol type="i">
     <li>Один.</li>
     <li>Два.</li>
     <li>Три.</li>
</ol>
<p>Список начинающий отсчет с указанного в атрибуте параметра:</p>
<ol start="5">
     <li>Пять.</li>
     <li>Шесть.</li>
     <li>Семь.</li>
</ol>

Списки могут быть и составные, т.е. содержать пункты и подпункты с разными типами маркеров.
Синтаксис:

Код:
<ol>
     <li>Морепродукты:</li>
          <ol type="A">
               <li>Рыба.</li>
               <li>Морская капуста.</li>
               <li>Крабы.</li> 
          </ol>
     <li>Фрукты:</li>
          <ol type="A">
	 <li>Груша.</li>
	 <li>Яблоки.</li>
          </ol>
</ol>

0

25

Урок 14.
Различные украшательства.

1) Тэг <blockquote> и обязательный парный ему закрывающий тэг </blockquote> служат для создания цитат с отступами по обоим краям документа. При этом цитаты отделяются от основного текста пустой строкой.
http://s16.radikal.ru/i191/1309/76/e7b394cb2db1.jpg
Синтаксис:

Код:
<p align="justify">Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст.</p>
<blockquote>Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами. Цитата с отступами.</blockquote>
<p align="justify">Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст. Обычный текст.</p>

2) Тэг <sub> и обязательный парный ему </sub> - делает текст подстрочным.
3) Тэг <sup> и обязательный парный ему </sup> - делает текст надстрочным
http://s009.radikal.ru/i307/1110/15/4cb7c8332842.jpg
Синтаксис:

Код:
<p><sup>1</sup>Формула - C<sub>2</sub>H<sub>5</sub>OH</p>

4) Тэг <hr> не имеет закрывающего тэга и служит для создания горизонтальной линии.
Атрибуты тэга <hr>:
1. align - выравнивает линию по горизонтали.
Параметры:
- center - выравнивание по центру;
- left - выравнивание по левому краю;
- right - выравнивание по правому краю.
2. width - задает ширину линии в пикселях.
3. size - задает толщину линии в пикселях.
4. noshade - создает линию без тени.
http://s017.radikal.ru/i400/1110/03/6f7e629ce93f.jpg
Синтаксис:

Код:
<hr align="center" width="300" size="2">
<hr align="center" width="300" size="2" noshade>
<hr align="center" width="300" size="2" color="#00CCCC">

0

26

Урок 15.
Установка на сайт уникального значка.

Для начала разберемся, что же это такое:
Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Источник: Википедия
Посмотрите на картинку, там значки сайта обозначены красным кружком:
http://s017.radikal.ru/i425/1111/46/02c8f70695e2.jpg
Для чего нужны эти значки?
1. Они придают особый дизайн сайту.
2. Они отображаются у некоторых поисковиков и если верить Яндексу, то пользователи чаще проходят по ссылкам у которых есть эти значки, чем по тем, где их нет.
http://s48.radikal.ru/i121/1309/1a/cd61776650e8.jpg
3. Если у пользователя много сайтов сохранено в закладках (в Избранном) браузера, то пользователю проще найти нужный сайт по значку, если он у него есть.
Вставляют такой значок двумя строками тэгов:

Код:
<link rel="icon" href="адрес сайта/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="адрес сайта/favicon.ico" type="image/x-icon">

Объяснять их смысл пожалуй даже не стоит, так как это отчасти относится к другой теме "программирование сайтов при помощи каскадных таблиц стилей". Единственное, что вам сейчас необходимо знать - это то, как менять адреса ссылок, но это мы уже проходили и трудностей быть не должно.
Обычно используют только одну строку, но, так как браузеры отображают сайт немного по разному, то веб-программисты стали использовать обе строки.
Эти тэги помещаются строго между тэгами <head>...</head> шапки сайта. В другом месте они не работают.
Синтаксис:

Код:
<html>
<head>
<title>Исида и Сет - сайт о магии и гаданиях</title>
<link rel="icon" href="http://isidaiset.narod.ru/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://isidaiset.narod.ru/favicon.ico" type="image/x-icon">
</head>
<body>
</body>
</html>

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

0

27

Урок 16.
Создание значка Favicon.

В этом вам поможет просмотрщик графических файлов "XnView".
Без разницы, как вы собираетесь поступить, создадите ли сами картинку или воспользуетесь готовой, главное чтобы картинка была абсолютно равной по ширине и высоте.
Берем подходящую для создания значка картинку. Ее я создал в Фотошопе. Изначальный размер составляет 193x193 пикселя.
http://s017.radikal.ru/i424/1111/9b/2b1807648192.jpg
Далее открываем программу "XnView". В меню "Изображение" выбираем пункт "Изменение размера".
http://s13.radikal.ru/i186/1111/ed/9d951d5d9745.jpg
Откроется окно для изменения размера изображения. Поменяйте изначальный размер на 32х32 пикселя.
http://s11.radikal.ru/i183/1111/26/27e844f2e8e9.jpg http://s61.radikal.ru/i172/1111/85/9642f3fbe011.jpg
Потом откройте меню "Файл" и выберите пункт "Сохранить как...". Сохраните картинку под именем "favicon", расширение выберите "ico".
http://s59.radikal.ru/i163/1111/42/ad21558ede41.jpg
http://s017.radikal.ru/i433/1111/ae/350a612b62af.jpg
Как установить ее на сайт описано в уроке № 15.

0

28

Думаю на этом данный курс можно считать законченным. Основные тэги и базовые знания по программированию на языке HTML вы получили. Чтобы углубить свои знания веб-мастера пользуйтесь дополнительной литературой. Теперь ни один учебник по HTML не должен вам показаться лишком сложным.
Удачи и успехов вам!

0

29

http://s018.radikal.ru/i527/1210/19/a4b1086292aa.gif

0


Вы здесь » Lilitochka-club » Уроки по созданию сайтов » Программирование на языке HTML


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC