Введение в html
Содержание:
HTML код — что это такое простыми словами
HTML (англ. «hyper text markup language» — язык гипертекстовой разметки) — это специальный язык разметки, который применяется при создании сайтов в интернете.
Браузеры прекрасно понимают html и могут интерпретировать его в понятном виде. Вообще любая страница сайта — это html-код, который браузер переводит в дружественный вид для пользователя. Кстати, код любой страницы является доступным для всех. Для его просмотра щелкните правой кнопкой мыши и выберите посмотреть исходных код или нажмите на клавиатуре CTRL+U:
Язык разметки html получил широкую популярность. На данный момент — это единственный язык, с помощью которого создается разметка сайта. Я хочу подчеркнуть тот факт, что именно разметка. Так называемый «движок» создается на другом языке программирования (чаще всего php), который позволяет создавать интерактивные страницы (html этого не позволяет).
Файлы, созданные на html, имеют расширения .html или .htm. Чтобы создать файл html, достаточно открыть блокнот и сохранить его с расширением .html. Как это сделать можете посмотреть на странице: пример создания простой html страницы
Примечание
Внимательный читатель обратит внимание, что далеко не у всех страниц на конце в интернете расширение .html. К примеру есть страницы /catalog/list (вообще без расширения)
Это неправильно, но браузер сможет понять что это веб-документ и корректно его отобразить.
Что такое HTML тег
HTML тег — это один из элементов верстки html, который нужен для структуры. Теги имеют открывающий знак < и закрывающий >.
Например, <teg>. Почти каждый тег парный и требует закрывающего тега </teg>. Если вебмастер забудет поставить закрывающий тег или сделает это некорректно, то верстка будет не валидной (см. валидация сайта). Если это тег относится к тем, что держат «каркас» сайта, то сайт может «поплыть» (боковая колонка сместится вниз и т.п.).
Запрещено закрывать теги не по порядку их открытия. Например
Более подробно про создание html страницы читайте в статье:
Знакомство с html
Если HTML представляет собой скелет (структура) сайта, то CSS — это набор правил, которые отвечают за то, как это будет выглядеть, а именно, какой будет шрифт (размер, цвет, толщина), как будут располагаться элементы на сайте друг относительно друга и т.п. Поэтому HTML и CSS довольно тесно связаны между собой.
Как подключить CSS к HTML-странице?
Заставить инструменты создания сайтов взаимодействовать друг с другом можно несколькими способами. По методу добавления стили делятся на следующие категории.
Встроенные стили
Задаются в документе прямо внутри HTML-тега с помощью атрибута style. Имеют наивысший приоритет. Это значит, что если для одного и того же элемента задано разное оформление, то предпочтение будет отдано правилу, которое прописано внутри тега. Селектор для встроенного стиля не нужен, так как связь стиля и тега очевидна — оформление тега в нём и задано.
Следующий код задаёт размер и цвет шрифта тексту внутри тега <p>:
<p style="font-size: 130%; color: #fc0">Текст, оформленный с помощью внутреннего стиля.</p>
Глобальные стили
Задаются тегом <style>, расположенным в контейнере <head>, и определяют оформление всех указанных элементов документа, а не оного, как в случае с внутренним стилем.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a {
font-size: 120%;
font-family: Verdana, sans-serif, Helvetica;
color: #632;
}
</style>
</head>
…
</html>
Связанные стили
Самые удобные, потому что с их помощью можно легко оформить в едином стиле целый сайт. Связанный стиль подразумевает, что всё CSS-оформление находится в отдельном файле с расширением .css.
Такой подход удобен ещё и тем, что он отделяет правила оформления страниц от их содержимого, CSS-код можно легко менять, не вмешиваясь в HTML-файлы, а принцип разделения кода очень важен, особенно в больших проектах.
Чтобы связать правила из CSS-файла с HTML-страницей, используется тег <link>, добавленный в контейнер <head>, и его атрибуты.
Вот строка, связывающая правила из файла mystyle.css с HTML-страницей:
<link rel=»stylesheet» href=»mysyle.css»>
rel=»stylesheet» определяет, что тег ссылается на файл таблицы стилей, href=»mysyle.css» задаёт его адрес. Правила адресации такие же, как у обычных ссылок – путь может быть абсолютным, относительным и т. д.
Импортированные стили
С помощью команды @import можно добавить стили из CSS-файла в текущую таблицу. Это может потребоваться, например, если вы хотите дополнить индивидуальное оформление документа, заданное с помощью глобальных стилей, универсальными правилами из отдельного файла. Со встроенными стилями метод использовать нельзя.
Код ниже импортирует в документ таблицу файла any.css, которая находится в папке с редактируемым HTML-документом:
@import url(any.css);
Команда прописывается строкой ниже открывающего тега <style>, до первой строки глобального стиля:
<style type="text/css">
@import url(mobile.css);
a {
font-size: 120%;
}
</style>
Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Дефис и тире: где и что использовать
Неправильное использование дефиса и тире можно увидеть довольно часто. Причем даже в печатных изданиях, где тексты проходят проверку опытными авторами и редакторами. Дефис и тире, хоть и очень похожи внешне, существенно отличаются. Прежде всего — в употреблении.
Запомнить, когда использовать дефис, а когда тире будет проще, если усвоить всего лишь один принцип. Дефис — это короткая черта в пределах одного слова, а тире — длинная и использующаяся в пределах предложения.
Дефис (черточка) — это небуквенный орфографический знак, который разделяет части слова. Применим в русской и многих других письменностях.
Что нужно знать о дефисе?
Помогает делить слова на слоги при переносе на новую строку.
При переносе слова дефис всегда остается на первой строке. Дефис-знак не отделяется пробелами ни спереди, ни сзади. Исключение — если ко второй части составного слова по очереди подставляются разные первые части (теле- и радиотрансляция).
- Служит для разделения частей составных слов: бледно-синий, бизнес-модель, Дон-Кихот, Салтыков-Щедрин, северо-запад, генерал-майор, жар-птица, плащ-палатка.
- Может использоваться для сокращения некоторых слов: г-жа (госпожа), р-н (район), изд-во (издательство), пр-т (проспект).
- Присоединяет к словам некоторые приставки и частицы: по-русски, постой-ка.
- Присоединяет постфиксы -то, -либо, -нибудь.
Тире — это, прежде всего, знак препинания.
Тире применяется во многих языках. В русскую письменность этот пунктуационный знак ввел писатель и историк Николай Карамзин. Изначально знак назывался «чертой».
Тире бывает коротким и длинным.
Короткое тире часто называю средним, а аще — «эн-дэш» («n-dash»), так как его длина равна ширине буквы N (для наглядного примера «–»). Код символа: Alt + 0150.
Обычно короткое тире служит для обозначения количественного интервала (2–3 часа, 9–10 км). В данных случаях тире не нуждается в отбивке пробелами.
Длинное тире также называют «эм-дэш» («m-dash»), так как его длина эквивалентна ширине буквы M («—»). Код символа: Alt + 0151.
Длинное тире — самое что ни на есть настоящее тире: оно отбивается пробелами с обеих сторон и ставится между словами, то есть разделяет части предложения. Например, подлежащее и сказуемое, которые выражены именами существительными в именительном падеже (Русский язык — сложный предмет). Другой пример — неполные предложения, то есть с пропущенными членами предложения, необходимыми для полноты строения (Вдали — степь да леса).
Длинное тире выделяется интонационно: с помощью паузы.
Повторим еще раз!
| ДЕФИС | КОРОТКОЕ ТИРЕ | ДЛИННОЕ ТИРЕ |
|
|
|
История развития HTML
- HTML 1.0 (1986) — самая первая версия, в которой отсутствовало множество важных тегов. Официально не существует.
- HTML 2.0 (22 сентября 1995) — появление тега form
- HTML 3.2 (14 января 1997) — появление тега table, а также различные эффекты обтекания текста изображения
- HTML 4.0, 4.01 (24 декабря 1999)— добавлена поддержка скриптов и фреймов, введена таблица стилей CSS
- HTML 5.0 — новая версия, которая вступила в силу с 2014 году. Советую прочитать: особенности оптимизации сайта в html5
Кстати, в выше рассмотренном примере, чтобы подчеркнуть использование стандарта HTML 5.0 мы использовали специальный тег <!DOCTYPE> в начале документа.
На нашем сайте Вы можете найти уроки по html с множеством примеров и пояснений. После их прочтения Вы должны освоить азы HTML.
Разновидности спецсимволов
На обычной клавиатуре вы не найдете большенство математических, технических, геометрических и других спецсимволов.
Чтобы применить такие символы в HTML-странице, вы можете использовать соответствующие им мнемонические имена.
Обратите внимание: Не все спецсимволы имеют соответствующее мнемоническое имя. Тем не менее, всем символам присваивается числовой код, который является уникальным
Поэтому, если вы не найдете имя нужного символа, используйте его аналог — числовой код.
В слудующем примере видно как один и тот-же символ можно отобразить, использую разные коды:
- Результат
- HTML-код
- Попробуй сам »
Мнемоническое имя: €
Десятичный код: €
Шестнадцатиричный код: €
Символ
Описание
Мнемоническое имя
Числовой код
∀
Математический знак «для всех»
∀
∀
∃
Математический знак «существует»
∃
∃
∅
Пустое множество; диаметр
∅
∅
∈
Знак принадлежности
∈
∈
∉
Знак «не принадлежит»
∉
∉
∑
Сумма последовательности
∑
∑
√
Квадратный корень
√
√
∝
Пропорционально
∝
∝
∞
Бесконечность
∞
∞
Границы и рамки
Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border, которое применяется к элементам (<td> или <th>). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse. В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table, а дальше оно всё сделает самостоятельно (пример 6).
Пример 6. Применение свойства border-collapse при создании рамок таблицы
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
table {
border-collapse: collapse; /* Убираем двойные линии */
width: 100%; /* Ширина таблицы */
border-spacing: 0; /* Расстояние между ячеек */
}
td {
border: 2px solid #333; /* Параметры границ */
padding: 4px; /* Поля в ячейках */
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<table>
<tr><td>O</td><td>X</td><td>X</td></tr>
<tr><td>O</td><td>O</td><td>X</td></tr>
<tr><td>X</td><td>X</td><td>O</td></tr>
</table>
</body>
</html>
Разница между границами таблицы при добавлении свойства border-collapse, а также без него, представлена на рис. 4.
а — свойство не установлено
б — свойство установлено
Рис. 4. Вид таблицы при использовании border-collapse
На рис. 4а показана рамка таблицы, используемая по умолчанию
Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б)
Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom, border-left и другие подобные. Применять границы к элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому добавляем их к селектору table и td (пример 7).
Пример 7. Линии между строк
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
table {
width: 100%; /* Ширина таблицы */
border-collapse: collapse; /* Убираем двойные линии */
border-bottom: 2px solid #333; /* Линия снизу таблицы */
border-top: 2px solid #333; /* Линия сверху таблицы */
}
td {
text-align: center; /* Выравнивание по центру */
border-bottom: 1px solid #333;
border-top: 1px solid #333;
}
td, th {
padding: 5px; /* Поля в ячейках */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan=»2″>Вид соединения</th>
<th colspan=»2″>Поля допусков ширины шпоночного паза</th>
</tr>
<tr>
<th>Вал</th><th>Втулка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Свободное</td><td>H9</td><td>D10</td>
</tr>
<tr>
<td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
</tr>
<tr>
<td>Плотное</td><td colspan=»2″>P9</td>
</tr>
</tbody>
</table>
</body>
</html>
Результат данного примера показан на рис. 5.
Рис. 5. Таблица с горизонтальными линиями
Дефис и тире.
В полиграфии существует три очень похожих друг на друга знака: длинное тире, короткое тире и дефис. Из них на компьютерной клавиатуре есть только один — это дефис. Именно его обычно и используют во всех случаях, когда в тексте нужно поставить дефис или тире. Тем не менее следует придерживаться определенных правил пунктуации относительно применения этих знаков.
Так, дефис (-) применяется только внутри слов или между цифрами. Длинное тире (—), ставится между словами в предложении и отделяется от этих слов пробелами. Длинному тире соответствует ссылка-мнемоника —. Короткое тире (–) ставится между цифрами без букв или между словами, которые набраны прописными буквами, а также используется в качестве знака «минус» в математических формулах. Между коротким тире и словами пробел не ставится. Короткому тире соответствует ссылка-мнемоника –.
Применение дефиса и тире показано в следующем примере:
Пример: Спецсимволы — и –
- Результат
- HTML-код
- Попробуй сам »
Веб-страница что-то слишком долго открывается.
Она должна загружаться за 2–4 секунды.
Время – деньги…
Символ
Описание
Мнемоническое имя
Числовой код
неразрывный пробел
 
>
больше чем
>
>
&
амперсанд
&
&
»
прямая двойная кавычка
"
"
‘
апостроф
'
'
левая двойная угловая кавычка
«
«
правая двойная угловая кавычка
»
»
‘
левая одинарная кавычка
‘
‘
’
правая одинарная кавычка
’
’
‚
нижняя одинарная кавычка
‚
‚
“
левая двойная кавычка
“
“
”
правая двойная кавычка
”
”
„
нижняя двойная кавычка
„
„
€
euro
€
€
копирайт
©
©
знак зареrистрированной торrовой марки
®
®
