Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML
Document related concepts
Transcript
Web Page Design Week 6 Mozilla Thimble https://thimble.webmaker.org/en-US/ Mozilla Webmaker提供的Tools之一 線上HTML編輯器 有一些範例Projects可以參考學習或直接使用 可以直接發佈製作好的網頁 *Hyper Text Markup Language * Markup language Markup tags * Tag describes document content * HTML document = web page contains tags and plain text * * Tag: <keyword> </keyword> * Element: <keyword>HELLO WORLD</keyword> * Where does the ‘browser’ come into play? * Reads HTML documents * Use tags to interpret content * <html> <body> <p>You see me?</p> </body> </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> * * Everything between this tag pair will be read and rendered on screen * * Headings * Like what you see in Word * Higher number means bigger font size * * Paragraph * Automatically adds space (1 line) before and after the paragraph * Use <br> for a new line with out padding * * 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)> * *Cascading Style Sheets * Separated from HTML to manage element styles, such as layout, font, color… * * Bold * Italic * Underline * * Anchors: hyperlink * <a href=“[destination]”> * A URL * A local HTML document * A file * target * Specifies where to open the link into * * Image * <img src=“[destination]”> * A local image file * A URL * http://joung.im.ntu.edu.tw/images/2004_1 001_Amsterdam_DISC_0007.jpg * alt * Specifies alternate text * * Table, table row, table data/table header 1. 2. 3. 4. 5. 6. 7. * Declare table Declare row Declare data cell/table header Close data cell/table header Repeat 3~4 to create more columns Close row Close table * Unordered list (bullets) * Ordered list (numbers) * List item * * http://www.w3schools.com/html/default.asp 瀏覽器元件檢閱器 Google Chrome, Firefox皆有提供 直接檢閱網頁上元素的原始碼 也可以查閱CSS和使用的JavaScript套件 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
