HTML

Transcript HTML

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

HTML

Transcript HTML

Directory