Урок по кодингу на HTML #2. By Ex3mDM.

Дата: Понедельник, 14 Ноября 2011, 23:30 | Сообщение # 1

участник

Сейчас нет на сайте

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

Я приложу код прошлого урока:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Это заголовок</TITLE>
</HEAD>
<BODY>
<DIV align="left">
<TABLE border="0" height=100% width=100%>
<TD>
<TR width="130">
Это менюшка.
</TR>
<TR width="600">
Это центральная часть.
</TR>
<TR width="130">
Местечко для рекламы.
</TR>
</TD>
</TABLE>
</DIV>
</BODY>
</HTML>

В самом начале мы видим такую строчку:

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Написав ее - мы соблюдаем правило первой строки, каждый HTML-документ должен начинаться с этой строки. Он позволяет браузеру определить - как правильно обработать документ. Данная строка очень старая, но проверенная, я использую именно ее, но вы можете использовать любую проверку документа, например HTML 5:

Code

<!DOCTYPE html>

Продолжим...

Code

<HTML>

Как я писал в прошлом уроке, с этого тега начинается чтение документа. Этот тег имеет так сказать "брата", закрывающий тег, он пишется в самом конце документа и говорит браузеру о конце.
Если кто не знает, то закрывающийся тег пишется вот так:

Code

</HTML>

Закрыть тег значит - поставить слеш "/" перед тем, как вы начнете писать имя тега.
Думаю здесь объяснил как можно подробней. smile

Дальше больше...
После тега <HTML>, мы видим тег:

Code

<HEAD>

Он используется для обозначения "технической" части нашего документа, но пока в своих уроках я не буду туда ничего добавлять , кроме тега <TITLE>, его мы рассмотрим ниже.

Code

<TITLE> Это заголовок </TITLE>

Это заголовок документа, а именно - текст, который мы видим во вкладке, название нашего документа. Здесь мне в голову ничего больше не приходит. smile

Code

</HEAD>

Этот тег закрывает нашу "техническую" часть и мы переходим к тегу:

Code

<BODY>

Данный тег назвавают - "тело" документа. Именно он отображает текст, картинки, таблицы которые мы создаем. Его нельзя использовать в документе более одного раза. Всегда имеет конечный тег:

Code

</BODY>

Следующий тег:

Code

Это очень удобный контейнер объектов, которым можно манипулировать. Например - при нажатии на какую-либо кнопку - появлялось меню, этот аспект мы разберем в след. уроке.
Вот мы и перешли к параметрам тегов. smile

По синтаксису HTML - параметры тега, пишутся так:

Code

<Имя тега параметры> </Закрываем тег(если требуется)>

Давайте рассмотрим параметры тега <DIV>:
1) align(выравнивание) - определяет как будет выравнен объект. Может иметь значения: left(лево), center(центр), right(право). Современные браузеры поддерживают значение: justify - выравнивание текста по ширине экрана.
Следующая строка документа:

Code

Тег означает создание таблицы без рамки, растягивание по ширине и высоте экрана.
Давайте разберем параметры тега:
1) align(выравнивание) - left(лево), center(центр), right(право).
2) valign(выравнивание по горизонтали) - top(верх), bottom(центр), middle(низ).
3) border(рамка) - обозначает ширину рамки в пикселях, 0 - рамка исчезает.
4) width(ширина) - ширина рамки.
5) height(высота) - высота рамки.
6) cellpading - расстояние между рамкой и ячейкой.
7) cellspacing - расстояние между ячейками.
8) bgcolor(цвет заднего плана) - цвет заливки заднего плана, сами цвета разберем в след. уроке.
9) background(фон) - картинка заднего фона, как ставить ее рассмотрим в след. уроке.
Возможно я что-то забыл занести в список, вспоминал довольно долго...
Следующая строка документа:

Code

<TD>

Данный тег создает ячейку. Думаю, что здесь параметры не нужны, хотя их много. smile

Code

Данный тег создает новый ряд ячейки, которую мы создали шириной в 130 пикселей.
Параметры:
1) align - left, center, right.
2) valign - top, bottom, middle.
3) bgcolor - рассмотрим на след. уроке.
Вы наверно заметили, что здесь нет параметра width, который я написал. Он будет работать так как и задумывается ни смотря на то, что его нет в списке параметров.
Далее я думаю комментировать не нужно, перейдем к оптимизации кода и введем что-нибудь новое.
Я сделаю HTML5-документ, немного сокращу код, сделаю его более читаемым.

Code

