Blogger Widgets

Tuesday 9 October 2012

HTML


INTRODUCTION..!

What is HTML?

HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML is a markup language
  • A markup language is a set of markup tags
  • The tags describes document content
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

HTML Tags

HTML markup tags are usually called HTML tags
  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

Example:<tagname>content</tagname>

HTML Elements


 "HTML tags" and "HTML elements" are often used to describe the same thing.But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:HTML Element:

Example:<p>This is a paragraph.</p>


The world Wide Web

Definations

   -The World Wide Web
       >The set of computers on the Internet that support HTTP.
       >Not a separate network

   -HTTP
     >The HyperText Transfer Protocol
     >The language used by a WWW Client to request documents from a WWW server.

   -HTML
     >The HyperText Markup Language
     >The language used to design web pages

Main HTML Elements 

1.DOCTOTYPE

   -Refers to the rules for the markup the language
   -Browsers render the content correctly

2.HTML

   -Defines the whole HTML documents

3.HEAD

 -TITLE element required
-Title in the browser toolbar, title for the page when its added to favourites and search-engine oages

  -Optional elements
     -Base- default address/target for all links on a page
     -META- defines metadata about an HTML document
     -SCRIPT,NONSCRIPT- define a client-side script(JavaScript)
     -STYLE- to define style information for an HTML documents
     -LINK- defines the relationship between a document and an external 
               resources 

 Example.:

Text-Level Elements

The Text-Level Elements can be divided into 3:

  1. Physical Character Styles
  2. Logical Character Styles
  3. Hypertext Links

Physical Character Styles

Physical character styles are included of font(it size,colour and face),base font and size.For an example, in html format <b>,<i>,<tt>,<u>,<sub>,<small>,<strike> and etc.

Logical Character Styles


 The example of logical character styles that usually being used in html format are:
<em>,<strong>,<code>,<samp>,<kbd>,<dfn>,<var>,<cite>


Hypertext Styles (Hypertext Links)
  • A - For an example: <href>,<name>,<target>
  • IMG- For an example: <src>(required),<alt>,<align>,<width>,<height>,<hspace>,<boarder>
  • Misc.Text-Level Elements - For an example: BR(Explicit line Break), AREA (Client-side image maps), APPLET (Java)

 You may type all of it on the notepad which then being save as html format,that is .html which allow you to open and read it online. The steps are shown as follow:

First step:
Write html on Notepad


Second step:
Save as html (Text-level Element.html)



Third step: 
The result of html (Test-level element)



Hypertext Links

Link can contain an images and other text-level element.

  • Link to Absolute URL- Complete URL beginning with http://
  • Link to Relative URL - Use a filename or relative path to file name
  • Links to Section - Use a section name preceded by #
  • Link to Section in URL -Use relative or absolute URL,then #,then section name

 Naming a SECTION

-Use <A Name="....." and do not include the pound sign

IMG : Embedding Images

The IMG allow picture or an image to be upload in the html text.
For an example : <img src="SomeFile.gif" alt="My Cat" width ="400" height="300"
IMG -The Image Embedded step

Table Element Attributes

The are a lot of table element attributes that are align,boarder, cell spacing, cell padding,width, BG colour,bordercolor,bordercolordark,bordercolorlight,background, rules and frames.

THE TABLE ELEMENT ATTRIBUTES & ITS SPECIFICATIONS


Element Attributes Specifications
ALIGN
  • It gives the horizontal alignment of the table as whole
  • Legal values are LEFT,RIGHT and CENTER with LEFT being the default
BORDER
  • This specifies the width in pixels of the boarder around the table
  • This is in addition to the boarder around each cell (the CELLSPACING)
CELLSPACING
  • This gives the space in the pixel between adjacent cells.Drawn as a 3D if BORDER is nonzero,otherwise empty space in the background color is used
  • The default is usually about 3
CELLPADDING
  • Determines the empty space,in pixels,between the cell's boarder and the table element
  • The default is usually about 1
WIDTH
  • This specifies the width of the table,either in pixels (<TABLE WIDTH=250>) or as a percentage of the current browser window width (<TABLE WIDTH="75%">)
BGCOLOR
  • Specify the background color of the TABLE
BORDERCOLOR,
BORDERCOLORDARK,
BORDERCOLORLIGHT
  • Non standard attributes supported by IE to specify the colors to user for the borders
BACKGROUND
  • This nonstandard attribute supported by IE gives an image file that will be tiled as the background of the table
RULES
  • HTML 4.0 attribute that specifies which inner dividing lines are drawn
  • All are drawn if this attributes is omitted
  • Legal values are NONE,ROWS COLS and ALL
FRAMES
  • Specifies which outer boarder are drawn 
  • All four are drawn if this attribute is omitted
  • Legal values are BORDER or BOX (all), VOID(none), ABOVE(top), BELOW(bottom), HSIDES(top and bottom,despite the somewhat confusing name), VSIDES (left and right),LHS (left) and RHS (right)


The example:

Table Attribute - align (deprecated)

This table is right aligned
Text flows around it to the left
This is text that is flowing around the table.

Table Attribute - border

This is a border with a 1px border.
And here is the second example:
And this table has a border of 10.

Table Attribute - cellspacing
This table has a cellspacing of 20.
Cells will be separated by 20 pixels.

 Table Attribute - cellpadding
This table has a cellpadding of 20.
Cells will be separated by 20 pixels.

Table Attribute - rules
This 4x4 table hasthe rows not columns
outlined with therules attribute.
the more rowsthere are
the more rules there are
And here is an example with the columns highlighted:
This isa tablewhere the
columnsarehighlighted
nottherows

Table Attribute - frame

This tablewill have
only theleft side framed.
And another example
This table has a frame on the bottom.




The Table Elements Attributes Descriptions & Differences Between HTML 4.01 AND HTML 5


AttributeValueDescription
alignleft
center
right		Not supported in HTML5. Deprecated in HTML 4.01.Specifies the alignment of a table according to surrounding text
bgcolorrgb(x,x,x)
#xxxxxx
colorname		Not supported in HTML5. Deprecated in HTML 4.01.Specifies the background color for a table
border1
""		Specifies whether the table cells should have borders or not
cellpaddingpixelsNot supported in HTML5. Specifies the space between the cell wall and the cell content
cellspacingpixelsNot supported in HTML5. Specifies the space between cells
framevoid
above
below
hsides
lhs
rhs
vsides
box
border		Not supported in HTML5. Specifies which parts of the outside borders that should be visible
rulesnone
groups
rows
cols
all		Not supported in HTML5. Specifies which parts of the inside borders that should be visible
summarytextNot supported in HTML5. Specifies a summary of the content of a table
widthpixels
%		Not supported in HTML5. Specifies the width of a table


HERE!! There is an exercise for you..do you able to do it???
Do exactly like this:

Table example (exercise)
















Posted by Nur Atma bt Ridwan (1212800) Siti Fatimah binti Ibharm (1212470) Nur Amirah bt Mohamad Zain (1214446) Nadhira Liyana bt Zurni (1216622) at 11:34

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)