Если вы ничего не знаете о html или его небольшую часть, этот урок будет полезен для вас.
прочитав и поняв этот урок вы сможете сами делать небольшие и простые сайты.
html — в полном названии “hyper text markup language” в переводе “язык гипертекстовой разметки”. Сам язык состоит из множества элементов при помощи которых и создаются сайты.
Для работы лучше всего скачать программу “notepad++” в ней мы и будем писать наш код для сайта. По сути, вы можете писать код и в блокноте, но если вы допустите ошибку, блокнот вам не подскажет и не поможет.
У меня стоит операционная система “Windows 10”.
Для начала, давайте создадим наш первый сайт.
Для этого, на рабочем столе вашего компьютера кликните правой кнопкой мыши по пустому месту. Потом нажмите на кнопку “Создать” а затем нажмите на “Текстовый документ”.
У вас должен получиться файл с названием “Новый текстовый документ.txt”. Название выберите любое, а расширение “txt” сотрите и вместо него напишите “html” у меня получилось так, “test.html”.
Если у вас нет расширения “.txt”, тогда зайдите в любую п апку и в верхнем левом углу у вас будут несколько вкладок. Нажмите на вкладку “Вид”, затем в верхнем правом углу поставьте галочку на параметре “Расширения имен файлов”.
Отлично, теперь кликните правой кнопкой мыши по нашему созданному файлу выберите пункт “Edit with Notepad++”. У вас откроется программа с пустым кодом, который мы в скором времени напишем.
Сам сайт полностью состоит из множества элементов:
Текст — элемент;
Картинка — элемент;
Ссылка — элемент;
Кнопка — элемент;
Перечислять можно долго, но я думаю общую суть вы поняли. Откройте наш сайт кликнув по нашему файлу два раза. Наш сайт совершенно пуст, так как на нем нет элементов. Все сайты создаются путем наложения элементов. Сейчас я покажу как создаются эти элементы.
Элементы выглядят примерно так: <Название элемента>
Мы ставим открытую угловую скобку для открытия нового элемента. После скобки идет сам тип элемента, а после мы ставим закрывающую скобку для завершения данного элемента. Элементов бывают всего два типа, парные и не парные.
Парные:
<Название элемента>…</Название элемента>
Непарные:
<Название элемента>
Парные элементы в основном нужны для управления текстом который пишется вместо троеточий. Также, в закрепляющем элементе нужно всегда ставить слеш “/”.
Дети играли в песочнице.
Допустим, мы хотим чтобы слово “Дети” стала ссылкой для чего либо. Мы в угловых скобках пишем элемент который отвечает за ссылку, а между этих двух элементов мы пишем слово которое человек должен нажать чтобы его перекинуло на страницу которую мы укажем.
Пример:
<Ссылка>Дети</Ссылка>.
А в непарных элементах мы пишем только свойства чего либо. Допустим мы добавили картинку и хотим изменить её размер. Мы в угловых скобках пишем элемент которых отвечает за размер и приписываем саму картинку.
Пример:
<Размер>Наша картинка.
Помимо элементов еще есть атрибуты. Атрибут нужен для точного указания чего либо. В той же картинке мы написали размер, но не указали его. Это как написать слово “сантиметры” но не указать сколько их именно.
Примеры:
<Текст Цвет=”…”>Привет</Текст>
<Аудио Громкость=”…”>наш аудиофайл</Аудио>
В завершающих скобках атрибут указывать не надо, только тип элемента.
Между кавычек, вместо троеточий мы пишем число или слово.
В одном элементе могут быть несколько атрибутов и их можно записывать в одни скобки через пробел. В пустой код напишите эту конструкцию:
<!DOCTYPE html>
<html>
<head>
Сюда мы пишем то что не будет отображаться на сайте
</head>
<body>
Сюда мы пишем то что будет отображаться на сайте
</body>
</html>
Эту схему нужно писать обязательно, она помогает не запутаться в своем коде если сайт будет большим.
Вот это вся конструкция из которой состоит html. Саму конструкцию я рассказал, теперь я расскажу про элементы. Правильнее их будет называ “тегами”, всего их 111 штук, но я расскажу про самые главные.
<text>…</text> — Текст
color = “…” — атрибут для текста которые изменяет его цвет.
Пример:
<text color=green>Hello</text> — В данном примере слово “Hello” будет зеленым цветом на нашем сайте.
<a href=”Ваша ссылка” target=”_blank”>…</a> — Превращает написанное вами слово в ссылку.
<h1-5>…</h1-5> — Делает заголовок. После h пишите число от 1 до 5, это размер нашего заголовка. Чем меньше число, тем больше будет заголовок.
<strong>…</strong> — Делает жирный шрифт. Не атрибут!
<em>…</em> — Делает курсивный шрифт. Тоже не атрибут.
<small>…</small> — Делает маленький шрифт.
<title>…</title> — Изменяет название вкладки. На данный момент вкладка в браузере называеться так, как вы и написали название файла при создании. Внимание! Этот тег нужно писать в строку между тегами “head” а не в “body” так как в “body” будет отображаться только то что на самом сайте а не в его вкладке, расположения и т.д.
<br>…</br> — Все написанное между тегами будет с новой строки.
<p>…</p> — Делает шрифт необычным, используются для статей.
<img src=”название картинки”> — Вставка картинки. Убедитесь что помимо название должен еще быть указать тип, это может быть png или jpeg. Пример:
<img src=”Котик.png”>
Если картинка на компьютере будет удалена, тогда на сайте ее тоже не будет. Картинку можно вставить не только со своего компьютера, но и с любого сайта. Для этого, скопируйте у картинки URL и вставьте между кавычек.
width=”…px” и height=”…px” — Это два атрибута для тега выше. В переводе это длина и ширина указанная в пикселях. Если указать только длину, то ширина автоматически сама настраиваться и наоборот.
<input> — Создает строку для ввода небольших данных, часто можно встретить при регистрации.
placeholder=”…” — Атрибут для “<input>”. Он добавляет сообщение на строку по типу “Напишите пожалуйста текст здесь”.
<textarea>…</textarea> — аналог input, но для больших текстов. Используется для биографии.
Я сделал небольшой сайт. Можете посмотреть пример картинкой ниже ниже.