Вернуться   Форум ChatPlanet.ru > Сервис «Мой чат» aka «Август» > Уроки

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

Ответ
 
Опции темы Опции просмотра
Старый 06.03.2009, 12:56   #1
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию Изучаем HTML. Часть 1 — Основы

Этой темой я начинаю цикл статей по веб-дизайну. Начинать надо с самого начала. А начало всего веб-дизайна — это html.

Что такое страничка в интернете? Это всего лишь файл, в котором по определенным правилам описано ее содержание. Сейчас мы с Вами создадим нашу первую html страничку, которую Вы сможете тут же и посмотреть.

Создавать html странички можно в любом текстовом редакторе. На первых порах вполне подойдет обычный «Блокнот» Windows. Открываем его.

Перед нами пустой файл — пустая страничка. Давайте начнем ее заполнять. Перед тем, как что-то писать в файле надо понять как ваш браузер (программа для просмотра страничек — обычно Internet Explorer) будет его показывать. Весь текст файла будет состоять из двух составляющих — сам текст и специальные указания для браузера, как показывать этот текст. Эти указания называются тегами.

Теги — это основные элементы html странички. Они всегда пишутся внутри треугольных скобок: < и >.

Теги бывают одиночные, например:
Код HTML:
<br> <hr> <img>
А бывают парные (их еще называют контейнерами):
Код HTML:
<div>содержание</div>
<h1>содержание</h1>
Как видно из примеров, внутри парных тегов надо поместить какое-то содержание. Парные теги бывают открывающие и закрывающие (начинаются с символа /). Содержание тоже может включать в себя другие теги, в том числе и парные. Закрытие содержимого обязательно надо делать в порядке, обратном открытию.
Пример:
Код HTML:
<div><p>Правильный пример.</p></div>
Код HTML:
<div><p>Неправильный пример.</div></p>
Код HTML:
<div>Тоже <p>правильный пример</p> использования тегов.</div>
Хватит теории! Давайте перейдем к практике.
Вписываем в наш пока что пустой файл:
Код HTML:
<HTML>
<HEAD>
<title>Моя первая html страничка</title>
</HEAD>
<BODY>
Всем привет!
</BODY>
</HTML>
Сохраняем. Например, как firstpage.txt. Теперь меняем расширение файла на html — получится firstpage.html. Этот файл уже можно открыть браузером. Открыли? Обратите внимание на заголовок окна — там должен быть текст «Моя первая html страничка». А внутри окна — «Всем привет!». Поздравляю, Вы только что создали свою первую html страничку.

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

Надо все таки разобраться, что написано внутри файла. А там находится всего 4 парных тега:
<HTML>…</HTML> — объявление html документа. Внутри этих тегов должно находиться все содержание страничек.
Содержание страничек делится на 2 раздела:
<HEAD>…</HEAD> — заголовок странички.
<BODY>…</BODY> — тело странички.
Внутрь заголовка мы вписали:
<title>…</title> — объявление заголовка для окна браузера.
А в тело документа просто списали текст.

Как Вы видите, имена тегов можно писать как заглавными, так и строчными буквами. Можно даже вперемешку: <hTmL>. Это ни на что не повлияет.

Давайте дальше знакомиться с тегами html.
Есть такой полезный тег, который воспринимается браузерами как комментарий:
<!-- комментарий --> — тег комментария.
Комментарий никак не будет показан и не влияет на оформление текста. Его удобно использовать для напоминаний самому себе или для временного скрытия ненужных кусков. Давайте дополним комментариями нашу страничку:
Код HTML:
<HTML>
<!-- Начало документа -->
<HEAD><!-- Начало заголовка -->
<!-- Текст заголовка -->
<title>Моя первая html страничка</title>
</HEAD><!-- Конец заголовка -->
<BODY><!-- Начало тела странички -->
Всем привет!
<!-- Комментарии могут
быть многострочными -->
</BODY><!-- Конец тела странички -->
<!-- Конец документа -->
</HTML>
Вот что должно получиться: Посмотреть пример.

На этом, пожалуй, с основами HTML можно и закончить. Дальнейшее изучение тегов html мы продолжим в следующих частях.

В этой теме я жду Ваших вопросов только по основам.

© Mickeleangelo
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием
Эти 27 пользователя(ей) сказали Спасибо Mickeleangelo за это полезное сообщение:
Alex Sandra (01.11.2010), Baunti (21.02.2010), Charm~El` (01.05.2012), Evgeny aKa СгУщЕнКa (29.07.2010), eXandr (06.03.2009), Heartbeat (07.08.2012), Mistik (30.03.2012), Newta (19.09.2009), Nighttime Bird (06.03.2009), Odinochka (16.03.2011), OhneWorte (07.03.2009), Otorva (15.03.2011), Sabuana (13.04.2015), Star (06.03.2009), Tender (15.02.2011), Volchonok (02.08.2009), xxx (21.06.2010), взюзю (06.03.2009), ЗлаЯ_БякО (09.05.2010), Капитан Корса (02.04.2010), КроЛичка (22.06.2009), Ламия (06.03.2009), Ланочка (06.03.2009), Леди Стерва (06.03.2009), Лисёнка (04.01.2012), Мамуся (30.09.2010), ~Чудо~ (07.02.2011)
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изучаем HTML. Часть 7 — Таблицы Mickeleangelo Уроки 4 21.02.2010 12:41
Изучаем HTML. Часть 8 — Что такое CSS Mickeleangelo Уроки 6 31.10.2009 13:15
Изучаем HTML. Часть 6 — Списки Mickeleangelo Уроки 0 20.03.2009 00:19
Изучаем HTML. Часть 5 — Ссылки Mickeleangelo Уроки 0 14.03.2009 16:57
Изучаем HTML. Часть 3 — Атрибуты тегов Mickeleangelo Уроки 0 09.03.2009 17:25


Текущее время: 14:23. Часовой пояс GMT +4.


Рейтинг Chat Planet Top
Посетителей всего
Просмотров сегодня
Посетителей сегодня
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
При перепечатке материалов форума обязательна активная ссылка на тему — источник информации.