Как сделать сайт. Видео уроки по HTML. Урок 1. Структура HTML документа

Автор: . 17 Авг 2011 в 10:48

Start Up

Решила записать видео уроки по HTML и CSS, для начинающих.

Все-таки, жизнь показывает, что отсутствие хотя бы базовых знаний по HTML и CSS, может сильно тормозить вашу бизнес деятельность в интернете.
Задача этих уроков, в конечном итоге, не загружать вас какими-то ненужными навыками, а наоборот дать практическое понимание, как вы можете эти знания применить, например, если захотите подредактировать ваш шаблон для WordPress.

Сначала будут уроки по HTML , потом уже  по CSS.

Все видео уроки снабжены также текстовым описанием, чтобы вам не нужно было ничего конспектировать.
Описание каждого урока вы найдете ниже, под видео.

Чтобы посмотреть видео-урок, пройдите по этой ссылке:
Первый видео-урок по HTML

В первом видео-уроке вы познакомитесь со структурой HTML документа. Узнаете об основных тегах, которые обязательно должны быть на HTML странице.

Структура HTML документа создается с помощью тегов.  Тэги делят документ на смысловые части. Пользователям интернета теги естественно не видны. Пользователи видят текст разбитый на параграфы, заголовки, таблицы и т.д. А все эти элементы, как раз и задаются определенными тегами.

Наши HTML документы мы будем создавать в очень удобном текстовом редакторе Notepad ++. Его можно совершенно бесплатно скачать c этого сайта http://notepad-plus-plus.org

Сразу приучайтесь к дисциплине и, как только создаете новый документ, тут же его сохраняйте. Для этого создайте папку,  в которой будете хранить все файлы вашего сайта. Еще одно важное замечание, название этой папки, а также всех ваших файлов, пишите только латинскими буквами, желательно строчными, и желательно без пробелов между словами, соединяйте слова дефисами.

Внутри вашей папки, сразу можете создать ещё одну папку для картинок, назовите её “images”. Теперь, рядом с этой папкой сохраняем наш первый документ и назовем его “index.html”.

Это тоже вам надо запомнить, какой бы сайт вы ни делали, его первая, главная страница, содержащая всю основную структуру, называется “index”, расширение у этого названия будет зависеть от типа документа, или .html, или .php, или что-то ещё.

В данном случае мы создаем HTML документ, поэтому и называться он будет “index.html”. Пишем название обязательно вместе с расширением.

Итак первый основной тег, с  которого любой HTML документ начинается и которым заканчивается – это тег  <html>.

Названия тегов заключается в угловые скобки <>, и пишутся строчными буквами, согласно современным стандартам создания HTML документов.

Документ начинается открывающим тегом <html> и заканчивается закрывающим тегом </html>. Как видите закрывающий тег от открывающего отличается тем, что перед названием у него стоит правый слэш.

Тег  <html> сообщает браузеру что это именно HTML документ.

После этого создаем “голову” документа, которая определяется соответственно тегом <head></head>.

Под “головой”, как и положено, располагается тело, которое  заключается между тегами <body></body>.

Все, что размещено в “теле” документа,  видят пользователи у себя на экране, когда открывают вашу страницу в интернете, кроме самих тегов, конечно.

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

Как видите, пока что это сплошной неформатированный текст.

Еще посмотрите, что-то непонятное написано в строке заголовка окна браузера. Вообще-то здесь должно быть название вашей страницы. Которое формируется тегом <title></title>.

Тег <title></title> размещается внутри тега <head></head>. Сейчас мы его сюда разместим. И назовем, допустим “Моя первая страница”.

О теге <head></head> мы подробнее поговорим в следующих уроках. Сейчас только скажу, что в “голове” размещаются разные служебные теги и, в том числе, тег <title></title>, указывающий заголовок страницы.

Посмотрим, что  у нас получилось.
Ну вот, в общем-то, ваша первая страница в интернете уже создана.
Не забудьте сохранить ваш документ, для этого достаточно нажать сочетание клавиш CTRL+S.

Урок 2

Лучшие статьи на ваш Email

Подпишитесь на рассылку:

Ваш e-mail: *
Ваше имя: *

Похожие статьи:

  1. Как сделать сайт. Часть 2. HTML и CSS.
Рубрики: HTML

Обсуждение
Отзыв Мария 22 Август 2011

Уау, как я долга искала эту информацию.Спасибо Вам большое, Вы не представляете, как Вы мне помогли!!!!!!

Отзыв Ирина 22 Август 2011

Спасибо за урок, очень понятно и доступно!

Отзыв Ирина 22 Август 2011

Писать на HTML конечно хорошо сайт, но очень долго.

Отзыв Светлана 22 Август 2011

Очень ценная для меня информация. Коротко, доходчиво. Спасибо.

Отзыв Людмила 22 Август 2011

Интересно! Я то подумала, Вы новичок, а Вы уже всё знаете и предлагаете! !!!!
Молодец!

Отзыв Gashkova 22 Август 2011

Нет, Ирина, это совсем не долго. Простой сайт можно сделать за один день. Если не сильно спешить, то за неделю можно сделать вполне приличный сайт на HTML и CSS.
Просто делать его надо, конечно, не в Блокноте, а в программе Adobe Dreamweaver, например, ну или, есть еще бесплатные редакторы, такого же уровня, где практически все процессы автоматизированы.
Поэтому в Notepad ++ я сделаю только первые семь уроков по HTML, потом дам основы CSS, просто, чтобы новички немножко пописали код руками. А потом переберемся в Adobe Dreamweaver.

Отзыв Лариса 24 Август 2011

Здорово! это то, что многим из нас сейчас пригодится! спасибо!

Отзыв Инна 3 Сентябрь 2011

Спасибо за интересный и понятный урок!

Ваш отзыв