HyperText Markup Language (HTML) – Part 2 Laboratory of Intelligent Networks (LINK) @ KUT Youn-Hee Han from ://.

HyperText Markup Language (HTML) – Part 2

Laboratory of Intelligent Networks (LINK) @ KUThttp://link.kut.ac.kr

Youn-Hee Han

from http://www.w3schools.com

HTML ColorColor Values

HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).

The lowest value: 0 (hex #00) The highest value: 255 (hex #FF).

The basic color table

Web Programming2

HTML ColorW3C Standard Color Names

W3C has listed 16 color names The color names are

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow

The 216 cross-browser color palette http://link.kut.ac.kr/2008_1/WP/216color-code.html

The palette of most colors http://link.kut.ac.kr/2008_1/WP/color-code.html

Web Programming3

HTML ColorColor combination

Colors are displayed combining RED, GREEN, and BLUE light sources

Web Programming4

HTML Color16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).

Most modern monitors are capable of supporting the number of colors

Shades of Gray Gray colors are displayed

using an equal amount of power to all of the light sources

Web Programming5

HTML LayoutHTML Layout - Using Tables

use HTML tables to format the layout of an HTML page. use a table without borders, and maybe a little extra cell-

padding Does not recommend to use <frame> tag for HTML

layout

Web Programming6

<html><body><table border="0" width="100%" cellpadding="10"><tr><td width="50%" valign="top">This is some text. This is some text. This is some text. This is some text.</td><td width="50%" valign="top">Another text. Another text. Another text. Another text. Another text. Another text.</td></tr></table></body></html>

HTML formattingSpaghetti code including contents and formatting

HTML coding where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process

Web Programming7

<html><body><p> <font size="2" face="Verdana">This is a paragraph.</font></p><p><font size="3" face="Times“>This is another paragraph.</font></p></body></html>

The above coding has old style!!! (HTML 3.2 style)

HTML formattingRemoving all fonts and color information from HTML page

HTML 4.0 separates the presentation from the document structure

Do not use presentation attributes inside your HTML tags if you can avoid it.

Start using styles (CSS)!

Web Programming8

HTML Head<head> tag

It contains general information about a document. The elements inside the head element should not be

displayed by a browser. Legal tags inside the head section.

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

<link> Defines a resource reference

<meta> Defines meta information "Meta" means "information about".

<title> Defines the document title

<style> Defines a style definition

Web Programming9

HTML Head<base> tag – 1

<base href="http://link.kut.ac.kr/webprogramming/" /> It specifies a base URL for all of the links in a page

Web Programming10

<html><head><base href="http://link.kut.ac.kr/webprogramming/" /></head><body><img src="/hi/smile.gif" /><a href="/hi/smile.gif">hi</a></body></html>

HTML Head<base> tag - 2

<base target="_blank|_parent|_self|_top“ /> Where to open all the links on the page. This attribute is

used as the target attribute in each link.

Web Programming11

<html><head><base target="_blank“/></head><body><p><a href="http://www.w3schools.com" target="_blank">This link</a>will load in a new window because the target attribute is set to "_blank".</p><p><a href="http://www.w3schools.com">This link</a>will also load in a new window even without a target attribute.</p></body></html>

HTML Head<link> tag

It specifies an external document and defines the relationship between HTML and the document.

A usual example Link to an external style sheet document

Web Programming12

<html><head><link rel="stylesheet" type="text/css" href="styles.css" /></head><body><h1>I am formatted with a linked style sheet</h1><p>Me too!</p></body></html>

HTML Head<meta> tag

It provides meta-information about the document Usually, it provides information that is relevant to

browsers or search engines like describing the content of your document.

A usual example 1 Document description

Web Programming13

<html><head><meta name="author" content="Jan Egil Refsnes" /><meta name="revised" content="Jan Egil Refsnes,6/10/99" /><meta name="generator" content="A Text Editor" /><meta name="description" content="HTML examples" /></head><body><p>Hello</p></body></html>

HTML Head<meta> tag

A usual example 2 Document keywords

