All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are...
20
•All Web pages are written with some form of HTML (HyperText Markup Language). •HTML documents are saved as Text Only files so virtually any computer can read them. •Browser is the software used to view the web page. e.g. Internet Explorer, Firefox, Opera, Safari Introduction to Web design
-
Upload
marcia-dorcas-hill -
Category
Documents
-
view
213 -
download
0
Transcript of All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are...
•All Web pages are written with some form of HTML (HyperText Markup Language).
•HTML documents are saved as Text Only files so virtually any computer can read them.
•Browser is the software used to view the web page. e.g. Internet Explorer, Firefox, Opera, Safari with handhelds, PDAs.
Introduction to Web design
Principal components of web pages:
•Text content --- the actual headers and paragraphs
•References --- links, images, Flash animations
•Markup --- instructions describing how the content and references should be displayed
Basic Syntax
• Comments<!-- comments --> • Tags : open tag close tag pair<tag_name> </tag_nam>• Self-closing Tags : tags that contain nothing
between the opening and closing tags: <br /> <hr />
Basic html document structure
• <html></html> -- html tag is the container that contains all other HTML elements
• <body></body> -- body tag is used for indicating the main content section of the HTML document
<html> <body> </body> </html>
Text Tag Examples
• p tag --- defins paragraph• H1 to H6 tags --- define html headings, h1
defines the most important headings and h6 defines the least important headings
Simple Example<html> <body> <p>This is written using p tag</p> <H1>This is written using H1 tag</H1> <h2>This is written using H2 tag</h2> <H3>This is written using H3 tag</h3> <H4>This is written using H4 tag</H4> <h5>This is written using H5 tag</h5> <H6>This is written using H6 tag</H6> <H1>這是用 H1 tag寫的 </H1> </body></html>
Title Tag
• defines a title in the browser toolbar• provides a title for the page when it is added
to favorites• displays a title for the page in search-engine
results
Add Title to Simple Example <html> <title> Demo Example </title> <body> : : </body></html>
<!Doctype> Declaration• The doctype declaration is not an HTML tag; it
is an instruction to the web browser about what version of the markup language the page is written in.
• The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
Example of <!Doctype> Declaration
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The EndThank you very
much
Anchor Tag
• To create a link to another document, by using the href attribute
• To create a bookmark inside a document, by using the name attribute
The most important attribute of the a element is the href attribute, which indicates the link’s destination.
Example of <a> tag <p>Example of link <a href="http://www.wfaa.com" target="_blank">Visit
wfaa.com!</a> </p> <p> Example of link using images<br /> <a href="http://www.cnn.com" target="_blank"> <img border="0" alt="CNN.com" src="cnnlogo.bmp"
width="300" height="100" /> </a> </p>
By default, links will appear as follows in all browsers:•An unvisited link is underlined and blue•A visited link is underlined and purple•An active link is underlined and red
<font> tag
<font size="3" color="red">This is some text!</font><br /><font size="16" color="blue">This is some text!</font><br /><font face="verdana" color="green">This is some text!</font><br />
