Scribd
Upload
2 views24 pages

Lesson 3 HTML Documents

Uploaded by

yorikii127
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views24 pages

Lesson 3 HTML Documents

Uploaded by

yorikii127
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

LESSON 3:

HTML DOCUMENT
HTML Documents
An HTML document is a file containing hypertext markup
language. HTML code is based on tags, or hidden keywords,
which provide instructions for formatting the document. A
tag starts with an angle bracket and the 'less than' sign: '<'.
The tag ends with an angle bracket and the 'greater than' sign
'>'. Tags tell the processing program, often the web browser,
what to do with the text. For example, to make the word
'Hello' bold, you would use the opening bold tag <b> and then
the closing bold tag </b>, like this:
<b>Hello</b>
• HTML is defined by the World Wide Web Consortium, an
organization that regulates standards for the Internet.
Each version of HTML has a set of definitions.
• Note that HTML is not a programming language. While
we often refer to HTML markup as HTML code,
programming languages require the processing of logical
statements and math.
• HTML allows the developer to make text documents look
engaging and pleasant. In most cases, programming on an
HTML document is done with JavaScript.
All HTML documents must start with a
document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html>


and ends with </html>.

The 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>
The <!DOCTYPE> Declaration

It must only appear once, at the top of the page (before any HTML t
The <!DOCTYPE> declaration is not case sensitive.

Th <!DOCTYPE> declaration represents the


e document type, and helps
browsers to display web pages
correctly.
The <!DOCTYPE>
declaration for HTML5 is:
<!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers


automatically add some white space (a margin) before and after a
paragraph.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.facebook.com">This is a
link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information
about HTML elements.
www.Facebook.co
m
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and
height are provided as attributes:
Example
<img src="sadgirl.jpg" alt="sad" width="104"
height="142">
HTML <button> Tag
Example
A clickable button is marked up as
follows:
<button type="button">Click Me!
</button>
Definition and Usage
The <button> tag defines a clickable button.

Inside<button element you can put text (and tags like


a > <i>, <strong>, <br>, <img>, etc.). This
is not
possible with a button created with the <input>
element!
Tip: Always<button element, to tell browsers what
specify the type> type of button it is.
HTML lists allow web authors to group a set of related items in lists.
Example
An unordered HTML list:
• Item • Item • Item
• Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
The list items will be marked with bullets (small black circles)
by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

You might also like