Web Programming - 1st TA Session
•
1 like•685 views
This document discusses the basic concepts of HTML including: - HTML uses plain text documents that browsers translate into graphical elements - HTML pages use tags to structure and present content - Common tags include headings, paragraphs, links, images, and formatting tags to style text - Tags can be nested and attributes specify additional information like the URL for links or image source
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (6)
Similar to Web Programming - 1st TA Session
Similar to Web Programming - 1st TA Session (20)
More from Colin Su
More from Colin Su (20)
Recently uploaded
Recently uploaded (20)
Web Programming - 1st TA Session
- 1. Web Programming The Concepts of HTML goo.gl/vU2L8
- 2. Basic • HTML is plain-text documents • Browsers will translate them into graphical things Web Programming
- 3. Concepts <html> <head> <title>Hello</title> </head> <body> <h1>Hello world!</h1> </body> </html> Web Programming
- 4. Concepts • There’s two kind of tags ‣ in-line ‣ block Web Programming
- 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. HTML Tags Web Programming
- 7. About Tags • Tags are also called “elements” • The basic element to build a web page • Support for nesting Web Programming
- 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. Headings Web Programming
- 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 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
- 11. Paragraphs Web Programming
- 12. Links <a href=”http://www.nccu.edu.tw”>NCCU </a> • Make a hyperlink on a piece of text Web Programming
- 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. Images Web Programming
- 15. About Path • Relational path “index.html” ./index.html • Absolute path “/index.html” www.nccu.edu.tw/index.html Web Programming
- 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. Definition List • Use <dl> to declare a definition list. • <dt> as a title while <dd> as a description Web Programming
- 18. Definition List <dl> <dt>Name</dt> <dd>Colin Su</dd> <dt>E-Mail</dt> <dd>littleq0903@gmail.com</dd> </dl> Web Programming
- 19. Practice • Implement your assignment 1 right now! Web Programming
- 20. References • http://www.w3schools.com/html/ • http://www.csie.nctu.edu.tw/~jglee/teacher/ content.htm • http://www.powmo.com/ Web Programming