Синтаксис
HTML |
<head> <link атрибуты> </head> |
XHTML |
<head> <link атрибуты /> </head> |
Атрибуты
Charset Кодировка свзязываемого документа.
Href Путь к связываемому файлу.
Media Определяет устройство, для которого следует применять стилевое оформление.
Rel Определяет отношения между текущим документом и файлом, на который делается ссылка.
Sizes Указывает размер иконок для визуального отображения.
Type MIME-тип данных подключаемого файла.
Также для этого тега доступны универсальные атрибуты.
Закрывающий тег
Не требуется.
Тег <script> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
<script> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
Синтаксис
<script type="тип">
...
</script>
<script type="тип" src="URL"></script>
Атрибуты
Async Загружает скрипт асинхронно.
Defer Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью.
Language Устанавливает язык программирования, на котором написан скрипт.
Src Адрес скрипта из внешнего файла для импорта в текущий документ.
Type Определяет тип содержимого тега <script>.
Закрывающий тег
Обязателен.
Тег <style> применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.
Синтаксис
<head>
<style type="text/css">
...
</style>
</head>
Атрибуты
Media Определяет устройство вывода, для работы с которым предназначена таблица стилей.
Type Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.
Закрывающий тег
Обязателен.
26.09.2013
Работа с формами.
Форма предназначена для обмена данными между пользователем и сервером доступ к элементам формы можно получить с помощью скриптов. Html документ может содержать любое кол-во форм, но одновременно на сервер может быть отправлена информация только из одной формы, поэтому данные формы должны быть независимы друг от друга устанавливает форму в документ ТЭГ OPEN -> <form> CLOSE -> </form>
Атрибуты: Accept – charset устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
Action – Адрес программы или документа (обработчик), который обрабатывает данные формы. В качестве обработчика может выступать CGI - программа или html документ, который включает в себя серверные сценарии, после выполнения обработчиком действий по работе с данными формы он возвращает новый html документ, если атрибут action отсутствует текущая страница перезагружается возвращая все элементы формы к исходному состоянию в качестве значения применяется полный или относительный путь к серверному файлу.
#21
<form action=”handler.php”>
<p>…</p>
</form>
В качестве обработчика можно указать адрес электронной почты начиная его с ключевого слова mailto: при отправке формы будет запущена почтовая программа установленная по умолчанию в целях безопасности в браузере невозможно отправить незаметно информацию из формы.
“on”
Autocomplite:
“off”
Включает автозаполнение полей формы, автозаполнение производит браузер, который запоминает написанный при первом вводе значения, а затем подставляет их при повторном наборе в полях формы. Автозаполнение может быть отключено в настройках браузера и изменить при помощи атрибута autocomplite нельзя.
Inctype – способ кодирования данных формы
Get - является самым распространенным и предназначен для получения требуемой инфы и передачи данных в адресной строке. В основном используется для передачи коротких сообщений (ФИО, Адрес и т.п.)
Method:
Post – посылает на сервер данные (запросы браузера) метод позволяет отправлять больший объем данных нежели get (поскольку у него установлено ограничение в 4кб). Большие объемы данных используются формах почтовых службах при пересылке файлов и т.д.
Метод протокола http, различают два значения (Удобство использования метода заключается в том что адрес со всем параметрами можно использовать не однократно сохранив его например в закладках браузера, а так же менять значения параметров непосредственно в адресной строке.
#24
<form action=”handler.php” method=”post”>
Name – это уникальное имя формы, которое чаще всего используется для обращения к форме из скриптов. Допускается внутрь контейнера форм помещается в другие тэги при этом сама форма никак не отображается на веб-странице видны только ее элементы и результаты работы вложенных тегов.
Д/з Style, form
27.09.2013
На форме могут быть определены следующие элементы. Строка текста позволяет вводить короткие фрагменты текста имена, адреса и т.п. при его создании используется name для указания имени, которое поможет различить его в наборе данных на сервере, имя поле может состоять из букв и цифр, и нижнего подчеркивания
Size – ширина строки текста.
Maxlength- ограничивает емкость строки текста
Value – начальный текст отображаемый полем
Type = «Password” – строка текста для хранения конфиденциальной информации.
Многострочный текст text Area создает область ввода многострочного текста
Name – имя области
Rows – высота
Cols – ширина
Wrap правило переноса целых слов: 1) soft – включает функцию переноса, но не воздействует на внешний вид данных передаваемых на сервер.
2)hard – форматирование данных как на экране так и во внутреннем буфере браузера.
Name имя группы элементов флажков.
Value – имя каждого флажка в группе, оно будет включено в итоговый набор формы, если пользователь выберет соответствующий флажок.
Cheked – позволяет установить флажок предварительно, чтобы при воспроизведении страницы опция выбиралась автоматически.
Переключатель используется при выборе только одной опции. Создание аналогично флажку type=radio/
Меню – name & value.
Size – число элементов отображаемых единовременно по умолчанию 1 элемент.
Option – определяет отдельный элемент.
Selected автоматический выбор опции.
#25
<br> Ключевые слова: <input type=”text” name=”key” size=”30” axlength-“25”>
#26
<textarea name=”unit” rows=”5” cols=”45” wrap=”hard”>
</textarea>
#27
<br> Установите атрибуты файла
<br><input type=”checkbox” name=”flag” value=”sys” checked>
Системный
<br><input type=”checkbox” name=”flag” value=”archive”> архивный
<br><input type=”checkbox” name=”flag” value=”read”> только чтение
<br><input type=”checkbox” name=”flag” value=”read” checked>
#28
<br> Какой цвет вам нравится?
<br><select name=”color” size=”3”>
<option value=”blue”>
<option value=”red” selected>
<option value =”yellow”>
</select>
<br><br><br><input type=”submit” value=”отправить”>
<input type =”reset” value=” очистить “>
#29
<botton style=”font-family:Arial; font-size:16pt; color:navy”> добавьте информацию <span style=”Font-style:italic; color:green> Пожалуйста!
</span>
</botton
4.10.2013
Стили представляют собой наборы правил или параметров управляющих видом и положением элементов на веб-странице.
Версии CSS- 1.0
2.0
2.1
В разработке: 3.0
4.0
Преимущества CSS разграничение кода и оформления (желательно, чтобы веб-страница содержала только теги логического форматирования, а через стили желательно задавать вид и размещение элементов, при таком подходе верстка сайта и его дизайн могут вестись параллельно).
Разное оформление для разных устройств (Одна и та же веб-страница может иметь разное представление на мониторе/принтере/ смартфоне/ кпк и т.д.).
По сравнению с HTML более расширенные способы оформления элементов.
Ускорение загрузки сайта (при хранении стилей в отдельном файле он кэшируется и при повторном обращении к нему извлекается из кэша браузера (Кэшем-называется место на локальном компьютере куда браузер сохраняет при первом обращении к сайту)).
Единое стилевое оформление множества документов (применение одинакового оформления заголовков основного текста и других элементов обеспечивает преемственность между страницами и облегчает пользователю работу с сайтом).
Централизованное хранение (стили как правило хранятся в одном или нескольких специальных файлах ссылки на которые указываются во всех документах сайта, поэтому применив стили или исправив в одном месте он автоматически применяется ко всем элементам, которые связаны с данным стилевым файлом).
#30
<style type=”text/css”>
#import url (“url-адрес файла с правилами css”);
</style>
#31
<h1 style=”color:red; font-size:36pt»>< Большой красный заголовок
</h>
#32
Список_селекторов {имя_параметра: значение;
Имя_параметра: значение; …}
#33
*{font-size:20pt};
Данное правило предписывает отображать шрифт всех элементов документа размером 20pt.
#34
H1, h2 {font-family: Arial; font-size:14pt}
#35
<style type=”text/css”>
#mytext {color:red}
</style>
<p id=”mytext”. Совершенно секретно</p>
#36
<style type=”text/css”>
.italic {font-style:italic}
.underline {text-decoration:underline}
</style>
<h1> Совершенно секретно </h1>
<h1 class=”italic”</h1>
<h1 class=”underline”</h1>
#37
H2 {font-size:24pt !important; color:red}
Способы присоединения таблиц стилей к html документу.
Запись правил непосредственно в html документе тегом STYLE, таблица стилей будет действовать только на тот документ в котором находится. Style можно применять не только внутри head
Связывание (внешний css) – запись правил в отдельном текстовом файле (Обычно с расширением css) и размещения в html документе с ссылкой на него это можно сделать с помощью тега link или с помощью директивы import в теге style.
07.10.2013
Встраивание - Указание стиля непосредственно в теге с помощью атрибута style, позволяет назначить индивидуальные стилевые параметры, для некоторых элементов. Только в одном документе не корректируя основную таблицу стилей или внешних файлов. К одному и тому же документу можно применить несколько таблиц стилей причем различными способами.
Правила форматирования
Таблица стилей содержит одно или несколько правил форматирования в каждой из которых записывается в соответствии с синтаксисом.
Список селекторов – 1 или несколько идентификаторов разделенных запятыми, селекторы предназначены для указания элементов документа в котором данное правило применяется.
Селекторы (Элементарные) –
* - Параметры с данным селектором применяется ко всем элементам. #33
Имя html тега без угловых скобок параметры применяются ко всем элементам, заданным тегом. #34
# Идентификатор произвольное слово подобно имени переменной, для применение параметров с данным селектором, Он должен иметь атрибут id=”идентификатор” т.к. значение атрибута id должно быть уникальным то стилевые параметры применяются к единственному элементу #35
Произвольное слово подобное имени переменной для применения параметров css? Они должны иметь атрибут class = “Класс” #36
Приоритеты определения параметров стилей
Возможна ситуация, когда в таблице стилей для одного элемента может оказаться несколько различных определений, одного и того же параметра тогда учитывается приоритеты стилей.
Стили автора, приоритетом правил можно управлять #37, эта директива записывается после стилевого параметра.
JavaScript #38
Шаблон для <div>
<head>
<style type=”text/css”>
div.name { Свойство:значение; …}
</style>
</head>
<body>
<div id=”name”>
<h1> Заголовок </h1>
<p> Первый абзац </p>
<p> Второй абзац </p>
</div>
</body>
#39
Примеры <div>
<div id=”11”
Style=”position:absolute; left=300; top=150; width=120; visibility:visible”>
<img src=”put.bmp” width=100>
</div>
Здесь определяется слой “11», содержащий изображение, смещенный относительно левого верхнего угла окна браузера на 300 пикселей по горизонтали и на 150 пикселей по вертикали, ширина слоя – 120 пикселей.
#40
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8”>
<title> ТЕГ DIV</title>
<style type=”text/css”>
.block1 {
Width:200px;
Background:#css;
Padding:5px;
Padding-right:20px;
Border:solid 1px black;
Float:left;
}
.block2 {
Width:200px;
Background: #fco;
Padding:5px;
Border:solid 1px black;
Float:left;
Position:relative;
Top:40px;
Left:-70px;
}
</style>
</head>
<body>
<div class=”block1”> Один из способов представления информации на Web-странице – представление с помощью слоев. </div>
<div class=”block2”> Слои являются элементами окна, они могут перекрываться.
</div>
</body>
</html>
Слои в html.
Слой является одним из способов компоновки представления элементов на веб-странице.
Слои можно перемещать, скрывать или отображать, слои могут перекрываться (JavaScript)
Один из способов определения слоя, использование тега <div>.
Особенностью этого тега является то что он предназначен для задания контейнеров для элементов т.ею стилевое оформление div будут влиять на стиль элементов находящихся внутри
В html 4 и Xhtml слой — это элемент web- страницы созданный с помощью div к которому применяется стилевое оформление при этом придерживаются следующих принципов.
Разделение содержимого и оформления.
Активное применение тега div
Фактически это основа, на которую “навешиваются» стили, рисунки и т.д. при этом код получается компактным, наглядным а поисковые системы лучше его индексируют.
Таблицы применяются только для представления табличных данных
#38
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.