Scribd
Upload
14 views

Introduction of HTML....2nd Slides (1)

Uploaded by

Johnkyle Perez
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views

Introduction of HTML....2nd Slides (1)

Uploaded by

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

INTRODUCTION OF HTML

 HTML is the standard markup language for creating Web pages.

 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
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is
a link", etc.
 HTML Elements
 The HTML element is everything from the start
tag to the end tag:
 <tag name>Content goes here...</tag name>
 Examples of some HTML elements:
 <h1>My First Heading</h1>
 <p>My first paragraph.</p>
Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none


Example Explained
The <html> element is the root element and it defines the
whole HTML document.
It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
 <h1>My First Heading</h1>
<p>My first paragraph.</p>

HTML Attributes
HTML attributes provide additional information about HTML
elements.
 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 name/value pairs like:
name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the
URL of the page the link goes to:

<!DOCTYPE html>
<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.w3schools.com">Visit W3Schools</a>

</body>
</html>
OUTPUT
The href Attribute
HTML links are defined with the a tag. The link address is specified in the
href attribute:
Visit W3Schools
The src Attribute
 The src Attribute
 The <img> tag is used 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="img_girl.jpg" width="500" height="600">

 </body>
 </html>
OUTPUT
HTML PARAGRAPHS
A paragraph always starts on a new line, and is usually a block of
text.
HTML Paragraphs
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.
 <!DOCTYPE html>
 <html>
 <body>

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

 </body>
 </html>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an html page ,and it is
