Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
WWW course
1st day
Today target
Web and relative terms
Web and web programming Website vs. webpage, domain vs. URL
Course introduction
Objective Content Useful tools
HTML basic
URL
Absolute
http://www.bkitclub.net/forum http://my.opera.com/vietnamese
Relative
/imgs/bg.png ../style/main.css
Course objective
Understand our web Have the ability to implement a static webpage (maybe a website) Have the background to study more about web development.
Our friends
Some major browsers
IE 9 Firefox 6+ with firebug add-on Chrome 14+ Opera 11+
A text editor
Window notepad Notepad++, Gedit Netbeans, Eclipse
10
HTML
Stand for Hypertext Markup Language A markup language, not a programming language An HTML document is eq. to a webpage Its brother: XHTML
11
HTML Element
<a href=page1.html>Click here</a>
12
13
14
</body> </html>
15
Today tags
<title> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <div>, <p> <blockquote>, <q> <hr>, <br> <b>, <i> <span>
16
<title>
Tags: opening and closing tag Set the page title Attributes: none Examples:
<html> <head>
<title>HTML introduction</title> </head> <body> The content of the document...... </body> </html>
17
is is is is is is
18
<div>
Tags: opening and closing tag Define a division or a section. We usually use the <div> element to group HTML elements and format them with CSS. You can, but not recommended to, use <div> with text content Attributes: global attributes and event attributes Level: block Examples: <div> <h3>This is a heading</h3> <p>This is a paragraph.</p> <a href=/some/where>This is a link.</a> </div>
19
<p>
Tags: opening and closing tag Define a paragraph. Attributes: global attributes and event attributes Level: block Examples:
<p>This is some text in a paragraph.</p> <p>Lorem ipsum dolor sit amet <a href=/a/link>A link inside a paragraph</a></p>
20
<blockquote>
Tags: opening and closing tag The <blockquote> tag specifies a section that is quoted from another source. Attributes: cite, global attributes and event attributes
cite: Specifies the source of the quotation
<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
21
<q>
Tags: opening and closing tag Define a short quotation Attributes: cite, global attributes and event attributes
cite: Specifies the source of the quotation
<p>WWF's goal is to: <q>build a future where people live in harmony with nature</q>. We hope they succeed.</p>
22
<hr />
Tags: opening and self-closing tag Creates a horizontal line in an HTML page. Attributes: global attributes and event attributes Level: block Examples:
<h1>HTML</h1> <p>HTML is a language for describing web pages.</p> <hr />
23
<br />
Tags: opening and self-closing tag Inserts a single line break. We just use it to insert a line break, not to separate two paragraphs. Attributes: global attributes and event attributes Level: block Examples:
24
<p>It was a <b>red</b> house with a <b>blue</b> door.</p> <p>He named his car <i>The lightning</i>, because it was very fast.</p>
25
<span>
Tags: opening and closing tag Provide localized formatting within documents. This tag is also used to group inline elements. Attributes: global attributes and event attributes Level: text Examples:
26
Yu cu
Hin thc mt HTML document theo yu cu sau: Trn trnh duyt hin th tiu ca trang web l Ca hng hoa <tn ca hng> C s dng <hr /> v quotation C t nht hai on, mi on c t nht mt heading
Gii thiu v ca hng Gii thiu v ch ca hng (c th v bn)