html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
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.">
Scribd
Upload
10 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 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
We take content rights seriously. If you suspect this is your content, claim it here.
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