Также Вы можете позвонить нашему менеджеру по номеру телефона 987-71-20.

Давайте дружить: image/svg+xml
Вакансии

Стильные, продуманные до мелочей сайты.
Привлечение только целевой аудитории.

+7 (812) 987-71-20

Учим HTML за 1 час

что такое хтмл

Википедия

В отличие от сценарных языков программирования, в которых с помощью сценариев программируются функции, в языке разметки, с помощью тегов программируется контент. Говоря простым языком HTML - это фундамент любого сайта.

html фундамент любого сайта

Что же такое язык разметки?

Необходимо сразу же понять, что весь интернет состоит полностью из html документов, страниц. Докуент Web такой же как документ WORD, у него есть свое оформление (Жирный текст,курсив,подчеркивание,картинки). Файл HTML документа имеет свою общую структуру, так называемые элементы разметки.

Структура Web-страницы.

Вэб-дизайнеру необходимо научиться программировать на языке HTML. Более того, именно со знания HTML должно начинаться любое знакомство, с премудростями вэб дизайна.

Вэб-дизайн сегодня

  • HTML-структура
  • CSS-оформление
  • JavaScript - поведение
  • PHP и похожие языки - серверная часть
  • CMS - управление контентом

Создание HTML документов.

Для того что бы создать html документ необходимо:

1. Открыть любой текстовый редактор (например блокнот встроенный в windows) Рассказать про Notepad++

2. Набрать произвольный текст и разметить его HTML тегами

3. Сохранить файл с расширением html

Если HTML документ будет открыт в редакторе, он будет отображен, как обычный текстовый файл. 

Если HTML документ будет открыт в браузере, он будет отображен в соответствии с разметочными тегами и будет называться вэб страницей.

Главная цель любого браузера, прочитать html документ и отобразить его как вэб страницу.

Что бы браузер мог отличить элементы разметки от текста, применяются теги.

Любой HTML документ состоит из обычного текста и разметочных тэгов.

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

Html теги обычно используются в паре, например: <b></b>. Первый тег называется начальным тегом, а второй конечным тегом. Текст находящийся между начальным и конечным тегом, подвергается разметке, например: <b>Привет</b>. 

При формировании страница, браузер анализирует тэги, и создает из них элементы.

 

Структура документа

<! DOCTYPE HTML> //декларация говорящая браузеру, какую версию html мы используем

<html lang="ru-RU"> — это контейнер, в котором находится всё содержимое страницы, включая теги <head> и <body>. Как правило, тег <html> идёт в документе вторым после доктайпа.

<head>  // отображается служебная информация, помогающая браузеру правильно отобразить документ(подключение стилей,скриптов,кодировка)

<meta charset="UTF-8"> Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если браузер неправильно «угадает» кодировку, то вместо текста будут отображаться иероглифы

<title>Ваш заголовок</title> // Заголовок страницы — это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках

<meta name="keywords" content="разные, ключевые, слова"> мета-теги хранят полезную для браузеров и поисковых систем информацию. Один из таких тегов — это описание ключевых слов страницы

<meta name="description" content="краткое описание определенной страницы">

</head>

<body> // предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

</body>

</html>

На какие группы делятся все элементы HTML

  • Теги верхнего уровня-html,head,body-Они образуют общую структуру документа
  • Теги заголовка элемента- meta,title-передают заголовки и кодировку
  • Блочные элементы,строчные элементы
  • Уневерсальные - теги для таблиц, теги для списков
  • Атрибуты Id - уникальное имя элемента
  • Атрибуты класс

Работа с текстом

Тег <html> обьявляет начало и конец HTML  документа.

Тег <body> содержит все видимое содержимое HTML страницы.

Тег <h1> позволяет "разметить" вложенный в него текст как заголовок.

Тег <p> позволяет "разметить" вложенный в него текст как абзац.

Заголовок в html определяется теками <h1- самый крупный заголовок><h6- самый мелкий> 

