1 / 16

計概實習

計概實習. Week 7. HTML advanced. A bit, just a bit…. <html> <body> <h i > <p> <font> <b>,< i >,<u>. <a> < img > <table> < tr >,<td> < ul >,< ol >,<li>. DEPRECATED. Recap. < th > : Defines header cell <td colspan > : spans this cell for x columns

chelsi
Télécharger la présentation

計概實習

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 計概實習 Week7

  2. HTML advanced A bit, just a bit…

  3. <html> • <body> • <hi> • <p> • <font> • <b>,<i>,<u> • <a> • <img> • <table> • <tr>,<td> • <ul>,<ol>,<li> DEPRECATED Recap

  4. <th>: Defines header cell • <td colspan>: spans this cell for x columns • <td rowspan>: spans this cell for xrows • <table border>: table border • <table cellpadding>: space between cell content and cell border • <table cellspacing>: space between cells <th>,<td col/rowspan>

  5. <frameset>: divides screen into x rows or y columns with set px, %, or * • <frame src>: defines a frame from source src within a <frameset> !<frameset>takes up the ENTIRE ‘screen’! DEPRECATED <frameset>,<frame>

  6. An “inline” frame that does NOT require <frameset> • Styling with CSS is recommended • Attributes: width, height, name… <iframe>

  7. Specifies where to opened the linked document • _blank: new window/tab • _self: in same frame (default) • _parent: in parent frame • _top: full window • frame name: in a specified frame name <a target>

  8. It’s a complicated issue! • Formats • Plugins • Browser compatibility • HTML version • Use <iframe> if possible Embed multimedia (1/2)

  9. <video width="320" height="240" controls="controls">  <source src="movie.mp4" type="video/mp4">  <source src="movie.ogg" type="video/ogg">  <source src="movie.webm" type="video/webm"><objectdata="movie.mp4" width="320"height="240"><embedsrc="movie.swf" width="320"height="240"></object> </video> Embed multimedia (2/2)

  10. Ready for some CSS? :O

  11. Basic structure

  12. id selector: #id1 {} • Used for unique elements • #div1 {text-align:center} • Class selector: .class1 {} • used for multiple elements • .center {text-align:center} • p.center {text-align:center} • http://www.w3schools.com/cssref/css_selectors.asp Selector

  13. font-family • “Times New Roman” • font-size • small, medium, large, x%, … • font-style • normal, italic ~ oblique • font-weight • normal, bold, … Font

  14. 絕對路徑 AbsolutePath • 網址 • http://homepage.ntu.edu.tw/~r01725042/main/j.html • 完整的檔案位置 • C:\Users\Victor\Site\index.html • /home/usr/r01725042/index.html

  15. 相對路徑 RelativePath • index.html • <ahref=“aaa.html”>AAA</a> • aaa.html與index.html在同一層資料夾 • <imgsrc=“photo/bbb.png”> • photo與index.html在同一層資料夾 • bbb.png在photo資料夾底下

  16. 助教沒教！怎麼辦？ • Html語法博大精深 • Tag • Attribute • Value • 自己上網查 • http://www.w3schools.com/html/default.asp • NothingbutGoogle!

More Related