Шаг 2: HTML, XML

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

Вся разметка состоит из тегов. Тег — это имя элемента сайта обрамленные в «<» и «>» скобки. Теги можно писать и заглавными и строчными буквами (регистронезависимые). Большая часть тегов парная, т.е. должна открываться <head> и закрываться </head>, закрытие тега обозначается символом » / » перед именем. Также существует теги которые закрывать не нужно <hr> или <hr />. Тег управляется атрибутами. Атрибут обычно устанавливается связкой ключ=»значение», но некоторые бывают просто значение. Пример в поле ввода текста (например почтового адреса) атрибут id устанавливает уникальные идетнификатор тега, а disabled не позволяет вводить значение, блокирует.

<input   id = " email "   disabled />

 Вот базовая структура, html документа.

<!DOCTYPE html>
<HTML>
<HEAD> ... </HEAD>
<BODY> ... </BODY>
</HTML>

Doctype — предназначен для указания типа текущего документа. Это сделано для того, чтобы браузер понимал как интерпретировать страницу.

Тег <html> — содержит в себе весь код страницы.

Тег <head> — не отображается напрямую в сайте (за исключение тега <title>).

Содержи в себе дополнительные теги:

<title> — имя сайта, отображается на вкладке окна браузера, рядом с иконкой сайта. Например когда у вас открыто несколько страниц вы легко можете отличить их.

<meta> — мета теги, которые используют поисковые системы при индексации сайта. Содержит в себе связку ключ=значение. Например кодировка сайта <meta charset=»utf-8″>.

<link> — Устанавливает связь с внешним документом например файл со стилями или шрифты. Например подключим css файл <link rel=»stylesheet» type=»text/css» href=» путь к файлу «>.

<style> — содержит в себе css код.

<script> — содержит в себе js код. Так же подключается js файл <script type=»text/javascript» src=» путь к файлу «></script>.

Тег <body> — тело страницы, — это то, что будет непосредственно видеть пользователь. Тут также можно подключать css и js файлы и вставлять код, как и в <head>. У всех этих тегов уже установлены некоторые стили, например отступы, выравнивание, размер шрифта и т.д. Вот ряд общепринятых тегов:

<div></div> — блок, с переносом на следующую строку, на них строятся все сайты.

<p></p> — абзац div с отступом внизу,

<span></span> — блок строчный, без переноса на следующую строку

<a href=»/test.html» target=»_blank»></a> — ссылка, имеет атрибуты:

  • href — адрес страницы, полный или относительный;
  • target необязательный, если установить ему значение _blank, то страница откроется в новой вкладке.

<img src=»/url/img.png»> — изображение, имеет атрибуты:

  • src — адрес изображения;
  • alt — альтернативный текст для изображения, поисковики индексируют по этому тегу изображение;
  • width и height — ширина и высота изображения, может быть указана в пикселях (px) или процентах (%)

<video></video> — для вставки видео,

<iframe></iframe> —  вставляет на текущую страницу другой ресурс, например другую целую страницу сайта, или флеш объект, или код с ютюба. 

<br /> — перенос на следующую строку

<hr /> — горизонтальная черта

<b></b> — жирный текст

<s></s> — зачеркнутый

<u></u> — подчеркнутый

и т.д.

Пример:

<div>
	<p> Абзац номер 1 </p>
	<p> Абзац номер 2 </p>
	<hr/>
	<img src="/index.jpg">
	<br>
	<img src="/index2.jpg">
</div>

Таблицы моноблочная конструкция обрамленная тегом <table></table>. Включает в себя:

<table></table> —  блок формы, имеет атрибуты:

  • border — толщина рамки
  • cellpadding — отступы внутри ячейки от рамки до содержимого
  • cellspacing — отступы между ячейками

<thead></thead> — шапка таблицы. можно обойтись и без нее

<tbody></tbody> — тело таблицы. можно обойтись и без нее, писать конструкцию таблицы сразу внутри <table> … </table>.

<tr></tr> — в этих тегах содержится строка таблицы, таблица рисуется построчно

<td></td> — это колонка, а точнее ячейка в колонке, имеет атрибуты:

  • colspan  — число, сколько ячеек объединены в текущую. т.е. объединение со следующими за этой ячейкой по горизонтали
  • rowspan — объединение со следующими за этой ячейкой по вертикали

<th></th> — тоже самое что и td только жирным шрифтом

