Hypertext Markup Language (HTML) · 2015. 12. 9. · Hypertext Markup Language (HTML) By Budditha...
32
Hypertext Markup Language (HTML) By Budditha Hettige Department of Statistics and Computer Science, University of Sri Jayewardenepura, Sri Lanka 1
Transcript of Hypertext Markup Language (HTML) · 2015. 12. 9. · Hypertext Markup Language (HTML) By Budditha...
Hypertext Markup Language
(HTML)
By
Budditha Hettige
Department of Statistics and Computer Science, University of Sri Jayewardenepura, Sri Lanka
1
What is HTML?
• Is the language used to make a web page
• Tells your browser how the web page should appear
• HTML contains Tags and Text
2
What are HTML tags?
• These are special codes that are enclosed in angle brackets
(< >). (e.g., <B>)
• Tags are often (but not always) in pairs.
Start with < > and end with </ >.
The general format for a HTML tag is:
<tag_name>string of text</tag_name>
<B>What are HTML tags?</B>
3
Properties of Tags
• What happens if "/" is mission when it is needed?
– The web browser will continue the tag for the rest of the text in
your document, producing undesirable results.
• Tags pairs can be nested.
– e.g., <B><I>What are HTML tags?</I></B>
• For tags the upper or lower case are the same.
– e.g., <b>...</b> is no different from <B>...</B>
• If the browser does not know what to do with a given tag,
it will ignore it!
– e.g.,<BOLD>What are HTML tags?</BOLD>
4
Structure of the HTML document
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY> </BODY>
</HTML>
5
Example 1
<html>
<head>
<title>Test Sample</title>
</head>
<body> In this lesson you learn
HTML tags
</body>
</html>
6
HTML Headings
HTML heading uses <hx> tag
<html>
<head>
<title>Test Sample</title>
</head>
<body>
<h1>Digital Computer</h1>
<h2>Introduction</h2>
<h2>Anatomy</h2>
<h3>Software</h3>
<h4>Hardware</h4>
</body>
</html>
7
Paragraph Tag
• Browser reads the paragraph tag, it inserts a
blank line and starts a new paragraph
• <p> close with </p>
8
<html> <head> <title>Test Sample</title> </head><body> <h3>Paragraph Tag</h3> Browser reads the paragraph tag, <p>it inserts a blank line </p> and starts a new paragraph. The HTML code for forcing a paragraph break is: </body> </html>
Horizontal rule
• This inserts a straight line like you see right
above the heading for this section
• <hr>
9
<html> <head> <title>Test Sample</title> </head><body>
<h3>Paragraph Tag</h3> <hr> Browser reads the paragraph tag, <p>it inserts a blank line </p> and starts a new paragraph. The HTML code for forcing a paragraph break is: </body> </html>
Style’s in HTML
• You can use four styles such as bold, italic, underline
or Typewriter text – <b> This is bold </b>
– <i> This is italic </i>
– <u> This is underline </u>
– <tt> This is Typewriter text </tt>
10
A <b>computer </b> is a <i>man-made </i>, programmable <u>electronic </u> device that <tt>operates under the control of a set of instructions that is stored in its memory unit </tt>
Unordered list
• List items appear with "bullets" or markers in
the front
11
<ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul>
Ordered Lists
• Ordered lists are ones where the browser
numbers each successive list item starting with
"1."
12
<ol> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ol>
Nested Lists
• Ordered Lists and Unordered lists can have different levels.
• Each will be indented appropriately by your web browser.
13
<ol> <li>This is the first item </li> <li>This is the second item </li> <ul> <li> This is the first subitem </li> <li> This is the second subitem </li> <li> This is the third subitem </li> </ul> <li>This is the third item </li> </ol>
inline Graphics
• The HTML format for the inline image tag is
– <img src="filename.gif">
• Alignment of Text and Inline Graphics
– align = top
– align = middle
– align = bottom
• Change the visual size of the image
– <img src="filename.gif" width =”50” height=”50” align = “top”>
14
Linking with Anchors
• Linking to Local Files
– <a href="filename.html"> Text for a link</a>
• Anchor Links to a Higher Level Directory
– <a href="../../home.html">return to home</a>
• Links to the World: Internet Sites
– <a href="http://solarviews.com/eng/mars.htm">
15
Print Special Characters
• Some characters <, >,and & (ampersand) have
special meaning in HTML and cannot be used
as typed.
– < is used for <
– > is used for >
– & is used for &
– is used for non-breaking space
16
How to send an email message?
• Create a hypertext link with the mailto type in
the URL
– <a href="mailto:[email protected]">send an e-
mail to budditha </a>
17
Tables
18
What is HTML tables?
19
<TABLE border="2"> <TD> This is my table! </TD> </TABLE>
Table
20
<TABLE border="2"> <TD> This is a cell1 </TD> <TD> This is a cell2 </TD> </TABLE>
Table
21
<TABLE border="2"> <TD> This is a cell </TD> <TD> This is a cell </TD> <TR> <TD> This is the new row </TD> <TD> I'm on the new row, too! </TD> </TR> </TABLE>
Table - align
• align="left"
Aligns your cell contents to the left.
• align="center"
Aligns your contents to the center.
• align="right"
Aligns your cell contents to the right.
22
<TABLE width="450" border="2" cellspacing="7" cellpadding="7"> <TD align="center"> I'm in the center! </TD> <TD align="right"> I'm aligned to the right! </TD> </TABLE>
Tables- valign
• valign="top"
Aligns contents to the top of the cell.
• valign="middle"
Aligins contents halfway between the top and bottom of the cell.
• valign="bottom"
Aligns contents to the bottom of the cell.
23
<TABLE width="550" border="2" cellspacing="7" cellpadding="0"> <TD align="center" valign="top"> I'm on top! <br> So I start on top! </TD> <TD align="center" valign="middle"> I'm in the middle </TD> <TD align="center" valign="bottom"> I start at the bottom. </TD> </TABLE>
Rowspan and Colspan • rowspan=" "
Defines the number of vertical table rows the cell should take up. Place
your number inside the quote marks.
• colspan=" "
Defines the number of horizontal columns the cell should take up.
24
<TABLE border="2“> <TD colspan="3" align="center"> <B>AL Subjects</B> </TD> <TR> <TD align="center"> Physics </TD> <TD align="center"> Mathematics </TD> <TD align="center"> Chemistry </TD> </TR> </TABLE>
Create Colorful and Textured
Backgrounds
• "Hex-Dec" and Color Basics
– Each color is identified by its Red- Green- Blue (RGB)
values
– Each number ranges from 0 to 255, & represents the
intensity of the Red, Green, or Blue component
• 0,0,255 - 0000FF (Blue)
• 0,255,0 - 00FF00 (Green)
• 255,0,0 - FF0000 (Red)
25
Backgrounds
• Color background
– <body bgcolor=#XXXXXX>
– <body bgcolor=#FF3456>
• where XXXXXX is the hexadecimal representation,
(indicated by the # sign in front of it) of the desired
color.
• Textured Backgrounds
– <body background="bgfile.gif">
26
Style's
• Change the size, color & font of specific portions of
text in a web page. Create superscripts and
subscripts for text in a web page
• Font Size
– Size = 1 (smallest) to 7 (largest)
– Size = 3 (normal text size)
<font size=+1>blah blah blah</font>
<font size=-2>blah blah blah</font>
27
Style's
• Change font Color
– <font color=red>...</font>
<font color=#993459>...</font>
• Change the size, color of the your html
document text
– <B><font size=+4 color=#FF66FF>V</font>
– <font size=+3 color=#DD0055>TEXT</font></B>
28
Style's
• Superscripts and Subscripts
• Superscripts
– Tags is: <Sub> ... </Sub>
• This is the <sub>SubScript</sub> text.
• Subscripts
– <sup> ... </sup>
• This is the <sup>SuperScript</sup> text
29
Self Assessment Questions
• Create a table for store the following
information
30
Time table
Monday Tuesday Wednesday Thursday Friday
BREAK
Exercise
• Create a new web page named Volcanoes and
put following text
31
Volcanoes were important contributors to the early earth atmosphere by releasing gases such as nitrogen (N2), carbon dioxide (CO2), and ammonia (NH4). Note that volcanic eruptions that occurred before historic times were several orders of magnitude larger (more than 1000 km3 in erupted volume) than ones observed by humans
Exercise
What is the Internet ?
The Internet is a worldwide system of interconnected computer networks that
use the TCP/IP set of network protocols to reach billions of users. The Internet
began as a U.S Department of Defense network to link scientists and university
professors around the world.
The Future
The public Internet was not initially designed to handle massive quantities of
data flowing through millions of networks. In response to this problem,
experimental national research networks (NRN's), such as Internet2 and NGI
(Next Generation Internet), are developing high speed, next generation
networks.
32