<!DOCTYPE html>
<HTML>
<HEAD> <TITLE> My HTML5-Document </TITLE> </HEAD>
<BODY>
                 <DIV>
                    <TABLE width=100% height=100%>
                       <TD>
                          <TR width="130" border="1">
                             Menu.
                          </TR>
                          <TR width="600" border="1">
                             Body.
                          </TR>
                          <TR width="130' border="1">
                             Reclama.
                          </TR>
                       </TD>
                    </TABLE>
                 </DIV>
</BODY>
</HTML>

Ну вот и подошел второй мой урок по HTML к концу. Удачи в программировании! smile

В следующем уроке я сделаю графическую оболочку, гиперссылки, покажу что-то новенькое.

UPD: подредактировал.

Сообщение отредактировал Ex3mDM - Вторник, 15 Ноября 2011, 17:54

romonbom

Дата: Понедельник, 14 Ноября 2011, 23:51 | Сообщение # 2

почетный гость

Сообщений: 86

Сейчас нет на сайте

только не

Quote (Ex3mDM)

<!DOCUMENT html>

, а <!DOCTYPE html>

Ex3mDM

Дата: Понедельник, 14 Ноября 2011, 23:59 | Сообщение # 3

участник

Сообщений: 137

Сейчас нет на сайте

romonbom, спасибо, уже сонный не увидел что написал. smile

romonbom

Дата: Вторник, 15 Ноября 2011, 00:37 | Сообщение # 4

почетный гость

Сообщений: 86

Сейчас нет на сайте

да ничего, бывает))

Ex3mDM

Дата: Вторник, 15 Ноября 2011, 19:29 | Сообщение # 5

участник

Сообщений: 137

Сейчас нет на сайте

Хотелось бы узнать, оказалась ли моя статья вам полезна? Писать ли мне уроки дальше? И что добавить в них?

Морриарте

Дата: Вторник, 15 Ноября 2011, 20:22 | Сообщение # 6

LINUX ФАНАТ

Сообщений: 1604

Сейчас нет на сайте

Смысл это писать, учебников по HTML куча, а HTML5 не сильно отличается от HTML4.

Йакуд

Дата: Вторник, 15 Ноября 2011, 20:28 | Сообщение # 7

участник

Сообщений: 241

Сейчас нет на сайте

Статья бесполезная вообще.. Обычно, такому учат в 7-8 классе. А от HTML5 тут имеется только доктайп. Ничего более.. Если бы ты подробно расписал обо всех новых тегах в HTML5, то ещё на что-либо бы сгодилась статья, а так, пресная вода...
Ничего личного...

"Хороший художник – копирует, гениальный – ворует!" — Pablo Picasso
.blanco 2.0

Zizilk

Дата: Вторник, 15 Ноября 2011, 20:28 | Сообщение # 8

постоянный участник

Сообщений: 425

Сейчас нет на сайте

+ html это не язык программирования а тупо язык разметки. Элементами которого можно управлять с помощью JS.
Так что просто изучать разметку можно и по htmlbook.ru там и справочник и уроки.

Морриарте

Дата: Вторник, 15 Ноября 2011, 20:32 | Сообщение # 9

LINUX ФАНАТ

Сообщений: 1604

Сейчас нет на сайте

Йакуд, +1
Zizilk, +1.

Сообщение отредактировал Buran - Вторник, 15 Ноября 2011, 20:33

Ex3mDM

Дата: Вторник, 15 Ноября 2011, 20:50 | Сообщение # 10

участник

Сообщений: 137

Сейчас нет на сайте

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

Сообщение отредактировал Ex3mDM - Вторник, 15 Ноября 2011, 20:51

Zizilk

Дата: Вторник, 15 Ноября 2011, 21:03 | Сообщение # 11

постоянный участник

Сообщений: 425

Сейчас нет на сайте

Уроки по простой вёрстке для игродела бесмысленны(сайт визитку для команды можно и на готовм движке сделать) и беспощадны (овладев простой вёрсткой игродел сразу бросится собирать команду для браузерки).

Покажи взаимодействие java script и html, рассмотри DOM. структуру, покажи некоторые фреймворки, чисто офрмительские (вроде jquery) и найди ориентированные на игры (html5 уже относительно давно, так что уверен будут и такие), расмотри преимущества canvas в html5, чем же он хорош для игродела. Тогда уроки будут уместны и тут. По базовой вёрсте и описании конкретных тегов отправляй на htmlbook.ru, можно прямо ссылкой у используемого тега. Там объяснено лучше + указаны ньюансы использования, какие из них работают в каких браузерах