Эта статья поможет вам создать простешую 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, в качестве типа файла выберите Все файлы и нажмите кнопку Сохранить.
Теперь вы можете открыть этот файл в браузере, кликнув по нему мышью, и насладится вашей первой страничкой.
|