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 it’s clear for what you need HTML, but how does it really work?
Here is a complete basic backbone.
<title> Example </title>
<h1> Hello </h1>
<h2> world </h2>
<h3> !!! </h3>
<p> This is an HTML example. <br/>
<b> This text is bold. <br/>
<u> This text is underlined </u> <br/>
<i> This text is cursive </i>
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.