Горизонтальные линии. Чтобы добавить в документ горинтольную линию, используется тег <hr>

HTML абзацы. С помощью тега <p> Вы можете опередилить абзац. Абзацы используются, для логической группировки текста. По умолчанию абзацы начинаются с новой строки и имеют вертикальные отступы, которыми можно управлять с помощью стилей.

<!-- любой текст -->

Текст внутри комментария не отображается браузером на странице. Комментарии обычно используются в следующих случаях:

Для комментирования кода. Всегда полезно оставить подсказку.

Для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.

Комментарии можно использовать в любом месте страницы, кроме тега <title> — внутри него они не работают.

HTML-атрибуты

Атрибуты содержать дополнительную информацию об элементе или теге, а так же изменяют их. Большинство атрибутов, имеют значения; значения изменяют атрибут.

<тег атрибут 1="Значение" атрибут 2="Значение">

<тег атрибут 1="Значение" атрибут 2="Значение"> </тег>

<p align="center">Текст вровнен по центру</p> (в этом примере, значение атрибута "center" указывает на то, что содержание элемента p должно быть воровнено по центру)

Единицы измерения в атрибутах

<hr width="50px"> так же можно и в процентах

Атрибут выравнивания

Указывает на то, как текст будет выровнен в документе <p align="center,right,left">

Пример (противоречивые атрибуты)

<p align="center">

Какой то текст

<hr width="50%" align="left">

</p>

Список стандартных HTML атрибутов

class (Определяет имя класса элемента)

id-определяет уникальный идентификатор элемента

style-определяет стиль элемента

title-Содержит дополнительную информацию об элементе(значение данного атрибута, отображается при наведении, курсора мыши на элемент)

 

  • Списки.
  • Ссылки. Задаём адрес ссылки.
  • Абсолютные адреса. Относительные адреса.
  • Ссылка на файл. Ссылка на изображение.
  • Ссылка с якорем.
  • Всплывающая подсказка.Добавим изображение.
  • Размеры изображения.
  • Альтернативный текст.
  • Изображение-ссылка.
  • Таблицы.

Списки

Язык HTML обладает возможностями предоставления информации в виде списков. Список служит для добавления структуры в документ. Он позволяет в более удобном и понятном виде представить информацию, такую как, например: список покупок, пошаговое описание каких-либо действий, толковый словарь и т.п.

Неупорядоченный список используется для простого перечисления объектов, когда порядок неважен.

Неупорядоченные (или маркированные) списки создаются с помощью тега <ul>, который может содержать внутри себя теги </li>, обозначающие «элемент списка».

Упорядоченный список

Упорядоченный список используется для нумерованного перечисления отдельных пунктов или указания последовательности каких-либо действий. Когда программа встречает тэг упорядоченного списка, она последовательно нумерует пункты списка: 1, 2, 3 и т.д.

Упорядоченный список открывается тэгом <ol>, а каждый его пункт начинается стандартным тэгом <li>. Так же есть атрибут start ( с чего начинать список) <ol start=3>

Многоуровневый список
Многоуровневый список- это список, который содержит в себе еще один или несколько списков. Многоуровневый список может состоять как из нумерованных, так и из маркированных списков. Чтобы его создать нужно один обычный список "вложить" в другой обычный.

Ссылки

Что такое ссылки-ссылка обычно выглядит как подчёркнутый участок текста, щёлкая на который вы переходите на другую страницу, открываете изображение или начинаете скачивать файл. Если представить, что интернет это огромная сеть из множества узлов, то ссылки будут нитками, соединяющими все узлы этой сети. Ссылки создаются с помощью очень простого и короткого тега <a> href-адрес ссылки.

<a href="#">Ваша первая ссылка</a>

Абсолютные адреса

https://sait.ru/puth
https://— это протокол
sait.ru — имя сервера, также называется домен или хост
/puth — путь

Относительные адреса

