Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
21 views

IWT LabSheet 2 HTML CSS

Uploaded by

naveen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

IWT LabSheet 2 HTML CSS

Uploaded by

naveen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

BSc (Hons) in Information Technology

Year 1
Lab Exercise 2

IT – Internet and Web Technologies Semester 2, 2017

Objective: Basic knowledge in HTML. Completed the previous lab exercise.

Prerequisites: Basic knowledge in HTML. Completed the previous lab exercise.

Instructions
Download this Lab Sheet into your machine. Complete the Lab Exercises given.
Exercise 1 – Image as a link

1. To set the image as link. Give the image with in <a href=… .>and</a>

<!DOCTYPE html>
<html>
<body>
<p> You can also use an image as a link:
<a href="nextPage.html">
<img border="0" src="myImage.jpg" width="65" height="38"
</a>
</p>
</body>
</html>

Exercise 2 – Tables
 <TABLE> </TABLE> : Defines an HTML table
 <CAPTION> </CAPTION> : Defines a table caption.
 <TR> </TR> : Defines a row in an HTML table.
 <TH> </TH> : Defines a header cell in an HTML
 <TD> </TD> : Defines a standard cell in an HTML table

1
<!DOCTYPE HTML>
<html>
<body>
<table width="200" border="1">
<caption>Monthly Savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$150</td>
</tr>
</table>

</body>
</html>

1. Type the following code and learn how to insert Table to the Web page

2. Change the alignment of the table data to change the position to left, right and center.

3. Use the alignment for the each cell separately.

4. Change the boarder of the table and add the CELLSPACING (keep the spacing in
pixels between cells) and CELLPADDING (to change the space in pixels between
cell border and table element, default about 1)
5. <table border="1" cellpadding="10" cellspacing="10">

6. Set the width in pixels or percentage of page/frame width.

7. Change the Background color, Font color, Font size, Font types inside the cells. (Hint:

BGCOLOR=color , also valid for <TR>, <TH>, and <TD>)

8. Show the internal line of a cell (Hint: You may use the RULES tag with necessary
parameters).

2
Exercise 3 – Div

<div> can be used to create the layout of the web page. It is similar to a table cell, where a
number of HTML elements can be grouped together.
Using <div> you can create web page formats as given below.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="color:blue;background-color:orange">
<h1>This is a heading</h1>
</div>
<div style="color:purple;background-color:pink;width:100px;float:left">
<p>This is a paragraph.</p>
</div>
<div style="width:100px;float:left">
<p>This is a paragraph.</p>
</div>
</body>
</html>

3
Introduction to CSS

What is CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles are normally stored in Style Sheets
 External Style Sheets can save you a lot of work
 External Style Sheets are stored in CSS files
 Multiple style definitions will cascade into one
 Using CSS3 we are capable of doing Animations, 2D/3D transformations

Cascading Order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style
sheet by the following rules, where number four has the highest priority:
a. Browser default
b. External style sheet
c. Internal style sheet (inside the <head> tag)
d. Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it
will override a style declared inside the <head> tag, in an external style sheet, or in a browser
(a default value).

Syntax
The CSS3 syntax is made up of three parts:
body{color: red}

Selector property value

The selector is normally the HTML element/tag you wish to define, the property is the
attribute you wish to change, and each property can take a value. The property and
value are separated by a colon, and surrounded by curly braces:
body {color: black}

4
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}

If you wish to specify more than one property, you must separate each property with a
semicolon. The example below shows how to define a center aligned paragraph, with
a red text color:
p {text-align:center;color:red}

1. Grouping

You can group selectors. Separate each selector with a comma. In the example below
we have grouped all the header elements. All header elements will be displayed in
green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}

2. CSS3 Comments

Comments are used to explain your code, and may help you when you edit the source
code at a later date. A comment will be ignored by browsers. A CSS comment begins
with "/*", and ends with "*/", like this:

/* This is a comment */
p
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

5
How to Use Styles
When a browser reads a style sheet, it will format the document according to it. There are
three ways of inserting a style sheet:
1. External style sheet
An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing one
file. Each page must link to the style sheet using the <link> tag. The <link> tag goes
inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
2. Internal style sheet
An internal style sheet can be used if one single document has a unique style. Internal
styles are defined in the <head> section of an HTML page, by using the <style> tag,
like this:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

