В первом уроке мы уже рассмотрели маленький пример создания html-страницы. Теперь создадим более трудную страничку. Хочу отметить, что я буду объяснять как это сделать без применения специальных программных средств. Все, что понадобится - обычный блокнот от Windows. Итак, начнем. Откройте блокнот и скопируйте в него следующее:
Код
<html> <head> <title>Моя первая страница</title> </head> <body> <center><h1>Заголовок моей первой страницы</h1></center> Мне очень нравится мой первый сайт, ведь я его создаю без помощи сторонних программ. Мои эмоции радости можете посмотреть на картинке ниже: <br/><br/> <center><img alt="Эмоции радости" src="http://img-fotki.yandex.ru/get/3417 /koziuck-vladimir.1f/0_33a42_9dfed6e1_L"></center> <br/><br/> <font style="color:green">Вау, этот текст зеленый</font> <br/><br/> <b>А этот текст выделен жирным</b> <br/><br/> Как же мне нравится этот html! <br/><br/> Теперь мне осталось изучить теги html, и я смогу уже создавать страницы такими, какими я хочу. <hr> Этот пример был написан сайтом <a href=http://icm-ucoz.at.ua/> http://icm-ucoz.at.ua/</a> - за что я ему благодарен. <br/><br/> До новых встреч! </body> </html>
Далее нажмите "сохранить как", в поле тип файла выберите "все файлы", а в названии напишите index.html. Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
С тегами , , , - Вы уже знакомы из предыдущего урока. Для тех, кто не читал предыдущий урок ещё раз напомню, что теги и являются обязательными, поскольку они отвечают за видимую часть для пользователя. 1) - эти теги должны присутствовать на странице обязательно. 2) - между этими тегами заключается весь видимый контент на странице. 3) - описание заголовка страницы можно опустить, но я не советую Вам это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про эти теги читайте в описание заголовочных тегов. 4) - между этими тегами прописывается название страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. чаще всего называют заголовком страницы. Теперь перейдем к тегам, которые находятся в теле страницы (). 5)
- эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. 6) - это заголовочные теги, обычно в них заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы". Примечание: эти теги имеют большой вес в ранжировании, поэтому ими необходимо пользоваться с умом. 7) - это одиночный тег, который не требует закрывающего тега. Он означает переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку. 8) - это одиночный тег, который выводит изображение. → src - обязательный параметр, в котором указывается адрес изображения, т.е. вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение. Примечание: если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения. → alt или title - в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. 9) - эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно указать здесь. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке. 10) - выделить жирным. Все что заключено между и будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является . 11) - одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее. 12) текст_ссылки - этот тег один из самых распространенных. Он позволяет сделать ссылку. → href - этому параметру необходимо присвоить URL ссылки, на которую пользователь перейдет при нажатии. Он не является обязательным параметром, однако если его нету, то какой толк от такой ссылки, которая никуда не ведет. Примечание: если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа.
