This is a free website created with hPage.com.

Introduction!


When creating a website today you basically have the option to create the website from scratch or use a service where most of the hard work is already done for you.


Shezzy Tells for example is made with a homepage builder called hPage - it allows me to chose from a variety of premade templates and I can edit the individual pages and the layout pretty much like I would edit a document in a text editor like Word. But that is just one of hundreds, if not thousands of the available services.


The other option, making it from scratch, is the one I'm introducing here. To be more specific, I'll teach you the basics of HTML and CSS - the "programming language" of the Internet (it's not a programming language but I am still comparing it to one).

 


Content!


Date of Creation: 24.04.2017 19:29:06

Last updated: 06.02.2021 19:55:01

Visitors total: 6246

Now online: 1


Lesson 1: Creating an html document


Open up a text editor on your computer. If you use windows, use Editor or Notepad for example.


Now enter the text the below (Attention: The colors are just a visual guide, and the italics are explainations that should not be copied into your document). 


Now save this document with the ending .html (if you don't have the option in the save menu, chose "all file types" and then add the ending manually). 


Congrats! You've now sucessfully created a homepage. Doubleclick on the file in your explorer to open it in your browser.




What you need to know here


HTML is only the content of the page, so the text, images and other files. For all of the visual information like font type or colors and also things like animations you'll need CSS. These are (at least) two seperate files that work together to create a webpage. 


To tell the browser what element of the document is what, you use HTML tags. They are always put in <these brackets>. Most HTML tags have a start and a beginning, the </end tag> has a slash. 


Btw: You can make notes in your HTML code by using this: 


<!-- your notes -->


<!DOCTYPE HTML> (file type of this document, in this case HTML)

    

    <head> (start of the header, this part will usually not be visible on the page)


        <title> My homepage </title> (title of the webpage, will for example be shown in the browser tab)

        <link rel="stylesheet" type="text/css" href="JGstyle.css"> (link to the css-file, more below)


    </head> (end of the header) 


    <body> (start of the main part) 

        <section> <!-- Gruppe -->

            <h1>Hallo Welt</h1> <!-- Überschrift -->

            <p> Das ist eine Webseite 

            </br> mit der üblichen Struktur </p> <!-- Paragraf -->

            <ol> <!-- Geordnete Liste -->

                <li> HTML </li> <!-- Listenelement 1 -->

                <li> Head </li> <!-- Listenelement 2 -->

                <li> Body </li> <!-- Listenelement 3 -->

            </ol>

            <hr> <!-- Trennlinie -->

            <hr> <!-- Trennlinie -->

        </section>            

    </body>

To the top

This is a free website created with hPage.com.