Современные веб-страницы кроме 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
