Scribd
Upload
5 views

ppt html 1

The document provides an introduction to HTML, detailing its structure, elements, and attributes used for creating web pages. It covers essential topics such as headings, paragraphs, links, images, and styling, along with examples of HTML code. Additionally, it explains how to view HTML source code and the importance of proper syntax and attributes in HTML documents.

Uploaded by

AnSh BS
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

ppt html 1

The document provides an introduction to HTML, detailing its structure, elements, and attributes used for creating web pages. It covers essential topics such as headings, paragraphs, links, images, and styling, along with examples of HTML code. Additionally, it explains how to view HTML source code and the importance of proper syntax and attributes in HTML documents.

Uploaded by

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

E-Commerce lab

Aakansha
Priyanka Yadav
HTML Introduction:

 HTML is the standard markup language for Web pages.


 With HTML you can create your own Website.
 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.
EXAMPLE:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>
EXPLAINATION:

•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 Documents:

All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

The <!DOCTYPE> Declaration:

The <!DOCTYPE> declaration represents the document type and helps browsers to display web pages
correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
HTML Headings:

 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>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs:

 HTML paragraphs are defined with the <p> tag:


 Example
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
HTML Links:

 HTML links are defined with the <a> tag:


 Example
<a href="http://www.ipu.ac.in/">This is a link</a>

The link's destination is specified in the href attribute.


Attributes are used to provide additional information about HTML elements.
HTML Images:

 HTML images are defined with the <img> tag.


 The source file (src), alternative text (alt), width, and height are provided as
attributes:
 Example
 <img src="https://www.example.com/image.jpg" alt="Example Image"
width="200" height="150">
How to View HTML Source:

View HTML Source Code:


 Click CTRL + U in an HTML page, or right-click on the page and select "View Page
Source". This will open a new tab containing the HTML source code of the page.
Inspect an HTML Element:
 Right-click on an element (or a blank area) and choose "Inspect" to see what
elements are made up of (you will see both the HTML and the CSS). You can also
edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
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>

Start tag Element content End tag


<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

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:
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 <p>):
 Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Empty HTML Elements:
 HTML elements with no content are called empty elements.
 The <br> tag defines a line break, and is an empty element without a closing tag:
 Example
<p>This is a <br> paragraph with a line break.</p>
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 W3C recommends
lowercase in HTML, and demands lowercase for stricter document types like
XHTML.
HTML ATTRIBUTES:

 HTML attributes provide additional information about HTML elements.


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

 Example
<a href="https://www.google.com" target="_blank" >This is a demo</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="https://media.istockphoto.com/id/1952748547/photo/smiling-woman-embracing-dog-
on-sofa.jpg?s=1024x1024&w=is&k=20&c=NgaENrEXAc0ylT21r3N-9nw_NLiRMjLDewDta8BmXvs="
alt="Dog Image" width="200" height="150">

 The <img> tag should also contain the width and height attributes, which specify the width and
height of the image (in pixels)
 The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed.
The style Attribute:
The style attribute is used to add styles to an element, such as color, font, size, and more.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>


<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>

</body>
</html>
The lang Attribute:

You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
 Country codes can also be added to the language code in the lang attribute. So, the first
two characters define the language of the HTML page, and the last two characters define
the country.

 The following example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</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:
Example
<!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>
Note:
 The title attribute (and all other attributes) can be written with uppercase or lowercase like title
or TITLE. However, lowercase attributes should be used in HTML and demands lowercase
attributes for stricter document types like XHTML.
 Always Quote Attribute Values
The HTML standard does not require quotes around attribute values.
However, use quotes in HTML, and demands quotes for stricter document types like XHTML.
Good:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bad:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

 Sometimes you have to use quotes. This example will not display the title attribute correctly,
because it contains a space:
Example:
<p title=Description of W3Schools>
Single or Double Quotes?

 Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.

 In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
 Or vice versa:
<p title="John 'ShotGun' Nelson">
HTML Headings:

 HTML headings are titles or subtitles that you want to display on a webpage.
 Each HTML heading has a default size. However, you can specify the size for any heading with the
style attribute, using the CSS font-size property.
 Example:
<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>


<p>You can change the size of a heading with the style attribute, using the font-size property.</p>

</body>
</html>
HTML Horizontal Rules:

 The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal
rule.
 The <hr> element is used to separate content (or define a change) in an HTML page.
 Example:
<!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>

</body>
</html>
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
 Example:
<!DOCTYPE html>
<html>
<body>

<p>This is<br>a paragraph<br>with line breaks.</p>

</body>
</html>
The HTML Style Attribute:

 The HTML style attribute has the following syntax:


<tagname style="property:value;">

Background Colour :
Example- Set the background color for a page to powder blue
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

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

</body>
</html>
Set background color for two different elements:

 Example:
<!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>
Text Color:

 Defines the text color for an HTML element.


 Example
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>


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

</body>
</html>
Fonts:

 font-family property defines the font to be used for an HTML element:


 Example:
<!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>
Text Size:

<!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>
 Text Alignment:
<!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:
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
Example:
<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

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

</body>
</html>
Thank you

You might also like