in the basics by fyd on 14 Jan 2008
If you're looking to get started learning HTML the good old 'Hello World' is a fine place to start. I'll take you through the simple steps of setting up a very basic HTML web page. We will just display a simple line of text saying… Hello World!
So, let's get started. Here is what you need:
- Text Editor - I'll be using NotePad
- Internet Browser - Firefox for me, but Internet Explorer is fine
You don't need much - here we go…
File setup
First of all, open up NotePad
Goto File->Save As… Pick where you want to save your file and in the File name: box type in the name you want and a .html - I'm using hello.html
The .html tells the computer the file will be used in an Internet browser other wise it would just be a text file.
Some HTML
Now we'll get started into the HTML. First, we are going to create the basic shell that you need for a web page. Here is the code just type it into NotePad(just the blue text) - I'll explain it next:
<html> - marks the start of an HTML document <head> - contains info about the document <title></title> - page title shows in browsers title bar </head> - head section has ended <body> - where the content is displayed </body> - body section has ended </html> - end of HTML document
So, that is the basic shell for any HTML page (technically the title doesn't have to be there). Of course, if you look at it in your browser you aren't going to see anything yet. But before we get into our content lets talk a little bit more about that code we just typed in.
Those 'things' you just typed in are tags. Now a days tags in HTML will always be closed because that is the standard(more on that in the future). There are two-sided tags. What two-sided means is that each tag has an opening tag and a closing tag. <></> The / indicates the second or closing tag. And there are one-sided tags which close inside itself. It looks like this < /> - the / shows that the one-sided tag has been closed. We don't have to worry about that just yet.
We call what the word inside the tag an element. So it's <element></element> - Then there are empty elements which are basically one-sided tags <element />
Let's do two more things to our code - add a title and output some text - so we can finally see the results of our work.
<html> <head> <title>My First HTML Page</title> </head> <body> <p>Hello World!</p> - our text in a paragraph tag </body> </html>
Alright - after you save the file - the title 'My First HTML Page' will show up in the bar at the very top of your web browser and you should see the text 'Hello World!' in your browser. My results
The new tag we used here was the <p></p> tag or the paragraph tag. It is what we call a block-level element. The paragraph tag tells the browser to start a new line with a blank space above it - so it helps separate blocks of text. Notice we put the text inside the <body></body> tag. This is where we will put anything we want to display in the browser window.
I think that's a good place to stop for now. In the future we will get into headings, images, color, css properties, and code needed for things like validation.
Popularity: 6% [?]
