HTML (англ. сокр. HyperText Markup Language - язык гипертекстовой разметки)

146.50K

Category:

internet

Лекция №2 HTML, CSS, JavaScript

1. HTML (англ. сокр. HyperText Markup Language - язык гипертекстовой разметки)

2.

HTML и CSS предназначены для верстки сайтов (верстка - это размещение
элементов сайта по нужным местам).
Язык JavaScript нужен для того, чтобы 'оживить' сайт: к примеру, сделать
меняющиеся картинки (слайдер).
Язык HTML - это основа web сайтов, с его помощью создается каркас страницы,
которую отображается в браузере.
Страница HTML состоит из тегов. HTML теги - это специальные команды для
браузера. Теги обычно пишутся парами - открывающий тег и соответствующий ему
закрывающий. Разница между открывающим и закрывающим тегами в том, что в
закрывающем теге после знака < стоит слеш /. Все, что попадает между
открывающим и закрывающим тегами, подпадает под воздействие тега. Бывают теги,
которые не нужно закрывать, например, <br> или <img>.
В тегах также могут размещаться атрибуты - специальные команды, которые
расширяют действие тега.
Атрибуты размещаются внутри открывающего тега в таком формате: <тег
атрибут1="значение" атрибут2="значение">.
Кавычки могут быть любыми - одинарными или двойными, допустимо их вообще их
не ставить, если значение атрибута состоит из одного слова (но это не желательно).
CSS расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в
общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру
сайта.
Комментарии можно задать в виде: <!– комментарии -->

3.

Структура простейшей страницы
<!DOCTYPE html> 
<html> <!– начало html страницы -->
<head> 
<meta charset="utf-8"> <!– задаем кодировку -->
<title>Это заголовок тайтл</title>
</head>
<body> <!– тело html-документа -->
Это основное содержимое страницы.
</body>
</html>
Одним из основных элементов страницы являются абзацы.
Абзац создается с помощью тега <p> таким образом:
<p>
1 абзац.
</p>
<p>
2 абзац.
</p>

4.

Кроме абзацев важное значение на странице имеют заголовки. Заголовки
создаются с помощью тегов <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Все заголовки по умолчанию жирные и имеют разный размер
<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
Сделать жирным можно и обычный текст с помощью тега <b>
<p>
Это обычный текст, а это <b>жирный</b> текст.
</p>
Аналогично курсив с помощью тега <i>
В том месте, где должен быть разрыв строки, следует написать тег <br>.

5.

Наряду с абзацами и заголовками существует еще один важный элемент
страницы - это списки.
неупорядоченные списки(маркированные списки)
<body>
<ul>
<li>Первый пункт списка.</li>
<li>Второй пункт списка.</li>
<li>Третий пункт списка.</li>
</ul>
</body>
Изменить маркер можно с помощью <ul type="disc">
упорядоченные списки(нумерованные списки)
<body>
<ol>
<li>Первый пункт списка.</li>
<li>Второй пункт списка.</li>
<li>Третий пункт списка.</li>
</ol>
</body>
Изменить тип номера можно с помощью <ol type="I" start="4>
Можно менять тип номера и маркера через стили. Это более универсальный
способ

6.

Ссылки, которые позволяют переходить с одной страницы сайта на другу.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<a href="http://www.grsu.by">Ссылка на сайт www.grsu.by</a>
</body>
</html>
Ссылки бывают абсолютные и относительные
<a href=“../index.html">Отсносительная ссылка</a>

7.

Разместить изображение на странице
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<img src=“image1.png">
</body>
</html>
Ссылкой может быть не только текст, но и картинка - для этого достаточно
тег <img> вложить в тег<a>
<body> <a href=“www.grsu.by">
<img src=“image1.png">
</a>
</body>

8.

Таблица имеет жесткую структуру: главным является тег <table>, внутри которого
должны лежать теги <tr>, которые создают ряды (строки) таблицы, а внутри них теги <td>, которые создают ячейки.
<table border="1">

<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr> 
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr> 
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</table>

9.

Кроме тегов td существуют также теги <th>, которые также создают ячейки. Но
это уже будут не обычные ячейки, а ячейки-заголовки, которые указывают, что
находится в данном столбце (или строке) таблицы.
Между ячейками есть некоторое расстояние, из-за которого видно то, что каждая
ячейка имеет свою границу. Это расстояние регулируется атрибутом cellspacing.
Атрибут cellpadding задает отступ между текстом и границей ячейки.
Существуют также атрибуты width и height, которые позволяют задать
таблице ширину и высот у таблицы соответственно.
Столбцы объединяются с помощью атрибута colspan. При этом на самом деле
этот атрибут не объединяет столбцы, а расширяет ячейку по горизонтали.
Кроме атрибута colspan существует также аналогичный атрибут rowspan,
который расширяет ячейки по вертикали.

