|
Classroom 1. Basic HTML
The following tutorial will bring you closer to the wonders of HTML (Hypertext Markup Language). It is a very easy textformating-language for the World Wide Web. With HTML it is easy to do textdocuments and they can be published to a huge potentially world wide audience, because the HTML-Format will be compatible to computers all over the world.
Now we will start with your first homepage that is done by HTML-orders (tags). So go ahead and open up your Editor by clicking on START/PROGRAMS/ACCESSORIES/EDITOR.
By writing html-code you will tell the computer what he has to do and the first thing you tell him is that he has to deal with html-code. That looks like this:
The first tag on top “<html>” tells the computer that everything that will come down under will be html. The second tag “</html>” means that html stops here. So everything that will go inbetween the tags will belong to the html-document. Every html-document (except frames (chapter 5)) has to have a head and a body. In the head there should go the title of the document that will be shown at the very top of the internet-browser. This is how you can write it:
The things you are writing in the head-section woun´t be shown by the browser (except within the title-tag), but the stuff that will be put into the body-section will be shown. We will try this out now by writing a sentence in the body-section:
Please safe the document in a html-format (example: mywebpage.html) and open it up in the browser again. See how it looks!! You did that! What we now learned is the basic structure of every html-document. Next we will learn more formating-tags: Notice, that every tag (almost) in html has to be opened and closed again. You can set up general settings for the whole body of you document by expanding the body tag:
The tag <“bgcolor=”lightblue”> sets the screencolor to lightblue. Save the document again and press in your browser the “reload-button” to see how it looks. You can put in a backroundgrafic instead of a backroundcolor. The tag <“background=”back.gif”> includes the grafic-file that is going to be shown in the back of the screen. The grafik file has to be in the same folder like the html-document.
Try out the following formating-tags and save your document again and press “reload” in the browser.
As you see it is all written without a pagedown or a textbreak. For pagedowns (two lines down) you
can use “<p>” and for textbreaks “<br>”. This two tags don´t need a close-tag.
So lets add this to the code to see what it does to it:
Every text needs a headline. In html there are 6 different sizes of headlines:
General text styles can be set up with the font tag. The settings will rule everything that is inbetween the tags.
This is a text that will be shown in the font “arial” in a red color and the textsize will be 6! To make all this look nicer we will bring in the tag “<center>” that will center the text:
Very important in a hypertext document is it to know how to put in a link:
This link with the “<a href=”http://www.icja.de”> ICYE-GERMANY </a>” is pointing to the website of the ICYE-GERMANY. The text before the “</a>” closing text is the one that will be shown in the webbrowser. You can link to a file on your on website that you did make already:
The last thing I am going to introduce is how to insert a picture into your webpage. You need to have a grafic-file already to do this.
In the next chapter you will learn to work with a Webpage-Editor that will write for you the html-code. So it is much easier than doing all the programming by yourself.
|