CC101 HTML Week4-5.ppsx

HTML
CC101 – Introduction to Computing

LESSON 5– HTML
LEARNING OUTCOMES:
At the end of the session, the students should be
able to:
1. Understand how HTML works;
2. Explore the uses of different Tags and Attributes;
3. Create a simple static Website.

2
LESSON 5– HTML
What is HTML?
• Stands for Hypertext Markup Language
• Is not a true programming language.
• HTML is used to create electronic documents that
can be read on many different systems using
software called BROWSER.
• 1980’s Dr. Tim Berners-Lee wrote a small computer
program.
• An html file must have an .htm or .html file
extension.

3
LESSON 5– HTML
Hypertext
- is the method by which you move around on
the web — by clicking on special text
called hyperlinks which bring you to the next
page.
Markup
- is what HTML tags do to the text inside
them.
HTML is a Language
- as it has code-words and syntax like any
other language.

4
LESSON 5– HTML
What do I need to Begin?

Folder(Also called as a directory)
 A Browser
 Word Processor

5
LESSON 5– HTML
HTML Structure

6
LESSON 5– HTML
HTML Structure
HTML ELEMENT<html></html>
• begins and ends each and every web page.
• Its sole purpose is to encapsulate all the HTML code and describe the HTML
document to the web browser.
• Remember to close your HTML documents with the corresponding </html> tag
at the bottom of the document.
HEAD ELEMENT<head></head>
• is "next" as they say
• The head functions "behind the scenes."
• Tags placed within the head element are not directly displayed by web
browsers.

7
LESSON 5– HTML
TITLE ELEMENT<title></title>
• Place the <title> tag within the <head> element to title your page.
• The words you write between the opening and closing
<title></title> tags will be displayed at the top of a viewer's
browser.
BODY ELEMENT<body></body>
• The <body> element is where all content is placed. (Paragraphs, pictures,
tables, etc).
• It will encapsulate all of your webpage's viewable content.

8
LESSON 5– HTML
HTML - ELEMENTS
• An HTML element is defined by a starting tag.
• If the element contains other content, it ends with
a closing tag
• Three basic parts:
• Opening Tag - <p>
• Element Content - words/sentences/paragraph
• Closing Tag - </p>

9
LESSON 5– HTML
HTML - ELEMENTS
<html>
<head>
<title>HTML-Elements</title>
</head>
<body>
</body>
</html>
See output...
10
LESSON 5– HTML
HTML - ELEMENTS

11
LESSON 5– HTML
Correct Usage of Tags!

• We have "beginning" or "opening" tags.
• and we have "ending" or "closing" tags.
• An element that has an opening and closing tag is
referred to as a container element because
anything contained between these tags are
affected by the element.
• Closing Tags cannot be placed just anywhere.
• Use the "Last In = First Out" principle or "LIFO".
• <tag1><tag2>Content<tag2><tag1>

12
LESSON 5– HTML
HTML - BASIC TAGS

• Heading Tag
• Paragraph Tag
• Line Break Tag
• Center Content
• Horizontal Lines
• Preserve Formatting
• Non breaking Spaces

13
LESSON 5– HTML
Header Tag
• Any document starts with a Example:
heading. You can use <html>
<head>
different sizes for your <title>Heading Example</title>
headings. </head>
<body>
• HTML also has six levels of
headings, which use the
elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>.
• <h1>content</h1>
</body>
</html>
See Output...
14
LESSON 5– HTML

15
LESSON 5– HTML
Paragraph Tag
• The <p> tag offers a Example:
<html>
way to structure your <head>
text into different <title>Paragraph Example</title>
</head>
paragraphs.
<body>
• <p>Content</p>
</body>
</html>
See Output...

16
LESSON 5– HTML

17
LESSON 5– HTML
Line Break Tag

• Whenever you use the <br Example:
/> element, anything <html>
following it starts from the <head>
next line.
<title>Line break
• This tag is an example of an
empty element, where you Example</title>
do not need opening and </head>
closing tags, as there is <body> <p>Hello,<br/><br/>You
nothing to go in between delivered your assignment on
them.
time.<br/><br/>Thanks,<br/>
• The <br /> tag has a space Mara!</p>
between the characters br
and the forward slash. </body>
• <br /> </html>
See Output...
18
LESSON 5– HTML

19
LESSON 5– HTML
Centering Content
• You can use Example:
<html>
<center> tag to put <head>
any content in the <title>Centering Content Example</title>
</head>
center of the page
<body>
or any table cell. <p>This text is not in the center.</p>
• <center> content
<p>This text is in the center.</p>
</center>
</body>
</html>
See Output...

