HTML для начинающих. Простой способ: начните изучать HTML и CSS уже сегодня

Добро пожаловать! Вы нашли самый простой способ выучить HTML и CSS.

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

В спешке? Перейдите прямо к нашему руководству и начните изучать HTML прямо сейчас!

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

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

Мы поможем вам создать новый веб-сайт за считанные минуты , а не часы.

HTML для абсолютных новичков

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

Цель состоит в том, чтобы показать вам, «как» создать свою первую веб-страницу, не тратя весь урок на «зачем».

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

Что такое HTML?

Итак, это единственная часть обязательной теории. Чтобы начать писать HTML, полезно знать, что вы пишете.

HTML — это язык, на котором написано большинство веб -сайтов . HTML используется для создания страниц и обеспечения их функциональности.

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

История HTML

HTML был впервые создан Тимом Бернерсом-Ли, Робертом Кайо и другими в 1989 году . Это расшифровывается как язык гипертекстовой разметки.

Гипертекст означает, что документ содержит ссылки, которые позволяют читателю перейти к другим местам в документе или вообще к другому документу. Последняя версия известна как HTML5 .

Язык разметки — это способ общения компьютеров друг с другом для управления обработкой и представлением текста. Для этого в HTML используются две вещи: теги и атрибуты .

Что такое теги и атрибуты?

Теги и атрибуты являются основой HTML.

Они работают вместе, но выполняют разные функции — стоит потратить 2 минуты на то, чтобы отличить их друг от друга .

Что такое теги HTML?

Теги используются для разметки начала HTML-элемента и обычно заключаются в угловые скобки. Пример тега: <h1>.

Большинство тегов должны быть открыты <h1>и закрыто </h1>чтобы функционировать.

Что такое атрибуты HTML?

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

Пример атрибута:

<img src="mydog.jpg" alt="A photo of my dog.">

В этом случае источник изображения (src) и замещающий текст (alt) являются атрибутами <img>ярлык.

Золотые правила, которые нужно помнить

1. Подавляющее большинство тегов должны быть открыты ( <tag>) и закрытый ( </tag>) с информацией об элементе, такой как заголовок или текст, заключенный между тегами.
2. При использовании нескольких тегов теги должны быть закрыты в том порядке, в котором они были открыты . Например:
   
   <strong><em>This is really important!</em></strong>

HTML-редакторы

Теперь, когда мы разобрались с основной теорией. Пришло время научиться создавать наш первый веб-сайт .

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

На рынке есть много вариантов. Вот несколько самых популярных:

Возвышенный текст 3

Однако в этом руководстве мы будем использовать Sublime Text 3 , поскольку он бесплатный, а также предлагает кроссплатформенную поддержку для пользователей Windows, Mac и Linux.

Sublime Text 3 имеет мини-окно предварительного просмотра справа.

Плюсы

• Легко настраиваемый
• Подходит для начинающих
• Приятные цветовые схемы на выбор.

Минусы

• Не удается распечатать документы или код
• Нет панели инструментов или панели инструментов.

Чего следует избегать

Внешний вид вашего кода зависит от браузера к браузеру — вы узнаете об этом больше с расширенным CSS.

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

Во-вторых, убедитесь, что вы установили несколько разных браузеров , таких как Chrome и Firefox , чтобы просмотреть свое предстоящее творение.

Создание вашей первой HTML-страницы

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

Оттуда вам нужно разместить свою страницу со следующими тегами.

Базовая конструкция HTML-страницы

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

<!DOCTYPE html>— Этот тег определяет язык , на котором вы будете писать на странице. В данном случае используется язык HTML 5.

<html>— Этот тег сигнализирует о том, что с этого момента мы будем писать в HTML-коде.

<head>— Сюда попадают все метаданные страницы — вещи, в основном предназначенные для поисковых систем и других компьютерных программ.

<body>— Здесь находится содержимое страницы .

Вот как визуально устроена средняя HTML-страница.

Дополнительные теги

Внутри <head>тег, есть один тег, который всегда включается: <title>, но есть и другие, не менее важные:

<title>Здесь мы вставляем имя страницы , которое будет отображаться в верхней части окна или вкладки браузера. <meta>Здесь хранится информация о документе: кодировка символов, название (контекст страницы), описание.

Давайте попробуем базовый <head>раздел:

<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This field contains information about your page. It is usually around two sentences long.">.
<meta name="author" content="Conor Sheils">
</header>

Добавление контента

Далее мы сделаем <body>ярлык.

HTML <body>здесь мы добавляем контент, предназначенный для просмотра человеческим глазом.

Это включает в себя текст, изображения, таблицы, формы и все остальное, что мы видим в Интернете каждый день.

Как добавить HTML-заголовки на вашу веб-страницу

В HTML заголовки пишутся в следующих элементах:

<h1>
<h2>
<h3>
<h4>
<h5>

<h6>

