Курс по HTML и CSS Урок 1

«Курс по HTML и CSS» Урок №1. Введение. Азы HTML и структура HTML-документа.

Привет, меня зовут Антон и я приветствую тебя на своем блоге. И с этого поста я начинаю свой БЕСПЛАТНЫЙ курс по HTML и CSS. Он будет выходить в текстовом формате и в виде видео уроков. Советую проходить сразу в обоих форматах, так ты точно все поймешь и ничего не упустишь. Также очень удобно пользоватся текстовым форматом, как методичкой при выполнении практических заданий и, как справочником в дальнейшей работе.

Что ты будешь уметь после прохождения курса.

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

Кому полезен этот курс

Данный курс будет полезен не только тому, кто в дальнейшем хочет заниматься веб-разработкой, но и веб-дизайнерам, seo-специалистам, интернет-маркетологам, блогерам и всем тем, кто сталкивается в своей работе с сайтами.

План курса

  1. В первой части мы изучим язык гипертекстовой разметки – HTML. Как создается структура документов (страниц сайта) и как правильно размещать на них контент.
  2. Во второй части мы изучим CSS с помощью которого мы научимся стилизовать отображение структуры и контента HTML-документа в браузере. Проще говоря научимся наводить красоту.
  3. В третьей части мы создадим свой первый сайт, используя только HTML и CSS.

Ну все хватит отступлений, давай скорее начинать!

Азы HTML

До начала изучения я покажу тебе пример небольшого HTML-кода. Вот он:

<!DOCTYPE html>
<html lang="RU">

<head>
	<meta charset="UTF-8">
	<title>Продажа лодок</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<header>
		<div class="logo">
			<img src="logo.jpg" alt="Логотип сайта">
		</div>
		<nav class="main-menu">
			<ul>
				<li><a href="/">Главная</a></li>
				<li><a href="/uslugi">Услуги</a></li>
				<li><a href="/contacts">Контакты</a></li>
			</ul>
		</nav>
		<div class="contacts">
			<ul>
				<li><a href="tel:+780000000">+7 (800) 000-00-00</a></li>
				<li><a href="mailto:mail@ya.ru">mail@ya.ru</a></li>
			</ul>
		</div>
	</header>
	<main>
		<h1>Продажа лодок</h1>
		<p>Мы продаем крутые лодки, которые не только умеют плавать, но и летают.</p>
	</main>
	<footer>
		<span>Copyright</span>
	</footer>
</body>

</html>

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

Элементы и теги HTML

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

Парные теги состоят из двух составляющих – открывающего тега и закрывающего. Каждый тег начинается с символа < , а заканчивается символом > . Например, <p>.

У закрывающего тега используется символ /. Например, закрывающий тег </p>.

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

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

Одиночные теги не обозначают границы элементов, а являются сами элементами. Например, тег <img> является изображением.

Атрибуты тегов HTML

У тега есть атрибуты, которые задают параметры для тега. Атрибут состоит из имени и значения. Атрибут задается в открывающем теге. Рассмотрим тег изображения:

<img src="img/logo.png" alt="Логотип компании" title="Это наш логотип">

У этого тега есть три атрибута:

  • src="img/logo.png" – имя атрибута src, а его значение img/logo.png;
  • alt="Логотип компании" – имя атрибута alt, а его значение Логотип компании;
  • title="Это наш логотип" – имя атрибута title, а его значение Это наш логотип.

Из этого примера понятно, что атрибут имеет такую структуру: Имя="Значение" и все они разделяются между собой пробелами.

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

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

Базовая структура HTML-документа выглядит так:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Заголовок страницы</title>
	<meta name="description" content="Описание страницы">
	<meta name="keywords" content="разные, ключевые, слова">
</head>

<body>
</body>

</html>

Каждая страница сайта имеет такую структуру, разберем подробнее каждый ее элемент.

<!DOCTYPE html> — этот тег является декларацией, которая сообщает браузеру версию HTML и помогает отобразить страницу правильно. В версии HTML 4.01 нужно было писать <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, в новой версии HTML запись стала более короткой.

<html></html> — эта пара тегов сообщает браузеру, что внутри них находится код, написанный на HTML. И он оборачивает все содержимое страницы, кроме <!DOCTYPE html>.

<head></head> — в тег хеад помещается служебные параметры, которые нужно сообщить браузеру, но сами они на страницы не отображаются.

<body></body>  — в тег боди помещается содержимое, которое будет отображаться в окне браузера. То есть это контейнер, который оборачивает весь видимый контент.

<meta charset="UTF-8"> — этот параметр сообщает браузеру кодировку документа, в данном случае это UTF-8. (Для корректного отображения символов, советую всегда использовать ее)

<title></title> — тег тайтл задает название документа и отображается во вкладке браузера, а так же в выдаче поисковой системы. (Скриншот №1) Этот тег очень важен для SEO оптимизации сайта.

title
Скриншот №1

<meta name="description" content="Описание страницы"> — мета-тег discription. В дискрипшине мы описываем содержание данной HTML страницы. Этот тег также является важным для SEO продвижения. Он отображается в выдаче поисковых систем (скриншот №2).

description
Скриншот №2

<meta name="keywords" content="разные, ключевые, слова"> — в тег keywords прописываются ключевые слова, которые отображают суть страницы. В SEO продвижении этот тег давно не имеет веса, но его переспам может негативно повлиять на продвижения сайта.

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

Практическое задание

Создаем первый HTML — документ.

Для начала нужно включить отображение расширений файлов в твоей операционной системе. В Windows это делается так:

  1. Открываем проводник или любую папку на твоем компьютере;
  2. На верху открываем вкладку «Вид»;
  3. И ставим галочку в параметре «Расширения имен файлов».

Подробнее смотрите на скриншоте №3:

включение расширений файлов
Скриншот №3

После чего мы создаем в любой папке текстовый документ (смотри скриншот №4) с именем index.html

Создание файла index.html
Скриншот №4

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

  1. NotePad++ , скачать можно по ссылке: https://notepad-plus-plus.org/
  2. Brackets, качаем по ссылке: http://brackets.io/  (Я работаю чаще всего именно в нем)
  3. Visual Studio Code, качаем по ссылке: https://code.visualstudio.com/

Открываем файл index.html с помощью редактора кода. И набираем базовую структуру HTML-документа. Если ты хочешь действительно практиковаться, как можно раньше, то набирай код вручную, а не копируй его из статьи. Так ты начнешь действительно набирать опыт уже сейчас.

Дальше заполните тег title и мета-теги любыми данными, а так же в тег <body></body> напишите текст: «Мой первый HTML-документ».

Должно выглядеть вот так:

<body>Мой первый HTML-документ</body> и открой файл index.html в браузере. Если ты увидел эту надпись в окне браузера, то ты сделал все правильно. Ура! Ты создал свой первый документ HTML!

Для лучшего ознакомление с темой посмотри видео:

Спасибо, что дочитали урок до конца. В следующем уроке мы погрузимся в теги HTML для оформления текста. Чтобы не пропустить следующие уроки подпишись на обновления блога и на YouTube — канал, тогда ты точно ничего не пропустишь и будешь прогрессировать вместе со мной.

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