Scribd
Upload
5 views

HTML Chapter 1 Introduction

HTML (Hyper Text Markup Language) is the primary markup language for creating web pages, consisting of elements defined by tags. Tags can be paired or unpaired, and attributes can be added to provide additional information. The document also covers various HTML elements, their usage, and examples, including headings, paragraphs, links, and formatting options.

Uploaded by

Shehar Bano
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
5 views

HTML Chapter 1 Introduction

HTML (Hyper Text Markup Language) is the primary markup language for creating web pages, consisting of elements defined by tags. Tags can be paired or unpaired, and attributes can be added to provide additional information. The document also covers various HTML elements, their usage, and examples, including headings, paragraphs, links, and formatting options.

Uploaded by

Shehar Bano
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/ 66

HTML

 Hyper Text Markup Language (HTML) is the main


markup language for creating web pages and other
information that can be displayed in a web browser.

 HTML is written in the form of HTML elements


consisting of tags enclosed in angle brackets (like
<html>), within the web page content. HTML tags
most commonly come in pairs like <h1> and </h1>,
although some tags represent empty elements and so
are unpaired,
 For example <img>. The first tag in a pair is the
start tag, and the second tag Is the end tag (they are
also called opening tags and closing tags). In between
these tags web designers can add text, further tags,
comments and other types of text-based content.
HTML AND CSS
HTML TAGS
HTML TAGS
With HTML, XML, and other markup languages, a tag is
an element inserted in documents or files that changes
the look of content or performs an action.

Below is an HTML element with an open tag (start tag)


showing the name and attribute, and a close tag (end
tag) showing a forward slash and open tag name.
HTML TAGS
Each tag is contained between less than and greater
than angle brackets, and everything between the
opening and closing tag is displayed or affected by the
tag. In the example below, the <a> tag is creating a link
called "Computer Hope" that is pointing to the hope.html
file.
TYPE OF HTML TAGS
Tags in HTML are categorized as Paired Tags and
Unpaired Tags on the basics of opening and closing.

1-Paired Tags are tags with both opening and closing.


They can have child tags and plain text. For example
<p>, <h1>, <body> etc.

2-Unpaired tags are tags with opening only, example


<img>, <input> etc.

3- Optional Tag <open tag> </optional>

<p> Paragraph tag


TYPE OF HTML TAGS
Attributes
HTML elements can have attributes in opening tag.
Attribute provides additional information about that
element. HTML attributes are added in opening tag and
can have some value. Some popular Global Attributes
are class, id, title, style etc.
HTML5 Browsers Support
HTML5 is supported by latest browsers only. The first
browser support of html5 was seen in 2011. Here is the
list of supported browsers for html5.
BASIC STRUCTURE OF HTML - 5

<HTML>
<HEAD>
HEAD SECTION
</HEAD>

<BODY>
ACTUAL Documents
</BODY>
</HTML>
HEADING
DEFINATION:-
Heading are very important Tag in the BODY of
HTML document. It is used to display different
types of heading.

SYNTAX:-
<Hn> Your Text </Hn>
Where n Is the size of the heading. Its value is
from 1 to 6.The value 1 is represent the largest
and the value 6 represent the smallest heading
size.
ATTRIBUTES OF HEADING
ALIGN:-
It specifies the alignment of the heading . The
possible values are center, left and right. The default
value is left.

Example:-
<H1 ALIGN=“CENTRE”>Hello Heading </H1>
PARAGRAPH
Definition:-
Paragraphs are used to add text to a document in
such a way that it will automatically adjust the end
of line to suit the window size of the browser. Each
line of text will stretch the entire length of the
window. It defined with the <p>tag. The use of
ending tag </p> is optional.

Example:-
<p> I am Paragraph.</p>
ATTRIBUTES OF PARAGRAPH

ALINE:-
It specifies the alignment or
paragraph. The possible values are center,
left and right.

<p align=“center”> I Am Paragraph </p>

Link
LINE BREAKS
Definition:-
Line Breaks are used to decide where the text will break
on a line or continue to the end of the window. It can be
used to move the control to the next line. The <BR> tag is
used to end a line without inserting a new
paragraph.<BR> has no closing tag.

Example:-
Sentence One <BR>
Sentence Two<BR>

It will Appear as:

Sentence One
Sentence Two
THE POEM PROBLEM

<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</p>
THE POEM PROBLEM

 The HTML <pre> Element

 The HTML <pre> element defines preformatted


text.

 The text inside a <pre> element is displayed in


a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
THE POEM PROBLEM
<!DOCTYPE html>
<html>
<body>

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


Link
</pre>

</body>
</html>
HORIZONTAL LINE
Definition:-
Horizontal lines are used to separate different areas of the web
page. It is used to display a horizontal line in the page. The tag for
horizontal line is <HR>. This tag has no closing tag

