HTML Complete Introduction, Structure For beginner

Spread the love
  •  
  •  
  •  
  •  
  •  

HTML stands for hypertext markup language which is the text markup language currently used on the World Wide Web. Html marks up commands applied to your web based content tell the browser software structure of the document when appropriate how you want the content to be displayed. Html elements generally consist of a pair of a angle bracketed tags surrounding some text.

The start tag is just like (<tag>)

<tag>                                     Start tag

The end tag is just like (</tag>).

</tag>                                     End tag

 

<tag>                                     Start tag

……..

Contents that the tag pair effects

………

</tag>                                    End tag

 

  1. Start tag                               End tag
  2. <html>                                  </html>
  3. <head>                                  </head>
  4. <title>                                   </title>
  5. <body>                                 </body>

 

The <Html>, <head> and <body> tag pairs are used to structure the document.

The <title> and </title> tag pair specifies the title of the document

Determining purpose: finding a purpose for a web site isn’t necessarily very hard. The web can be very useful and many common reasons exit to put up a website, a few of which are listed here:

  • Commerce
  • Entertainment
  • Information
  • Marketing
  • Personal pleasure
  • Presence
  • Promotion
  • Research and education
  • Technical support

Defining scope

After you define a site’s goals you need to define what is necessary to reach your goals. You might cal this defining scope. One thing to remember though scope equals money. Because the flexible nature of the web many developers want to add as much as possible to the web site. However more isn’t always better. The more that is added to the web site the more it costs. Further more having too much information makes finding essential information difficult.

Logical and physical html

          Physical html refers to using html to make pages look a particular way; logical html refers to using html to specify the structure of a document and using another technology such as cascading style sheets to design the look of the page.

Html is not a programming language

Html is not a programming language. It specifies the structure and often the layout of a document. With the introduction of scripting languages such as javascript, however the concept of dynamic html (dhtml) is becoming more and more popular and is used to create highly interactive web pages.

Why we learn html

Html (hypertext markup language) is a structured markup language that is used to create web pages. A markup language such as html is simply a collection of codes called elements that are used to indicate the structure and format of a document.

Elements in html consist of alphanumeric tokens within angle brackets

If you’re doing business on the Internet, taking the time to learn how to design your own web site and write your own HTML code (hypertext markup language) will play a major role in your success. Not only will learning HTML coding provide you with the freedom to update your own HTML documents, but it will also save you a great deal of money, as you will be able to avoid hiring a professional web designer.

If you’re looking for some HTML tags to spice up your web site, you’ve come to the right place. You will find a variety of HTML codes and tips to assist you below.

However, before reviewing the HTML tags, if you’re new to HTML and web site design, the following section will assist you in creating an HTML web page. For additional web site design information, make sure you don’t miss the web design articles and tutorials at the bottom of this page.

Creating an HTML Page

A web page is created using a language called, Hypertext Markup Language, better known as HTML Code. You can write your own coding within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for you.

HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lowercase letters.

The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket.

<font size=2>

An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser.

<font size=2>

Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and followed by an equal (=) sign.

The value follows the equal sign and is enclosed in quotes.
<font size=2>

<html> – Begins your HTML document.

<head> – Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.

<title> – The TITLE of your page. This will be visible in the title bar of the viewers’ browser.

</title> – Closes the HTML <title> tag.

</head> – Closes the HTML <head> tag.

<body> – This is where you will begin writing your document and placing your HTML codes.

</body> – Closes the HTML <body> tag.

</html> – Closes the <html> tag.

To copy and paste the HTML tags / codes from the HTML chart below into the HTML of your web page, place your mouse pointer over the beginning of the HTML code you would like to copy.  Next, click and hold your left mouse button and drag your mouse over all the HTML code you would like to copy (Example of highlighted text). Your HTML code should now be highlighted. Go to “Edit” – “Copy” on your web browser’s toolbar and then place your cursor within your HTML code where you would like to place the code. Right click on your mouse and go to “Paste.” Your HTML code should now be displaying within your HTML document.

Structure of HTML

Open the notepad and type the following as shown in the image below

html

To use any of the following HTML tags, simply select the HTML code you’d like and copy and paste it into your web page.

HTML Tags Chart

Tag

Name

Code Example

Browser View/Output

 <!–

 comment

 <!–This can be viewed in the HTML part of a document–>

 Nothing will show

<a –

anchor

<a href=”http://www.domain.com/”>
Visit Our Site</a>


Visit Our Site

<b>

bold

<b>Example</b>

Example

<big>

big (text)

<big>Example</big>

Example

<body>

body of HTML document

<body>The content of your HTML page</body>

Contents of your web page 

 <br>

 line break

The contents of your page<br>The contents of your page

The contents of your web page
The contents of your web page

<center>

center

<center>This will center your contents</center>

This will center your contents

<dd>

definition description

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term
Definition of the term
Definition Term
Definition of the term

<dl>

definition list

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term
Definition of the term
Definition Term
Definition of the term

<dt>

definition term

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term
Definition of the term
Definition Term
Definition of the term

<em>

emphasis

This is an <em>Example</em> of using the emphasis tag

This is an Example of using the emphasis tag

<embed>

embed object

