HTML за 5 минут.
Смысл последующего текста - сохранить видимость последовательности в описании веб-технологий. Т.е. описать основы, не отсылая пользователя на сторонние ресурсы и в объятия беспощадных поисковых систем.
1. Что это вообще?
Самый сложный момент в веб-разработке - уяснить разницу между текстовым файлом, лежащим в "Моих Документах" и HTML-страничкой. Разница состоит из нескольких моментов.
а) HTML страничка, конечно, может быть локальным файлом. Но это не типичная ситуация, с точки зрения такой глобальной штуки, как Интернет. Реальные веб-странички лежат на веб-серверах. Это такие специальные компьютеры, которые хранят HTML файлы и связанные с ними ресурсы: картинки, скрипты, аудио и видео контент. Каждый сервер имеет доменное имя, например: lessmember.blogspot.com . Все, что следует за доменным именем в адресе странички - это путь к HTML файлу на самом веб-сервере. (в реальности частенько все сложнее устроено, но пользователю это без разницы). Когда мы вводим адрес странички в адресной строке браузера, браузер соединяется с соответствующим сервером и запрашивает у него файл по указанному пути.
б) Второй нюанс - сам HTML. С точки зрения компьютера - это обычный текстовый файл, который мы привыкли открывать Блокнотом и видеть черный текст на белом фоне. Но, если такой файл открывается в браузере (Internet Explorer, Firefox, Chrome, Opera, Safari), браузер считает файл уже не просто текстом, а специальным документом, содержащим инструкции по форматированию. Инструкции эти называют "тэгами" (tag) и выглядят они как слова, взятые в "угловые скобки", точнее знаки "больше" и "меньше", например вот так: <table><tr><td>.
Теги - это своего рода контейнеры, которые могут содержать текст, или другие (вложенные) теги, и они определяют как именно будет выглядеть содержимое.
Например, тег заголовка <h1> содержащийся в нем текст выводит особо большим шрифтом и помещает в отдельный параграф. Сразу стоит уточнить, теги, которые могут иметь содержимое, имеют открывающий тег <имя_тега> и закрывающий тег </имя_тега> . Как видим, синтаксис HTML крайне прост, всего один тип инструкций с небольшими вариациями. Для полноты картины стоит отметить, что одиночные теги, которые не имеют вложений, правильно писать так: <br /> (это тег окончания строки), <hr /> (тег горизонтальной линии-разделителя). Итак, пример тега с контентом. Посмотрим на уже упомянутый тег <h1>:
Приведенный код отобразится как:
Вышесказанное приводит нас к мысли, что для создания и редактирования html-страницы понадобится текстовый редактор, а для просмотра (и отладки) - браузер.
2. Основные (самые полезные) теги.
Если мы предположим, что тегов существует больше, чем нам может понадобиться в работе над нашим сайтом, то мы окажемся правы. Мы даже не сильно ошибемся, если предположим, что немногие из разработчиков веб-страниц знают все теги на память.
Тем не менее, существует некоторый обязательный набор, без которого сложно чувствовать себя свободно в деле интернетостроения. Итак.
Парные (содержащие контент) теги.
<HTML> - этот тег является корневым элементом страницы. Или, если упростить лексику - это самый главный тег. Все остальное содержимое html-документа находится снутри тега <HTML>.
<HEAD> - этот и следующий (body) теги определяют содержимое документа. Причем <head> содержит только теги, задающие общие параметры всей страницы, а не хранят контент.
<BODY> - именно этот тег является родительским для всего видимого контента.
<P> - тег параграфа, ил абзаца. параграфы отделяются один от другого вертикальным отступом.
<H1> - <H6> - заголовки шести уровне. самый большой - H1. Используются для выделения заголовков большим и более жирным шрифтом.
<A> - тег гиперссылки. ключевой тег для WWW. Именно он является главным способом связывания разных документов в масштабе всей "паутины". Базовый синтаксис:
атрибут HREF содержит веб-адрес, по которому совершится переход.
а внутри самого тега расположен текст, который отобразится.
Пример:
результат:Смысл последующего текста - сохранить видимость последовательности в описании веб-технологий. Т.е. описать основы, не отсылая пользователя на сторонние ресурсы и в объятия беспощадных поисковых систем.
1. Что это вообще?
Самый сложный момент в веб-разработке - уяснить разницу между текстовым файлом, лежащим в "Моих Документах" и HTML-страничкой. Разница состоит из нескольких моментов.
а) HTML страничка, конечно, может быть локальным файлом. Но это не типичная ситуация, с точки зрения такой глобальной штуки, как Интернет. Реальные веб-странички лежат на веб-серверах. Это такие специальные компьютеры, которые хранят HTML файлы и связанные с ними ресурсы: картинки, скрипты, аудио и видео контент. Каждый сервер имеет доменное имя, например: lessmember.blogspot.com . Все, что следует за доменным именем в адресе странички - это путь к HTML файлу на самом веб-сервере. (в реальности частенько все сложнее устроено, но пользователю это без разницы). Когда мы вводим адрес странички в адресной строке браузера, браузер соединяется с соответствующим сервером и запрашивает у него файл по указанному пути.
б) Второй нюанс - сам HTML. С точки зрения компьютера - это обычный текстовый файл, который мы привыкли открывать Блокнотом и видеть черный текст на белом фоне. Но, если такой файл открывается в браузере (Internet Explorer, Firefox, Chrome, Opera, Safari), браузер считает файл уже не просто текстом, а специальным документом, содержащим инструкции по форматированию. Инструкции эти называют "тэгами" (tag) и выглядят они как слова, взятые в "угловые скобки", точнее знаки "больше" и "меньше", например вот так: <table><tr><td>.
Теги - это своего рода контейнеры, которые могут содержать текст, или другие (вложенные) теги, и они определяют как именно будет выглядеть содержимое.
Например, тег заголовка <h1> содержащийся в нем текст выводит особо большим шрифтом и помещает в отдельный параграф. Сразу стоит уточнить, теги, которые могут иметь содержимое, имеют открывающий тег <имя_тега> и закрывающий тег </имя_тега> . Как видим, синтаксис HTML крайне прост, всего один тип инструкций с небольшими вариациями. Для полноты картины стоит отметить, что одиночные теги, которые не имеют вложений, правильно писать так: <br /> (это тег окончания строки), <hr /> (тег горизонтальной линии-разделителя). Итак, пример тега с контентом. Посмотрим на уже упомянутый тег <h1>:
<h1>Заголовок первого уровня</h1>
Приведенный код отобразится как:
Заголовок первого уровня
Собственно, на этом разговор о том, что такое HTML можно заканчивать. Разве что можно добавить, что для большинства браузеров безразличен регистр символов, в которых набраны теги: <table> то же самое что <TABLE>. И второе, любые пробельные символы в HTML интерпретируются как пробел. Причем, любое их количество. А для отступов и переносов строк используют специальные теги и комбинации символов.Вышесказанное приводит нас к мысли, что для создания и редактирования html-страницы понадобится текстовый редактор, а для просмотра (и отладки) - браузер.
2. Основные (самые полезные) теги.
Если мы предположим, что тегов существует больше, чем нам может понадобиться в работе над нашим сайтом, то мы окажемся правы. Мы даже не сильно ошибемся, если предположим, что немногие из разработчиков веб-страниц знают все теги на память.
Тем не менее, существует некоторый обязательный набор, без которого сложно чувствовать себя свободно в деле интернетостроения. Итак.
Парные (содержащие контент) теги.
<HTML> - этот тег является корневым элементом страницы. Или, если упростить лексику - это самый главный тег. Все остальное содержимое html-документа находится снутри тега <HTML>.
<HEAD> - этот и следующий (body) теги определяют содержимое документа. Причем <head> содержит только теги, задающие общие параметры всей страницы, а не хранят контент.
<BODY> - именно этот тег является родительским для всего видимого контента.
<P> - тег параграфа, ил абзаца. параграфы отделяются один от другого вертикальным отступом.
<H1> - <H6> - заголовки шести уровне. самый большой - H1. Используются для выделения заголовков большим и более жирным шрифтом.
<A> - тег гиперссылки. ключевой тег для WWW. Именно он является главным способом связывания разных документов в масштабе всей "паутины". Базовый синтаксис:
атрибут HREF содержит веб-адрес, по которому совершится переход.
а внутри самого тега расположен текст, который отобразится.
Пример:
<a href="http://domain.com/adress-of-page.html">Текст ссылки</a>
Текст ссылки
-- Два слова про атрибуты. Атрибуты влияют на вид, либо поведение элементов страницы, заданные тегом. Существуют общие атрибуты, такие как style, id, class; и специфичные для конкретных тегов, либо типов тегов. --
<DIV> - тег блока. В нем может быть что угодно, в том числе и другие блоки. Очень удобен для форматирования. Если блоку задан атрибут style, то может быть изменено стандартное отображение блока и его содержимого, например, задана ширина и отступы от краев блока.
<SPAN> - тег строки. Если ему задан атрибут style , то он изменяет отображение помещенного в него текста в соответствием с заданным стилем. Например - цвет и размер текста. Пример:
код:
Просто текст,
<span style="color: red; font-size:16pt;" >большой красный текст</span>,
снова просто текст.
результат:
Просто текст, большой красный текст, снова просто текст.
Сложные теги.
<UL> - тег списка. Определяет общий контейнер списка, содержит дочерние элементы - пункты списка.
<LI> - пункт списка, всегда находится в контейнерном элементе <ul>.
Пример списка:
<ul> <li>красный</li> <li>оранжевый</li> <li>желтый</li> </ul>
результат:
- красный
- оранжевый
- желтый
<TR> - тег табличной строки, всегда находится внутри тега таблицы.
<TD> - тег табличной ячейки, всегда находится внутри табличной строки.
<TH> - тег ячейки заголовка таблицы, всегда находится внутри табличной строки.
пример таблицы в html:
<table> <tr> <th>Имя</th> <th>Фамилия</th> </tr> <tr> <td>Вася</td> <td>Пупкин</td> </tr> <tr> <td>Джеймс</td> <td>Бонд</td> </tr> </table>
| Имя | Фамилия |
|---|---|
| Вася | Пупкин |
| Джеймс | Бонд |
Непарные (одиночные) теги.
<IMG /> - тег картинки. имеет основной атрибут src (source - источник). src содержит URL картинки.
<img src="/images/animals/tiny-bird.jpg" />
<BR /> - тег окончания строки.
<HR /> - тег разделителя. Выглядит как горизонтальная линия.
Теперь пример кода целой HTML страницы.
<html> <head> <title>Заголовок окна</title> </head> <body> <h1>Заголовок страницы</h1> <p>Абзац с текстом</p> <p>Абзац с другим текстом</p> <h2>Заголовок второго уровня.</h2> <table> <tr> <th>Имя</th> <th>Фамилия</th> </tr> <tr> <td>Вася</td> <td>Пупкин</td> </tr> <tr> <td>Джеймс</td> <td>Бонд</td> </tr> </table> <h2>А заголовок блока со списком.</h2> <div> <ul> <li>красный</li> <li>оранжевый</li> <li>желтый</li> <li>зеленый</li> </ul> </div> <div><a href="http://lessmember.blogspot.com/">Страница разработчика</a></div> </body> </html>
Ну и последнее, HTML может содержать комментарии, т.е. такие строки, которые никак не будут интерпретироваться браузером, словно их нет.
Комментарий начинается символами <!--
и заканчивается -->
Пример:
<!-- Этот текст никогда не увидит пользователь,
пока не откроет исходный код страницы -->
Это были самые основы HTML.
За большим прошу таки в yandex / google, и на HtmlBook.ru .
Комментариев нет:
Отправить комментарий