The HTML Backbone

Web development offers countless possibilities. Programming a webpage is not too difficult if you know some basic things about it.

By Sarah TrmmrPublished 7 years ago • 2 min read

The basic framework of a website is relatively simple and can be implemented with the help of an editor. How do you program a website? What do you need? What do you have to look out for? In this article, I will deal with these questions more closely and bring you a little closer to your self-programmed page. So, what do you need for the beginning?

Basically, you only need an editor like Notepad ++ or Atom (there are much more possibilities, you have to look which one you like the most) and a web browser like Chrome, Firefox, etc.

Now we come to the essential. A website is built on HTML. HTML means “hypertext markup language” and is used to structure a website (later you can expand the design with CSS and add functionalities with Javascript or PHP) and is displayed by web browsers. Important elements of an HTML file are tags. These consist of a less-than sign, the tag as a word, and a greater-than sign. For example, a tag looks like <body>. If a tag is opened, you must close it again.

Now it’s clear for what you need HTML, but how does it really work?

Here is a complete basic backbone.

<!DOCTYPE html>

<html>

<head>

<title> Example </title>

</head>

<body>

<h1> Hello </h1>

<h2> world </h2>

<p> This is an HTML example. <br/>

<u> This text is underlined </u> <br/>

<i> This text is cursive </i>

</p>

</body>

</html>

This is how this code is shown in a browser.

Now, to the explanation...

<! DOCTYPE html>: This is how each HTML file starts. This line serves the browser, so he knows it is an HTML file.
<html>: With this tag you open the HTML file. Everything that is between <html> and </ html> is part of the HTML file.
<head>: This tag is used to open the header of the file. The header contains metadata, the title of the web site, or the tags for embedding design or functionality. Everything in the header is invisible for the user on the website.
<title> Example </ title>: This is the title of the web page, which is displayed in the browser tab.
</ head>: Here the head is closed.
<body>: Now we start with the body of the HTML file. What is in the body is also displayed.
<h1> Hello </ h1>, <h2> world </ h2>, <h3> !!! </ h3>: Tags that contain a h1, h2, or h3 (that also goes with h4, h5, h6, etc ...) are recognized as headings and the higher the number, the smaller the font size.
<p>: This tag represents a paragraph.
<br />: To make a line break, use this tag. You can close it with the slash directly, because a line break has no content.
<b> </ b>: The text is bold.
<u> </ u>: The text is underlined.
<i> </ i>: To write a text in italics, you need this tag.

Here is a self-contained cheat-sheet as an overview of the possible and most frequently used HTML tags.

If you understand the basic framework, the web development offers so much more. You can use CSS to change the design and create animations. Javascript and PHP are then available for the functions.

how to

About the Creator

Sarah Trmmr

Reader insights

Be the first to share your insights about this piece.

How does it work?

Add your insights

Comments

There are no comments for this story

Be the first to respond and start the conversation.

Keep reading

More stories from Sarah Trmmr and writers in 01 and other communities.