Уроки HTML - Тусовочка

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Модератор форума: Linux  
Тусовочка » Компьютерная зона. » Hard&Soft » Уроки HTML
Уроки HTML
ferry_corstenДата: Суббота, 19.05.2007, 18.08.49 | Сообщение # 1
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается

Глава 1. Вводные замечания
Для чего нужно это руководство?
Это руководство задумано как учебник для тех, кто хочет публиковать документацию любого рода на глобальной компьютерной сети Интернет. Насколько велика Интернет, точно не знает никто. Ходят слухи, что в 1996 году число крупных машин (серверов) и локальных сетей, подключенных к Интернет, перевалило за 10 миллионов. Точное число пользователей просто никому не известно. Известно только, что оно очень велико — несколько сот миллионов человек по всему миру.
Чтобы опубликовать документ (здесь и далее под документом понимается файл, содержащий некоторую информацию) на Интернет, достаточно поместить его на сервер, постоянно подключенный к Интернет и способный общаться с другими серверами с помощью протокола передачи гипертекстов (HyperText Transfer Protocol, или http://). Совокупность таких серверов получила название "всемирной паутины" (World Wide Web, или WWW).
Разработку документов, однако, можно проводить и на компьютере, не имеющем выхода в Интернет. Автор, например, разрабатывал Руководство в текстовом процессоре Microsoft Word 2.0, а затем перенес в формат HTML и разместил на сервере Yellow Internet ( Любой желающий может бесплатно разместить на этом сервере свои файлы суммарным объемом до двух мегабайт.
Что такое HTML?
Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2 и 4.0. Текущую спецификацию HTML всегда можно найти на сервере W3C (http://www.w3.org/).
Все, о чем написано в Руководстве, будет гарантированно работать с программным обеспечением, поддерживающим любую известную на сегодня спецификацию HTML. Естественно, для этого пришлось опустить некоторые детали, которые описаны не во всех спецификациях или описаны в разных спецификациях по-разному. Однако могу Вас уверить, что Ваши документы будут полностью работоспособными и вполне приличными по внешнему виду.
 
ferry_corstenДата: Суббота, 19.05.2007, 18.11.50 | Сообщение # 2
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается

Для освоения HTML по этому Руководству Вам понадобятся две вещи:
Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов. Мне лично очень нравится Netscape Navigator, поэтому именно его команды я и буду приводить, описывая операции с браузером.
Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.
Мы будем использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля за сделанным.
Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Notepad, и в Netscape Navigator. Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape Navigator, чтобы увидеть эти изменения реализованными в HTML-документе.
Необходимое отступление о редакторах HTML
В настоящее время широко используются два типа редакторов HTML:
Редакторы типа "что видишь, то и получишь" (Netscape Navigator Gold, Microsoft Front Page). Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.
Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.
Как я уже говорил, нам для изучения HTML понадобится только текстовый редактор и браузер. Когда Вы освоите HTML в минимальной степени, Вы сами сможете подобрать себе редактор по вкусу.
Глава 2. Наш первый HTML-документ
Как устроен HTML-документ
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
 
ferry_corstenДата: Суббота, 19.05.2007, 18.12.43 | Сообщение # 3
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается


<br /> Пример 1 <br />



Привет!

Это простейший пример HTML-документа.

Этот *.html-файл может быть
одновременно открыт и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите
кнопку Reload ('перезагрузить') в Netscape,
чтобы увидеть эти изменения реализованными
в HTML-документе.



Если хотите, можно посмотреть этот пример прямо сейчас.

Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:



Пример 1


Привет!

Это простейший пример HTML-документа.

Этот *.html-файл может быть одновременно открыт
и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите кнопку
Reload ('перезагрузить') в Netscape, чтобы увидеть
эти изменения реализованными в HTML-документе.



Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, ) называется меткой (по-английски — tag, читается "тэг").

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением "/".

Метки можно вводить как большими, так и маленькими буквами. Например, метки , и будут восприняты браузером одинаково.

Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.

Обязательные метки <*html> ... <*/html>

Сообщение отредактировал ferry_corsten - Суббота, 19.05.2007, 18.16.53
 
ferry_corstenДата: Суббота, 19.05.2007, 18.16.17 | Сообщение # 4
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается
****<*html>
****************
<*head>
*******************
<*title>Пример 1
****************
<*/head>
******************
<*body>
********************
<*H1>Привет!
********************

Это простейший пример HTML-документа.


*******************************

Этот *.html-файл может быть одновременно открыт
и в Notepad, и в Netscape.
*********************************************
Сохранив изменения в Notepad, просто нажмите кнопку
***********************************************
Reload ('перезагрузить') в Netscape, чтобы увидеть
************************************************
эти изменения реализованными в HTML-документе.<*/P>
***********************************************
<*/body>
<*/html>*********************
Вот этот пример который расматриваеться выше точнее код для примера
думаю,догадались что в блонконе без *** вводить

Сообщение отредактировал ferry_corsten - Суббота, 19.05.2007, 18.17.46
 
ferry_corstenДата: Суббота, 19.05.2007, 18.20.14 | Сообщение # 5
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <*html>) называется меткой (по-английски — tag, читается "тэг").

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида есть закрывающая метка вида <*/tag> с тем же именем, но с добавлением "/".

Метки можно вводить как большими, так и маленькими буквами. Например, метки <*body>, <*BODY> и <*Body> будут восприняты браузером одинаково.

Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.

Обязательные метки <*html> ... <*/html>

Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.

<*head> ... <*/head>

Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <*title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.

<*title> ... <*/title>

Все, что находится между метками <*title> и <*/title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<*body> ... <*/body>

Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

<*H1> ... <*/H1> — <*H6> ... <*/H6>

Метки вида (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

<*P> ... <*/P>

Такая пара меток описывает абзац. Все, что заключено между <*P> и <*/P>, воспринимается как один абзац.

Метки <*Hi> и <*P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:

<*H1 ALIGN=CENTER>Выравнивание заголовка
по центру<*/H1>

 
ferry_corstenДата: Суббота, 19.05.2007, 18.24.43 | Сообщение # 6
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается
<*P ALIGN=RIGHT>Образец абзаца с выравниванием
по правому краю<*/P>

Подытожим все, что мы знаем, с помощью примера 2:

<*html>
<*head>
<*title>Пример 2
<*/head>
<*body>
<*H1 ALIGN=CENTER>Привет!<*/H1>
<*H2>Это чуть более сложный пример
HTML-документа<*/H2>
<*P>Теперь мы знаем, что абзац можно выравнивать
не только влево, <*/P>
<*P ALIGN=CENTER>но и по центру<*/P>
<*P ALIGN=RIGHT>или по правому краю.<*/P>
<*/body>
<*/html>

С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.

Глава 3. Внутри абзаца

Непарные метки

В этом разделе мы поговорим о метках, которые не подчиняются двум основным правилам HTML: все они непарные, а некоторые (так называемые &-последовательности) к тому же должны вводиться только маленькими буквами.

<*BR>

Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца. Очень удобно при публикации стихов (см. пример 3).

<*html>
<*head>
<*title>Пример 3
<*/head>
<*body>
<*H1>Стих
<*H2>Автор неизвестен
<*P>Однажды в студеную зимнюю пору<*BR>
Сижу за решеткой в темнице сырой.<*BR>
Гляжу - поднимается медленно в гору<*BR>
Вскормленный в неволе орел молодой.<*/P>
<*P>И шествуя важно, в спокойствии чинном,<*BR>
Мой грустный товарищ, махая крылом,<*BR>
В больших сапогах, в полушубке овчинном,<*BR>
Кровавую пищу клюет под окном.<*/P>
<*/body> <*/html>

<*HR>

Метка <*HR> описывает вот такую горизонтальную линию:

Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). В примере 4 приведена небольшая коллекция горизонтальных линий.

<*html>
<*head>
<*title>Пример 4<*/title>
<*/head>
<*body>
<*H1>Коллекция горизонтальных линий<*/H1>
<*HR SIZE=2 WIDTH=100%><*BR>
<*HR SIZE=4 WIDTH=50%><*BR>
<*HR SIZE=8 WIDTH=25%><*BR>
<*HR SIZE=16 WIDTH=12%><*BR>
<*/body>
<*/html>

&-последовательности

Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак ">" кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем).

