HTML
HTML Introduction
What
is HTML?
-> HTML is the
standard markup language for creating Web pages.
qHTML stands
for Hyper Text Markup Language
qHTML describes
the structure of Web pages using markup
qHTML elements
are the building blocks of HTML pages
qHTML elements
are represented by tags
qHTML tags
label pieces of content such as "heading", "paragraph",
"table", and so on
qBrowsers do
not display the HTML tags, but use them to render the content of the page
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
qThe
<!DOCTYPE html > declaration defines this document to be HTML5.
qThe
<html> element is the root element of an HTML page.
qThe
<head> element contains meta information about the document.
qThe
<title> specifies a title for the document
qThe
<body> element contains the visible page content.
qThe
<h1> element defines a large heading.
qThe
<p> element defines a paragraph.
HTML
Tags
->
HTML tags are element names surrounded
by angle brackets:
<tagname>content
goes here...</tagname>
qHTML
tags normally come in pairs like <p> and </p>
qThe
first tag in a pair is that start tag, the second tag is the end tag.
qThe
end tag is written like the start tag, but with a forward slash inserted before
the tag name.
qThe
start tag is also called the opening tag , and the end tag the closing tag.
q
Web
Browsers
qThe purpose of
a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and
display them.
qThe browser
does not display the HTML tags, but uses them to determine how to display the
document:
The
<!DOCTYPE> Declaration
qThe
<!DOCTYPE> declaration represented the document type , and helps browsers
to display web pages correctly.
qIt must only
appear once , at the top of the page (before any HTML tags).
qThe
<!DOCTYPE> declaration is not case sensitive.
qThe
<!DOCTYPE> declaration for HTML5.
HTML Basic
HTML Documents
qAll HTML
documents must start with a document type declaration: <!DOCTYPE
html>
qThe HTML
document itself begins with <html> and ends with </html>
qThe visible part
of the HTML document is between <body> and </body>
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
qHTML headings
are defined with the <h1> to <h6> tags.
q<h1> defines
the most important heading . <h6> defines the
least important heading.
<!DOCTYPE
html>
<html>
<body>
<h1>This
is heading 1</h1>
<h2>This
is heading 2</h2>
<h3>This
is heading 3</h3>
<h4>This
is heading 4</h4>
<h5>This
is heading 5</h5>
<h6>This
is heading 6</h6>
</body>
</html>
HTML Paragraphs
qHTML
paragraphs are defined with the <p> tag.
<!DOCTYPE html>
<html>
<body>
<p>This
is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
HTML Links
qHTML links are
defined with the <a> tag.
<!DOCTYPE
html>
<html>
<body>
<h2>HTML
Links</h2>
<p>HTML
links are defined with the a tag:</p>
<a href="https://www.w3schools.com">This
is a link</a>
</body>
</html>
qThe link's
destination is specified in the href attribute.
qAttributes are
used to provide additional information about HTML elements.
HTML Images
qHTML images
are defined with the <img> tag.
qThe source
file ( src ) , alternative text ( alt ) ,
width and height are provided as attributes:
<!DOCTYPE
html>
<html>
<body>
<h2>HTML
Images</h2>
<p>HTML
images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com"
width="104" height="142">
</body>
</html>
HTML Buttons
qHTML buttons
are defined with the <button> tag.
<!DOCTYPE
html>
<html>
<body>
<h2>HTML
Buttons</h2>
<p>HTML
buttons are defined with the button tag:</p>
<button>Click me</button>
</body>
</html>
HTML Lists
qHTML lists are
defined with the <ul> (unordered/bullet
list) or the <ol> (ordered/numbered
list) tag, followed by <li> tags (list
items):
<!DOCTYPE
html>
<html>
<body>
<h2>An
Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An
Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Elements
HTML Elements
qAn HTML
element usually consists of a start tag
and end tag,
with the content inserted in between:
q<tagname>Content
goes here...</tagname>
qThe HTML element is
everything from the start tag to the end tag:
q<p>My
first paragraph.</p>
HTML elements
with no content are called empty elements. Empty elements do not have an end
tag, such as the <br> element (which indicates a line break).
Nested
HTML Elements
qHTML elements
can be nested (elements can contain elements).
qAll HTML
documents consist of nested HTML elements.
qThis example
contains four HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example
Explained
qThe
<html> element defines the whole document.
qIt has a start tag <html> and an end tag </html>.
qThe
element content is
another HTML element (the <body> element.)
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
qThe
<body> element defines the document body.
qIt has a start tag <body> and an end tag </body>.
qThe
element content is two
other HTML elements ( <h1> and <p>)
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
qThe <h1>
element
defines a heading.
qIt has a start tag <h1> and an end tag </h1>.
qThe
element content is: My
First Heading
<h1>My
First Heading</h1>
qThe <p>
element defines a paragraph.
qIt has a start tag <p> and an end tag </p>.
qThe
element content is: My
first paragraph.
<p>My
first paragraph.</p>
Comments
Post a Comment