В этом уроке мы вместе немного изучим что же такое html и почему прежде чем писать сайт, нужно освоить именно html. Мы познакомимся с основной формой сайта, а так же научимся работать с текстом.
Стоит начать с основ прежде чем приступить к изучению данного урока. Начнем пожалуй с того что же все таки такое HTML и на сколько сильно он нужен в создании сайта.
HTML (или с англ. HyperText Markup Language) - Если сказать коротко то это язык гипертекстовой разметки. Это своего рода стандарт во всемирной паутине. Но для простого понимания это язык, с помощью которого мы можем видеть форму сайта используя любой браузер будь он открыт с компьютера или же с обычного смартфона.
Сам язык обычно используется с совокупностью с CSS, но о нем мы поговорим в другом уроке. Сказать простым языком
HTML - Это структура сайта (где будут находится те или иные формы, текст, всеми любимые картиночки, ну или кнопочки)
CSS - Это ее дизайн, или то как будет выглядеть ваш сайт (а так же отдельные ее элементы)
Самый главный наверное вопрос который у вас возникает: где же мы будем писать сам код или создавать наш первый сайт? На самом деле все очень просто - писать код можно в обычном блокноте, который заложен в любой стандартной версии Windows. Но все же дам совет, в будущем когда вы будете реализовывать крупные проекты, то одного блокнота конечно же мало будет и по хорошему вам стоит установить vs code, или notepad++ или же любую другую среду разработки, который вам понравится.
Что же наверное вам уже не терпится что ни будь написать, а давайте это сделаем и начнем конечно же с основ.
Основа любого сайта
Для начала откроем блокнот и внесем туда вот такой код:
Пример:
<html>
<head>
<title>Начальная страница</title>
</head>
<body>
</body>
</html>
Далее сохраним наш блокнот с любым названием но в конце пропишем .html (Расширение) --> Название.html
Что же это такое?
Начнем с структуры:
<html></html>
Это то что имеется во всех сайтах (это объявление что это html код).
<html> --- Начало
</html> --- Конец
Как вы можете заметить конец любой команды прописывается через / . Для наглядности можно представить что это как коробка в которой будет лежать наш тот самый код.
<head> --- Это невидимая часть сайта, ее какие то атрибуты, которые можно будет настроить под свой вкус.
<title> --- Всегда должен находится внутри head. Она показывает название вашей страницы. В примере страница будет называться 'Начальная страница'
<body> --- Видимая часть сайта, в ней мы будем хранить весь наш текст, картинки, фото или любой другой материал.
Работа с текстом
Поздравляю вас, вы написали свой первый сайт, это не так сложно как вам кажется на первый взгляд). Но мы пойдем дальше, давайте напишем текст в нашу страницу (в блоке body):
Пример:
<html>
<head>
<title>Начальная страница</title>
</head>
<body>
Какой то текст
</body>
</html>
Да, что бы добавлять текст достаточно его просто написать в блоке <body>. Давайте попробуем отформатировать наш текст и добавим еще больше текста.
<body>
Очень большой текст<br>
Большой текст<br>
Средний текст<br>
Маленький текст<br>
Очень маленький текст<br>
</body>
Первое что будет если же мы сохраним и откроем страницу, это то что наш текст будет на одной странице. Поэтому мы добавляем <br>
<br> --- Перевести на следующую строку
Уже лучше, а теперь попробуем поиграться с размерами:
<body>
Очень большой текст<br>
Большой текст<br>
Средний текст<br>
Маленький текст<br>
Очень маленький текст<br>
</body>
Теперь мы немного научились менять размеры текста! <h...> часто используется когда нужно обозначить текст как заголовок.
Другие элементы которые часто используются: