Post on 03-Jan-2016
Let’s make advanced Homepage
1999.3.15.
Kim Tae-young
KAIST Dept of C.S. SPARCS 98
inheaven@sparcs.kaist.ac.kr
Overview
About WWWSGML, HTML and XMLBasic of The Common Gateway InterfaceTips for Making Advanced Homepage
About WWWWhat is the World Wide Web?
A uniform naming schemeFor locating resources on the Web
ProtocolsFor access to named resources over the Web
HypertextFor easy navigation among resources
About WWWIntroduction to URIs 1
Universal Resource Identifier Three parts of URIs
The naming scheme of the mechanism used to access the resource. The name of the mechine hosting the resource. The name of the resource itself, given as a path.
Fragment identifiers lacation within a resource
http://somesite.com/html/top.html#section_2
About WWWIntroduction to URIs 2
Relative URIs
Useage of URIs in HTML Link to another document or resource Link to an external style sheet or script Include an image, object, or appletsin a page Create an image map Submit a form Create a frame document Cite an external reference Refer to metadata conventions describing a document
<A href="suppliers.html">Suppliers</a>
<img src="../icons/logo.gif" alt="logo">
SGML, HTML and XMLHTMLHTML
HyperText MarkUp LanguageLingua franca for publishing hypertext on the
WWWNon-proprietary format based upon SGMLUse tags
• <h1>, </h1>
• <font>, </font>
HTML 4
HTMLBasic tags 1
Start with a title<title>My first HTML document</title>
Add headings and paragraphs<h1>An important heading</h1>
<h2>A slightly less important heading</h2>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
HTMLBasic tags 2
Adding a bit of emphasisThis is a reaaly <em>interesting</em> topic!
Adding interest to your pages with images<img src="bbok.jpeg" width="200” height="150">
<img src="bbok.jpeg" width="200" height="150" alt="My friend bbok">
Add links to other pagesThis a link to <a href="bbok.html">bbok's page</a>
This is a link to <a href="http://sparcs.kaist.ac.kr">SPARCS</a>
HTMLBasic tags 3
Three kinds of lists Unordered list
Ordered list
Definition list
<ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li></ul>
<ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li></ol>
<dl> <dt>the first item</dt> <dd>it's definition</dd>
<dt>the second item</dt> <dd>it's definition</dd></dl>
HTMLCascading Style Sheets
Basic Concepts 1Containment in HTML
For Old UAs
<HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool" TITLE="Cool"> <STYLE TYPE="text/css"> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD>
<BODY> <H1>Headline is blue</H1> <P STYLE="color: green">While the paragraph is green. </BODY></HTML>
<STYLE TYPE="text/css"><!-- H1 { color: green }--></STYLE>
HTMLCascading Style Sheets
Basic Concepts 2
GroupingH1, H2, H3 { font-family: helvetica }
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal;}
H1 { font bold 12pt/14pt hevetica }
HTMLCascading Style Sheets
Basic Concepts 3
Inheritance
<H1>The headline <EM>is</EM> important!</H1>
BODY { color: black; background: url(texture.gif) white;}
P { font-size: 10pt }
P { line-height: 120% }
HTMLCascading Style Sheets
Basic Concepts 4
Class as selector<HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> H1.pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> </BODY></HTML>
.pastoral { color: green }
HTMLCascading Style Sheets
Basic Concepts 5
ID as selector
Contextual selectors
#z98y { letter-spacing: 0.3em }H1 #z98y { letter-spacing: 0.5em }
<P ID=z98y>Wide text</P>
H1 { color: blue }EM { color: red }
H1 Em { color: red }UL LI { font-size: small }UL UL LI { font-size: x-small }
HTMLCascading Style Sheets
Basic Concepts 6
Comments
DIV P { font: small sans-serif }.reddish H1 { color: red }#x78y CODE { background: blue }DIV.sidenote H1 { font-size: large }
H1 B, H2 B, H1 EM, H2 EM { color: red }
H1 B { color: red }H2 B { color: red }H1 EM { color: red }H2 EM { color: red }
EM { color: red } /* red, really red!! */
HTMLCascading Style Sheets
Elements of CSS 1
Font properties font-family, font-style, font-variant, font-weight, font-size, font
Color and background properties color, background-color, background-image, background-repeat background-attachment, background-position, background
Text properties word-spacing, letter-spacing, text-decoration, vertical-align, text-transform text-align, text-indent, line-height
HTMLCascading Style Sheets
Elements of CSS 2
Box properties margin-top, margin-right, margin-bottom, margin-left, margin, padding-top padding-right, padding-bottom, padding-left, padding, border-top-width border-right-width, border-bottom-width, border-left-width, border-width border-color, border-style, border-top, border-right, border-bottom, border-left border, width, height, float, clear
Classification properties display, white-space, list-style-type, list-style-image, list-style-position, list-style
HTMLCascading Style Sheets
Pseudo-classes & Pseudo-elements
Anchor pseudo-classes:link, :visited, :active
The 'first-line' pseudo-element
The 'first-letter' pseudo-element
SGML, HTML and XMLXMLXML
What is XML Extensible Markup Language Language to use SGML on WWW XML is not a Markup Language but a Metalanguage XML is a very simple and easy dialect of SGML XHTML
XSL different between CSS and XSL
CSS XSLCan be used with HTML? yes noCan be used with XML? yes yesTransformation language? no yesSyntax CSS XML
Basic of the CGIIntroductionIntroduction
Overview Standard for interfacing external applications with information
servers Output dynamic information
Specifics Any language that allows it to be executed on the system
C/C++ fortran Perl TCL Any Unix shell Visual Basic AppleScript
Basic of the CGIBasic Information 1Basic Information 1
Get Information from the server Query string
The GET method• Input in environment variable 'QUERY_STRING'
The POST method• Input on stdin
Decode the form data Stream of name=value Separated by the & character
Basic of the CGIBasic Information 2Basic Information 2
Send document back to the client A full document with a corresponding MIME type
Content-type: text/html
<HTML> ….... ……</HTML>
Basic of the CGIInterface SpecificationInterface Specification
REQUEST_METHOD PATH_INFOQUERY_STRINGREMOTE_HOST & REMOTE_ADDR
TIPsWith CSSWith CSS
Hyperlink Without underline
Overlapped strings
<style type="text/css"><!-- A:link {text-decoration:none} A:visited {text-decoration:none} A:hover {color:"#cc4444"}--></style>
<div style="position:absolute;top:100;left:100"> <font color=red>This is one</font></div><div style="position:absolute;top:102;left:105"> <font color=blue>This is two</font></div>
TIPsDynamic HTML 1Dynamic HTML 1
Moving String<script language="javascript"><!--
var direction1=0;var direction2=0;
function Move() {var left = str1.style.pixelLeft;var top = str1.style.pixelTop;
if ( left >= 300 ) { direction1=1; }else if ( left <= 100 ) { direction1=0; }if ( top >= 400 ) { direction2=1; }else if ( top <= 100 ) { direction2=0; }if ( direction1 ) { str1.style.pixelLeft -= 5; }else { str1.style.pixelLeft += 4; }if ( direction2 ) { str1.style.pixelTop -= 3; }else { str1.style.pixelTop += 6; }
TIPsDynamic HTML 2Dynamic HTML 2
timerID = setTimeout( "Move();", 10 );}
--></script>
<body onLoad="Move();"><div id="str1" style="position:absolute;top:100;left:100;width:300;z-index:6">
<font color=red size=5><b>This is one</b></font></div>
</body>