20
LESSON 5– HTML

21
LESSON 5– HTML
Horizontal Lines
Example:
• Horizontal lines are <html>
used to visually break- <head>
up sections of a <title>Horizontal Line Example</title>
document. </head>
<body>
• The <hr> tag creates <p>This is paragraph one and should
a line from the be on top</p>
current position in the
document to the right <p>This is paragraph two and should
be at bottom</p>
margin and breaks the </body>
line accordingly. </html>
• <hr /> See Output...

22
LESSON 5– HTML

23
LESSON 5– HTML
Preserve Formatting
• Sometimes, you want Example:
<html>
your text to follow the <head>
exact format of how it <title>Preserve Formatting Example</title>
is written in the HTML </head>
document. <body>
• In these cases, you

can use the
preformatted tag
<pre>.
• <pre>content </body>
</html>
</pre> See Output...

24
LESSON 5– HTML

25
LESSON 5– HTML
Non breaking Spaces

• In cases, where Example:
<html>
you do not want <head>
the client browser <title>Nonbreaking Spaces
Example</title>
to break text, you
</head>
should use a non <body>
breaking space <p>An example of this technique
appears in the movie
entity ; "12 Angry Men."</p
instead of a >
</body>
normal space. </html>
• See Output...

26
LESSON 5– HTML
HTML – ATTRIBUTES
• Used to define the characteristics of an HTML
element and is placed inside the element's opening
tag.
• All attributes are made up of two parts: a name and a
value:
• The name is the property you want to set.
• The value is what you want the value of the property to be
set and always put within quotations.
• Ex:
• <p align =“left”>This is left aligned</p>

27
LESSON 5– HTML
HTML – BODY ATTRIBUTES

• <body>Content</body>
• Attributes:
<body bgcolor=“black”>
specifies the background </body>
bgcolor
color of the page. <body bgcolor=“#0000”>
</body>
<body
specifies the background
background background=“picture.jpg”>
image of the page.
</body>

28
LESSON 5– HTML
HTML – FORMATTING
BOLD TEXT <b>Content</b>
ITALIC TEXT <i>Content</i>
UNDERLINED TEXT <u>Content</u>
STRIKE TEXT <strike>Content</strike>
TEXTSUPERSCRIPT <sup>Content</sup>
TEXTSUBSCRIPT <sub>Content</sub>

29
LESSON 5– HTML
HTML – FONT ATTRIBUTES

• <font>Content</font>
• Attributes:
defines the font to be <font face=“Monotype
face
used. Corsiva” > Hi! </font>
<font face=“Monotype
color defines the color. Corsiva” color=“blue”> Hi!
</font>
This contain <font
face=“Monotype Corsiva”
size defines the size.
color=“blue” size=“7”> Hi!
</font>
30
LESSON 5– HTML
HTML – IMAGES
• also called pictures, graphics, icons, clip art, etc.
Major graphic file formats
JPEG- (Joint Photographic Experts Group)
TIFF- (Tagged Image File Format)
PNG- (Portable Network Graphics)
GIF- (Graphic Interchange Format)
BMP - (Bit Mapped)
• <img>

31
LESSON 5– HTML
HTML – IMAGE ATTRIBUTES

Specifies the relative or absolute location of the file that contains the
src
graphic image you want to embed.
align Specifies the appearance of the text that is near an inline graphic image.
Provides a textual direction of images when the visitor places the mouse
alt
pointer over the image.
border Specifies the width border around an image.
height Specifies the vertical dimension of an image.
Establishes a margin of white space to the left and right of a graphic
hspace
image.
vspace Establishes a margin of white space above and below a graphic image.
width Specifies the horizontal of an images.

32
LESSON 5– HTML
HTML -LISTS
• HTML offers web authors three ways for specifying
lists of information.
• All lists must contain one or more list elements.
Lists may contain:
• <ul> - An unordered list. This will list items
using plain bullets.
• <ol> - An ordered list. This will use different
schemes of numbers to list your items.
• <dl> - A definition list. This arranges your items
in the same way as they are arranged in a
dictionary.

33
LESSON 5– HTML
UNORDERED LISTS
• <ul><li>Content</li></ul> Example:
• a collection of related <html>
items that have no special <body>
order or sequence. <ul>
• Each item in the list is <li>Beetroot</li>
marked with a bullet. <li>Ginger</li>
specify the type
<li>Potato</li>
of bullet you <ul <li>Radish</li>
type
like. By default, type=“square”> </ul>
it is a disc. <li>Potato</li>
</body> </html>
(square, disc, </ul>
circle) See output...

