За основу взяты: Учебник "Практическое руководство по HTML" Чупахин Н.,
методические указания к выполнению лабораторных работ кфедры программирования МИСиС.
Экскурс в историю:
Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2 и 4.0. Текущую спецификацию HTML всегда можно найти на сервере W3C (http://www.w3.org/).
Ввнедение:
HTML - это не язык программирования, - он служит лишь для разметки странички, придания определенного вида тому или иному элементу, будь то таблица, текст или картинки.
Осуществляется это путем присвоения каждому элементу своих параметров, которые распознает браузер. Параметры эти могут быть заданы как для одного, так и для группы или типа элементов. Тип элементов может быть таким: таблицы, ячейки, ссылки, текст и т.п. То есть что-то, что можно назвать одним термином. Отдельные свойства можно присваивать и выбранным элементам персонально.
Параметры отображения элементов задаются при помощи тегов, в которых и задается желаемый вид того или иного элемента нашей странички.
Справка:
Браузер (browser) - программа для просмотра выложенных в Сеть страничек. Является интерпретатором (т.е. "обработчиком команд") HTML.
Теги (tags) - это стандартизированная система обозначений и параметров, распознаваемых броузерами* и придающих HTML тот вид, который мы наблюдаем на страничках в Сети.
Принцип наследования тегов.
Теги-контейнеры.
Прежде всего стоит определить то, как эти самые теги располагаются. Дело в том, что теги в большинстве своем состоят из двух частей - это открывающий (он же - содержащий параметры) и замыкающий, то есть, "конец" тега. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тега.
Теги, не нуждающиеся в закрытии.
Это теги переноса - <br>, принудительно перекидывающие все, что располагается после них, в новую строку. Благодаря этому тегу можно писать стихи столбиками.
Наш первый HTML-документ
Как устроен HTML-документ
HTML-документ — это просто текстовый файл с расширением *.html (*.htm). Вот самый простой HTML-документ:
| CODE |
<html> <head> <title> Пример 1 </title> </head> <body> <H1> Привет! </H1> <P> Это простейший пример HTML-документа. </P> <P> Этот *.html-файл может быть одновременно открыт и в Блокноте, и в Internet Explorer. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('обновить') в Internet Explorer, чтобы увидеть эти изменения реализованными в HTML-документе. </P> </body> |
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тэг").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные метки
<html> ... </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head> ... </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
<title> ... </title>
Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
<body> ... </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
<H1> ... </H1> — <H6> ... </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> ... </P>
Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка
по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием
по правому краю</P>
Подытожим все, что мы знаем, с помощью примера 2:
| CODE |
| <html> <head> <title>Пример 2</title> </head> <body> <H1 ALIGN=CENTER>Привет!</H1> <H2>Это чуть более сложный пример HTML-документа</H2> <P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P> <P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P> </body> </html> |
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца.
Это сообщение отредактировал Chuvak_s_kosoy - 16-08-2006 - 18:18
В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:
<A HREF="[адрес перехода]">
выделенный фрагмент текста</A>
В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:
<A HREF="index.html">Перейти к оглавлению</A>
Изображения в HTML-документе
Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.
Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:
<IMG SRC="picture.gif">
Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:
<IMG SRC="picture.gif" ALT="Картинка">
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
В устройстве таблицы легче всего разобраться на простом примере.
| CODE |
<HTML> <HEAD> <TITLE>Пример 10</TITLE> </HEAD> <H1>Простейшая таблица </H1> <TABLE BORDER=1> <!--Это начало таблицы--> <CAPTION> <!--Это заголовок таблицы--> У таблицы может быть заголовок </CAPTION> <TR> <!--Это начало первой строки--> <TD> <!--Это начало первой ячейки--> Первая строка, первая колонка </TD> <!--Это конец первой ячейки--> <TD> <!--Это начало второй ячейки--> Первая строка, вторая колонка </TD> <!--Это конец второй ячейки--> </TR> <!--Это конец первой строки--> <TR> <!--Это начало второй строки--> <TD> <!--Это начало первой ячейки--> Вторая строка, первая колонка </TD> <!--Это конец первой ячейки--> <TD> <!--Это начало второй ячейки--> Вторая строка, вторая колонка </TD> <!--Это конец второй ячейки--> </TR> <!--Это конец второй строки--> </TABLE> <!--Это конец таблицы--> </BODY> </HTML> |
Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов:
ALIGN
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
WIDTH
Ширина таблицы. Ее можно задать в пикселах (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).
BORDER
Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.
CELLSPACING
Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).
CELLPADDING
Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).
Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей).
Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:
ALIGN
Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:
NOWRAP
Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
COLSPAN
Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN
Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN
Устанавливает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
WIDTH
Устанавливает ширину ячейки в пикселах (например, WIDTH=200).
HEIGHT
Устанавливает высоту ячейки в пикселах (например, HEIGHT=40).
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет.
Любая ячейка таблицы может содержать в себе другую таблицу.
, во всяком случае именно с него я начинала лет 7-8 назад и сейчас, когда заклинит, к нему обращаюсь:Учебник по html
ПыСы: рекомендую всем своим знакомым - никто еще не жаловался.
ПыСы2: присоединенный файл - он же (учебник), для изучения в оффлайне.
Это сообщение отредактировал saffi - 22-11-2006 - 13:00
Присоединённый файл
allsteps.zip
| QUOTE (Platinum PROFI @ 21.04.2007 - время: 23:10) |
| Поясни что ты имеешь ввиду? Программу типа WYWISING-редактор? |
WYWISING-редактор??
Скорее всего WYSIWYG, от what you see is what you get
Например великий и узасный DREAMWEAVER
Я валялсо )))))
| QUOTE (doodge @ 30.05.2007 - время: 13:16) |
| А кто-нить может подсказать как сделать редирект (т.е. перенаправление) с одной страницы на другую автоматически при посещении первой??? |
С помощью HTML (самый надежный способ):
<meta http-equiv="refresh" content="2; url=http://somewhere.com">
Число 2 означает, что редирект произойдет через 2 секунды.
кстати несколько кавычек пропустил...)))
Попробовал щас у себя - всё прекрасно работает.
> а что "refresh" означат?
refresh означает обновление страницы. Если не указывать URL, а только указать секунды - будет обновлена текущая страница. А вот если указать другую URL - будет загружена именно она.
> кстати несколько кавычек пропустил...)))
Кто, я пропустил? Нет, в примере всё правильно написано, это ты не разобрался.
Учебники читать надо
НО короче сейчас попробовал как у вас написано всё в точности точно также.. волучается вот что...
| QUOTE | ||
переход на страницу: www.старая_страница.ru/новая_страница где: в теле Старой_страницы пишется
|
всё получилось!!!! просто надо было вместо www писать http:// тогда всё заработало
Это сообщение отредактировал doodge - 31-05-2007 - 07:30
Присоединённый файл
HTML.CHM
Обьясните в кратце на пальцах, как это работает? Это скрипт, может специальная прога?
Ищем инфу в нете по данному вопросу: "обработка форм"
http://www.intuit.ru/department/pl/php5/7/
| QUOTE (Lagrande @ 08.08.2007 - время: 21:44) |
| Народ подскажите: Возьмем к примеру такой момент - при нажатии на кнопку "отправить запрос" -> выскакивает форма (типа: выши запросы и тд и тп.) а в низу кнопка отправить. Человек заполняет необходимые графы и отправляет эту форму владельцу сайта. Обьясните в кратце на пальцах, как это работает? Это скрипт, может специальная прога? |
это яваскрипты умеют делать
но на пальцах это не обьяснить
там знания нужны
Учебник
| QUOTE (Lagrande @ 04.10.2007 - время: 10:35) |
| Я уже разобрался как на ЯваСкрипте делать открывающиеся отдельно окошки, как делать и вставлять календарь, но вот какой момент хотел уточнить да я думаю и начинающим будет полезно иметь представление о: том как правильно размещать Скрипты у себя в штмл докуменитах-> типо в голове пивем переменные, в тело вставляем ссылку на фаил .js. Кто может по человечески описать данную процедуру (размещения скрипта) и ее ограничения и ошибки? |
Лучше в блоке <haed>
Прописать следующее
<script type="text/javascript" src="js_functions.js"></script>
js_functions.js - это файл в который вынесены все JS функции и классы.
В html документе они будут использоваться с помощью событий.
<div onclick='function1()'>GG</div>
И т.д.
Я не люблю смешивать html и JS код. Когда JS вынесен в отдельный файл весь html документ выглядет наиболее понятно и логично.
| QUOTE (barrakuda @ 22.04.2007 - время: 02:28) | ||
WYWISING-редактор?? Скорее всего WYSIWYG, от what you see is what you get Например великий и узасный DREAMWEAVER |
Спецв предпочитают набивать html код руками. Всякие редакторы засоряют код документа. Я не говорю уж о соответствии полученного документа стандартам w3. :-)
Это сообщение отредактировал hp3325 - 05-11-2007 - 12:52
Чем же таким засоряет Дрим хтмл?
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:Categories msdt:dt="string">Бизнес</mso:Categories><mso:Approval_x0020_Level msdt:dt="string"></mso:Approval_x0020_Level><mso:Assigned_x0020_To msdt:dt="string"></mso:Assigned_x0020_To></mso:CustomDocumentProperties></xml>
<![endif]-->
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
</head>
Я бы сократил вот так:
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
</html>