Страница 1 из 9

HTML для начинающих

СообщениеДобавлено: 12 фев 2009, 01:50
zk
Эта статья поможет вам создать простешую HTML страничку и познакомит вас с базовыми принципами языка разметки HTML.

Современные веб-страницы кроме HTML используют CSS стили, но они рассматриваться в статье не будут

Весь HTML код состоит из тегов, названиях которых заключены в треугольные скобки < и >. Бывают одиночные теги, например перевод строки <br>, а бывают двойные, например выделение текста <b>Выделенный текст</b>, а ещё у тегов бывают разные параметры, например у ссылки <a href="http://vfose.ru/">Классный сайт</a>, тут http://vfose.ru параметр.

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


Код: Выделить всёРазвернуть
<html> <!-- начинаем страничку -->
<
head> <!-- начинаем заголовочную часть странички -->
<
title>Моя первая страничка</title> <!-- здесь пишется заголовок, который будет отображаться в заголовке окна браузера -->
<
meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <!-- Кодировка странички, будем использовать стандартную кодировку Windows -->
<
link rel="shortcut icon" href="http://vfose.ru/favicon.ico"> <!-- адрес иконки, подробнее в статье про favicon -->
</
head> <!-- конец заголовочной части -->
<
body> <!-- начало тела документа -->
Оформление текста <!-- просто текст пишется просто как текст =) -->
<
hr> <!-- горизонтальная полоска, ещё она делает перевод строки -->
Здесь мы рассмотрим обычный текст
<br> <!-- перевод строки, то что будет идти дальше будет на следующей строке -->
Текст на следующей строке. <!-- этот текст мы увидим на следующей строке -->
<
br>
<
b>Выделенный текст</b> <!-- этот текст мы выделили -->
<
i>Наклонный текст</i> <!-- а этот наклонили, и не перевели на следующую строчку -->
<
br>
<
font color="red">Красный текст</font> <!-- немного раскрасили текст -->
<
hr>
Ссылки
<br>
<
a href="http://vfose.ru">Попробуем сделать ссылку на вФОСе.ру</a> <!-- между кавычками "тут" пишем адрес, а в теге текст -->
<
br>
<
a href="/page.html">Ссылка на другую страничку вашего сайта</a> <!-- это ссылка на страничку page,html которую вам надо создать -->
<
hr>
Изображения
<br>
<
img src="http://vfose.ru/vfose.gif"> <!-- тут мы вставляем логотип вФОСе.ру --> 
<br>
<
img src="/image.jpg"> <!-- так вставляется картинка image.jpg, которую вы должны положить рядом с index.html -->
<
br>
Теги можно комбинировать теги
<a href="http://vfose.ru"><img src="http://vfose.ru/button.png"></a> <!-- картинка в теге ссылки, так можно вставить кнопку вФОСе.ру -->
<
hr>
В принципе этих тегов хватит чтобы сделать небольшую страничку о себе и понять базовые принципы HTML.
</
body> <!-- закрываем тело документа -->
</
html> <!-- закрываем страничку --> 


Откройте блокнот (Пуск->Программы->Стандартные->Блокнот), скопируйте в него приведённый выше HTML код, выберите в меню Файл->Сохранить как, в появившемся диалоге в качестве имени файла напишите index.html, в качестве типа файла выберите Все файлы и нажмите кнопку Сохранить.

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

Если скопировать страничку на веб-сервер, (например смотрите статью Установка и настройка сервера приложений TopServer), то вы сможете показать её друзьям и всему миру.

Здесь приведена лишь малая часть тегов, но даже её хватит чтобы создать простую страничку со ссылками и картинками.

Полный список тегов HTML с описанием и примерами вы можете скачать здесь.

Пробуйте!

(c) zk

Re: HTML для начинающих

СообщениеДобавлено: 14 фев 2009, 14:41
Rostov114
Также имеются зеркала htmlbook.ru: htmlbook.vfose.ru | htmlbook.hsdn.info

Re: HTML для начинающих

СообщениеДобавлено: 28 апр 2009, 12:55
pitbull1993
Люди помогите я вот начал делать сайт а как мне сделать штоб и вводил адрес и открывался мой сайт например www.#######.ru а не так file://localhost/D:/Documents%20and%20Settings.......... кто знает напишите пожалуста!!

Re: HTML для начинающих

СообщениеДобавлено: 28 апр 2009, 19:34
Conteo

Re: HTML для начинающих

СообщениеДобавлено: 28 авг 2009, 11:46
Shadow-zone
Как правильно пишется тег background мне надо фон сайта сделать =)
background="D:/pic.jpg" так?

Re: HTML для начинающих

СообщениеДобавлено: 28 авг 2009, 11:56
JavaExport
Shadow-zone писал(а):Как правильно пишется тег background мне надо фон сайта сделать =)
background="D:/pic.jpg" так?
Вот так background-image:url(files/image.png)
Только это уже css а не html....

Re: HTML для начинающих

СообщениеДобавлено: 28 авг 2009, 12:07
Shadow-zone
Благодарю

Re: HTML для начинающих

СообщениеДобавлено: 28 авг 2009, 12:12
Shadow-zone
Не хочет отображаться =(
Сделал так
<background-image:url(back.png)

Re: HTML для начинающих

СообщениеДобавлено: 28 авг 2009, 12:20
JavaExport
Shadow-zone писал(а):Не хочет отображаться =(
Сделал так
<background-image:url(back.png)
Прикрути файлик со стилями. Так удобней будет.

Re: HTML для начинающих

СообщениеДобавлено: 28 авг 2009, 14:43
Shadow-zone
Да мне надо,у меня обычная страничка Мне нужен фон и всё