Главная | Регистрация | ВходПриветствую Вас Гость | RSS
Форма входа
Меню
Статьи о кс
Другое о CS
Друзья сайта
Наш опрос
Новый проэкт сайта
Эта статья поможет вам создать простешую 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, в качестве типа файла выберите Все файлы и нажмите кнопку Сохранить.

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


Поиск
скачать
Новости
Немного о фосе
Архив записей
про Vkontakte
Мини-чат
Прогноз погоды
Статистика сайта
Статистика

Сделать бесплатный сайт с uCoz