HTML only runs in a browser

Internet HTML Basics - What Beginners Need to Know

display

Strictly speaking, the Hyper Text Markup Language (HTML) is not a programming language, but a markup language - and therefore super easy to master. Here is everything you need to get started.

Note: This article is the first part of a tutorial. You can read in part two how you can give your HTML page a stylish layout with CSS and DIV.

How does HTML work?

For many, HTML is the first point of contact with some form of source code. On the one hand, websites show their source code much more voluntarily than programs and on the other hand, HTML is really super simple. HTML is not a programming language and consequently there are no complicated logics, loops, variables and so on. It is a markup language that basically only does one thing: Specifying how exactly a piece of text should look and be formatted.

Additional media such as videos, images or audio files can also be integrated via HTML. But here, too, it's just a matter of saying: Now comes a picture in the following size and with the following frame. With HTML5, more complex elements are added, for example the so-called "canvas", an area on which the user can draw.

Basically, a piece of HTML code looks like this, for example:

display

In HTML, content is always in so-called tags with angle brackets. In the example, "

" introduces a level 1 headline and "

" ends the distinction. This combination of introductory and expiring tag is standard for almost all elements. The slash (/) is always found in the end tag.

Introductory tags can also have other options, as the example of a hyperlink shows:

display

The a-tag turns the text between the tags into a link. The link target is determined by "href" (hyperlink reference). This means that the basic structure of the markup language has already been completely dealt with! Of course there are a number of elements, some with many options, so that in the end it is not always trivial to achieve the desired result. But there will be more to the most important elements later, now the basic structure of every HTML page is going to be dealt with.

In this tipps + tricks article, we explain how you can create an HTML file.

The basic structure of each side

display

Every HTML document should start with "". This is just a message to calling programs such as the browser that the document is in the HTML standard.

This is followed by the introductory HTML tag "" - all of your HTML code ends up between this and the opening tag "". In a sense, this is the big bracket that holds everything together. This is followed by two more such brackets: Metadata is specified in the HEAD area and the entire content ends up in the BODY area.

In this example, three important pieces of information are given in the HEAD area: The title should always be present; Incidentally, this appears in the title bar of the browser. In the meta tags, the character encoding is initially set to the usual UTF-8 - which ensures, for example, that umlauts are displayed correctly. The second meta tag defines the so-called viewport. This means the display size of the page, in this case the page should be as wide as the displaying device (device-witdh) and displayed in its original size (initial-scale = 1.0). Both meta tags are optional, but should be appropriate in almost all cases.

display

Now finally comes the exciting part where you can live out your creativity: In the BODY area, there is only a single paragraph, identified by the p-tag. For starters you could simply copy the above text into a text file, name it for example "my-first-page.html" and drag and drop it onto the browser - a boring but correct HTML page appears.

The most important elements

You are now familiar with the structure of HTML pages and tags - time to learn about a few key elements of content and their associated tags. A typical text structure could look something like this: Heading, paragraph, picture, sub-heading, list, sub-sub-heading, table. You can use it to create quite complex websites. You already know the heading of the highest hierarchy level, all others follow the same pattern:

display

The headings get smaller from step to step, much like you might know from text editors like Microsoft Word or LibreOffice Writer. We already had paragraphs per p-tag, pictures are new:

The img tag for images has something new to begin with: The separate final tag is missing - instead, the image tag is closed directly here with "". Why? Quite simply: there is no content that could stand between two tags. The image is specified using the "src" (source) option. If the image and the HTML file are in the same folder, the file name is sufficient, otherwise the complete path to the image must be specified. "Width" and "height" are used to specify the width and height. Instead of absolute pixel values, "50%" could also be used here, for example, in order to show the image over half the screen size. The alt option should never be missing: if an image cannot be displayed, this alternative text is displayed instead - which should be appropriately descriptive. These tags are also extremely important for visually impaired users.

display

And something else can be learned on the picture day: nesting. How about linking the image to a website?

Instead of a text, there is simply an image tag within the a-tags and the image is clickable.

display

Another popular item is the list - initially as a numbered version:

The ol tag introduces a numbered list, each list element is surrounded by an li tag. And if you'd rather have an unnumbered bullet list, just swap the ol tags for ul tags - web layout can be that easy! But not everything is that simple. Therefore, at the end, a more elaborate design element, a table with two columns and three rows:

display

















The table tag encloses the entire table. The tr-tags stand for "Table Row" and each tr-tag pair defines a row of the table. The columns are defined within these lines: In the first line, the column headings are defined using the "Table Head" tags (th). In the other lines, the individual cells are filled with content via "Table Data" tags (td).

Tables can take a long time - just nest a little bit of all the content elements you know and you will quickly see that HTML is not always trivial.

What's next?

display

You should be able to create very simple HTML pages by now. Two things are still missing so that you can actually set up an entire homepage. First of all the publication: If you have a webspace, it is sufficient to put the HTML files in the main directory (mostly "www", "www-root" or "htdocs") and name the start page "index.html".

You should also be able to link pages, which works just like external links:

display

If you prefer to test your HTML code in the browser immediately, you can of course also do so online, for example at w3chools.com.

All code examples mentioned here in the online editor at w3schools.com.

In order to create "real" websites, you will probably ask yourself a few questions. For example, how you can specify fonts and colors (keyword CSS), how content can be brought into a clean layout (container elements) or how, for example, search forms are created. And of course: Include videos. You can find the answers here.