kmutnb - internet programming 3/7

HTML Basic and Cascade Style Sheet

By: Mr. PHUPHA PUNYAPOTASAKUL

(ภู�ผา ปั�ญญาโพธาสกุ�ล)

04/12/23 Free template from www.brainybetty.com 2

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

• Referencehttp://htmlhelp.com/reference/html40/entities/

• Unicode escape character E.g. &#169

< <

> >

& &

“ "

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












Comments

• Begin a comment with "“

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

• E.g.


A Complete HTML 4 DocumentCompose of

• DOCTYPE declaration

• HTML element – Head element

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

– Body elementcontains the actual content of the document

http://htmlhelp.com/reference/html40/html/doctype.html

http://htmlhelp.com/reference/html40/html/html.html


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

http://www.w3schools.com/tags/tag_font_style.asp


http://www.w3schools.com/tags/tag_phrase_elements.asp






http://www.w3schools.com/tags/tag_sup.asp

http://www.w3schools.com/tags/tag_sup.asp

http://www.w3schools.com/tags/tag_ins.asp


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 URLtest.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 referencehttp://www.w3schools.com/html/html_urlencode.asp


HTML FramesExample<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"></frameset>

Nested Frame<frameset cols="25%,75%"> <frame src="frame_a.htm">

<frameset cols="*,100"> <frame src="frame_a.htm"> <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><td>row 1, cell 2</td>

</tr><tr>

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

</tr></table>


Attributes

• Table attributes– border=“0”– cellspaceing=“5”– cellpadding=“3”– bgcolor=“#efefef”

• TD attributes– 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 colore.g <body bgcolor=“#efefef”..– #efefef– rgb(0,0,0) – black

• background: specify background imagee.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

• External script<script type="text/javascript" src="myscript.js"></script>

• Internal script<script type="text/javascript">document.write("Hello World!")

</script> • To handle older browser

<script type="text/javascript">

</script>


Styles

• External style sheet<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

• Internal style sheet<head><style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>

</head> • Inline styles

<p style="color: red; margin-left: 20px">.. </p>


Common Attributes

• Common attributes can use with almost all tags except base, head, html, meta, param, script, style, and title elements – class : The class of the element– id : A unique id for the element– style : An inline style definition – title : A text to display in a tool tip


Question & Answer

kmutnb - internet programming 3/7

Education