1 часть тут.
Продолжаю изучать HTML по детской книге. Открываю книгу и по названию второй главы вижу, что должно быть что-то действительно интересное.
Наконец то я уже напишу свою первую программу, которая обычно приветствует мир! :) Переворачиваю страницу, а там комикс на 16 страниц... И всё бы ничего, если бы его можно было просто пропустить, но там рассказываются важные вещи, хотя и очень много ненужной информации про приключения главных героев. Но если вернуться к тому, что это книга для детей, то формат вполне себе достойный. Я думаю любой ребёнок лет 8-ми сможет разобраться.
Что это ещё за гипертекстовый язык?
Да я знала, что HTML переводится как гипертекстовый язык разметки. Т.е. он отвечает за то, как мы видим текст и картинки на сайте. Но вы никогда не задумывались, почему гипертекстовый? Что не так с этим словом гипер? А дело всё в том, что в HTML используются гиперссылки. Если обычная ссылка пишется вот в таком формате http://dzen.ru, то гиперссылка записывается вот так: http://dzen.ru. И в чём разница спросите вы, кроме цвета букв? А вы теперь попробуйте щёлкнуть мышкой по первому варианту ссылки. Ничего не произойдёт. Для того, чтобы перейти по первой ссылке, нужно её выделить, скопировать, вставить в адресную строку и перейти. А если теперь щёлкнуть по второму варианту, то все перечисленные недавно манипуляции отпадают и мы просто перейдём на указанный сайт. Это и есть гиперссылка.
Теги - основа языка HTML
Теги это кодовые слова, которые с двух сторон обхватываются угловыми скобочками <>. У каждого тега своя задача.
Например тег <html> содержит в себе весь документ. А тег <body> отображает ту часть документа, которую мы будем видеть непосредственно заходя на сайт.
Тег <p> отвечает за новый абзац, <br> переносит текущую строку на новую, т. е. как будто вы нажали клавишу enter на клавиатуре.
Забыла сказать, что теги бывают парными и одиночными. Это очень важно знать. Тег <p> открывает, а тег </p> закрывает строчку кода. А вот тег <br> является одиночным и ему не требуется закрывающий тег.
А вот и тег для гиперссылки: <a>. И он тоже является парным. Например если написать вот так:
</body>
<p> Я пишу какой то абзац и дальше должна быть ссылка
<a> href="http://Я та самая ссылка.ru"
</p> тут продолжение абзаца
</body>
В данном случае ссылкой станет текст "http://Я та самая ссылка.ru тут продолжение абзаца". А всё потому что, мы не закрыли тег для гиперссылки <a>.
</body>
<p> Я пишу какой то абзац и дальше должна быть ссылка
<a> href="http://Я та самая ссылка.ru" </a>
</p> тут продолжение абзаца
</body>
Теперь, когда мы закрыли тег, ссылкой будет только "http://Я та самая ссылка.ru". Очень важно не забывать закрывать теги. Конечно современные браузеры способны догадаться где нужно закрыть тег и один недостающий парный тег не будет является проблемой для отображения сайта, но не всегда так бывает и в конце концов сайт просто рухнет :)
Тег <img> для вставки картинки и атрибуты тегов
<img scr="сюда пишу путь до картинки или название файла с картинкой" >
Так выглядит строчка для добавления картинки на сайт. В этом теге слово scr и есть атрибут. Кстати в теге для добавления гиперссылки <a> href= </a>, href так же является атрибутом. Но есть небольшие нюансы на которые стоит обратить внимание.
Если картинка находится в папке с html документом, то достаточно просто написать название файла, браузер найдёт её без проблем и отобразит на страничке.
Если картинка расположена где то ещё, даже если это один и тот же сервер, просто разные папки, то вам нужно указывать точный путь до этой самой картинки.
Так же можно добавлять атрибут alt="описание картинки", который позволяет описать картинку. Это нужно, чтобы какие-либо программы, анализирующие картинки, могли сказать, что это такое. Например поисковые системы будут считывать этот атрибут и индексировать вашу страницу. Что важно для SEO.
Таким образом, чтобы вставить картинку, нужно написать такую строчку <img scr="сюда пишу путь до картинки или название файла с картинкой" alt="описание картинки" >
Кстати говоря, я напрочь забыла, что такое теги, какой стыд :D Лучше бы я вообще не упоминала о своём дипломе программиста, который сегодня можно просто выбросить в мусорное ведро :)
За прочтение комикса я вместе с его героиней получила +10 к опыту. Мелочь, а приятно :)
Эксперименты с HTML
И вот моя, приветствующая мир, программа! Сколько всего нужно было написать, чтобы браузер показал лишь два слова.
Играемся дальше:
В теге <body> первая строчка с тегом <em> (делает шрифт курсивом) и тегом <strong> (делает шрифт жирным) написана в одну строчку и в браузере отображается точно так же на одной строке. Во второй строке я просто добавила тег <br> и уже в браузере слова отображаются на разных строках. А потом я попробовала теги всех шести заголовков от h1 до h6, как они отображаются можно сравнить на картинке выше.
Какой то не интересный сайт получился у меня, надо добавить картинку! Новую строчку для добавления картинки я выделила зелёной рамкой. И вот он мой первый(ну ладно, ладно, второй) сайт в жизни!!! Первый кстати не особо отличался от этого сложностью :)
Как и сказал автор книги Нейт Купер, html довольно простой язык, поэтому бояться изучать его не нужно :) И на этом закончилась глава 2. Далее следуют таблицы стилей. До скорых встреч :)