В относительных адресах нет ни протокола, ни имени сервера, а путь не начинается со слэша /. Вот примеры относительных адресов:
puth/1
./puth
../../puth/1
В относительных адресах могут использоваться специальные символы, аналогичные символам в путях файловых систем: . и ...
Если браузер видит, что у ссылки задан относительный адрес, то он должен преобразовать этот адрес в абсолютный, чтобы знать, куда ведёт ссылка. Для этого браузер использует текущий адрес страницы.
Использовать относительные адреса для навигации по сайту не рекомендуется. Однако относительные адреса бывают полезны, например, во внешних CSS-файлах.

Ссылка в новом окне

Чтобы любая ссылка открывалась в новом окне, к тегу <a> следует добавить атрибут target со значением _blank

<p>

<a href="2.html" target="_blank">

Ссылка откроется в новом окне</a>

</p>

Ссылка с якорем
Ссылки с якорем обычно используются для создания навигации внутри страницы. Например, оглавления в начале страницы с большой статьёй.
Ссылка с якорем содержит символ #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого тега.
Можно задать адрес, состоящий из одного якоря, например:

<a href="#glava1">Глава 1</a>
При щелчке на такую ссылку браузер найдёт на странице элемент с атрибутом id со значением #glava1 и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт.
Якорь можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу произойдёт прокрутка к заданной части этой страницы.

Всплывающие подсказки

Подсказки помогают разъяснить назначение непонятных ссылок, а также ссылок-изображений.

Изображения

Чтобы добавить на страницу изображение, нужно использовать одиночный тег <img> с атрибутом src, в котором указан адрес картинки.

<img src="logo.png">

Размеры изображения

Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height. Пример:
<img width="100" src="...">

Во втором примере изображению задана относительная ширина, 50 процентов:
<img width="50%" src="...">

Высоту в процентах обычно не задают.
Если задать только один из размеров, ширину или высоту, то вторую размерность браузер вычислит самостоятельно исходя из пропорций изображения.

Если же задать и ширину, и высоту для картинки:
<img width="100" height="100" src="...">

То браузер может нарушить пропорции исходного изображения.

<img width="100" height="200" src="/assets/course4/img1.jpg">

Альтернативный текст

Если у пользователя отключены изображения или их невозможно загрузить, то в браузере отображается альтернативный текст. Например, если меню сделано с помощью изображений, то альтернативный текст поможет понять, куда ведёт каждый пункт. В общем, задавать альтернативный текст хорошо.
Альтернативный текст изображения задаётся с помощью атрибута alt

Изображение-ссылка

Таблицы

Строки

<table> обозначает таблицу.
<tr> расшифровывается как «table row», обозначает строку таблицы.
<td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.
Теги <td> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>. Почти всё текстовое содержимое таблицы размещается внутри тегов <td>.
В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех <tr> должно быть одинаковое количество <td>.

Столбцы

Для того, чтобы добавить столбец в таблицу, надо в каждую строку <tr> добавить по ячейке <td>.

Ячейки-заголовки
<th>-«table header» ячейка-заголовок. Тег <th> аналогичен <td>, он так же должен располагаться внутри <tr>, для него стилями можно задавать все те же свойства.
По умолчанию текст внутри <th> выделяется жирным и выравнивается по центру ячейки.

Заголовк таблицы <caption>

Тег <caption> должен размещаться внутри тега <table>, причём непосредственно внутри него и первым, до остальных вложенных тегов.

Объеденение ячеек

Объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>.
Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

Объединение ячеек

Оно осуществляется с помощью атрибута rowspan у тега <td> или <th>.
Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой» мы избавимся от этого столбца.

rowspan colspan

Можно растягивать ячейку одновременно и по вертикали, и по горизонтали. Для этого нужно задать ячейке два атрибута: rowspan и colspan.
Вытеснение соседних ячеек будет происходить так же, как и при обычном объединении ячеек. Правда, вытесненных ячеек окажется больше. Например, ячейка с rowspan="2" и colspan="2" вытеснит три соседних ячейки.

тег

  • Типы элементов
  • Формы
  • HTML-5

