Scribd
Upload
45 views79 pages

Personal Productivity With Is Technologies IS 21213: Practical

Here is the code with 5 student names in a bullet list with the heading "Chemistry Stream Student Names" in red letters: <h2><font color="red">Chemistry Stream Student Names</font></h2> <ul> <li>John Doe</li> <li>Jane Smith</li> <li>Bob Johnson</li> <li>Sara Williams</li> <li>Chris Wilson</li> </ul> 05/04/2020 Department of CIS 33 Exercise 03 - Add 5 subjects using numbered list to your web page and keep the heading of them as “First Year Subjects”

Uploaded by

NIMISHAN SIVARAJ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
45 views79 pages

Personal Productivity With Is Technologies IS 21213: Practical

Here is the code with 5 student names in a bullet list with the heading "Chemistry Stream Student Names" in red letters: <h2><font color="red">Chemistry Stream Student Names</font></h2> <ul> <li>John Doe</li> <li>Jane Smith</li> <li>Bob Johnson</li> <li>Sara Williams</li> <li>Chris Wilson</li> </ul> 05/04/2020 Department of CIS 33 Exercise 03 - Add 5 subjects using numbered list to your web page and keep the heading of them as “First Year Subjects”

Uploaded by

NIMISHAN SIVARAJ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 79

Personal Productivity

With Is Technologies
IS 21213
Practical
Outline

• HTML
• Form Validation
• Formatting Documents

05/04/2020 Department of CIS 2


HTML
Contents
• Getting Started..
• What is HTML?
• How to create and View an HTML document?
• Basic HTML Document Format
• The HTML Basic tags

05/04/2020 Department of CIS 3


Getting Started….

What is the following term mean:

 Web server : a system on the internet containing one or more web site
 Web site : a collection of one or more web pages
 Web pages : single disk file with a single file name
 Home pages : first page in website

05/04/2020 Department of CIS 4


What is HTML?
 HTML is a language for describing web pages

 HTML, which stands for HyperText Markup Language, is the predominant


markup language for web pages

 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


05/04/2020 Department of CIS 5
Cont..
 It provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists,
links and other items

 Telling the browser what to do

 A series of tags that are integrated into a text document

 Not case sensitivity

05/04/2020 Department of CIS 6


How to create and view an HTML
document?
1. Use an text editor such as Notepad to write the document.
2. Save the file as filename.html/.htm on a PC. This is called the
Document Source.
3. Open Firefox (or any browser) Off-Line.
4. Switch to Firefox.
5. Click on File, Open File and select the filename.html document that
you just created.
6. Your HTML page should now appear just like any other Web page in
Firefox.

05/04/2020 Department of CIS 7


Cont..
7. You may now switch back and forth between the Source and the
HTML Document.

 switch to Notepad with the Document Source


 make changes
 save the document again
 switch back to Firefox
 click on RELOAD and view the new HTML Document
 switch to Notepad with the Document Source......

05/04/2020 Department of CIS 8


HTML Tags
• HTML markup tags are usually called HTML tags

• HTML tags are keywords 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, the second tag is the end tag (The first tag turns
the action on, and the second turns it off.)

• Start and end tags are also called opening tags and closing tags
05/04/2020 Department of CIS 9
HTML Elements
• An element in HTML is a loose term that describes each individual
piece of your web page
• An element consists of three basic parts: an opening tag, the element's
content, and finally, a closing tag
• <p> - opening paragraph tag
• Element Content - paragraph words
• </p> - closing tag
• Every (web)page requires four critical elements: the html, head, title,
and body elements

05/04/2020 Department of CIS 10


The <html> Element...</html>

• Its sole purpose is to encapsulate all the HTML code and describe the
HTML document to the web browser

• <html> </html>

11
The <head> Element
• The head functions "behind the scenes"

• Contains information about the document

• Tags placed within the head element are not directly


displayed by web browsers

• We will be placing the <title> element here and we'll talk


about the other possible elements in later lessons

<html> <head> </head> </html>


12
The <title> Element

• 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

• Name your webpage as you please, just keep in mind, the best titles
are brief and descriptive

13
Cont..

• <html>
<head>
<title>My WebPage!</title>
</head>
</html>

14
The <body> Element

• The <body> element is where all content is placed. (Paragraphs,


pictures, tables, etc)

• <html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>
15
Change Sizes-HTML Headings
• HTML Headings are defined with the <h1> to <h6> tags
<html>
<head>
<title>
My First HTML
</title>
</head>
<body>
<h1>This is heading one <h1>
<h3>This is heading one <h3>
<h6>This is heading one <h6>
</body>
</html> 16
HTML Paragraphs
• HTML Paragraphs are defined with the <p> tag

