Надеюсь вы уже знаете для чего нужен язык гипертекста, так что давайте теперь изучим основы html. Будем считать что вы установили себе текстовый редактор noterad++, и открыли в нём пока что пустую страницу, тогда сейчас будем создавать в ней первый каркас нашего будущего html сайта.
Сам по себе html каркас достаточно громоздкий и по этому постоянно его заново писать я вам не рекомендую, так что напишите его только один раз, затем скопируйте в отдельный файл и когда он вам понадобится, просто вставляйте. Давайте посмотрим как выглядит этот самый основной html каркас:
После того как вы наберёте весь этот html каркас, не забудьте его сохранить. К стати можете сразу привыкать к тому, что если дискетка на той странице на которой вы находитесь красная, значит эта страница еще не сохранена.
Далее, чтобы не захламлять рабочий стол нашего компьютера, я предлагаю где нибудь на диске C создать отдельную папку и назовите например HTML, в ней то мы и будем изучать основы html, да и не только основы, а вообще всё что касается этого языка.
Сам по себе html каркас достаточно громоздкий и по этому постоянно его заново писать я вам не рекомендую, так что напишите его только один раз, затем скопируйте в отдельный файл и когда он вам понадобится, просто вставляйте. Давайте посмотрим как выглядит этот самый основной html каркас:
После того как вы наберёте весь этот html каркас, не забудьте его сохранить. К стати можете сразу привыкать к тому, что если дискетка на той странице на которой вы находитесь красная, значит эта страница еще не сохранена.
Далее, чтобы не захламлять рабочий стол нашего компьютера, я предлагаю где нибудь на диске C создать отдельную папку и назовите например HTML, в ней то мы и будем изучать основы html, да и не только основы, а вообще всё что касается этого языка.
Наш недавно созданный html каркас сохраняйте в этой папке, и внимание, под именем index.html Запоминайте сразу что все главные страницы у всех сайтов сохраняются именно под этим именем! Помните когда мы в самом первом уроке только знакомились с языком гипертекста html, там говорилось про то как работают все сайты, вот после запроса к любому сайту через адресную строку, загружается всегда главная страница с названием index.html, но это при условий что вы не приписывайте к названию сайта какую нибудь страницу типа: yandex.ru/stranisa.html, в этом случае естественно главная страница уже не загрузится.
Ну теперь давайте приступим к основному разбору того что мы видим в html каркасе.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Самая верхняя длинная строка начинается со строки DOCTYPE, что в переводе означает тип документа, в нём указывается версия, в нашем случае это HTML 4.01, есть и другие версии, как например XHTML, но об этом мы поговорим в отдельном уроке. У каждой версии есть еще и своя так называемая под версия, у нас это Transitional, что означает переходная версия, она позволяет использовать все новые тэги которые только появились, так и устаревшие тэги. Мы в принципе в эти все дебри по версиям вдаваться в этом уроке не будем, если уж вам это интересно, то вы можете поискать в инете, просто введите такой запрос: информация про DOCTYPE.
Еще мы видим в этой строке некий адрес: "http://www.w3.org/TR/html4/loose.dtd" Он делает то что направляет наш браузер на спецификацию относящейся к данной версии, которая будет говорить ему как именно отображать всё это дело, но на самом деле писать его не обязательно. С этой длинной строчкой вообще можете не заморачиваться, она пишется всего один раз, и отвечает за тип документа, её вообще даже можно не запоминать, главное знайте что она должна быть.
Дальше начинается самое интересное, это каркас из html тэгов.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Изучаем основы html</title>
</head>
<body>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Изучаем основы html</title>
</head>
<body>
</body>
</html>
С начала давайте разберёмся с основными понятиями, что такое html тэг? Тэг это конструкция языка которая говорит браузеру что нужно делать, т.е. какие то тэги говорят браузеру что нужно отобразить абзац, другие говорят что нужно отобразить заголовок, таблицу, да и еще много чего. Главное поймите что с помощью html тэгов мы говорим браузеру что нужно делать и как чего отображать, мы можно сказать программируем его этим самым на необходимые действия. И первый такой тэг это <html>, этот тэг играет роль контейнера, который вмещает в себя все остальные тэги. Обратите внимание что у всех тзгов есть открывающая скобка <, и закрывающая >, далее в самом низу идёт такой же тэг, только с обратным слэшем: </html>, это закрывающий тэг. С этого момента нам нужно понимать что есть парные тэги как например <html>, а есть одинарные.
Следующий тег это <head>, в переводе с английского он означает "голова", ниже еще есть <body>, он означает тело. Теперь внимательно запоминайте что есть теги которые называются вспомогательными. Они отвечают за то, в какой кодировке отображать страницу, какие таблицы стилей к ней подключать, какое имя страницы отображать в самой верхней части браузера, всё это дело и происходит в head. А есть еще тэги которые называются форматирующими, это как раз всё что находится в тэге body.
Ну да ладно, хватит вдаваться в эти демагогические дебри, теперь пройдёмся еще раз по основам, только быстренько и по делу:
Будем разбираться по порядку. Начнём с цифры 1.
1. < !DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN " > — Это строка говорит браузеру, который открывает этот файл, что это строка соответствующая стандартам
HTML, а именно версии 4.01. Этот тэг одинарный, то есть его не надо закрывать.
2. <html> — Это строчечка открывает наш хтмл документ,
< /html> — а это строчка соответственно закрывает.
3. <head> — Это тэг играет роль головы для нашего сайта, в него мы будем вписывать название, краткое описание нашей веб странички, ключевые слова, каскадную таблицу стилей CSS и другие всякие разности, на начальном этапе обучения, пока усвойте только это.
< /head> — А это как вы догадались, закрытие тэга head.
< /head> — А это как вы догадались, закрытие тэга head.
4. <meta http-equiv= " Content-Type " content= " text/html; windows-1251 " > — Это важный тэг, он обозначает кодировку веб страницы, в данном случае говорящий что у нас русскоязычный текст на сайте, с кодировкой: windows-1251, есть еще и другая уже более часто применяемая кодировка: charset=utf-8. Этот тэг одинарный, его закрывать не надо.
И к стати на счёт кодировок, чтобы в дальнейшем у вас не было проблем с ними, всегда имейте привычку в notepad++, преобразовывать кодировку в utf-8 без BOM:
А еще лучше, зайдите в Опции - настройки - Новый Документ, ставите там кодировку utf-8 без BOM, теперь спокойно закрываете окошко с настройками, с этого момента все вновь создаваемые вами документы будут с правильной кодировкой.
5. <title>Первый сайт</title> — Тэг в котором прописывается название нашей веб страницы, это название мы можем увидеть когда откроем наш html файл в браузере, оно будет показываться в самом верхнем левом углу у вашего браузера. В данном случае название веб страницы: «Первый сайт».
6. <meta name="keywords " content= " Ключевые слова " > — В этот тег нужно прописывать ключевые слова текста, находящегося на веб странице, он помогает поисковым системам лучше про индексировать ваш сайт, он как вы видите является одинарным. Этого тега в нашем каркасе не было, но он в принципе тоже ходовой и знать его нужно, так же как и тег краткого описания сайта, который идёт далее.
7. <meta name= " description " content= " Описание " > — Ну а в этот тэг можно прописать краткое описание сайта. Тэг является одинарным и закрывать его конечно же не нужно.
8 <body> — Заключительный из самых основных тэгов, составляющих каркас сайта, это как бы тело документа, все что написано между этим тэгом, будет отображаться в браузере. Я надеюсь вы конечно же знаете что такое браузер, на всякий случай скажу, это программа, благодаря которой вы имеете счастье блуждать по интернету.
Ну вот, здесь мы прошли основы html документа, в следующем уроке будем приступать уже к наполнению нашего самописного сайта, там мы будем изучать Теги html, текст и его вид.
Комментариев нет:
Отправить комментарий