Embed Size (px)
Citation preview
Make Webin SPARCS
김기형
Object
• Understand conceptions of HTML, CSS, etc.
• Make own web pages with vim in SPARCS
• Show web pages to others
World Wide Web• A network of compters all over the world • All the computers in the Web can communicate with ea
ch other. • All the computers use a communication standard called
HTTP.
• Web page• Web server• Web client• Web browser
– Internet Explorer, Mozilla Firefox
Web Standards• Who do make web standards?
– Microsoft (x)– SPARCS (x)– W3C
• World Wide Web Consortium
• The most essential Web standards– HTML– CSS– XML
What is HTML?
• HyperText Markup Language
• HTML is the lingua franca for publishing hypertext on the World Wide Web.
-W3C
• Markup tags– Tell the web browser how to display the page
Before start..
• Read and Understand all of this ppt
• Use Vim in Sparcs.
• At first, make “index.html” in ‘public_html’
• If you save html, you can see your pages in http://sparcs.kaist.ac.kr/~ID
Elements
<html><head><title> KKHSOFT’s seminar </title></head><body>I can make web~! <br></body></html>
Basic Tags #1
• Heading– <hn> … … </hn> ( 1<=n<=6)– n larger, font smaller.
• Paragraph– <p> … … </p>
• Comments– <!-- hehehe~ -->
Basic Tags #2
• <b>, </b> for bold• <i>, </i> for italic• <u>, </u> for underlined• <strike>, <strike> for strikeout• <sup>, </sup> for superscript
• <sub>, </sub> for subscript
• <tt>, </tt> for teletype
Basic Tags #3
<p> <font size=“5" face="Verdana” color=“blue”> This is a paragraph. </font> </p>
This is a paragraph.
Basic Tags #4• Lists
<UL><LI> battery ● battery<LI> neo ● neo</UL>
<OL><LI> goldrush 1. goldrush<LI> zsaver 2. zsaver</OL>
Basic Tags #5
• Image<img src = “http://sparcs.org/~kkhsoft/doc/inter2.jpg”>
• Embed<embed src = “http://sparcs.org/~kkhsoft/doc/jhsbirth.avi”>
Link• URL link
<a href=“http://cyworld.com/kkhsoft”>Click</a>
• To specific section<a href=“#spot”>Click<a name=“spot”>
• Mailto link<a href=“mailto:[email protected]”>mail</a>
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>
Frame• With frames, you can display more than one HTML docu
ment in the same browser window.
<frameset cols=“50%,50%”><frame src=“left.html”><frameset rows=“30%,50%,20%”>
<frame src=“a.html”><frame src=“b.html”><frame src=“c.html”>
</frameset></frameset>
Details• Link
– Target• Frame
– Noresize– Boarder– Scrolling
• Others– Text– Bgcolor– Width, height
What is CSS?
• Cascading Style Sheets
• Define how to display HTML elements
• Style Sheets Can Save a Lot of Work
Syntax
• selector {property: value}
• body {color: black} • p {font-family: "sans serif"} • p {text-align:center;color:red} • p {
text-align: center; color: black; font-family: arial }
Group, Class• Group
– h1,h2,h3,h4,h5,h6 { color: green }
• Class selector– Define different styles for the same type – p.right {text-align: right}
p.center {text-align: center} – <p class="right"> This paragraph will be right-aligne
d. </p>- <p class="center"> This paragraph will be center-alig
ned. </p>
How to use
• Save css file
• <head> <link rel="stylesheet" type="text/css" href="mystyle.css" > </head>
Properties
• Background• Text• Font• Border• Margin• Padding• List
• http://www.w3schools.com/css/default.asp
XHTML
• Extensible HyperText Markup Language
• 웹페이지를 만드는 데 가장 많이 쓰이는 언어인 HTML이 차세대 언어 XML 로 가기 위한 다리
• XML 은 HTML 에 비해 여러가지 강점• HTML 로 씌어있는 10 억개가 넘는 웹페이지들
• XHTML 은 기존의 HTML 명령어들을 그대로 유지하면서 XML 포맷에 맞도록 필요한 요소들을 가미한 언어체계
Reference• Internet web site
– http://www.w3.org– http://www.make-a-web-site.com– http://www.newbie.net– http://www.pageresource.com
• SPARCS seminar– “XML” by eungkyu– “Peeking XHTML” by netj– “XML” by pcpenpal
Homework
• Make your own web pages in SPARCS
• Use style(css) and various tags
• Due : ~ 3/28 (Monday)before regular meeting of SPARCS
