Урок 5.

Нам осталось выучить еще пару тегов прежде чем перейти к стилям. Это не значит, что теги на этом кончаются, но можно уже будет переходить к расскрашиванию :).

Следующий тег означает список.

Что такое список? Вот, например, как выглядит список важных дел у Патрика, друга Губки Боба:

На нем написано:

Список дел — Ничего не делать (исполнено).

Ну или такой, очень симпатичный:

Кстати, по двум этим спискам мы как раз можем выделить два вида списков в хтмл — неупорядоченный и упорядоченный.

Упорядоченный по-английский будет ordered, потому что ORDER — это закон, порядок, приказ. В американских детективах полиция не может обыскать дом убийцы, пока не получит ОРДЕР, а в суде американский судья стучит молотком и кричит: «Порядок в зале суда!» То есть по-английски: «Order!!!»

Итак, упорядоченный список будет ordered list [ордед лист]. Как же будет НЕупорядоченный? Частичка НЕ в английском языке часто бывает как UN [ан].

Например, какая-нибудь москвичка может сказать: «Это анриал какой-то!» Где риал (real) — это реальный. Значит АНриал — это НЕреальный.

Так что НЕупорядоченный список будет UNordered list [анордед лист].

Сокращенно мы получаем:

<ol> (ordered list)

<ul> (unordered list)

Упорядоченный список будет АВТОМАТИЧЕСКИ ставить перед каждым пунктом цифру, а НЕупорядоченный — просто какую-нибудь точку, или кружок, или даже картинку.

Итак, открываем наш файлик и копипастим туда:

<ul>
<li>Ничего не делать</li>
<li>Опять ничего не делать</li>
<li>Отметить, что ничего не делал</li>
</ul>

А под этот блок копипастим еще один

<ol>
<li>Ничего не делать</li>
<li>Зачеркнуть пункт 1</li>
<li>Сделать вид, что очень занят работой</li>
</ol>

Сохраняем файл (Ctrl+S), открываем в браузере и видим оба наших списка. Как вы заметили — во втором есть возможность зачеркнуть пункт 1 потому что этот пункт 1 там есть. Если вы будете менять местами пункты, дописывать их с любого конца или середины, нумерация выставится автоматически по-порядку, так что вам не нужно вручную ставить цифры, что очень экономит время при огромных многостраничных списках с вложенными подпунктами и подподпунктами.

Второй тег, который нужно узнать, это тег, отвечающий за картинку.

Вы уже заметили, что наверху страницы стоит логотип Авебдизайн. Он как раз и выведен тегом, так что если посмотрите в код — то увидите там его:

<img src="img/logo.png" />

Img — это сокращенное от Image [имадж]. Вот откуда взялось противное слово ИМИДЖ! Мы-то думали, что это что-то такое крутое и важное, что у каждого должен быть какой-то имидж, а оказалось все просто. Американцы обозначают этим словом просто маску, «картинку себя», за которой человек прячется.

Гораздо интереснее, что image — это часть действительно важного слова imagination:

Ты просто обязан это помнить )), Губка Боб говорил Сквидварду о ВООБРАЖЕНИИ!

Без воображения ты никогда не сможешь придумать никакой Гугл или Фэйсбук.

В общем, мы узнали тег <img /> — заметь — он не имеет закрывающего тега! Он закрывает сам себя — слэш стоит перед закрывающей треугольной скобкой.

src — это у нас аттрибут тега img. Src [эс-эр-си] сокращен от source [сорс] — источник. Чтобы запомнить — есть русское слово ресурс (нефти или алмазов например), оно происходит от английского resourse [ресорс], то есть, источник.

Source тут точно также означает источник — источник картинки. В кавычках стоит адрес к этой картинке, точно также, как было в линке, только линк может вести на страницу в интернете, а источник картинки может вести только на картинку. В данном случае адрес картинки у нас:

img/logo.png

где img — это папка, которая есть в общей папке твоего сайта, если дважды кликнуть на нее и открыть — увидишь саму картинку:

logo.png — это назввание картинки плюс ее расширение. Расширение файла — это то, что стоит после точки в названии. У нас сейчас расширение .png. Картинки могут быть .jpg, .jpeg, gif, .svg. А расширений файлов вообще огромное множество. Например, расширение твоего файла, в котором ты пишешь — .html.

Сейчас source нашей картинки — это так называемый внутренний линк, то есть, он ведет на файл, который находится не в интернете, а в той же папке, что и весь твой сайт. А теперь, раз вы все такие умные, попробуйте прописать картинку с внешим source. У вас есть линк на Линка, вот на этого (кликни сюда). И у вас есть код для вывода картинки. Перепиши код так, чтобы мой Линк появился у тебя в файле, а не по ссылке. Можешь прописать его вместо лого Авебдизайна!

У меня получилось вот так:

А если у тебя не получается, включи свой: