Начальные данные по HTML
Для создания сайтов используют:1. Html – определяет расположение элементов на странице
2. РНР – объектно-ориентированный язык, работает на сервере
3. JavaScript - объектно-ориентированный язык, работает у пользователей на компе, смартфонах и прочем, через чего они выходят в интернет
4. MySQL – одна из баз данных, используемых для хранения разных данных на сервере, де пароли, логины и прочие важные и не очень данные, типа переписки в контакте, хотя в контакте используется другая база данных. Также предполагается свой язык для ввода/вывода данных из баз данных.
Разные браузеры имеют свойство немного по разному отображать сайты.
Есть отдельные библиотеки и фрейворки на языках программирования облегчающих жизнь разработчика, для JavaScript это JQuery, которая обеспечивает разные решения для единообразного отражения разных программных решений на разных браузерах. Также есть WEBGL – это больше предназначено для графических решений (тоже связано с JavaScript).
Структура html-страницы
<!DOCTYPE html> // объявление о том, что документ HTML5
<html lang="ru-RU"> // объявление начала html-страницы
<head> // объявление служебной информации и присоединяемых файлов
<meta charset="utf-8" /> // объявление кодировки страницы
<meta name="description" content="Описание сайта">
<meta name="Keywords" content="Ключевые слова">
<link href="путь и название css-файла " rel="stylesheet" type="text/css" /> //присоединений файл стилей css
<title>...</title> // заголовок страницы (отображается как название страницы-вкладки)
<link rel="shortcut icon" href="favicon.ico" /> // фавикон или картинка на вкладке браузера
<script>...</script> // скрипт (программа) на JavaScript
<script src=" путь и название файла со скриптом"></script> // внешний скрипт (программа) на JavaScript
<style>...</style> // стили оформления
</head> // конец объявления служебной информации и присоединяемых файлов
<body> // начало тела, в нем содержится контент видимый пользователю
Здесь располагается основной контент (информация) сайта. Содержит статьи, фотографии, видео- и аудиозаписи. Контент сайта заключается в теги HTML.
<header>...</header> // заголовок разделов
<nav>...</nav> // набор ссылки при навигации
<section>...</section> // основная секция
<article>...</article> // статья
<aside>...</aside> // боковая колонка или сноска
<footer>...</footer> // нижнюю часть раздела
</body> // конец видимого для пользователя контента
</html> // объявление конца html-страницы
Теги HTML
<h1> Заголовок 1го уровня</h1> они от 1-го и до 6, дает меньший шрифт с увеличением цифры, то есть h1 дает самый большой, а h6 самый маленький заголовок
<p>абзац</p>
<br /> перенос
<img src = ”путь к файлу” /> вставка изображения на странице
<a href = ”путь к файлу”>название ссылки</a> ссылка на файл нужна для перехода между страницами сайта, или ссылки на файл для загрузки или воспроизведения.
<div>что-то</div> блок, используется для размещения или html-кода или контента или того и другого одновременно, используется для позиционирования чего-то на сайте при его создании
Списки:
Обычный список с точкой:
<ul>
<li>элемент списка</li>
</ul>
Нумерованный список:
<ol>
<li>элемент списка</li>
</ol>
Список в списке:
<ul>
<li>элемент списка</li>
<li>элемент списка</li>
<ul>
<li>элемент списка</li>
</ul>
<li>элемент списка</li>
</ul>
3 уровня списка:
<ul>
<li>элемент списка1</li>
<li>элемент списка1</li>
<ul>
<li>элемент списка2</li>
<ul>
<li>элемент списка3</li>
</ul>
</ul>
<li>элемент списка1</li>
</ul>
Таблица:
Заголовки и названия
<table width="500" border="1">
<tbody>
<tr>
<td>Тег</td>
<td>Значение</td>
</tr>
<tr>
<td><h1>...</h1></td>
<td>Заголовок 1</td>
</tr>
<tr>
<td><h2>...</h2></td>
<td>Заголовок 2</td>
</tr>
<tr>
<td><h3>...</h3></td>
<td>Заголовок 3</td>
</tr>
<tr>
<td><h4>...</h4></td>
<td>Заголовок 4</td>
</tr>
<tr>
<td><h5>...</h5></td>
<td>Заголовок 5</td>
</tr>
<tr>
<td><h6>...</h6></td>
<td>Заголовок 6</td>
</tr>
</tbody>
</table>
Создание форм
<form action="URL">
<p><input type="text" name="" value="" /></p> для ввода одного значения наподобие имени
<textarea name="" id="" rows="3" cols="40"></textarea> // ввод комментариев
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</form>
rows Высота поля в строках текста.
cols Ширина поля в символах
Соответственно в примере наверху - 3 означает высоту в три строки и ширину в 40 символов.
Иногда форму и таблицу объединяют
<table width="500" border="1">
<tbody>
<tr>
<td>Введите имя</td>
<td>
<form action="URL">
<p><input type="text" name="" value="" /></p>
</td>
</tr>
<tr>
<tdВведите комментарий</td>
<td><textarea name="" id="" rows="3" cols="40"></textarea></td>
</tr>
</tbody>
</table>
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</form>