Введение
Языки HTML и CSS предназначены для верстки сайтов. Верстка - это размещение элементов сайта по нужным местам. Язык HTML - это основа web сайтов, с его помощью создается каркас страницы, которую вы видите в браузере.
Если сравнивать страницу сайта и обычную бумажную книгу, то на сайте, как и в книге, есть абзацы и заголовки. Заголовки, абзацы и другие блоки можно выделить и на странице сайта. Это делается с помощью HTML тегов.
HTML теги - это специальные команды для браузера. Они говорят ему, что, к примеру, следует считать заголовком страницы, а что абзацем.
Теги строятся по такому принципу: уголок <, потом имя тега, а потом уголок >. Имя тега может состоять из английских букв и цифр. Примеры тегов:
<h1> <p> <b>
Теги обычно пишутся парами - открывающий тег и соответствующий ему закрывающий<>...</>. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка < стоит слеш / <.../>.Все, что попадает между открывающим и закрывающим тегами ..., подпадает под воздействие нашего тега.
В тегах также могут размещаться атрибуты - специальные команды, которые расширяют действие тега. Атрибуты размещаются внутри открывающего тега в таком формате:
<teg attribute1="value1" attribute2="value2"></teg>
Кавычки могут быть любыми - одинарными или двойными, допустимо их вообще не ставить, если значение атрибута состоит из одного слова (но это не желательно).
HTML тегам можно менять стили: цвета, размеры, шрифты, фон, а также позицию на экране. Для этого используется язык CSS, который расширяет возможности языка HTML.
Получается, что с помощью HTML тегов создается структура сайта, а с помощью CSS стилей эта структура украшается и размещается по нужным местам - ВЁРСТКА.
Основная структура страницы HTML
Страница сайта - это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег html, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег head для служебного содержимого страницы и тег body - для основного текста, который и виден на экране браузера.
В служебное содержимое, которое располагается внутри тега head, входит много различных вещей, но пока нам нужны только две из них. Это тег title, задающий название страницы, которое будет видно во вкладке браузера, и тег meta, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8).
Кроме того, перед тегом html обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так:
<!DOCTYPE html>
Итак, давайте посмотрим на основную структуру страницы:
Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).
Абзац создается с помощью тега p таким образом:
Создайте файл в любом удобном месте с расширением .html, например MyTest.html и откройте его в любом текстовом редакторе. В данном случае это Notepad++.
Исполним его в браузере
Далее я для простоты не буду приводить структуру всей страницы. Считайте, что мы всегда работаем внутри тега body, если не указано иное.
Кроме абзацев важное значение на странице имеют заголовки. Заголовки создаются с помощью тегов h1, h2, h3, h4, h5, h6. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 - название блоков страницы, в h3 - название подблоков и так далее.
Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Для примера сделаем заголовки всех уровней:
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6> скопируйте. попробуйте
Заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст - достаточно взять его в тег b. Смотрите пример: Жирным будет bold
<p> This is regular text and this is <b>bold</b> text. </p>
Кроме жирного можно сделать также и курсив с помощью тега i:
<p> This is regular text, and this is <i>italic</i> text. </p>
Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам.
Списки, созданные через тег ul, называются неупорядоченными. Такое название им дано потому, что возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка). Внутри списка обязательно должны идти теги li. Тег ul задает сам список, а в теги li следует размещать пункты списка (то есть одному li соответствует один маркер списка). Смотрите пример:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Помимо неупорядоченных, существуют еще и упорядоченные списки. В них каждый пункт вместо маркеров-точек обозначен маркерами-цифрами. Упорядоченные списки создаются с помощью тега ol, а пункты таких списков - тегами li.
Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место - и нумерация сама перестроится (то есть вам не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы вы расставляли ее вручную).
<ol>
<li>text</li> <li>text</li> <li>text</li> <li>text</li> <li>text</li>
</ol>
Работа со ссылками в HTML
Сейчас мы будем разбираться со ссылками. Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другую. Если бы их не было - интернет был бы просто набором страниц, никак не связанных друг с другом.
Ссылка создается с помощью тега a. В этом теге обязательно должен быть атрибут href, в который следует записывать адрес той страницы, на которую ведет ссылка.
Давайте для примера сделаем ссылку на гугл. Для этого нужно открыть этот сайт в браузере, скопировать адрес страницы из адресной строки и вставить в атрибут href ссылки:
<a href="https://www.google.com">в гугл</a>
Пусть теперь вы хотите связать ссылками страницы своего сайта. В таком случае копировать их адреса из адресной строки нельзя. Для страниц своего сайта следует практиковать такой подход, как на примере. Пусть в корневой папке вашего сайта расположен файл index.html и файл page.html. Свяжем эти файлы ссылками. Для этого в атрибуте href ссылок следует просто написать имена этих файлов (с их расширением). Давайте сделаем это.
На странице index.html сделаем ссылку на страницу page.html:
<h1>Index</h1> <a href="page.html">link on page</a>
А на странице page.html сделаем ссылку на страницу index.html:
<h1>Page</h1> <a href="index.html">link on index</a>
Работа с изображениями в HTML
Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег img, имеющий обязательный атрибут src, в котором следует задавать путь к файлу картинки. При этом сам тег не требует закрывающего тега.
<img src="kolobok.png">
По умолчанию картинки отображаются своим реальным размером. Например, та картинка со смайлом, которую мы выводили выше, имеет реальный размер 300 на 300 пикселей и такой же размер картинки мы и видим в браузере. При желании можно изменить размер картинки, задав ей ширину. Это делается с помощью атрибута width.
Давайте для примера зададим нашей картинке ширину 100 пикселей. Для этого значением атрибута width укажем число 100, вот так:
<img src="kolobok.png" width="100">
Можно подумать, что следующая: ширина 100 пикселей, как мы задали, и реальная высота 300, так как мы ее не задавали. На самом деле, это будет не так. Ширина действительно будет 100 пикселей, а вот высота подстроится так, чтобы пропорции картинки не исказились, то есть также станет 100 пикселей.
Давайте запустим и убедимся в этом:
Можно вместо атрибута width написать атрибут height - в этом случае уже высота будет задана как 100 пикселей, а ширина подстроится под нее так, чтобы не исказить пропорции:
<img src="kolobok.png" height="100">
Если задать одновременно и ширину, и высоту, то картинку можно исказить. Например, если задать ширину 300 пикселей, а высоту 100px, то наш смайл станет растянутым по ширине:
<img src="kolobok.png" width="300" height="100">
Работа с таблицами в HTML
Сейчас мы научимся делать таблицы в HTML. Я думаю, вы представляете, что такое таблица в обычной жизни - это набор строк и столбцов, на пересечении которых находятся ячейки.
В HTML таблицы создаются по похожему принципу. Там тоже есть столбцы и строки с ячейками, однако HTML код таблиц при первом взгляде может показаться непривычным: таблицы создаются по рядам - сначала первый ряд, потом второй и так далее.
Код таблицы имеет жесткую структуру: главным является тег table, внутри которого должны лежать теги tr, которые создают ряды таблицы, а внутри них - теги td, которые создают ячейки. Тег table может иметь атрибут border, который задает границу таблице и ее ячейкам.
Давайте для примера сделаем таблицу с тремя рядами и тремя ячейками в каждом ряду:
<table border="3">
<!--Это будет первый ряд таблицы:-->
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<!--Это будет второй ряд таблицы:-->
<tr>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
<!--Это будет третий ряд таблицы:-->
<tr>
<td>cell 7</td>
<td>cell 8</td>
<td>cell 9</td>
</tr>
</table>
С помощью атрибутов width и height можно задать ширину и высоту таблице. Зададим, например, нашей таблице ширину в 300 пикселей, а высоту - в 200:
<table border="3" width="300" height="200">
Кроме тегов td существуют также теги th, которые также создают ячейки. Но это уже будут не обычные ячейки, а ячейки-заголовки, которые указывают, что находится в данном столбце (или строке) таблицы. По умолчанию текст в таких ячейках th будет жирный и расположен по центру.
Давайте посмотрим на примере. Пусть у нас есть вот такая таблица с работниками и их зарплатой:
<table border="1" width="300">
<tr>
<th>имя</th>
<th>фамилия</th>
<th>оплата</th>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>200$</td>
</tr>
<tr>
<td>Nick</td>
<td>Mayers</td>
<td>300$</td>
</tr>
<tr>
<td>Alex</td>
<td>Jonson</td>
<td>400$</td>
</tr>
</table>
В КАТАЛОГ