Hello every one, I'm going to give you a few simple lessons on how to design website. This tutorial will cover basic steps required in website development. I will ensure to be brief but then explain the technics needed. You'll be happy to learn that it's really pretty simple. The basic idea is this... A web page is nothing more than a file, a HTML file to be exact. It's called HTML because web page documents have the file extension .html.
HTML is a markup language for describing web documents (web pages).
- HTML stands for Hyper Text Markup Language
- A markup language is a set of markup tags
- HTML documents are described by HTML tags
- Each HTML tag describes different document content
A small HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
- The DOCTYPE declaration defines the document type to be HTML
- The text between <html> and </html> describes an HTML document
- The text between <head> and </head> provides information about the document
- The text between <title> and </title> provides a title for the document
- The text between <body> and </body> describes the visible page content
- The text between <h1> and </h1> describes a heading
- The text between <p> and </p> describes a paragraph
If you are unclear about this file extension stuff, then you really are newbie!
Let's get started. First, What's the best way to learn HTML?For me, I will tell you it is the use of "Text Editor" (Examples: Notepad, Notepad++, etc) . I do use Notepad++. I know, I know, you got this "Web design Software" that says it's gonna make putting up a web page as easy as scratching your head. But its better to have a strong foundation on coding and scripting rather than to have a software do it for you.
Notepad++ is a source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment.Click here to download
Another tool you'll need is a modern browser to view your web pages. Mozilla Firefox is what I will recommend. If you're using something else, it should be OK for most things. If you're using something provided by those Internet in a Box packages, you're on your own because I have no idea what they give you to work with. Quickly, be sure to have other browsers installed in your computer so as to test your webpages in different browsers.
With that out of the way I can say with confidence that you are less than 5 minutes away from making your first web page! So.. off we go.
LESSON 1
Just like 'follow the bouncing ball', power up Notepad++ and start with this...<HTML>
</HTML>
Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag.
Think of tags as talking to the browser, or better yet giving it instructions. What you have just told the browser is 'this is the start of a HTML document' (<HTML>) and 'this is the end of a HTML document' (</HTML>). Now we need to put some stuff into it.
Every HTML document needs a pair of HEAD tags.
<HTML>
<HEAD>
</HEAD>
</HTML>
The only thing we have to concern ourselves with in the HEAD tags (for now) are the TITLE tags.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
And the bulk of the page is going to be within the BODY tags.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Oh, and one more thing, give your document a title.
<HTML>
<HEAD>
<TITLE>I don hammer dot come!</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere. If yer a little fuzzy about how to do this then here's what you do... Go and register for a computer class. LOL.
You will be presented with a dialog box. Make a new folder by clicking this ->
Name it whatever you want. Then double click on it to open it up. Where it says File name: type in page1.html Where it says Save as type: make sure you select "HyperText Mark-Up Language File"
Hit return and you're done!
Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation! If you are using Mozilla Firefox, the file you made should look something like this...
Unfortunately, as you can see, the page is just a little bit blank (but it is still a legitimate HTML document!). Next order of business is to start putting some stuff in your page.
The best way to use this tutorial is to run Notepad++ and two Tab of Mozilla Firefox. One Tab containing this tutorial and the other containing your new page. Just toggle between the two Tab and windows.
Two quick points before we go on to lesson 2. One, what you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components. And two, the document title is what appears at the very top of the browser window.
Next Lesson
No comments:
Post a Comment
DISCLAIMER: Comments are opinions of those that posted it and are subject to moderation.