Спонсоры

HTML Начинающим. Вводная

Приветствую Вас, уважаемый посетитель! Нет сомнений, что Вы уже много побродили по безбрежному морю Интернета. Есть люди, для которых этот параллельный мир – родная стихия. Если Вы хотите сделать первый шаг от простого потребления интернет-информации к активному участию в ее создании – эта страничка поможет Вам сделать этот первый шаг в освоении сайтостроительства.

Основа сайтостроения – язык HTML (ХТМЛ) (от англ. HyperText Markup Language - «язык разметки гипертекста») - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Существует большое количество веб-инструментов, позволяющих создавать сайты любой сложности, и новичков охватывает тихий ужас от первого знакомства с ними. Не нужно впадать в отчаяние. Больше половины сайтов в Интернете созданы только с помощью языка ХТМЛ. Освоив предлагаемый материал Вы сможете строить довольно приличные сайты, которые не стыдно будет выставить на всеобщее обозрение. А совершенству нет предела. Основная часть моих статей посвящена изучению языка HTML. В качестве вспомогательного материала здесь предложены таблица цветов, таблица основных тегов, знакомство с мета тегами. Конечно, многое здесь дано в несколько сокращенном виде, но для начала и создания полноценного сайта этого вполне достаточно.

И так начнем!

Прежде всего, перед началом работы создайте на вашем компьютере отдельную папку для будущей страницы. У себя на компьютере я создал такую папку на диске Е и назвал ее Мой первый сайт. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот - notepad (start → programs → accessories → notepad или пуск → программы → стандартные → блокнот) и скопируем туда следующий текст:


  <html>
<head>
<title>Моя первая страничка </title>
</head>
<body>
Это моя первая страница. У меня все получится.

</body>
</html>     посмотреть

Сохраним этот документ, присвоив ему имя index.html - Файл → Сохранить Как (File → Save as)
Сохраняете документ именно с таким именем index.html, а не просто index расширение *.html должно быть обязательно, иначе у вас ни чего не получится.
Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять его через Файл → Сохранить (File → Save).
(Я у себя на компьютере сохранил на Е: диске в папке: Мой первый сайт, с именем index.html Е:/Мой первый сайт/index.html)

Теперь откроем браузер, к примеру, Internet Explorer, и откроем в браузере Ваш документ. Файл - Открыть - кнопка Обзор - Ваш документ (index.html) Если вы что-то измените в вашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в вашем браузере, надо не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ (блокнот). Посмотрим теперь, что у нас получилось, и разберемся, как все это работает.

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

Пример тэга: <br> он отвечает за перенос текста на другую строку. Попробуйте вставить еще несколько тэгов <br> в нашем документе перед «У меня все получится.». Сохраните. Посмотрите в вашем браузере, что получилось. Итак, все, что находится между < и > - это тэг. Текст, не находящийся между такими скобками < > весь виден при просмотре в браузере.

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

<html>

Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:

</html>

Некоторые тэги, вроде <br> или <hr>, не требуют закрывающего тэга.


  <html>
<head>
<title>Моя первая страничка </title>
</head>
<body>
Это моя первая страница.
<br>
У меня все получится.
<hr>
</body>
</html>     посмотреть


<head> </head> - голова документа
<body> </body> - непосредственно тело документа

Все тэги, расположенные между <head> и </head>, это что-то вроде служебной информации.
<title>- заголовок документа. Зачем он? Откройте Internet Explore с вашим документом и посмотрите на заголовок окна. Все, что будет написано между <title> и </title> будет отображаться в заголовке вашего окна. Все тэги, расположенные между <body> и </body> - непосредственное содержание документа. Следующие несколько страничек будут посвящены именно этим тэгам: вы узнаете, как менять цвет текста, фона, как делать текст крупнее или мельче, я расскажу как вставлять картинки в ваш документ, рисовать таблицы и многое другое. Но прежде, чем мы закончим наш разговор о тэгах, я хотел бы обрисовать всю картину в общем.

<тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).

Обратите внимание:

<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1>

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

Следующая очередность написания тегов нежелательна и не верна, она может привести к ошибкам на вашей страничке:

<тэг1><тэг2><тэг3> ... </тэг3></тэг1> </тэг2>

Будьте внимательны, и пишите код своих страничек внимательно и вдумчиво.



  Перейти к следующей странице
2009 - 2020г. andron09_73@mail.ru