Showing posts with label learning. Show all posts
Showing posts with label learning. Show all posts

5/27/2009 08:44:00 AM

(0) Comments

Learning basic HTML to write a webpage.

supriadi

, ,

Here you will learn to make a basic web page in your notepad or word processor.

As you may have learned previously, html stands for Hypertext Markup Language. It is what your browser looks for to display a webpage the way the webdesigner intended it to look, and is a series of tags  that tells the
browser where to display what. They are commands that you control, just like telling a dog to sit. They are in plain English and an example is if you want to make text bold, you tell it to be  if you want it to be in italics, you tell it to be , you may even abbreviate some of them like  or

All tags that are opened must correspondingly
be closed, just as if you are writing a quoted statement with those "inverted commas".

A tag is closed this way  therefore we open a new tag  and close the tag 

Different tags call different functions. A full list of html tags and their functions is provided here.

Let's get straight into making your first page. Open up your notepad program and follow these step to make your first basic page in html.
(To open notepad, click on start, programs, accessories, notepad.)

To begin a webpage you must first tell the browser that it is indeed a html document, so you begin your webpage with the opening tag of  and end the page by closing the tag. 

Everything else that you put into a webpage goes in between these 2 tags

So to begin with, our page looks like this:

Hint, You can use capital OR lower case letters within your tags but DO NOT mix capitals with lower case.

The Head

Directly under the  comes the  The head is for the browsers use and shows such things as the page title, the designers name, keywords and a detailed description of what can be found on the page. The contents of the head are not visible to visitors. The tags within the head are called "Meta Tags" which if you haven't already heard mention of them, you will certainly hear a lot of as your internet experience grows. *smiles*

(If you would like to see this pages Meta Tags, select "view" at the top of your browser and click on"source".)

The easiest way to write your meta tags is to copy and paste an existing set of meta tags from an established page and change the wording within to suit your needs. Or another alternative is to go to someone who has a Meta Tag Generator and use that service. There is one you can freely use here.META TAG GENERATOR

In this example we will only add the title of the page. We will deal with meta tags in greater detail later on in the html tutorial series.

Now our page would look like this. Notice how the  is placed between both  tags




The Body

Within the body is where you place all of the things you want your visitors to see. Your background, text, images and other effects. This begins with the  tag and you usually put in a background, which can be enclosed within the body tag. This page has a white background. The html will be :

(Explanation of html code)
 Beginning of the main body or "guts" of your webpage.
bgcolor= background color.
"#FFFFFF"> This is the hexidecimal color code for browser safe colors. This code is for white.

Now we need to put in an opening statement, something like Welcome to My Website. This is done byadding a heading command or what I prefer to use FONT SIZE.

In this example we will use the font size 5 and we will center the welcome message.

Welcome to My Webpage

(Explanation of html code.)

 Start of new paragraph.

align="center" Your text will be aligned in the center of your monitor screen.
Your welcome message.
 Close the font tag so the browser does not make this font for any following text.

 Close and end this paragraph.

Are you getting the hang of this? It really is just plain English.
P is for paragraph.
Align equals where you want it to be on your page.
Font is the typing letters.
You are giving the commands to the browser to do what you want it to do.

Next we will add some text and to begin we need to tell the browser it is the start of a new paragraph and where to place the text. This is the html to do that:

 Type in text here, blah blah blah. We are making a webpage.

(Explanation of html code.)

 is for new paragraph. 

align= places the text, can be "left" "center" or "right" and is enclosed in the 

 tag

and of course we close the tag 


Now let's place an image in the center of your page to finish it off.

First we have to have a space between the text and the image.
Treat this the same as a new paragraph with the 

 tag.

"http://www.hypergurl.com/images/hypermouse.gif" width="100" height=150" border="0" alt ="Hypergurl Webhosting. Unrivalled Support.">

(Explanation of html code.)

 new paragraph.

align="center"> place the image in the center of your monitor screen.
is the location of you image, in this example it is coming from my website address, from the images folder, and the image is called hypermouse.gif.
width="100" This is the width in pixels of the image.
height="150" This is the height of the image in pixels.
border="0" This tell the browser not to place a border around the image.
alt ="Hypergurl Webhosting" The alt tag shows a little box of text when you place your mouse pointer over the image. You can put a small description of the image here.

 close the paragraph tag.

This is now your first basic html page and you finish off by closing the body tag.
 close the body.

Our finished page in html would now look like this:





Type in text here, blah blah blah




Here is what it would look like when viewed. Click Here

That is a very basic page in html.
Well done you have completed the first lesson.

5/12/2009 01:35:00 AM

(0) Comments

HTML for Beginner

supriadi

, ,

What is HTML?

A guide to learning html for beginners.

HTML are initials that stand for Hyper Text Markup Language

  • Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on.HTML does not hold to that pattern and allows the person viewing theWorld Wide Web page to go anywhere, any time they want.
  • Text is what you will use. English letters, just like you use everyday..
  • Markup is what you will do. You will write in plain English and then mark up what you wrote.
  • Language. Some may argue that technically html is a code, but you write html in plain, everyday English language.

HTML is the code behind your webpage and is what your browser looks for to display a webpage, the way the webdesigner intended it to look, and is a series of tags  that tells the browser where to display what. It is really a series of simple commands that you give to the browser, just like telling your dog to sit, and because it is in plain English it is easy to learn. For example, if you want your text to show in a bold type, you command it to be bold text , it really is that easy.

Keep this in mind: HTML documents must be text only.
When you save a HTML document, you must save only the text, nothing else. HTML browsers can only read text. Look at your keyboard. See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else.

Remember that if you are using Notepad, Wordpad, or Simple Text, the document will be saved as text with no extra prompting. Just chooseSAVE.

If you are going to start learning to write HTML, it is a good idea to learn to look at other authors' HTMLpages. The actual html potion of the page behind the pretty page you see in front of you now.

Looking at another's html code helps you learn how things are done and you can copy the style of pages that you like. Please do not just steal and copy the pages, but no one will be upset if you make the style in much the same way. For example, if you were going to build a house, you would look around to see what styles you like before deciding on your own design. Same thing here, look around the web and see what styles you like and apply them to your own ideas.

Here's how you look at an HTML document (known as the "source code")

  • When you find a page you like, click on VIEW at the top of the screen.
  • Choose SOURCE from the menu.
  • The HTML document will appear on the screen.

Try it with this page. Click on VIEW and then choose the SOURCE.
It will look like mumbo jumbo right now, but soon it'll be readable and you'll be able to find exactly how a certain HTML presentation was performed.


What are HTML Tags?

HTML works in a very simple, very logical, format. It reads like you do, top to bottom, left to right. HTMLis written with TEXT. What you use to set certain sections apart as bigger text, smaller text, bold text, underlined text, is a series of tags.

Think of tags as commands. For example if you want a line of text to be bold. You will put a tag at the exact point you want the bold lettering to start and another tag where you want the bold lettering to stop. There you have an example of how tags make commands and tell the browser how to display the text. Just like telling a dog to sit. You give the command.

All tags that are opened must correspondingly be closed, just as if you are writing a quoted statement with those "inverted commas". A tag is closed this way  therefore we open a new tag  and close the tag

Different tags call different functions. A full list of html tags and their functions is provided here.

Please click This link if you want know todayTodayIs.com