let’s make advanced homepage 1999.3.15. kim tae-young kaist dept of c.s. sparcs 98...

Let’s make advanced Homepage

1999.3.15.

Kim Tae-young

KAIST Dept of C.S. SPARCS 98

[email protected]

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 XMLSGMLSGML

Standard Generalized Markup Language Very complex

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"></STYLE>


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 }


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% }


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 }


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 }


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!! */


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


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


Pseudo-classes & Pseudo-elements

Anchor pseudo-classes:link, :visited, :active

The 'first-line' pseudo-element

The 'first-letter' pseudo-element

HTMLDynamic HTML

HTML pages with dynamic content

Document Object Model (DOM) CSS HTML JavaScript

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"></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>

Reference

http://www.w3.org/http://hoohoo.ncsa.uiuc.edu/cgi/

let’s make advanced homepage 1999.3.15. kim tae-young kaist dept of c.s. sparcs 98...

Documents