Scribd
Upload
78 views

HTML-Hyper Text Markup Language

This document provides an overview of HTML (Hypertext Markup Language) in 3 paragraphs. It discusses that HTML is used to define the content of web pages, not the layout, and uses tags to format text. Common tags are described like headings, lists, images, and tables. The document also covers changing the layout with CSS and including features like scrolling text, mailto links, forms, text areas, and checkboxes.

Uploaded by

Albert Ngiruwonsanga
Copyright
© Attribution (BY)
Available Formats
Download as PDF, TXT or read online on Scribd
78 views

HTML-Hyper Text Markup Language

This document provides an overview of HTML (Hypertext Markup Language) in 3 paragraphs. It discusses that HTML is used to define the content of web pages, not the layout, and uses tags to format text. Common tags are described like headings, lists, images, and tables. The document also covers changing the layout with CSS and including features like scrolling text, mailto links, forms, text areas, and checkboxes.

Uploaded by

Albert Ngiruwonsanga
Copyright
© Attribution (BY)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

HTML-Hyper Text Markup

Language
By NGIRUWONSANGA Albert
University of Rwanda
College of Education-School of Education
Department of Mathematics, Science and Physical Education
Year 2 MCsE DEGREE Academic year: 2019/2020
HTML

• HyperText Markup Language (HTML) is a tool used


to build web pages.
• HTML isn’t a WYSIWYG word processor or desktop
publishing tool.
• HTML is used to define the content of a
document (what it says),
2
HTML

• But not the layout (how it looks).

• Tags: are HTML codes enclosed in angle


bracktes (< and >). These tags are used to
format the text. For example <BR> tag adds a
line breaks inside text.
3
HTML
<HTML>
<HEAD>
<TITLE>First HTML Page</TITLE>
</HEAD>
<BODY>
……
</BODY>
</HTML>
4
HTML

• H<SUB>2</SUB>O<br>
• AX<SUP>2</SUP>+BX+C=0<BR>
• <I>Italic text</I><br>
• <b>Bold text</b><br>
• <BIG>Big text</BIG></br>

5
Attributes

• Empty or beginning container tags can contain


other HTML elements called attributes, which are
special codes that modify the tags.
<HR SIZE=2 ALIGN=LEFT WIDTH=“50%”>
• Containers: are types of tags which have
beginning tag and ending tag.
6
HTML

• <small>Small text</small><br>
• <U>Underlining text</U><br>
• <P ALIGN=RIGHT>Right is right</P>
• <P ALIGN=CENTER>Center is middle</P>
• <P ALIGN=LEFT>Left is left</P>

7
HTML

• WHITE FFFFFF

• RED FF0000

• GREEN 00FF00

• BLUE 0000FF

8
HTML

• <BODY BGCOLOR=“YELLOW”>
Or
<BODY BGCOLOR=“FFFF00”>
<BODY BACKGROUND=“rock.gif”>
<BODY BGCOLOR=“SILVER” TEXT=“blue”>

9
HTML
<!- - comments are put here -->
Heading
<H1> <H2> <H3> <H4> <H5> <H6>
Anchors
• Absolute path href=“/D|/html/images/img.jpeg”
• Relative path “img.jpeg”

10
LISTS

<OL> <OL TYPE=a>

<LI>MBE <LI>MBE

<LI>PCE <LI>PCE

<LI>ELE <LI>ELE

</OL> </OL>

11
LISTS

<OL TYPE=a START=10> <UL>

<LI>MBE <LI>MBE

<LI>PCE <LI>PCE

<LI>ELE <LI>ELE

</OL> </UL>

12
HTML
Type Generated Style Examples
A Uppercase Letters A.B.C.D
a Lowercase letters a.b.c.d.e
I Uppercase Romans I.II.III.IV.
numers
i Lowercase Romans i.ii.iii.iv.
numerals
1 Arabic numerals 1.2.3.4.

13
Definition lists
<DL>
DL-Definition Lists
<DT>Ordered lists
<DD>…………</DD>
DT-Definition Term
<DT>Unordered lists
<DD>…………</DD> DD-Define Definition
</DL>

14
TABLES
<TABLE BORDER=1 CELLSPACING=10 CELLPADDING=8
HSPACE=44 VSPACE=6><TR><TD
COLSPAN=2>DMSPE</TD><TD COLSPAN=2>HLE</TD></TR>

<TR><TD>MBE</TD><TD>MCsE</TD><TD>ELE</TD><TD>
HGE</TD></TR>

</TABLE>

<CAPTION>Departments and combinations</CAPTION>


15
Images
<img src=“photo1.jpeg” width=300 height=200>

JPEG: Joint Photographers Experts Group

PNG: Portable Network Graphics

PDF: Portable Data Format

TIFF: Tagged Image File Format

GIF: Graphic Interchange Format

16
Changing the layout
<html> #right{
<head> width:900px;
<style type="text/css"> float: right;
#left{ margin:30px;
width:300px; }
float: left; </style>
margin:30px; </head>
}

17
Changing the layout
<body> <div id="right">
<div id="left"> Lkdjls sljkd s ;lskd s s;lkd s
Ljkdljsd ;lsdj ;ls;ld s;jk ;dkls uiod sd spuod sd lsd
s;klsdl s;kls s;kd ; s;’kl sd s s pspjd spu s s poidopisp
‘sl ds ‘sld’s s pid spkd po sd psd sd
psdi ps spids ps s pisd s.
Lkhdklsddl sdlk ls s;kld ;sk
s;ks ; s;sd kds sd ;ksd </div>
</div> </body>
</html>

18
Scrolling text on the screen

<MARQUEE bgcolor="#CCCCCC" loop="-1"


scrollamount="2" width="100%">Use of Float
attribute</MARQUEE>

19
Scrolling text on the screen

<MARQUEE bgcolor="#CCCCCC" loop="-1"


scrollamount="2" width="100%"
direction="right"><b>Use of Float attribute</b>

</MARQUEE>

Direction attribute can be left, right, up and down.

20
Mail to

<A HREF=“mailto:[email protected]”>E-mail me</A>

i.e.

<A
HREF="mailto:[email protected]">E-
mail me</A>

21
Select Option
<FORM>
<OPTION>option 3
<CENTER> <OPTION>option 4
Select an option: <OPTION>option 5
<SELECT> <OPTION>option 6
<OPTION>option 1 </SELECT><BR>
<OPTION SELECTED>option 2 </CENTER>
</FORM>
22
Text Area tag
<FORM>
<INPUT type="Submit"
Enter Your Comments:<BR> VALUE="Submit">
<TEXTAREA wrap="virtual" <INPUT type="Reset"
name=“Comments" rows=3 VALUE="Clear">
cols=20 MAXLENGTH=100>
</FORM>
</TEXTAREA><BR>

23
Use of option and checkbox
<FORM METHOD=post"> Select an option:<BR>
<INPUT type="checkbox"
Select an option:<BR> name="selection"> Selection
<INPUT type="radio" 1<BR>
name="option"> Option 1 <INPUT type="checkbox"
<BR><INPUT type="radio" name="selection" CHECKED>
name="option" CHECKED> Selection 2<BR>

Option 2<BR> <INPUT type="checkbox"


name="selection"> Selection
<INPUT type="radio" 3<BR>
name="option"> Option 3 <INPUT type="Submit"
<BR><BR> VALUE="Submit">
</FORM>
24
References

• Laura Lemay and Rafe Colburn, [2011] Web Publishing


with HTML and CSS. Sams Publishing, ISBN-10: 0-672-33096-2

25

You might also like