HTML Intro

Что такое HTML?

Давайте начнем, показывая простые шаги, которые мы предпримем, чтобы проверить, например, погоду на www.meteo.md.

Откройте браузер (например, FireFox, Chrome и т. Д.).
Я пишу в поле поиска www.meteo.md
Я просматриваю результат моего поиска (некоторый текст, картинки и т. Д.).

Давайте проясним, что лежит за этими тремя простыми шагами, которые мы сделали.

Прежде всего, браузер - это не что иное, как приложение, которое позволяет нам получать доступ к определенным ссылкам в Интернете, в результате чего мы получаем «что-то». Это «что-то» называется ресурсом, и оно получается в результате ссылки, и браузер знает, как отправить этот ресурс.

Этот ресурс - просто текстовый файл. Конечно, этот текстовый файл имеет четко определенную структуру в соответствии с определенными стандартами и имеет расширение .html.

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

Как вы узнали из предыдущего урока, интернет работает под принципом «запрос - ответ» (соединение «Клиент-сервер», клиент спрашивает - сервер дает ответ). В моем случае (Клиент - Браузер), посещая www.meteo.md. Я запрашиваю ресурс, и Сервер который отвечает на данный адрес (если нет ошибок) возвращает мне ресурс index.html, содержащий все детали страницы.

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

Как расшифровать HTML?

HTML или HyperText Markup Language - один из старейших языков разметки. Язык разметки - это метод форматирования текста с веб-страницы, который объединяет текст с дополнительной информацией об этом тексте.

Что такое HTML-файлы?

На самом деле, файлы HTML - это не что иное, как текстовые файлы, как уже говорили, и для начала написания кода HTML вам не нужно ничего, кроме текстового редактора. У всех операционных систем уже есть такие. Например, «Блокнот» в операционной системе Windows и TextEdit в операционной системе Mac OSX. Мы будем использовать текстовый редактор, широко используемый разработчиками по всему миру Sublime Text.

Пожалуйста, выполните следующие действия:

Загрузите Sublime Text с официального сайта.
Пройдите стандартную процедуру установки (next, next, next, install).
Откройте Sublime Text.
С этого момента мы его будем просто называть — Sublime.

В окне Sublime введите короткое сообщение, например:

I love HTML!

Затем сохраните этот файл и назовите его index.html (Как соглашение - в веб-проекте базовый файл называется index.html)

Этот маленький index.html является вашей первой веб-страницей. Чтобы просмотреть результат, вам нужно открыть этот html-документ в своем любимом браузере (например, Chrome, Firefox, Safari, Opera или Internet Explorer).

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

Ниже вы можете найти общую структуру HTML-документа.

<!DOCTYPE html>
<html>
    <head>
        <title>My page</title>
    </head>
    <body>
        I love HTML!
    </body>
</html>

интерпретация этого кода намного проще, чем кажется на первый взгляд.

HTML-документы должны начинаться с так называемого Doctype, он написан как<! DOCTYPE html> и определяет версию HTML-кода в случае версии 5. Таким образом, браузер точно понимает, как он должен интерпретировать следующий код.

Прежде чем переходить ко второй строке, мы должны упомянуть, что в процессе изучения языка разметки HTML вам нужно будет запомнить только два понятия. Во-первых, понятие тега, а второе - понятие атрибута.

HTML имеет широкий диапазон тегов, которые отмечают начало и конец типа контента. В предыдущем примере мы имеем тег <html>, который отмечает начало документа HTML и закрывающий тег </ html>, обозначающий конец документа HTML. Все внутри тегов <body> и </ body> являются основным содержимым документа, который будет отображаться в браузере, а тег <head> содержит информацию о текущей странице, а код, размещенный внутри этого тега, не будет отображаться на странице.

Тег<title>, о котором мы еще не говорили, является названием страницы, которая будет отображаться над заголовком вашего браузера.

Когда у нас есть основная структура документа HTML, мы можем играть с несколькими тегами и типами контента.

