Пятница, 29.03.2024, 12:30
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 65
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 Пример создания html страницы

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

В первом уроке мы уже рассмотрели маленький пример создания 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://zarabotkii.ru/>www.zarabotkii.ru</a> - за что я ему благодарен. <br/><br/>

До новых встреч!

  </body>

         </html>

Далее нажмите "сохранить как", в поле тип файла выберите "все файлы", а в названии напишите index.html.

 

уроки html

 

Если по каким-то причинам у Вас не получается создать html страницу, праверте написаный код ещё раз.

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

С тегами <html></html>, <head></head>, <body></body>, <title></title> - Вы уже знакомы из предыдущего урока. Для тех, кто не читал предыдущий урок ещё раз напомню, что теги <html></html> и <body></body> являются обязательными, поскольку они отвечают за видимую часть для пользователя.

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

2) <body></body> - между этими тегами заключается весь видимый контент страницы.

3) <head></head> - внутри этого тега должны располагаться все заголовочные теги. Его можно опустить, но я не советую Вам это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про <head></head> читайте в описание заголовочных тегов.

4) <title></title> - между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. <title></title> часто сокращенно называют тайтлом. Советую ознакомиться со статьей: как составить тег Title.

Теперь перейдем к тегам, которые находятся в теле страницы (<body></body>).

5) <center></center> - эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана.

6) <h1></h1> - это один из класса тегов h1-h6, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример создания html страницы".
Примечание: эти теги имеют большой вес в ранжировании сайта, поэтому ими необходимо пользоваться с умом.

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

8) <img alt="подсказка" src="URL_ИЗОБРАЖЕНИЯ"> - это одиночный тег, который выводит изображение.
  → src - обязательный параметр, в котором указывается адрес изображения, т.е. вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение.
Примечание:
1. Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения;
2. Не забудьте указать расширение изображения. Например, .jpg, .gif, .jpeg.

  → 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 теги

← Перейти в каталог html уроков и советов

Copyright MyCorp © 2024
Календарь
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz