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

Sunday, 7 October 2012

XML


So,guys!in this new post, we'll gonna learn and know what is XML all about. 



1) WHAT IS XML?

  • XML stands for EXtensible Markup Language
  • XML is a markup language much like HTML
  • XML was designed to carry data, not to display data
  • XML tags are not predefined. You must define your own tags
  • XML is designed to be self-descriptive
  • XML is not a replacement for HTML
  • XML is everywhere

2) DIFFERENCES BETWEEN XML AND       HTML
HTML XML
Designed to display data, with focus on how data looks Designed to transport  and store data, with focus on what data is
Displaying information Carrying information




3) HOW CAN XML BE USED?

  • XML simplifies data sharing
  • XML separate data from HTML 

  • XML simplifies data transport

  • XML simplifies platform changes

  • XML makes your data more available

  • XML is used to create new Internet languages


4) XML TREE


XML documents form a tree structure that starts at "the root" and branches to "the leaves".

  • An Example of XML Document
    • uses a self-describing and simple syntax
    • <?xml version="1.0" encoding="ISO-8859-1"?>
      <note>
        <to>Tove</to>
        <from>Jani</from>
        <heading>Reminder</heading>
        <body>Don't forget me this weekend!</body>
      </note>
    • The first line is the XML declaration. It defines the XML version (1.0) and the encoding used (ISO-8859-1 = Latin-1/West European character set).
    • The next line describes the root element of the document (like saying: "this document is a note")
    • <note>
    • The next 4 lines describe 4 child elements of the root (to, from, heading, and body)
    • <to>Tove</to>
      <from>Jani</from>
      <heading>Reminder</heading>
      <body>Don't forget me this weekend!</body>
    • And finally the last line defines the end of the root element
    • </note>

  • XML Document form a Tree Structure
    • XML documents must contain a root element. This element is "the parent" of all other elements.
    • The elements in an XML document form a document tree. The tree starts at the root and branches to the lowest level of the tree.
    • All elements can have sub elements (child elements)
    • <root>
        <child>
          <subchild>.....</subchild>
        </child>
      </root>
    • EXAMPLE :
    • DOM node tree
    • The image above represents one book in the XML below:
    • <bookstore>
        <book category="COOKING">
          <title lang="en">Everyday Italian</title>
          <author>Giada De Laurentiis</author>
          <year>2005</year>
          <price>30.00</price>
        </book>
        <book category="CHILDREN">
          <title lang="en">Harry Potter</title>
          <author>J K. Rowling</author>
          <year>2005</year>
          <price>29.99</price>
        </book>
        <book category="WEB">
          <title lang="en">Learning XML</title>
          <author>Erik T. Ray</author>
          <year>2003</year>
          <price>39.95</price>
        </book>
      </bookstore>
    • The root element in the example is <bookstore>. All <book> elements in the document are contained within <bookstore>.
    • The <book> element has 4 children: <title>,< author>, <year>, <price>.

5) XML SYNTAX RULE
  • All XML Elements Must Have a Closing Tag
    • In XML, it is illegal to omit the closing tag. All elements must have a closing tag
    • <p>This is a paragraph.</p>
      <br />

  • XML Tags are Case Sensitive
    • XML tags are case sensitive. The tag <Letter> is different from the tag <letter>.
    • Opening and closing tags must be written with the same case:
    • <Message>This is incorrect</message>
      <message>This is correct</message>


  • XML Elements Must be Properly Nested
    • In XML, all elements must be properly nested within each other:
    • <b><i>This text is bold and italic</i></b>


  • XML Documents Must Have a Root Element
    • XML documents must contain one element that is the parent of all other elements. This element is called the root element.
    • <root>
        <child>
          <subchild>.....</subchild>
        </child>
      </root>

  • XML Attribute Values Must be Quoted
    • In XML, the attribute values must always be quoted.
    • <note date="12/11/2007">
        <to>Tove</to>
        <from>Jani</from>
      </note>

  • Entity References
    • There are 5 predefined entity references in XML:

      &lt;<less than
      &gt;>greater than
      &amp;&ampersand 
      &apos;'apostrophe
      &quot;"quotation mark



 6) XML ELEMENTS