<p> This is a paragraph </p>


<p> This is another paragraph </p>

05/04/2020 Department of CIS 17


HTML Comments
• Comment tags <!-- and --> are used to insert comments in HTML

• Eg:
<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->

05/04/2020 Department of CIS 18


Tags
• <br> New line
• <b> bold </b>
• <i> italic</i>
• <u> underline</u>
• <strong > strong </ strong >
• <em> emphasized </em>

19
Cont..
• 1 <sup> st </sup>

• H <sub> 2 </sub>

• <center> center </center>

• <small> small </small>

• <big> big </big>

20
HTML Attributes
• Attributes are used to describe tags

• What we mean by describe is that when a web browser


interprets a tag, it will also search for set attributes and
then display the element (tags+attributes) in its
entirety

• HTML tags contain one or more attributes. Attributes


are added to a tag to provide the browser with more
information about how the tag should appear or
behave
21
Cont..
• At some point you may want to give your body element a background
color or perhaps change the width of a table

• All of these things and more can be achieved using Attributes

• Attributes consist of a name and a value separated by an equals


(=)sign

22
Examples

• <h2 align="center"> Centered Heading </h2>

• <h3 align="right"> Aligned right </h3>

23
Cont..

• The color can be added as a hex number


<body bgcolor="#0099FF">
or as a named color
<body bgcolor= "red">

• Change the text color


<body bgcolor="#0099FF" text="FFFF00" >
24
The Font Tag

• Probably the most versatile text formatting tag is the,


<font></font>tag
• The font tag not only allows the color and size of text
to be selected but also allows specific fonts to be
selected
<font face="arial">This is the Arial font face
</font>

• <font face="Arial" color="#FF0000" size="7">This


is the Arial font face </font>
25
Using Specific fonts
• The FONT tag is used to display your text in a specific
style

• Although you may specify the font style you would like
your text to be displayed, please keep in mind, if your
visitor doesn't have the font face you specify on their
computer, the text will be displayed in the users default
font setting

• To make sure your pages are being viewed as you


intended, you should include alternative fonts within
your HTML web page font tag 26
Cont..

• <FONT face="Verdana,Helvetica,Arial"> Your


Text</FONT>

• The code above tells the browser to display your text


in Verdana, but if your visitor doesn't have Verdana to
display your text in Helveticaand so on.

• By including font alternatives, you can ensure your page


will be displayed exactly as you had intended.

27
Monospaced text

• To create typewriter text (teletype text)use the


<TT></TT> tags

• Eg:
<TT>This is teletype text</TT>

28
Lists
• There are 2 types in lists. They are :

Unordered List
Provides lists with symbols or bullets.

Ordered List
Provides lists with numeric values.

05/04/2020 Department of CIS 29


Unordered List Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

05/04/2020 Department of CIS 30


Ordered List Example
• </ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

05/04/2020 Department of CIS 31


Exercise 01

05/04/2020 Department of CIS 32


Exercise 02
• Add 5 students names using bullet list to your web page and keep the
heading of them as “Chemistry Stream Student Names” and letters colour
should be green.
• Add 5 below chemical names under the topic “Used Chemical Names” and
font colour should be “Blue ” and font type should be “arial”
• NaHCO3
• H2O2
• Na2B4O7.10 H2O
• Under “Elements” put these exapmeles.
• 3He ,12C 13C 131I and 238U
05/04/2020 Department of CIS 33
HTML Table

• The <table> tag begins the table, place what want


inside and end the table with the </table> tag. To
begin adding contents to table, need the <tr> and <td>
tags.
• The <tr> stands for table row and the <td> stands for
table data, which is what will place after <table> tag.
End a table, data section with the </td> tag and each
table row with the </tr> tag.

34
Example

<table>
<tr>
<td>
This is my table!
</td>
</tr>
</table>

35
Cont..

<body>
Hi!
<table border="2">
<tr>
<td>
This is my table!
</td>
</tr>
</table>
</body>
36
Example
<body>
Hi!
<table border="2">
<tr>
<td>This is cell 1</td>
<td>This is cell 2</td>
</tr>
</table>
</body>
37
Cont..
td
<body>
row 1, cell 1 row 1, cell 2
Hi! tr
row 2, cell 1 row 2, cell 2
<table border=“9">
<tr>
<td>row 1, cell 1</td> A table is divided into rows (with the
<td>row 1, cell 2</td> <tr> tag)
</tr>
<tr> Each row is divided into data cells (with
<td>row 2, cell 1</td>
the <td> tag). td stands for "table data,"
and holds the content of a data cell
<td>row 2, cell 2</td>
</tr> A <td> tag can contain text, links,
</table> images, lists, forms, other tables, etc.
38
</body>
HTML Table Headers
• Header information in a table are defined with the <th> tag
• All major browsers display the text in the <th> element as bold
and centered