34
LESSON 5– HTML
ORDERED LISTS
• <ol><li>Content</li></ol> Example:
• If you are required to put <html>
your items in a numbered <body>
list instead of bulleted. <ol type=“i” start=“4”>
<li>Beetroot</li>
• The numbering starts at
<li>Ginger</li>
one and is incremented
<li>Potato</li>
by one for each
<li>Radish</li>
successive ordered list </ol>
element </body> </html>
See output...

35
LESSON 5– HTML
Ordered Lists Attributes

specify the type of numbering
you like. By default, it is a
number.
<ol type=‘1’> - Default-Case
Numerals.
<ol type=‘I’> - Upper-Case <ol type=‘1’>
type Numerals. <li>Potato</li>
<ol type=‘i’> - Lower-Case </ol>
Numerals.
<ol type=‘a’> - Lower-Case
Letters.
<ol type=‘A’> - Upper-Case
Letters.

36
LESSON 5– HTML
Ordered Lists Attributes

specify the starting point of
numbering you need.
<ol type="1" start="4"> -
Numerals starts with 4.
<ol type="I" start="4"> -
<ol type=‘1’ start=‘4’>
Numerals starts with IV.
start <li>Potato</li>
<ol type="i" start="4"> -
</ol>
Numerals starts with iv.
<ol type="a" start="4"> -
Letters starts with d.
<ol type="A" start="4"> -
Letters starts with D.

37
LESSON 5– HTML
DEFINITION LISTS
• <dl><dt>Term</dt><dd>Definition</dd></dl>
• entries are listed like in a <html>
dictionary or <body>
encyclopaedia. <dl>
• The definition list is the <dt><b>HTML</b></dt>
ideal way to present a
glossary, list of terms, or <dd>This stands for Hyper Text
Markup Language</dd>
other name/value list.
• Definition List makes use of <dt><b>HTTP</b></dt>
following three tags. <dd>This stands for Hyper Text
Transfer Protocol</dd>
• <dl></dl> - Defines
the start of the list </dl>
• <dt></dt> - A term </body> </html>
• <dd><dd> - Term See output...
definition
38
LESSON 5– HTML
HTML –TEXT LINKS

• links that take you directly Example:
to other pages and even <html>
specific parts of a given <head>
page. These links are known <title>Hyperlink Example</title>
as hyperlinks.
• Hyperlinks allow visitors to </head>
navigate between Web sites <body>
by clicking on words, <p>Click following link</p>
phrases, and images. <a href=“CenterTag.html”
• A link is specified using target=“_blank”>Center
HTML tag <a>. This tag is Tag</a>
called anchor tag. </body>
• <a href="Document </html>
URL">Link Text</a>
39
LESSON 5– HTML

40
LESSON 5– HTML
HTML -TABLES <html>

• Allow web authors to arrange <body>
data like text, images, links, <table>
other tables, etc. into rows and
<tr>
columns of cells.
<th> Column 1 </th>
• The HTML tables are created <th> Column 2 </th>
using:
<tr>
• <table> tag <td> This is Row 1 Column 1</td>
• <tr> tag is used to create <td> This is Row 1 Column 2</td>
table rows </tr>
• <td> tag is used to create </table>
data cells </body>
• <th> tag is used to create </html>
table heading

41
LESSON 5– HTML

42
LESSON 5– HTML
HTML - FRAMES
• HTML frames are used to divide your browser
window into multiple sections where each section
can load a separate HTML document.
• A collection of frames in the browser window is
known as a frameset.
• <frameset>
<frame />
• </frameset

43
LESSON 5– HTML
CONCEPT OF FRAME
Gallery.html
Home.html
About Us
About Us.html
Gallery
=
Contact Us Contact Us.html

44
LESSON 5– HTML
<html>
<head>
<title>HTML Frames</title> </head>
<frameset cols="30%,40%,30%">
<frame name="top" src="align.html" />
<frame name="main" src="list.html" />
<frame name="bottom" src="src.html" />
</frameset>
</html>

45
LESSON 5– HTML

46
LESSON 5– HTML
HTML - FORMS
• HTML Forms are required, when you want to
collect some data from the site visitor.
<form> Form Elements here </form>
HTML Form Controls
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• Clickable Buttons
• Submit and Reset Buttons
47
LESSON 5– HTML
Form Sample
48
LESSON 5– HTML
TEXT INPUT CONTROLS

• Single-line text input <html>
controls – This control is </body>
Log-in Form:
used for items that <form>
require only one line of Enter Username: <input type="text"
user input. name="Name" Size="20"
 <input /> maxlength="10" /> <br>
