ПК

HTML без загадок

Для разработки Web страниц необходимо знать язык разметки: HTML. Есть много справочников и пособий, но они все громоздкие и читать их очень долго и нудно. Поэтому я напишу вкратце о некоторых важных тегах и их параметрах.

Тег - это набор символов($$$) заключенных в треугольные скобки <$$$>. Закрытие тега это тот же набор символов($$$) заключенных в </$$$>. Начнем с пустой страницы, вот ее код:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Теги HTML говорят о том, что разметка HTML началась.

Между тегами HEAD находиться заголовочная часть страницы.

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

Между тегами BODY находиться главная часть страницы.

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

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

Обычно имя главной страницы - index.htm или html, реже main.htm. Разницы между htm и html никакой. Все остальные страницы могут иметь произвольные имена. Советую имена файлов не усложнять и стараться вписываться в рамки 8 символов в имени и 3-4 в расширении.

Файлы с картинками или архивами советую распологать в отдельной папке, например files. Это позваляет резко выделить странички от прочей мешуры.

Если вы хотите создать дизайн, то сначала нарисуйте его. В Paint или в Photoshop. В Photoshop можно создать слои и поэтому можно легко сделать слой с заголовком или задний фон, легко их удалить или дополнить. И только потом, когда искизы будут готовы приступайте к переаформленю в HTML.

Броузеры. В каждом броузере страница модет выглядеть по разному. Так что сразу поставьте себе несколько броузеров: Internet Explorer, Netscape Communicator, Opera. Также следует произвести настройку под разные разрешения. Использовать проценты вместо пикселей. Если вы используете сценарии, то соответственно нужно подумать о том, чтобы они выполнялись во всех броузерах. Идеальный вариант - сделать странички для каждого из броузеров.

Вот несколько важных тегов:
ТЕГ Значение
<body bgcolor="" background="" link="" alink="" vlink=""> Оформление страницы указывается в теге BODY. bgcolor указывает на цвет фона, background указывает на картинку на фон(ее URL), link указывает на цвет ссылки, alink на цвет активной ссылки, vlink на цвет посещенной ссылки. Цвет шрифта указывается в 16ричном коде или его название (пример: #000080, Navy, Red) К примеру напишу тег BODY этой страницы: 
<body background="bgim.JPG">
<font face="" color="" size=""></font> Шрифт: face - имя шрифта, color - цвет, size - размер. Имя шрифта нужно указывать полностью (пример: Times New Roman). Цвет шрифта указывается в 16ричном коде или его название (пример: #000080, Navy, Red), размер указывается от 1 до 7, это примерно соответствует от 8 до 36.
<p align=""> Отделяет новый параграф. Его закрывать необязательно. align указывает равнение (left, center, right)
<b></b> Делает шрифт между тегами жирным.
<i></i> Делает шрифт между тегами курсивом(наклонным).
<u></u> Делает шрифт между тегами подчеркнутым.
<strike></strike> или <s></s> Делает шрифт между тегами зачеркнутым.
<a href="" title=""></a> Ссылка: параметр href указывает на какой документ ссылается ссылка (его URL), а между тегами указывается надпись(или другие объекты, к примеру картинка). Параметр title указывает какая будет всплывающая подсказка.
Пример: код <a href=# title="Ссылочка">Надпись</a>, результат Надпись
<img src="" border="" align="" alt="" width="" height=""> Картинка: тег закрывать не нужно, параметр src отвечает за местоположение картинки относительно страницы или ее абсолютное положение (пример src="files/myfoto.jpg" или src="c:/mypage/files/myfoto.jpg"), border отвечает за величину рамки в пикселях. Параметр align отвечает за положение картинки относительно текста (left, right). alt отвечает за всплывающую подсказку. Параметр width отвечает за ширину картинки, а height за высоту в пикселях.
Пример: код <img src="files/menu.gif" border="2" align="left" alt="Меню" width="125" height="19"> результат:Меню
<br> Переносит курсор на новую строку
Пример: код Привет!<br>Как дела? результат: Привет!
Как дела?
<hr color="" width="" align=""> Горизонтальная черта: color - цвет, width - ширина, ее можно указывать в процентах относительно окна браузера. align указывает равнение (left, center, right)
Пример: код <hr color="Red" width="50" align="left"> результат
<ul type="">
  <li type=""></li>
<ul>

<ol type="">
  <li type=""></li>
<ol>

Список: отмечается между тегами ul, а каждый элемент между li. Тег li закрывать необязательно. Параметр type указывает на форму  буклетов(circle(окружность), square(квадратик), или по умолчанию кружок). Можно указать форму буклета для всего списка, а можно для каждого элемента.
Пример: код
<ul>
  <li type="circle">окружность</li>
  <li type="square">квадратик</li>
  <li>кружок</li>
</ul>

результат
  • окружность
  • квадратик
  • кружок

Второе: пронумерованный список все тоже самое только type другие: по умолчанию арабские цифры, I - большие римские, i - маленькие римские, A - большой латинский алфавит, a - маленький латинский алфавит 
Код:  
<ol>
 <li>1</li>
 <li type="I">2</li>
 <li type="A">3</li>
 <li type="a">4</li>
 <li type="i">5</li>
</ol>

Результат:

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
<center></center> Между тегами текст встанет по центру.
Пример: код <center>Равнение по центру</center>
результат
Равнение по центру
<div align=""></div> Блок текста: align указывает равнение (left, center, right).
Пример: код <div align="center">Равнение по центру</div>
результат
Равнение по центру

© Проект Alex'а О проекте