Урок по кодингу на HTML #2. By Ex3mDM.
| |
Ex3mDM | Дата: Понедельник, 14 Ноября 2011, 23:30 | Сообщение # 1 |
участник
Сейчас нет на сайте
| Добрый день! В этом уроке я как можно подробней объясню теги, их параметры и другие их аспекты. Также внесу изменения в код прошлого урока и прокомментирую все свои действия. И, так, начнем! Я приложу код прошлого урока: 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: Продолжим... Как я писал в прошлом уроке, с этого тега начинается чтение документа. Этот тег имеет так сказать "брата", закрывающий тег, он пишется в самом конце документа и говорит браузеру о конце. Если кто не знает, то закрывающийся тег пишется вот так: Закрыть тег значит - поставить слеш "/" перед тем, как вы начнете писать имя тега. Думаю здесь объяснил как можно подробней. Дальше больше... После тега <HTML>, мы видим тег: Он используется для обозначения "технической" части нашего документа, но пока в своих уроках я не буду туда ничего добавлять , кроме тега <TITLE>, его мы рассмотрим ниже. Code <TITLE> Это заголовок </TITLE> Это заголовок документа, а именно - текст, который мы видим во вкладке, название нашего документа. Здесь мне в голову ничего больше не приходит. Этот тег закрывает нашу "техническую" часть и мы переходим к тегу: Данный тег назвавают - "тело" документа. Именно он отображает текст, картинки, таблицы которые мы создаем. Его нельзя использовать в документе более одного раза. Всегда имеет конечный тег: Следующий тег: Это очень удобный контейнер объектов, которым можно манипулировать. Например - при нажатии на какую-либо кнопку - появлялось меню, этот аспект мы разберем в след. уроке. Вот мы и перешли к параметрам тегов. По синтаксису 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(фон) - картинка заднего фона, как ставить ее рассмотрим в след. уроке. Возможно я что-то забыл занести в список, вспоминал довольно долго... Следующая строка документа: Данный тег создает ячейку. Думаю, что здесь параметры не нужны, хотя их много. Данный тег создает новый ряд ячейки, которую мы создали шириной в 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 к концу. Удачи в программировании!
В следующем уроке я сделаю графическую оболочку, гиперссылки, покажу что-то новенькое.
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, спасибо, уже сонный не увидел что написал.
|
|
| |
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, можно прямо ссылкой у используемого тега. Там объяснено лучше + указаны ньюансы использования, какие из них работают в каких браузерах
|
|
| |
|