HTML+CSS basic

HyperText Markup Language

ЯЗЫК HTML

  • Язык разметки гипертекста
  • Применяется при создании сайтов в интернете
  • Нужен для интерпретации сайта браузером
  • Предопределенный набор элементов (тегов)

ЧТО ТАКОЕ HTML?

ИСТОРИЯ

В конце 1980-х британский ученый Тим Бернерс-Ли работал физиком в ЦЕРНе (the European Organization for Nuclear Research). Он разработал для ученых возможность обмена документами через Интернет.

World Wide Web Consortium 

Консорциум всемирной паутины

Основная организация международных стандартов для Всемирной паутины
(аббревиатура: WWW or W3)

Процесс стандартизации

  • Черновик спецификации (D)
  • Рабочий проект (WD)
  • Возможный кандидат (CR)
  • Предлагаемая рекомендация (PR)
  • Рекомендация W3C (REC)

W3C

https://www.w3.org/TR/html5/
  • HTML 0.9
  • RFC 1996 — HTML 2.0
  • HTML 3.2 — 14 янв. 1997 года;
  • HTML 4.0 — 18 дек. 1997 года;
  • HTML 4.01 — 24 дек. 1999 года;
  • HTML5 — 28 окт. 2014 года
  • HTML 5.1 — с 17 дек. 2012 года.

HTML-ВЕРСИИ

HTML 5

<!DOCTYPE html>

DOCTYPE: HTML 5

<!DOCTYPE html>
<html>

  <head>
    <title>My first page</title>
  </head>
  
  <body>
    <p>Hello <b>world!</b></p>
  </body>

</html>
  • Текст содержит теги
  • Теги "рассказывают" браузеру, как отобразить страницу

СТРУКТУРА HTML -ДОКУМЕНТА

  • Все HTML документы должны начинаться с указания типа текущего документа - DTD : <!doctype HTML>
  • Сам HTML-документ должен начинаться с <html> и заканчиваться с </html>
  • Видимая часть документа заключена между <body> & </body>
  • Информация о странице, например, заголовок вкладки, скрипты, стили и метаданные заключены в <head> & </head>
<!doctype html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Heading</h1>
    <p>This is a paragraph</p>        
</body>
</html>

BASIC HTML

Согласно стандарту HTML, только несколько тегов можно разместить в "заголовочной" части документа

<head>

Описывает информацию о документе

<title>

<link>

<meta>

<!DOCTYPE>

Описывает тип документа. Тег следует писать перед тегом <html> .

Определяет связь с внешним документом (прим. - файл со шрифтом)

Определяет мета-информацию

Описывает заголовок, отображаемый во вкладке

HTML HEAD

META

Определяет метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем

<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 придает особое значение всему, что начинается со знака меньше ("<") и заканчивается знаком больше (">"). Такая разметка называет тегом.

  1. Нельзя забывать закрывать тег; одни теги закрываются по умолчанию, а другие могут создавать непредвиденные ошибки, если забыть их закрыть.
  2. Правильное вложение тегов - важное правило, которое всегда должно выполняться.

Замечания

Корректно

Некорректно

<p>This <b>is</p> incorrect</b>
<p>This <b>is</b> correct</p>

ТЕГИ

Стартовый тег может содержать дополнительную информацию. Она называется атрибутом.

АТРИБУТЫ ОБЫЧНО СОСТОЯТ ИЗ 2 ЧАСТЕЙ:

  1. Название
  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>

КОММЕНТАРИИ

  • 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 элемента внутри другого HTML элемента. Вложенность не ограничена
  • Например, тег <p> внутри <body>. Тег <body> внутри  <html>. Соответственно, в результате так будет структурирована веб-страница.
<html>
  <body>
    <p>You are in your beginning stage of</p>
    <p>HTML</p>
  </body>
</html>

ВЛОЖЕННОСТЬ

  • Неизвестные теги игнорируются
  • Неизвестные атрибуты игнорируются
  • Неизвестные значения игнорируются
  • Браузер пытается закрыть теги, если они не закрыты

ОСОБЕННОСТИ HTML

ОСНОВНЫЕ ТЕГИ

Заголовки <h1> - <h6>

Списки<ul>    <ol>    <dl>

Блоки<div>

Таблицы<table>

Формы<form>

Изображения<img>

Ссылки<a>

ОСНОВНЫЕ ТЕГИ

ЗАГОЛОВКИ

Позволяет разделить текст на разделы

ВЛОЖЕННЫЕ СПИСКИ

Один список может содержать в себе другой

ТАБЛИЦЫ

Любая таблица состоит из строк и ячеек, для их создания используют теги <tr> и <td>

ИЗОБРАЖЕНИЯ

  • src - ссылка на изображение
  • alt - "alternative text". Текст, который будет отображаться, когда изображение недоступно
  • width, height (ширина и высота) помогут изображению отобразиться быстрее

ССЫЛКА

  • href - ссылка на ресурс
  • name - устанавливает имя якоря внутри документа
  • target - имя окна или фрейма, куда браузер будет закружать документ

ТЕГ PREFORMATTED 