Attributes:-
1. ALIGN: It specifies the alignment or paragraph. The possible
values are centre , left and right.

2. SIZE: It specifies the size of the line . The default size is 2 pixels.

3. WIDTH: It specifies the width of line. Width of line is according


to the width of webpage.

4. NOSHADE: It turns off the shading of line.

5. COLOR: It specifies the Color of the line.


EXAMPLE OF HORIZONTAL LINE

<HR WIDTH=50 ALIGN=“center” SIZE=4 color=“red”>


<HR WIDTH=50% SIZE=7 NOSHADE>

OUTPUT:-

Link
TEXT FORMATTING

Different tags to format text are as follows:

BOLD:-
<B> tag is used to display text in bold face style. It is
closed by </B> tag.

Example:-
<b> It Is a Bold Style </b>

ITALIC:-
<I> tag is used to display text in italic style. It is closed by
</I> tag

Example:-
<I> Italic text looks stylish.</I>
Underline:-
<U> tag is used to display text as underlined. It is closed by </U>

Example:-
<U> Underline text looks prominent. </U>

Superscript:-
<SUP> tag is used to display text as superscript. It is closed by
</SUP> tag.

Example:-
10<SUP>2</SUP>

Subscript:-
<SUB> tag is used to display as subscript. It is closed by </SUB>

Example:-
H<SUB>2</SUB>O
OUTPUT OF THE TEXT FORMATTING

Link
STRIKE TEXT

 Anything that appears within <strike>...</strike>


element is displayed with strikethrough, which is a
thin line through the text as shown below −

Link
INSERTED AND DELETE TEXT
 Anything that appears within <ins>...</ins> element
is displayed as inserted text.
 Anything that appears within <del>...</del> element,
is displayed as deleted text.

Link
LARGER AND SMALLER TEST
 The content of the <big>...</big> element is displayed one
font size larger than the rest of the text surrounding it as
shown below −
 The content of the <small>...</small> element is displayed
one font size smaller than the rest of the text surrounding it
as shown below −
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>

<body>
<p>The following word uses a <small>small</small> typeface.</p>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
Link
FONTS
Definition:-
<FONT> tag is used to specify the characteristics of
font. Different characteristics include the typeface, size
and color. It closed with </FONT> tag.

Attributes:-
 FACE:- It specifies the font of the text. The possible
values are “Arial ”, “Arial Black” and “MS sans Serif”
etc.

 SIZE:- It specifies the font size of the text. It can be


from 1 to 7. the default size is 3. the size 1 displays 8pt
size, size 2 displays 10pt and so on.

 COLOR:- It specifies the color of the text. It can be


given as color name or hexadecimal value of the color.
EXAMPLES:-
<FONT SIZE=+2 FACE=“Verdana”>Verdana</FONT><BR>

<FONT SIZE=+2 FACE=“Arial”>Arial<FONT><BR>

<FONT SIZE=+2 FACE=“Times New Roman”>Times New


Roman</FONT><BR>

<FONT SIZE=+2 FACE=“Comic Sans MS”>Comic Sans


MS</FONT><BR>

Link
SPACES
Definition:-
If an HTML document has many spaces,
additional spaces are removed automatically. If the
user inserts five spaces, four of them will removed.
Additional spaces can be inserted in the text by using
character entity &nbsp; that stands for non
breaking space.

Example:-
<B> Hello World </B>
the above example will display Hello World

<B> Hello &nbsp &nbsp &nbsp &nbsp World </B>


the above example will display Hello World
COMMON CHARACTER ENTITIES
Entity Name Description Output
&nbsp; Space
&lt; Less then <
&gt; Greater then >
&amp; Ampersand &
&quot; Quotation mark “
&cent; Cent ¢
&pound; Pound £
&yen; Yen ¥
&sect; Section §
&copy; Copyright ©
&reg; Registered trademark ®

&times; Multiplication ×
&divide; Division /
<DIV> TAG
Definition:-
<DIV> tag is used to define a section in an HTML document. It
can be used to group large section of HTML elements together
and format them with cascading style sheet. The closing tag
</DIV> is used to indicate the end section.
Attributes:-
 ALIGN: It specifies the alignment of the DIV. The
possible values are center, left and right.
The default value is left.

 STYLE: It is used to include inline cascading style sheet(CSS).

 Title:- Now let us try to add one title to this div tag. On
mouse over the div area title text will be displayed like
alt tag of images. Here is the code
DIV TITLE
 <div title="This is a test for title on Div tag">
This is a right aligned text2 </div>

Link
EXAMPLE OF <DIV>:-
<HTML>
<BODY>

