Ex-cFs IIuM StuDents: HYPERTEXT MARKUP LANGUAGE aka (HTML)

Assalamualaikum..
Hi, everyone..
It's quite some time that I havent't added any new post.. Sorry for it..
Do you guys miss my story??

As apology and redeemed it, I will post 2 things for this time..
Last Wednesday, I've learned about HTML and XML in our computer and science class at orchid lab..
So, I will share the knowledge that I got from my class..
Are you ready..!!!
1...2...3...GO..!!

HYPERTEXT MARKUP LANGUAGE

(HTML)

http://www.enolsoft.com/blog/wp-content/uploads/2012/06/html.jpg

(P/S) : YOU MAY TRY THE EXAMPLE GIVEN HERE BY PASTE IT ONTO NOTEPAD WHITHIN ACCESSORIES IN YOUR COMPUTER AND SAVE IT AS filaname.html (don't forget to put .html otherwise it get wrong and you didn't get as you what you wish) TO MAKE YOUR UNDERSTAND BETTER AND MORE COMPETENCE. KEEP ON TRYING..^.^

what is HTML actually look like??

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

this is what we called HTML..

DESIGNING DOCUMENTS FOR THE WORLD WIDE WEB

when we said about the world wide web (WWW), it is actually consist of :-

The World Wide Web	The set of computers on the internet that support HTTPand 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

HTML is a text mixed with markup tags which is tags enclosed in angle brackets
e.g : <H1>Introduction</H1>

HTML Markup Describe about :-
–Appearance
–Layout
–Content

There are a few elements in HTML:-

•Validating a document

•Main HTML elements

•Block-level HTML elements

•Text-level HTML element

•Creating hypertext links

•Adding images to documents

•Building tables

How To Create and Publish a Web Page??

these are the steps to do it..
1. Create an HTML document
2. Place the document in world-accessible directory on a system running an HTTP server
3. Access the web page through http://hostname/~username/filename4. Validate the document by Check the syntax a formal HTML validator

HOW DOES THE HTML DOCUMENT TEMPLATES LOOK LIKE??

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD> (Goes on browser’s title bar may not appear in printouts)

<TITLE>Benefits of Exercise </TITLE>

</HEAD> (Main heading.Often used as title. Appears in printout)

<BODY>

<H1>Health Benefits of Exercise</H1>

<P>

Exercise is an excellent way of improving your health. Medical studies demonstrate that exercise can strengthen your heart and lungs, lower your blood pressure, and help you maintain a healthy weight.

</P>

<P>

Exercise can also assist with improving your mood. In fact, people who exercise have demonstrated better self-esteem, stronger decision making, and a generally more positive outlook on life

</P>

</BODY>

</HTML>

Main HTML Elements

1. DOCTYPE

–Refers to the rules for the markup language

–Browsers render the content correctly

2. HTML

–Defines the whole HTML documents

3. HEAD

lTITLE element required

~ Title in the browser toolbar, title for the page when its added to favorites and search-engine pages

lOptional elements:

•BASE – default address/target for all links on a page

•META – defines metadata about an HTML document

•SCRIPT,NOSCRIPT – 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

4. BODY Element

l<BODY BGCOLOR=“YELLOW”>

lHTML Attributes and Attribute Values

•BACKGROUND

•BGCOLOR

•TEXT

•LINK,VLINK,ALINK

•OnLoad, OnUnload, OnFocus, OnBlur

5. Elements inside BODY element

l<BODY>

Remaining HTML elements

</BODY>

META Elements

•Metadata is the information about the data

•<meta> tag provides metadata about the HTML document

•Metadata will not be displayed on the page

•Metadata can be used by browsers to records document information, forwards and refreshes pages

–NAME=“author”

–NAME=“keyword”

–NAME=“description”

–HTTP-EQUIV=“refresh”

•The following meta element defines a description of a page:

•The following meta element defines keywords for a page:

