| karabawka |
Дата: Четверг, 01.11.2012, 22:14 | Сообщение # 1
|
Главный предприниматель
Сообщений: 1121
Статус: Offline
|
Что такое HTML и для чего он существует.
Внимание! Прежде чем читать ознакомтесь!
Статья взята с портала Samp-Cleo.Ru , автор Karabawka (Я)! писал на основе разных хороших статей в интернете, по которым я сам учился, будучи еще полным-полным чайником-нубом в веб-программировании. В данном курсе уроков, будет расписано все максимально подробно, так что при желании, прочитав мои уроки все сможет понять даже школьник. 
Решил перенести мои уроки с портала Samp-Cleo.Ru на Cheat-Master потому-что здесь выше посещаймость и нужно как-то оживить раздел, ибо тут давно не появлялось новых уроков! 
Начну, пожалуй, с начала..
HTML язык по своей сути не является языком программирования.. он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц.. предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет "дважды два" невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые "знают" стандартные команды html языка, и "пережевывая" их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа.
Теперь о командах - их называют дескрипторами, но чаще - тегами.
Quote ("Википедия") HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
Одно из преймуществ данного языка в том, что он очень прост для изучения. Если вы обладаете знаниями английского языка, то обучаться вам будет еще легче!!!
И так... Для того чтобы примерно понять как выглядит простая страничка, написанная на HTML попробуйте создать текстовый документ (независимо от редактора: будь хоть это блокнот, или Word), и записать в нем следущее:
Code <html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!
<br>
Это моя первая страница, написанная на HTML!!!
</body>
</html>
Вы написали простейшую страницу. После сохранения файла ".txt" переименуйте ".txt" в формат ".html", если хотите просмотреть в браузере, полученную вами страничку. :3
Теперь о самом коде - давайте разбираться:
- Так вот то что написано между <…> - называют тегами они не видны читателю, заглянувшему на Вашу страницу, зато хорошо видны браузеру, который наткнувшись на тег <html> понимает его как сигнал к тому, что далее будет документ, который необходимо прочитать и вывести на монитор в нужном виде.. а вот тег </html> говорит о том что документ закончился и от него, то бишь браузера, больше ничего не требуется и он может отдыхать с чистой совестью.
Так что же мы написали? и как это читает браузер?
"Мысли браузера":
Quote ("IE 9") <html> - начало документа.. опять работы привалило..
<head> - смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?
<title> - "название" значит.. это в шапке окна нужно написать его название:
Моя первая страничка - опять чайник тренируется.. ;DDDD
</title> - все название закончилось.. можно идти дальше..
</head> - ага и в голове кроме названия больше никаких вздорных мыслей не держим..
<body> - "тело" документа всё что написано ниже выставляем на всеобщее обозрение
"Привет мир!!!" - как мило! Достали уже!!!
<br> - переносим текст на следующую строчку.. я даже догадываюсь что в ней будет...
"Это моя первая страничка!" - ну да так и есть.. ничего пооригинальнее придумать не могут..
</body> - что всё что ли? Больше ничего не отображать?
</html> - ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!! ;D
Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи:
1) Необходимо раз и навсегда запомнить что если есть открывающий тег <…> то обязательно должен быть и закрывающий </…>
Хотя есть и исключения как например у нас тег <br> - он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить")
2) Все документы должны иметь вот такой шаблон кода:
<html>- начало документа
<head>- начало головы
</head>- закрытие головы
<body>- начало тела
</body>- закрытие тела
</html>- конец документа
* Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..
3) О порядке:
Открывающий и закрывающий тег по типу <…> </…> представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:
<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
</Тег "ящик маленький" >
</Тег "ящик средний" >
</Тег "большой ящик">
Если писать, например, так:
<Тег "большой ящик">
<Тег "ящик средний">
<Тег "ящик маленький">
содержание
</Тег "большой ящик">
</Тег "ящик маленький">
</Тег "ящик средний">
То получится "белиберда", которая в голове не укладывается, "большой" уже закрыт, а из него "торчит" "маленький", который заперт в "среднем", а "содержание" рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..
Ну вот мы научились писать простой текст, начало положено! В следущем уроке будет подробно рассказано о тегах, о том как редактировать текст. Удачи в изучении!
|
|
|
|
|
| Растаман |
Дата: Пятница, 22.03.2013, 18:32 | Сообщение # 2
|
Боец
Сообщений: 283
Статус: Offline
|
О, мой родной html  . +
|
|
|
|
|
