Web Page Design Week 6
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Web Page DesignWeek 6
Mozilla Thimble
https://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 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!
*<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 - HTML5
Cut The Ropehttp://www.cuttherope.ie/
Apple Html5 Demohttp://www.apple.com/html5/showcase/vr/
Html5rockshttp://slides.html5rocks.com/#landing-slide
Related Documents