since too many webmasters have used meta tags for spamming, like repeating keywords to give pages a higher ranking, some search engines have stopped using them entirely.

Web Programming14

<html><head><meta name="keywords”content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" /></head><body><p>Hello</p></body></html>

HTML Head<meta> tag

A usual example 3 Redirect a browser to a new page

It is not recommended to use this technique to redirect a browser to different pages, as this makes the page inaccessible to some browsers.

Instead, automatic page forwarding should be done using a server-side script (e.g., JSP or PHP)

Web Programming15

<html><head><meta http-equiv="Refresh“ content="5;url=http://link.kut.ac.kr" /></head><body>This page is under construction</body></html>

HTML AttributesCore Attributes

Not valid in <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title> elements

Keyboard Attributes

Web Programming16

Attribute Value Description

class class_name or style_name

The class of the element

id id_name A unique id for the element

style style_definition An inline style definition

title tooltip_text A text to display in a tool tip


accesskey character Sets a keyboard shortcut to access an element

tabindex number Sets the tab order of an element

HTML Attributesaccesskey attribute

Syntax <element accesskey="character"… >

The following elements can support accesskey attribute a, area, button, input, label, and textarea.

Web Programming17

<html><body><label for="fuser">user name</label><input type="text" accesskey="u" /></body></html>

<html><body><a accesskey="b" href="http://www.daum.net">Daum</a></body></html>

alt+u

alt+b

HTML Attributestabindex attribute

Syntax <element tabindex="iIndex" … >

Range of "iIndex " 1~32767: used for normal tabbing order 0 (default): used for the lowest tabbing ( 우선 순위가 가장 낮음 )

The following elements can have focus a, button, iframe, img, input, object, select, textarea…

같은 페이지에 같은 우선순위 값 먼저 기재된 곳이 우선

Web Programming18

<html><body><input type="text" tabindex="1" /> <input type="text"><input type="text" tabindex="2" /><input type="submit" tabindex="3" /></body></html>

HTML Attributestabindex attribute

Web Programming19

<html><body><ul>

<li>Item 1 (no tab)</li><li>Item 2 (no tab)</li><li>Item 3 (no tab)</li>

</ul><ul>

<li tabindex="1">Tab Item 1</li><li tabindex="2">Tab Item 2</li><li tabindex="3">Tab Item 3</li><li tabindex="4">Tab Item 4</li><li tabindex="5">Tab Item 5</li>

</ul></body></html>

HTML EventsWindow Events

Only valid in body and frameset elements.

Form Element Events Only valid in form elements

Web Programming20


onload script Script to be run when a document loads

onunload script Script to be run when a document unloads


onchange script Script to be run when the element changes

onsubmit script Script to be run when the form is submitted

onreset script Script to be run when the form is reset

onselect script Script to be run when the element is selected

onblur script Script to be run when the element loses focus

onfocus script Script to be run when the element gets focus

HTML AttributesWindow Events Example

Web Programming21

<html><head><script type="text/javascript"> function load() { window.status="Page is loaded"; }</script></head><body onload="load()"></body></html>

<html><head><script type="text/javascript"> function mymessage() { alert("This message was triggered from me"); }</script></head><body onload="mymessage()"></body></html>

HTML AttributesForm Element Events Example - onchange

Web Programming22

<html><head><script type="text/javascript"> function upperCase(x) { var y=document.getElementById(x).value; document.getElementById(x).value=y.toUpperCase(); }</script></head><body>Enter your name:<input type="text" id="fname" onchange="upperCase(this.id)" /></body></html>

HTML AttributesForm Element Events Example - onblur

Web Programming23

<html><head><script type="text/javascript"> function upperCase() { var x=document.getElementById("fname").value; document.getElementById("fname").value=x.toUpperCase(); }</script></head><body>Enter your name:<input type="text" id="fname" onblur="upperCase(this.id)" /></body></html>

HTML AttributesForm Element Events Example - onselect

Web Programming24

