First Working Day

The first working day of the young leaders started with a big smile when each delegate meet each other on their “getting to know activity”. We have here Abbas Qureshi(Pakistan), Lakmina Wickramasinghe(Sri Lanka), Sabillah Ardie(Indonesia), Tanka Prasad Pokharel(Nepal), Ross Parkash(Pakistan), Kimhen Srey(Cambodia), Sandun Gamage(Sri Lanka), Sophorn Poek(Cambodia), TAI Yu-Chuan(Taiwan), Chee Wey Hng(Malaysia), Jan Argy Tolentiono(Philippines), Keng Liang Tan(Malaysia), Pey Canlas(Philippines), Zhi Yi Ooi(Malaysia), Steiven Poh(Malysia), Abe Olandres(Philippines), Camelia Astuti(Indonesia), Marleynda Mariko(Indonesia), Ivy Ganadillo(Philippines), Cheah Wearn, Ng(Malaysia), Yeen Seen, Ng(Malaysia), Siegfried Herzog(FNF,Philippines) and Warangka Tempana(Thailand) Read on

sweet Dreams!!

That’s the appetite!

img_4549.jpg img_4550.jpg img_4552.jpg img_4556.jpg

Jailed in Penang? trip to Fort Conwalls

workshop22.jpg

 

 

workshop1.jpg

 

podcastworkshop.jpg

 

penang17to22may07_186.jpg
pose!

eat.jpg

 

Nice dinner at Gurney mall

town.jpg

 

ferry.jpg

INTRODUCTION TO HTML

Source: http://www.w3schools.com

 

What is an HTML File?

  • HTML stands for Hyper Text Markup Language
  • An HTML file is a text file containing small markup tags
  • The markup tags tell the Web browser how to display the page
  • An HTML file must have an htm or html file extension
  • An HTML file can be created using a simple text editor

HTML documents are text files made up of HTML elements.

HTML elements are defined using HTML tags.


HTML Tags

  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • 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 text between the start and end tags is the element content
  • HTML tags are not case sensitive, <b> means the same as <B>


HTML Elements

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

This is an HTML element:

<b>This text is bold</b>

The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>

The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

This is also an HTML element:

<body>
This is my first homepage. <b>This text is bold</b>
</body>

This HTML element starts with the start tag <body>, and ends with the end tag </body>.

The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>

HTML automatically adds an extra blank line before and after a heading.


Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.


Line Breaks

The <br> tag is used when you want to end a line, but don’t want to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.


Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

Basic HTML Tags

Tag

Description

<html>

Defines an HTML document

<body>

Defines the document’s body

<h1> to <h6>

Defines header 1 to header 6

<p>

Defines a paragraph

<br>

Inserts a single line break

<hr>

Defines a horizontal rule

<!–>

Defines a comment

 

How to View HTML Source

Have you ever seen a Web page and wondered “How do they do that?”

To find out, simply click on the VIEW option in your browsers toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the actual HTML of the page.


Text Formatting Tags

Tag

Description

<b>

Defines bold text

<big>

Defines big text

<em>

Defines emphasized text

<i>

Defines italic text

<small>

Defines small text

<strong>

Defines strong text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

 

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This anchor defines a link to W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The line above will look like this in a browser:

Visit W3Schools!


The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>


The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

The line below defines a named anchor:

<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the “tips” section, add a # sign and the name of the anchor to the end of a URL, like this:

<a href="http://www.w3schools.com/html_links.asp#tips">
Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file “html_links.asp” will look like this:

<a href="#tips">Jump to the Useful Tips Section</a>

 

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Here is how it looks in a browser:

  • Coffee
  • Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.


Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

  1. Coffee
  2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.


The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for “source”. The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image:

<img src="url">

The URL points to the location where the image is stored. An image named “boat.gif” located in the directory “images” on “www.w3schools.com” has the URL: http://www.w3schools.com/images/boat.gif.

The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.


The Alt Attribute

The alt attribute is used to define an “alternate text” for an image. The value of the alt attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat">

The “alt” attribute tells the reader what he or she is missing on a page if the browser can’t load images. The browser will then display the alternate text instead of the image. It is a good practice to include the “alt” attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.