web page design
DESCRIPTION
Web Page Design. Week 6. Mozilla Thimble. https://thimble.webmaker.org/en-US / Mozilla Webmaker 提供的 Tools 之一 線上 HTML 編輯器 有一些範例 Projects 可以參考學習或直接使用 可以直接發佈製作好的網頁. H yper T ext M arkup L anguage Markup language Markup tags Tag describes document content - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/1.jpg)
Web Page DesignWeek 6
![Page 2: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/2.jpg)
Mozilla Thimblehttps://thimble.webmaker.org/en-US/Mozilla Webmaker提供的 Tools之一線上 HTML編輯器有一些範例 Projects可以參考學習或直接使用可以直接發佈製作好的網頁
![Page 3: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/3.jpg)
*What is HTML?
*Hyper Text Markup Language*Markup language Markup tags*Tag describes document content
*HTML document = web page contains tags and plain text
![Page 4: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/4.jpg)
*Tag & Element
*Tag: <keyword> </keyword>
*Element: <keyword>HELLO WORLD</keyword>
*Where does the ‘browser’ come into play?*Reads HTML documents *Use tags to interpret content
![Page 5: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/5.jpg)
*Basic structure
<html> <body> <p>You see me?</p> </body></html>
![Page 6: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/6.jpg)
*<html>
*Begin and end every HTML document with this tag pair*May declare DOCTYPE before it*HTML 4.01*<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
*HTML 5*<!DOCTYPE html>
![Page 7: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/7.jpg)
*<body>
*Everything between this tag pair will be read and rendered on screen
![Page 8: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/8.jpg)
*<hi>,i=1~6
*Headings*Like what you see in Word*Higher number means bigger font size
![Page 9: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/9.jpg)
*<p>
*Paragraph*Automatically adds space (1 line) before
and after the paragraph*Use <br> for a new line with out padding
![Page 10: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/10.jpg)
*<font>
*Describe what font style to use*Attributes: provide additional
information about the HTML element*face,color,size…*“red”*rgb(x,x,x)*#XXXXXX
*Ex. <font size=“3” face=“arial” color=rgb(10,110,10)>DEPRECATE
D
![Page 11: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/11.jpg)
*CSS (FYI only)
*Cascading Style Sheets*Separated from HTML to manage element
styles, such as layout, font, color…
![Page 12: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/12.jpg)
*<b>,<i>,<u>
*Bold*Italic*Underline
![Page 13: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/13.jpg)
*<a>
*Anchors: hyperlink*<a href=“[destination]”>*A URL*A local HTML document*A file
*target*Specifies where to open the link into
![Page 14: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/14.jpg)
*<img>
*Image*<img src=“[destination]”>*A local image file*A URL*http://
joung.im.ntu.edu.tw/images/2004_1001_Amsterdam_DISC_0007.jpg
*alt*Specifies alternate text
![Page 15: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/15.jpg)
*<table>,<tr>,<td>/<th>
*Table, table row, table data/table header1. Declare table 2. Declare row3. Declare data cell/table header4. Close data cell/table header5. Repeat 3~4 to create more columns6. Close row7. Close table Can declare spanning data cells!
![Page 16: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/16.jpg)
*<ul>,<ol>,<li>
*Unordered list (bullets)*Ordered list (numbers)
*List item
![Page 17: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/17.jpg)
*W3Schoolshttp://www.w3schools.com/html/default.asp
![Page 18: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/18.jpg)
瀏覽器元件檢閱器Google Chrome, Firefox皆有提供直接檢閱網頁上元素的原始碼也可以查閱 CSS和使用的 JavaScript套件
![Page 19: Web Page Design](https://reader036.vdocuments.pub/reader036/viewer/2022081422/56816226550346895dd256df/html5/thumbnails/19.jpg)
Now & Future - HTML5Cut The Rope
http://www.cuttherope.ie/Apple Html5 Demo
http://www.apple.com/html5/showcase/vr/
Html5rockshttp://slides.html5rocks.com/#landing-slide