introduction to html. html hyper text markup language page title my first heading my first...

20
Lecture 1 Kanida Sinmai [email protected] http://mis.csit.sci.tsu.ac.th/kanida Introduction to HT

Upload: catherine-joseph

Post on 29-Dec-2015

260 views

Category:

Documents


0 download

TRANSCRIPT

Lecture 1Kanida Sinmai

[email protected]://mis.csit.sci.tsu.ac.th/kanida

Introduction to HTML

HTML

Hyper Text Markup Language<!DOCTYPE html><html><head>

<title>Page Title</title></head><body>

<h1>My First Heading</h1>

<p>My first paragraph.</p></body></html>

HTML• The DOCTYPE declaration defines the document type to be HTML• The text between <html> and </html> describes an HTML document• The text between <head> and </head> provides information about the

document• The text between <title> and </title> provides a title for the document• The text between <body> and </body> describes the visible page content• The text between <h1> and </h1> describes a heading• The text between <p> and </p> describes a paragraph

HTML Tags• HTML tags are keywords (tag names) surrounded by angle brackets:• <tagname>content</tagname>• HTML tags normally come in pairs like <p> and </p>• The first tag in a pair is the start tag, the second tag is the end tag (<p>)• The end tag is written like the start tag, but with a slash before the tag

name (</p)

HTML Page Structure

HTML Heading• HTML headings are defined with the <h1> to <h6> tags:

<!DOCTYPE html><html><head>

<title>Headings</title></head><body>

<h1>My H1 Heading</h1><h2>My H2 Heading</h2><h3>My H2 Heading</h3><h4>My H2 Heading</h4><h5>My H2 Heading</h5><h6>My H2 Heading</h6>

</body></html>

Save as HTML_L1.html

Then use a browser to see

the result!

HTML Paragraphs• HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph. This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p><p>This is the second paragraph. This is the second paragraph.This is the second paragraph.This is the second paragraph.This is the second paragraph.This is the second paragraph.</p><p>This is the last one. This is the last one.This is the last one.This is the last one.This is the last one.This is the last one.This is the last one.This is the last one.This is the last one.</p>

Add these tags to

HTML_L1.htmlThen use a

browser to see the result!

HTML Elements

HTML Attributes<!DOCTYPE html><html lang="en-US"><body>

<h1>My First Heading</h1><p>My first paragraph.</p><!--Title attributes --> <p title="About W3Schools">

W3Schools is a web developer's site. It provides tutorials and references covering many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.</p></body></html>

HTML Attributes<!--href attributes --> <a href="http://www.w3schools.com">This is a link</a>

<!--Size attributes --> <img src="w3schools.jpg" width="104" height="142">

-- Always Use Lowercase Attributes --

HTML Attributes

<pre> Element<p>The pre tag preserves both spaces and line breaks:</p>

<pre> My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.</pre>

HTML Formatting<p>This text is normal.</p>

<p><strong>This text is strong</strong>.</p><p><i>This text is italic</i>.</p><p><em>This text is emphasized</em>.</p><small>Small</small> Formatting<mark>Marked</mark> Formatting<p>My favorite color is <del>blue</del> red.</p><p>My favorite <ins>color</ins> is red.</p><p>This is <sub>subscripted</sub> text.</p><p>This is <sup>superscripted</sup> text.</p>

HTML CommentsComment tags <!-- and --> are used to insert comments in HTML.

<!-- Write your comments here -->

HTML Quotation

<q> for Short Quotations

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

<blockquote> for Long Quotations<blockquote cite="http://www.worldwildlife.org/who/index.html">For 50 years, WWF has been protecting the future of nature.The world's leading conservation organization,WWF works in 100 countries and is supported by1.2 million members in the United States andclose to 5 million globally.</blockquote>

<abbr> for AbbreviationsMarking abbreviations can give useful information to browsers, translation systems and search-engines.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<address><address>Written by Jon Doe.<br> Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address>

<bdo> for Bi-Directional Override<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

Assignment• Create your first web page using the given source code. Then

modify your own contents.