P- The Basic Paragraph

•Attributes: ALIGN

–LEFT (default), RIGHT, CENTER

–Whitespace ignored (use <BR> for line break)

•Consecuitve <P>’s do not yield multiple blank lines

–End Tag is Optional

Preformatted Paragraphs

•The PRE Element

–<PRE>….</PRE>

•Attributes: WIDTH

–Expected width in characters. Not widely supported.

•Problem: Special Characters

<PRE>

if (a<b>{

doThis();

} else {

doThat();

}

(INNNNI)

Desired Character	HTML Required
<	<
>	>
&	&
"	"
Non-breaking space

(INNNI)

OL: Ordered (Numbered) Lists

•OL Element

–<OL>

<LI>….

<LI>…

……

</OL>

–Attributes: TYPE, START, COMPACT

•List entries: LI

–<LI..> ….</LI> (End Tag Optional)

–Attributes: (When inside OL) VALUE, TYPE

A sample list:

<OL>

<LI>List Item One

<LI>List Item Two

<LI>List Item Three

</OL>

UL: Unordered (Bulleted) Lists

•UL Element

–<UL>

<LI>….

<LI>…

……

</UL>

–Attributes: TYPE, COMPACT

•TYPE is DISC, CIRCLE or SQUARE

•List entries: LI (TYPE)

–TYPE is DISC, CIRCLE or SQUARE

A sample list:

<UL>

<LI>List Item One

<LI>List Item Two

<LI>List Item Three

</UL>

Have a try this to get better understand..

<html>

<body>

<h4>Disc bullets list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Letters list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>A nested List:</h4>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

</body>

</html>

Block-Level Elements

1. Headings

–H1…H6

–ALIGN

2. Basic Text Sections

–<p> - defines paragraph

–<align> - defines alignment

–<abbr> - defines abbreviation

–<dfn> - defines definition

–<address> - defines contact information for the author/owner of a document

–<blockquote> - defines long quotation

3. Lists

–<ol> - defines ordered list

–<ul> - defines unordered list

–<li> - defines list item

–<dl> - defines a definition list

–<dt> - defines an item in a definition list

–<dd> - defines a description of an item in a definition list

4. Tables and Forms

Text-Level Elements

1. Physical Character Styles

–<b>, <i>, <tt>, <u>, <sub>, <sup>, <small>, <strike>, <s>, <blink>

–FONT

•<size>

•<color>

•<face>

–BASEFONT

–SIZE

2. Logical Character Styles

–<em>, <strong>, <code>, <samp>, <kbd>, <dfn>, <var>, <cite>

3. Hypertext Links

–A

•<href>, <name>, <target>

–IMG

•<src>(required), <alt>, <align>, <width>, <height>, <hspace>, <vspace>, <border>, <usemap>, <ismap>

–Misc. Text-Level Elements

•BR (Explicit line break)

•AREA (Client-side image maps)

•APPLET (Java)

for example:-

<html>

<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

</body>

</html>

Creating Hypertext Links

In creating Hypertext Links, we may include images and other text-level elements.

there is a few things related to link:-

•Link to Absolute URL

–Use a complete URL beginning with http://

•Link to Relative URL

–Use a filename or relative path to filename

•Links to Section

–Use a section name preceded by #

•Link to Section in URL

–Use absolute or relative URL, then #, then section name

•Naming a Section

–Use <A NAME=“….” and do not include the pound sign

for example:-

<html>

<body>

<p>

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

</p>

<h2>Chapter 1</h2>

<p>This chapter explains .......</p>

<h2>Chapter 2</h2>

<p>This chapter explains ..........</p>

<h2>Chapter 3</h2>

<p>This chapter explains ............</p>

<h2><a name="C4">Chapter 4</a></h2>

<p>This chapter explains ..........</p>

<h2>Chapter 5</h2>

<p>This chapter explains ..................</p>

</body>

</html>

ADDING IMAGES TO DOCUMENT

We can add images to the document that we have made by using IMG-Embedding Images.
This thing has the following attributes:-

–src (required)

–alt (technically required)

–align (see <BR CLEAR=“ALL”>)

–width, height

–hspace, vspace

–border

–usemap, ismap

•Example

<img src=“SomeFile.gif” alt=“My Cat” width=“400” height=“300”>

using this HTML, you can insert images to the document. Lets try it..

<html>

<body>

<p>

An image:

</p>

<p>

A moving image:

</p>

<p>

Note that the syntax of inserting a moving image is no different from a non-moving image.

</p>

</body>

</html>

BUILDING TABLES (TABLE ELEMENTS ATTRIBUTES)

To construct a table, we have to take a few things related to it into account such as:-

•ALIGN

–The ALIGN attribute gives the horizontal alignment of the table as a whole

–Legal values are LEFT, RIGHT and CENTER with LEFT being the default

•BORDER

–This specifies the width in pixels of the border around the table

–This is in addition to the border around each cell (the CELLSPACING)

•CELLSPACING

–This gives the space in pixels between adjacent cells. Drawn as a 3D line if BORDER is nonzero, otherwise empty space in the background color is used

- The default is usually about 3

•CELLPADDING

–CELLPADDING determines the empty space, in pixels, between the cell’s border 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, BORDERCOLARLIGHT

–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 attribute is omitted

–Legal values are NONE, ROWS, COLS and ALL

•FRAME

–Specifies which outer borders 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)