An XML element is everything from (incuding) the element's start tag to (including) the element's end tag

An element can contain..
  • other elements
  • text
  • attributes
  • or a mix of all of the above...               
For example :

<bookstore>
  <book category="CHILDREN">
    <title>Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="WEB">
    <title>Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>


In the example above, <bookstore> and <book> have element contents, because they contain other elements. <book> also has an attribute (category="CHILDREN"). <title>, <author>, <year>, and <price> have text content because they contain text.

XML Naming Rules

XML elements must follow these naming rules:
  • Names can contain letters, numbers, and other characters
  • Names cannot start with a number or punctuation character
  • Names cannot start with the letters xml (or XML, or Xml, etc)
  • Names cannot contain spaces
Any name can be used, no words are reserved.


Best Naming Practices

Make names descriptive. Names with an underscore separator are nice: <first_name>, <last_name>.

 Names should be short and simple, like this: <book_title> not like this: <the_title_of_the_book>.

 Avoid "-" characters. If you name something "first-name," some software may think you want to subtract name from first.

 Avoid "." characters. If you name something "first.name," some software may think that "name" is a property of the object "first."

 Avoid ":" characters. Colons are reserved to be used for something called namespaces (more later).

 XML documents often have a corresponding database. A good practice is to use the naming rules of your database for the elements in the XML documents.

 Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software vendor doesn't support them.


XML Elements are Extensible

XML elements can be extended to carry more information.
Look at the following XML example:

<note>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
</note  

 Let's imagine that we created an application that extracted the <to>, <from>, and <body> elements from the XML document to produce this output:


MESSAGE
To: Tove
From: Jani
Don't forget me this weekend!
7) XML ATTRIBUTES


XML elements can have attributes, just like HTML.
Attributes provide additional information about an element.
In HTML, attributes provide additional information about elements:

 <img src="computer.gif">
<a href="demo.asp">


 XML Attributes Must be Quotes

Attribute values must always be quoted. Either single or double quotes can be used. For a person's sex, the person element can be written like this:

<person sex="female">

or like this:
<person sex='female'>

If the attribute value itself contains double quotes you can use single quotes, like in this example:
<gangster name='George "Shotgun" Ziegler'>

or you can use character entities:
<gangster name="George &quot;Shotgun&quot; Ziegler">

XML Elements vs. Attributes

 Take a look at these examples:

<person sex="female">
  <firstname>Anna</firstname>
  <lastname>Smith</lastname>
</person>

 <person>
  <sex>female</sex>
  <firstname>Anna</firstname>
  <lastname>Smith</lastname>
</person>

 In the first example sex is an attribute. In the last, sex is an element. Both examples provide the same information

 There are no rules about when to use attributes or when to use elements. Attributes are handy in HTML. In XML my advice is to avoid them. Use elements instead.


Avoid XML Attributes?
  • attributes cannot contain multiple values (elements can)
  • attributes cannot contain tree structures (elements can)
  • attributes are not easily expandable (for future changes)

 8) XML VALIDATION

 XML with correct syntax is "Well Formed" XML
XML validated against a DTD is "Valid" XML

 Well Formed XML Documents

A "Well Formed" XML document has correct XML syntax.

  • XML documents must have a root element
  • XML elements must have a closing tag
  • XML tags are case sensitive
  • XML elements must be properly nested
  • XML attribute values must be quoted

<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>


Valid XML Documents

 A "Valid" XML document is a "Well Formed" XML document, which also conforms to the rules of a Document Type Definition (DTD):



<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>


The DOCTYPE declaration in the example above, is a reference to an external DTD file. The content of the file is shown in the paragraph below

XML DTD
The purpose of a DTD is to define the structure of an XML document. It defines the structure with a list of legal elements:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>




LINKS :

http://www.xml.com/

http://www.w3schools.com/xml/xml_dtd.asp

http://en.wikipedia.org/wiki/XML
Posted by Nur Atma bt Ridwan (1212800) Siti Fatimah binti Ibharm (1212470) Nur Amirah bt Mohamad Zain (1214446) Nadhira Liyana bt Zurni (1216622) at 15:29 0 comments
Subscribe to: Posts (Atom)