HTML, CSS

Протокол - это набор правил, которым следуют при общении программы. Так в веб службе клиент и сервер общаются по протоколу http. Когда мы вводим в браузере адрес веб ресурса, браузер (клиент) отправляет запрос по протоколу http к программе, веб сервер. Ответ сервера может содержать, например, текст, размеченный при помощи языка html. Браузер интерпретирует ответ и отображает.

HTML

html - это язык разметки. С его помощью вы указываете, где у вас заголовок, где обычный текст, где список... Для разметки используются элементы языка html. Создадим страницу, на которой написано привет мир. 

	
	<!doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Привет</title>
		</head>
		<body>
			<p>Привет, мир!</p>
		</body>
	</html>

Элемент title содержит заголовок, он отображается на вкладке браузера. В нашем примере элемент meta имеет атрибут charset, сообщающий, что кодировка текста utf-8. Внутри body вы размещаете текст страницы. Заголовки выделяете при помощи элементов h1, h2, h3 ... h6. Например, заголовок этой страницы был создан так:

	
	<h2>HTML</h2>

Абзацы текста выделяете при помощи элемента p, как в примере с приветствием.

Ниже - пример создания списка.

	
	<ol>
		<li>элемент списка</li>
		<li>другой элемет</li>
	</ol>

Вот результат.

  1. элемент списка
  2. другой элемет

Гиперссылка выделяется при помощи элемента a. Например, 

	
	Я учусь в <a href= "https://www.tspu.edu.ru">ТГПУ</a>.

Результат:

Я учусь в ТГПУ.

Элемент img используют для вставки изображения. Например

	
	<img src="file.png">

Атрибут src - для указания имени файла изображения. Для создания таблиц - элемент table. Если вы хотите добавить к рисунку, таблице или листингу кода подпись, то их надо поместить в контейнер figure. Например,

	
	<figure>
	<figcaption>Листинг 1. Пример программмы на python.</figcaption>
	<pre><code>
	print("Hello, World!")
	</code></pre>
	</figure>
Результат:
Листинг 1. Пример программмы на python.

	print("Hello, World!")

Элементы div и span используются для группировки. nav элементом вы выделяете раздел, содержащий навигационные ссылки.

Для получения информации от пользователя, удобно разместить элементы ввода на форме.


	<form>
		<label for="name">Имя</label>
		<input type="text" id="name">
		<input type="button" value="find">
	</form>

Результат:

Об этих и других элементах html удобно смотреть на https://www.w3.org/TR/html51/

CSS