Table CAPTION

•Attribute

–ALIGN (Values: TOP, BOTTOM)

•Usage

An enclosing borderless table may give more flexibility than the built-in CAPTION

Heading 1	Heading 2
Row1 Col1 Data	Row1 Col2 Data
Row2 Col1 Data	Row2 Col2 Data
Row3 Col1 Data	Row3 Col2 Data

TR: TABLE Row

TR is used to define each row in the table

Each row will then contain TH and/or TD entries

•ALIGN

–ALIGN (legal values LEFT, RIGHT or CENTER) is used to set the default horizontal alignment for table cells

•VALIGN

–VALIGN (legal values TOP, MIDDLE or BOTTOM) is used to set the default vertical alignment for table cells

•BGCOLOR

–Sets the color for the table row, overriding any values set for the table as a whole via the BGCOLOR attribute of TABLE

•BORDERCOLOR, BORDERCOLORDARK, BORDERCOLARLIGHT

–supported only by IE, these specify the colors to use for the row borders

Table Cells: TH and TD

•COLSPAN

–COLSPAN defines a heading or cell data entry that spans multiple columns

<TR><TH COLSPAN=2>Col 1&2 Heading

<TH>Col13 Heading

<TR><TD>Col1 Data

<TD>Col2 Data

<TD>Col3 Data

</TABLE>

•ROWSPAN

–ROWSPAN defines a heading or cell data entry that spans multiple rows; similar to COLSPAN

•ALIGN

–LEFT, RIGHT, CENTER, JUSTIFY and CHAR

•VALIGN

–TOP, BOTTOM, MIDDLE

•WIDTH, HEIGHT

–Values in pixels only (no percentage officially allowed)

•NOWRAP

–Use with caution

•BGCOLOR, BACKGROUND

–Same as for TABLE and TR

Lets try this as example so that you can have a clear picture about it.

<html>

<body>

<h4>Without cellpadding:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With cellpadding:</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

http://library.thinkquest.org/15074/media/html2.gif

Ex-cFs IIuM StuDents

Tuesday, 9 October 2012

HYPERTEXT MARKUP LANGUAGE aka (HTML)

No comments:

Post a Comment

Blog Archive

(^_^) This Blog is belong to Nurul Madiha Ab Halim and Raihanah Nasoha. (^_^)

Grab A Button

wal-`asr