eduwavepool.unizwa.edu.om file · web viewbox model to add different format together. here the...

College of the management, economics and information technology Department of Information systems

Fall Semester, Academic Year 2015/2016INTERNET TECHNOLOGY LAB

Lab 07: Positioning Elements, Backgrounds, Element Dimensions and Box Model, Text Flow and drop Menu

Table of Tags The commands that we will use our codes:

Tags Description / the output

span { color: red; font-size: .6em; height: 1em }

Box model to add different format together. Here the color is read the font size is 0.6em depending on the previous size and the height is 1 em depending on the previous height of the text .

The <span> tag is used to group inline-elements in a document.

The <span> tag provides no visual change by itself.

The <span> tag provides a way to add a hook to a part of a text or a part of a document.

.super { position: relative; bottom: 1ex }

Create an author xlass to change the position of the object and make it relative to the previous object in the website. And move the text 1ex to the bottom of the current text.

<span class = "super">is in superscript</span >

How to use the span inside the XHTML

div { background-color: #aaccff; margin-bottom: .50em; font-family: arial, helvetica, sans-serif}

div is the box model to add more than on style of specific text. The <div> tag defines a division or a section in an HTML

document. The <div> tag is used to group block-elements to format them

with CSS.

div.menu

div.menu:hover a

div.menu:To change the menu of the div tag

div.menu:hover a :What to do if the mouse goes on the hyperlink of

1

div.menu a

div.menu a:hover

the head of the pro list menu (Parent)

div.menu a:How to change the hyperlink menu

div.menu a:hover : What to do if the mouse goes on the hyperlink of the menu elements( child)

<div style = "width: 20%"> Change the width of the text show in the webpage to 20% of the total width

div style = "width: 20%; height: 150px; overflow: scroll">

Change the width and the height of the text show in the webpage to 20% of the total width and 150 pixel for the height and if there is an overflow activate the scroll bar.

<div class = "thin red solid">Thin Red Solid border</div>

Use three author classes inside div. Here thin, red and solid classes are used to change the style of the paragraph

<div class = "section"> <div class = "floated">Corporate Training and Publishing</div></div>

When we have more than one parent and child style the text will take the parent style and the child style if there is a conflict between two styles the child will be effect of the text. For example, parent says the color is red and the child said the color is blue. Then the text will have a blue color.

em Relative to the font-size of the element (2em means 2 times the size of the current font)

Ex Relative to the x-height of the current font (rarely used)cm centimetermm millimetersin inches (1in = 96px = 2.54cm)px pixels (1px = 1/96th of 1in)pt points (1pt = 1/72 of 1in)pc picas (1pc = 12 pt)Section01: Relevant positioning (20 minutes)

Step 1: Open Yourname_NFS230 folder a. Inside the folder create “Lab07” folderb. Inside the folder create a new notepad file with the name “Lab07_S1.html”c. Write your code in the notepad (by following the below steps) and save the file.d. Click on the file name you will get your first webpage

2

Step 2: Write the code as shown below <html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Relative Positioning </title>

<style type = "text/css">

p { font-size: 1.3em; font-family: verdana, arial, sans-serif }

span { color: red; font-size: .6em; height: 1em }

.super { position: relative; bottom: 1ex }

.sub { position: relative; bottom: 1em }

.shiftleft { position: relative; left: -1ex }

.shiftright { position: relative; right: -1ex }

</style>

</head>

<body>

<p>The text at the end of this sentence <span class = "super">is in superscript</span>.</p>

<p>The text at the end of this sentence <span class = "sub">is in subscript</span>.</p>

<p>The text at the end of this sentence <span class = "shiftleft">is shifted left</span>.</p>

<p>The text at the end of this sentence <span class = "shiftright">is shifted right</span>.</p>

</body>

</html>

3

The result will be as follow:

Section 02: Backgrounds (10 minutes)

Step 1: Open a Yourname_NFS230 folder a. Go to your desktop. Open an Yourname_INFS230 folderb. Go to folder “Lab07” folderc. In the same folder and Inside the Lab07 folder create a new notepad file with the name

“Lab07_S2.html”d. Add two images to the folder with the following names : logo.gif e. Write your code in the notepad (by following the below steps) and save the file and exit from the file.f. Click on the file name you will get your webpage.

4

Step 2: Write the code as shown below \Inside the Lab07_S2 write

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Background Images</title>


body { background-image: url(logo.gif); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed;

background-color: #eeeeee }

p { font-size: 18pt; color: #1144AA; text-indent: 1em; font-family: arial, sans-serif; }

.dark { font-weight: bold }

</style>

</head>

<body>

<p>

This example uses the background-image, background-position and background-attachment styles to place the <span class = "dark">Deitel & Associates, Inc.</span> logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the browser window. The background-color fills in where there is no image.

</p>

</body>

</html>

5


Section 03: Element Dimensions (10 minutes)

Step 1: Open a Yourname_INFS230 foldera. Go to your desktop. Open an Yourname_INFS230 folderb. Go to folder “Lab07” folderc. Inside the Lab06 folder create a new notepad file with the name “Lab07_S3.html”d. Write your code in the notepad (by following the below steps) and save the file and exit from the file.e. Click on the file name you will get your webpage.

6

Step 2: Write the code as shown below


<head>

<title>Box Dimensions</title>


div { background-color: #aaccff; margin-bottom: .50em; font-family: arial, helvetica, sans-serif}

</style>

</head>

<body>

<div style = "width: 20%">Here is some text that goes in a box which is set to stretch across twenty percent of the width of the screen.</div>

<div style = "width: 80%; text-align: center"> Here is some CENTERED text that goes in a box which is set to stretch across eighty percent of the width of the screen.</div>

<div style = "width: 20%; height: 150px; overflow: scroll"> This box is only twenty percent of the width and has a fixed height. What do we do if it overflows? Set the overflow property to scroll!</div>

</body>

</html>


7

Section 04: Box Model and Text Flow-1 (20 minutes)




<head>

<title>Borders</title>


div { text-align: center; width: 50%; position: relative;

left: 25%; border-width: 4px }

.medium { border-width: medium }

.thin { border-width: thin }

.solid { border-style: solid }8

.double { border-style: double }

.groove { border-style: groove }

.inset { border-style: inset }

.outset { border-style: outset }

.dashed { border-style: dashed }

.red { border-color: red }

.blue { border-color: blue }

</style>

</head>

<body>

<div class = "solid">Solid border</div><hr />

<div class = "double">Double border</div><hr />

<div class = "groove">Groove border</div><hr />

<div class = "inset">Inset border</div><hr />

<div class = "dashed">Dashed border</div><hr />

<div class = "thin red solid">Thin Red Solid border</div><hr />

<div class = "medium blue outset">Medium Blue Outset border</div>

</body>

</html>

9


Section 05: Box Model and Text Flow-2 (30 minutes)




<head>

<title>Flowing Text Around Floating Elements</title>


div.heading { background-color: #bbddff; text-align: CENTER;

font-family: arial, helvetica, sans-serif; padding: .2em }

p { text-align: justify; font-family: verdana, geneva, sans-serif; margin: .5em }

10

div.floated { background-color: #eeeeee; font-size: 1.5em;

font-family: arial, helvetica, sans-serif; padding: .2em;

margin-right: .2em; margin-bottom: .5em; float: left; text-align:

left; width: 50% }

div.section { border: 1px solid #bbddff }

</style>

</head>

<body>

<div class = "heading"><img src = "deitel.png" alt = "Deitel" /> </div>

<div class = "section">

<div class = "floated">Corporate Training and Publishing</div>

<p>Deitel & Associates, Inc. is an internationally recognized corporate training and publishing organization specializing in programming languages, Internet/World Wide Web technology and object technology education. The company provides courses on Java, C++, Visual Basic, C, Internet and World Wide Web programming, and Object Technology.</p>

</div>

<div class = "section">

<div class = "floated">Leading-Edge Programming Textbooks</div>

<p>Through its publishing partnership with Prentice Hall, Deitel & Associates, Inc. publishes leading-edge programming textbooks, professional books, interactive CD-ROM-based multimedia Cyber Classrooms, satellite courses and World Wide Web courses.</p>

</div> </body></html>

11


Section 06: Building a CSS Drop-Down Menu (10 minutes)



12


<head>

<title> Drop-Down Menu </title>


body { font-family: arial, sans-serif }

div.menu { font-weight: bold; color: white; border: 2px solid #225599;

text-align: center; width: 10em;background-color: #225599 }

div.menu:hover a { display: block }

div.menu a { display: none; border-top: 2px solid #225599;

background-color: white; width: 10em;

text-decoration: none; color: black }

div.menu a:hover { background-color: #dfeeff }

</style>

</head>

<body>

<div class = "menu">Menu

<a href = "#">Home</a>

<a href = "#">News</a>

<a href = "#">Articles</a>

<a href = "#">Blog</a>

<a href = "#">Contact</a></div>

</body>

</html>

13


References 1- Internet and World Wide Web How to Program: 4/e.

14

eduwavepool.unizwa.edu.om file · web viewbox model to add different format together. here the...

Documents