<embed src=”yourfile.mid” width=”100%” height=”60″ align=”center”>

<embed>

embed object

<embed src=”yourfile.mid” autostart=”true” hidden=”false” loop=”false”>
<noembed><bgsound src=”yourfile.mid” loop=”1″></noembed>

Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music.

<font>

font

<font face=”Times New Roman”>Example</font>

Example

<font>

font

<font face=”Times New Roman” size=”4″>Example</font>

Example

<font>

font

<font face=”Times New Roman” size=”+3″ color=”#ff0000″>Example</font>

Example

 <form>

 form

<form action=”mailto:you@yourdomain.com”>
Name: <input name=”Name” value=”” size=”10″><br>
Email: <input name=”Email” value=”” size=”10″><br>
<center><input type=”submit”></center>
</form>

Name:
Email:

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

heading 1
heading 2
heading 3
heading 4
heading 5
heading 6

<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>
<h4>Heading 4 Example</h4>
<h5>Heading 5 Example</h5>
<h6>Heading 6 Example</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

<head>

heading of HTML document

<head>Contains elements describing the document</head>

Nothing will show

<hr>

horizontal rule

<hr />

Contents of your web page


Contents of your web page

<hr>

horizontal rule

<hr width=”50%” size=”3″ />

Contents of your web page


Contents of your web page

<hr>

horizontal rule

<hr width=”50%” size=”3″ noshade />

Contents of your web page


Contents of your web page

<hr>
(Internet
Explorer)

horizontal rule

<hr width=”75%” color=”#ff0000” size=”4″ />

Contents of your web page


Contents of your web page

<hr>
(Internet

horizontal rule

<hr width=”25%” color=”#6699ff” size=”6″ />

Contents of your web page


<html>

hypertext markup language

<html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
</html>

Contents of your web page
<i>

italic

<i>Example</i>

Example
<img>

image

<img src=”Earth.gif” width=”41″ height=”41″ border=”0″ alt=”text describing the image” />

text describing the image
<input>

input field

Example 1:

<form method=post action=”/cgi-bin/example.cgi”>
<input type=”text” size=”10″ maxlength=”30″>
<input type=”Submit” value=”Submit”>
</form>


<input>
(Internet Explorer)

input field

Example 2:

<form method=post action=”/cgi-bin/example.cgi”>
<input type=”text” style=”color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;” size=”10″ maxlength=”30″>
<input type=”Submit” value=”Submit”>
</form>


<input>

input field

<form method=post action=”/cgi-bin/example.cgi”>

<table border=”0″ cellspacing=”0″ cellpadding=”2″><tr><td bgcolor=”#8463ff”><input type=”text” size=”10″ maxlength=”30″></td><td bgcolor=”#8463ff” valign=”Middle”> <input type=”image” name=”submit” src=”yourimage.gif”></td></tr> </table></form>


<input>

input field

Example 4:

<form method=post action=”/cgi-bin/example.cgi”>
Enter Your Comments:<br>
<textarea wrap=”virtual” name=”Comments” rows=3 cols=20 maxlength=100></textarea><br>
<input type=”Submit” value=”Submit”>
<input type=”Reset” value=”Clear”>
</form>

Enter Your Comments:


 <input>

input field

Example 5:

<form method=post action=”/cgi-bin/example.cgi”>
<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type=”Submit” value=”Submit”></center>
</form>


Select an option:

<input>

input field

<form method=post action=”/cgi-bin/example.cgi”>
Select an option:<br>
<input type=”radio” name=”option”> Option 1
<input type=”radio” name=”option” checked> Option 2
<input type=”radio” name=”option”> Option 3
<br>
<br>
Select an option:<br>
<input type=”checkbox” name=”selection”> Selection 1
<input type=”checkbox” name=”selection” checked> Selection 2
<input type=”checkbox” name=”selection”>Selection 3
<input type=”Submit” value=”Submit”>
</form>
Select an option:
Option 1
Option 2
Option 3Select an option:
Selection 1
Selection 2
Selection 3
<li>

list item

Example 1:

<menu>
<li type=”disc”>List item 1</li>
<li type=”circle”>List item 2</li>
<li type=”square”>List item 3</li>
</MENU>

Example 2:

<ol type=”i”>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Example 1:

  • List item 1
  • List item 2
  • List item 3
  • Example 2:

    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
    <link>

    link

    <head>
    <link rel=”stylesheet” type=”text/css” href=”style.css” />
    </head>
    <marquee>
    (Internet
    Explorer

    scrolling text

    <marquee bgcolor=”#cccccc” loop=”-1″ scrollamount=”2″ width=”100%”>Example Marquee</marquee> Example Marquee
    <menu>

    menu

    <menu>
    <li type=”disc”>List item 1</li>
    <li type=”circle”>List item 2</li>
    <li type=”square”>List item 3</li>
    </menu>
  • List item 1
  • List item 2
  • List item 3
  • <ol>

    ordered list

    Numbered

    <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>

    Numbered Special Start

    <ol start=”5″>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>

     

    Numbered

    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4

    Numbered Special Start

    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    121 total views, 1 views today

    •  
      15
      Shares
    • 15
    •  
    •  
    •  

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    twenty + 16 =