Scribd
Upload
6 views

Lesson 3.1 HTML Documents 1

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
6 views

Lesson 3.1 HTML Documents 1

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/ 14

LESSON 3.

1
HTML DOCUMENTS
HTML Elements
An HTML element is defined by a start tag, some content,
and an end tag.
HTML Elements
The HTML element is everything from the start tag to the
end tag:

<tagname>Content goes here...</tagname>


Examples of some HTML elements:

<h1>My First Heading</h1>


<p>My first paragraph.</p>
Nested HTML Elements
HTML elements can be nested (this
means that elements can contain other
elements).

All HTML documents consist of nested


HTML elements.

The following example contains four HTML


elements (<html>, <body>, <h1> and
Never Skip the End Tag
Some HTML elements will
display correctly, even if you
forget the end tag:
However, never rely on this!
Unexpected results and errors
may occur if you forget the end
tag!
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P>
means the same as <p>.

The HTML standard does not require


lowercase tags, but recommends
lowercase in HTML, and demands
lowercase for stricter document types
like XHTML.
HTML Attributes
All HTML elements can have
attributes
Attributes provide additional
information about elements
Attributes are always specified in the
start tag
Attributes usually come in
The href Attribute
The <a> tag defines a hyperlink.
The href attribute specifies the URL of the page the link goes to:

<html>
<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the
href attribute:</p>

<a href="https://www.facebook.com">Visit Facebook</a>

</body>
</html>
The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the
image to be displayed:

<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>


<p>HTML images are defined with the img tag, and the filename of the image source is specified in the
src attribute:</p>

<img src="SAD GIRL.jpg" width="500" height="600">

</body>
</html>
The width and height
Attributes
The <img> tag should also
contain the width and height
attributes, which specify the
width and height of the image
(in pixels):
The alt Attribute
 The required alt attribute for the <img> tag specifies an alternate text for
an image, if the image for some reason cannot be displayed.
 This can be due to a slow connection, or an error in the src attribute, or if
the user uses a screen reader.

<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>


<p>The alt attribute should reflect the image content, so users who cannot
see the image get an understanding of what the image contains:</p>

<img src= " SAD GIRL.jpg" alt= "A SAD GIRL" width="500" height="600">

</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse
over the element:

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to display the title


attribute as a tooltip.</p>

</body>
</html>

You might also like