Create your own website – the basics of html and css – part 1

You always wanted to create your own website, but you don’t know anything about programming? Then I’ll show you here the basics you need to get started without much prior knowledge! Today I show you the basics around HTML.

1. What are HTML and CSS?

First of all, let’s clarify the most important terms. We humans can communicate with the help of our language. But computers don’t understand this language, so we have to use special formal languages to make them understand our commands.

HTML, the abbreviation of "Hypertext Markup Language", is a so-called "markup language", which defines the basic structure of a website, i.e. specifies which elements are in it. You can think of it as a skeleton, without any decoration or positioning of the individual elements.

With the "style sheet language" CSS, short for "Cascading Style Sheets", you can then give this skeleton certain attributes, such as the color ‘yellow’, the size ‘400 pixels’ or the position ‘centered’. Putting the finishing touches on your page.

2. Apps for programming:

To create pages with HTML you need a special program which makes programming easier for you. I can recommend you the program "Atom" (unpaid advertisement!) recommend. Even if the main language is English, it offers a simple user interface and is easy to use. Download and install the app on your computer.

3. Creating your first HTML page:

In the file manager, right-click in the "Desktop" folder and go to "New"> "Folder" to create a new folder. Name him now best "Atom" so that you can find him again quickly. Open the folder with a double left click and create a file with the name "index".html" and one called "style.css" by clicking once with the right mouse button and clicking "New"> "Text Document" go. Delete the file extension and click on "Okay" if a warning appears. You can just ignore them.

To make it easier later, create another folder in the "Atom" folder and name it "pictures". You can put all the photos you want to see on your website in there later.

Start as the next atom. When the program creates your "index" file.html" does not open automatically, go to "File"> at the top "Open Folder…", search for your folder "Atom" and go to "Select Folder". The whole thing should now look like this:

Double click with the left mouse button on "index.html" and "style.css" so that both windows open.

4. Basic HTML:

As said before, HTML is a language that the computer should be able to read. Therefore there are a few rules to follow.

  1. Die einzelnen Strukturbefehle in HTML werden immer in “<” und “>” geschrieben. For example, if you want to define the header of your page you write<header>.
  2. A new section is always marked with<…> introduced and with</…> closed, in between come subordinate commands. So at the beginning of the header you write<head>, dann kommen darunter alle anderen einzelnen Elemente, die in den Kopfteil gehoren (z. B. A header) and then you close the header again with</header> from.
  3. Subordinate structures are always written one line below their "parent element" with a paragraph to the inside. So, for example, if you want your header to contain a headline, then<head> the parenting order of<h1>, the command for a header. <h1> must be a line under<head> Stand and tab (the one with the arrow pointing right and left over each other) once indented.
  4. Between the beginning and the end of commands you can write any text you want to appear on the website. So if you want to define the heading "School is great," write this text between the beginning of the heading command<h1> and the finishing</h1>. So in the end it looks like this:<h1>School is great</h1>

Damit dein Browser die Seite richtig darstellen kann und das Programm die HTML richtig programmieren kann, musst du zu Beginn deiner Datei ein paar allgemeine Dinge hineinschreiben (nur das, was zwischen den An- und Ausfuhrungszeichen steht):

  • "<!DOCTYPE html>”: Dieser Befehl zeigt deinem Programm an, dass es sich um ein HTML-Dokument handelt.
  • [once indented] "<html lang="en">": This is where you officially start the HTML page and define the language of the website as German.
  • [nochmal eingeruckt] “<head>”: Damit definierst du den ‘Kopf’ der Seite, den nur das Programm und nicht der Besucher deiner Seite sieht.
  • [indented again] "<meta charset="utf-8″>": using this command tells your program how to encode each character.
  • [below] "<meta name="viewport" content="width=device-width, initial-scale=1.0″>": this command will cause your page to be viewed on a mobile device such as a cell phone or tablet.
  • [below] "<title>…</title>": Here, instead of dots, you can set the title of your website, which is written on the top of the tab in your browser.
  • [darunter] “<link href=”style.css" rel="stylesheet" type="text/css">": This statement becomes important later when it comes to CSS. Hieruber sagst du dem Programm, dass es die Datei “style.css" if it wants to know how exactly it should look like. ATTENTION! Make sure you use the ‘style’ file.css" never, or if you rename it, also in your program the name "style.css" replaced by the new title. Also on moving the file "style.css" you should do without for the time being as a beginner.
  • [below] "<link href="pictures/…" rel="icon" sizes="64×64″>": If you want a small image to be displayed next to the title of your website, you can save it in your previously created "pictures" folder and replace the three dots in the command with the name of the image file (with file extension). It’s best to make sure the image is square, otherwise it will be distorted.
  • [eins zuruck] “</head>”: Mit diesem Befehl schliebt du das Strukturelement “Kopf” wieder.
  • [one back] "</html>": this statement must always be at the very bottom of your program, as it closes the HTML page and tells the computer "stop reading here". So everything you want to see on your page has to be between the commands</head> and</html>.

