Scribd
Upload
9 views

HTML - Introduction

HTML is a markup language that defines the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, lists, and more. An HTML document includes a <head> containing the <title>, and a <body> where all visible content goes. Common text-based elements in HTML allow adding headings, paragraphs, bold, italics, and horizontal rules to structure and style a web page.

Uploaded by

lahoom.khalid.1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

HTML - Introduction

HTML is a markup language that defines the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, lists, and more. An HTML document includes a <head> containing the <title>, and a <body> where all visible content goes. Common text-based elements in HTML allow adding headings, paragraphs, bold, italics, and horizontal rules to structure and style a web page.

Uploaded by

lahoom.khalid.1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

>> Introduction to HTML: Tags

HTML - Definition

• Hyper - is the opposite of linear


• Text – words / sentences / paragraphs
• Mark-up – Marking the text
• Language – It is a language

– Markup language that specifies the structure and content


of documents that are displayed in web browsers
– We’ll create HTML documents by typing HTML markup text
in a text editor (such as Notepad, TextEdit, vi, emacs) and
saving it with the .html or .htm filename extension.

Fundamentals of Web Programming 2


How to write HTML?
• An HTML document is comprised of one word commands
enclosed between the less than (<) and greater than (>)
sign

• Determine how the page is handled

• Also called “TAGS”

• Tags nearly always come in pairs:


– an opening tag <html>
– a closing tag </html>

Fundamentals of Web Programming 3


HTML TAGS
element = <opening tag> + content + <closing tag>

Tag Structure

Element
End Tag
Start Tag Content
<h2 style=“background-color:#ff0000;” >My First HTML Class </h2>
Attribute

Fundamentals of Web Programming 4


HTML Structure
• 5 Important HTML Tags you should know
before coding an HTML document

– DOCTYPE
– HTML
– HEAD
– TITLE
– BODY

Fundamentals of Web Programming 5


Empty HTML Document

<!DOCTYPE html>
<html>
<head>
<title>

</title>
</head>
<body>

</body>
</html>

Fundamentals of Web Programming 6


DOCTYPE Tag
• DOCument TYPE
• Should be placed at the start of each web page
• Shows which standard the page complies with

HTML ver. 4.1


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

HTML ver. 5
<!DOCTYPE html>

Fundamentals of Web Programming 7


HTML Tag
• Root Element / Tag
• Contains all tags that will be used in an HTML document
• Necessary
• Attribute “lang”
– define the language of the content within the document

<html lang=“en”>

</html>

Fundamentals of Web Programming 8


HEAD Tag
• Provide information about the author, title and
description of the page

• Also includes links to other scripting languages


such as CSS and JavaScript

• meta tags (like keywords used by search engines)

• Includes the <title> tag


– Includes a descriptive title of your web page

Fundamentals of Web Programming 9


BODY Tag

• Contains information that will be


displayed on the web
– Text, Images, Videos, Ads, Links etc.

Fundamentals of Web Programming 10


TRY NOW

• Create a new html file and call it


“mypage.html”
• Add the five required tags – doctype,
html, head, title and body
• Add the title text as “My Personal Page”

Fundamentals of Web Programming 11


Comments in HTML
• Content wrapped within a comment will not be
displayed on the web page
• Comments help keep our files organized
• Comments become especially useful when there are
multiple people working on the same files

HTML comments start with <!-- and end with -->

EXAMPLE

<!-- This is a comment in HTML -->

Fundamentals of Web Programming 12


TEXT-BASED ELEMENTS
IN HTML

Fundamentals of Web Programming 13


Heading Tags
<h1>the biggest heading</h1>
<h2>the second biggest heading</h2>
………
………
………
<h6>the smallest heading</h6>

• Create a <h3> sized heading in the body


TRY NOW • Make the heading as “My Contact Info
(Just don't forget to close it)

Fundamentals of Web Programming 14


Paragraph Tag

Enclosed between the <p> and </p> tags

• Create three paragraphs using <p> tags


• Fill them with content
TRY NOW • Address
• Telephone
• Email Address

Fundamentals of Web Programming 15


Bold Tag

– To make text bold and place a strong


importance on it
– Enclosed between the <strong> and
</strong> tags

• For each of the <p> added before


• Bold the titles
TRY NOW • Address
• Telephone
• Email Address

Fundamentals of Web Programming 16


Italics Tag

– To italicize text, thereby placing emphasis on


it
– Enclosed between the <em> and </em> tags

• For each of the <p> added before


TRY NOW • Italicize the content of each of them

Fundamentals of Web Programming 17


del Tag

• Most browsers render the del element as strike-


through text. With this format users can
indicate document revisions.
• To strike through a text enclosed between the
<del> and </del> tags

Fundamentals of Web Programming 18


Sup and sub Tags

• To superscript text (i.e., raise text above the


baseline and in a decreased font size) use the
sup tag
• To subscript text (i.e., lower text below the
baseline and in a decreased font size), use the
sub tag

• The first item in the list is x1 (subscript)


• 1 Km= 1 x 103 m (superscript)
Fundamentals of Web Programming 19
Horizontal rule

• Most browsers render a horizontal rule,


indicated by the <hr/> tag, as a
horizontal line
• The hr element also inserts a line break
above and below the horizontal line

Fundamentals of Web Programming 20


HTML Elements

Paired Elements Void Elements

• Has both starting & ending tags • No End Tag


• Example • No Content
• Header Tags • Self-Closes
• Paragraph Tags

Fundamentals of Web Programming 21


Summary
• HTML is used to give websites structure.
• We open HTML files using a browser, and the
browser renders(shows us) the file.
• HTML files have a <head> and a<body> (just like you!)
• In the head, we have the <title>tags, and we use these to
specify the webpage's name.
• How to make headings and paragraphs.
• How to bold and italicize text on the page
22

You might also like