Символ "&" (амперсанд) кодируется последовательностью &

Двойные кавычки (") кодируются последовательностью "

Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа " или & не допускается.

Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.

Комментарии

Браузеры игнорируют любой текст, помещенный между . Это удобно для размещения комментариев.

<*!-- Это комментарий --*>
P.S НЕ ЗАБЫВАЙТЕ ВЕЗДЕ ГДЕ СТОЯТ * В БЛОКНОТЕ ИХ УБЕРАЙТЕ Я ПИШУ ТАК ПРОСТО ЧТОБ ИХ ФОРУМ НЕ РАСПОЗНАВАЛ!

Сообщение отредактировал ferry_corsten - Суббота, 19.05.2007, 18.25.27
 
ferry_corstenДата: Суббота, 19.05.2007, 18.29.07 | Сообщение # 7
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается
Форматирование шрифта

HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах.

Физические стили

Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <*B> и <*/B>, будет написано жирным шрифтом. Текст между метками <*I> и <*/I> будет написан наклонным шрифтом.

Несколько особняком стоит пара меток <*TT> и <*/TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.

Логические стили

При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.

<*EM> ...

От английского emphasis — акцент.

<*STRONG> ... <*/STRONG>

От английского strong emphasis — сильный акцент.

<*CODE> ... <*/CODE>

Рекомендуется использовать для фрагментов исходных текстов.

<*SAMP> ... <*/SAMP>

От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.

<*KBD> ... <*/KBD>

От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.

...

От английского variable — переменная. Рекомендуется использовать для написания имен переменных.

Пример

Подытожим наши знания о логических и физических стилях с помощью примера 5. Заодно Вы сможете увидеть, как Ваш браузер показывает те или иные логические стили.

<*html>
<*head>
<*title>Пример 5
<*/head>
<*body>
<*H1>Шрифтовое выделение фрагментов текста<*/H1>
<*P>Теперь мы знаем, что фрагменты текста можно
выделять
<*B>жирным<*/B> или <*I>наклонным<*/I> шрифтом.
Кроме того, можно
включать в текст фрагменты с фиксированной шириной
символа
<*TT>(имитация пишущей машинки)<*/TT><*/P>
<*P>Кроме того, существует ряд логических стилей:<*/P>

<*EM>EM - от английского emphasis - акцент <*BR>
<*STRONG>STRONG - от английского strong emphasis -
сильный акцент <*/STRONG><*BR>
CODE - для фрагментов
исходных текстов<*BR>
<*SAMP>SAMP - от английского sample -
образец <*/SAMP><*BR>
<*KBD>KBD - от английского keyboard -
клавиатура<*/KBD>

VAR - от английского variable -
переменная <*/VAR><*/P>
<*/body>
<*/html>

 
ferry_corstenДата: Суббота, 19.05.2007, 18.36.32 | Сообщение # 8
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается
ОСТАЛЬНОЕ ПРОТОМ!ЗАКОЛЕБАЛСЯ ПИСАТЬ УЖЕ biggrin
 
leraДата: Воскресенье, 20.05.2007, 14.08.04 | Сообщение # 9
Adminsha
Группа: Админы
Сообщений: 2153
Репутация: 37
Статус: Отсыпается
ferry_corsten, а я читать)))
Скажи, а где мне взять эту программу?
Quote (ferry_corsten)
Notepad, и в Netscape Navigator

