Файл: Основы программирования на языке HTML. ТЕХНОЛОГИИ ПРОГРАММИРОВАНИЯ.pdf
Добавлен: 14.03.2024
Просмотров: 37
Скачиваний: 0
name — Имя метаэлемента, также косвенно устанавливает его предназначение.
<script> — Элемент script предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих web-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
script может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
Синтаксисс
<script>…ваш код…</script>
<script src="URL"></script>
Аттрибуты
async — загружает и исполняет скрипт асинхронно. Будьте осторожнее с этим аттрибутом. Его устаналивают только на независимые скрипты и библиотеки, выполнение которых не должно влияет н а работу всей страницы. В умелых руках можнт ускорять работу страницы в разы.
defer — Отложенное выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Так же выстовляет низкий приоритет загрузки.
language — Устанавливает язык программирования на котором написан скрипт.
src — URI скрипта, который будет подгружен в страницу.
type — Определяет тип содержимого элемента script.
<noscript> — Контеийнер noscript показывает свое содержимое, если web-browser не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях web-browser игнорирует этот элемент и все, что располагается внутри него.
Синтаксисс
<noscript>Ваш браузер не поддерживает JavaScript</noscript>
<style> — элемент style применяется для определения стилей элементов web-страницы. Элемент style необходимо использовать внутри контеийнера head. Можно задавать более чем один элемент style.
Синтаксисс
<style type="text/css">
Ваши стили
</style>
Аттрибуты
media — Определяет устройство вывода, для работы с которым предназначена таблица стилей.
type — Сообщает web-browserу, какой синтаксисс использовать для того, чтобы правильно интерпретировать стили.
<div> — это основный элемент для стилизации страницы. С ним вы будете иметь дело чаще всего. Элемент div является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри элемента, можно выделить стиль во внешнюю таблицу стилей, а для элемента добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое элемента div всегда начинается с новой строки. После него также добавляется перенос строки.
Аттрибуты
align — просто определяет как будет выровнен текст.
title — краткое описание объекта, которое будет видно только на десктопах и при наведении на элемент и задержании курсора на пару секунд. Почти не нужно, так как 90% офисного планктона не знают, что такие подсказочки вообще могут появляться в принципе.
У этого элемента ещё имеются универсальные аттрибуты и события.
<span> — другой важный тег после div – это наш span. Он важен тем, что может задавать стили инлайново для текста и встраиваться в текст без проблем (при этом будет игнорировать краулерами). К примеру можно сделать хайлайт текста или выделить первую букву абзаца. Ко всему прочему в рамках JS можно на его основе сделать конструкции подстановки анлайновых элементов зависимых от конекткста страницы (например изменения валюты при смене страны).
Для этого элемента доступны универсалные аттрибуты и события.
<a> — этот элемент является чуть ли не самым важным элементом веб-страниц, так как с помощью него вы можете указать ссылку на другу страницу и по нажатию на эту ссылку соответсвенно перейти на на эту страницу. Ко всему проему тег а может служить переходом к якорям на странице, тем самым облегчив навигацию. На сегодяншний день редко используется, так как большиснтво разработчиков ратуют за плавный скролинг, который сами же и программируют, чего нативными средствами браузера сделать нельзя.
Для создания ссылки нужно указать в атрибуте href абсолютный или относительный путь (URI). Абсолютный путь будет работать из любого места и частенько более предпочителный, в то время как относительный путь будет отталкиваться от текущего местоположения (по какому адресу открыта страница).
“Uniform Resource Identifier — унифицированный (единообразный) идентификатор ресурса. По-русски иногда говорят [у́ри]. URI — последовательность символов, идентифицирующая абстрактный или физический ресурс. Ранее назывался Universal Resource Identifier — универсальный идентификатор ресурса.”
Синтаксисс
<a href="URL">…произвольное название…</a>
<a name="идентификатор">…якорь на странице..</a>
Аттрибуты
accesskey — с помощью заданной клавиши в этом атрибуте позволяет получить доступ к элементу при помощи нажатия указанной клавиши и специальной клавиши, которая у каждого браузера своя.
coords — Устанавливает координаты активной области.
download — Предлагает скачать указанный по ссылке файл.
href — Задает адрес документа, на который следует перейти.
hreflang — Идентифицирует язык текста по ссылке.
name — Устанавливает имя якоря внутри документа.
rel — Отношения между ссылаемым и текущим документами.
rev — Отношения между текущим и ссылаемым документами.
shape — Задает форму активной области ссылки для изображений.
tabindex — этот атрибут получет порядковый номер, под которым до него можно будет добраться с помощью tab. Если потавить -1, то элемент будет не tabабельным
target — Имя окна или фрейма, куда web-browser будет загружать документ.
title — краткое описание объекта, которое будет видно только на десктопах и при наведении на элемент и задержании курсора на пару секунд. Почти не нужно, так как 90% офисного планктона не знают, что такие подсказочки вообще могут появляться в принципе.
type — Указывает MIME-тип документа, на который ведёт ссылка.
У этого элемента ещё имеются универсальные аттрибуты и события.
<img> — простейший элемент, который отобразит на экране пользователя картинку, ссылку на которую вы можете указать в специальном атрибуте. Может быть вложен во множество других тегов, например так как a или button, что может добавить интерактивности. Так же даёт доступ пользователю сохранять картинку через контекстное меню. Чтобы этого избежать картинку лучше задавать через CSS стили любым другим тегам.
Синтаксисс
<img src="URL" alt="описание изображения" />
Аттрибуты
align — Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
alt — текст для изображения, который обязателен в угоду доступности восприятия. Слабовидящие люди с помощью спец программ читают сайты и для них картинки ничего не значат, поэтому надо грамотно их описывать.
border — указывает толщину рамки изображения в пикселях. Не используйте этот атрибут. Есть CSS для этого.
height — указывает высоту изображения в пикселях. Не используйте этот атрибут. Есть CSS для этого.
hspace — указывает горизонтальный отступ изображения от окружения в пикселях. Не используйте этот атрибут. Есть CSS для этого.
ismap — Говорит web-browserу, что картинка является серверной картой-изображением.
longdesc — Указывает адрес документа, где содержится аннотация к картинке.
lowsrc — здесь можно указать ссылку на низкое разрешение картинки. Вы сэкономите уйму трафика, если будете грамотно пользоваться этим атрибутом и генерировать картинки с низким разрешением наравне с нормальным.
src — URI основного изображения.
vspace — указывает вертикальный отступ изображения от окружения в пикселях. Не используйте этот атрибут. Есть CSS для этого.
width — указывает ширину изображения в пикселях. Не используйте этот атрибут. Есть CSS для этого.
usemap — Ссылка на элемент map, содержащий координаты для клиентской карты-изображения.
У этого элемента ещё имеются универсальные аттрибуты и события.
<ul> — это элемент маркированный список, который по сути своей является универсальным списком. Каждым элементом списка является другой тег li, который наследует определенные стили от ul.
Синтаксисс
<ul>
<li>элемент маркированного списка</li>
</ul>
Аттрибуты
type — Устанавливает вид маркера списка.
У этого элемента ещё имеются универсальные аттрибуты и события.
<li> — это универсальный тег элемента списка. Не может сущестсовать вне тегов ul или ol, которые определяет как будет отображаться элемент li – в виде нумерованного или маркированного списка.
Синтаксисс
<ul>
<li>элемент маркированного списка</li>
</ul>
<ol>
<li>элемент нумерованного списка</li>
</ol>
Аттрибуты
type — Устанавливает вид маркера нумерованного или маркированного списка.
Value — Число, с которого будет начинаться нумерованный список.
У этого элемента ещё имеются универсальные аттрибуты и события.
<table> — Элемент table является контеийнером для элементов определяющих таблицы. Каждая таблица состоит из столбцов и строк, которые образуют ячейки. Соответсвенно в table строками является тег td, а ячейками td. Внутри table допустимо использовать следующие элементы:, col, caption, colgroup, tbody, td, tfoot, th, thead и tr.
Ранее с помощью таблиц верстались большая часть сайтов. Таблицы разбивали картинку на графические группы, которые реализовывлись внутри ячеек. На сегодняшний день это устарвшая методолгия, за которую вас уволят, поэтому учитесь верстать на div’ах послойно.
Синтаксисс
<table>
<tr>
<td>...</td>
</tr>
</table>
Аттрибуты
align — даёт понять каким будет выравнивание содержимого ячеек по горизонтали.
background — сюда можно написать ссылку на картинку и она будет фоном таблицы. Не используйте этот атрибут. Есть CSS для этого.
bgcolor — здесь можно написать цвет фона таблицы. Не используйте этот атрибут. Есть CSS для этого.
border — здесь можно указать какой будет толщины рамка таблицы в пикселах. Не используйте этот атрибут. Есть CSS для этого.
bordercolor — Здесь можно задать цвет рамки таблицы. Не используйте этот атрибут. Есть CSS для этого.
cellpadding — здесь можно указать внутренние отступы для ячеек в пикселях. Это можно всё еще делать в таблицы, но так же можно указать и в CSS, что предпочтительнее.
cellspacing — здесь можно указать отступы между ячеек в пикселях. Это можно всё еще делать в таблицы, но так же можно указать и в CSS, что предпочтительнее.
cols — здесь можно указать число колонок в таблице.
frame — Сообщает web-browserу, как отображать границы вокруг таблицы.
height — здесь можно указать высоту таблицы. Не используйте этот атрибут. Есть CSS для этого.
rules — Сообщает web-browserу, где отображать границы между ячейками.
summary — Краткое описание таблицы.
width — здесь можно указать ширину таблицы. Не используйте этот атрибут. Есть CSS для этого.
У этого элемента ещё имеются универсальные аттрибуты и события.
<tr> — расшифровывается как table row, является непосредственно строкой таблицы. Может содержать только th или td. Обязательно расположение внутри конейтера thead, tbody, tfoot, а те в свою очередь обязательно распологаться в table. Если не указать thead/tbody/tfoot, то бразуер сам автоматически пометсит все tr в tbody.
Синтаксисс
<table>
<tr>
<td>...</td>
</tr>
</table>
Аттрибуты
align — даёт понять каким будет выравнивание содержимого ячеек по горизонтали.
bgcolor — здесь можно написать цвет фона ячейки. Не используйте этот атрибут. Есть CSS для этого.
bordercolor — Здесь можно задать цвет рамки ячейки. Не используйте этот атрибут. Есть CSS для этого.
char — указывает по каком символу будет происходить выравнивание в столбце.
charoff — указывает относительно какого символа будет происходить смещение ячейки.
valign — даёт понять каким будет выравнивание содержимого ячейки по вертикали.
У этого элемента ещё имеются универсальные аттрибуты и события.
<td> — расшифровывается как table data, является непосредственно ячейкой таблицы. Обязательно расположение внутри конейтера tr, который в свою очередь обязательно должен распологаться в thead, tbody, tfoot, а те в свою очередь обязательно распологаться в table. Если не указать thead/tbody/tfoot, то бразуер сам автоматически пометсит все tr в tbody.
Синтаксисс
<table>
<tr>
<td>...</td>
</tr>
</table>
Аттрибуты
abbr — аббревиатура ячейки (читать как краткое описание)
align — даёт понять каким будет выравнивание содержимого ячейки по горизонтали.
axis — группирует ячейки связанные одной информацией.
