This paragraph is contained in a box 100 pixels high.

This paragraph is contained in a box 100 pixels wide. "> This paragraph is contained in a box 100 pixels high.

This paragraph is contained in a box 100 pixels wide. ">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Content (text,image,table)

Published byAlicia Clark Modified over 6 years ago

Similar presentations

Presentation on theme: "Content (text,image,table)"— Presentation transcript:

1 Content (text,image,table)
Style Sheets Box Model Margin Padding Content (text,image,table) Box Border

2 Dimensions - Example <HTML> <STYLE> <!--
P {border: thin solid} --> </STYLE> <BODY> <P>This is some text contained in a box. <P STYLE="height: 100px">This paragraph is contained in a box 100 pixels high. <P STYLE="width: 100px">This paragraph is contained in a box 100 pixels wide. </BODY> </HTML>

3

4 Example - Padding <HTML> <HEAD>
<TITLE>Padding</TITLE> <STYLE> <!-- DIV {border: thin solid; width: 100px; margin-bottom: 5px} --> </STYLE> </HEAD> <BODY> <DIV STYLE="padding-top: 15px; padding-bottom: 15px">Mind is everything; what you think you become!</DIV> <DIV STYLE="padding-left: 15px; padding-right: 15px"> Mind is everything; what you think you become!</DIV> <DIV STYLE="padding: 10px 15px 10px 15px"> Mind is everything; what you think you become!</DIV> </BODY> </HTML>

5

6 Border Properties Border-width Border-style Border-color

7 Values for border styles
solid double groove ridge inset outset none

8

9 <HTML> <STYLE> DIV {margin-bottom: 20px} </STYLE> <BODY> <DIV STYLE="border-width: thin; border-style: solid"> This is an example of border style using a thin border. </DIV> <DIV STYLE="border-width: medium; border-style: groove"> This is a medium size border with groove style.</DIV> <DIV STYLE="border-width: thick; border-style: outset"> This is an example of thick border with border style outset. </Body></HTML>

10

11 Example - border <HTML> <STYLE> <!--
DIV {margin-bottom: 20px} --> </STYLE> <BODY> <DIV STYLE="border-width: 1cm; border-style: inset"> This line is written in a box having inset style border and a border width of 1 centimeter. </DIV> <DIV STYLE="border-width: 10px;border-color:red green yellow blue; border-style: ridge"> This line is written in a box having ridge style border and different border colors. </Body> </HTML>

12 Example - Margins <HTML> <STYLE>
P{margin-top:100px;margin-bottom:100px;margin-left:200px;margin-right:200px} </STYLE> <BODY> <P style="background-color:yellow;font-size:34pt;text-align:justify">The great thing in this world is not so much where we are, but in what direction we are moving</P> <DIV STYLE="background-color: black; color: white"> <H2>This heading appears with a bottom margin of 100 pixels</H2> </DIV> </BODY> </HTML>

13

14 Position Styles position: absolute position: relative position: static

15 Position Styles <HTML> <STYLE> DIV {font-size: 18pt}
<BODY> <DIV STYLE="position: absolute; left: 700px; top: 200px">Books Section</DIV> <DIV STYLE="position: absolute; left: 200px; top: 150px">Toys Section</DIV> <DIV STYLE="position: absolute; left: 500px; top: 100px">Music Section</DIV> <DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes Section</DIV> We must believe in luck. For how else can we explain the success of those we do'nt like? <p STYLE="position: absolute; left: 200px; top:30px"> This is an example of position styles. </BODY></HTML>

16

17

18 <HTML> <STYLE> DIV {font-size: 18pt} </STYLE> <BODY> <DIV STYLE="position: absolute; left: 700px; top: 200px">Books Section</DIV> <DIV STYLE="position: absolute; left: 200px; top: 150px">Toys Section</DIV> <DIV STYLE="position: absolute; left: 500px; top: 100px">Music Section</DIV> <DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes Section</DIV> We must believe in luck. For how else can we explain the success of those we do'nt like? <p STYLE="position: relative; left: 200px;top:5px"> This is an example of position styles. </BODY></HTML>

19

