Introduction to HTML. HTML Hyper Text Markup Language Page Title My First Heading My first paragraph. Page Title My First Heading My first paragraph.
Dec 29, 2015
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
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.
Related Documents
