計概實習 week 7. a bit, just a bit… * *,, * *, *,, * : defines header cell * : spans this cell...
TRANSCRIPT
計概實習Week 7
A bit, just a bit…
*HTML advanced
*Recap
*<html>
*<body>
*<hi>
*<p>
*<font>
*<b>,<i>,<u>
*<a>
*<img>
*<table>
*<tr>,<td>
*<ul>,<ol>,<li>DEPRECATED
*<th>,<td col/rowspan>
*<th>: Defines header cell
*<td colspan>: spans this cell for x columns
*<td rowspan>: spans this cell for x rows
*<table border>: table border
*<table cellpadding>: space between cell content and cell border
*<table cellspacing>: space between cells
*<frameset>,<frame>
*<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’!
DEPRECATE
D
*<iframe>
*An “inline” frame that does NOT require <frameset>
*Styling with CSS is recommended
*Attributes: width, height, name…
*<a target>
*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
*Embed multimedia (1/2)
*It’s a complicated issue!
*Formats
*Plugins
*Browser compatibility
*HTML version
*Use <iframe> if possible
*Embed multimedia (2/2)
*<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"> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"> </object> </video>
*Ready for some CSS?
:O
*Basic structure
*Selector
*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
*Font
*font-family
*“Times New Roman”
*font-size
*small, medium, large, x%, …
*font-style
*normal, italic ~ oblique
*font-weight
*normal, bold, …
絕對路徑 Absolute Path
網址http://homepage.ntu.edu.tw/~r01725042/main/j.html
完整的檔案位置C:\Users\Victor\Site\index.html
/home/usr/r01725042/index.html
相對路徑 Relative Path
index.html<a href=“aaa.html”>AAA</a>
aaa.html 與 index.html 在同一層資料夾<img src=“photo/bbb.png”>
photo 與 index.html 在同一層資料夾bbb.png 在 photo 資料夾底下
助教沒教！怎麼辦？Html 語法博大精深
Tag
Attribute
Value
自己上網查http://www.w3schools.com/html/default.asp
Nothing but Google!