Используется для изменения общего способа отображения html-текста

ТЕГИ В HTML5

СЕМАНТИЧЕСКИЕ ЭЛЕМЕНТЫ

https://www.w3schools.com/html/html5_new_elements.asp

Многие веб-сайты сейчас содержат подобный HTML

<div id="nav"> <div class="header"> <div id="footer">,
чтобы  обозначить панель навигации, заголовок и футер.

HTML5 предлагает новые семантические элементы для определения различных частей веб-страницы:

MEDIA-ТЕГИ

<audio>

Определяет звуковой контент

<embed>

Определяет контейнер для внешнего (не HTML) приложения

<source>

Определяет несколько медиа-ресурсов для media-элементов

(например, <video> и <audio>)

<track>

Определяет текстовые дорожки для media-элементов

<video>

Определяет видеозаписи

БОЛЬШЕ ПРИМЕРОВ

Cascading Style Sheets

CSS

Это язык, которые отвечает за визуальное представление докуметов пользователю. Это означает их преобразование в удобную для восприятия форму.

ЧТО ТАКОЕ CSS?

Haakon Wion Lee - ученый, специалист в области компьютерных наук, предложивший CSS в 1994 году

Click to look at CSS power (STAR WARS AT-AT Walker)

body {
    background: red;
    color: blue;
    font-size: 12px;
}

К сожалению, язык CSS значительно отличается от языка HTML.

Однако, как и HTML, он прост в понимании и написании.

ПРОСТОЙ CSS

CSS имеет очень простой синтаксис.

CSS разделен на правила(rules). Каждое правило состоит из двух частей: селектора и одной или нескольких деклараций (каждая из которых имеет свойство и значение)

CSS selector

СИНТАКСИС

Селектор выбирает определенные части HTML документа. Есть несколько способов сделать это. Самое простое - указать имя тега.

Пример ниже выберет все теги <h1> в документе.

h1 { 
    *put your declarations here*
}

СЕЛЕКТОР

  • После выбора набора элементов, нужно использовать декларации, чтобы изменить их визуальные свойства.
  • Декларации следуют после селектора и заключены в фигурные скобки {вот такие}
  • Нельзя забывать ставить двоеточие! Иначе это повлечет за собой различные проблемы.

Пример

Любая декларация имеет вид:

property: value;

ДЕКЛАРАЦИИ

  • Каждой валидной декларации предшествует селектор, который является условием выбора некоторых элементов страницы.
  • Пара свойство-значение называется декларацией.

УСТАНОВКА ПРАВИЛ

COMMON-СТИЛИ

CSS Box Model

Все HTML-элементы могут рассматриваться как боксы (boxes).
Боксовая модель состоит из 4 свойств:

  • 1. Margin добавляет пустое пространство вокруг элемента
  • 2. Padding пустая область, окружающая контент
  • 3. 4. Width и Height по умолчанию задают размеры блока.
  • Но часто его меняет свойство box-sizing:border-box (http://htmlbook.ru/css/box-sizing)

СХЛОПЫВАНИЕ МАРЖИНОВ

При соприкасании вертикальных марджинов двух элементов будет применен только больший марджин, в то время как меньший внешний отступ будет проигнорирован.

Другая общая задача - изменить вид текста. Используя CSS, существует много вариантов, как это сделать. 

Изменить шрифт, используя "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см)

сантиметр

миллиметр

КАК ВКЛЮЧИТЬ CSS

Существует 3 пути включения CSS в HTML:

  • Инлайновый (Inline)
  • Внутренний (Internal)
  • Внешний (External)

КАК ВКЛЮЧИТЬ CSS

  • Добавляется непосредственно к элементу через атрибут style
  • Заданный стиль только у данного элемента на данной странице
  • Нельзя переиспользовать
  • Рекомендуется избегать данный способ
<!DOCTYPE html>
<html>
  <head>
    <title>Inline</title>
  </head>
  <body>
    <p style="color: red;">Supporting paragraph. Very informative.</p>
  </body>
</html>

ИНЛАЙНОВЫЙ

  • Стили добавляются в тег <style>, который в свою очередь находится в теге <head>
  • Стили только для элементов, расположенных на текущей странице
  • Рекомендуется избегать данный способ
<!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>

ВНУТРЕННИЙ

  • Отдельный файл со стилями,  путь к которому определяется в теге<head>
  • Файл имеет расширение ".css"
  • Переиспользуемые стили
  • Рекомендуется использовать данный способ (Best practice)
<!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>

ПРИМЕР

SANDBOX

ЗАДАНИЯ

Сверстать (в новой git ветке) html страницу :

  1. Застилизовать разные шрифты, чтобы на странице использовалось не менее 5 разных font-family (подробнее можно найти тут: CSS fonts)
  2. Добавить в нее какое-нибудь <video>
  3. Разместить изображение на весь экран
     

Больше заданий на:

https://github.com/WebPurple/external-courses/tree/master/src/ex8_html-css-basics

HTML+CSS basic

By aneelia

Made with Slides.com

HTML+CSS basic

  • 531

More from aneelia