Scribd
Upload
1 views

Lesson 3 HTML Documents

Uploaded by

yorikii127
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views

Lesson 3 HTML Documents

Uploaded by

yorikii127
Copyright
© © All Rights Reserved
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