KMUTNB - Internet Programming 3/7

HTML Basic and Cascade Style Sheet By: Mr. PHUPHA PUNYAPOTASAKUL ( ภูผา ปัญญาโพธาสกุล )

What’s HTML

Hypertext Markup Language

Why we need to have markup

Represent how content displays

Represent various objects

Etc.

Elements and Tags

Element composes of

Start tag

Sub element or Text

End tag

E.g. <EM>This is emphasized text</EM>

Nested element

Overlap?

Empty tag E.g. <br/>

Attributes

An element's attributes define various properties for the element .

Format: Attribute-name =" Attribute-value "

E.g. <IMG SRC =" wdglogo . gif " ALT =" Web Design Group " >

An attribute is included in the start tag only

Special Characters

some character make browser confuse

Replace with escape character

Reference http :// htmlhelp . com / reference / html40 / entities /

Unicode escape character E.g. &#169

" “ & & > > < <

Comments

Begin a comment with " <!-- “

end it with " --> “

and do not use " -- " within the comment .

E.g. < !-- An example comment -- >

A Complete HTML 4 Document

Compose of

DOCTYPE declaration

HTML element

Head element contains information about the document, such as its title and keywords

Body element contains the actual content of the document

Example

< ! DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 // EN "

" http :// www . w3 . org / TR / html4 / strict . dtd " >

<HTML>

<HEAD>

<TITLE>The document title< / TITLE>

< / HEAD>

<BODY>

<H1>Main heading< / H1>

<P>A paragraph . < / P>

<P>Another paragraph . < / P>

<UL>

<LI>A list item . < / LI>

<LI>Another list item . < / LI>

< / UL>

< / BODY>

< / HTML>

Basic Tag

Heading h1-6 <h1>this is a header</h1>

Paragraph <p>this is a paragraph</p>

Line break (br) <p>this is a <br> a paragraph</p>

Basic Tag

<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

<ins> Defines inserted text

<del> Defines deleted text

HTML Links

<a href=“URL”>link</a>

External link

Relative path ../img/logo.gif

Absolute path /img/logo.gif

Full path http://www.example/img/logo.gif

Don’t use only www.example.com

Internal link point

Link point <a name=“topic1”></a>

Link <a href=“thispage.htm#topic1”>

URL Encode

href=“test.htm?a=a&b= กง ”

Encoded URL test . htm?a = a&b =% E0%B8%81%E0%B8%87

If value have character = or & href=“test.htm?a=a&b= กง &c=1=2&d=&&”

Use escape character = use %3d, & use %26

Full reference http :// www . w3schools . com / html / html_urlencode . asp

HTML Frames

Example

<frameset cols =" 25%,75% " >

<frame src =" frame_a . htm " >

<frame src =" frame_b . htm " >

< / frameset>

Nested Frame

<frameset cols =" 25%,75% " >

<frameset cols ="* ,100 " >

<frame src =" frame_b . htm " >

< / frameset>

< / frameset>

HTML Frames

Specify size

Percentage – 10%

Pixel - 100

Automatic - *

Specify Link Target <a href=“..” target=“_blank”>..

_blank: new window

_parent: parent frame

_self: current frame

_top: root frame

HTML Table

<table border =" 1 " >

<tr>

<td>row 1, cell 1< / td>

< / tr>

<tr>

< / tr>

< / table>

Attributes

Table attributes

border=“0”

cellspaceing=“5”

cellpadding=“3”

bgcolor=“#efefef”

TD attribute s

colspan=“2”

rowspan=“2”

align=“center”

valing=“middle”

bgcolor=“#efefef”

HTML Lists

Unordered List

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

Ordered List

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

Image

E.g. <img src =" url " >

Attributes

alt : alternate text

border : border size

width : image width

height : image height

What if actual image size is not the same as width or height attribute value?

Use image as a link?

Background

Some objects may have background E.g. body, table, td

bgcolor: specify background color e.g <body bgcolor=“#efefef”..

#efefef

rgb ( 0,0,0 )

black

background: specify background image e.g. <body background=“logo.gif”..

Absolute path / full path

Relative path

HTML Form

Form represent a group of inputs

<form name=“f1” action=“url”>

<input ..> <input ..> <input ..>

</form>

Content inside form tag can be any HTML elements

Submitting form, only value of input object inside the form will be submitted to server

Input type

Text box

<input type=“text” name=“iname”>

Radio button

<input type=“radio” name=“iname”>

Check box

<input type=“checkbox” name=“iname”>

Selection

<select name=“iname">

<option value=“1">Fresh Milk</option>

<option value=“2">Coffee</option>

</select>

Input Type

Password input

<input name =" iname " type =" password "/ >

Textarea

<textarea name="iname"></textarea>

Hidden field

<input type="hidden" name="iname">

Button

<input type="submit" name="iname" value="Submit">

<input type=“reset" name="iname" value="Submit">

<input type=“button" name="iname" value="Submit">

Input Type

Image field <input type="image" name="iname" src="logo.gif">

File field

<input type="file" name="iname">

Head Element

The elements inside the head element should not be displayed by a browser

According to the HTML standard, only a few tags are legal inside the head section . These are : <base>, <link>, <meta>, <title>, <style>, and <script>

Head Elements

<head> Defines information about the document

<title> Defines the document title

<base> Defines a base URL for all the links on a page

<link> Defines a resource reference

<meta> Defines meta information

Meta Elements

general information ( meta - information ) about a document

Content Type <meta http-equiv="Content-Type" content="text/html; charset=tis-620" />

Keyword for search engine <meta name="description" content=“ .. "> <meta name="keywords" content=“ .. ">

Refresh or redirect every interval time <meta http - equiv =" refresh " content =" 5 " / > <meta http - equiv =" refresh " content =" 5;url=http://www.abc.com " / >

Scripts