Wednesday 20 November 2013

Webpages are written in HTML - a simple scripting language.

HTML is short for HyperText Markup Language.

  • Hypertext is simply a piece of text that works as a link.


  • Markup Language is a way of writing layout information within documents.


Basically an HTML document is a plain text file that contains text and nothing else. 
When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the 


  • layout, 
  • insert images
  • create links to other pages and you can make your own Website.


Since HTML documents are just text files they can be written in even the simplest text editor.

A more popular choice is to use a special HTML editor - maybe even one that puts focus on the visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You Get").

Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create pages more or less as you write documents in Word or whatever text editor you're using.


http://www.echoecho.com/htmlbasics.htm

http://www.w3schools.com/html/html_basic.asp



#TUTORIAL 1#



~Basically HTML webpage have  page stucture 

~PAGE STRUCTURE HTML consist of

  1. Head-do not show directly on the page
  2. Body -are shown directly on the page
Finally, all webpages have an <html> tag at the beginning and </html> the end, telling the browser where the document starts and where it stops.

For example..the basic coding ,

<html>
<body>

<h1>My First Heading<?h1>
<p>My First paragraph.<p/>

</body>

</html>

the result show like this->

My First Heading


 My First paragraph.


#TUTORIAL2 #


how to make different kinds of bulleted lists.


You have the following bullet options:

  • disc

  • circle

  • square





#TUTORIAL3 #



 how to make different kinds of numbered lists.


You have the following number options:

  • Plain numbers

  • Capital Letters

  • Small Letters

  • Capital Roman Numbers

  • Small Roman Numbers


#TUTORIAL4 #

how to make a link.

The tags used to produce links are the <a> and </a>

The <a> tells where the link should start and the </a> indicates where the link ends.

Everything between these two will work as a link.

The target of the link is added to the <a> tag using 
the href="http://www.whateverpage.com" setting.

For example..the coding ,


<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>

<h2>Chapter 1</h2>
</body>
</html>


the result show like this->

See also Chapter 4.

Chapter 1

This explains .......


#TUTORIAL5#




how to put an image.

For example..the coding ,

<html>

<body>

<p>

An image:

<img src="http://www.kelownarealestate.com/Docs/COL504Docs/Submit/House_Moving.jpg" alt="Smiley face" width="32"

height="32" />

</p>

<p>

A moving image:

<img src="http://www.netanimations.net/Moving-picture-green-skeleton-animated-gif.gif"alt="Computer man"

width="48" height="48"/>

</p>

<p>

Note that the syntax of inserting a moving image

is no different from a non-moving image

</p>

</body>

</html>

the result show like this->

 An image: Smiley face
A moving image: Computer man
Note that the syntax of inserting a moving image is no different from a non-moving image 


#TUTORIAL6 #



how to make a table

Tables are defined with the <table> tag
For example..the coding ,


<html>
<body>

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With cellpadding:</h4>
<Table border="1"
cellpadding="10">
<tr>
 <td>First</td>
 <td>Row</td>
</tr>
<tr>
 <td>Second</td>
 <td>Row</td>
</tr>
</table>

</body>

</html>

the result show like this->

Without cellpadding:

First Row
Second Row

With cellpadding:


First Row
Second Row



Row _ _ _ and Column -
                                                  -
                                                  -

You can divide rows into columns with <td> and </td> tags

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>

To add rows to your table use the <tr> and </tr> tags.

<h4>Without cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>

Without cellpadding:

First Row
Second Row

No comments:

Post a Comment