Lecture 3

<Head> Tag Definition and Usage
The <head> element is a container for metadata (data about data)

and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not
displayed.
Metadata typically define the document title, character set, styles,
scripts, and other meta information.
The following elements can go inside the <head> element:
•<title> (required in every HTML document)
•<style>
•<base>
•<link>
•<meta>
•<script>
•<noscript>
• Example
• A simple HTML document, with a <title> tag inside the head section:
• <!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element and one or more

<tr>, <th>, and <td> elements.
• The <tr> element defines a table row, the <th> element defines a
table header, and the <td> element defines a table cell.
• An HTML table may also include <caption>, <colgroup>, <thead>,

<tfoot>, and <tbody> elements.
• Example
• A simple HTML table, containing two columns and two rows:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled
with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and after the
<div> element.
Example
A <div> section in a document that is styled with CSS:

<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
Frame & Frameset
Not Supported in HTML5.
The <frame> tag was used in HTML 4 to define

one particular window (frame) within a
<frameset>.
What to Use Instead?
Example
Use the <iframe> tag to embed another

document within the current HTML document:
<iframe
src="https://www.w3schools.com"></iframe>
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the

current HTML document.
Tip: Use CSS to style the <iframe> (see example below).
Tip: It is a good practice to always include a title attribute for the

<iframe>. This is used by screen readers to read out what the
content of the <iframe> is.
Example
An inline frame is marked up as follows:

<iframe src="https://www.w3schools.com"
title="W3Schools Free Online Web
Tutorials"></iframe>
Example
Add and remove iframe borders (with CSS):

<iframe src="/default.asp" width="100%" height="300"
style="border:1px solid black;">
</iframe>
<iframe src="/default.asp" width="100%" height="300"

style="border:none;">
</iframe>
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element + CSS</h1>
<p>An iframe with default borders:</p>

<iframe src="/default.asp" width="100%" height="300">
</iframe>
<p>An iframe with a thin black border:</p>

<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<p>An iframe with no borders:</p>

<iframe src="/default.asp" width="100%" height="300" style="border:none;">
</iframe>
</body>
</html>
The <header> element represents a container for introductory content or a set of

navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)

logo or icon
authorship information
Note: You can have several <header> elements in one HTML document. However,
<header> cannot be placed within a <footer>, <address> or another <header>
element.
Example
A header for an <article>:

<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
The <p> tag defines a paragraph.
Browsers automatically add a single blank line

before and after each <p> element.
Example
A paragraph is marked up as follows:

<p>This is some text in a paragraph.</p>
The <span> tag is an inline container used to mark up a

part of a text, or a part of a document.
The <span> tag is easily styled by CSS or manipulated with

JavaScript using the class or id attribute.
The <span> tag is much like the <div> element, but <div> is
a block-level element and <span> is an inline element.
Example
A <span> element which is used to color a part

of a text:
<p>My mother has <span
style="color:blue">blue</span> eyes.</p>
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-

width font, and the text preserves both spaces
and line breaks. The text will be displayed
exactly as written in the HTML source code.
Example
Preformatted text:
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
The <a> tag defines a hyperlink, which is used to link from one page to
another.
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue

A visited link is underlined and purple
An active link is underlined and red
Tips and Notes
Tip: If the <a> tag has no href attribute, it is only a

placeholder for a hyperlink.
Tip: A linked page is normally displayed in the current

browser window, unless you specify another target.
Tip: Use CSS to style links: CSS Links and CSS Buttons.
Example
Create a link to W3Schools.com:

<a href="https://www.w3schools.com">Visit
W3Schools.com!</a>
The <object> tag defines a container for an external resource.
The external resource can be a web page, a picture, a media player, or a

plug-in application.
To embed a picture, it is better to use the <img> tag.
To embed HTML, it is better to use the <iframe> tag.
To embed video or audio, it is better to use the <video> and <audio> tags
Example
An embedded image:
<object data="pic_trulli.jpg" width="300"
height="200"></object> Example
An embedded video:
<object data="video.mp4" width="400"
height="300"></object>

Lecture 3

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 3

Uploaded by

Copyright:

Available Formats

<Head> Tag Definition and Usage

The <head> element is a container for metadata (data about data)

• An HTML table consists of one <table> element and one or more

• An HTML table may also include <caption>, <colgroup>, <thead>,

The <div> tag defines a division or a section in an HTML document.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

A <div> section in a document that is styled with CSS:

The <frame> tag was used in HTML 4 to define

Use the <iframe> tag to embed another

The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the

Tip: Use CSS to style the <iframe> (see example below).

Tip: It is a good practice to always include a title attribute for the

An inline frame is marked up as follows:

Add and remove iframe borders (with CSS):

<iframe src="/default.asp" width="100%" height="300"

<h1>The iframe element + CSS</h1>

<p>An iframe with default borders:</p>

<p>An iframe with a thin black border:</p>

<p>An iframe with no borders:</p>

The <header> element represents a container for introductory content or a set of

A <header> element typically contains:

one or more heading elements (<h1> - <h6>)

A header for an <article>:

The <p> tag defines a paragraph.

Browsers automatically add a single blank line

A paragraph is marked up as follows:

The <span> tag is an inline container used to mark up a

The <span> tag is easily styled by CSS or manipulated with

A <span> element which is used to color a part

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

Tip: If the <a> tag has no href attribute, it is only a

Tip: A linked page is normally displayed in the current

Create a link to W3Schools.com:

The <object> tag defines a container for an external resource.

The external resource can be a web page, a picture, a media player, or a

To embed a picture, it is better to use the <img> tag.

To embed HTML, it is better to use the <iframe> tag.

You might also like