Как вы могли догадаться <h1>а также <h2>следует использовать для наиболее важных заголовков, а остальные теги следует использовать для подзаголовков и менее важного текста.

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

Создание заголовка

Давайте попробуем. В новой строке редактора HTML введите:

<h1>Welcome to My Page</h1>

И нажмите сохранить. Мы сохраним этот файл как « index.html » в новой папке с именем «моя веб-страница».

Момент истины : щелкните только что сохраненный файл, и ваша первая веб-страница должна открыться в браузере по умолчанию. Это может быть некрасиво, это твое… все твое. *Зло смеется*

Ну не будем увлекаться; у нас еще есть множество отличных функций, которые мы можем добавить на вашу страницу.

Как добавить текст в HTML

Добавить текст на нашу HTML-страницу очень просто, используя элемент, открытый с помощью тега <p>который создает новый абзац . Мы размещаем весь наш обычный текст внутри элемента <p>.

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

Давайте попробуем. В новой строке редактора HTML введите следующий HTML-код:

<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>

Не забудьте нажать «Сохранить», а затем обновить страницу в браузере, чтобы увидеть результаты.

Как добавить ссылки в HTML

Как вы могли заметить, Интернет состоит из множества ссылок .

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

Ссылки включаются в атрибут, открываемый тегом <a> . Это первый встреченный нами элемент, в котором используется атрибут, поэтому он отличается от ранее упомянутых тегов .

Якорный тег

Открывающий тег <a> (или якорь) записывается в следующем формате:

<a href="https://blogging.com/how-to-start-a-blog/">Your Link Text Here </a>

Первая часть атрибута указывает на страницу, которая откроется после нажатия на ссылку.

Между тем, вторая часть атрибута содержит текст, который будет отображаться посетителю, чтобы побудить его нажать на эту ссылку.

Если вы создаете свой собственный веб-сайт, то, скорее всего, вы будете размещать все свои страницы на профессиональном веб-хостинге . В этом случае внутренние ссылки на вашем веб-сайте будут <a href="mylinkedpage.html">ссылаться сюда</a>

Давайте создадим якорный тег

Давайте попробуем. Сделайте дубликат кода с вашей текущей index.html страницы . Скопируйте / вставьте его в новое окно вашего HTML-редактора.

Сохраните эту новую страницу как «page2.html» и убедитесь, что она сохранена в той же папке, что и ваша index.html . страница

На page2.html добавьте следующий код:

<a href="http://www.google.com">Google</a>

Это создаст ссылку на Google на странице 2. Нажмите «Сохранить» и вернитесь на страницу index.html .

В новой строке index.html добавьте следующий код:

<a href="*folder(s)*/page2.html">Page2</a>

Убедитесь, что путь к папке с файлом (page2.html) указан правильно. Нажмите «Сохранить» и просмотрите index.html в браузере.

Если все верно , то вы увидите ссылку, которая приведет вас на вторую страницу . На второй странице будет ссылка, которая приведет вас на google.com .

Вы можете проверить тип файла изображения, щелкнув элемент правой кнопкой мыши и выбрав «Свойства».

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

Типы файлов, обычно используемые для файлов изображений в Интернете : .jpg, .png и (все реже) .gif.

Замещающий текст важен для правильного ранжирования вашего сайта на поисковых сайтах, а также для слабовидящих посетителей вашего сайта.

Тег <img> обычно записывается следующим образом:

<img src="yourimage.jpg" alt="Describe the image" height="X" width="X">

Давайте попробуем.

Создайте свое собственное изображение с альтернативным текстом

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

Сохраните изображение (в формате .jpg, .png, .gif) по вашему выбору в той же папке, где вы сохранили index.html и page2.html. Назовите это изображение « testpic.jpg ».

В новой строке редактора HTML введите следующий код :

<img src="testpic.jpg" alt="This is a test image" height="42" width="42">

Нажмите « Сохранить» и просмотрите страницу index.html в браузере.

Как сделать HTML-список

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

Упорядоченный список

Первый — это <ol> : это упорядоченный список содержимого. Например:

1. Пункт
2. Другой предмет
3. Сюда идет другой.

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

Например:

<ol>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ol>

Неупорядоченный список

Второй тип списка, который вы, возможно, захотите включить, — это <ul> неупорядоченный список . Он более известен как маркированный список и не содержит цифр.

Примером этого является:

<ul>
<li>This is </li>
<li>An Unordered </li>
<li>List </li>
</ul>

Список определений

Наконец, вы можете включить список определений <dl> на свою страницу. Пример <dl> выглядит следующим образом: списка

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

Код, используемый для вышеизложенного, выглядит следующим образом:

<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
`

Давайте попробуем. Откройте index.html и в новой строке введите следующий HTML-код:

<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>

Теперь нажмите «Сохранить» и проверьте результаты в браузере. Если все получилось, он отобразит маркированную таблицу, отображающую информацию выше.