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

Разработка своих веб-приложений и страничек

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

Сообщение zk » 12 фев 2009, 01:50

Эта статья поможет вам создать простешую 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
zk
Администратор
 
Сообщения: 1972
Зарегистрирован: 02 сен 2007, 16:04
Домен: vfose.ru

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

Сообщение Rostov114 » 14 фев 2009, 14:41

Также имеются зеркала htmlbook.ru: htmlbook.vfose.ru | htmlbook.hsdn.info
Некоммерческий проект «HSDN»
Аватара пользователя
Rostov114
Автор
 
Сообщения: 3183
Зарегистрирован: 18 окт 2007, 02:21
Откуда: Россия ( Саратов / Ростов-на-Дону )

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

Сообщение pitbull1993 » 28 апр 2009, 12:55

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

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

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

Изображение
Пользователи федоры - как тараканы. Слабые духом и нервами давно вымерли, а оставшихся в живых уже ничем не взять.
Аватара пользователя
Conteo
Активный участник
 
Сообщения: 1813
Зарегистрирован: 14 мар 2008, 13:21
Откуда: Саратов, Заводской район
Домен: http://conteo.vfose.ru

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

Сообщение Shadow-zone » 28 авг 2009, 11:46

Как правильно пишется тег background мне надо фон сайта сделать =)
background="D:/pic.jpg" так?
Аватара пользователя
Shadow-zone
Активный участник
 
Сообщения: 196
Зарегистрирован: 29 дек 2008, 11:22
Откуда: Балашов
Домен: их 2 xD

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

Сообщение JavaExport » 28 авг 2009, 11:56

Shadow-zone писал(а):Как правильно пишется тег background мне надо фон сайта сделать =)
background="D:/pic.jpg" так?
Вот так background-image:url(files/image.png)
Только это уже css а не html....
JavaExport
Активный участник
 
Сообщения: 937
Зарегистрирован: 15 сен 2008, 18:45
Домен: http://mobilephone.ixbb.r

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

Сообщение Shadow-zone » 28 авг 2009, 12:07

Благодарю
Аватара пользователя
Shadow-zone
Активный участник
 
Сообщения: 196
Зарегистрирован: 29 дек 2008, 11:22
Откуда: Балашов
Домен: их 2 xD

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

Сообщение Shadow-zone » 28 авг 2009, 12:12

Не хочет отображаться =(
Сделал так
<background-image:url(back.png)
Аватара пользователя
Shadow-zone
Активный участник
 
Сообщения: 196
Зарегистрирован: 29 дек 2008, 11:22
Откуда: Балашов
Домен: их 2 xD

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

Сообщение JavaExport » 28 авг 2009, 12:20

Shadow-zone писал(а):Не хочет отображаться =(
Сделал так
<background-image:url(back.png)
Прикрути файлик со стилями. Так удобней будет.
JavaExport
Активный участник
 
Сообщения: 937
Зарегистрирован: 15 сен 2008, 18:45
Домен: http://mobilephone.ixbb.r

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

Сообщение Shadow-zone » 28 авг 2009, 14:43

Да мне надо,у меня обычная страничка Мне нужен фон и всё
Аватара пользователя
Shadow-zone
Активный участник
 
Сообщения: 196
Зарегистрирован: 29 дек 2008, 11:22
Откуда: Балашов
Домен: их 2 xD

След.

Вернуться в PHP, HTML, CSS...

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1