Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Programming - 1st TA Session

1,137 views

Published on

The first TA session of the course Web Programming
The department of Computer Science, NCCU

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web Programming - 1st TA Session

  1. 1. Web Programming The Concepts of HTML goo.gl/vU2L8
  2. 2. Basic• HTML is plain-text documents• Browsers will translate them into graphical things Web Programming
  3. 3. Concepts<html> <head> <title>Hello</title> </head> <body> <h1>Hello world!</h1> </body></html> Web Programming
  4. 4. Concepts• There’s two kind of tags ‣ in-line ‣ block Web Programming
  5. 5. 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
  6. 6. HTML Tags Web Programming
  7. 7. About Tags• Tags are also called “elements”• The basic element to build a web page• Support for nesting Web Programming
  8. 8. 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
  9. 9. Headings Web Programming
  10. 10. 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 totheir viewers using grids or simple HTML tables. FusionCharts induces"life" into the web applications by converting monotonous data intolively charts, gauges & maps.</p><p>to be continue...</p> Web Programming
  11. 11. Paragraphs Web Programming
  12. 12. Links<a href=”http://www.nccu.edu.tw”>NCCU </a> • Make a hyperlink on a piece of text Web Programming
  13. 13. Images• Put an image on your web page• Specify a path to your image file <img src=”/path/to/image.png” /> Web Programming
  14. 14. Images Web Programming
  15. 15. About Path• Relational path “index.html” ./index.html• Absolute path “/index.html” www.nccu.edu.tw/index.html Web Programming
  16. 16. Formatting• Formatting tags are in-line tags to decorate text• <b>, <strong>: bold font• <i>: italic font• <big>, <small>: scaling font Web Programming
  17. 17. Definition List• Use <dl> to declare a definition list.• <dt> as a title while <dd> as a description Web Programming
  18. 18. Definition List<dl> <dt>Name</dt> <dd>Colin Su</dd> <dt>E-Mail</dt> <dd>littleq0903@gmail.com</dd></dl> Web Programming
  19. 19. Practice• Implement your assignment 1 right now! Web Programming
  20. 20. References• http://www.w3schools.com/html/• http://www.csie.nctu.edu.tw/~jglee/teacher/ content.htm• http://www.powmo.com/ Web Programming

×