Scribd
Upload
2 views

Lesson-4-Creating-an-HTML-Document

Uploaded by

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

Lesson-4-Creating-an-HTML-Document

Uploaded by

jeanshrmaine
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

CREATING AN HTML

DOCUMENT
HTML HEADINGS
HTML headings are
defi ned with the to tags.

<h1> defi nes the most


important heading. <h6>
defi nes the least
important heading:
Example
<h1>This is heading
1</h1> <h2>This is
heading 2</h2> <h3>This
is heading 3</h3>

2
HTML PARAGRAPHS
HTML paragraphs are
defined with the <p> tag:
Example
<p>Once upon a time, there was a
sweet and kind-hearted princess
named Snow White.</p>
<p>Her mother died when she was
born and her father soon married
another woman.</p>

3
HTML IMAGES
HTML images are defined Example
with the <img> tag.
<img src="blackcat.jpg"
The source file (src), alt="blackcat.com"
alternative text (alt), width, width="200"
and height are provided as height="200">
attributes:

4
Example
HTML LISTS <ul>
HTML lists are
defined with the <li>Coffee</
<ul> li>
(unordered/bullet <li>Tea</li>
list) or the <ol>
<li>Milk</
(ordered/numbere
li>
d list) tag, followed
by <li> tags (list </ul>
items):

<ol>
<li>Coffee</
li>
<li>Tea</li>
<li>Milk</
li>
</ol>
5
DISPLAY
You cannot be sure how HTML will be displayed. Large or
small screens, and resized windows will create different
results.
With HTML, you cannot change the output by adding extra
spaces or extra lines in your HTML code.
The browser will remove any extra spaces and extra lines
when the page is displayed:

6
LINE BREAKS
The HTML <br> element defines a line break. The <br> tag is an
empty tag, which means that it has no end tag.
Use <br> if you want a line break (a new line) without starting a
new paragraph:
Example
<p>This is<br>a paragraph<br>with line
breaks.</p>

7
<PRE> ELEMENT
The HTML <pre> element
defines preformatted text.
The text inside a <pre>
element is displayed in a
fixed-width font (usually
Example
Courier), and it preserves both
spaces
<pre> and line breaks:
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>
8
FORMATTING ELEMENTS
HTML also defines special
elements for defining text Example
with a special meaning. • <b> - Bold text
HTML uses elements like • <strong> - Important text
<b> and <i> for
formatting output, like bold • <i> - Italic text
or italic text. • <em> - Emphasized text
Formatting elements were • <mark> - Marked text
designed to display special
• <small> - Small text
types of text:
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

9
<ABBR> FOR ABBREVIATIONS
The HTML <abbr> element defines an abbreviation
or an acronym.
Marking abbreviations can give useful information to
browsers, translation systems and search engines.

Example
<p>The <abbr title="World Health
Organization">WHO</abbr> was founded in 1948.</p>

10
<ADDRESS> FOR CONTACT
INFORMATION
The HTML <address> element defines contact
information (author/owner) of a document or an article.
The <address> element is usually displayed in italic.
Most browsers will add a line break before and after the
element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
11
<CITE> FOR WORK TITLE
Example
The HTML <cite> element
defines the title of a work. <p><cite>The
Scream</cite> by Edvard
Browsers usually display Munch. Painted in 1893.</p>
<cite> elements in italic.

12
<BDO> FOR BI-DIRECTIONAL
OVERRIDE
The HTML <bdo> element Example
defines bi-directional <bdo dir="rtl">This text
override. will be written from right to
The <bdo> element is used left</bdo>
to override the current text
direction: Values
Dir – an enumerated • LTR – Left to right
attribute indicating the
directionality of the • RTL – right to left
element’s text. • Auto – Lets the user decide

13
BACKGROUND IMAGES
To add a background image on an HTML element, you
can use the style attribute:
If you want the entire page to have a background image,
then you must specify the background image on the <body>
element:
Add a background image on a HTML page:
<style>
body {
background-image: url(‘blackcat.jpg');
}
</style>

14
15
BACKGROUND IMAGES
If the background image is smaller than the element, the image
will repeat itself, horizontally and vertically, until it has reach the
end of the element.
To avoid the background image from repeating itself, use the
background-repeat property
Example:
<style>
body {
background-image: url(blackcat.jpg ');
background-repeat: no-repeat;
}
</style>

16
17
BACKGROUND IMAGES
If you want the background image
cover the entire element, you can Example:
set the background-size property <style>
to cover.
body {
Also, to make sure the entire
element is always covered, set background-image:
the background-attachment url('img_girl.jpg');
property to fi xed: background-repeat: no-repeat;
As you can see, the image will background-attachment: fi xed;
cover the entire element, with no
stretching, the image will keep its background-size: cover;
original proportions. }
</style>

18
19
BACKGROUND IMAGES
If you want the background image stretch to fit the entire image in
the element, you can set the background-size property to 100%
100%:
Try resizing the browser window, and you will see that the image
will stretch, but always cover the entire element.
Example:
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style> 20
21
22
BACKGROUND IMAGES
Using the DIV element in creating background images
DIV – no special meaning. It represents its children. It can be used with the
class, lang, and title attributes to mark up semantics common to a group of
consecutive elements.
Example:
<div style="background-image: url('img_girl.jpg');"></div>

<style>
div {
background-image: url(‘img_girl.jpg’);
}
</style>

23
24
25
VIDEOS IN HTML

Before HTML5, a video could only be played in a browser


with a plug-in (like flash).
The HTML5 <video> element specifies a standard way to
embed a video in a web page.
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

26
VIDEOS IN HTML
The controls attribute adds video controls, like play,
pause, and volume.
It is a good idea to always include width and height
attributes. If height and width are not set, the page might
flicker while the video loads.
The <source> element allows you to specify alternative
video files which the browser may choose from. The
browser will use the first recognized format.
The text between the <video> and </video> tags will
only be displayed in browsers that do not support the
<video> element.

27
VIDEOS IN HTML
<video> Autoplay
To start a video automatically use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The autoplay attribute does not work in mobile devices like


iPad and iPhone.

28
VIDEOS IN HTML
<video> Loop
To start a video automatically use the loop attribute:
Example
<video width="320" height="240" autoplay loop >
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The autoplay attribute does not work in mobile devices like


iPad and iPhone.

29
VIDEOS IN HTML
<video> Muted
To start a video automatically use the muted attribute:
Example
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The autoplay attribute does not work in mobile devices like


iPad and iPhone.

30
HTML VIDEO - MEDIA TYPES

FILE FORMAT MEDIA TYPE

MP4 video/mp4

WebM video/webm

Ogg video/ogg

31

You might also like