20 <HTML> <STYLE> DIV {font-size: 18pt} </STYLE> <BODY> <DIV STYLE="position: absolute; left: 700px; top: 200px">Books Section</DIV> <DIV STYLE="position: absolute; left: 200px; top: 150px">Toys Section</DIV> <DIV STYLE="position: absolute; left: 500px; top: 100px">Music Section</DIV> <DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes Section</DIV> We must believe in luck. For how else can we explain the success of those we do'nt like? <p STYLE="position: static; left: 200px; top:30px"> This is an example of position styles. </BODY></HTML>

21

22 Positioning in the 3rd dimension
<HTML> <HEAD> <TITLE>Style Sheet 3-D Positioning</TITLE> </HEAD> <STYLE> DIV {font-size: 16pt; Color:red} </STYLE> <BODY> <IMG SRC="image2.gif" STYLE="z-index: 0;position: absolute; left: 95px; top: 10px"> <DIV STYLE="z-index: 1; position: absolute; left: 10px; top: 60px"> <B>This text appears on top of the image.</B> </DIV> </BODY> </HTML>

23 Var i=3 means i 3 Location name Value at location 65895
Location Address

24 General Data Types int or integer float char string boolean

25 Event Handlers onclick ondbclick onfocus onload onsubmit onselect
onblur onchange onmousedown onmousemove onmouseout onmouseover

26

27 <HTML> <BODY> <IMG SRC=contents.gif WIDTH=170 HEIGHT=50 BORDER=0 NAME=picture onmouseover="picture.src='search.gif';picture.width=250; picture.height=100" onmouseout="picture.src='contents.gif';picture.width=170; picture.height=50"> </BODY> </HTML>

28

29 <HTML> <BODY> <A href=image2.gif onmouseover="picture.src='search.gif';picture.width=250; picture.height=100" onmouseout="picture.src='contents.gif';picture.width=170; picture.height=50"> <IMG SRC=contents.gif WIDTH=170 HEIGHT=50 BORDER=0 NAME=picture> </A> </BODY> </HTML>

30 Car Example Methods or functions Properties Color=red
Start(): This function will require a key to start the car engine. Breaks(): This requires your foot on the break and it will slow the car down or stop it completely Etc. Properties Color=red Doors=four Wheels=four

31

32 <HTML> <HEAD> <TITLE>Javascript Example</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- alert("Thank you for visiting my web site!") //--> </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

Download ppt "Content (text,image,table)"

Similar presentations

LIS650 lecture 4 Thomas Krichel 2003-12-06. today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio.

LIS650 lecture 4 Thomas Krichel today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio.
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.

Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.

Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
Very quick intro HTML and CSS. Sample html A Web Title.

Very quick intro HTML and CSS. Sample html A Web Title.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Session 4: CSS Positioning Fall 2006 LIS Web Team.

Session 4: CSS Positioning Fall 2006 LIS Web Team.
Unit 20 - Client Side Customisation of Web Pages

Unit 20 - Client Side Customisation of Web Pages
More CSS CS380 1. HTML id attribute 2 Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output  A unique ID for.

More CSS CS HTML id attribute 2 Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output  A unique ID for.
9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.

9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.
Today’s objectives Site performance Padding, Margins, Borders

Today’s objectives Site performance Padding, Margins, Borders
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
CSS provides a way to stray away from the traditional methods of using tables to lay out pages. Success with this technique depends on understanding of.

CSS provides a way to stray away from the traditional methods of using tables to lay out pages. Success with this technique depends on understanding of.
1 Lesson 11. 2 Style Sheets Box Model Content (text,image,table) Margin Padding Border Box.

1 Lesson Style Sheets Box Model Content (text,image,table) Margin Padding Border Box.
CSS Box Model margin border padding content 23. Box Model Properties PropertyValid valuesExample border-widththin, medium, thick, numberborder-width:

CSS Box Model margin border padding content 23. Box Model Properties PropertyValid valuesExample border-widththin, medium, thick, numberborder-width:
14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.

14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.
1 CS428 Web Engineering Lecture 10 Images, Tables, Forms, Border-Radius (CSS – V)

1 CS428 Web Engineering Lecture 10 Images, Tables, Forms, Border-Radius (CSS – V)
CSS The Definitive Guide Chapter 8.  Allows one to define borders for  paragraphs  headings  divs  anchors  images  and more.

CSS The Definitive Guide Chapter 8.  Allows one to define borders for  paragraphs  headings  divs  anchors  images  and more.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.

CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.

Similar presentations

Ads by Google