Язык HTML в программировании (стр. 1 из 3). Html программирование
Основы html программирования. Урок первый.
Программирование веб сайтов, сейчас все больше и больше популярности набирает среди молодежи и пользователей интернета, при этом почти все первым делом изучают основы html программирования.
Html язык, считается одним из самых простых языков в веб программировании, но не считается одним из лучших языков, для создания сайтов. Дело все в том, что html программирование применяется чаще всего для создания каркаса сайта, его форматирования, а так же для базового понимания, что же такое веб программирование.
И так, для того чтобы выучить основы html программирования, вам необходимы : любой текстовый редактор (сейчас многие используют Adobe Dreamweaver CS5), компьютер (подключение к интернету не обязательно) и хоть немножечко мозгов.
Открываем Adobe Dreamweaver или же блокнот, и начинаем прописывать следующие теги, которые являются главными в web программировании при помощи языка html:
<HTML>
<HEAD>
<TITLE>
……….
</TITLE>
</HEAD>
<BODY>
……….
</BODY>
</HTML>
Только теги, точки прописывать не нужно! Они нужны для того, что бы вы знали, что там где расположены точки, мы будем прописывать параметры для нашей будущей страницы.
И так объясняем, всегда, web программирование документов нужно начинать с прописания открывающего <HTML> и закрывающего </HTML> тега. После чего прописываем еще два тега <HEAD> и </HEAD>, это так сказать голова нашей страницы, внутри которых будут находиться теги <TITLE> и </TITLE> — они необходимы для того чтобы дать название нашему документу в будущем. После всего этого, есть так же, два тега <BODY> и </BODY>, вот именно с ними мы и будем работать, именно в них мы будем прописывать, форматировать, изменять, как хотим наши параметры.
Теперь попробуйте вместо точек, которые находятся в тегах <BODY> и </BODY>, прописать:
Программирование это просто!
Написали?
Теперь сохраните, при помощи комбинаций Ctrl + S, или же зайдя в окно файл и выбрав пункт «Сохранить как», после этого вы увидите окошко, в котором вы должны выбрать путь для сохранения файла, чаще всего это рабочий стол, и внизу место для названия, называем как хотим page, index,только при условии, что после точки пропишите формат html, то есть теперь у вас должно выйти, например: page.html.
Закройте блокнот и посмотрите на свой рабочий стол. На нем должен находиться ваш сохраненный файл, обратите внимание на то, что иногда компьютер автоматически добавляет расширение txt, после точки, если он вам такое наделал, просто переименуйте снова документ в page.html.
Теперь откройте его и Вуаля, ваша первая веб страничка готова. В ней вы должны увидеть свой прописанный текст:
Программирование это просто!
Ну что же, программирование веб сайтов, оказывается не такая уж и сложная штука, а html программирование не очень тяжело понять и научиться работать с ним.
Самое интересное в блоге :
seo-kontent.ru
Основы HTML | Веб-программирование
HTML (HyperText Markup Language) — язык разметки гипертекста, используемый для создания документов, независимых от аппаратно-программной платформы. HTML — это не язык программирования, а описательный язык.
Цель работы: В ходе выполнения этой лабораторной работы необходимо освоить базовые приемы использования языка HTML для создания макета веб-страницы.
Задание к работе
- Спроектировать структуру веб-сайта по теме вашей учебной научно-исследовательской работы (УНИРС) или по любой другой теме, сопоставимой (или бОльшей) по объему с УНИРС. (см. также Практикум по программированию)
- Разработать эскиз оформления веб-сайта (использовать любой графический редактор).
- Выполнить верстку макета страницы с блочной структурой по разработанному эскизу.
Указания к работе
Описание тегов здесь и далее дается без привязки к конкретной версии языка HTML, это сделано умышленно, чтобы акцентировать внимание на общих принципах разметки. Это же относится и к атрибутам тегов. Подробные описание возможностей различных версий HTML (на уровне стандартов) всегда доступны на сайте http://www.w3.org.
Типовая структура парного тега:
<тег [атрибут="значение" [атрибут="значение" [...]]]>содержимое</тег>Подавляющее большинство тегов HTML - парные, т.е. требуют наличия закрывающего тега.
Теги могут быть вложенными, при этом важно соблюдать порядок соответствия открывающих и закрывающих тегов.
- Теги HTML не чувствительны к регистру.
- Различные версии HTML поддерживают устаревшие (deprecated) теги только для обратной совместимости.
- Значения атрибутов крайне рекомендуется закрывать в одинарные или двойные кавычки.
Структура веб-страницы
См. Введение в HTML.
Список основных тегов HTML
| <html> | Контейнер HTML-документа. | |
| <head> | Блок мета-данных HTML-документа | |
| <title> | Название HTML-документа, выводится в заголовке окна программы-браузера. | |
| <meta> | См. подробное описание мета-тегов | Предоставляет дополнительную информацию о документе. |
| <body> | Начальный и конечный тег тела документа. | |
| <p> | Параграф, основной текстовый контейнер, закрывающий тег обязателен </p>. После закрывающего тега браузер выполняет перенос строки и абзацный отступ. | <div> | Контейнер, основное предназначение — размещение блоков содержимого на странице |
| <br> (в XHTML/HTML 5 - <br />) | Принудительный перенос строки, закрывающий тег не требуется | |
| <pre> | Заключенный в теги <pre></pre> текст будет отображаться так, как он был отформатирован: с точным соблюдением переносов строк и интервалов. | |
| <ul> | Неупорядоченный (маркированный) список, элементы списка выводятся тегом <li> | |
| <ol> | Упорядоченный (нумерованный) список, элементы списка выводятся тегом <li> | |
| <a> | href = "URI" | Создает в документе гиперссылку, обязательный атрибут href указывает на ресурс или его местонахождение |
| <i> | Заключенный в теги <i></i> текст будет отображаться курсивом. | |
| <b> | Заключенный в теги <b><b> текст будет отображаться жирным шрифтом. | |
| <tt> | Заключенный в теги <tt></tt> текст будет отображаться моноширинный шрифтом. | |
| <h2>...<h6> | Заголовки разделов. Возможные значения — от h2 до h6. Семантически правильная структура заголовков веб-страницы влияет на ее ранжирование в поисковом индексе. | |
| <sub> | Заключенный в теги <sub></sub> текст будет смещен вниз (нижний индекс) | |
| <sup> | Заключенный в теги <sup></sup> текст будет смещен ввверх (верхний индекс). | |
| <big> | Заключенный в теги <big></big> текст будет отображаться шрифтом большего размера. | |
| <small> | Заключенный в теги <small></small> текст будет отображаться шрифтом меньшего размера. | |
| <img> | src="URI"alt = "some text" | Непарный тег. Указывает на изображение, загружаемое с адреса, заданного значением обязательного атрибута src. Значение атрибута alt используется, если изображение не может быть загружено или отображено. |
| <table> | Контейнер таблицы. Строки формируются тегом <tr>, ячейки — <td> |
Мета-теги
Основное предназначение мета-тегов (<meta ... />), это включение информации о документе, которая может содержать сведения об авторе, дате создания документа или авторских правах.
Вся информация, находящаяся в мета-тегах ориентирована на серверы, браузеры и поисковых роботов. Для посетителя веб-страницы информация, которую несут в себе мета-теги, будет не видна.
В документе может находится любое количество тегов <meta>. Все они размещаются в блоке <head>...</head>.
Рассмотрим некоторые, часто используемые мета-теги:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Используется для того, чтобы браузер мог правильно определить тип и содержимого и кодировку веб-страницы.
<meta http-equiv="Refresh" content="N; url=http://example.org/">Используется для указания имени автора. Поисковые системы могут найти нужную информацию по имени автора.
<meta name="keywords" content="список, ключевых, слов">В мета-теге keywords указываются ключевые слова и их синонимы, присутствующие в документе. Этот тег изначально был ориентирован на поисковые машины, но был скомпрометирован веб-мастерами, ипользовавшими его для поискового спама.
<meta name="description" content="Сюда вписывается краткое описание страницы">Этот тег задает фразу, по которой пользователь определяет суть вашей страницы и решает, посещать ли ее. Вписанные выражения в данный meta-тег играют важную роль в рейтинге страницы. Ключевые фразы из описания должны совпадать с основным текстом страницы, это тоже играет большую роль при индексации страницы поисковыми роботами.
<meta name="robots" content="index,all">Управление поисковым роботом, указание ему того, что страницу нужно индексировать (или нет, если указано "noindex").
Cпециальные символы
В таблице приведены некоторые специальные символы HTML, имеющие особое назначение и собственный способ представления в виде мнемонического или числового кода.
| |   | неразрывный пробел | |
| ¢ | ¢ | ¢ | цент |
| £ | £ | £ | фунт стерлингов |
| ¥ | ¥ | ¥ | иена или юань |
| § | § | § | параграф |
| © | © | © | знак copyright |
| « | « | « | левая двойная угловая скобка |
| ­ | ­ | место возможного переноса | |
| ® | ® | ® | знак зарегистрированной торговой марки |
| ° | ° | ° | градус | ² | ² | ² | верхний индекс два (x²) |
| ³ | ³ | ³ | верхний индекс три (x³) |
| · | · | · | точка по середине |
| » | » | » | правая двойная угловая скобка |
| ½ | ½ | ½ | дробь – одна вторая |
| × | × | × | знак умножения |
| ÷ | ÷ | ÷ | знак деления |
| σ | Σ | Σ | греческая заглавная буква сигма |
| λ | λ | λ | греческая строчная буква лямбда |
| μ | μ | μ | греческая строчная буква мю |
| • | • | • | маркер списка |
| … | … | … | многоточие ... |
| € | € | € | валюта евро |
Немного о верстке
Общее форматирование
Структура макета веб-страницы
Возможности HTML и CSS позволяют создавать гипертекстовые страницы как с линейной, так и с нелинейной структурой. Линейные структуры (где текст отображается последовательно, элемент за элементом) сейчас используются не часто. Пример веб-страницы с линейной структурой приведен в листинге 1 (обратите внимание на исходный код веб-страницы).
Больше возможностей по дизайну представляют макеты веб-страниц с нелинейной структурой, которые создаются:
- С использованием фреймов.
- С использованием табличной верстки.
- С использованием блочных элементов.
Пусть требуется создать документ, логически разделенный на три блока (рис. 2): «head» — верхний блок, «menu» — левый блок, «content» — правый блок. Примеры, иллюстрирующие как это можно сделать перечисленными способами, приведены в листингах 2, 3 и 4.
Рис.2. Веб-страница с тремя блоками
Листинг 2. Фреймовая структура
<!-- Содержимое блоков хранится в файлах top.html, left.html, content.html Сборка выполнена в файле index.html, имеющем следующий вид: --> <html> <head> <title>Фреймы</title> </head> <frameset rows="10%,*"> <frame name="top" src="top.html"> <frameset cols="10%,*"> <frame name="left" src="left.html"> <frame name="cont" src="content.html"> </frameset> <noframes>Это для браузеров, не поддерживающих фреймы.</noframes> </frameset> </html>Листинг 3. Табличная структура
<html> <head> <title>Таблицы</title> </head> <body> <table> <tr> <td colspan=2>HEAD</td> </tr> <tr> <td>LEFT</td> <td>CONTENT</td> </tr> </table> <body> </html>Листинг 4. Блочная структура
<html> <head> <title>Блоки (div)</title> <style> <!-- см. внедренные стили --> body {margin: 10px;} div {border: solid 1px black;} .top {position: relative; height: 100px; width: 100%;} .left {position: absolute; top: 114px; left: 10px; width: 200px; } .main {position: absolute; top: 114px; left: 214px; margin-right:8px;} </style> </head> <body> <div>TOP</div> <div>LEFT</div> <div>CONTENT</div> </body> </html>Контрольные вопросы
- Что такое HTML? Что такое гипертекстовый документ?
- Что такое тег? Структура тега HTML. Формат записи.
- Привести структуру HTML документа. Описать назначение тегов <html>, <head>, <meta>, <body>.
- Что такое атрибут тега? Формат записи атрибутов.
- Перечислить теги для представления текстовго содержимого и дать их описание.
- Как представляются гиперссылки в HTML документе? Дать пример внутренних и внешних ссылок.
- Перечислить виды списков, существующих в HTML. Привести теги, представляющие списки в HTML.
- Что такое вложенные списки в HTML? Привести пример разметки вложенного списка.
- Как включаются графические объекты в HTML документы?
- Куда будет указывать ссылка, если атрибут href оставить пустым (<a href="">анкор</a>)?
- Как будет отображаться страница, если мета-тег charset не будет соответствовать фактической кодировке текста?
- Что произойдет, если в странице использовать следующий код:<meta http-equiv="refresh" content="0;">
Анатольев А.Г., 09.10.2013
Постоянный адрес этой страницы:
www.4stud.info
HTML теги: верстка, программирование, оформление
Основным средством при создании веб-страниц любого уровня сложности является язык разметки гипертекста или Hypertext Markup Language (HTML). Все конструкции языка называются «HTML теги», которые и определяют отображение текста на странице и верстку всей html страницы.
Зачем нужны HTML теги? Дело в том, что любой документ, имеющийся на компьютере пользователя, создан в какой-либо определенной программе, и для его открытия огромном большинстве случаев нужна именно та программа, в которой он был создан, или аналогичная.
С появлением сети Интернет встал вопрос о корректной передаче документов между компьютерами пользователей, каждый из которых может иметь на своем компьютере свой, уникальный набор установленных программ. Более того, сами платформы могут различаться — далеко не все компьютеры, подключенные к Сети, работают под управлением Windows. Таким образом, полученный по Сети документ вполне может быть недоступным конкретному пользователю.
Для того, чтобы любой документ был корректно распознан на любом компьютере, независимо от платформы и пакета установленных программ, и был разработан язык разметки гипертекста HTML. В тело документа внедряются специальные конструкции, которые называются HTML теги, и весь документ сохраняется в обычном текстовом формате, который доступен для всех компьютеров.
Язык HTML не является языком программирования в привычном понимании. HTML теги лишь показывают специальной программе-броузеру, как именно следует отображать текст на странице. Броузер интерпретирует конструкции языка разметки и выдает запрошенную страницу.
Язык разметки гипертекста содержит самые разные теги, относящиеся к различным группам. Одной из самых больших групп являются HTML теги форматирования текста. В них содержится вся информация о том, как должен выглядеть сам текст: его выравнивание, размер, написание и стиль шрифта, отступы, списки, а также содержатся и многие другие свойства. Форматирование текста указывается атрибутами тегов и заносится внутрь тегов. Нужно, однако, иметь в виду, что современные технологии создания веб-страниц вынесение всего форматирования текста и отображение страницы в целом в отдельный файл каскадной стилевой таблицы, атрибуты же, которые могут содержать HTML теги форматирования текста, сейчас применяют редко.
Причины этого явления в том, что использование в веб-дизайне каскадных стилевых листов (SCC) в создании сайтов весьма удобно. Достаточно лишь вынести в CSS-файл все оформление и подключить к нему все страницы сайта (или некоторые). Такие страницы будут выглядеть всегда одинаково. При необходимости внесения изменений в оформление определенных элементов страницы (заголовок второго уровня, например) достаточно изменить лишь одну запись в файле CSS. Изменятся все заголовки второго уровня (h3) на всех страницах, подключенных к CSS. В частности, чтобы сделать заголовки зелеными, достаточно в CSS файле прописать лишь одну строчку:
h3{font-color: green}
А вот так будет определен абзац, выровненный по правому краю, на красном фоне, синим текстом:
p{background-color:red; color:blue; text-alignment:right}
Все облако тегов HTML содержит немало конструкций, но их изучение, как и изучение особенностей их использования представляется совершенно необходимым для веб-дизайнера, а особенно для верстальщика, который без них будет не в состоянии сверстать страницу.
Кроме того всегда нужно иметь в виду, что в последнее время наметилось явное разделение на «области», которого ранее не было, как не существовало и раздельного существования верстки, оформления и программной части веб-страниц.
При создании серьезных сайтов используются технологии, несколько отличающиеся от традиционных программ, входящих в состав пакета офисных документов. Даже для создания простой веб-странички используются html теги.
fb.ru
Язык HTML в программировании
Министерство Образования Московской Области
МОСКОВСКИЙ ОБЛАСТНОЙ ПРОМЫШЛЕННО-ЭКОНОМИЧЕСКИЙ КОЛЛЕДЖ
Курсовая работа
По предмету: «Web-Дизайн»
На тему: Язык HTML
Выполнил: Студент гр. ПР3
Соколов С.С.
Проверил: Витальева .Т.Б.
Дубна 2010
Оглавление
Введение
Теоретическая часть
Практическая часть
Заключение
Введение
Что такое HTML ?
С появлением локальных сетей, подключением таких сетей к Интернет, созданием внутрикорпоративных, сетей, появляется возможность с любого рабочего места организации получить доступ к информационному ресурсу сети.
Технология World Wide Web, в переводе Всемирная паутина получила столь широкое распространение из-за простоты своих пользовательских интерфейсов. Принцип жми на то, что интересно, лежащий в основе гипертекста, интуитивно понятен. В технологиях WWW все ключевые понятия просматриваемого документа: слова, картинки - имеют возможность раскрыться новым документом, развивающим это понятие. Такой способ представления информации называется гипертекстом, а документы, представленные в таком виде –гипертекстовыми документами. Для описания этих документов используется специальный язык - язык описания гипертекстовых документов или HTML (англ. вариант Hyper Text Markup Language).
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве(Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.
Для разработки данной информационной системы выбраны фирмы специализирующиеся на оказании услуг мобильной связи. Посредством данной системы пользователь может получить информацию о тарифных планах, роуминге, телефонах и аксессуарах к ним, а так же дополнительных услугах предоставляемых данными фирмами.
верстка язык html
Теоретическая часть
Структура HTML-документов Web-страницы описываются на специальном языке, называемом HTML (HyperText Markup Language язык разметки гипертекстовой информации), который позволяет осуществлять простое форматирование текста, вставку графики, а также составление таблиц и цветовое оформление документов. Будучи подмножеством языка SGML, HTML имеет теговую структуру. Это означает, что в тексте встречаются команды, изменяющие интерпретацию информации. Теги записываются в угловых скобках и могут содержать дополнительные параметры. Большинство тегов располагается в виде ``скобок'' вокруг текста (как теги <I> и </I> вокруг слова ``курсивом'' в приведенном выше примере). Благодаря этому свойству, теги можно подразделить на открывающие и закрывающие . Не у всех тегов существуют соответствующие им закрывающие, такие теги иногда называют ``пустыми''(empty). Общую структуру открывающего тега можно записать так: <NNNNN Name="Value" .....> Соответствующий закрывающий тег будет иметь вид </NNNNN> Теги HTML Заглавные теги <HTML> (соответственно, в конец документа, закрывающего тега </HTML>; никогда не забывайте закрывать скобки!). Заголовок HTML-файла находится в обязательной секции <HEAD>, которая должна находиться в самом начале, то есть сразу после тега <HTML>. Оформляется заголовок с помощью тега <TITLE>. BACKGROUND - позволяет задать фоновую картинку для документа. Картинка будет размножена (tiled) и покроет всю видимую площадь области отображения окна программы просмотра. TEXT - задает цвет текста документа. Цвет задается так же как и для параметра BGCOLOR. LINK - задает цвет для текста и рамок изображений в активных зонах документа, содержащих ссылки (anchors). VLINK - (Visited LINKs color) задает цвет для ранее выбранных ссылок. ALINK - (Active LINKs color) задает цвет для ссылок в момент выбора. Форматирующие теги Для того чтобы вставить ``насильный'' перевод строки, необходимо воспользоваться тегом <BR> . Если вам необходимо сделать так, чтобы в определенном месте текст НЕ МОГ быть разорван, напишите в этом месте тег <NOBR> Для разбивки текста на параграфы используется тег <Pпараметры>ТЕКСТ<P> Тег <P> имеет один параметр ALIGN, указывающий на способ выравнивания текста внутри параграфа: текст может быть выровнен по правому (RIGHT), левому (LEFT) краям или отцентрирован (CENTER). Если параметр опущен, текст выравнивается по левому краю. Чтобы отцентрировать параграф можно также пользоваться тегом <CENTER>...</CENTER>Еще одним способом разделения текста на части можно назвать горизонтальную линию . Линия является элементом языка HTML и вставляется в текст посредством тега<HRпараметры>,где параметры могут быть следующими:
WIDTH - задает ширину линии SIZE - задает толщину линии. NOSHADE - если этот параметр задан, линия не будет иметь тени. Комментарии Комментарии заключаются между последовательностями <!-- и -->. Заголовки Для их создания используются теги <h2>...</h2>,...,<H6>...</H6>. Размер 1 соответствует самому крупному шрифту, размер 6 самому мелкому Шрифты Выделение курсивом осуществляется с помощью тега <I> (от слова Italic ), а жирным шрифтом -- с помощью тега <B> (от слова Bold ). В HTML есть также понятие emphasis - обобщенное выделение. Оформляется оно с помощью тега <EM>...</EM>. Такое выделение - средство описания логической структуры документа. Обычно выделенный таким способом текст отображается курсивом. Другим средством логического выделения можно считать тег <STRONG>...</STRONG> Содержимое тега обычно отображается жирным шрифтом. Изменить размеры и цвет шрифтов можно с помощью тега <FONT параметры>...</FONT> Параметры могут быть следующими: SIZE=``value или value '' - задает абсолютный или относительный размер шрифта. Относительный размер задается по отношению к базовому размеру. Диапазон принимаемых значений от одного до семи. COLOR - указывает цвет для текста. FACE - расширение Microsoft Internet Explorer и Netscape Navigator. Позволяет задать гарнитуру (или список гарнитур, из имеющихся в системе шрифтов будет выбран наиболее подходящий) для текста. SIZE - задает размер шрифта. Списки Списки в HTML бывают трех типов: ненумерованные, нумерованные и так называемые списки терминов. Ненумерованный список оформляется с помощью блока <UL> <LI>элемент <LI> элемент </UL> Нумерованный список отличается от ненумерованного тем, что около пунктов вместо жирных точек вставляются порядковые номера пунктов. Оформляется он в виде блока <OL> <LI>элемент <LI>элемент </OL> Третим видом списка является список терминов. Он очень удобен для оформления всевозможных глоссариев. Оформить такой список можно с помощью блока <DL> <DT>Термин1<DD>Описание1 <DT>Термин2<DD>Описание2 </DL> Гипертекстовые ссылки Одной из самых мощных возможностей WWW является возможность организации гипертекстовых связей между документами. Чтобы оформить какой-либо элемент документа в качестве гипертекстовой ссылки, достаточно лишь заключить его внутрь тега <A> (anchor ). Полный синтаксис тега таков: <Aпараметры> </A> где параметры могут быть следующими: HREF - обязательный параметр, определяет или URL или файл, на который мы ссылаемся. Если мы ссылаемся на файл, то поле HREF содержит имя файла в файловой системе Web-сервера. NAME - если этот параметр указан, то ссылка никуда не ссылается. Неочевидно, но в этом случае тег <A> указывает именованную метку в документе, на которую потом можно будет сослаться используя символ # в параметре HREF. target - параметр, указывающий имя окна или рамки в которой будет отображен документ. Если окна или рамки с таким именем не существует, будет открыто новое окно. Верстка таблиц Таблицы являются мощнейшим средством HTML для верстки страниц. До появления в языке HTML средств верстки таблиц, нельзя было создать даже самый простой многоколончатый текст или сводную таблицу, то после появления такой возможности Web-дизайнеры стали использовать ее в полной мере и добиваться сложных эффектов. Создается таблица с помощью конструкции <TABLE параметры > <CAPTION>Заголовок</CAPTION> <TR параметры> <TD параметры> </TD> .... </TR> </TABLE> Тег TABLE начинает описание таблицы и может иметь следующие параметры: BORDER - определяет толщину рамки таблицы. Если указано нулевое значение то рамка не отображается. Если этот параметр не указан, его значение считается нулевым (рамка не отображается). WIDTH, HEIGHT – указывает размеры таблицы, если они должны быть жестко заданы. ALIGN - определяет, как должна быть выровнена таблица: справа (RIGHT), слева (LEFT) или в центре (CENTER) страницы. CELLSPACING - число точек между отдельными ячейками в таблице. CELLPADDING - число точек между рамкой и содержимым ячейки. С помощью тега <TR параметры>...</TR> оформляются строки таблиц. Он может иметь следующие параметры: ALIGN - используется для задания способа горизонтального форматирования данных внутри ячеек: они могут прижиматься к правому (RIGHT), левому (LEFT) краям или центрироваться (CENTER). VALIGN - используется для задания способа вертикального форматирования данных внутри ячеек: они могут прижиматься к верхнему (TOP), нижнему (BOTTOM) краям, центрироваться (MIDDLE) или иметь общую базовую линию (BASELINE). Конкретные ячейки задаются с помощью тега <TD параметры>...</TD>, где параметры могут быть следующими: WIDTH - задает ширину ячейки. COLSPAN - определяет, сколько колонок таблицы ячейка будет перекрывать. ROWSPAN - определяет, сколько строк таблицы ячейка будет перекрывать. NOWRAP - если этот параметр указан, содержимое ячеек не будет переноситься, чтобы влезать в ширину ячейки. BGCOLOR - параметр, поддерживаемый современными браузерами: указывает цвет фона ячейки в виде RGB-триплета или символьного имени. Еще один тег для оформления ячеек таблиц - тег <TH>...</TH> - нужен для задания заголовочных ячеек. Он во всем совпадает с тегом <TD>, но в отличие от него, содержимое выдается жирным шрифтом и центрируется. Если нужно задать заголовок ВСЕЙ таблицы, используйте тег <CAPTION параметры>...</CAPTION>. Он должен быть внутри тега <TABLE>, но вне описания ячеек. Тег имеет один параметр: ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы. Рамки (фреймы) Мощным визуальным средством являются так называемые рамки или фреймы (frames). С помощью рамок область отображения браузера может быть разделена на отдельные части, содержащие различные документы. При этом возможно задание связей между рамками так, что выбор ссылки в одной рамке может приводить к отображению запрошенного документа в другой. Это позволяет создавать очень удобные в использовании документы (при неправильном применении можно также создать и очень неудобные). Рамки на сегодняшний день поддерживаются в последних версиях таких браузеров, как Netscape Navigator (начиная с версии 2.0) и MS Internet Explorer (версии 3.0 и выше), но популярность применения рамок растет, и похоже, что вскоре к этим браузерам добавятся новые. Рамки описываются в специальном HTML-документе, называемом Документом Описания Рамок . Этот документ содержит описание числа, размеров и положения рамок, а также URL-и их содержимого. Нельзя пытаться вписать содержимое рамок в описание, оно должно находиться в отдельных документах. При описании рамок тег <BODY> заменяется на тег <FRAMESETпараметры> описания содержимого рамок </FRAMESET> Тег будет игнорироваться браузером, если перед ним встретятся любые теги, в обычном случае встречающиеся внутри тега <BODY>. Теги <FRAMESET> могут быть вложенными, что позволяет, как Читатель увидит далее, создавать очень сложные конструкции. Параметры тега <FRAMESET> могут быть следующими: ROWS=``x1,x2,... или x1%,x2%,... или x1*,x2*,...'' - этот параметр описывает рамки как строки различной высоты. Высоты рамок задаются списком разделенных запятыми значений. Высоты измеряются в точках, процентном отношении от общей высоты области отображения, либо как относительные величины. Сумма высот всех рамок должна быть равна высоте всей области отображения. Если этого не происходит, браузеры сами корректируют значения. COLS=``x1,x2,... или x1%,x2%,... или *'' - используется для описания рамок как столбцов различной ширины. Используется так же, как параметр ROWS. Примеры: <FRAMESET ROWS="3*,*"> задаст две горизонтальные рамки, причем первая (верхняя) будет в три раза выше второй (нижней). <FRAMESET ROWS="100,*,50"> задаст три горизонтальные рамки, причем первая (верхняя) будет иметь высоту 100 точек, третья (нижняя) будет иметь высоту 50 точек, а вторая (средняя) займет все оставшееся пространство. <FRAMESET COLS="70%,30%"> задаст две вертикальные рамки, причем первая (левая) будет иметь ширину 70% общей ширины области отображения, а вторая (правая) -- 30%. Для задания содержимого рамки используется тег <FRAME параметры>. Параметры могут быть следующими: SRC - указывает URL документа, который должен быть отображен в рамке. Если параметр не указан, рамка останется пустой. NAME - значение этого параметра определяет имя для рамки. Впоследствии по этому имени на рамку можно будет сослаться с помощью параметра TARGET тега <A>. SCROLLING - показывает, можно ли проматывать содержимое документа в рамке. Может принимать следующие значения: YES - содержимое рамки МОЖЕТ проматываться. NO - содержимое рамки НЕ может проматываться. AUTO - браузер решает, отображать линейку прокрутки или нет (исходя из длины документа). Это значение иcпользуется по умолчанию. NORESIZE - если этот параметр указан, пользователь не сможет изменить размеры рамки. По умолчанию пользователь МОЖЕТ изменять размеры отображаемых рамок (например, таская границу рамки указательным устройством). MARGINWIPH - указывает на величину горизонтального отступа внутри рамки. MARGINHEIGHT - указывает на величину вертикального отступа внутри рамки.соответствует примерно следующей раскладке рамок в области отображения: Что же происходит, если браузер не понимает рамок? Пользователь видит абсолютно чистый экран и не может добраться до нужной ему информации. Как сделать так, чтобы такая ситуация не возникала? Разработчики расширений предусмотрели такую ситуацию и придумали тег, содержимое которого никогда не отображается в браузере, понимающем рамки, тогда как ``глупый'' браузер, увидя незнакомый тег, честно отобразит его содержимое без применения каких-либо хитростей. Такой тег называется <NOFRAMES> Внутри него рекомендуется располагать ссылки на документы, не содержащие рамок. Для организации связей между рамками разработчики предусмотрели параметр TARGET для тега <A>. Он также может применяться в тегах <BASE>, <AREA> и <FORM>.Практическая часть
mirznanii.com
Программирование для начинающих html | schel4koff.ru
Программирование для начинающих html. Каждый человек, который задумал создать свой собственный сайт в интернете сталкивается с одним и тем же вопросом — с чего начать? В голове так много идей! Но как попробуешь исполнить, то сталкиваешься с кучей разных непонятных слов — и «ХТМЛ» и «ПХП» и многими другими.
В этой статье мы постараемся рассказать новичкам о том, с чего же, собственно, следует начать создавать свой собственный сайт в интернете.
Первое, что необходимо узнать — HTML, он же — ХТМЛ является той основой, без которой невозможно создание сайтов как таковое. Ведь, что такое наш любимый ХТМЛ? Это — язык гипертекстовой разметки страницы.
Понимаю, что новичкам это ни о чём не говорит. Поэтому, давайте обратимся к аналогии. Представим себе обычный лист А4. Нарисуем на нём дизайн будущего сайта.
Нарисовали? Отлично! Теперь посмотрим на него. Что мы там увидим? Наверняка, у вас имеется шапка, колонка с меню, колонка, в которой будет располагаться основной контент сайта. Возможно, у вас будет что-то ещё. Так вот, ХТМЛ — это ваш карандаш в цифровой эпохе и деле создания сайта. Благодаря этому замечательному языку мы будем осуществлять разметку страницы.
Итак, после того, как мы разобрались в общих чертах с теорией, давайте приступим к практике. Наш учебник HTML для начинающих будет открываться вопросом о том, как же создать основной «каркас» страницы. Для этого нам придётся изучить несколько, так называемых, тегов ХТМЛ.
Тег — это своеобразное указание браузеру, касательно того, что располагается в этом месте вашей будущей страницы. Их существует огромное множество. О многих из них мы поговорим в наших будущих статьях.
Тег <html> указывает браузеру о том, что начался код на языке ХТМЛ. Это означает, что он переходит в режим чтения кода именно на этом языке. Но помимо того, что когда ваш код на языке ХТМЛ начинается, он должен и закончиться, правильно?
Поэтому, помимо открывающего тега, также есть и закрывающий тег. Он пишется точно также, если не считать того, что после первой скобочки пишется символ “/”. Поэтому наш код будет выглядеть следующим образом.
<html></html>
Теперь давайте откроем любую интернет-страницу. Посмотрите на самый верх браузера — там, где вы обнаружите значок «крестик», пр нажатии на который окно вашего браузера закроется. Обратите внимание на то, что вверху браузера написано название документа. Как этого добиться? С помощью очередного тега!
Но прежде опять отвлечёмся на небольшое отступление. Любая страница разделяется на две части — так называемую, «голову» документа и его тело. В голове передаётся вся необходимая для браузера информация, которая помогает правильно отображать «тело» документа — всё, что доступно для посетителя. Обязательно надо разграничить голову и тело документа. Запишем —
<html><head></head><body></body></html>
где <head> указывает на начало головы документа, а <body> на начало тела документа.Теперь изучим тег <title>, внутри которого мы пишем заголовок документа. Запишем «моя первая интернет-страница».Таким образом, получаем
<html><head><title>Моя первая интернет страница</title></head><body></body></html>
Теперь всё, что осталось — сохранить ваше творение в блокноте с расширением ”html”. И открыть полученный файл любым доступным браузером.
Читайте продолжение в статье
Вы можете посмотреть так же записи
schel4koff.ru
Теория недели 09.01 - 15.01.2014: HTML-программирование
Теория недели 09.01 - 15.01.2014: HTML-программирование
HTML-программирование
Hyper Text Markup Language - «HTML» (язык разметки гипертекста) многие уже давно перестали его считать просто языком программирования. Так как само понятие HTML включает в себя различные методы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и много всего другого. Пользователь, освоивший этот язык, приобретает возможность делать серьезные вещи простыми методами и, главное, быстро, что в современном мире считается очень хорошо!На языке HTML можно создавать собственные мультимедийные продукты и распространять их на cd-дисках, и все эти продукты, выполненные в виде наборов HTML-страниц, не требуют разработки специализированных программных средств, так как все необходимое для работы с данными (Web-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров.Для того чтобы вам было легче дальше понимать о чем я с вами говорю давайте рассмотрим основные термины которые употребляются в HTML:
· Элемент (element) - конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.
· Тег (tag) - начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
· Атрибут (attribute) - параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
· Гиперссылка - часть текста, которая является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
· Фрейм (frame) — этот термин имеет два значения. Первое — область документа со своими полосами прокрутки. Второе значение — одно изображение в сложном (анимационном) графическом файле (похожее на кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка».
· HTML-файл или HTML-страница - документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html.
· Апплет (applet) — программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
· Скрипт или сценарий (script) - программа, включенная в состав Web-страницы для расширения ее возможностей.
· Расширение (extension) - элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.
· CGI (Common Gateway Interface) - общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.
· Код HTML — гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.
· Web-страница - документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.
· Сайт (site) — набор Web-страниц, расположенных в одном месте и связанных между собой.
· Браузер (browser) - программа для просмотра Web-страниц.
· Загрузка (downloading) - копирование файлов с сервера на компьютер-клиент.
· URL (Uniform Resource Locator) или универсальный указатель ресурса -
адрес некоторого объекта в Интернете. Типичный URL для WWW имеет вид:http://www.название.домен/имя файла
Все элементы языка можно условно разделить на три группы. К первой относятся элементы, которые создают структуру гипертекстового документа. Использование таких элементов - необходимая формальность, которой нельзя пренебрегать. Ко второй группе можно отнести элементы, создающие эффекты форматирования. Их использование диктуется конкретными требованиями к документу, фантазией и компетенцией разработчика, К третьей группе относятся элементы, которые позволяют управлять программными средствами, установленными и работающими на компьютере-клиенте. Часто такие элементы создаются автоматически, когда разработчик использует для вставки некоторого объекта в документ гипертекстовый редактор или подобную программу.Несмотря на то, что спецификация HTML является стандартом, этот язык дополняется новыми элементами (расширениями). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров. Расширения создаются только известными фирмами, которые разрабатывают программное обеспечение для WWW, а рядовые пользователи могут совершенствовать свои Web-страницы при помощи программирования. Аплеты позволяют снять ограничения HTML и дают простор фантазии разработчика.
Версии HTMLПервая версия языка HTML была разработана в начале 90-х годов Тимом БенерсЛи для одного из распространенных в прошлом браузера Mosaic. Но тогда ни для браузера, ни для самого HTML еще не нашлось хорошего применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Но распространение язык HTML получил благодаря версии 2.0, которая появилась в июне 1994 года. И с того момента происходят возрастание популярности WWW по всему миру. Стандарты, включенные в версию 2, настолько прижились что используются и по сей день.HTML версия 3.0, которая появилась примерно год спустя, в ней была реализована возможность прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т. д.) при помощи элементов языка. Но развитие этого проекта затормозилось и не получило дальнейшего распространения.В 1996 году появился HTML версии 3.2. Это было блестящие решение, достаточно упомянуть, что в спецификацию языка были введены фреймы, которые стали теперь весьма популярными у разработчиков сайтов. И по сей день все браузеры поддерживают эту версию HTML.Официальная спецификация HTML 4 (Dynamic HTML) разрабатывалась в 1997 год. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет web-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы.
Структура Web-страницыНиже представлен код Web-страницы который выполнен на языке HTML и на этом например мы разберем его структуру, но для начала скопируйте весь код в обычный текстовый блокнот и нажмите «сохранить как» и сохраняйте уже файл с расширением html т.е. после названия напишите .html<! DOCTYPE HTML "-//W3C//DTD HTML4.01 Transitional//en"><htмl><head><titlе>Структура web документа</title><meta html-equiv="Content-Type"Content="text/html;charset=windows-1251"><meta name="Keywords" content="softvt"><meta name="discription" content="softvt"></head><body bgcolor = #FFFFFF><a name ="list"></a>Переход в <a href="#list1">Конец документа</a> <p>Переход к <a href="#list2"><b>первая ссылка <b></a></p>
<НR><Н1>Заголовок 1</h2><Н2>Заголовок 2</h3><НЗ>Заголовок 3</h4><Н4>Заголовок 4</h5><Н5>Заголовок 5</h5><Н6>Заголовок 6</h6><НR>Здесь расположена <b>первая ссылка </b><а name =" list2"></a><НR><р>Здесь должен располагаться<br> основной текст web страницы. <br>А я например вставлю сюда <br>несколько переносов<br>для того чтобы вы могли<br> наглядно наблюдать<br>как у вас работает <br>ссылки внутри документа<br>а то если у вас будет большое разрешение<br>вы просто не заметите переход по ссылкам<br>
<НR><а name="list1"</a><p>Переход в <а href ="#list">Начало документа</a></body></html>Для того чтобы понять структуру Web-страницы, необходимо рассмотреть все ее элементы, которые входят в приведенный выше код.
<HTМL> </html>Обозначение документа на языке HTML. Одно из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегам должна находиться вся Web-страница. По идеи, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY FRAMESET и других, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html> заканчиваются все подобные документы.
<HEАD> </head>Область заголовка Web-страницы. Другими словами, ее первая часть. Так же, как и предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir.
<TITLЕ> </title>Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Данный элемент очень сильно влияет на продвижение в поисковой системе т.к. поисковые системы уделяют особое внимание на тег TITLE. Мой совет: никогда не делаете очень длинный текст в этом теге (65 символов достаточно)
<МЕТА>Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй — содержание.
<BОDY><body>Этот элемент объединяет в себе гипертекст, который определяет собственно Web-страницу. Это та видимая часть документа, которую разрабатывает авто страницы и которая отображается браузером. Соответственно, конечный тег этого элемента надо искать в конце Web-страницы. Внутри элемента BODY можно ипользовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить много атрибутов, которые служат для установки всей страницы целиком. Рассмотрим их по порядку.Один из самых полезных атрибутов данного тега, который оказывает свое влияние на дизайн страницы это:background="путь к файлу фона"Более простое оформление фона сводится к заданию его цвета:bgcolor="#FFFFFF"Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов (rbg). Так как можно изменить фон страницы можно и изменить цвет текста. Для этого имеется следующий атрибутtext=" #RRGGBB"Для задания цвета текста гиперссылок используется следующий атрибут:link="#RRGGBB"Можно также указать изменение цвета для последней выбранной пользователем гиперссылки:Tiling "#RRGGBB"
Далее рассмотрим вот это:<Н1></h2>Элемент заголовка. Различают шесть уровней заголовков, которые обозначаются следующим образом.<Н1>Заголовок</h2><Н2>Заголовок</h3><Н3>Заголовок</h4><Н4>Заголовок</h5><Н5>Заголовок</H5><Н6>Заголовок</H6>Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:align="left" align="center" align="right"Для создания нового абзаца используется тэг <P>, а для перехода на новую строчку без создания абзаца - тэг <BR> т.е происходит перенос. Эти тэги закрывать не обязательно. Конечно, если Вы не используете в тэге <P> элемент ALIGN, которым может задаваться выравнивание абзаца: <Р ALIGN=LEFT>По левому краю</P><Р ALIGN=CENTER>По центру</P><Р ALIGN=RIGHT>По правому краю</P><Р ALIGN=JUSTIFY>Текст, находящийся между этими элементами выравнивается по ширине</P>
<НR>Горизонтальная линия (horizontal rule) - очень распространенный элемент. Во-первых, потому что с его помощью очень легко и удобно делить страницу на части. Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Элемент не имеет конечного тега, но имеет ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:align="left" align="center" align="right" align="justify"
<А> </а>HTML-документ может быть очень громоздким, и не очень удобный пользователю у которого возникает необходимость быстрого перемещения к нужному разделу документа. Для этого можно использовать механизм гиперссылок. Для этого в нужных местах текста расставить соответствующие метки.<а name="метка">Произвольный текст</a>В этом случае данной строке документа присваивается имя, и, следовательно, другой части документа или даже на другом документе может быть создана гиперссылка, приводящая к этой метки.
Для вставки изображений (картинки) в HTML документ используется следующий тег (представлено полное описание атрибутов данного тега): <IМG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">
Списки. (list) были разработаны в HTML, несомненно, под влиянием успеха текстовых редакторов. От обычного текста список отличается, прежде всего, тем, что пользователю не нужно думать о нумерации его пунктов: эту задачу HTML берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация продолжается автоматически. В случае ненумерованных списков HTML ставит перед каждым пунктом отметки: кружки, прямоугольники, ромбы и другие изображения. В конечном итоге список принимает приличный, вид. Существует две группы таких тегов: одни определяют общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько видов списков.<UL> <LI> </uI>Самым распространенным является ненумерованный список (unordered list). Он представлен ниже:<UI><Ll> Пункт 1 списка<Ll> Пункт 2 списка<Ll> Пункт 3 списка</uI>Элемент UL является своеобразным выделением списка. Он позволяет разделять один список от другого. Элемент LI обозначает каждый из пунктов.
Таблицы являются одним из самых необходимых средством форматирования данных на Web-странице. Основное удобство заключается в том, что браузер прорисовку всей таблицы берет на себя. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. По мимо всего прочего, таблицы позволяют решать многие дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и так далее. При создании таблиц применяется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов располагаются элементы для описания каждой ячейки в строке (ТD,ТН).Для того чтобы разобраться в структуре существующей таблицы или разработать новую таблицу, существует одно правило, что последовательность элементов описывает таблицу сверху вниз и справа налево. Например, если после элемента TABLE указан элемент TR, это указывает на то, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек), другая таблица и так далее. После того как появится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега </table>).Таблицу можно выровнять по горизонтали при помощи атрибута align:• align="left" — влево;• align="center" - по центру;• align=" right" — вправо.Ширину таблицы можно задать точно в пикселях или в процентном отношении к ширине страницы в окне браузера. Например:width=400width=50%Для управления видом рамки используются два атрибута. Дело в том, что браузер создает изображение рамки, имитируя ее трехмерность (выпуклость) при помощи различия в освещенности граней
Домашнее задание:
Заполнить в тетради таблицу
|
Тег/теги |
Действие |
|
<head> </head> |
|
|
<title></title> |
|
|
<body></body> |
|
|
<br></br> |
|
|
<font color="#CC0000"></font> |
|
|
<body text="#336699"> |
|
|
<i> </i> |
|
|
<b> </b> |
|
|
<u> </u> |
- < Назад
- Вперёд >
kravchenko.gmg.kz
Программирование с нуля за 5 минут
Программирование с нуля параметров анимации
Часто приходится слышать мнение, что программирование с нуля анимации - это сложно. Долгое время это действительно было так. Анимация требовала кропотливой работы программиста. К счастью нам на помощь приходят современные технологии. В современных браузерах "оживить" картинку можно всего двумя строками кода. Думаю Вы согласитесь со мной, что это недолго. Чаще все это займет не больше 5 минут.Совет: Если Вас заинтересовали современные средства разработки интерактивных сайтов, запишитесь на наш курс HTML5.
Идея анимации изображения очень проста. Как известно, мультипликация - это демонстрация быстро меняющихся изображения, которые "чуть - чуть" изменены.
При движении изменение картинки заключается в ее перемещении относительно левого края.
Раньше Вам пришлось бы отрисовывать каждое микроизменение положения, и показывать на экране 24 раза в секунду. Сейчас за Вас эту работу сделает браузер. Достаточно указать, что свойство изображения "отступ картинки от левого края страницы" будет меняться при помощи специальных правил.
Программирование с нуля правил очень простое занятие. Давайте запишем между элементами
<head> ... </head> следующий код:
<style> .walking-king { margin-left: 0; -webkit-transition: margin-left 3s ease-in-out; -moz-transition: margin-left 3s ease-in-out; -o-transition: margin-left 3s ease-in-out; -ms-transition: margin-left 3s ease-in-out; } </style> Думаю, Вы уже догадались, что блок кода задает "стиль" отрисовки анимации, поэтому он расположен между элементами <style> ... </style>.Теперь объявим набор свойств изображения, включая анимацию его перемещения. Набор свойтв в терминологии программирования HTML страниц называется классом.
Открываем блокнот и начинаем программирование с нуля класса .walking-king { }
Первое свойство, которое следует задать, это первоначальное расположение короля на "сцене. Король со свитой начинает двишаться от левого края экрана - его местоположение программируется нулем.
margin-left: 0;
Теперь - самое важное. Нужно объяснить браузеру, каким образом следует "нарисовать" движение. К счастью анимация уже встроена в современные браузеры. Для программирования анимации с нуля и без знаний в программировании нужно добавить свойство transition. Оно говорит браузеру, что положение картинки надо изменить не моментально, а постепенно.
Программирование с нуля характеристик движения короля делается так:
-transition: margin-left 3s linear;
- margin-left - анимироваться будет изменение положения картинки по горизонтали. Далее, при изменении этого свойства, браузер сам обработает анимацию.
- 3s - время, которое будет длиться движение короля "из пункта А в пункт В"
- linear - характер движения. Король у нас "гуляет", поэтому движение без ускорения. Равномерное движение задается параметром linear.
Именно поэтому для каждого типа браузеров приходится вставлять свое описание характеристик анимации. Чтобы у Вас не возникло проблем при работе "мультипликации"
-webkit-transition: margin-left 3s linear;-moz-transition: margin-left 3s linear;-o-transition: margin-left 3s linear;-ms-transition: margin-left 3s linear;
Остался последний штрих - нужно "сказать" браузеру использовать описание анимации для изображения короля.
<img src="/king.png">
progstudy.ru
