What is HTML?

At the end of this topic you will:

  • to know basic principles НТМL
  • to know about the main tags
  • to use HTML
  • to know about the structer of the web page

Why should we know HTML?

A long time ago, in a computer lab far, far away, some guys at IBM developed a language to aid in the production of documents. Features of this language were adopted by the Jedi Sir Tim Berners-Lee for his HyperText Markup Language, or HTML. As indicated by the term hypertext, this was designed around the concept of associating bits of text with the addresses of other documents. These bits of text were (and are) called hyperlinks, and are very simple and versatile so that HTML can evolve to support ever-increasing levels of communication without breaking them. Thus HTML has become the language, in fact the very essence, of the World Wide Web.

HTML stands for Hyper Text Markup Language, i.e. hypertext markup language is the main building block of web pages, used to create and visualize web pages. HTML adds markup to plain text. Hypertext contains various links through which web pages are linked. With HTML, anyone can create both static and dynamic sites. HTML is a language that describes the structure and semantics of the content of a web document. The content of a web page is marked up using tags that represent HTML elements.

The main tags

An HTML document consists of a tree of HTML elements and text. Each element is identified in the source document with a start (opening) and end (closing) tag (with rare exceptions). The start tag shows where the element starts, the end tag shows where it ends. The closing tag is formed by adding a slash / before the tag name:<tag name>...< / tag name>. Between the start and end tags is the element's content - content. Elements represented by single tags cannot store content directly in themselves, it is written as an attribute value, for example, element <input type="button" value="Кнопка">will create a button with the text Button inside.

All main tags

  • <!-- Comment -->
  • <!DOCTYPE>
  • <a>
  • <abbr>
  • <acronym>
  • <address>
  • <applet>
  • <area>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
  • <basefont>
  • <bdi>
  • <bdo>
  • <bgsound>
  • <big>
  • <blink>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <center>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <command>
  • <comment>
  • <data>
  • <datalist>
  • <dd>
  • <del>
  • ><details>
  • <dfn>
  • <dialog>
  • <dir>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <font>
  • <footer>
  • <form>
  • <frame>
  • <frameset>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <head>
  • <header>
  • <hgroup>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <keygen>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <main>
  • <map>
  • <mark>
  • <marquee>
  • <menu>
  • <menuitem>
  • <meta>
  • <meter>
  • <nav>
  • <nobr>
  • <noembed>
  • <noframes>
  • <noindex>
  • <noscript>
  • ><object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <param>
  • <picture>
  • <plaintext>
  • <pre>
  • <progress>
  • <q>
  • <rp>
  • <rt>
  • <rtc>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <source>
  • <spacer>
  • <span>
  • <strike>
  • <strong>
  • <style>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <template>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <track>
  • <tt>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>
  • <xmp>

Web page structure

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>Example web-page</title>
</head>
<body>
<h1>Title</h1>
<!--Comment -->
<p>First paragraph</p>
<p>Second paragraph</p>
</body>
</html>

Elements inside an element <html>, form a document tree, the so-called document object model, DOM (document object model).Moreover, the element <html> is the root element

To understand the interaction of elements of a web page, you need to consider the so-called "relationship" between elements. Relationships between multiple nested elements are categorized as parent, child, and sibling.

HTML elements for text

1. Titles: <h1...h6>

2. Text formatting: <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>, <mark>

3.Entering "computer" text:<code>, <kbd>, <samp>, <var>, <pre>

4.Formatting quotes and definitions: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>

5. Paragraphs, text wrapping:<p>, <br>, <hr>

How to make hyperlinks on the site

Hyperlinks are created using the <a> </a> element. Inside is the text that will be displayed on the web page. The link text is displayed in the browser with an underline, the font color is blue; when you hover over the link, the mouse cursor changes its appearance. The required parameter of the <a> element is the href attribute, which specifies the URL of the web page.

<a> href="http://site.ru"><a>

Inserting images into an HTML document

The element <img> represents the image and its fallback content, which is added using the attribute alt. Since the element <img> is inline, then it is recommended to place it inside a block element, for example, <p >or < div> . The element<img>has a required src attribute whose value is an absolute or relative path to the image

<img src="image.png" alt="Example">

How to create a table

A table is created using the <table> </table> element, which is a container for table elements and all elements must be inside it. For example, using this markup, you can create a table with two columns and two rows

<table>
<tr><th>header text</th><th>header text</th></tr> <!--row with header cells-->
<tr><td>data</td><td>data</td></tr> <!--row with table body cells-->
</table>

Tasks to Practice

Rate This Article!

Found Mistakes?
Help Us!

Nazar 2 days ago

awesome website. thank you!

0
Reply
Natalia 2 days ago

Amazing!!

0
Reply
Tatsiana 2 days ago

i loved this article!

3
Reply
Login | Sign Up

Copied Email!

Learning

Articles

Cheatsheets

Thank Your For Your Grading

Leave Your Comment!

Nazar

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tatsiana

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Natalia

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tasks for Topic 1:

Task1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Task1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Task1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Found Mistakes?
Help Us!

Thank Your For Your Response

Log In

Full Page

Sign Up

Full Page