1. Web Page Design Week 6

2. Mozilla Thimble https://thimble.webmaker.org/en-US/ Mozilla Webmaker 提供的 Tools 之一 線上 HTML 編輯器 有一些範例 Projects 可以參考學習或直接使用 可以直接發佈製作好的網頁

3. * H yper T ext M arkup L anguage * Markup language  Markup tags * Tag  describes document content * HTML document = web page  contains tags and plain text

4. * Tag: * Element: HELLO WORLD * Where does the ‘browser’ come into play? * Reads HTML documents * Use tags to interpret content

5. You see me?

6. * Begin and end every HTML document with this tag pair * May declare DOCTYPE before it * HTML 4.01 * * HTML 5 *

7. * Everything between this tag pair will be read and rendered on screen

8. * Headings * Like what you see in Word * Higher number means bigger font size

9. * Paragraph * Automatically adds space (1 line) before and after the paragraph * Use for a new line with out padding

10. * Describe what font style to use * Attributes: provide additional information about the HTML element * face,color,size… * “red” * rgb(x,x,x) * #XXXXXX * Ex.

11. * C ascading S tyle S heets * Separated from HTML to manage element styles, such as layout, font, color…

12. * Bold * Italic * Underline

13. * Anchors: hyperlink * * A URL * A local HTML document * A file * target * Specifies where to open the link into

14. * Image * * A local image file * A URL * http://joung.im.ntu.edu.tw/images/2004_1 001_Amsterdam_DISC_0007.jpg http://joung.im.ntu.edu.tw/images/2004_1 001_Amsterdam_DISC_0007.jpg * alt * Specifies alternate text

15. * Table, table row, table data/table header 1. Declare table 2. Declare row 3. Declare data cell/table header 4. Close data cell/table header 5. Repeat 3~4 to create more columns 6. Close row 7. Close table Can declare spanning data cells!

16. * Unordered list (bullets) * Ordered list (numbers) * List item

17. http://www.w3schools.com/html/default.asp

18. 瀏覽器元件檢閱器 Google Chrome, Firefox 皆有提供 直接檢閱網頁上元素的原始碼 也可以查閱 CSS 和使用的 JavaScript 套件

19. Now & Future - HTML5 Cut The Rope http://www.cuttherope.ie/ Apple Html5 Demo http://www.apple.com/html5/showcase/vr/ Html5rocks http://slides.html5rocks.com/#landing-slide