Enter Password: <input
• Password input type="password"
controls – This is also a name="password" size="10"
single-line text but it maxlength="10" />
</form>
masks the character as </body>
soon as a user enters it. </html>
 <input /> See Output...
49
LESSON 5– HTML

50
LESSON 5– HTML
ATTRIBUTES FOR SINGLE-LINE AND

PASSWORD
Indicates the type of input
<form>
control.
Type <input type=“text” />
•Text
</form>
•Password
Used to give a name to the <form>

control which is sent to the <input type=“text” name=“Last
Name
server to be recognized and get name”/>
the value. </form>
<form>
<input type=“text” name=“Last
This can be used to provide a
Value name” value=“angela”/>
initial value inside the control
</form>
51
LESSON 5– HTML
<form>
Allows to specify the width of
<input type=“text” name=“Last
Size the text-input control in terms of
name” value=“angela” size=“10”/>
characters
</form>
<form>
Allows to specify the maximum <input type=“text” name=“Last
Maxlength number of characters a user can name” value=“ angela” size=“10”
enter into a text box. maxlength=“10”/>
</form>
52
LESSON 5– HTML
TEXT INPUT CONTROLS

<html>
• Multi-line text input </body>
controls – This is used
Suggestion Box:
when the user is
<form>
required to give details
<textarea cols="50"
that may be longer rows="3"
than a single sentence. name="Comment">
<form> </textarea>
<textarea> </form>
Description </body>
</textarea> </html>
</form> See Output...
53
LESSON 5– HTML
CHECKBOX CONTROLS
• Used when more than <html>
</body>
one option is required <form>
to be selected. Choose what fruit/s do you like:<br>
<input type="checkbox" name="Apple"
checked>Apple<br>
• <form> <input type="checkbox"
name="Orange">Orange<br>
• <Input /> <input type="checkbox"
name="Grapes">Grapes<br>
• </form> </form>
</body>
</html>
See Output...
54
LESSON 5– HTML

55
LESSON 5– HTML
RADIO BUTTON CONTROLS

• Used when out of <html>
</body>
many options, just <form>
one option is Choose one of your favorite fruit:<br>
<input type="Radio"
required to be name="Fruits">Apple<br>
selected. <input type="Radio"
name="Fruits">Orange<br>
• <form> <input type="Radio"
• <Input /> name="Fruits">Grapes<br>
</form>
• </form> </body>
</html>
See Output...
56
LESSON 5– HTML

57
LESSON 5– HTML
SELECT BOXCONTROLS
• Also called drop down box <body>
which provides option to list <form>
down various options in the <select name="dropdown">
form of drop down list, from <option value="Maths"
where a user can select one or
more options. selected>Maths</option>
• <form> <option
• <select> value="Physics">Physics</
• <option></option> option>
• </select> </select>
• </form> </form>
</body>
See Output...
58
LESSON 5– HTML

59
LESSON 5– HTML
BUTTON CONTROLS
• Create clickable <body>
buttons. <form
• <form> action="centertag.html">
• <input> <input type="submit"
• </input> name="submit"
• </form> value="Submit" />
</form>
</body>
See Output...
60
LESSON 5– HTML

61
LESSON 5– HTML
The end.
Thanks for Listening.
62

CC101 HTML Week4-5.ppsx

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CC101 HTML Week4-5.ppsx

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

What do I need to Begin?

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

Correct Usage of Tags!

CC101 – Introduction to Computing

HTML - BASIC TAGS

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

Line Break Tag

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

• In these cases, you

CC101 – Introduction to Computing

CC101 – Introduction to Computing

Non breaking Spaces

CC101 – Introduction to Computing

CC101 – Introduction to Computing

HTML – BODY ATTRIBUTES

CC101 – Introduction to Computing

ITALIC TEXT <i>Content</i>

UNDERLINED TEXT <u>Content</u>

STRIKE TEXT <strike>Content</strike>

CC101 – Introduction to Computing

HTML – FONT ATTRIBUTES

CC101 – Introduction to Computing

HTML – IMAGE ATTRIBUTES

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

Ordered Lists Attributes

CC101 – Introduction to Computing

Ordered Lists Attributes

CC101 – Introduction to Computing

HTML –TEXT LINKS

CC101 – Introduction to Computing

HTML -TABLES <html>

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

CC101 – Introduction to Computing

TEXT INPUT CONTROLS

CC101 – Introduction to Computing

ATTRIBUTES FOR SINGLE-LINE AND

Used to give a name to the <form>

TEXT INPUT CONTROLS

CC101 – Introduction to Computing