Beginner HTML Tutorial - Your First Page
HTML Tutorial 2
Aims
To understand how your computer (and the Web) knows your file is a web page
To show the basic structure of a web page.
The special lines that show compliance with W3C standards.
To create your first page and show it displaying text in a web browser.
Getting Your Computer to Recognise Your File as a Web Page
If your are using the Internet, the program you are using knows that the page is for the Internet. However, on your computer are various different types of files: programs, word-processed documents, spreadsheets, pictures and a whole lot more.
Web pages have their own file types. Some examples are: HTML, PHP, SHTML, ASP, JSP. These types depend on how the page is written and what features the writer wants. If you look in your address bar in your web browser now, you will see that this page is PHP.
All the files on your computer have extensions, whether you can see that or not. The extension determines the identity of that file and what program tries to open it.
For example: Microsoft Word documents are .docx, Excel documents are .xlsx, programs are .exe (in Windows) or .app (in MacOS X).
The same applies to files for the Internet. So, for these tutorials, you must ensure that all your files that you play with are .html. Some code editors make this easy and provide the option for saving as a HTML page (TextEdit for Mac does).
However, if you are using an older version of Notepad for Windows, you will need to do the following:-
Open NotePad and then go to File -> Save As...
When you choose your filename, ensure that you put .html on the end, e.g. mypage.html
Click OK
The reason for this is that NotePad will automatically add the .txt exention which means "this file is just boring text" and your file needs to be one to open in an Internet browser!
Please Note: You will have to open your new HTML file from inside your editing program now because if you double-click it, it will open in your web browser.
Having saved a blank text document as a .html file, remember where you have saved it and let's move on!
The Basic Structure of a Web Page
As we saw on the first page, a HTML file (or web page) is coded using tags, which can define areas of a page or things on that page.
A Reminder about Tags
We will build up your understanding of tags gradually through these tutorials, but for now just remember that some tags come in pairs.
<this> is an opening tag of a pair.
</this> is a closing tag of a pair.
Got it? Then look below and see the basic layout of a web page.
<html>
<head>
</head>
<body>
</body>
</html>
What does that lot mean, then?
HTML Tag: the HTML tags go at the start and at the end of your document. This tells your browser that what falls between them should be defined as HTML. So, unless I say otherwise, don't put anything before <html or after </html>.
HEAD Tag: What comes between these tags is not intended to be displayed as part of your page. Between these tags we can tell the browser things about the page or do stuff in the background. It is a useful place for many things, and I will introduce one of them later on.
BODY Tag: Between these two tags is stuff you want to display on your page. All of it. So if you need to put more on your page, then create more space between these two tags. Simple as. You can also set a few basic settings for your page using the body tag, which we will come to later on also! One step at a time.
So there you have it! That is the structure to create a perfectly empty web page. We will add something to it in a sec!
Telling the Browser that you have Standards!
Now I will let you put something before your opening <html> tag. Didn't take me long did it? I also won't tell you to put anything else here at all!
To tell your browser, the browsers of people reading your page and W3C that your page will have standards, we need to add a special line in:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
All you need to know for now is that there are varying levels of "standards" from quite lenient to very strict. We will be going "Middle-ground" for now and using the "Transitional" standards.
The other thing to explain is that HTML itself is updated and changed over time so the "4.01" is the standards we are using. If it is deemed necessary, as the standards and capabilities of HTML change, these tutorials will also be updated.
So place that line above your <html> tag. Always have this line when you start any new HTML page. It will be very useful when we come to test our page with W3C.
Creating Your First Page
Let's put something in your head!
When you load a website in any browser, the page you loads has a title. You may not have known it, but look at the top of your window and you will see some text saying "Free HTML Tutorials". If you're using a tabbed browser some of that text may appear on your tabs too.
This is put there using the <title> </title> tags. You must use these - firstly because the standards say so, and secondly because it's partly how people will find your site when they search the web.
To make the most of this title tag, make sure that it describes what the page is about. Do not use the same title for all your pages, so check each one. So if your page was about the King Charles Spaniel and how to care for them, your title might simply be:-
<title>King Charles Spaniels - how to care for them</title>
What else goes in the head?
If you progress through all the tutorials here you will see that various things can go into the HEAD:-
Cascading Style Sheets (CSS) - defining the style of elements of your page.
JavaScript functions - to add inter-activity or to simplify your visitors' experience
External File Links - to be able load separate files into your document which eases editing across a whole website
But do not worry about this right now, I'm just painting a picture for you. Let's add something to your body!
Adding headers and text to your BODY
Your page content - whatever that is, goes between the two BODY tags. And now we can introduce you to header tags.
The TITLE tags, remember, do define the page title, but they do not display anything on your actual page. The simplest way of dividing up your page is by using relevant HEADER tags, which are in pairs like so:-
<h1>This is the largest Header</h1>
<h2>This is a second level Header</h2>
<h3>This is the largest Header</h3>
And so it continues on to h4, h5, h6. Why you would need that many, I'm not quite sure.
What HTML does for you here is that each header is a bit smaller than the previous one - without you having to set the font-size at all.
So let's use a h1 for now and see how we can add some text.
The easiest way to mark text into paragraphs is to use the <p></p> pair - see it's just a P for "paragraph". When you put some text between these HTML automatically adds some spacing before and after your paragraph.
If you look at the source code of this page (accessible through your 'View' menu), you will find a lot of these P tags. You don't have to use them, but they are very useful.
So here's a demo page:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>
Welcome to my first web page!
</p>
<p>
I will add more stuff when I know how - thanks for stopping by!
</p>
</body>
</html>
You should understand all of that now, right? If not, go back and review this tutorial again! Once you're happy, save the page above on your computer (make sure you save it as a webpage - HTML or HTM) then open the folder and load it into whatever program you use to browse the Internet!
Well Done!
No comments:
Post a Comment