HTML 101
Hi!�� I’m Sofia, a veteran rookie from Generation Girl, and today I’ll be teaching you the basics of HTML. HTML, which stands for Hypertext Markup Language, is used to create websites, and it’s pretty easy to learn. Let’s get started!
Today, we’ll be making a super basic website, and along the way, you’ll learn the basics of HTML. My example website will be centered around my pet dog, Chewie. You can follow along by making one for your pet or by making one for you! Here are the things you’ll need:
- a text editor that supports HTML
- a .jpg square picture of your desired subject (pet, you, etc.)
- a browser to open your website on (I usually use Google Chrome)
- a list of your subject’s hobbies
1. Setting up the document
Okay, first, let’s make the HTML file. On your text editor, create a new file, then name it website.html
Once you’ve done that, place the file in a folder. In the folder, you want to also place the picture of your subject. Name the picture pic.jpg, so it’s easy to implement later on.
Let’s get back to the HTML file. Whenever you have an HTML file, you have to open it with <!DOCTYPE html>. This is called a document type declaration. The document then starts with <html>, and ends with </html>:
title
When you open a website on your browser, there’s the title of the website on your tab, right? Like, right now, on your tab, there should be HTML 101. To replicate that on your website, add a head, then a title:
Now that the document is all set up, we can start coding what people will actually see: the body.
First, you want to add <body> and </body> to your document, which outlines which part of the document is visible to the reader.
So far, there’s nothing visible on our browser pages when we open the file, this is just to set up!
2. Elements
To define different elements of HTML, we use tags. An example is headers. To open a header, you use <h1>, and to close it, you just use a slash; </h1>. Like this:
Tags can define links <a>, paragraphs, <p>, lists <li>, and many more. On the browser pages, these HTML tags won’t be visible, don’t worry! Only the content will be visible. These tags are used to tell the browsers how to display the content. Let’s try and use these tags! (All of the following should be contained within the <body> tag)
headers
To code a header, you can use <h1> all the way to <h6>. Use <h1> for the most important heading, and <h6> for the least important. For example, I’ll use <h1> to write the title of my website:
images
To add an image in your website, use the <img> tag, like this:
But if you want to control the width and height of the picture, add size attributes (this code means 500 pixels!):
Right now, our website looks like this:
It’s looking a bit empty, so let’s start putting in more information!
paragraphs
A paragraph is exactly what it sounds like. To make a paragraph, use the <p> tag, like so:
To make line breaks in a paragraph, you use the empty tag <br>. It’s called an empty tag because there’s no end tag. You have to use <br> to make line breaks because if you only enter to make a new line as you would in a Word document, the browser can’t read it.
lists
Lists are often put in either bullet point (unordered) or numbered format (ordered). They’re pretty similar, so let’s start with the unordered list.
Compile your desired list, make a title using the header tag we learned above (don’t use <h1> this time) and then you simply need to use the <ul> and <li> tags:
If you want the list to be numbered, simply replace <ul> and </ul> with <ol> and </ol>:
links
Links are really useful to implement in a website because they allow the site visitor to have access to everything they need on one page. For example, in Chewie’s Website, I’ll put a link to my Instagram, just in case the person visiting the website wants to see more adorable pictures of Chewie. Prepare your desired link: https://www.instagram.com/dj0jonegoro/ (Follow me!) Now, all you need to do is use the link tag <a>
This is the format:
Let’s try and implement it!
This is what our code looks like so far:
And this is what our website looks like so far:
Now let’s make the website look pretty!
3. Style
To set the style of an element, you can use the style attribute. Usually, if it’s a big website with multiple pages, I use a separate CSS document, and this is what I would usually recommend, but for the purpose of this simple tutorial, I’ll implement the styles within the HTML document.
Here’s the basic formatting of style:
“Property” and “value” are CSS properties and values. Let’s try this out!
background color
To set the background color for your website, you use the property background-color, like so:
You can choose any color you want, and to pick the color, I use hex codes. You can google hex color, and pick virtually any color you want, and then just put the hex code of the color into the code.
You can also input simple colors like red, blue, or green, but if you want a really specific color, hex code is the way to go!
text color
Now you can choose the color of the text. Find your color just like before, using hex code or using a simple color, and then input it like so:
I’m changing the color of my first header, but you can apply this code to your lists or paragraphs as well;
The default font for Google Chrome is Times New Roman, so if you like that font, skip this step! Personally, I like Verdana, so I’m going to be changing my whole website’s font into Verdana. What you need to do is just add the font-family property.
I’m going to add this property to the whole website by putting it in the <body> style next to the background-color property, but if you want different fonts for each text, you can put the property into each individual <h1>, <p>, or <ul> tag.
text alignment
Right now, all my text and images are smushed to the left, as per the default text alignment. To change this, I can use the text-align property.
I only want to place my header in the center, so I’m only going to use text-align for <h1>. If you want everything to be in the center, use the text-align property in the <body> tag.
Введение в HTML
HTML (Hyper Text Markup Language) — язык гипертекстовой разметки, который используется для создания веб-страниц. Он состоит из набора структурных и семантических элементов, которые описывают, как должны быть представлены части документа (заголовки, абзацы, списки, изображения, и т.д.) в браузере.
Версии HTML
Язык HTML был разработан британским ученым Тимом Бернерсом-Ли в 1991 году. Позже начали появляется усовершенствованные версии HTML.
| Версия | Год |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
Основные понятия в HTML
Элементы, теги и атрибуты — основные понятия в HTML.
Основной структурной единицей веб-страницы является HTML элемент, для определения которого используются HTML теги.
HTML теги
HTML теги используются для определения структуры контента на веб-странице. При помощи тегов мы размечаем контент и даем понять браузеру, как именно показывать ту или иную часть контента (к примеру, текст, изображение, гиперссылка, и т.д.). Сами теги в браузере не показываются.
HTML теги заключаются в угловые скобки < >, к примеру <html>.
Большинство тегов в HTML парные (к примеру, <p> </p>), т.е. состоят из двух частей — открывающего (< p>) и закрывающего (< /p>) тегов.
Одиночные теги не имеют закрывающего тега. Например, одиночным является тег <img/>, который используется для определения изображения.
Рассмотрим вышесказанное на примере.
Если нам нужно обозначить в HTML документе абзац (который в HTML документе является элементом), мы используем HTML тег <p>. Содержимое абзаца мы запишем между открывающим (<p>) и закрывающим (</p>) тегами.
Пример
Абзац между двумя тегами — открывающим <p> и закрывающим </p>.
HTML атрибуты
Для того, чтобы сообщить дополнительную информацию об элементе, используются HTML атрибуты. К примеру, если мы размечаем изображение тегом < img/>, то при помощи атрибутов мы можем дополнительно сообщить браузеру адрес изображения ( src ), его высоту ( height ), ширину ( width ) и т.д.
Структура HTML страницы
Элемент <!DOCTYPE html> указывает на принадлежность текущего документа к определенному типу HTML. Как мы уже отмечали, существует несколько версий HTML, и для того, чтобы браузер не путался и отображал правильный стандарт, необходимо ему на него указать.
Различают несколько видов < !DOCTYPE> , для каждой версии HTML языка существует свой.
Начало и конец HTML документа обозначаются тегами <html> </html>, который сообщает браузеру информацию об HTML документе.
В теге <head> содержатся другие HTML элементы, а также предназначенные для поисковых систем метаданные (мета-заголовок, мета-описание, ключевые слова, и т.д. ). Содержимое этого тега не показывается на веб-странице, за исключением содержимого тега <title>, который устанавливает заголовок окна веб-страницы.
Заголовок веб-страницы пишется между открывающим <title> и закрывающим </title> тегами.
Элемент <body> содержит всю информацию о веб-странице (текст, изображения, видео, и т.д.). Информация записывается между открывающим <body> и закрывающим </body> тегами.
Теги заголовка <h1>-<h6> используются для обозначения заголовков разного уровня.
Всего существует 6 уровней заголовков: тег <h1> обозначает самый важный заголовок на странице (не путать с <title>, где содержится заголовок окна веб-страницы), а тег <h6> — наименее важный.
Пример
Результат
Для того, чтобы начать писать код для вашего веб-сайта, вам потребуется HTML редактор. Поговорим об HTML редакторах в следующей главе.
Основы HTML #3215
Итак, как мы уже упоминали, язык HTML необходим для описания структуры страницы.
Именно с помощью HTML-тегов браузеру отдается информация о том, что именно на странице будет заголовком первого уровня, что абзацем, что подзаголовком, где будет расположена ссылка, куда ссылка будет вести и т.д.
- Если Вам нужно выделить какой-либо текст на странице и сделать его заголовком первого уровня, Вам необходимо в начале заголовка поставить открывающий тег <h1> и в конце закрывающий тег </h1> (об открывающих и закрывающих тегам мы поговорим чуть ниже).
- Подобным же образом можно выделять подзаголовки других уровней (от <h2> до <h6>).
- Чтобы выделить абзац, необходимо в HTML-документе заключить весь текст абзаца в теги <p> и </p> соответственно (открывающий и закрывающий теги).
- Чтобы сделать перенос строки, достаточно просто поставить тег <br> там, где он необходим.
Подобным образом, зная необходимые Вам теги и правила их использования, Вы сможете формировать HTML-документы с описанием содержимого страниц.
Теперь перейдем к более детальному описанию нюансов работы с HTML.
Структура страницы
Любая страница на сайте — это текстовый файл с расширением .html.
Именно внутри этого файла лежит все содержимое страницы — тексты, теги и т.д.
Внутри любого такого файла должны обязательно присутствовать несколько обязательных тегов, таких как:
- <!DOCTYPE html> в начале документа.
- <html> в начале и </html> в конце документа — между этими двумя тегами должно находиться все содержимое страницы со всеми тегами (все что за пределами будет проигнорировано).
- <head> в начале и </head> в конце перечисления служебных тегов.
- <title> — служебный тег, им выделяется название страницы (им будет подписана вкладка в браузере).
- <meta> — служебный тег, в нем прописывается кодировка страницы (обычно это utf-8).
Чтобы было нагляднее, мы приводим пример сформированного подобным образом документа:
Атрибуты и теги
Выше мы рассмотрели примерную структуру страницы сайта и обязательные теги, такие как <html>, <head> и <body>.
Теперь рассмотрим теги и атрибуты, которые могут Вам потребоваться при наполнении страницы (в частности, для содержимого внутри тега <body>).
Для начала расскажем, что такое теги и что такое атрибуты.
- Тег — это именно то, что заключено в угловые скобки, например <b>. Чаще всего теги существуют в паре — открывающий и закрывающий. Открывающий тег ставится в начале элемента, а закрывающий, соответственно, в конце. Таким образом, мы очерчиваем границы действия тега. Например, если Вы хотите выделить текст жирным, поставьте в начале текста открывающий тег <b>, а в конце </b> — весь текст между <b> и </b> будет выделен жирным шрифтом. Некоторые теги не нуждаются в парном закрывающем теге (например, уже упоминавшийся тег <br> для переноса строки — его достаточно просто вставить в нужное место).
- Атрибут — дополнительные свойства, прописываемые внутри тега, чтобы присвоить элементу (тексту, картинке и т.д.) какую-либо информацию. Чтобы было понятнее, приведем пример со ссылкой: <a href = «https://megagroup.ru» >Наш сайт </a>. Как видите, тут представлена ссылка на сайт Мегагрупп.ру. Чтобы вставить ссылку, мы обрамили сам текст, который будет выводиться в виде ссылки на сайте (он же анкор) в теги <a> и </a> — именно эти теги используются для вставки ссылки. Но чтобы указать URL (адресс ссылки), нам необходим атрибут href, в котором она и указывается в виде href=»тут вставляется ссылка». Изучая HTML, Вы в дальнейшем повстречаете и другие популярные атрибуты, такие как id, class, src и т.д.
Основные теги
Теперь, когда мы разобрались, что такое теги и что такое атрибуты, приведем для примера наиболее популярные и часто используемые теги.
Предполагают работу с открывающим и закрывающим тегами:
- <p> — тег для обозначения абзаца в тексте. Весь абзац обрамляется в <p> и </p>
- <h1> , <h2> , <h3> , <h4> , <h5> , <h6> — теги для создания заголовков разного уровня в тексте. В заголовке h1 рекомендуется прописывать основной заголовок всей страницы, в h2 — название блоков страницы, в h3 — название подблоков и т.д.
- <b> — тег для выделения текста жирным шрифтом.
- <i> — тег для выделения текста курсивом.
- <a> — тег для вставки ссылки. Как уже упоминалось выше, обладает атрибутом href для указания самой ссылки. Тег целиком будет выглядеть так: < a href = » http:// site.ru » > наш сайт </ a >
Самозакрывающиеся теги (не требуют закрывающегося тега):
- <br> — перенос строки.
- <hr> — тег для вставки горизонтальной линии в текст.
- <img> — тег для вставки картинки в текст. Обладает атрибутами src (для вставки ссылки на изображения) и alt (для вставки альтернативного текста). Таким образом, тег целиком выглядит как < img src= «URL картинки» alt= «альтернативный текст» >.
Кроме того, Вам может потребоваться тег для вставки комментария в HTML, такой текст будет проигнорирован браузером — на экране он будет не виден, но останется в исходном коде страницы. Чтобы вставить комментарий, заключить текст комментария между <!— и —>, у Вас должно получиться следующее:
Это лишь некоторые из возможных тегов.
С более полным перечнем Вы можете ознакомиться в подробном справочнике по ссылке.
Списки в HTML
Отдельное внимание хотелось бы уделить созданию маркированных и нумерованных списков в HTML-документах.
Для создания нумерованного списка Вам понадобятся теги <ol> (в начале и закрывающий </ol> в конце списка) и <li> (в начале и закрывающий </li> в конце каждого пункта). Таким образом у Вас должен получиться список примерно следующего вида.
Для создания же маркированного списка Вам понадобятся теги <ul> и <li> соответственно.
Таблицы в HTML
Основным тегом в таблице будет <table>. Именно между <table> и </table> будет заключена вся информация о ячейках.
Следующим тегом, будет тег <tr>. Между <tr> и </tr> будет лежать информация о рядах таблицы.
Внутри каждого ряда должны быть теги <td>. Соответственно, между <td> и </td> необходимо указывать содержимое ячеек ряда.
Таким образом, в итоге таблица в HTML будет выглядеть примерно так:
Как можно заметить, в самом начале у тега <table> есть атрибут border — в нем указывается толщина рамки в пикселах.
Помимо атрибута border, в таблицах может использоваться множество других тегов, например, для цвета фона таблицы (bgcolor), цвета рамки (bordercolor), отступа от рамки (cellpadding), расстояния между ячейками (cellspacing) и т.д.
С более подробной информацией по работе с таблицами и их атрибутами, Вы можете ознакомиться по ссылке.
Дополнительная информация
В данной инструкции мы привели лишь основную информацию о том, как работает HTML, что он из себя представляет, как с ним работать.
Само собой, для того чтобы создавать полноценные шаблоны страниц, наполнять их контентом и т.д. Вам понадобятся более обширные познания в этом языке разметки.
Попробовать самостоятельно изучить HTML Вы можете, например, на таких сайтах, как:
HTML5 — Основы
Статья, повествующая об основах, которые необходимо знать веб-разработчику HTML5-страниц. Рассматривается структура HTML-документа, иерархические отношения между HTML-элементами, понятие веб-браузера, user agent-а, основы правильного написания кода и базовый шаблон HTML5-документа.
Структура HTML-документа
Изучение структуры HTML-документа начнём с того, что вспомним устройство HTML-элемента. Любой HTML-элемент в документе состоит из открывающего тега ( <имяэлемента> ), закрывающего тега ( </имяэлемента> ) и контента, расположенного между этими тегами. Среди HTML-элементов есть исключения, т.е. имеются элементы, которые состоят только из одного открывающего тега, но эти элементы не определяют структуру HTML-документа и рассматриваться в этой статье не будут.
Контент, находящийся между открывающим и закрывающим тегом некоторого элемента (1), кроме текста может также содержать другой HTML-элемент (2) или другие HTML-элементы (3). В этом случае этот элемент (2) или эти элементы (3) будут вложены в элемент(1). Т.е. между ними образуется связь родитель (1)-ребёнок (2) или родитель (1)-дети (3).
В свою очередь элемент (2) или каждый из HTML-элементов (3) могут в качестве контента тоже содержать HTML-элементы и т.д.
Таким образом получается древовидная (иерархическая) конструкция, структура которой определяется в зависимости от того в каком элементе находится тот или иной элемент.
Иерархические отношения между HTML-элементами
Родитель (parent). Каждый HTML-элемент имеет родителя. Для некоторого HTML-элемента родительским является тот элемент, в который он вложен.
Ребёнок (child). В каждый HTML-элемент (1) может быть вложен другой HTML-элемент (2) или несколько HTML-элементов (3). Каждый из этих элементов (2, 3) являются для элемента (1) ребёнком.
Предок (ancestor). HTML-элемент (1) считается предком некоторого другого HTML-элемента (2), если он является родителем его родителя или имеет ещё более дальнюю родительскую связь.
Потомок (descendant). HTML-элемент (1) считается потомком некоторого другого HTML-элемента (2), если он (1) является ребёнком его ребёнка (2) или ребёнком ещё более дальнего прародителя.
Сиблинг (брат, сестра, сосед, sibling). HTML-элемент (1) считается сиблингом по отношению к другому HTML-элементу (2), если оба элемента имеют одного и того же родителя.
Как правильно писать HTML-код
Создавать HTML-код, чтобы потом в него было просто вносить изменения, необходимо с учётом вложенности одних элементов в другие. Чтобы это выполнить необходимо HTML-код (1), который вложен в некоторый HTML-элемент (2), сдвигать относительно него (2) на 2 пробела.
Что такое веб-браузер (web-browsers)
Веб-браузер — это программное обеспечение для просмотра веб-страниц. Основные виды браузеров: Internet Explorer (Microsoft), Firefox (Mozilla), Chrome (Google), Safari (Apple), Opera (Opera).
Что такое user agent
User agent — это любое программное обеспечение, которое используется для доступа к веб-страницам от имени пользователей.
User agent-ами являются не только браузеры, но и программы-роботы поисковых систем Яндекс и Google.
Инструменты для создания HTML
Для создания HTML-документов использовать какие-то специализированные инструменты необязательно. Писать код HTML можно используя простые текстовые редакторы, такие как Notepad в Windows, TextEdit в MacOS, gedit в Ubuntu Linux и т.д.
Однако при выборе текстового редактора, необходимо проверить то, что он позволяет сохранять содержимое файла (веб-страницы) в кодировке UTF-8.
При создании веб-страниц необходимо учитывать то, что их отображение в разных браузерах может немного отличаться. Т.е. их необходимо во время разработки проверять правильно ли они сделаны или нет в двух или более веб-браузерах.
Создание HTML-документа
Создание HTML-документа начинается с указания типа документа. Т.е. первое что необходимо указать при создании документа — это то, что документ является HTML 5.
После этого пишется элемент html . Данный элемент состоит из открывающего тега ( <html> ), контента и закрывающего тега ( </html> ).
Контент данного элемента — это содержимое HTML-документа (веб-страницы).
Элемент html всегда следует указывать с атрибутом lang . Атрибут lang предназначен для задания основного языка, который будет использоваться в содержимом данного элемента.
Например, lang=»en» — означает, что текстовое содержимое элемента html будет соответствовать английскому языку. А например, указание атрибуту lang значения «ru» означает, что текст контента элемента html будет на русском языке.
Если рассматривать HTML-документ как древовидную структуру, то в ней, элемент html является корнем.
Элемент html содержит в качестве контента всегда два элемента. Первый элемент — это head , а второй элемент — это body . Элемент body всегда располагается после элемента head .
Элемент head также как и элемент html состоит из открывающего тега ( <head> ), контента и закрывающего тега ( </head> ). Он используется как контейнер для того чтобы содержать другие элементы, которые предназначены для того чтобы предоставить данные о странице (коллекцию метаданных HTML-документа). Т.е. он содержит HTML-элементы, которые предоставляют user agent информацию о заголовке страницы ( title ), кодировке символов, подключенных стилях CSS и многое другое.
Содержимое элемента head не отображается в окне или вкладки веб-браузера.
Элемент head при открытии некоторой веб-страницы в браузере всегда загружается первым, т.е. до загрузки контента body (видимой части HTML-документа). Т.е. он (элемент head и его контент) в основном предназначен для сообщения браузеру (user agent) всей дополнительной (служебной) информации, которая необходима для правильного отображения содержимого элемента body .
Элемент body состоит из открывающего тега ( <body> ), контента и закрывающего тега ( </body> ). Он является контейнером для контента HTML-страницы, который отображается в рабочей области окна или вкладки браузера. Т.е. он содержит всё то, что видит пользователь в окне или вкладке браузера.
Добавим в элемент head информацию о заголовке веб-страницы. Заголовок веб-страницы создаётся с помощью элемента title . Элемент title , состоит из открывающего тега ( <title> ), контента (заголовка страницы) и закрывающего тега ( </title> ).
Добавим в элемент head информацию о кодировке символов, используемых в документе. Кодировка символов указывается с помощью элемента meta и атрибута charset . Элемент meta , состоит только из открывающего тега ( <meta> ) и предназначен для сообщения различной информации о странице посредством различных атрибутов.
Основной каркас HTML 5 страницы готов. Теперь добавим текстовое содержимое в элемент body, которое увидет пользователь при открытии данной страницы в браузере.