Типы элементов

В HTML большинство элементов - это так называемые строчные и блочные элементы. Блочные начинаются с новой строки.

Например: <h1> <form> <li> <ol> <div> <p> и т.д.

Строчные элементы обычно пишуться бех переноса строки

Например: <b> <a> <strong> <img> <span>

Элемент <div> блочный элемент, часто используется как контейнер для других элементов. При использовании CSS, элемент div может задавать стиль блокам контента.

Элемент <span> - строчный элемент, часто используемый как контейнер для текста. При использовании CSS, элементу <span> можно задавать оформление отдельных частей текста

<p>Одно <span>предложение</span></p>

Итак: Элемент <div>  позволяет определить блочную секцию документа. <span> строчную секцию элемента.

Бегущая строка

<marquee height="20" width="270" bgcolor="#99CCFF">
Бегущая строка, высота - 10, ширина - 270 пикселов, фон - 99CCFF
</marquee>

Формы

Формы вводятся в документ при помощи тега <form></form>
Формы нужны для того, чтобы отправлять данные с веб-страницы на веб-сервер, который сможет эти данные обработать: зарегистрировать пользователя, создать сообщение на форуме, отправить письмо и так далее. Html формы могут содержать такие элементы как, текстовые поля, флажки, радио кнопки, кнопки отправления и т.д. Формы так же могут содержать  списки выбора, многострочные текстовые поля и метки.

action указывает на вэб страницу,которая должна загрузится после отправки пользователем, URL, отправки формы;

method указывает на метод HTTP-запроса (GET или POST) который будет использоваться при отправке формы.

Когда используется метод GET в url адресе вэб страницы будут отображаться данные формы.

Метод POST используется когда требуется обновить данные в форме, или когда в форме содержаться конфедициальная информация (пароли). Метод POST безопаснее, потому что передаваемые данные не видны пользователю, в URL адресе страницы

Обычно форма отправляется на вэб страницу, расположенную на вэб сервере.

<form action="mailto:Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.;>
<input type=text name=firstname> добавить потом value="введите ваше имя" size="40" maxlength="20" 

еще потом

<input type=password name=firstname>

</form>

input type задаёт тип поля, элементы формы;
name задаёт название формы.
value - значение по умолчанию
size - длинна поля для ввода текста (измеряется в печатных символах, по умолчанию = 20)
maxlength - определяет максимальное число символов, вводимых пользователем в поле формы.

Коментарии 

<TEXTAREA> - создает элемент для многострочного ввода текста. Высота поля (rows = количество строк), указать ширину поля (cols = количество печатных символов в строке)

<form action="mailto:Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.>

Ваше имя:<br>-Добавить после как форму напишут

<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>

Ваше Коментарий:<br>-Добавить после как форму напишут

<textarea name="comments"></textarea> потом <textarea rows=7 cols=40 name="comments">
</form>

 Кнопки

<form action="mailto:Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. autocomplete="off" (автозаполнение формы)>


Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20" required (обязательное поле, сделать после кнопки)><br><br>
Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br>
<input type=submit>   <input type=submit> Отправить <input type=reset> сбросить value="ОК" добавить свое описание
</form>

 

Итоговая форма

Итоговые вопросы

Значение width="100" и width="100%" одно и тоже? (нет)

 

Заполнить пропуски так, чтобы получился заголовок  h1  содержащий текст "Мой первый сайт", за которым следует тег  h2 c   текстом "образец вэб страницы."

< >мой первый сайт</ >  h1

< >образец вэб страницы</ > h2

 

Сколько всего уровней заголовков <h> от 1 - 6

 

Заполните пропуски так, что бы сделать параграф текста жирным шрифтом с помощью тега <b>

< >< >я изучаю html </ >< > p b

 

Каким тегом определяется название страницы, которое будет отображаться в заголовке окна браузера - title

 

Сделать из текста "первый параграф" Коментарии

<!--Первый парграф-->

 

