Полезные понятия, советы
<head>; <title> - Заголовок </title>; </head>; <body>; <h1>- мой первый заголовок </h1>; <p> - мой первый абзац </p>; </body>; </html>; Результат: МОЙ ПЕРВЫЙ ЗАГОЛОВОК, мой первый абзац.
Html-это язык для описания web-страница абивриатура Html расшифровывается как язык размера гипер текста. Он не является языком программирования. Html использует теги разметки. Html теги - это ключевые слова или символы заключённые в угловые скобки. Теги бывают 2х видов: парные и одиночные. парные (<body></body>) одиночные(<br>) С помощью тегов браузер распознает структуру и значение вашего текста. Без использования тегов браузер выведет просто сплошной поток текста, без отступов, заголовков, абзацев. 2. <html>; <head>; <title>Летнее меню </title>; </head>; <body>; <h1>напитки в нашем кофе</h1>; <h3>мультифрукт-100р. </h3>; <p> апельсиновый и ананасовый сок</p>; <h3> молочный коктель</h3>; <p> молоко, мороженное, сироп</p>; </body>; </ html>; - Html элементы Это основная структурная единица web-страницы написанная на языке Html. Все элементы в Html следуют одному формату: 1. Элемент начинается с открывающего тега. 2. Элемент заканчивается заканчивающим тегом. 3. Содержимым элемента является всё что находится между тегами «открыть и закрыть». 4. Некоторые элементы не имеют содержимого(пустые элементы). 5. Большинство элементов могут содержать атрибуты. - Вложенные элементы Все Html документы состоят из вложенных документов, глубина вложенности элементов неограниченна. Когда вы размещаете один элемент внутри другого, будьте внимательны к вложенности Как не должно быть: <p>это<em>очень </p> интересно</em>;. Пробельные символы Браузер игнорирует большинство пробельных символов в Html коде. Символы табуляции, перенос строки и пробелы в Html документе можно использовать в любом количестве для приданию коду удобно читаемого вида. Блочные и строчные элементы - блок(block) - строчные(inline) Блочные элементы представляют собой строительные блоки вашей web-страницы, при отображении браузер автоматически добавляет разрыв строки до и после блочного элемента. При этом он занимает всю доступную ширину, а высота блочного элемента вычисляется браузером автоматически. Текс в блочных элементах выравнивается по умолчанию. Обычно блочные элементы используются, чтобы разделить содержимое web-страницы на аналогические блоки(например: верхний колонтитул(шапка сайта), меню, блок с контентом, нижний колонтитул(footer)). Строчные элементы. Используются для разметки частей содержимого элементов. Браузер не добавляет разрыв строки как в блочных, поэтому если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую по необходимости.
Атрибуты Html тегов Атрибуты предназначены для предоставления дополнительной информации об элементе и они всегда указываются внутри открывающего тега. Имена атрибутов нечувствительных к регистру. Значения атрибута может состоять из текста, цифр и других символов (единственный запрещённый «&»).
Атрибуты могут быть записаны четырьмя различными способами: 1. Пустой атрибут. 2. Атрибут со значением без кавычек. 3. Атрибут со значениям в одиночных кавычках(апостроф). 4. Атрибут со значением в других кавычках.
24.03 Пустой атрибут Существуют для атрибутов булево (логического типа), поддерживается синтаксис при котором явное указание значения атрибутов можно опустить. Атрибут со значением без кавычек Синтаксис с опущенными кавычками вокруг значения атрибута подразумевает, что за именем атрибута подразумевает после знака =, будет следовать значение атрибута, которое не должно содержать пробела, двойных кавычек, знак (‘) и других видов кавычек. Пример
Пример
Атрибут со значением в двойных кавычках Может содержать любые символы, включая апострофы Пример
Структура html документа Каждый html документ, отвечающий спецификации html в какой-либо версии, обязан начинаться со строки декларации версии html.
Элемент html Этот элемент так же называется корневым, потому что все остальные элементы документа располагаются в нём. Корневой элемент может иметь только 2 дочерних элемента: 1. <head>; 2. <body>;
Элемент Head является контейнером для других элементов, которые предоставляют информацию о документе (метаданные). Эти метаданные сообщают браузеру местонахождение ваших скриптов и таблиц стилей.
Элемент Title представляет собой текстовый заголовок для документа. Каждый html документ должен иметь ровно один элемент title. Браузеры отображают содержимого title как имя документа вверху окна браузера или в названии вкладки.
Элемент body является контейнером для всего содержимого web страницы. Всё что отображается в окне браузера и видит, пользователь содержится в нём. Основная цель – отделить содержимое документа от метаданных.
Содержание 1. Интернет, сайты. Общие понятия. 2. Язык HTML. Общие понятия 3. Создание сайта 4. Спецсимволы 5. Гиперссылки 6. Изображения 7. Списки 8. Форма 9. CSS. Основы 10. Селекторы 11. Единицы измерения в CSS. 12. Вложенность 13. Наследование 14. Группирование свойств 15. Псевдоклассы и псевдоэлементы 16. Таблицы в HTML 17. Нарезка макета и табличная верстка Полезные понятия, советы · http://validator.w3.org/ - сайт, на котором можно запустить html-, css-файл и проверить его на ошибки. · IETester – программа, которая считывает html-файл и показывает как будет отображаться сайт для различных версий Internet Explorer. · <meta charset="utf-8">; // указывает браузеру кодировку, которую использовать при открытии страницы. · Кэш – временное хранилище данных. Например, когда мы переходим по ссылкам на википедии, нелогично на протяжении одного сеанса каждый раз открывать картинку-логотип сайта. При обращении клиента к серверу, сервер отправляет эту картинку, а она сохраняется в кэше и просто повторно вызывается. · В CSS при работе с селекторами вместо равно (=) ставится двоеточие (:), например, border-collapse: collapse. · Если мы изменяем стильвнутри тега в html-файле, то после названия тега мы указываем соответствующее свойство, потом знак равенства (=), потом в кавычках (“”) указываем значение. Например, <td width = “300”> </td>. · Названиеid (метки) должно начинаться с буквы. · Class – метка, которая выделяет что-то общее (может в нескольких тегах одновременно присутствовать). Используется зачастую при оформлении в CSS, когда нужно изменить оформление объектов, которые отмечены определенным class. · !important – директива, ставится при работе в CSS, придает первостепенную важность выполнению команды для тега не взирая на какие-либо другие команды, которые касаются этой же строки. Например: h2 {color: red!important;}. · Верстка сайта – условное разделение его на части. · <style> {background: url (D:\Max_plus_2_files\symbol.jpg);} // задает фон картинкой. · Если нужно, чтобы вся область в блоке стала ссылкой, то для этого в CSS для тега a нужно написать: а {display: block; height: 100%;} · Если нужно выровнять элемент по вертикали: line-height: height; // для второго height указываем высоту блока, в котором находится элемент, например: // line-height: 50px; · Если нужно сделать, чтобы при наведении курсором некий элемент брался в рамку и при этом не дергался, то можно изначально задать элементу прозрачную рамку (transparent цвет), а при наведении, чтобы она окрашивалась в черный. · · При использовании div и обтеканий для него, может возникнуть ситуация, при которой нижняя часть сайта (подвал) выходит за рамкиосновной части и следовательно фон основной части не выделяет этот подвал. Нужно просто в конце html-кода добавить еще один div и через CSS задать ему clear: both. · Если нам нужно задать следующую разметку через div:
При чем родительский div (красный) имеет определенную ширину, то лучше левому и правому div задать float: left/right соответственно, а среднему – задать overflow: hidden (чтобы он втиснулся между боковыми div и свою ширину автоматически подобрал). · Если мы хотим поместить надпись в div, при чем, чтобы она не мешала другим надписям распологаться в div, то для этого в CSS прописываем надписиposition: absolute
Если мы хотим, чтобы положение надписи в div была прикреплена к этому родительскому элементу div – то задаем надписи в CSS position: relative; Как правило нужно, чтобы 2 этих свойства сработали одновременно, тогда для родительского элемента пишем position: relative; а для надписи - position: absolute;
|
Чтобы отредактировать код Html документа нажмите на него правой кнопкой мыши(ПКМ) открыть с помощью NotePad++
- используется для того, чтобы браузер мог распознать кодировку и вывести правильный текст при открытии сайта.
