02:27 Урок 2 - Пример создания простой html страницы. Создание html-документа через блокнот | |
Пример создания html страницыВ первом уроке мы уже рассмотрели маленький пример создания html-страницы. Теперь создадим более сложную страничку. Хочу отметить, что я буду объяснять как это сделать без применения специальных программных средств. Все, что понадобится - обычный блокнот от Windows. Можете скачать Notepad++, он будет подсвечивать теги. Итак, начнем. Откройте блокнот и скопируйте в него следующее: <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://zarabotat-na-sajte.ru/> http://zarabotat-na-sajte.ru/</a> - за что я ему благодарен. <br/><br/> До новых встреч! </body> </html> Далее нажмите "сохранить как", в поле тип файла выберите "все файлы", а в названии напишите index.html. Обязательно на конце должно быть .html Если по каким-то причинам у Вас не получается создать html страницу, то Вы можете скачать предыдущий пример по ссылке: index.rar. Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу. Описание тегов из примера 1) <html></html> - эти теги должны присутствовать на странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница. 2) <body></body> - между этими тегами заключается весь видимый контент страницы. 3) <head></head> - внутри этого тега должны располагаться все заголовочные теги. Его можно опустить, но я не советую Вам это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про <head></head> читайте в описание заголовочных тегов 4) <title></title> - между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. <title></title> часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег Title Теперь перейдем к тегам, которые находятся в теле html страницы (внутри <body> и </body>). 5) <center></center> - эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. 6) <h1></h1> - это один из класса тегов заголовочных тегов h1-h6, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы". Примечание: эти теги имеют большой вес в ранжировании сайта, поэтому ими необходимо пользоваться с умом. При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег h1, а дальше могут идти уже h2, h3 и т.д. Главное, чтобы не было сначала h2, потом h1, потом h3 и т.п. Должна быть строгая иерархия. Заголовков h2, h3 и т.п. может быть много. 7) <br/> - это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку. 8) <img alt="подсказка" src="URL_ИЗОБРАЖЕНИЯ"> - это одиночный тег, который выводит изображение. → src - обязательный параметр, в котором указывается адрес изображения, т.е. вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение. Примечание:
→ alt или title - в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта, особенно в поиске по картинкам. Более подробно про <img> читайте в специальном уроке: html тег <img> 9) <font></font> - эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке. 10) <b></b> - выделить жирным. Все что заключено между <b> и </b> будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>. 11) <hr/> - одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее. 12) <a href="URL">текст_ссылки</a> - этот тег один из самых распространенных. Он позволяет создавать ссылки. → href - этому параметру необходимо присвоить URL ссылки, на которую пользователь перейдет при нажатии. Он не является обязательным параметром, однако если его нету, то какой толк от такой ссылки, которая никуда не ведет. Примечание: если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа. Этому важному тегу посвящен специальный урок: Урок 5. HTML тег a. Более подробное описание этих и других тегов читайте в следующих уроках. Уважаемый читатель, теперь Вы уже умеете создавать элементарные страницы с изображениями и ссылками. Описанные выше теги встречаются довольно часто и у них есть много различных параметров, о которых Вы узнаете далее. Целью этого урока было ознакомление с простыми тегами html страниц. Теперь советую перейти к следующим урокам. Следующий урок: Урок 3. Основные html теги | |
| Категория: Все о сайтах | Просмотров: 349 | | |
| Всего комментариев: 0 | |