Отправляет email-рассылки с помощью сервиса Sendsay

Свежие уроки CSS3, HTML5, jQuery

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 142 RSS
  Апрель 2014   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней 12 выпусков (1-2 раза в неделю)


Открыта: 27-04-2014

Автор
Юрий Немец

Статистика

142 подписчиков
0 за неделю
←   Все выпуски   →

Свежие уроки CSS3, HTML5, jQuery Урок 1. Что такое html?


Что такое html?

Html — это основа построения сайта! При изучении темы сайтостроения необходимо начинать именно с него. Здесь нет ничего страшного или тяжелого. Освоить данную технологию сможет АБСОЛЮТНО КАЖДЫЙ!

Теория

Итак, как же строится обычная html страница?

Вся html страница строится из тегов.

Что такое тег?

Это элемент html страницы, который так или иначе влияет на отображение и разметку страницы.

На картинке справа наглядно представлена схема стандартной html страницы.

Вся html страница состоит из основных тегов, которые должны присутствовать абсолютно всегда. Иначе страница может отображаться некорректно. Это теги: html, head и body.

 

Структура html
  • Теги могут иметь закрывающий тег или нет.
  • Например тег html обязательно должен иметь закрывающий тег <html></html>, иначе браузер не поймет когда html страница заканчивается.
  • Тег html содержит два основных тега. Это head и body.
  • А уже сам тег head может содержать тег <title>Заголовок</title>(предназначенный для описания заголовка позже всё будет показано на примере).
  • Тег body хранит все теги, которые осуществляют разметку страницы отображение данных на странице. Это такие теги как div, span, ul, p, table…
  • Обязательное правило: если тег имеет закрывающий тег, то тег должен быть закрыт. Если вы забыли закрыть тег, ваши страница может отображаться не так как вы хотели. Например: <div><p></p></div>. <- Это правильно! Тег открылся и затем закрылся.
  • Дело в том, что html устроен что не покажет ошибок в случае если вы забыли закрыть тег или закрыли его внутри другого тега.

Практика

Понятно что лучше всего понять любую технологию можно на практике. Для практики можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую Notepad++. Скачать его можно по ссылке Скачать Notepad++. В данном редакторе есть все возможности для создания и редактирования html страниц.

Начнем. После открытия программы вы увидите такое окошко:

Главное окно программы Notepad++

Чтобы создать первую html страницу необходимо ввести «тело» страницы в данное окно. Вы можете скопировать текст ниже. Но лучше вводите всё руками. Так вы быстрее запомните и привыкнете к тегам.

1
2
3
4
5
6
7
8

<html>
<head>
    <title>Моя первая html страница</title>
</head>
<body>
    <p>Начало обучения технологии html</p>	
</body>
</html>

Итак у вас должно получиться следующее:
Окно notepad++ с html

Далее необходимо сохранить данную страницу в html формате. Для этого нажимаем «Файл»->»Сохранить как…», вводим имя html страницы(я назвал ее example.html) и сохраняем в удобное место(лучше создать папку, где вы будете учиться осваивать данную технологию). Нажимаем кнопку «Сохранить». Сразу появится подсветка html тегов.

Окно программы Notepad++ с подсветкой

Сейчас можно открыть этот файл в любом браузере.

Страница в браузере

В итоге у нас получилась первая html страница, которая будет одинаково показываться в любом браузере. :)
В избранное