Embed Size (px)
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 Presentation
Citation preview
Web Page DesignWeek 6
Mozilla Thimblehttps://thimble.webmaker.org/en-US/Mozilla Webmaker提供的 Tools之一線上 HTML編輯器有一些範例 Projects可以參考學習或直接使用可以直接發佈製作好的網頁
*What is HTML?
*Hyper Text Markup Language*Markup language Markup tags*Tag describes document content
*HTML document = web page contains tags and plain text
*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
*Basic structure
<html> <body> <p>You see me?</p> </body></html>
*<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>
*<body>
*Everything between this tag pair will be read and rendered on screen
*<hi>,i=1~6
*Headings*Like what you see in Word*Higher number means bigger font size
*<p>
*Paragraph*Automatically adds space (1 line) before
and after the paragraph*Use <br> for a new line with out padding
*<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
*CSS (FYI only)
*Cascading Style Sheets*Separated from HTML to manage element
styles, such as layout, font, color…
*<b>,<i>,<u>
*Bold*Italic*Underline
*<a>
*Anchors: hyperlink*<a href=“[destination]”>*A URL*A local HTML document*A file
*target*Specifies where to open the link into
*<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
*<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!
*<ul>,<ol>,<li>
*Unordered list (bullets)*Ordered list (numbers)
*List item
*W3Schoolshttp://www.w3schools.com/html/default.asp
瀏覽器元件檢閱器Google Chrome, Firefox皆有提供直接檢閱網頁上元素的原始碼也可以查閱 CSS和使用的 JavaScript套件
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
