Chapter-1-Introduction to HTML5 and HTML5 Tags

Chapter-1
Introduction to HTML5 and HTML5 Tags
What is HTML?
 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
A Simple HTML Document

Example-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
 The <!DOCTYPE html> declaration defines that this document is an HTML5

document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph.
HTML History-
The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have
been many different versions of HTML.
60s. Nelson's idea of hypertext was to develop a network of connected text and multimedia
that permitted non-linear information navigation.
1991- Tim Berners-Lee invents HTML 1.0

1993- HTML 1.0 is released. Not many developers are creating websites at this time.
1995- HTML 2.0 is published. This contains the features of HTML 1.0 plus new features.
This remained the standard markup language for designing and creating websites until 1997.
1997- HTML 3.0 was invented. Here, Dave Raggett introduced a fresh draft on HTML,
which improved new features of HTML and gave more powerful characteristics for
webmasters in designing websites. Unfortunately, the powerful features slowed down the
browser in applying further improvements.
1999- The widely-used HTML 4.0 comes out. It is very successful.
2014- HTML 5.0 is released and used worldwide. It is said to be the extended version of
HTML 4.01 which was published in 2012.
HTML TAGS-
HTML Heading tag-
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>

Paragraph tag-
The <p> tag offers a way to structure your text into different paragraphs which is essential
for creating well-organized and readable web content. Each paragraph of text should go in
between an opening <p> and a closing </p> tag.
<p>This is my first heading</p>
<p>This is my second heading</p>
Line Break tag-
Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags, as
there is nothing to go in between them.The <br /> tag has a space between the
characters br and the forward slash.
<p>
Hello<br />You are on time.<br />
Thanks<br />Mahnaz
</p>
Centering the content-
You can use <center> tag to put any content in the center of the page or any table cell.
<center>
</center>
Horizontal line-
The <hr> tag creates a line from the current position in the document to the right margin and
breaks the line accordingly.
The <hr /> tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
<hr />
<p>This is my second heading</p>
Preserve Formatting-
Sometimes, you want your text to follow the exact format of how it is written in the HTML
document. In these cases, you can use the preformatted tag <pre>
<pre>
This
Is
A
Pre
Tag
</pre>
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:
Example-
<a href="https://www.w3schools.com">Visit W3Schools</a>
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:
Example-
<img src="img_girl.jpg">
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website.

Example: src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you
may be in violation of copyright laws. In addition, you cannot control external images; it can
suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does
not include the domain name. If the URL begins without a slash, it will be relative to the
current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative
to the domain. Example: src="/images/img_girl.jpg".
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):
Example
<img src="img_girl.jpg" width="500" height="600">
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.
Example-
<img src="img_girl.jpg" alt="Girl with a jacket">
HTML Formatting Elements
Formatting elements were designed to display special types of text:
 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:


Example-

<p>This is a paragraph.</p>

HTML Images-
<img src="pic_trulli.jpg" alt="Italian Trulli">
The <img> tag has two required attributes:
 src - Specifies the path to the image

 alt - Specifies an alternate text for the image
syntax-
<img src="url" alt="alternatetext">

The value of the alt attribute should describe the image
HTML <table> Tag-
Example-
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Definition and Usage
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
HTML <table> cellspacing Attribute-
The HTML <table> cellspacing Attribute is used to specify the space between the cells.
The cellspacing attribute is set in terms of pixels. If the cellspacing attribute is not explicitly
set, most browsers will apply a default spacing of 1 pixel.
Syntax-
<table cellspacing="pixels">
<td colspan="number">
<th colspan="number">
Cell padding is the space between the cell edges and the cell content.By default the padding
is set to 0.
th, td {
padding: 15px;
}
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>
Nested HTML Lists
Lists can be nested (list inside list):
Example-
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
What is the HTML <marquee> Tag?
The <marquee> tag is used to create a scrolling effect for text or images. This tag can make
content move left, right, up, or down, adding an interactive element to your web page.
Basic Syntax
<marquee>

</marquee>
Blink tag-
The HTML <blink> tag was used to create blinking text that flashes slowly.
Example-
<blink> Here is your text that has to blink. </blink>
Div Tag-
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-
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<Frame> Tag-
HTML <frame> tag define the particular area within an HTML file where another HTML web
page can be displayed.
A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or
frames, and each frame can contain different web pages.
Syntax-
< frame src = "URL" >
<frameset> Tag-
The HTML <frameset> tag defines a set of frames within a web page. It specifies the layout
of multiple frames, each containing separate HTML documents, enabling the creation of
multi-pane layouts for displaying content.
Syntax-
<frameset cols = "pixels|%|*">

Chapter-1-Introduction to HTML5 and HTML5 Tags

Uploaded by

Chapter-1-Introduction to HTML5 and HTML5 Tags

Uploaded by

Chapter-1

Introduction to HTML5 and HTML5 Tags

 HTML stands for Hyper Text Markup Language

A Simple HTML Document

 The <!DOCTYPE html> declaration defines that this document is an HTML5

1991- Tim Berners-Lee invents HTML 1.0

HTML Heading tag-

HTML headings are defined with the <h1> to <h6> tags.

<h1>This is heading 1</h1>

<p>This is my first heading</p>

<p>This is my second heading</p>

Line Break tag-

Centering the content-

<p>This is my first heading</p>

<p>This is my second heading</p>

The href Attribute

1. Absolute URL - Links to an external image that is hosted on another website.

The width and height Attributes

Formatting elements were designed to display special types of text:

 <b> - Bold text

HTML Comment Tag

<img src="pic_trulli.jpg" alt="Italian Trulli">

The <img> tag has two required attributes:

 src - Specifies the path to the image

<img src="url" alt="alternatetext">

Definition and Usage

The <table> tag defines an HTML table.

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

HTML <table> cellspacing Attribute-

Unordered HTML List

The list items will be marked with numbers by default:

Lists can be nested (list inside list):

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!

You might also like