<DIV STYLE=“background-color:orange;text-align:center”>
<p> It’s My Style </p>
</DIV>

<DIV STYLE=“border:1px solid black;text-align:right”>


<p> It is another style. </p>
</DIV>

</BODY>
</HTML>
EXAMPLE OF <DIV>:-

Link

Note:
STYLE=“background-color:orange; color:orange”
STYLE=“color:orange”
PAGE STRUCTURE USING DIV
PAGE STRUCTURE USING DIV
PAGE STRUCTURE USING DIV
PAGE STRUCTURE USING DIV
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>

<body>
<div id="wrapper">

<div id="header">
<div id="logo"></div>
</div>
<div id="navbar"></div>
<div id="container">
<div id="left-panel"></div>
<div id="right-section"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
PAGE STRUCTURE USING CSS
/* Zahid Javed */
*{padding: 0; margin: 0;}
#wrapper{border: solid;}
#header{height: 100px; background-color: bisque; padding: 10px;}
#logo {width: 150px; height: 100px; background-color: brown;}
#navbar {height: 50px;background-color:blueviolet; margin-top: 10px;}
#container{border: solid red; margin-top: 10px;}
#container::after{content: " "; display: block; clear: both;}
#left-panel{width: 25%; height: 600px; background-color: beige; float: left;}
#right-section{width: 74%; height: 600px;background-color:aquamarine; float:
right;}
#footer {height: 100px; background-color: green; margin-top: 10px}
<SPAN> TAG
Definition:-
<SPAN> tag is used to provide additional structure to HTML
document. It is used to group and apply styles to inline
elements. it can be used to give different characteristics to
specific parts of other elements. The HTML span element
begins with <SPAN> tag and ends with </SPAN> tag. A
style can be applied to the content placed inside the SPAN
tag using STYLE attribute.

Example:-
<p> This is a paragraph
<SPAN STYLE=“color:#FF0000;”>This is a paragraph
</SPAN> This is a paragraph </p>

<P><SPAN STYLE=“color#6600ff;”> This is another


paragraph</SPAN></P>
OUTPUT OF THE <SPAN> TAG

Link
<MARQUEE> TAG
Definition:-
HTML provides a special feature to display
scrolling and animated text in the web page. This tag
is supported by Internet Explorer, Firefox and
Netscape 7 and above. Netscape has a blink tag to
display blinking text but Internet Explorer does not
support blink tag.

Marquee tag can be used to scroll text or image in


different direction. The text placed inside the marquee
tag scroll horizontally across the screen or the web
page. The scrolling text is normally used to give
messages or display some special announcements to
the visitors.
Attributes
1- BEHAVIOR:
 It indicates how the contents will scroll. The possible
values are scroll, slide and alternate.

 The scroll value is the default value. It indicates that


the content scrolls off the edge of marquee area and
then reappears on the other side.
<!DOCTYPE html>
<html>
<body>
<marquee>This text will scroll from right to left</marquee>
</body>
</html>

Link
MARQUEE FONT
<!DOCTYPE html>
<html>
<body>

<FONT SIZE=+4 FACE=“Verdana”>


<marquee>This text will scroll from right to left</marquee>
</FONT>

</body>
</html>

Link
Attributes:-
 BEHAVIOR: It indicates how the contents will scroll.
The possible values are scroll, slide and alternate.
The scroll value is the default value. It indicates that
the content scrolls off the edge of marquee area and
then reappears on the other side.

 The slide value is almost the same. It also indicates


that when the content reaches the left edge, it stops
without scrolling off.

 The alternate value makes the content bounce back


and forth. All contents remain visible all the time.
MARQUEE BEHAVIOR

<!DOCTYPE html>
<html>
<body>
<marquee behavior="scroll">This text will scroll with behavior
scroll</marquee>
<marquee behavior="slide">This text will scroll with behavior
slide</marquee>
<marquee behavior="alternate">This text will scroll with behavior
alternate</marquee>
</body>
</html>

Link
Attributes:-
 BGCOLOR: It is used to set the background color of
the marquee. Its value can be given as a combination
of red, green and blue or name of the color. The
hexadecimal value of the color can also be used.

Link
color code chart

http://www.rapidtables.com/web/color/red
-color.htm
Attributes:-
 DIRECTION: It indicates the direction to which the
marquee will scroll. The possible values are up, down,
left and right. The default value is left. The left value
indicates that the marquee starts at the right and moves
to left across the page. The right value indicates that the
marquee starts at the left and moves to right across the
page.

Up and down left and right

Link Link
Attributes:-
 HEIGHT: It defines the height of marquee. It is given in
pixels or percentage.
 HSPACE: It is used to set the horizontal space to the left
and right of the marquee. Its value is given in pixels.
 WIDTH: It defines the width of marquee. It is given in
