Как сделать сайт. Видео уроки HTML. Урок 4

Автор: . 23 Авг 2011 в 21:44

Start Up

Урок 1Урок 3

Чтобы посмотреть четвертый видео-урок, нажмите на эту ссылку:
Четвертый видео-урок по HTML.

Ниже, вы найдете текстовое описание четвертого видео-урока по HTML:
Открываем наш файл “index.html”, который мы создали в предыдущих уроках, и продолжим знакомство с тегами HTML.

В конце прошлого урока я сказала, что в этом уроке мы займемся созданием списков, но произошло непредвиденное событие, с моим файлом index.html.

Поэтому,в этом уроке, хочу добавить ещё несколько слов о кодировке документа, о которой мы говорили с вами в прошлом уроке.

Если помните, мы добавили в тег <head></head>, вот такой мета-тег:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

Так вот, в текстовом редакторе, в частности в Notepad ++, в котором мы с вами сейчас работаем, следует придерживаться такого алгоритма создания нового документа:

Создаем новый документ

Выбираем кодировку вот здесь, в верхнем меню “Кодировки”.  Тут, в частности, есть две на вид похожие кодировки UTF-8 и UTF-8 без (BOM). Я  не нашла в них особой разницы, но во всех рекомендациях, которые прочитала на эту тему, рекомендуется выбирать UTF-8 без (BOM).

В общем выбираем её.

Документ сохраняем.

И только после этого начинаем его наполнять.

Поскольку я не сказала вам этого в прошлом уроке, то возможно, после добавления мета-тега с кодировкой, произошел коллапс и с вашим файлом index.html, и весь ваш текст превратился в непонятные кракозябры. В этом случае, советую вам просто удалить этот файл и создать новый, по указанному выше алгоритму.

Ничего страшного в этом нет, вы только в самом начале обучения.

В программе Adobe Dreamweaver, с которой мы познакомимся чуть позже, все эти кодировки подставляются автоматически, здесь же просто учтите этот нюанс.

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

Может, когда вы искали тему оформления для вашего сайта, то встречали образцы в которых текст вроде бы набран латинскими буквами, но слова какие-то непонятные. Так вот скорее всего это был текст Lorem Ipsum – это текст латинскими буквами, сгенерированный случайным образом, специально для использования в печати и веб-дизайне, почитать об это (там есть и русский язык), а также сгенерировать для своей страницы, столько абзацев текста, сколько вам нужно, вы можете вот на этом сайте,  готовый текст вы просто копируете себе на страницу и работаете с ним.

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

Разделите этот текст на параграфы и заголовки, как мы это делали в первом уроке. И кроме этого добавим сюда новый тег <hr>, с помощью которого создается горизонтальная линия. Проведем эту линию под нашим главным заголовком.

Кроме того, хочу обратить ваше внимание, что в зависимости от <!DOCTYPE> вашего документа, а именно от того, что там указано HTML, или XHTML, зависит, в частности,  написание одиночных тегов. Вы знаете уже два одиночных тега – тег переноса <br> и тег для горизонтальной линии <hr>. Так вот в XHTML эти теги, как впрочем и все остальные, должны быть закрытыми, то есть выглядеть вот так: <br /><hr />.

А в следующем, пятом видео-уроке по HTML, я уже расскажу вам, как создаются списки.
Урок  3   Урок 5

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

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

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

 

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

  1. Как сделать сайт. Видео уроки HTML. Урок 2. Теги HTML p и h1…h6
  2. Как сделать сайт. Видео уроки по HTML. Урок 1. Структура HTML документа
  3. Как сделать сайт. Видео уроки по HTML. Урок 3. Элемент !DOCTYPE и основные мета-теги
  4. Как сделать сайт. Часть 2. HTML и CSS.
Рубрики: HTML

Обсуждение
Отзыв Олег 24 Август 2011

Изучить HTML уж точно лишним не будет. Спасибо за уроки!

Отзыв Олег 27 Август 2011

Все планирую заняться изучением. Да некогда. Времени не хватает.

Отзыв Владимир 27 Август 2011

Большое спасибо за видеоурок по HTML! Очень легко и доступно.

Отзыв Золотая Ната 27 Август 2011

Для меня так сложно.Надо сидеть разбираться.Когда прижмет, то конечно всё поймем и сделаем.Спасибо Вам, что помогаете нам. :)

Ваш отзыв