Женат
Свободна
Свободен
Скрыть опции темы
Привет, гость!
Зарегистрируйся, чтобы получить полный доступ и возможность писать в форуме, группах и блогах.
Вход Регистрация
Вход Регистрация
 Chuvak_s_kosoy
|
|||||
|
В данной теме постепенно будет описаны все основы языка разметки текста HTML. За основу взяты: Учебник "Практическое руководство по 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-документ:
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <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:
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. Это сообщение отредактировал Chuvak_s_kosoy - 16-08-2006 - 18:18 |
||||
|
Chuvak_s_kosoy
|
|
|
Что такое ссылки В 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 может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени). |
|
Chuvak_s_kosoy
|
|||
|
Как устроена таблица В устройстве таблицы легче всего разобраться на простом примере.
Таблица начинается с метки <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 — неразрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет. Любая ячейка таблицы может содержать в себе другую таблицу. |
||
|
saffi
|
|
|
C моей точки зрения, самый понятный и эфективный учебник для начинающих  , во всяком случае именно с него я начинала лет 7-8 назад и сейчас, когда заклинит, к нему обращаюсь:Учебник по html ПыСы: рекомендую всем своим знакомым - никто еще не жаловался. ПыСы2: присоединенный файл - он же (учебник), для изучения в оффлайне. Это сообщение отредактировал saffi - 22-11-2006 - 13:00 |
 Gec
|
|
|
http://www.sitem.ru/book.html - вот здесь много учебников. Клевый сайтик.
|
|
natali1983066
|
|
|
какой програмой лучше перетворить код в страницу, желательно размерчик поменьше.
|
 Platinum PROFI
|
|
|
Поясни что ты имеешь ввиду? Программу типа WYWISING-редактор?
|
|
barrakuda
|
|||
|
WYWISING-редактор??  Скорее всего WYSIWYG, от what you see is what you get  Например великий и узасный DREAMWEAVER |
||
|
maxdiversexnarod1
|
|
|
WYWISING Я валялсо ))))) |
|
doodge
|
|
|
А кто-нить может подсказать как сделать редирект (т.е. перенаправление) с одной страницы на другую автоматически при посещении первой???
|
|
maxdiversexnarod1
|
|||
|
С помощью HTML (самый надежный способ): <meta http-equiv="refresh" content="2; url=http://somewhere.com"> Число 2 означает, что редирект произойдет через 2 секунды. |
||
|
doodge
|
|
|
а что "refresh" означат???? что то у меня переадресации не происходит а reload страницы через заданное время происходит, вместо refresh должно что то другое быть, означающее перенаправление, а не перезагрузку страницы.... кстати несколько кавычек пропустил...))) |
|
maxdiversexnarod1
|
|
|
> что то у меня переадресации не происходит а reload страницы через заданное время происходит Попробовал щас у себя - всё прекрасно работает. > а что "refresh" означат? refresh означает обновление страницы. Если не указывать URL, а только указать секунды - будет обновлена текущая страница. А вот если указать другую URL - будет загружена именно она. > кстати несколько кавычек пропустил...))) Кто, я пропустил? Нет, в примере всё правильно написано, это ты не разобрался. |
|
barrakuda
|
|
|
Всё правильно написано и кавычки правильно проставлены. Учебники читать надо
|
|
doodge
|
|||||
|
ндаа???.... сорри извиняюсь, НО короче сейчас попробовал как у вас написано всё в точности точно также.. волучается вот что...
всё получилось!!!! просто надо было вместо www писать http:// тогда всё заработало Это сообщение отредактировал doodge - 31-05-2007 - 07:30 |
||||
|
xelper
|
|
|
учебник для начинающих
|
 Lagrande
|
|
|
Народ подскажите: Возьмем к примеру такой момент - при нажатии на кнопку "отправить запрос" -> выскакивает форма (типа: выши запросы и тд и тп.) а в низу кнопка отправить. Человек заполняет необходимые графы и отправляет эту форму владельцу сайта. Обьясните в кратце на пальцах, как это работает? Это скрипт, может специальная прога? |
|
barrakuda
|
|
|
Здесь одним HTML не обойдёшься, нужен PHP хотя бы. Ищем инфу в нете по данному вопросу: "обработка форм" http://www.intuit.ru/department/pl/php5/7/ |
|
lobotrays
|
|||
|
это яваскрипты умеют делать но на пальцах это не обьяснить там знания нужны |
||
 Пружинка
|
|
|
На мой взгляд лучший учебник для начинающих, я прочла его легко. Учебник |
|
Lagrande
|
|
|
Я уже разобрался как на ЯваСкрипте делать открывающиеся отдельно окошки, как делать и вставлять календарь, но вот какой момент хотел уточнить да я думаю и начинающим будет полезно иметь представление о: том как правильно размещать Скрипты у себя в штмл докуменитах-> типо в голове пивем переменные, в тело вставляем ссылку на фаил .js. Кто может по человечески описать данную процедуру (размещения скрипта) и ее ограничения и ошибки?
|
|
hp3325
|
|||
|
Лучше в блоке <haed> Прописать следующее <script type="text/javascript" src="js_functions.js"></script> js_functions.js - это файл в который вынесены все JS функции и классы. В html документе они будут использоваться с помощью событий. <div onclick='function1()'>GG</div> И т.д. Я не люблю смешивать html и JS код. Когда JS вынесен в отдельный файл весь html документ выглядет наиболее понятно и логично. |
||
|
hp3325
|
|||||
|
Спецв предпочитают набивать html код руками. Всякие редакторы засоряют код документа. Я не говорю уж о соответствии полученного документа стандартам w3. :-) Это сообщение отредактировал hp3325 - 05-11-2007 - 12:52 |
||||
|
barrakuda
|
|
|
Ну да, безусловно! А профессиональные и дорогие редакторы, типа того же DREAMWEAVER это типа для ламеров, решивших слатать домашнюю страничку? Чем же таким засоряет Дрим хтмл? |
|
vityusha39
|
|
|
Скажите кто знает.Сделал сайт с помощью FrontPage,теперь надо в голову вставить название,ключевые слова,описание.Но вопрос не в этом,я знаю что писать.Вопрос в том,нужно ли то всё,что написано в голове,ниже привожу код с 1-й строки.Некоторые строки не так скопировались,но я думаю кто знает тот поймёт.Сайт не по шаблону,а сам рисовал. <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> |
|
Рекомендуем почитать также топики: Общественность восстала против Windows Агитация о вступлении в нашу Гильдию! S.T.A.L.K.E.R. Какая ОС WINDOWS лучше? Завис Макстон, а там незаконченное РМ. |