Scribd
Upload
23 views13 pages

Class 2

This document provides an overview of HTML headings, paragraphs, links, images, and attributes from an HTML Class 2. Key points covered include using the <h1> to <h6> tags for headings, the <p> tag for paragraphs, the <a> tag and href attribute for links, the <img> tag and src, alt, width, and height attributes for images. The class also discusses viewing the HTML source and inspecting elements, HTML tags, nested elements, and common attributes like style, lang, and title.

Uploaded by

Javed Iqbal
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
23 views13 pages

Class 2

This document provides an overview of HTML headings, paragraphs, links, images, and attributes from an HTML Class 2. Key points covered include using the <h1> to <h6> tags for headings, the <p> tag for paragraphs, the <a> tag and href attribute for links, the <img> tag and src, alt, width, and height attributes for images. The class also discusses viewing the HTML source and inspecting elements, HTML tags, nested elements, and common attributes like style, lang, and title.

Uploaded by

Javed Iqbal
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/ 13

Web Development

Course
Javed Iqbal
[email protected]
HTML Class 2
Previous Class
• What is HTML?
• HTML Elements
• A Simple HTML Document
• HTML Editor
HTML Class 2
• HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1>This is heading 1</h1>
• <h2>This is heading 2</h2>
• HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
• <p>This is a paragraph.</p>
HTML Class 2

• HTML Links
• HTML links are defined with the <a> tag:
• <a href="https://www.olx.com.pk">This is a link</a>
• HTML Images
• HTML Images are defined with the <img> tag:
• The source file (src), alternative text (alt), width, and height are provided
as attributes:
• <img src=“olx.jpg" alt=“olx.com.pk" width="104" height="142">
HTML Class 2

• View HTML Source


• Right-click in an HTML page and select "View Page Source"
• This will open a window containing the HTML source code of the page.

• Inspect an HTML Element


• Right-click on an element (or a blank area) and choose "Inspect" or "Inspect
Element" to see what elements are made up of (you will see both the HTML and the
CSS).
HTML Class 2

• HTML Element
• The HTML element is everything from the start tag to the end tag:
• <tagname>Content goes here...</tagname>

• Nested HTML Element


• HTML elements can be nested (this means that elements can contain other
elements).
• The following example contains four HTML elements
(<html>, <body>, <h1> and <p>):
HTML Class 2

• 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 "


HTML Class 2

• The href Attribute


• The <a> tag defines a hyperlink. The href attribute specifies the
URL of the page the link goes to:

• <a href="https://olx.com.pk">Visit OLX</a>
HTML Class 2
• 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:

• <img src="img_olx.jpg">

• The width and height Attributes


• The <img> tag should also contain the width and height attributes, which specifies
the width and height of the image (in pixels):
• <img src="img_ olx.jpg" width="500" height="600">
HTML Class 2
• The alt Attribute
• The required alt attribute for the <img> tag specifies an alternate text for an image.
• <img src="img_olx.jpg" alt=“Sale Something">

• The style Attribute


• The <img> tag should also contain the width and height attributes, which
specifies the width and height of the image (in pixels):
• <p style="color:red;">This is a red paragraph.</p>
HTML Class 2
• 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.
• <html lang="en-US">

• The title Attribute


• The value of the title attribute will be displayed as a tooltip when you mouse over the
element:
• <p title="I'm a tooltip">This is a paragraph.</p>
HTML Class 2
• HTML Heading
• HTML headings are defined with the <h1> to <h6> tags.

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

• HTML Paragraph
• The HTML <p> element defines a paragraph.

• <pre>
  My Bonnie lies over the ocean.
  My Bonnie lies over the sea.

</pre>

You might also like