• <table border="1">
<tr> Header 1 Header 2
<th>Header 1</th> row 1, cell 1 row 1, cell 2
<th>Header 2</th> row 2, cell 1 row 2, cell 2
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> 39
Exercise

Fruit Percentage

Bananas 23%

Oranges 13%

Other 10%

40
Cell Padding and Spacing

• With the cellpadding and cellspacing attributes, you


will be able to adjust the spacing between table cells

• Setting the cellpadding attribute determines how much


space will exist between a table cell border and the
elements contained within it, whereas cellspacing
determines how much space will exist between each
table cell

• Place a number inside the quote mark


 Cellpadding=“”
 Cellspacing=“” 41
Cont..

<table border =“2” cellpadding=“15” >


<tr>
<td><b>Column 1</b> </td>
<td><b>Column 2</b> </td>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr> <td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr> 42
Cont..

<table border =“2” cellpadding=“15” cellspacing=“15” >

<tr>
<td><b>Column 1</b> </td>
<td><b>Column 2</b> </td>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr> <td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr> 43
Table width & height

<table border=“2” bordercolor=“red” width=“600”


height=“500” >
<tr>
<td>
This table really long !
</tr>
</td>
</table>

44
Cont..

<table border=“2” bordercolor=“red” width=“100%”


height=“70%” >
<tr>
<td>
This table really long !
</tr>
</td>
</table>

45
align
• align=“left”
Aligns cell contents to the left

• align=“center”
Aligns cell contents to the center

• align=“right”
Aligns cell contents to the right

46
Cont..
<table width=“450” border=“2” cellspacing=“7” cellpadding=“7”>
<tr>
<td align="center">
I’m in the center !
</td>
<td align="right">
I’m aligned to the right!
</td>
</tr>
</table>
47
valign
• Valign=“top”
Align contents to the top of the cell

• Valign=“middle”
Align contents halfway between the top and bottom
of the cell

• Valign=“bottom”
Align contents to the bottom of the cell

48
Cont..
<table width=“550” border=“2” cellspacing=“7” cellpadding=“0”>
<tr>
<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>
</tr>
</table>
49
bgcolor

<table border=“5” bgcolor="red">


<tr>
<td>
Red Rules!
</td>
</tr>
</table>

50
Cont..
<table width="75" border=“2”>
<tr>

<td bgcolor="red">
Red
</td>

<td bgcolor="blue">
blue
</td>

</tr>
51
</table>
Cont..
<table width="200" border=“2”>

<tr bgcolor="red">
<td>Red</td>
<td>Red Again...</td>
</tr>

<tr bgcolor="blue">
<td>Blue</td>
<td>Blue Again... Again...</td>
</tr>
</table> 52
Exercise 1

05/04/2020 Department of CIS 53


<table>
    <caption>University of Minnesota Apples</caption>
    <thead>
    <tr>

Exercis         <th scope=”col”>Name</th>


        <th scope=”col”>Season</th>

e1
        <th scope=”col”>Introduction year</th>
    </tr>
    </thead>

Answer
    <tbody>
        <tr>
            <th scope="row">Beacon</th>
            <td>Early</td>
            <td>1936</td>
        </tr>
        <tr>
            <th scope="row">Haralson</th>
            <td>Late</td>
            <td>1922</td>
        </tr>
        <tr>
            <th scope="row">Sweet Sixteen</th>
            <td>Mid</td>
            <td>1977</td>
        </tr>
     </tbody>
</table>
05/04/2020 Department of CIS 54
Rowspan = “ ”

• Defines the number of vertical table rows the cell


should take up. Place number inside the quote marks

55
Example 01
<table border="2">
<tr>
<td align="center">
Nice guy,Idn' he?
</td>

<td rowspan="2" align="center">


rowspan
</td>
</tr>

<tr>
<td align="center">
Met him at the shop
</td>
</tr>
56
</table>
Example 02
<table border="1" >
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>

<tr>
<td rowspan="2">d</td>
<td>e</td>
<td>f</td>
</tr>

<tr>
<td>g</td>
<td>h</td>
</tr>

57
</table>
Exercise
<table border="1" >
<tr>
<td rowspan ="3">m</td>
<td>h</td>
<td>y</td>
</tr>

<tr>
<td>p</td>
<td rowspan="2">e</td>
</tr>

<td>r</td>
</tr>

</table> 58
Colspan = “ ”

• Defines the number of horizontal columns the cell should take up


• Place number inside the quote marks

