Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download html forms - LINK@KoreaTech
Document related concepts
Transcript
HyperText Markup Language
(HTML) – Part 2
Laboratory of Intelligent Networks (LINK) @ KUT
http://link.kut.ac.kr
Youn-Hee Han
from http://www.w3schools.com
HTML Color
Color 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).
2
The basic color table
Web Programming
HTML Color
W3C 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
3
http://link.kut.ac.kr/2008_1/WP/color-code.html
Web Programming
HTML Color
Color combination
4
Colors are displayed combining RED, GREEN, and BLUE light
sources
Web Programming
HTML Color
16 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
5
Gray colors are displayed
using an equal amount of
power to all of the light sources
Web Programming
HTML Layout
HTML 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
<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>
6
Web Programming
HTML formatting
Spaghetti 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
<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)
7
Web Programming
HTML formatting
Removing all fonts and color information from HTML
page
8
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 Programming
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>
9
Defines a style definition
Web Programming
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
<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>
10
Web Programming
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.
<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>
11
Web Programming
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
<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>
12
Web Programming
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
<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>
13
Web Programming
HTML Head
<meta> tag
A usual example 2
Document keywords
<html>
<head>
<meta name="keywords”
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />
</head>
<body>
<p>Hello</p>
</body>
</html>
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.
14
Web Programming
HTML Head
<meta> tag
A usual example 3
Redirect a browser to a new page
<html>
<head>
<meta http-equiv="Refresh“ content="5;url=http://link.kut.ac.kr" />
</head>
<body>This page is under construction</body>
</html>
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 serverside script (e.g., JSP or PHP)
15
Web Programming
HTML Attributes
Core Attributes
Attribute
class
id
Value
Description
class_name or style_name The class of the element
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
Not valid in <base>, <head>, <html>, <meta>, <param>,
<script>, <style>, and <title> elements
Keyboard Attributes
Attribute
Value
accesskey character
tabindex
16
number
Description
Sets a keyboard shortcut to access
an element
Sets the tab order of an element
Web Programming
HTML Attributes
accesskey attribute
Syntax
<element accesskey="character"… >
The following elements can support accesskey attribute
a, area, button, input, label, and textarea.
17
<html>
<body>
<label for="fuser">user name</label>
<input type="text" accesskey="u" />
</body>
</html>
alt+u
<html>
<body>
<a accesskey="b" href="http://www.daum.net">Daum</a>
</body>
</html>
alt+b
Web Programming
HTML Attributes
tabindex 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…
<html>
<body>
<input type="text" tabindex="1" /> <!-- 우선 순위 최상 -->
<input type="text">
<input type="text" tabindex="2" />
<input type="submit" tabindex="3" />
</body>
</html>
18
같은 페이지에 같은 우선순위 값 먼저 기재된 곳이 우선
Web Programming
HTML Attributes
tabindex attribute
<html>
<body>
<ul>
<li>Item 1 (no tab)</li>
<li>Item 2 (no tab)</li>
<li>Item 3 (no tab)</li>
</ul>
<ul>
<li
<li
<li
<li
<li
tabindex="1">Tab
tabindex="2">Tab
tabindex="3">Tab
tabindex="4">Tab
tabindex="5">Tab
Item
Item
Item
Item
Item
1</li>
2</li>
3</li>
4</li>
5</li>
</ul>
</body>
</html>
19
Web Programming
HTML Events
Window Events
Only valid in body and frameset elements.
Attribute
Value
Description
onload
script
Script to be run when a document loads
onunload
script
Script to be run when a document unloads
Form Element Events
Only valid in form elements
Attribute
20
Value
Description
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
Web Programming
HTML Attributes
Window Events Example
<html>
<head>
<script type="text/javascript">
function load() {
window.status="Page is loaded";
}
</script>
</head>
<body onload="load()">
</body>
</html>
21
<html>
<head>
<script type="text/javascript">
function mymessage() {
alert("This message was triggered from me");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Web Programming
HTML Attributes
Form Element Events Example - onchange
<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>
22
Web Programming
HTML Attributes
Form Element Events Example - onblur
<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>
23
Web Programming
HTML Attributes
Form Element Events Example - onselect
<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>
24
Web Programming
HTML Events
Keyboard Events
Not valid in br, frame, frameset, head, html, iframe, meta,
param, script, style, and title elements.
Attribute
Description
onkeydown script
What to do when key is pressed
onkeypress script
What to do when key is pressed and released
onkeyup
25
Value
script
What to do when key is released
Web Programming
HTML Attributes
Keyboard Events Example - onkeydown
<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>
26 </body></html>
Web Programming
HTML Events
Mouse Events
27
Not valid in br, frame, frameset, head, html, iframe, meta,
param, script, style, and title elements.
Attribute
Value
Description
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
Web Programming
HTML Attributes
Keyboard Events Example - onkeydown
<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>
28 <html>
Web Programming
URL Encoding
What 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
29
Web Programming
URL Encoding
Encoding of reserved and unsafe characters
30
Web Programming
URL Encoding
Example
One of the most common encounters with URL Encoding is
when dealing with <form>s.
Form methods (GET and POST) perform URL Encoding implicitly
<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
31
Web Programming
Recommandation
http://www.w3schools.com
http://www.cadvance.org/
32
Web Programming
