аватар |

Уроки / HTML /

Урок 1. Как создать простую страницу на html?



В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

Вы готовы? Тогда поехали!


Подключение к интернету для создания страницы на html нам НЕ нужно.

Нам понадобится


1) Выбираем текстовой редактор. На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как)

Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на:
1) для Windows
NotePad++ (скачать или здесь)
Intype (скачать)

2) для Mac и Linux
Bluefish Editor (скачать)

Их отличие от обычных текстовых редакторов заключается в основном в том, что они делают автоматические отступы, ! дают возможность пересохранить файл в другой кодировке (обратите внимание, в будущем столкнётесь), окрашивают теги в различные цвета как, например, код внизу урока. В обычном редакторе он будет одного цвета.


2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla, Google Chrome, Opera, Yandex и Mail браузеры и тд.

Приступим к созданию страницы HTML


1) создаём на рабочем столе папку html. Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как.



Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с .html на конце, например index.html



Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить. Готово!

Часто задают вопрос о том, что не видно расширения файла. Разберём по порядку

Расширение имени файла - это последовательность символов, добавляемых к имени файла и предназначенных для идентификации типа (формата) файла. Проще говоря, это .txt .doc .exe .jpg и тд в конце названия файла


Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

так НЕ должно выглядеть: photo, текстовой документ, game
так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe

Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:

Смотрим настройки файлов и папок:

Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить

Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить

Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить


3) вставляем в него Весь код (вместе с комментариями), указанный ниже:

<!-- это комментарии. их не видно при отображении файла в браузере-->
<html> <!-- тег html обозначает открытие файла html-->

   <head> <!-- head обозначает открытие головной части документа-->

      <!-- title обозначает название документа. Отображается вверху браузера -->
      <title> 
      Название Вашей первой странички 
      </title> <!-- закрываем тег title иначе у нас всё последующее будет считаться заголовком-->

   </head> <!-- тег head также нужно закрыть-->

 <body>  <!-- наконец открываем тело нашего документа. Здесь будет всё его содержание-->

    <!--начиная отсюда вставляем любые текст, заголовки, ссылки и тп-->
    <h1>Заголовок моей странички</h1> <!--h1 служит для обозначения заголовка. 
    Есть ещё h2, h3 и так до h6. самого маленького заголовка-->
    Это моя первая web-страничка! 

 </body> <!--тело также следует закрыть, после него уже не вставляем текст и тп-->

</html> <!-- закрывающий тег html обозначает закрытие файла html-->


4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

Демонстрация Скачать исходники


В итоге, открыв Интернет-Браузером получившийся index.html, Вы должны увидеть страничку такого вида:


Рисунок 1.


На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:

<!--намеренно пропущена часть кода-->
   <!-- тег title, отображающий название страницы во вкладке браузера -->
    <title> 
    Название Вашей первой странички 
    </title>
<!--намеренно пропущена часть кода-->
    <h1>Заголовок моей странички</h1> <!--h1 служит для обозначения заголовка. 
    Есть ещё h2, h3 и так до h6. самого маленького заголовка-->

    Это моя первая web-страничка! <!--обычный текст-->
<!--намеренно пропущена часть кода-->


В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.
<html>

<head>
</head>

<body>
</body>

</html>


Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете

<html>
  <head>
    <title> 
      Название страницы 
    </title>
  </head>

<body>
</body>

</html>


Все отступы слева перед тегами в примерах Необязательны. Они сделаны для наглядности, чтобы Вы видели пары тегов


Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы

<html>

  <head>
    <title> 
      Название страницы 
    </title>
  </head>

<body>

<h1>Любой заголовок</h1>
Просто текст
<p>Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом</p>
Другой текст

</body>
</html>

Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия). 

<html>
  <head>
    <title> 
      Название страницы 
    </title>
  </head>
<body>

<img src="photo.jpg"> <!--непарный тег-->   

</body>
</html>

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

<html>
  <head>
    <title> 
    </title>
  </head>
<body>

Хочу выделить текст <b>жирным, а этот уже <i>курсивом</i> <!--тут забыт закрывающий </b> после слова жирным -->   

</body>
</html>

Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

Хочу выделить текст жирным, а этот уже курсивом

Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!

5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad), либо установленный Вами другой текстовой редактор.

В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении - будем вставлять изображения, делать ссылки и много другого интересного)

Мои поздравления!
Несложно же?)
 



Распечатать
Похожие статьи
25 января 2013 17:08 Урок 2. Структура html документа (страницы)
30 января 2013 16:21 Урок 6. Специальные символы в html
30 января 2013 16:21 Урок 4. Ссылки в html
30 января 2013 16:35 Урок 9. Работа с формами в html
30 января 2013 16:21 Урок 5. Работа с изображениями в html


Комментарии к статье (vk.com)