Таблицу легко представить в виде excel где <tr> — это строка например » 1 «, ну а <td> это ячейка в этой строке например » A1 «. Вот пример таблички с объединенными ячейками:

<table border=1>
	<thead>
		<tr>
			<th colspan=3> Автомобили</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th> Регион </th>
			<th> Номер </th>
			<th> Марка </th>
		</tr>
		<tr>
			<td rowspan="3"> 32 </td>
			<td> а 125 аа </td>
			<td> Ауди </td>
		</tr>
		<tr>
			<td> о 001 оо </td>
			<td> БМВ </td>
		</tr>
		<tr>
			<td colspan=2> Запись удалена </td>
		</tr>
		<tr>
			<td rowspan="2"> 77 </td>
			<td> с 504 нв </td>
			<td> БМВ </td>
		</tr>
		<tr>
			<td colspan=2> Запись удалена </td>
		</tr>
</tbody>
</table>

Формы моноблочная конструкция используется для отправки данных на сервер и обрамляется тегом <form></form>. При клике на кнопку отправки формы (submit), страница перезагружается, отправляет данные формы на сервер и получает ответ. Данные формы сохранены в запросе, поэтому если нажать кнопку браузера обновить, то браузер повторно отправит данные на сервер, при этом предыдущие, чтобы отправить новые данные следует нажать на кнопку формы. Включает в себя блоки:

<form></form> —  блок формы, имеет атрибуты:

  • action — адрес отправки формы;
  • method — метод отправки формы;
  • post или get (подробней в php).

<input type=» text » value=» empty@site.ru » name=» email » /> — поле ввода в одну строку, такие мы встречаем очень часто, например ввод логина и пароля. Имеет атрибуты:

  • type — указывает тип например если ввести:
    • значение password то вводимое содержимое строки станет скрыто жирными точками, 
    • значение submit превратит поле ввода в кнопку отправки формы на сервер, 
    • значение hidden скроет ячейку от глаз, но будет передавать параметры, 
    • значение checkbox кнопки с галочками, можно выбрать несколько, атрибут name должны быть разные, 
    • значение radio переключаемые свойства, одну кнопку нажимаешь, другая сбрасывается, атрибут name должен быть одинаковым;
  • value — значение по умолчанию, которое будет подставлено в строку или в название кнопки; 
  • name — имя переменной которое будет передано post или get параметром.
  • checked — если поле radio или checkbox то установит данное поле выбранным, в случае с radio если checked несколько, то будет выбрано последнее.

<textarea>…</textarea> — многострочная область ввода, имеет атрибуты:

  • cols — ширина поля в символах;
  • rows — высота поля в символах;
  • readonly — поле нельзя менять, только выделять пролистывать;
  • disabled — блокирует доступ и изменение элемента.

<button></button> — кнопка

Создадим форму со всеми элементами, обратите внимание поле hidden не отображается, на экране, поле radio с одинаковым атрибутом name и эту форму отправит кнопка submit:

<form action=" /url " method=" post ">
	<input type="text" name="mail" value="Введите адрес почты">
	<input type="password" name="pass" value="Пароль">
	<input type="hidden" name="id" value="Скрытый идентификатор">
	<input type="checkbox" name="check1" value="Выбрать доп функцию №1 включена" checked>
	<input type="checkbox" name="check2" value="Выбрать доп функцию №2" checked>
	<input type="radio" name="radioname" value="Переключалка №1">
	<input type="radio" name="radioname" value="Переключалка №2 включена" checked>
	<textarea> Многострочное поле ввода </textarea>
	<input type="submit" name="enter" value="Кнопка отправить">
	<button> Простая кнопка, ничего не отправляет </button>
</form>

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

class — имена css стилей через пробел

id — уникальный идентификатор

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

<mytag> ... </mytag>
<div data-id=" 1 "> ... </div>

XML документ схожий по структуре с HTML, значение обрамляется тегами, теги содержат атрибуты, тиги можно «заворачивать» (вкладывать) в теги. Его основная задача хранить и передать параметры. Excel таблицы хранятся в таком формате. Вот пример создание переменной » x » по сравнению с js:

js: 

var x = " Переменная ";
или
var x = { 'y': " Объект " }; // достать до y можно так console.log( x.y );

xml: 

<x> Переменная </x>
или
<x>
    <y> Вложенная переменная </y>
</x>

Объявление типа документа выглядит так:

<?xml version=1.0"?>