Scribd
Upload
33 views

RCS 202 HTML Part 1

HTML is a markup language used to define the structure and layout of web pages. It uses tags to describe and annotate elements within the page like headings, paragraphs, links, and images. Common tags include <html> for overall page content, <head> for metadata, <title> for the page title, <body> for visible content, and <p> for paragraphs. Tags can have attributes to provide additional information to customize elements.

Uploaded by

david
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views

RCS 202 HTML Part 1

HTML is a markup language used to define the structure and layout of web pages. It uses tags to describe and annotate elements within the page like headings, paragraphs, links, and images. Common tags include <html> for overall page content, <head> for metadata, <title> for the page title, <body> for visible content, and <p> for paragraphs. Tags can have attributes to provide additional information to customize elements.

Uploaded by

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

HTML

What is HTML?

• HTML is a language for describing web pages.


• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup language
• A markup language is a set of markup tags
• The purpose of the tags are to describe page contents.
INTRODUCTION TO HTML

• With HTML you can create your own Web site.


• HTML stands for Hyper Text Markup Language.
• HTML is not a programming language, it is a Markup
Language.
• A markup language is a set of markup tags.
• HTML uses markup tags to describe web pages.
• HTML is not case sensitive language.
• HTML documents contain HTML tags and plain text.
HTML Tags

• HTML markup tags are usually called HTML tags


• HTML tags are keywords (tag names) surrounded by angle
brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, <b>, the second tag is the end
tag, </b>.
• The end tag is written like the start tag, with a forward slash
before the tag name
HTML Documents = Web Pages

• HTML documents describe web pages

• HTML documents contain HTML tags and plain text

• HTML documents are also called web pages


HOW TO START

• Write html code in notepad/ any editor


• Save the file with (.Html) / (.Htm) extension.
• View the page in any web browser
• The purpose of a web browser (like internet explorer or firefox) is to
read html documents and display them as web pages.
HTML Elements and Tags
• A tag is always enclosed in angle bracket <>like <HTML>

• HTML tags normally come in pairs like <HTML> and </HTML> i.e.

Start tag = <HTML>

End tag =</HTML>

• Start and end tags are also called opening tags and closing tags
HTML Page Structure

<html>
<head>
</head>
<body>
< body>
</body>
< h1>This a Heading</h1>
< p>This is a paragraph.</p>
< p>This is another paragraph.</p>
< /body>

</html>
HTML - <head> Element

• The <head> is usually the first element contained inside the <html>
element. While it is also an element container that encapsulates other
HTML elements, these elements are not directly displayed by a web
browser, they function behind the scenes, providing more descriptive
information about the HTML document, like page title and other meta
data.
• Elements used for scripting (JavaScript) and formatting (CSS) are also
contained within the <head> element
HTML - <title> Element

• The <title> element adds a title to a web page. Web page titles are
displayed at the top of any browser window or at the top of
browser tabs. They are probably the first thing seen by web surfers
as pages are loaded,
• web pages bookmark/Favorites ___saved using the web pages'
titles.
• A proper title makes a good first impression, and any page caught
without a title is considered unprofessional.
<title> Dawha School </title>
HTML - <body> Element

• The body elements contain all of the page's viewable content.


(paragraphs, pictures, tables, heading, bullets, numbering,
unorderlist, colors, etc.)
Explain these tags

• <HTML> - Describe HTML web page that is to be viewed by a web browser.

• <HEAD> - This defines the header section of the page.

• <TITLE> - This shows a caption in the title bar of the page.

• <BODY> - This tag show contents of the web page will be displayed.
HTML Attributes

• HTML elements can have attributes


• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"
Tags & Attributes

• <body> Started Body of the webpage


• </body>
• bgcolor Attribute
• <body bgcolor= "Red" > Started Red colored Body of the webpage
</body>
Background Colour and Graphics

• Attributes of <BODY>
• BGCOLOR=”code”
• Specify color for background of the screen
• BACKGROUND=”path/file”
• Tiles the graphic in the file to fit the screen
<BODY BGCOLOR=”green”>
<BODY BGCOLOR=”#00FF00”>
<BODY BACKGROUND=”abcpict.jpg”>
Changing Font

• <FONT> This is an example of a font tag</FONT>


• Attributes
• SIZE=“…” (font size, 1 through 7)
• COLOR=“…” (font colour)
• FACE=“…” (font type)
• <FONT SIZE=“3” COLOR=“#FF9933” FACE=“tahoma”> …</FONT>
Attribute Example

• HTML links are defined with the <a> tag. The link address is
specified in the href attribute:
• <a href="http://www.dawhaschool.ae">This is a my school
website</a>
Types of HTML Tags
There are two different types of tags:->

Container Element:->
Container Tags contains start tag & end tag i.e.
<HTML>… </HTML>

Empty Element:->
Empty Tags contains start tag i.e.
<BR>
Example: Code With HTML
<HTML>
<HEAD>
<TITLE>
MY FIRST PAGE
</TITLE>
</HEAD>
<BODY>
GLOBAL INFORMATION CHANNEL
</BODY>
</HTML>
HTML Headings
• Headings are defined with the <h1> to <h6> tags.

<h1> This is a heading 1</h1>


< h2>This is a heading 2</h2>
< h3>This is a heading 3</h3>
Text Formatting Tags
Heading Element:->

• There are six heading elements (<H1>,<H2>,<H3>,<H4>,


<H5>,<H6>).
• All the six heading elements are container tag and
requires a closing tag.
• <h1> will print the largest heading
• <h6> will print the smallest heading
Heading Tag Code
<html>
<head><title>heading</title></head>
<body>
<h1> GLOBAL INFO CHANNEL</h1><br>
<h2> GLOBAL INFO CHANNEL</h2><br>
<h3> GLOBAL INFO CHANNEL</h3><br>
<h4> GLOBAL INFO CHANNEL</h4><br>
<h5> GLOBAL INFO CHANNEL</h5><br>
<h6> GLOBAL INFO CHANNEL</h6>
</body>
</html>
Result of Heading Code
HTML Paragraph Tag
• HTML documents are divided into paragraphs.
• Paragraphs are defined with the <p> tag i.e.
<p>This is a paragraph</p><p>This is another paragraph</p>

<p>This is another paragraph</p>


<p>This text is preformatted</P>
Line Break
• if you want a line break or a new line without starting a new
paragraph Use the <br> tag.

• <br> element are empty HTML element i.e. Global


Information Channel
Global Information <br> Channel
Text Formatting Tags
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<super> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<tt> Defines teletype text
<u> Defines underline text
<strike> Defines strike text
Text Formatting Code
<html>
<head></head>
<body>
<b>This text is Bold</b>
<br><em>This text is Emphasized</em>
<br><i>This text is Italic</i>
<br><small>This text is Small</small>
<br>This is<sub> Subscript</sub> and <sup>Superscript</sup>
<br><strong>This text is Strong</strong>
<br><big>This text is Big</big>
<br><u>This text is Underline</u>
<br><strike>This text is Strike</strike>
<br><tt>This text is Teletype</tt>
</body>
</html>

You might also like