3. Inline styles

An inline style can be used if a unique style is to be applied to one single occurrence
of an element. To use inline styles, use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example below shows how to change the
text color and the left margin of a paragraph:
<p style="color:blue; margin-left:20px">This is a paragraph.</p>

6
Exercise 1 - CSS Text
 body {color:blue;} : Defines default color for a page

 h1 {text-align:center;} : Set the horizontal alignment of a text

 p.uppercase {text-transform:uppercase;} : Used to specify uppercase and


lowercase.

 h1 {text-shadow: 5px 5px 5px #FF000;} : Used to give a shadow to the text in
the color #FF000

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
h2 {
color: #dda0dd;
}
p {
color: rgb(0,0,255);
}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>

7
Exercise 2 - CSS Font
 h3 {font-family: ‘Times New Roman’} : Sets the font family of a text
 p.normal {font-style:normal;} : Sets the font style
o normal - The text is shown normally
o italic - The text is shown in italics
o oblique - The text is "leaning" (oblique is very similar to italic)
 h1 {font-size:40px;} : Sets the size of the text

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h3 {
font-family: 'Times New Roman';
}
p {
font-family:'Courier New';
}
p.sansserif {
font-family:sans-serif
}
</style>
</head>
<body>
<h3>This is header 3</h3>
<p>This is a paragraph</p>
<p class="sansserif">This is a paragraph</p>
</body>
</html>

 “FONT FACE” is a new feature defined in CSS3. This can be used to define your own
fonts that are not in the users’ computer. The only requirement will be to have to font in
the server. This will be later understood properly after completing ITA lab-sheet 7.

<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>

8
Exercise 3 - CSS List
 ul { list-style-image : url(‘myimg.png’)} : Specifies an image as the list-
item marker
 ul { list-style-type : square} : Specifies the type of list-item marker
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.myList {
list-style-type: none
}
.myList2 {
list-style-image:url('aaa.png')
}
li {
font-size:30px;
}
</style>
</head>
<body>
<ul class="myList">
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
</ul>

<ul class="myList2">
<li>list item1</li>
<li>list item2</li>
<li>list item3</li>
<li>list item4</li>
</ul>
</body>
</html>

Exercise 4 - CSS Backgrounds

 body {background-image:url('paper.gif');}: specifies an image to


use as the background of an element.
 background-repeat:repeat;: Image is repeated horizontally & vertically
 background-attachment: fixed: Sets whether a background image is
fixed or scrolls with the rest of the page
 body {background-color:#b0c4de;}: Define background color of the
page
The background color can be specified by:
 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"

9
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:url(body.jpg);
background-size:100% 100%;
background-repeat:repeat;
}
</style>
</head>
<body>
<center>
behind the text the background will be displayed.<br/>

When you add a "repeat : repeat" the image will be


repeated until the end of the web page.</br>
you can try to make "repeat : no- repeat" and see
what happens.
</center>
</body>
</html>

Using 2 images for the background:


<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(sliit.jpg),url(body.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>

10
Exercise 6 - CSS Box Layout

 Margin - Clears an area around the border. The margin does not have a background
color, it is completely transparent
 Border - A border that goes around the padding and content. The border is inherited
from the color property of the box
 Padding - Clears an area around the content. The padding is affected by the
background color of the box
 Content - The content of the box, where text and images appear

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {
padding:20px;
border:30px;
margin:40px;
}
</style>
</head>
<body>
<img src="logo.jpg"/>
</body>
</html>

11
References:

http://www.w3schools.com/css/css_boxmodel.asp

For the latest and exciting CSS go to the following url


http://www.w3schools.com/css/DEFAULT.asp

12
Exercise
You must be able to complete the following exercise on your own after the above
material is covered. Instructors will not show the codes or explain what should be done
only the output is given to you. This is a continuation of the previous lab-sheet exercise,
use the previous lab-sheet to do the above modifications. The Images that you must use
are added in the folder.

13

You might also like