Web Programming - 1st TA Session
20
Web Programming The Concepts of HTML goo.gl/vU2L8
-
Upload
colin-su -
Category
Technology
-
view
724 -
download
0
description
The first TA session of the course Web Programming The department of Computer Science, NCCU
Transcript of Web Programming - 1st TA Session
Web ProgrammingThe Concepts of HTML
goo.gl/vU2L8
Web Programming
Basic
• HTML is plain-text documents
• Browsers will translate them into graphical things
Web Programming
Concepts
<html><head><title>Hello</title>
</head><body><h1>Hello world!</h1>
</body></html>
Web Programming
Concepts
• There’s two kind of tags
‣ in-line
‣ block
Web Programming
Basic Example
<!DOCTYPE html><html>
<head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /><title>Page Title</title>
</head><body>
<h1>The first title</h1><p>The first paragraph</p>
</body></html>
Web Programming
HTML Tags
Web Programming
About Tags
• Tags are also called “elements”
• The basic element to build a web page
• Support for nesting
Web Programming
Headings• Headings was defined with h1~h6 tags
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
Web Programming
Headings
Web Programming
Paragraphs• Paragraphs is a block element
• A new paragraph will be placed under the last element
<p>Most web applications today use boring methods to present data to their viewers using grids or simple HTML tables. FusionCharts induces "life" into the web applications by converting monotonous data into lively charts, gauges & maps.</p><p>to be continue...</p>
Web Programming
Paragraphs
Web Programming
Links
• Make a hyperlink on a piece of text
<a href=”http://www.nccu.edu.tw”>NCCU 國立政治大學</a>
國立政治大學
Web Programming
Images• Put an image on your web page
• Specify a path to your image file
<img src=”/path/to/image.png” />
Web Programming
Images
Web Programming
About Path
• Relational path
• Absolute path
“index.html” ./index.html
“/index.html” www.nccu.edu.tw/index.html
Web Programming
Formatting
• Formatting tags are in-line tags to decorate text
• <b>, <strong>: bold font
• <i>: italic font
• <big>, <small>: scaling font
Web Programming
Definition List
• Use <dl> to declare a definition list.
• <dt> as a title while <dd> as a description
Web Programming
Definition List
<dl> <dt>Name</dt> <dd>Colin Su</dd> <dt>E-Mail</dt> <dd>[email protected]</dd></dl>
Web Programming
Practice
• Implement your assignment 1 right now!
Web Programming
References
• http://www.w3schools.com/html/
• http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm
• http://www.powmo.com/