most often displayed as a horizontal rule.
The <hr> element is used to separate content ( or define a change
in an HTML page.
 <!DOCTYPE html>
 <html>
 <body>

 <h1>This is heading 1</h1>


 <p>This is some text.</p>
 <hr>

 <h2>This is heading 2</h2>


 <p>This is some other text.</p>
 <hr>

 <h2>This is heading 2</h2>


 <p>This is some other text.</p>
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:

HTML Line Breaks

 HTML Line Breaks


 The HTML < br> element defines a line break.
 Use <br>if you want a line break ( a new line) without starting a
new paragraph.
 <!DOCTYPE html>
 <html>
 <body>

 <p>This is<br>a paragraph<br>with line


breaks.</p>

 </body>
 </html>
The HTML <pre> Element

 The HTML <pre> Element


 The HTML <pre> a element defines preformatted text.
 The text inside <pre> element is displayed in a fixed –width font
(usually courier),and it preserves both spaces and a line breaks:
 <!DOCTYPE html>
 <html>
 <body>

 <p>The pre tag preserves both spaces and line breaks:</p>

 <pre>
 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>

 </body>
 </html>
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

HTML Styles

 HTML STYLE- is used to add styles to an


element, such as color, font size, and more.
 <!DOCTYPE html>
 <html>
 <body>

 <p>I am normal</p>
 <p style="color:red;">I am red</p>
 <p style="color:blue;">I am blue</p>
 <p style="font-size:50px;">I am big</p>

 </body>
 </html>
<!DOCTYPE html>
<html>
<body style="background-
color:powderblue;">

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

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:powderblue;">This is
a heading</h1>
<p style="background-color:tomato;">This is a
paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a
heading</h1>
<p style="color:red;">This is a
paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>


<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered
Heading</h1>
<p style="text-align:center;">Centered
paragraph.</p>

</body>
</html>
HTML Text Formatting

 Html formatting- HTML contains several elements for


defining text with a special meaning.
 <!DOCTYPE html>
 <html>
 <body>

 <p><b>This text is bold</b></p>


 <p><i>This text is italic</i></p>
 <p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>

 </body>
 </html>
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 Links
Links are found in nearly all web pages. Links allow users to
click their way from page to page.
<!DOCTYPE html>
<html>
<body>

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit
W3Schools.com!</a></p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>
</html>
HTML IMAGES
 HTML IMAGES- Images can improve the design and the
appearance of a web page.
 <!DOCTYPE html>
 <html>
 <body>

 <h2>Alternative text</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="img_chania.jpg" alt="Flowers in Chania" width="460"


height="345">

 </body>
 </html>
HTML Tables
 HTML TABLES- HTML tables allow web developers
to arrange data into rows and columns.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

</body>
</html>
OUTPUT:
Define an HTML Table
 A table in HTML consists of table cells inside rows and
columns.
 <!DOCTYPE html>
 <html>
 <style>
 table, th, td {
 border:1px solid black;
 }
 </style>
 <body>

 <h2>A basic HTML table</h2>

 <table style="width:100%">
 <tr>
 <th>Company</th>
 <th>Contact</th>
 <th>Country</th>
 </tr>
 <tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

<p>To understand the example better, we have added


borders to the table.</p>

</body>
</html>
Table Cells
Each table cell is defined by a <td> and a </td> tag

.
.

Table Rows
Each table rows starts with a <tr>and ends with a
</tr> tag.
 <!DOCTYPE html>
 <html>
 <style>
 table, th, td {
 border:1px solid black;
 }
 </style>
 <body>

 <h2>TR elements define table rows</h2>

 <table style="width:100%">
 <tr>
 <td>Emil</td>
 <td>Tobias</td>
 <td>Linus</td>
 </tr>
 <tr>
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th>
tag instead of the <td> tag:
Difference between Element and
Attributes?
The elements tell the browser what to display, the attributes
define how they will behave. The tags mark the beginning and the end
of an element. They may not be necessary for some elements, especially
the closing tags. Equally important, the attributes are only within the
opening
 What is an HTML Tag?
 HTML tags are what defines where an HTML element starts and where it
ends. There is usually an opening bracket followed by the element’s name
and, finally, a closing bracket.
 In most cases, there is always a start tag and an end tag enclosing an
element. Nevertheless, that is not the case for all elements.
 As far as HTML is concerned, there are several types of a tag. The first one is
the start tag. It contains two opposite angle brackets. Examples include:
 <title>
 <p>
 <b>
Document structure tag
The <html> tag is essential, encapsulating the entire
HTML document and serving as the root element for
content organization.
Commonly used tags in HTML
 In other cases, the tags may contain other aspects. That usually happens when it comes
to the opening tags. They may contain an extra attribute, including the likes of height,
width, or CSS class name, among others. Check out this example:
 The other one is the end tag. The similarity to the start tag, it has angle brackets.
However, there is a forward slash after the first angle bracket. Examples of the end
tags corresponding to the start tags above are as follows.
 </title>
 </p>
 </b>
What is an HTML Attribute?
 In simple words, an HTML attribute is what modifies an HTML element. It is usually in the form of unique words that one inserts
inside the opening tag. They control the behavior of the element that follows.
 Every tag has two sections. The first one is usually the name of the attribute, while the other one is its value. The two are
usually separated by an equals sign (=). Attributes are inside the start tag of that particular element that needs modification.
 One can enclose the value of the attribute using either double or single quotes. In some cases where there is the usage of
certain characters, quoting may not be necessary. It is good to note that the rules may be different when it comes to other
languages, including the sister one, XHTML.
 However, experts have rules unquoted attribute values to be unsafe. Equally important, not all attributes need values. A good
example is an ismap attribute, which modifies the img element. The general structure of an attribute is as follows:
A good example is attribute name
Examples of various HTML attributes
A Simple HTML Document
Example Explained
•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
What is an HTML Element?

 An HTML element is defined by a start tag, some content, and an end


tag:
 <tagname> Content goes here... </tagname>
 The HTML element is everything from the start tag to the end tag:
 <h1>My First Heading</h1>
 <p>My first paragraph.</p>
Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!
 Web Browsers
 The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents
and display them correctly.
 A browser does not display the HTML tags, but uses them to determine how to display
the document:
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>
HTML Attributes
HTML attributes provide additional information
about HTML elements.
 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 name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the
URL of the page the link goes to:
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:
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.
HTML TAGS

 Most commonly used tags in HTML refer to HTML elements


frequently utilized for structuring web content. These include <div> for
division, <p> for paragraphs, <a> for hyperlinks, <img> for images,
and others essential for building web pages, forming the basis of web
development.
END THE SLIDES…

You might also like