59
Example 01

<table border="1" cellpadding="5" >

<tr>
<td colspan="3" align="center"><b>Table header</b>
</tr>

<tr>
<td align="center">Table cell 1</td>
<td align="center">Table cell 2</td>
<td align="center">Table cell 3</td>

</tr>
</table>
60
Example 02
<table border="1">
<tr>
<td colspan="3">s</td>
</tr>
<tr>
<td>s</td>
<td>s</td>
<td>s</td>
</tr>
<tr>
<td colspan="2">s</td>
<td>s</td>
</tr>
61
</table>
Exercise <table border="1" width="100">
<tr>
<td colspan="2">a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2">f</td>
<td rowspan="3">g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
</tr>
<tr><td colspan="2">j</td>
<td>k</td>
62
</tr></table>
<tr title=“ ”>
<table border="1">
<tr title="You are looking at Row 1” bgcolor="silver">
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr title="You are looking at Row 2" bgcolor="aqua">
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2 63


Table within tables
<table width="25%" border="6">
<tr>
<td align="center">
<table width="75%" border="2">
<td align="center">I'm inside the small table!</td>
</table>
</td>
</tr>
</table>

64
Exercise
2
1. Use border
=1
2. Use caption
as in the
picture

and
3.Add
summary to
this table

4. Use
different
colour for
each text and
cell
05/04/2020 Department of CIS 65
<!DOCTYPE html>

Ex 2 <html>

Answer
<head>
<style>
</style>
</head>
<body>
<h2>HTML Table</h2>
<TABLE border="1" summary="This is the summary of the table">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Average
<TH rowspan="2">Red<BR>eyes
<TR><TH>height<TH>weight
<TR><TH>Males<TD>1.9<TD>0.003<TD>40%
<TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>
</body>
05/04/2020 Department of CIS 66
</html>
Forms

05/04/2020 Department of CIS 67


Attribute
<form action=“url”>
</form>

• Action gives the URL of the program which will process this form (On
submit, send the form-data to a action’s file)

68
Method= Get/Post

• The Hypertext Transfer Protocol (HTTP) is designed to


enable communications between clients and servers.
HTTP works as a request-response protocol between a
client and server

• Two HTTP Request Methods: GET and POST


• GET - Requests data from a specified resource
• POST - Submits data to be processed to a specified resource.
Post is the predefined method for sending lengthy form data.
When a form is submitted post, the user does not see the form
data that was sent

69
Text box
<form>
Age:<input type=text name=“age” size=2><br>
First name:<input type=text name =“first” size=10><br>
Last name:<input type=text name =“last” size=30><br>
Password:<input type=password name=“real name” size=10><br>
<button type="button">Click Me!</button>

</form>

&nbsp; - Non-breaking space

70
Fieldset and legend

• The <fieldset> element is used to group related data in a form.


• The <legend> element defines a caption for the <fieldset>
element.

05/04/2020 Department of CIS 71


Exercise

05/04/2020 Department of CIS 72


Ex. Answer <html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
<dl>
<dt>Note</dt>
<dd>Fill the form with block letters.</dd>
<dt>Imprtant</dt>
<dd>After filling the form click submit button.</dd>
</dl>

</body>
</html>
05/04/2020 Department of CIS 73
Ex.2

05/04/2020 Department of CIS 74


Ex.2 Answer
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset
element.</p>
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"> <br>
Last name:<br>
<input type="text" name="lastname" value="Michel"> <br>
Comment :<br>
<textarea rows="4" cols="50" value="Put comments"> My comment goes here </textarea>
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
05/04/2020 Department of CIS 75
Type=RADIO
• Radio is used to create a series of choices of which only one can be
selected.
• HTML radio buttons are created by using
<Input type=RADIO> buttons,
all with the same name, but with different value.

76
Ex. 3

05/04/2020 Department of CIS 77


Ex 3. Answer
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<fieldset id="group1">
<legend>Gender :</legend>
<input type="radio" value="" name="group1">Male<br>
<input type="radio" value="" name="group1">Female
</fieldset>

<fieldset id="group2">
<legend> Medium :</legend>
<input type="radio" value="" name="group2">Sinhala<br>
<input type="radio" value="" name="group2">Tamil<br>
<input type="radio" value="" name="group2">English<br>
</fieldset>
</form>
</body>
05/04/2020 </html> Department of CIS 78
Cont..
<form>
What size pizza?
<p>
<input type=radio name="pizza size" value="S">small <br>
<input type=radio name="pizza size" value="M">Medium <br>
<input type=radio name="pizza size" value="L">Large <br>
</form>

• If one of the items should be the default selection are the


CHECKED attribute
79

You might also like