В конце 1980-х британский ученый Тим Бернерс-Ли работал физиком в ЦЕРНе (the European Organization for Nuclear Research). Он разработал для ученых возможность обмена документами через Интернет.
Консорциум всемирной паутины
Основная организация международных стандартов для Всемирной паутины
(аббревиатура: WWW or W3)
Процесс стандартизации
HTML 5
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<p>Hello <b>world!</b></p>
</body>
</html>
<!doctype html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph</p>
</body>
</html>
<head>
Описывает информацию о документе
<title>
<link>
<meta>
<!DOCTYPE>
Описывает тип документа. Тег следует писать перед тегом <html> .
Определяет связь с внешним документом (прим. - файл со шрифтом)
Определяет мета-информацию
Описывает заголовок, отображаемый во вкладке
Определяет метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем
<meta name="description" content="Web tutorial">
<meta name="keywords" content="HTML, JavaScript, VBScript">
Определяет ключевые слова
Кодировка: для ОС Windows и кириллицы обычно используется значение charset "utf-8" или "windows-1251"
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
HTML придает особое значение всему, что начинается со знака меньше ("<") и заканчивается знаком больше (">"). Такая разметка называет тегом.
Замечания
Корректно
Некорректно
<p>This <b>is</p> incorrect</b>
<p>This <b>is</b> correct</p>
АТРИБУТЫ ОБЫЧНО СОСТОЯТ ИЗ 2 ЧАСТЕЙ:
<input required="required">
<p class="example">Tag with attributes</p>
<span id="identificator">Tag with id</span>
<div title="This is a DIV.">A sentence.</div>
В HTML есть механизм для вставки комментариев, которые не отображаются в браузере.
Это полезно для пояснения раздела разметки, оставления заметок для других людей, работающий с данной страницей, или напоминаний для себя.
Комментарии заключены в символы следующим образом:
<!doctype html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<!-- The page content -->
<h1>Heading</h1>
<p>This is a paragraph</p>
</body>
</html>
Некоторые элементы имеют очень точное название - например, img = image. Другие же менее конкретны, например p = part of the text.
<html>
<body>
<p>You are in your beginning stage of</p>
<p>HTML</p>
</body>
</html>
Эта структура часто рассматривается как дерево (в данном случае, <body> и <p> -ветви, растущие из <html>). Эта иерархическая структура называется
DOM : the Document Object Model
<html>
<body>
<p>You are in your beginning stage of</p>
<p>HTML</p>
</body>
</html>
Позволяет разделить текст на разделы
Один список может содержать в себе другой
Любая таблица состоит из строк и ячеек, для их создания используют теги <tr> и <td>
Используется для изменения общего способа отображения html-текста
Многие веб-сайты сейчас содержат подобный HTML
<div id="nav"> <div class="header"> <div id="footer">,
чтобы обозначить панель навигации, заголовок и футер.
HTML5 предлагает новые семантические элементы для определения различных частей веб-страницы:
<audio> |
Определяет звуковой контент |
<embed> |
Определяет контейнер для внешнего (не HTML) приложения |
<source> |
Определяет несколько медиа-ресурсов для media-элементов (например, <video> и <audio>) |
<track> |
Определяет текстовые дорожки для media-элементов |
<video> |
Определяет видеозаписи |
Это язык, которые отвечает за визуальное представление докуметов пользователю. Это означает их преобразование в удобную для восприятия форму.
Haakon Wion Lee - ученый, специалист в области компьютерных наук, предложивший CSS в 1994 году
body {
background: red;
color: blue;
font-size: 12px;
}
К сожалению, язык CSS значительно отличается от языка HTML.
Однако, как и HTML, он прост в понимании и написании.
CSS имеет очень простой синтаксис.
CSS разделен на правила(rules). Каждое правило состоит из двух частей: селектора и одной или нескольких деклараций (каждая из которых имеет свойство и значение)
Селектор выбирает определенные части HTML документа. Есть несколько способов сделать это. Самое простое - указать имя тега.
Пример ниже выберет все теги <h1> в документе.
h1 {
*put your declarations here*
}
Пример
Любая декларация имеет вид:
property: value;
Все HTML-элементы могут рассматриваться как боксы (boxes).
Боксовая модель состоит из 4 свойств:
При соприкасании вертикальных марджинов двух элементов будет применен только больший марджин, в то время как меньший внешний отступ будет проигнорирован.
Изменить шрифт, используя "font-size":
Изменить шрифт, используя "font-family":
Изменить выравнивание, используя "text-align":
h1 {
font-family: "Times New Roman";
}
h1 {
font-size: 22pt;
}
h1 {
text-align: center;
}
Так же общей задачей является изменение цвета.
Изменить цвет текста, используя свойство "color":
h1 {
color: blue;
}
Изменить цвет фона, используя "background-color":
body {
background-color: grey;
}
Существуют различные способы задания цветов
Color | HEX | RGB | RGBA | Name |
---|---|---|---|---|
#000000 | rgb(0,0,0) | rgba(0,0,0,1) | black | |
#FF0000 | rgb(255,0,0) | rgba(255,0,0,1) | red | |
#00FF00 | rgb(0,255,0) | rgba(0,255,0,1) | lime | |
#0000FF | rgb(0,0,255) | rgba(0,0,255,1) | blue | |
#FFFFFF | rgb(255,255,255) | rgba(255,255,255,1) | white |
https://caniuse.com - проверить совместимость с браузерами
em
rem
%
vw
vh
размер от шрифта текущего элемента (2em означает 2 размера от шрифта текущего элемента)
размер шрифта от основного элемента
(обычно от <html>)
Относительно 1% от ширины вьюпорта
Относительно 1% от высоты вьюпорта
проценты
px
pt
cm
mm
in
пиксель (1px = 1/96 часть oт 1). Пиксели зависят от устройства просмотра
пункт(1pt = 1/72 часть от 1)
дюйм(1дюйм= 96px = 2.54см)
сантиметр
миллиметр
<!DOCTYPE html>
<html>
<head>
<title>Inline</title>
</head>
<body>
<p style="color: red;">Supporting paragraph. Very informative.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Internal</title>
<style>
h1 {
font-size:50px;
text-align: center;
}
</style>
</head>
<body>
<h1>This is my huge headline</h1>
<p>Supporting paragraph. Very informative.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>External</title>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>
<p>This is my snazzy red paragraph!</p>
</body>
</html>
HTML FIle
mystyles.css
body {
width: 1000px;
margin: auto;
}
p {
color: red;
text-align: center;
}
CSS
HTML
body {
background-color: green;
text-align: center;
font-family: "Arial";
}
p {
color: yellow;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Сверстать (в новой git ветке) html страницу :
Больше заданий на:
https://github.com/WebPurple/external-courses/tree/master/src/ex8_html-css-basics