pixels.
 VSPACE: It is used to set the vertical space at the top
and bottom of the marquee. It is given in pixels.
<!DOCTYPE html>
<html>
<body>

<MARQUEE WIDTH="25%" BGCOLOR=YELLOW><p>Howdy


there!</p><p>Good to see ya!</p></MARQUEE>Hi There!

<MARQUEE HSPACE=10 WIDTH="25%" BGCOLOR=YELLOW><p>Howdy


there!</p><p>Good to see ya!</p></MARQUEE>Hi There!

<MARQUEE HSPACE=50 WIDTH="25%" BGCOLOR=YELLOW><p>Howdy


there!</p><p>Good to see ya!</p></MARQUEE>Hi There!

</body>
</html>

Link
WIDTH="25%"

HSPACE=10 WIDTH="25%"

HSPACE=50 WIDTH="25%"
Page Width

WIDTH="25%"

HSPACE=10 WIDTH="25%"

HSPACE=50 WIDTH="25%"
Marquee VSpace
VSPACE sets the space between the marquee and text before and after. These
code examples show the default value of VSPACE (also 0) and two larger values:

VSPACE=10

VSPACE=50

Link
Marquee Width and Height
WIDTH and HEIGHT set the dimensions of the marquee.
This code creates a marquee that is 200 pixels wide and 150 pixels
tall. The default value for WIDTH is 100%. The HEIGHT defaults to
the natural height of content as it appears in the width.

<!DOCTYPE html>
<html>
<body>

<MARQUEE WIDTH=200 HEIGHT=150 bgcolor="red">


Howdy!
</MARQUEE>

</body>
</html>

Link
 LOOP: This specifies how many times to loop. The default value is
INFINITE, which means that the marquee loops endlessly.

<!DOCTYPE html>
<html>
<body>

<MARQUEE LOOP=2>Hello</MARQUEE>

</body>
</html>
The Scrolldelay Attribute
 SCROLLDELAY, together with SCROLLAMOUNT, sets
the speed of the scrolling. Marquee moves the content by
displaying the content, then delaying for some short period
of time, then displaying the content again in a new
position. SCROLLDELAY sets the amount of delay in
milliseconds (a millisecond is 1/1000th of a second). The
default delay is 85.
 The following examples show the default SCROLLDELAY
(i.e. when it is not set), a value of 500 (half a second) and
1000 (one full second).
Link
 <MARQUEE>Hello</MARQUEE>
 <MARQUEE SCROLLDELAY=500>Hello</MARQUEE>

 <MARQUEE SCROLLDELAY=1000>Hello</MARQUEE>
 SCROLLAMOUNT: It is used together with
SCROLLDELAY to set the speed of the scrolling. Marquee
moves the content by displaying the content and then delays
for some period of time specified in SCROLLAMOUNT that
sets the size in pixels of each jump. A higher value for
SCROLLAMOUNT makes the marquee scroll faster. The
default value is 6.

 <MARQUEE>Hello</MARQUEE>
 <MARQUEE SCROLLAMOUNT=20>Hello</MARQUEE>
 <MARQUEE SCROLLAMOUNT=50>Hello</MARQUEE>

Link
<HTML>
<BODY>
<FONT SIZE=“8” FACE=“courier” COLOR=blue>

<MARQUEE BEHAVIOR=SLIDE HEIGHT=25 WIDTH=300


BGCOLOR=red>Hello World..!</MARQUEE></FONT>

<FONT SIZE=“4” FACE=“courier” COLOR=green>

<MARQUEE WIDTH=100% BEHAVIOR=SCROLL


HSPACE=15 VSPACE=25 BGCOLOR=yellow>Hello World..!
</MARQUEE></FONT>

<FONT SIZE=“4” FACE=“courier” COLOR=blue>

<MARQUEE DIRECTION=UP WIDTH=100%


BEHAVIOR=SCROLL BGCOLOR=yellow LOOP=3>Hello
World..! </MARQUEE></FONT>

</BODY>
</HTML
<MARQUEE> Tag

Link
STYLE

 Use the style attribute for styling HTML elements


 Use background-color for background color

 Use color for text colors

 Use font-family for text fonts

 Use font-size for text sizes

 Use text-align for text alignment


HTML BACKGROUND COLOR
The background-color property defines the background color for
an HTML element.
This example sets the background color for a page to powderblue:

Link
HTML FONTS AND TEXT SIZE
HTML TEXT COLOR & ALIGN
MARQUEE SPEED (CSS)
Speed:
Specifies the speed in which the text in the
marquee moves. Possible values are Delay or
Amount

Delay:
This specifies how long to delay between each
jump. This attribute takes the time in
milliseconds.

Link

You might also like