<html><body><form>Select text: <input type="text" value="Hello world!"onselect="alert('You have selected some of the text.')" /><br /><br />Select text: <textarea cols="20" rows="5"onselect="alert('You have selected some of the text.')" />Hello world! </textarea></form></body></html>

HTML EventsKeyboard Events

Not valid in br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Web Programming25


onkeydown

script What to do when key is pressed

onkeypress

script What to do when key is pressed and released

onkeyup script What to do when key is released

HTML AttributesKeyboard Events Example - onkeydown

Web Programming26

<html><body><script type="text/javascript">cnt=1;function showkey(){ if (cnt%20==0){ cnt=1; showchar.innerHTML+='<br/>'; showcode.innerHTML+='<br/>'; } cnt++; showchar.innerHTML+='('+String.fromCharCode(event.keyCode)+') '; showcode.innerHTML+='('+event.keyCode+')';}</script>입력 : <input id="textobj" type="text" onkeydown="showkey()" onfocus="this.style.backgroundColor='cfc'" onblur="this.style.backgroundColor='fff'" /><hr/><div id="showchar" class="showclass"></div><hr/><div id="showcode" class="showclass"></div></body></html>

HTML EventsMouse Events

Not valid in br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements.

Web Programming27


onclick script What to do on a mouse click

ondblclick script What to do on a mouse double-click

onmousedown

script What to do when mouse button is pressed

onmousemove

script What to do when mouse pointer moves

onmouseout script What to do when mouse pointer moves out of an element

onmouseover script What to do when mouse pointer moves over an element

onmouseup script What to do when mouse button is released

HTML AttributesKeyboard Events Example - onkeydown

Web Programming28

<html><body><script type="text/javascript">function mouseTest(){ str='event.srcElement.tagName='+event.srcElement.tagName+'<br/>'; str+='event.srcElement.id='+event.srcElement.id+'<br/>'; str+='event.srcElement.type='+event.srcElement.type+'<br/>'; str+='event.type='+event.type+'<br/>'; show.innerHTML=str;}</script><body onmousedown="mouseTest()"><table border=1 width=300><tr><th id="thObj"> 마우스로 클릭해 보라 .</th></tr><tr><td><button id="butObj"> 클릭해 보라 .</button></td></tr><tr><td><input type="text" id="tdObj" value=" 클릭해 보라 ."></td></tr><tr><td><span id="spanObj"> 클릭해 보라 .</span></td></tr></table><div id="show" style="height:5em;border:solid 1 blue;width:300"></div><body><html>

URL EncodingWhat is URL Encoding?

the process of converting "a string" into "a valid URL format" by converting "prohibited characters" into "valid characters"

URL encoding is normally performed to convert data passed via html forms, because such data may contain special character, such as "/", ".", "#", and so on

What characters need to be encoded ASCII Control characters

e.g.] carriage return (CR) %0d Non-ASCII characters

e.g.] 한국 %26%2354620%3B%26%2344397%3B Reserved characters

e.g.] ampersand ("&") %26 Unsafe characters

e.g.] 'Less Than' symbol ("<") %3c

Web Programming29

URL EncodingEncoding of reserved and unsafe characters

Web Programming30

URL EncodingExample

One of the most common encounters with URL Encoding is when dealing with <form>s.

Form methods (GET and POST) perform URL Encoding implicitly

Web Programming31

<html><body><form method="GET" action="example.html"><input type="text" name="var" size="50" value="This is a simple & short test."><input type="submit"> </form></body></html>

http://icl.kut.ac.kr/example.html?var=This+is+a+simple+%26+short+test

http://icl.kut.ac.kr/example.html?var=%24+%26+%3C+%3E+%3F+%3B+%23+%3A+%3D+%2C+%22+%27+%7E+%2B+%25

Recommandationhttp://www.w3schools.comhttp://www.cadvance.org/

Web Programming32

HyperText Markup Language (HTML) – Part 2 Laboratory of Intelligent Networks (LINK) @ KUT Youn-Hee Han from ://.

Documents

html page html

html layout html layout

html tags

html tables

html head tag

hello html head

html layout web programming6

web programming3 slide