Web Programming - 1st TA Session
-
Upload
colin-su -
Category
Technology
-
view
724 -
download
0
description
Transcript of Web Programming - 1st TA Session
![Page 1: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/1.jpg)
Web ProgrammingThe Concepts of HTML
goo.gl/vU2L8
![Page 2: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/2.jpg)
Web Programming
Basic
• HTML is plain-text documents
• Browsers will translate them into graphical things
![Page 3: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/3.jpg)
Web Programming
Concepts
<html><head><title>Hello</title>
</head><body><h1>Hello world!</h1>
</body></html>
![Page 4: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/4.jpg)
Web Programming
Concepts
• There’s two kind of tags
‣ in-line
‣ block
![Page 5: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/5.jpg)
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>
![Page 6: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/6.jpg)
Web Programming
HTML Tags
![Page 7: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/7.jpg)
Web Programming
About Tags
• Tags are also called “elements”
• The basic element to build a web page
• Support for nesting
![Page 8: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/8.jpg)
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>
![Page 9: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/9.jpg)
Web Programming
Headings
![Page 10: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/10.jpg)
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>
![Page 11: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/11.jpg)
Web Programming
Paragraphs
![Page 12: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/12.jpg)
Web Programming
Links
• Make a hyperlink on a piece of text
<a href=”http://www.nccu.edu.tw”>NCCU 國立政治大學</a>
國立政治大學
![Page 13: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/13.jpg)
Web Programming
Images• Put an image on your web page
• Specify a path to your image file
<img src=”/path/to/image.png” />
![Page 14: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/14.jpg)
Web Programming
Images
![Page 15: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/15.jpg)
Web Programming
About Path
• Relational path
• Absolute path
“index.html” ./index.html
“/index.html” www.nccu.edu.tw/index.html
![Page 16: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/16.jpg)
Web Programming
Formatting
• Formatting tags are in-line tags to decorate text
• <b>, <strong>: bold font
• <i>: italic font
• <big>, <small>: scaling font
![Page 17: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/17.jpg)
Web Programming
Definition List
• Use <dl> to declare a definition list.
• <dt> as a title while <dd> as a description
![Page 18: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/18.jpg)
Web Programming
Definition List
<dl> <dt>Name</dt> <dd>Colin Su</dd> <dt>E-Mail</dt> <dd>[email protected]</dd></dl>
![Page 19: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/19.jpg)
Web Programming
Practice
• Implement your assignment 1 right now!
![Page 20: Web Programming - 1st TA Session](https://reader033.fdocuments.us/reader033/viewer/2022051210/54b718264a7959a2718b4656/html5/thumbnails/20.jpg)
Web Programming
References
• http://www.w3schools.com/html/
• http://www.csie.nctu.edu.tw/~jglee/teacher/content.htm
• http://www.powmo.com/