10.

CSS(англ. Cascading Style
Sheets — каскадные таблицы
стилей)
CSS свойства и задают цвет, размер шрифта. Их следует писать в таком
формате: имя свойства, потом двоеточие, потом значение этого свойства
(например, свойство - это цвет, а "красный" - это значение). Потом нужно
поставить точку с запятой и можно писать следующее свойство.
<p> Абзац с текстом. </p>
p{
color: red;
font-size: 20pt;
}

11.

Способ 1. Отдельный CSS файл
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p> Это абзац с текстом. </p>
</body>
</html>

12.

Способ 2. CSS внутри тега style
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p> Это абзац с текстом. </p>
</body>
</html>

13.

Способ 3. CSS внутри атрибута style
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<p style="color: red; font-weight: bold;"> Это абзац с текстом. </p>
</body>
</html>
Свойство color позволяет задать цвет текста. Цвет можно задавать следующими
способами: английским словом, через решетку #, через rgb
color: red;
color: rgb(255, 255, 0);
color: #FF0000;

14.

Можно задать ширину и высоту, а также границу, чтобы можно было увидеть,
где заканчивается абзац:
p{ width: 300px; height: 100px; border: 1px solid black; }
Свойство text-align позволяет задать выравнивание текста. Текст можно
выравнять по левому краю (значение left), по правому (значение right),
по центру (значение center) и одновременно и по правому, и по левому краю
(значение justify).
p{ text-align: left; width: 300px; }
Свойство font-weight позволяет сделать текст жирным или наоборот - отменить
жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы
сделать текст жирным, следует добавить значение bold, а чтобы отменить
жирность - значение normal.
h3{ font-weight: normal; }
p{ font-weight: bold; }
Свойство font-style позволяет сделать текст курсивным или наоборот - отменить
курсив.
p{ font-style: italic; }

15.

Свойство font-size позволяет задать размер текста. Размер задается
в пикселях (обозначаются px), в пунктах (обозначаются pt),
в процентах (обозначаются %) и с помощью некоторых других единиц
p{ font-size: 20pt; }
Свойство font-family позволяет задать тип шрифта (тип часто
называют семейством шрифта).
p{ font-family: Arial; }
Свойство line-height задает межстрочный интервал.
Межстрочный интервал - это расстояние между линиями текста, то есть белый
промежуток между ними.
p{
font-size: 13px;
line-height: 50px;
}
Существует специальное свойство font
p{ font: 12pt Arial; }
p{ font: italic 12pt/40pt Arial, sans-serif; }
Свойство text-indent позволяет задать красную строку, то есть отступ первой
строки текста (к примеру, в абзаце).
p{ text-indent: 50px; }

16.

Свойство vertical-align позволяет задать выравнивание по вертикали. (в основном
используется для таблиц)
Значение top выравнивает по верхнему краю, значение bottom - по нижнему,
а middle - по центру по вертикали
td{ vertical-align: top; }
Тег div служит контейнером для других тегов. Сам по себе он ничего не делает,
однако в него можно положить много разных тегов, например, абзацев и
заголовков, а затем для всех них одновременноприменить различные CSS свойства.
Выбор элемента по уникальному id
p{ color: red; }
#test{ color: green; }
<p id="test">
Абзац с атрибутом id в значении "test".
</p>
<p>
Обычный абзац с текстом.
</p>
<p>
Обычный абзац с текстом.
</p>

17.

Классы элементов
.test{
color: red;
}
<h2 class="test">
Заголовок h2 с классом test.
</h2>
Бывают такие ситуации, когда разные теги имеют один и тот же класс. К
примеру, у абзацев и заголовков h2 одновременно задан класс test. Может
потребоваться выбрать только абзацы с классом test, не затрагивая
заголовков h2 с этим же классом.
p.test{
color: red;
}
<h2 class="test">
Заголовок h2 с классом test.
</h2>
<p class="test">
Абзац с классом test.
</p>

18.

А сейчас сделаем так, чтобы класс test задавал курсив всем элементам, которым
он дан, и чтобы при этом все заголовки h2 с классом test красились в красный
цвет, а абзацы с этим классом - в зеленый:
.test{ font-style: italic; }
h2.test{ color: red; }
p.test{ color: green; }
<h2 class="test"> Заголовок h2 с классом test. </h2>
<h2 class="test"> Заголовок h2 с классом test. </h2>
<h2 class="test"> Заголовок h2 с классом test. </h2>
<p class="test"> Абзац с классом test. </p>
<p class="test"> Абзац с классом test. </p>
<p class="test"> Абзац с классом test. </p>
<p> Абзац без класса. </p>

English Русский Rules