Заполните пропуски так, чтобы изображение tree.jpg было высотой 200 px и шириной 500px

__ __="tree.jpg" ___="200px"  __="__">

img src height  width

 

Сделать пронумерованный список

<__> ol

<li>spisok</li>

<li>spisok</li>

 <__> /ol

HTML5

HTML5- новая версия html, в html5 было добавленно много нового, поэтому новые возможности которые были доступны только благодаря внешним плагинам таким как adobe flash, стали доступны с помощью обычных разметочных тегов. 

Категории моделей контента.

В HTML элементы, как правило, были двух моделей, либо блочные, либо строчные. В HTML5 7 моделей контента.

  • Метаданные
  • Встроенный контент
  • Интерактивный контент
  • Заголовочный контент
  • Фразообразующий контент
  • Потоковый контент
  • Секционирующий контент

Элемент прогресс

<body>
Статус <progress min="0" max="100" value="65"></progress>
</body>

Перетаскивание

<body>

<style>
.drag {
width: 200px;
height: 200px;
background: blue;
display: inline-block;
margin-right: 10px;
}
#boxB{
margin-right: 0px;
}
#big {
width: 415px;
height: 400px;
background: red;
margin: 20px auto;
}
section {
width: 415px;
height: 200px;
background:gray;
margin: 20px auto;
}
</style>

<h1>Перетащите синие квадраты в красный</h1>

<div id="big" ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)"></div>

<section id="section" ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
<div class="drag" id="boxA" draggable="true" ondragstart="return dragStart(event)"></div>
<div class="drag" id="boxB" draggable="true" ondragstart="return dragStart(event)"></div>
</section>

<script>
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target, 100, 100);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
event.preventDefault();
}
function dragDrop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.stopPropagation();
return false;
}
</script>
</body>

 

События Drag and drop

На каждом шаге выполнения операции перетаскивания активируются разные события, таким образом браузер знает какой именно JavaScript код выполнять, события следующие:

dragStart: срабатывает, когда пользователь начинает перетаскивать объект.
dragEnter: срабатывает, когда перетаскиваемый объект попадает в целевую зону.
dragOver: срабатывает, когда курсор оказывается поверх элемента во время перетаскивания.
dragLeave: срабатывает, когда курсор оказывается вне элемента во время перетаскивания.
drag: срабатывает при движении мыши во время перетаскивания.
drop: срабатывает, когда объект отпустили в целевой позиции (происходит drop).
dragEnd: срабатывает, когда пользователь отпускает перетаскиваемый объект.
Все эти события помогают осуществлять полный контроль вашего Drag&Drop интерфейса.

Объект dataTransfer

Вся магия происходит здесь, этот объект содержит всю информацию о перетаскивании. Основные свойства и методы объекта:

dataTransfer.effectAllowed=value: возвращает тип действия, допустимые значения: none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized.
dataTransfer.setData(format, data): добавляет переданные данные и их формат.
dataTransfer.clearData( format ): удаляет все данные заданного формата.
dataTransfer.setDragImage(element, x, y): устанавливает изображение, которое вы хотите перетаскивать и положение курсора (0, 0 — верхний левый угол).
data = dataTransfer.getData(format): возвращает данные, соответствующие формату.

Анимация фигур

Анимация в svg графике создается с помощью элемента <animate>

<body>
<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="3">
</rect>
</svg>
</body>

attributeName-указывает, к какому атрибуту будет применяться анимация

from-назначает стартовое значение атрибута

to-конечное значение атрибута

dur-назначает длительность анимации

fill-указывает, должно ли вернуться значение атрибута к своему первоначальному значению, после завершения анимации (remove-сбрасывает значение,freeze-сохраняет значение)

repeatCount-количество повторов (indefinite-бесконечное кол-во повторов)

 

 

Видео "Учим HTML за час"

 

Instagram ВКонтакте

Behance Youtube

fl.ru Freelance.ru

Карта сайта Яндекс.Метрика Рейтинг@Mail.ru