Или я что то не поняла?
Короче, в какой программе мне нужно учиться это все набирать?

Тяжело быть тупой.......... cool


Не бывает безвыходных ситуаций- бывает неприятное решение .(с)
 
ferry_corstenДата: Воскресенье, 20.05.2007, 15.00.14 | Сообщение # 10
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается
да lera, тебе еще книгу и по виндовсу прочитать надо Notepad в переводе означает блокнот находиться он в Пуск->Стандартные->Блокнот,а это Netscape Navigator те не надо это практически тот же блокнот
 
leraДата: Воскресенье, 20.05.2007, 18.26.20 | Сообщение # 11
Adminsha
Группа: Админы
Сообщений: 2153
Репутация: 37
Статус: Отсыпается
Так бы и сказал-блокнот!!! А то написал, я не поняла! angry Научусь!

Не бывает безвыходных ситуаций- бывает неприятное решение .(с)
 
ferry_corstenДата: Воскресенье, 20.05.2007, 23.02.10 | Сообщение # 12
Реализатор
Группа: Проверенные
Сообщений: 43
Репутация: 1
Замечания: 0%
Статус: Отсыпается
smile smile smile
 
leraДата: Вторник, 29.05.2007, 18.59.42 | Сообщение # 13
Adminsha
Группа: Админы
Сообщений: 2153
Репутация: 37
Статус: Отсыпается
Давай дальше, вроде разобралась))))

Не бывает безвыходных ситуаций- бывает неприятное решение .(с)
 
CoFFeeДата: Четверг, 31.05.2007, 19.24.28 | Сообщение # 14
Молдованка
Группа: Проверенные
Сообщений: 456
Репутация: 9
Замечания: 0%
Статус: Отсыпается
е-мае....Макс))))дурам такие темы на форуме,противопоказаны)))))))

Спортсменка,комсомолка,и просто красавица)))))
 
Люблю_ЛеруДата: Пятница, 01.06.2007, 06.03.55 | Сообщение # 15
Главбух
Группа: Проверенные
Сообщений: 238
Репутация: 3
Замечания: 0%
Статус: Отсыпается
Ыыы, а с реди нас что есть дуры??? помоему нет так что Макс толкай тему дальше!!!

ЛЮБЛЮ И БУДУ ЛЮБИТЬ!!!!
 
Тусовочка » Компьютерная зона. » Hard&Soft » Уроки HTML
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск: