Download presentation
Presentation is loading. Please wait.
1
Introduction to HTML Lecture 1 Kanida Sinmai ksinmai@hotmail.com
2
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>
3
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
4
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)
5
HTML Page Structure
6
HTML 4.01 & HTML 5 1 <!DOCTYPE html PUBLIC “-//W3C//DTD HTML4.01//EN” “ <html> <head> 2 <meta http-equiv=“content-type” content=”text/html; charset=UTF-8”> 3 <link type=“text/css” rel=“stylesheet” href = “style.css”> <title>Headings</title> </head> <body> <h1>Hello World!</h1> </body> </html> 1 <!DOCTYPE html> <html> <head> 2 <meta charset=“utf-8”> <title>Headings</title> 3 <link rel=“stylesheet” href = “style.css”> </head> <body> <h1>Hello World!</h1> </body> </html>
7
Then use a browser to see the result!
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!
8
Add these tags to HTML_L1.html
HTML Paragraphs Add these tags to HTML_L1.html Then use a browser to see the result! 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>
9
HTML Elements
10
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>
11
HTML Attributes <!--href attributes --> <a href=" is a link</a> <!--Size attributes --> <img src="w3schools.jpg" width="104" height="142"> -- Always Use Lowercase Attributes --
12
HTML Attributes
13
<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. Oh, bring back my Bonnie to me. </pre>
14
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>
15
HTML Comments Comment tags <!-- and --> are used to insert comments in HTML. <!-- Write your comments here -->
16
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>
17
<blockquote> for Long Quotations
<blockquote cite=" 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 by 1.2 million members in the United States and close to 5 million globally. </blockquote>
18
<abbr> for Abbreviations
Marking 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>
19
<address> <address> Written by Jon Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
20
<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>
21
Assignment Create your first web page using the given source code. Then modify your own contents.
Similar presentations
