Что такое html

Содержание

История зарождения и развития html
Что такое html
Возможности HTML
Что можно сделать на HTML и какие у него ограничения

Приветствую всех, кто желает научиться создавать web сайты. Для этого необходимо начать с основ веб-дизайна, а именно изучить как минимум: HTML и CSS, в идеале еще Java Script и PHP — последние 2 по мере надобности. Начинать изучение нужно с языка гипер-текстовой разметки HTML. Этот язык является одним из первых языков для написания сайтов, и является самым простым в освоении и применении. Освоить его азы и написать на нем свой простенький сайт сможет каждый, кто умеет пользоваться компьютером, на освоение всех основ уйдет времени не больше чем я писал данную статью.

История зарождения и развития html

Прототипом HTML считается язык структурирования документов SGML или по стандарту ISO-8879, который возник в 1986 году с целью создания документов логически структурированных и скомпонованных для понятного вывода их на печать. Уже в 1991 году после возникновения гипертекстовых документов во всемирной паутине этот язык приняли за первую версию HTML. В дальнейшем язык только развивался таким образом, чтобы украсить текс выводимый из интернета на экран монитора и сделать его просмотр более приятным и удобным. Так в 1993 году появилась версия 1.2, которая содержала около 40 тегов. В 1995 году появилась версия 2.0, в которой язык был разбит на четыре уровня, для обеспечения совместимости языка с другими версиями. И только с версией 3.2 разработанной в 1995 году язык HTML стал более подобен сегодняшнему. Уже в 1997 году была разработана следующая версия 4.0, которая позволила создавать страницы, которые содержали в себе графические изображения, таблицы и фреймы. В 1999 году появилась версия 4.01, которой до сих пор пользуются, не смотря на появление в октябре 2013 года версии 5.0.

HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки страницы. Предназначен для структурирования и представления веб страниц. Состоит он из тегов, которые в свою очередь могут состоять из атрибутов, а атрибуты подразумевают значение и всё это называется кодом. Кроме того, этот язык, как и любой другой язык программирования должен состоять из определённой структуры. В данном случае, это заголовок документа и тело документа.

Говоря простым языком, HTML — это примитивный код (разметка), чтобы дать браузеру понять, как нужно отображать загруженный сайт или HTML страницу.

На первый взгляд может показаться, что изучение HTML довольно сложная задача, но будьте уверены, что сегодня это очень просто, так как существует множество редакторов тегов, которые упрощают задачу веб-дизайнеру. Они сами подставляют наиболее часто используемые теги и атрибуты, а разработчику необходимо лишь выбрать то, что подходит из списка. Так же привлекает то, что отсутствует необходимость компиляции кода. Необходимо просто сохранить код в нужном формате и открыть файл при помощи браузера.

Например, если открыть редактор кода с встроенным плагином emmet (если он не встроен обычно его можно установить), например VS Code, создать новый файл.

Далее сохранить его как

html — обычно это index.html.

Далее в поле кода вводим ! после чего редактор предлагает построить для этой абревиатуры при помощи emmet код, выбираем мышкой или жмем Enter.

И редактор моментально построить вам базовый HTML 5 каркас.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Учиться кодить конечно наверное лучше прям в обычном блокноте набирая его руками — так все быстрее в голове отложиться. А з другой стороны все равно запомните эти все теги и атрибуты когда будите практиковаться.

Возможности HTML

Как упоминалось выше, язык состоит из тегов — это своеобразные команды, которые преобразовываются в визуальные объекты в браузере пользователя. Например, тег <img> используется для размещения изображений на странице. У него есть обязательный атрибут src, в котором указывается ссылка на файл. Давайте накидаем простенький код в тело (body) выше приведенного каркаса — не обязательно — но желательно.

<h1>Моя первая web страничка</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A commodi quas cum nesciunt explicabo reprehenderit iusto doloremque maiores, laudantium voluptates tenetur tempora necessitatibus quis nam. Amet ex sunt quibusdam itaque.</p>
    <img src="https://web-revenue.ru/wp-content/uploads/2019/06/logo-new.png" alt="логотип">
    <h2>Некий подзаголовок</h2>
    <table border='1'>
        <tr>
            <th>№</th>
            <th>Позиция</th>
            <th>Цена за единицу (руб.)</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ручка синяя</td>
            <td>8</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Карандаш с ластиком</td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Линейка (40 см)</td>
            <td>30</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Дырокол</td>
            <td>100</td>
        </tr>
    </table>
    <h3>Еще один подзаголовок - подзаголовка</h3>
    <ul>
        <li>Пункт списка номер 1</li>
        <li>Пункт списка номер 2</li>
        <li>Пункт списка номер 3</li>
    </ul>

Теперь, если сохранить нашу страницу (файл index.hml) и открыть его при помощи браузера, то увидим следующее.

Ну и давайте немного разберем данный код.

h1,h2,h3 (их 6) — это заголовки и подзаголовки страницы, если заметили то они разного размера.

p — задает абзац;

img — отвечает за вывод изображения, путь до которого указывается в атрибуте src

<table> — это таблица, <tr> — это ряд, а <th> и <td> — столбцы.

ul тег задающий тип списка (маркированный, если ul заменить на ol — будет нумерованный), li — элементы списка.

Да еще если заметили из кода, некоторые теги, грубо говоря просто теги открылись и сами закрылись в нашем случае img — не парные, а некоторые (их большинство) открываются и закрываются, например: <p> здесь текст и могут еще быть другие теги </p> — такие теги парные и они применяются для разметки блоков:

контейнеров;
абзацев;
заголовков;
списков;
таблиц;
и так далее.

В них могут находиться другие блоки или отдельные элементы, такие как изображения.

Принцип работы разметки следующий:

Вы вводите в адресную строку адрес сайта или страницы.
Браузер делает запрос по этому адресу и получает файл в формате.html.
Код из полученного файла преобразуется в визуальные объекты.

При этом браузер следует правилам преобразования, которые немного отличаются в зависимости от системы, версии и типа обозревателя. Если в коде допущена ошибка, то на странице может появиться что-то неожиданное, например допустим в примере разметки таблицы ошибку:

<table border='1'>
        <tr>
            <th>№</th>
            <th>Позиция</th>
            <th>Цена за единицу (руб.)</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Ручка синяя</td>
            <td>8</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Карандаш с ластиком</td>
            <td></td>10
        </tr>
    </table>

и посмотрим.

Цена карандаша вылетела за пределы таблицы, потому что браузер не смог понят где она должна находиться.

Что можно сделать на HTML и какие у него ограничения

Как было сказано выше. Простыми словами, HTML — это каркас сайта. В нем могут быть прописаны:

ссылки;
таблицы;
изображения;
блоки;
абзацы;
формы;
заголовки и прочие элементы.

Также есть ограниченные возможности по изменению внешнего вида:

поменять цвет;
указать фоновое изображение;
изменить шрифт и так далее.

Для оформления уже используются каскадные таблицы стилей — css.

Для лучшего усвоения информации необходимо параллельно с прочтением заниматься выполнением практических заданий. В этом могут помочь бесплатные курсы и тренажёры.

< Веб дизайн — введение

Что такое CSS >