bonuswm.org - сервис раздачи бонусов webmoney

Пример создания html страницы в блокноте

Создать простую html страницу в блокноте

Маленький пример создания html-страницы. Хочу отметить, что я буду объяснять как это сделать без применения специальных программных средств. Все, что понадобится для работы — это обычный блокнот от Windows. Для более удобной работы рекомендую скачать Notepad++ (продвинутый блокнот с возможностью подсвечивания html-тегов). Итак, начнем.

Откройте блокнот и скопируйте в него следующее:

<html>
<head>
<title>Главная страница – страница обо мне</title>
</head>
<body>
<center><h1>Информация обо мне</h1></center>
Краткая биография обо мне
Родился в 1985 году в городе Москва. Закончил в 2008 году МАИ.
На данный момент работаю ведущим инженером в крупной авиакомпании.
Моя мечта стать ведущим по машине.Поскольку я люблю авиацию, то хотел бы поделиться несколькими интересными
фотографиями на эту тему
<br/><br/>
<center><img alt=”Два самолета”
src=”https://img-fotki.yandex.ru/get/9931/160700675.0/0_110e34_54188f48_-1-orig”>
</center>
<br/><br/>
<font style=”color:green”>Этот текст зеленый</font>
<br/><br/>
<b>Просто пример жирного текста</b>
<br/><br/>
Низ страницы
<br/><br/>
В данном примере мы рассмотрели кратко основные теги HTML, теперь можно пробовать создавать
несколько связанных страниц через ссылки и выкладывать сайт в интернет.
<hr>
Этот материал был написан благодаря сайту
<a href=http://zarabotat-na-sajte.ru/>
http://zarabotat-na-sajte.ru/</a> – за что я ему благодарен.
<br/><br/>
Спасибо. До новых встреч!
</body>
</html>

Далее нажмите “сохранить как”, в поле тип файла выберите “все файлы”, а в названии напишите index.html. Кодировка UTF-8 Обязательно в конце названия должно быть расширение .html (не .txt), иначе браузеры не будут интерпретировать его как веб-документ.

Не видно картинку? Нажмите!

Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу

 

Описание html тегов из примера

 

1<html></html> — эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.

Любая html страница имеет следующую структуру:

<html> <head> … Заголовочные теги … </head> <body> … Тело страницы … </body> </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> и т.п. может быть много.

Более подробно про эти теги читайте в уроке 14 HTML теги <h1>-<h6> – заголовочные теги внутри страницы


7. <br/> — это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.


8. <img alt=”подсказка” src=”URL_ИЗОБРАЖЕНИЯ”> — это одиночный тег, который выводит изображение.

  src — обязательный параметр, в котором указывается адрес изображения (вместо       URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
Примечание:

    • Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;
    • Не забудьте указать расширение изображения. Например, .jpg.gif.jpeg.
    • alt или title — в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта, особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.

Более подробно про <img> читайте в специальном уроке: html тег <img>

9. <font></font> — эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.

Примечание: <span></span> — аналогичный тег.

Есть также свойство CSS font, в котором можно задавать все эти параметры.


10. <b></b> — выделить жирным. Все, что заключено между <b> и </b>будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>.

Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.

Читайте также: как сделать жирный шрифт html


11. <hr/> — одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее.


12. <a href=”URL”>текст_ссылки</a> — тег для создания ссылок.

href=”URL” — этому параметру необходимо присвоить URL ссылки, на которую ведет ссылка. Является обязательным параметром.

Примечание

Если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа. Например:

<a href=”stranica_50.html“>stranica_50.html</a> Можно писать и полный адрес страницы <a href=”http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.html“>http://САЙТ.РУ/КАТЕГОРИЯ/stranica_50.html</a>

Этому важному тегу посвящен специальный урок: HTML тег <a>.

Более подробное описание этих и других тегов читайте в следующих уроках.


Уважаемый читатель, теперь Вы уже умеете создавать элементарные страницы с изображениями и ссылками. Описанные выше теги встречаются довольно часто и у них есть много различных параметров, о которых Вы узнаете далее. Целью этого урока было ознакомление с простыми тегами html страниц. Теперь советую перейти к следующим урокам.

 

Автор

admin

Комментарии:

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.