Перейти к содержанию

Добро пожаловать в сообщество творческих людей - ARTTalk.ru!

Уважаемые пользователи, если вы были зарегистрированы ранее, вам необходимо пройти процедуру восстановления пароля с помощью адреса электронной почты.

Для новых пользователей доступна регистрация.

Тема для обсуждения новой версии сообщества.

Если возникают какие либо проблемы с восстановлением старого аккаунта, вы можете воспользоваться формой обратной связи.

Felix 17

HTML: первые шаги

Рекомендуемые сообщения

html_tutorial_pic_001_404.jpg

 

Доброго всем времени суток.

 

Пишу данный урок для тех, кто не знаком с технической стороной WEB дизайна. А именно языком HTML.

 

Описанные ниже действия может повторить любой, без использования каких-либо специальных программ, в простом текстовом редакторе – блокноте.

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

 

Итак, начнем.

 

Для создания простейшей веб страницы нам потребуется блокнот, и, естественно, голова.

Для начала опишу принцип работы обычной html страницы. Все действия прописаны тэгами, аналогичными ВВ-кодам, которые используются форумами. Вот некоторые простейшие тэги :

 

html_tutorial_pic_1_450.jpg

 

Большинство тэгов html используется попарно – открывающий и замыкающий.

Распространенной ошибкой при написании страницы является отсутствие замыкающего тэга. Внимательно следите за количеством открываемых тэгов.

 

Теперь переходим к моей любимой части – практике. Откройте блокнот и напишите несколько слов, например:

 

Это тестовая страница, написанная с помощью языка html.

 

Далее мы можем использовать приведенные выше коды:

 

html_tutorial_pic_2_199.jpg

 

Теперь сохраните документ в расширении html, к примеру: page1.html

 

Посмотрим, что у нас получилось:

 

html_tutorial_pic_3_186.jpg

 

Неплохо, верно?

 

С тэгами можно экспериментировать. Если у вас что-то не получилось – снова откройте страницу, как текстовой документ и проверьте количество открытых тэгов.

 

Однако для серьезной работы требуется еще кое что - необходимо соблюдать структуру HTML документа.

 

Начинать документ следует следует с тэга <HTML> и заканчивать его тэгом </HTML>. Эти тэги обозначают, что находящиеся между ними строки - это единый HTML-документ.

 

Обычно структура документа выглядит так:

 

html_tutorial_pic_4_626.jpg

 

Примечание: последний тэг должен находиться в конце страницы.

 

Теперь я расшифрую то, что тут написано.

 

DOCTYPE - Определяет тип документа, в нашем случае это html.

 

head - в дословном переводе "голова" в нашем случае это начало заголовка. Этот тэг является контейнером, и помимо самого заголовка может включать в себя стили, ссылки и скрипты. За сам заголовок отвечает следующий тэг - title

 

title - собственно, между этими тэгами и пишется заголовок, и затем все запирается тэгом head.

 

body - как всегда дословный перевод не далек от истины - тело, в нашем случае это содержание документа - текст, картинки, видео, музыка, файлы, ссылки, все что угодно. И это как всегда запирается аналогичным закрывающим тэгом.

 

В конце документа, как я говорил ранее следует поставить закрывающий тэг html для того, чтобы страница стала целостной.

 

Итак, теперь вы знаете основы, и можете сделать первые шаги в освоении языка HTML, в следующем уроке я поведаю вам о расширенных параметрах документа, более сложных тэгах и комбинациях.

 

До новых встреч, с вами был Felix 17, немного веб дизайнер, немного программист , и ваабще очень хороший парень. :-)

5a9823cd4dc1f_htmltutorialpic001.jpg.85142ad13e6e3a2fe0d81544c9d5729c.jpg

5a9839993438d_htmltutorialpic3.jpg.d1d8f16edcba2a9696c7c7518894c435.jpg

5a98399945518_htmltutorialpic2.jpg.9d31f0dcad7d0b1e616a76e61d30888f.jpg

5a98399959f7b_htmltutorialpic4.jpg.71ec65bd0cd32e0ddf7ed3f4a70f17de.jpg

html_tutorial_pic_1.jpg.ed28a6b2562a3db4aa8a4ebcb115f67a.jpg

Изменено пользователем NULL

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Давно хотел начать развивать этот раздел! Felix 17, спасиб! Ждем продолжения

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Felix 17,

как здорово, что вы открыли эту ветку, очень во время и очень важно,

Спасибо :clapclap:

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Малодец Феликс продалжай в томже духе

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Начало не плохое.

Позволю себе привести сайт http://htmlbook.ru удобный справочник по html и css.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Справочник - хорошо, а уроки с примерами лучше.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

обоже

 

<p> это не переход на следующую строчку, а параграф. И его нужно обязательно закрывать, правильно он используется как <p>текст</p>, а ваш вариант ни один валидатор не примет.

<br> это переход на следующую строчку

 

тег <div> тоже обязательно закрывать!

 

html 4 уже никто не использует, поэтому doctype правильно указывается как: ссылка

 

 

Пожалуйста читайте спецификации W3C, ну пожааалуйста!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ZORG

темаа ну очень старая)) ее просто выкапали в глубинах форума

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Уопс ^^

Ну, тогда про doctype можно было и не писать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ZORG, Спасибо за ценные поправки, очень жаль что вы не видели эту тему раньше, когда она была более актуальна. 8-)

 

Урок построен на материалах из учебников по HTML, видимо, недостаточно подробных, но к сожалению ничем другим я в те времена не располагал. Я надеюсь в этом уроке все же есть хоть немного полезной информации для начинающих. :)

 

Внес поправки.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну раз так, то поправьте пожалуйста doctype, в наши дни HTML 4 никто не использует.

 

а пример должен выглядеть так:

<p>Эта страница написана с помощью хтмл <и>с наклоном</и></p>

<a>Ссылка</a>

<p>Просто так <б>полужирным</б ></p>

 

парсер теги не пропускает, поэтому пришлось i заменить на и

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


×

Важная информация

Мы разместили cookie-файлы на ваше устройство, чтобы помочь сделать этот сайт лучше. Вы можете изменить свои настройки cookie-файлов, или продолжить без изменения настроек. Условия использования