Scribd
Upload
34 views

Introduction To HTML: by Usman Zahid Saif Ul Haq

This document provides an introduction to HTML. It explains that HTML stands for Hypertext Markup Language and uses tags to mark up text. It then demonstrates a basic HTML page structure with tags like <html>, <body>, <title>, <h1>, and <p>. It also explains common HTML elements, attributes, and empty tags. Important tags covered include headings, paragraphs, line breaks, bold, italic, and horizontal lines. The document concludes by discussing how to add images using the <img> tag and attributes like src, alt, height and width.

Uploaded by

Salman Hameed
Copyright
© Attribution Non-Commercial (BY-NC)
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
34 views

Introduction To HTML: by Usman Zahid Saif Ul Haq

This document provides an introduction to HTML. It explains that HTML stands for Hypertext Markup Language and uses tags to mark up text. It then demonstrates a basic HTML page structure with tags like <html>, <body>, <title>, <h1>, and <p>. It also explains common HTML elements, attributes, and empty tags. Important tags covered include headings, paragraphs, line breaks, bold, italic, and horizontal lines. The document concludes by discussing how to add images using the <img> tag and attributes like src, alt, height and width.

Uploaded by

Salman Hameed
Copyright
© Attribution Non-Commercial (BY-NC)
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/ 11

INTRODUCTION TO HTML

By
Usman Zahid
Saif ul Haq
WHAT IS HTML?
• Hyper Text Markup Language.
– Hyper Text means non-linear.
– Markup means marking text as a special type.

• HTML Tags:
– Markup tags are called HTML tags
– HTML tags mark text as special type
– ‘< >‘ is called opening tag.
– ‘</ >‘ is called closing tag.
FIRST WEBSITE

• <html>
<body>

<title>My First Website</title>

<h1>My heading</h1>

<p>welcome to my first website</p>

</body>
</html>
EXPLAINING THE FIRST WEBSITE

• <html> tag tells the starting of website and </html> tells


closing of website.

• Everything written between body tag is visible on the website.

• <h> tag represents heading.


• <p> tag represents paragraph.
• <title> tag represents the title of the website.
HTML ELEMENTS

• HTML elements is everything from start to the ending of a tag.


• E.g. <p>this is a paragraph</p> is a html element.

• Nested HTML elements?

• Empty HTML elements


• E.g. <br/>
SOME IMPORTANT TAGS

• Heading:
– Headings range from h1 to h6.

• Paragraphs:
– Used to write all details.

• Line break:
– <br> tag used to give empty space.
CONTINUED

• Bold <b>

• Italic <i>

• Subscript <sub>

• Superscript <sup>

• Horizontal Line <hr />


HTML ATTRIBUTES

• HTML elements can have attributes.

• Attributes have a name and a value:


– name=“value”

• E.g. background color


– <h2 style="background-color:red">This is a heading</h2>

– Here style is an attribute name and rest is value of style attribute.


CONTD

• More examples:
– <p style="color:orange">welcome to my 2nd website</p>

– <p style="color:red; font-style:italic">red italic text!</p>

• Similarly
– text-align:centre
– font-family:arial
– font-size:20px
ADDING IMAGES

• <img> tag is used to include image in a website.

• Image tag is empty tag. I.e. it has no closing tag.

• Image tag uses source attribute (src) .

• <img src=“ url or image” />


CONTINUED

• E.g.
– <img width="125" height="125" src="logo.png" alt="error pic not
opening"/>

• Alt attribute gives an alternative text to be displayed in case picture does


not open
• Height and width set the image height and width.

You might also like