Урок 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. У вас есть линк на Линка, вот на этого (кликни сюда). И у вас есть код для вывода картинки. Перепиши код так, чтобы мой Линк появился у тебя в файле, а не по ссылке. Можешь прописать его вместо лого Авебдизайна!
У меня получилось вот так:
А если у тебя не получается, включи свой:
You must be logged in to post a comment.