Тег <p> используется для определения абзаца.

<p>This is a paragraph.</p>

Тексты, имеющие более важную роль на странице, определяются тегами <h1>, <h2>, <h3>,<h4>, <h5> и <h6>, где наиболее важным является<h1>, а наименее важным является <h6>.

<h1>Page title</h1>
<h2>Page subtitle</h2>

В HTML у нас есть два типа списков: упорядоченный <ol> и неупорядоченный <ul> список. Каждый элемент в списке определяется тегом <li>.

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

В этом случае иерархия является строгой и обязательной. Тег <li> может быть только непосредственным потомком тега <ul> или <ol>, и он не может существовать вне его.

Что может быть интереснее при создании веб-страницы, чем создании ссылок? Чтобы создать новую ссылку, используйте тег <a> и напишите текст ссылки в контенте.

<a>Go to Google</a>

Все выглядит хорошо, но браузер не может знать на какой адрес должен перенаправлять пользователя, который нажимает на текст «Go to Google». И если вы помните, в начале этой статьи я сказал, что вам нужно запомнить только два понятия - теги атрибут. Хорошо, пришло время поговорить о втором понятии. Атрибуты- это на самом деле небольшие информационные сегменты, которые применяются к открытому тегу, чтобы лучше охарактеризовать текущий тег. В этом случае мы будем использовать атрибут href = ""для установки адреса перенаправления пользователя.

<a href="https://www.google.com">Go to Google</a>

Хотя существует общий список атрибутов, атрибут href = "" не может быть применен к какому-либо другому тегу.

Если мы вернемся к тегам, я должен упомянуть, что есть два типа тегов, которые имеют закрывающий тег или нет. Все теги, которые мы указали до сих пор, были тегами, которые могут содержать контент, но пример тега, который не может иметь контент и который не закрывается, является тегом, который используется для передачи текст на следующей строке.

<p>
    — I love HTML!<br>
    — Do you?
</p>

Другим примером не закрывающего тега является тег <img>. Используйте этот тег для отображения изображения. И поскольку вашему браузеру необходимо знать, где найти нужное изображение, вы будете использовать атрибут src = "" с полным адресом изображения.

<img src="https://unsplash.it/200/300">

У нас есть новая категория тегов, которые помогают нам охарактеризовать структуру страницы (не путать со структурой HTML-документа). Как правило, все страницы имеют относительно схожую структуру, которая уходит своими корнями в типографию газет. У нас есть <header>, где расположены логотип и меню, у нас несколько <section>, где основное содержимое сайта разделено, а ниже у нас <footer>, который обычно содержит сообщение об авторских правах.

<header>
    <a href="/">
        <img src="http://plachold.it/20x20" alt="Logo">
    </a>
    <nav>
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
            <li>
                <a href="contacts.html">Contacts</a>
            </li>
        </ul>
    </nav>
</header>

<section>
    <h1>Page Title</h1>
    <p>Page Description</p>
</section>

<footer>
    <p>All rights reserved.</p>
</footer>

В дополнение ко всем этим тегам, которые определяют определенные разделы страницы, существует популярный и часто используемый тег, это тег <div>, который является аббревиатурой от "division". Как вы можете сказать по его имени, он используется для разделения разделов и элементов на подэлементы.

<header>
    <div>Left side of the header</div>
    <div>Right side of the header</div>
</header>

Я рад, что вы дошли до конца этой статьи. Это 20% языка разметки HTML, который позволяет вам достичь 80% возможностей этого языка, все, что вам нужно дальше, - это терпение и любопытство.

Я приглашаю вас посетить следующий раздел, чтобы узнать, что такое CSS и как отдать жизнь вашей странице, применяя новые цвета и формы.

Пример

Чтобы увидеть пример чисто HTML-страницы (конечно, у нее также есть скрытые стили), загрузите HTML Template.

Разархивируйте zip-файл в папку и откройте example.html, чтобы увидеть его.

PreviousHow Web Works NextCSS Intro

Last updated 6 years ago