If that was too complicated to explain now, here is a photo of how it should look:

5. Define the content of the page:

And already you can start writing in the page! Since every skeleton has a body, start with the<body> command unter</head>. So that you don’t forget to complete the command again as well, I advise you to write the ending underneath as well. Like this:

Between the commands<body> und</body> you can now insert further elements. Lass uns einmal mit einer einfachen uberschrift anfangen. This you write as previously mentioned between<h1> and</h1> one line below<body> and moved inwards by one tab stop. Here’s another image to simplify things:

Vergiss nicht, zwischendurch oben links auf “File”> “Save” oder mit der Tastenkombination “Strg” und “s” zu speichern. Let’s take a look at the page! Gehe wieder in den Dateimanager, klicke einmal links auf deine “index.html"-file and then right again. Go to "Open with" and choose your favorite browser (z. B. Chrome, Firefox, Opera, Internetexplorer). Now your HTML should open in a new tab. In Firefox, it should look something like this (it is possible that a different font is used):

Great or? But still a bit boring in my opinion… To spice things up a bit and to give your HTML skeleton a nice look CSS comes into play next. But that’s enough for today, we’ll explain how CSS works tomorrow. I would be happy, if you then drop by again!

Under your heading you can now add tables, subheadings, texts, etc. Insert at your discretion. Probier dich gerne aus so lange du auf den Beitrag zu CSS wartest!

6. The most useful elements for your HTML page:

In the following you can see a few elements that are often found on websites. The first picture shows the HTML, while on the lower one you can see the display in the browser.

1. Textblocke:<p>Hier kommt ein Beispieltext rein</p>

2. headings:<h1>erste uberschrift</h1>;<h2>zweite uberschrift</h2>;<h3>dritte uberschrift</h3>;<h4>vierte uberschrift</h4>;<h5>funfte uberschrift</h5>;<h6>sechste uberschrift</h6>

  • Liste mit Anstrichen (unsortierte Liste):<ul> (Anfang der Liste);<li>Text 1</li> (Listenelement 1);<li>Text 2</li> (Listenelement 2); …;</ul> (end of the list)

  • List with numbers (sorted list):<ol> (Anfang der Liste);<li>Text 1</li> (Listenelement 1);<li>Text 2</li> (Listenelement 2); …;</ol> (end of the list)

4. Tabellen: (Bei HTML-Tabellen geht man immer Zeilenweise vor um die Inhalte zu definieren)<table> (Anfang der Tabelle);<tr></tr> (Tabellenzeile);<th>uberschrift 1</th> (table header content 1);<th>headline 2</th> (table header content 2);<td>content 1</td> (table field content 1);<td>content 2</td> (tablefieldcontent 2);</table> (end of table)

I think that was enough for now, if you want to learn more about HTML, I can recommend the following sites:

Hat dir diese Seite geholfen? Dann wurden wir uns uber einen netten Kommentar freuen!


Hello! My name is Olivia and I have taken over the leadership of the school newspaper Apropos this year. In meinen Artikeln widme ich mich vorrangig Themen rund um den Fernostlichen Raum, aktuelle News und Schulhilfen. I also like to share my enthusiasm for cooking and baking here and provide you with recipes and other foodie info.

Like this post? Please share to your friends:
Leave a Reply

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: