Понедельник, 11 Ноября 2024, 06:20

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Урок по кодингу на HTML #2. By Ex3mDM.
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

<DIV align="left">

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

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

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

<TABLE border="0" height=100% width=100%>

Тег означает создание таблицы без рамки, растягивание по ширине и высоте экрана.
Давайте разберем параметры тега:
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

<TR width="130">

Данный тег создает новый ряд ячейки, которую мы создали шириной в 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
почетный гость
Сейчас нет на сайте
только не
Quote (Ex3mDM)
<!DOCUMENT html>
, а <!DOCTYPE html>
Ex3mDMДата: Понедельник, 14 Ноября 2011, 23:59 | Сообщение # 3
участник
Сейчас нет на сайте
romonbom, спасибо, уже сонный не увидел что написал. smile
romonbomДата: Вторник, 15 Ноября 2011, 00:37 | Сообщение # 4
почетный гость
Сейчас нет на сайте
да ничего, бывает))
Ex3mDMДата: Вторник, 15 Ноября 2011, 19:29 | Сообщение # 5
участник
Сейчас нет на сайте
Хотелось бы узнать, оказалась ли моя статья вам полезна? Писать ли мне уроки дальше? И что добавить в них?
МорриартеДата: Вторник, 15 Ноября 2011, 20:22 | Сообщение # 6
LINUX ФАНАТ
Сейчас нет на сайте
Смысл это писать, учебников по HTML куча, а HTML5 не сильно отличается от HTML4.
ЙакудДата: Вторник, 15 Ноября 2011, 20:28 | Сообщение # 7
участник
Сейчас нет на сайте
Статья бесполезная вообще.. Обычно, такому учат в 7-8 классе. А от HTML5 тут имеется только доктайп. Ничего более.. Если бы ты подробно расписал обо всех новых тегах в HTML5, то ещё на что-либо бы сгодилась статья, а так, пресная вода...
Ничего личного...


"Хороший художник – копирует, гениальный – ворует!" — Pablo Picasso
.blanco 2.0
ZizilkДата: Вторник, 15 Ноября 2011, 20:28 | Сообщение # 8
постоянный участник
Сейчас нет на сайте
+ html это не язык программирования а тупо язык разметки. Элементами которого можно управлять с помощью JS.
Так что просто изучать разметку можно и по htmlbook.ru там и справочник и уроки.
МорриартеДата: Вторник, 15 Ноября 2011, 20:32 | Сообщение # 9
LINUX ФАНАТ
Сейчас нет на сайте
Йакуд, +1
Zizilk, +1.


Сообщение отредактировал Buran - Вторник, 15 Ноября 2011, 20:33
Ex3mDMДата: Вторник, 15 Ноября 2011, 20:50 | Сообщение # 10
участник
Сейчас нет на сайте
Всем спасибо за ответы, я решился заняться этим делом лишь потому-что на gcup не увидел ни одного урока по HTML, вот и захотел внести свой вклад. Ну я так понял что это бесполезные уроки и продолжать я их не буду...

Сообщение отредактировал Ex3mDM - Вторник, 15 Ноября 2011, 20:51
ZizilkДата: Вторник, 15 Ноября 2011, 21:03 | Сообщение # 11
постоянный участник
Сейчас нет на сайте
Уроки по простой вёрстке для игродела бесмысленны(сайт визитку для команды можно и на готовм движке сделать) и беспощадны (овладев простой вёрсткой игродел сразу бросится собирать команду для браузерки).

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

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг