Scribd
Upload
16 views111 pages

Ch3 Web Edited

HTML (HyperText Markup Language) is a markup language used to structure content on the web, consisting of various tags that instruct browsers on how to display documents. An HTML document follows a basic structure with elements such as <html>, <head>, and <body>, and includes various tags for formatting text, creating lists, inserting images, and building forms. Special characters and attributes enhance the functionality and presentation of HTML content.

Uploaded by

teddy haile
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
16 views111 pages

Ch3 Web Edited

HTML (HyperText Markup Language) is a markup language used to structure content on the web, consisting of various tags that instruct browsers on how to display documents. An HTML document follows a basic structure with elements such as <html>, <head>, and <body>, and includes various tags for formatting text, creating lists, inserting images, and building forms. Special characters and attributes enhance the functionality and presentation of HTML content.

Uploaded by

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

HTML

CIT

1
HyperText Markup Language (HTML)
 A markup language, i.e. it’s used to markup
content.
 Composed of several tags.
 Tags : The tags tell the browser how to display the
document
 it is commands written between angled
brackets i.e < >
 HTML Document
 A text document containing markup tags
 Should have an .htm or .html file name extension
 Can be created using a simple text editor
2
HTML – Document Structure
 An HTML document has the following basic
structure:

<html>
<head>
<title>page title</title>
</head>
<body>
</body>
</html>

3
HTML Elements
 Names enclosed in < and >
 Commonly have a start tag and end tag
 Start tag format: <tag_name>
 End tag format: </tag_name> [ note the / after < ]
 E.g. <strong>bold text</strong>
 Some tags may not have end tags
 E.g. <br>
 Tags may have attributes
 <tag_name attr1=“val1” attr2=“val2”
…>…</tag_name>
 E.g. <font face=“arial” size=“9”>Hello</font>
 Not case sensitive
4
HTML Tags
 html
 everything in the document should be within <html>
&</html>
 head
 contains information which is not displayed in the
browser display area
 may contain other tags in it
 format: <head>…</head>
 title
 sets the title of the web page to be displayed in the
browser’s title bar.
 found within the <head> tag.
 format: <title>…</title>
5
HTML Tags (cont’d)
 body
 contains the visible part of the web page
 displayed in the display area of the browser
 contains several other tags and content in it
 format: <body>…</body>
 attributes:
 bgcolor=“color”
 background=“img url”
 text=“text color”
 link=“link color”
 alink=“active link color”
 vlink=“visited link color”
 …
6
HTML Tags (cont’d)
 headings
 predefined formats for text presentation
 six heading formats defined in HTML: <h1> up to
<h6>
 <h1> the largest font size
 <h6> the smallest font size
 Format:
 <h1>…</h1>
 E.g. <h2>a text in heading two</h2>
 bold
 makes a text appear in bold
 Format: <b>…</b> or <strong>…</strong>
 E.g. <b>a text in bold</b>
7
HTML Tags (cont’d)
 italics
 makes a text appear in italics
 Format: <i>…</i> or <em>…</em>
 E.g. <i>a text in italics</i>
 underline
 makes a text appear underlined
 Format: <u>…</u>
 E.g. <u>underlined text</u>
 paragraph
 defines a paragraph
 Format: <p>…</p>

8
HTML Tags (cont’d)
 E.g. <p>this is a paragraph of text. it has a new
line before and after it.</p>
 The browser inserts a new line before and after
the text in the paragraph tag.
 attribute:
 align=“alignment” {left, right, center, justify}

 line break
 inserts a new line
 Format: <br>
 E.g. line one <br> line two <br> line three <br>
line four

9
HTML Tags (cont’d)
 horizontal rule
 inserts a horizontal line
 Format: <hr>
 attributes:
 width=“width” {absolute: in pixels or relative: in %}
 noshade
 color=“color” {browser dependent}
 E.g. <hr width=“75%” noshade color=“#FF0000”>
 sub/sup
 define either a subscript or a superscript
 Format: <sub>…</sub> ; <sup>…</sup>
 E.g. X<sub>1</sub><sup>2</sup> +
2X<sub>3</sub>
10
HTML Tags (cont’d)
 lists
 Unordered Lists (ul)
 define bulleted lists
 Format:
<ul>
<li>…</li>
<li>…</li>
…
</ul>
 Atribute:
 type=“bullet type” {disc, circle, square}

 E.g.
<ul type=“square”>
<li>book</li><li>marker</li><li>chalk</li></ul>
11
HTML Tags (cont’d)
 Ordered Lists (ol)
 define numbered lists
 Format:
<ol>
<li>…</li>
<li>…</li>
…
</ol>
 Atribute:
 type=“number type” {1, i, I, a, A}

 E.g.
<ol type=“i”>
<li>book</li><li>marker</li><li>chalk</li></ol>

12
HTML Tags (cont’d)
 Definition Lists (dl)
 define a list of term-description pairs
 Format:
<dl>
<dt>…</dt>
<dd>…</dd>
<dt>…</dt>
<dd>…</dd>
</dl>
 E.g.
<dl>
<dt>book</dt><dd>something that we read …</dd>
<dt>marker</dt><dd>something we write with
…</dd>
</dl>
13
HTML Tags (cont’d)
 images
 insert images in an html document
 Format: <img> {no end tag}
 Attributes:
 src=“img url”
 alt=“alternate text”
 border=“border width”
 width=“image width”
 height=“image height”
 supported image formats:
 gif, jpg/jpeg, png
 E.g. <img src=“assets/images/logo.gif” alt=“Site
Logo”>
14
HTML Tags (cont’d)
 anchor
 defines a hyperlink or a named anchor
 used for navigation
 Format: <a>…</a>
 Attributes:
 href=“url”
 target=“target”
 name=“anchor name”
E.g.
<a href=“home.htm”>Go to home</a>
<a href=“http://www.google.com”>Google</a>

15
HTML Tags (cont’d)
 Navigation with anchors
 named anchor
 named places in an html document
 Format: <a name=“anchor_name”></a>
 E.g. <a name=“top”></a>
 linking to anchors
 Format:
 <a href=“#anchor_name”>link text</a> {on the same page}

 <a href=“url#anchor_name”link text</a> {on a different

page}
 E.g.
 <a href=“#top”>Top of page</a> {assuming the example

above}
 <a href=“http://www.aau.edu.et/history.htm#establishment”>

Establishment of AAU</a>

16
HTML Tags (cont’d)
 Tables
 insert tabular data
 design page layout
 Tags involved: <table>, <tr>, <td>, <th>,
<caption>

17
HTML Tags (cont’d)
 Format:
<table>
<caption>table caption</caption>
<tr>
<td>…</td> <td>…</td> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>
…
</table>

18
HTML Tags (cont’d)
 E.g.
<table>
<caption align=“center”>table 1.0</caption>
<tr>
<th>Column 1</th> <th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td> <td>Cell2</td>
</tr>
<tr>
<td>Cell 3</td> <td>Cell 4</td>
</tr>
</table>
19
HTML Tags (cont’d)
 Table attributes:
 align=“alignment” {left, center, right}
 bgcolor=“color”
 width=“table width” {absolute or relative}
 border=“border width”
 bordercolor=“color”
 cellspacing=“space amount” {in pixels}
 cellpadding=“padding amount” {in pixels}
 …

20
HTML Tags (cont’d)
 Table row attributes:
 align=“alignment” {left, center, right}
 bgcolor=“color”
 height=“height”
 align=“alignment” {top, middle, bottom}
 Table data/heading attributes:
 align=“alignment”
 width=“width”
 bgcolor=“color”
 Unless otherwise specified, <tr> and <td>
inherit attributes of <table> whenever it
applies.
21
HTML Tags (cont’d)
 Cells spanning multiple rows/columns
 two additional attributes of <td> and <th>
 colspan=“num columns”
 rowspan=“num rows”

 E.g. (colspan)
<table>
<tr> <td colspan=“2”>Cell 1</td> <td>Cell 2</td> <td>Cell
3</td> </tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td>
<td>Cell 7</td> </tr>
<tr> <td colspan=“4”>Cell 8</td> </tr>
</table>

22
HTML Tags (cont’d)
 E.g. (rowspan)
<table>
<tr> <td rowspan=“3”>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td>
</tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>

 E.g. (hybrid)
<table>
<tr> <th colspan=“3”>Title</th> </tr>
<tr> <th rowspan=“3”>Cell 1</th> <td>Cell 2</td> <td>Cell 3</td>
</tr>
<tr> <td>Cell 4</td> <td>Cell 5</td> </tr>
<tr> <td>Cell 6</td> <td>Cell 7</td> </tr>
</table>
23
HTML Tags (cont’d)

 HTML comments
 insert commented text in an html document
 Format: <!-- comment text -->
 E.g. <!-- this is a comment text -->

24
HTML Special Characters
 Special characters (named characters)
 not found on the standard keyboard
 e.g. ©
 used by HTML
 e.g. <
 ignored by browsers
 e.g. blank spaces
 Format:
 &code;
 Examples:
 &copy;  © &lt;  < &amp;  & &nbsp;
 space
25
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
26
Creating a moving text
 <marquee> this text will move</marquee>
 attributes
 Width –sets the width of marquee area
 Height –sets the height of the marquee area
 Direction – which direction the marquee will scroll
 Behavior –what type of scrolling
 Scroll delay –how long to delay between each jump
 Scrollamount –how far to jump
 Loop how many times to loop
 Bgcolor –back ground color
 Eg <marquee bgcolor=rgb(255,255,200)
direction="right" loop="20" width="75%"><strong>
well come </marquee></strong>
27
Divisions

 In HTML, we can create divisions of an HTML


document using the <div> tag.
 A <div> is a logical block tag that has no
predefined meaning or rendering
 Very important for page layout design
 The <div> tag works well with CSS
 Tag format:
 <div> … </div>
 Attributes:
 align=“alignment” {left, right, center} - define
content alignt.

28
HTML Forms
 Used to gather input from users
 The input is usually sent to a server-side
script for processing

 The data can be sent in two methods: GET &


POST
 GET
 for small and non-secure data
 Is the default method
 Data is sent as part of the request URL
 Limitation in size of data

29
HTML Forms (cont’d)
 POST
 For large & secure data
 Input is sent as a data stream after the request URL

 Tags

 The <form> tag


 Contains all input elements in the form
 Defines the method of sending data
 Defines the server-side script responsible for accepting
the data

30
HTML Forms (cont’d)
 Attributes:
 name=“name”
 method=“method” {get, post}
 action=“url” {url of the server-side script to post data
to}
 enctype=“enctype” {multipart/form-data, text/plain,
…}
 multipart/form-data – used when uploading files

 Ex.
<form method=“post” action=“search.php”>
….
</form>

31
HTML Forms (cont’d)
 <input> tag
 used to define input fields in a form
 several types of input fields
{textbox, listbox, checkbox, radio, button, …}

 Attributes:
 name=“name”
 type=“type”
{text, hidden, password, file, submit, reset, button,
checkbox, radio, image}
 value=“value”
 disabled=“disabled”
 checked=“checked”

32
HTML Forms (cont’d)
 The possible input types:
 text – input text box
 hidden – a hidden field for storing values
 password – password input box
 file – input box for file uploading (browse)
 submit – a button that submits the form
 reset – a button that resets form fields to their
original values
 button – a general purpose button
 checkbox – a check box
 radio – a radio button (option button)
 image – an image button that submits the form
33
HTML Forms (cont’d)
 Other input fields
 <textarea> tag
 used to input a large block of text
 Tag format: <textarea>…</textarea>

 Attributes:
 name=“name”
 cols=“num_columns”
 rows=“num_rows”
 readonly=“readonly”

34
HTML Forms (cont’d)
 <select> tag
 used to create a select box
 Tag format:
 <select>
<option>…</option>
<option>…</option>
…
</select>
 Attributes:
 <select>
 name=“name”

 multiple=“multiple” {enables selection of multiple

items}
 disabled=“disabled”

35
HTML Forms (cont’d)
 <option>
 value=“value”
 selected=“selected”
 disabled=“disabled” {browser compatibility: Firefox ?}

 Ex.
1. <select name=“department”>
<option value=“1”>Computer Science</option>
<option value=“2”>Information
Science</option>
<option value=“3”>Computer
Engineering</option>
</select>
2. Modify the above input so that Information Science is
selected by default.

36
HTML Forms (cont’d)
 submit & reset buttons
 the vlaue attribute is the caption of the buttons
Ex. <input type=“submit” value=“ok”>
inserts a button with the caption (label) ok.

 file upload fields


Ex. <input type=“file” name=“doc”>

37
HTML Forms (cont’d)
 <label> tag
 used to give labels to input fields

Ex.
<label>First Name:
<input type=“text” name=“fname”>
</label>

38
HTML Forms (cont’d)
 <fieldset> tag
 used to group input fields in a form
 the title/label of the group is set using the
<legend> tag
 Tag format:
<fieldset>
<legend>…</legend>
… one or more input fields …
</fieldset>

 Attributes:
 <legend>
 align=“alignment” {left, center, right}

39
HTML Forms (cont’d)
 Presentation
 tables can be used to align form fields and their
labels so that the presentation of the form looks
more regular.
 one possibility is to use:
 one table row per input field
 within a table row
 one column for the labels

 one column for the input fields

 the table borders can be set to 0 so that they are


not visible
 other features of tables (rows & columns) can be
adjusted as required
40
HTML Forms (cont’d)
 Presentation (cont’d)
 Cascading Style Sheets (CSS) can be used to
define further presentation related attributes for
input fields

 Ex. all text input fields should have font size of 10


and background color of grey.

 will be discussed in the next section.

41
HTML Forms (cont’d)

 Exercises

 Create an HTML page which displays a login screen with


 a username field

 a password field

 a button to submit the form

 a button to reset the content of the form

42
HTML Forms (cont’d)
 Create an HTML page which displays student registration
screen with
 a name field

 an ID field

 a department field {select box with values:


1. Computer Science
2. Information Science
3. Computer Engineering
 a semester field {select box with values:
1. I
2. II
 an academic year field
{select box with values: 1998-2000, 2000 default}
 a button to submit the form

 a button to reset the form

43
Cascading Style Sheets
(CSS)
CSS Introduction
 Cascading Style Sheets (CSS)
 Used to describe the presentation of
documents
 Define sizes, spacing, fonts, colors, layout,
etc.
 Improve content accessibility
 Improve flexibility
 Designed to separate presentation from
content
 CSScan be applied to any HTML or XML
documents.
45
Why “Cascading”?
 Priority scheme determining which style rules
apply to element.

46
Why “Cascading”?

47
Why “Cascading”?
 Some CSS styles are inherited and some not
 Text-related and list-related properties are
inherited - color, font-size, font-
family, line-height, text-align,
list-style, etc
 Box-related and positioning styles are not
inherited - width, height, border, margin,
padding, position, float, etc
 <a> elements do not inherit color and text-
decoration

48
Style Sheets Syntax
 Stylesheetsconsist of rules, selectors,
declarations, properties and values

 Selectors are separated by commas


 Declarations are separated by
semicolons
 Properties and values are separated by
colons
h1,h2,h3 { color: green; font-weight:
49
bold; }
Selectors
 Selectors determine which element the rule
applies to:
 All elements of specific type (tag)
 Those that mach a specific attribute (id, class)
 Elements may be matched depending on how they
are nested in the document tree (HTML)
 Examples:
.header a { color: green }

#menu>li { padding-top: 8px }

50
Selectors
 Three primary kinds of selectors:
 By tag (type selector):
h1 { font-family: verdana,sans-serif; }
 By element id:
#element_id { color: #ff0000; }

 By element class name:


.myClass {border: 1px solid red}
 Selectors can be combined with commas:
h1, .link, #top-link {font-weight: bold}

This will match <h1> tags, elements with


class link, and element with id top-link
51
Selectors
 Pseudo-classes define state
 :hover, :visited, :active , :lang
 Pseudo-elements define element "parts" or
are used to generate content
 :first-line , :before, :after

a:hover { color: red; }


p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }

52
Values in the CSS Rules
 Colors are set in RGB format (decimal or
hex):
 Example: #a0a6aa = rgb(160, 166, 170)
 Predefined color aliases exist: black, blue,
etc.
 Numeric values are specified in:
 Pixels, e.g. 12px
 Points, inches, centimeters, millimeters
 E.g. 10pt , 1in, 1cm, 1mm
 Percentages, e.g. 50%
 Zero can be used with no unit: border: 0;
53
Default Browser Styles
 Browsers have default CSS styles
 Used when there is no CSS information or any
other style information in the document
 Caution: default styles differ in browsers
 E.g. margins, paddings and font sizes differ most
often and usually developers reset them

* { margin: 0; padding: 0; }

body, h1, p, ul, li { margin: 0; padding:


0; }

54
Linking HTML and CSS
 HTML (content) and CSS (presentation) can be
linked in three ways:
 Inline: the CSS rules in the style attribute
 No selectors are needed
 Embedded: in the <head> in a <style> tag
 External: CSS rules in separate file (best)
 Usually a file with .css extension
 Linked via <link rel="stylesheet" href=…>
tag or @import directive in embedded CSS block

55
Linking HTML and CSS
 Using external files is highly recommended
 Simplifies the HTML document
 Improves page load speed as the CSS file is
cached

56
Inline Styles: Example
inline-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
57
Embedded Styles
 Embedded in the HTML in the <style> tag:
<style type="text/css">
 The <style> tag is placed in the <head> section of
the document
 Used for document-specific styles

58
Embedded Styles: Example
embedded-stylesheets.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Style Sheets</title>
<style type="text/css">
em {background-color:#8000FF;
color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head> 59
Embedded Styles: Example
…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text.
Here
is some text. Here is some text. Here is
some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html> 60
External CSS Styles
 External linking
 Separate pages can all use a shared style
sheet
 Only modify a single file to change the
styles across your entire Web site
 link tag (with a rel attribute)
 Specifies a relationship between current
document and anothertype="text/css"
<link rel="stylesheet" document
href="styles.css">

 link elements should be in the <head>


61
External CSS Styles
 Another way to link external CSS files
 Example:
<style type="text/css">
@import url("styles.css");
/* same as */
@import "styles.css";
</style>

 Ancient browsers do not recognize @import


 Use @import in an external CSS file to workaround
the IE 32 CSS file limit

62
External Styles: Example
styles.css
/* CSS Document */

a { text-decoration: none }

a:hover { text-decoration: underline;


color: red;
background-color: #CCFFCC }

li em { color: red;
font-weight: bold }

ul { margin-left: 2cm }

ul ul { text-decoration: underline;
margin-left: .5cm }
63
External Styles: Example
external-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Importing style sheets</title>
<link type="text/css" rel="stylesheet"
href="styles.css" />
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<li>Milk</li>
…
64
External Styles: Example
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
65
Text-related CSS Properties
 color – specifies the color of the text
 font-size – size of font: xx-small, x-small,
small, medium, large, x-large, xx-large,
smaller, larger or numeric value
 font-family – comma separated font names
 Example: verdana, sans-serif, etc.
 The browser loads the first one that is available
 There should always be at least one generic font
 font-weight can be normal, bold, bolder,
lighter or a number in range [100 … 900]

66
CSS Rules for Fonts
 font-style – styles the font
 Values: normal, italic, oblique
 text-decoration – decorates the text
 Values: none, underline, line-trough, overline,
blink
 text-align – defines the alignment of text or
other content
 Values: left, right, center, justify

67
Shorthand Font Property
 font
 Shorthand rule for setting multiple font properties
at the same time is equal to writing this:
font:italic normal bold 12px/16px
verdana
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;

68
Backgrounds
 background-image
URL of image to be used as background, e.g.:
background-image:url("back.gif");
 background-color
 Using color and image and the same time
 background-repeat
 repeat-x, repeat-y, repeat, no-repeat
 background-attachment
 fixed / scroll

69
Backgrounds
 background-position: specifies vertical and
horizontal position of the background image
 Vertical position: top, center, bottom
 Horizontal position: left, center, right
 Both can be specified in percentage or other
numerical values
 Examples:
background-position: top left;

background-position: -5px 50%;

70
Background Shorthand Property
 background:shorthand rule for setting
background properties at the same time:
background: #FFF0C0 url("back.gif") no-
repeat fixed top;

is equal to writing:
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
 Some browsers will not apply BOTH color
and image for background if using
shorthand rule
71
Background-image or <img>?
 Background images allow you to save many
image tags from the HTML
 Leads to less code
 More content-oriented approach
 All images that are not part of the page
content (and are used only for
"beautification") should be moved to the CSS

72
Borders
 border-width: thin, medium, thick or
numerical value (e.g. 10px)
 border-color: color alias or RGB value
 border-style: none, hidden, dotted, dashed,
solid, double, groove, ridge, inset, outset
 Each property can be defined separately for
left, top, bottom and right
 border-top-style, border-left-color, …

73
Border Shorthand Property
 border: shorthand rule for setting border
properties at once:
border: 1px solid red
is equal to writing:
border-width:1px;
border-color:red;
border-style:solid;
 Specify different borders for the sides via
shorthand rules: border-top, border-left,
border-right, border-bottom
 When to avoid border:0

74
Width and Height
 width – defines numerical value for the width
of element, e.g. 200px
 height – defines numerical value for the
height of element, e.g. 100px
 By default the height of an element is defined by
its content
 Inline elements do not apply height, unless you
change their display style.

75
Margin and Padding
 margin and padding define the spacing
around the element
 Numerical value, e.g. 10px or -5px
 Can be defined for each of the four sides
separately - margin-top, padding-left, …
 margin is the spacing outside of the border
 padding is the spacing between the border and
the content
 What are collapsing margins?

76
Margin and Padding: Short Rules
 margin: 5px;
 Sets all four sides to have margin of 5 px;
 margin: 10px 20px;
 top and bottom to 10px, left and right to 20px;
 margin: 5px 3px 8px;
 top 5px, left/right 3px, bottom 8px
 margin: 1px 3px 5px 7px;
 top, right, bottom, left (clockwise from top)
 Same for padding

77
The Box Model

78
IE Quirks Mode
 When using quirks
mode (pages with
no DOCTYPE or
with a HTML 4
Transitional
DOCTYPE),
Internet Explorer
violates the box
model standard

79
Positioning
 position: defines the positioning of the
element in the page content flow
 The value is one of:
 static (default)
 relative – relative position according to
where the element would appear with
static position
 absolute – position according to the
innermost positioned parent element
 fixed – same as absolute, but ignores
page scrolling
80
Positioning
 Margin VS relative positioning
 Fixed and absolutely positioned elements do
not influence the page normal flow and
usually stay on top of other elements
 Their position and size is ignored when calculating
the size of parent element or position of
surrounding elements
 Overlaid according to their z-index
 Inline fixed or absolutely positioned elements can
apply height like block-level elements

81
Positioning
 top, left, bottom, right: specifies offset of
absolute/fixed/relative positioned element as
numerical values
 z-index : specifies the stack level of
positioned elements
 Understanding stacking context
Each positioned element creates a stacking
context.
Elements in different stacking contexts are
overlapped according to the stacking order
of their containers. For example, there is no
way for #A1 and #A2 (children of #A) to be
placed over #B without increasing the z-
index of #A.

82
Inline element positioning
 vertical-align: sets the vertical-alignment
of an inline element, according to the line
height
 Values: baseline, sub, super, top, text-top,
middle, bottom, text-bottom or numeric
 Also used for content of table cells (which apply
middle alignment by default)

83
Float
 float: the element “floats” to one side
 left: places the element on the left and following
content on the right
 right: places the element on the right and
following content on the left
 floated elements should come before the content
that will wrap around them in the code
 margins of floated elements do not collapse
 floated inline elements can apply height

84
Clear
 clear
 Sets the sides of the element where other floating
elements are NOT allowed
 Used to "drop" elements below floated ones or
expand a container, which contains only floated
children
 Possible values: left, right, both
 Clearing floats
 additional element (<div>) with a clear style

85
Clear
 Clearing floats (continued)
 :after { content: ""; display: block;
clear: both; height: 0; }
 Triggering hasLayout in IE expands a container of
floated elements
 display: inline-block;
 zoom: 1;

86
Opacity
 opacity: specifies the opacity of the element
 Floating point number from 0 to 1
 For old Mozilla browsers use –moz-opacity
 For IE use filter:alpha(opacity=value) where
value is from 0 to 100; also, "binary and script
behaviors" must be enabled and hasLayout must
be triggered, e.g. with zoom:1

87
Visibility
 visibility
 Determines whether the element is visible
 hidden: element is not rendered, but still occupies
place on the page (similar to opacity:0)
 visible: element is rendered normally

88
Display
 display: controls the display of the element
and the way it is rendered and if breaks
should be placed before and after the element
 inline: no breaks are placed before and after
(<span> is an inline element)
 block: breaks are placed before AND after the
element (<div> is a block element)

89
Display
 display: controls the display of the element
and the way it is rendered and if breaks
should be placed before and after the element
 none: element is hidden and its dimensions are
not used to calculate the surrounding elements
rendering (differs from visibility: hidden!)
 There are some more possible values, but not all
browsers support them
 Specific displays like table-cell and table-row

90
Overflow
 overflow: defines the behavior of element
when content needs more space than you
have specified by the size properties or for
other reasons. Values:
 visible (default) – content spills out of the
element
 auto - show scrollbars if needed
 scroll – always show scrollbars
 hidden – any content that cannot fit is
clipped

91
Other CSS Properties
 cursor: specifies the look of the mouse
cursor when placed over the element
 Values: crosshair, help, pointer, progress,
move, hair, col-resize, row-resize, text, wait,
copy, drop, and others
 white-space – controls the line breaking of
text. Value is one of:
 nowrap – keeps the text on one line
 normal (default) – browser decides whether to
brake the lines if needed

92
Benefits of using CSS
 More powerful formatting than using
presentation tags
 Your pages load faster, because browsers
cache the .css files
 Increased accessibility, because rules can be
defined according given media
 Pages are easier to maintain and update

93
CSS Development Tools
 Visual Studio – CSS Editor

94
CSS Development Tools
 Firebug – add-on to Firefox used to examine
and adjust CSS and HTML

95
CSS Development Tools
 IE Developer Toolbar – add-on to IE used to
examine CSS and HTML (press [F12])

96
Common Gateway Interface
(CGI) concepts

97
What is CGI?
 CGI = Common Gateway Interface
 Provides a standardized way for web
browsers to:
 Call programs on a server.
 Pass data to programs on a server.
 Receive responses from programs on a server.

98
What is CGI?
 CGI is the interface between server programs
and other software.
 CGI is not a Perl specific concept.
 Any language can produce CGI programs.
 Why Perl?
 Perl provides a nice interface for creating CGI
scripts.

99
How Does CGI Work?
 Phase 1: Create.
 Phase 2: Request/Execute.
 Phase 3: Respond/Display.

100
Phase 1
 A CGI script is created.
 The script is placed on a server.
 Made executable.
 A webpage is created and linked to the
CGI script.
 Webpage is the script’s interface to the world.

101
Phase 2
 A person visits the webpage and submits a
request to run the script.
 Browser contacts the server with the CGI
script:
 Asks to run the script.
 Passes input parameters to the script.
 Server runs the script on the input
parameters.

102
Phase 3
 Script produces output in the form of HTML.
 Server takes the output and returns it to
the web browser.
 Browser displays the output as an HTML
page.
 Page may reference other CGI scripts.

103
Calling a CGI Program

 CGI programs are called from HTML files.


 A common/simple way is with the HREF
attribute of the anchor (<a>) tag.
 For example,
<a href = “http://www.foo.com/cgi-bin/bar.pl”>
DO IT
</a>
Or
<form method=“POST” action=“bar.pl”>

104
Returning the Output
 CGI programs must create HTML output to
return to the client.
 HTML is the common language between the
client and the CGI program.
 Communication with client is through
standard output.
 Output goes to server and then goes to screen.
 Use print/echo/die function to send HTML
output to client.

105
HTML OUTPUT
 First line of HTML output must specify the
type:
 i.e. type of the content of the output.
 The type is usually text/html.
 For example,
 print “Content-type: text/html\n\n”;
 There must be a blank line after the first
line.

106
More Powerful Interaction
 Many webpages gather information from
their visitors.
 A more powerful interaction between CGI
program and browser is needed.
 This interaction is provided by forms.

107
Forms
 A form is a collection of templates in a web
page.
 A form must include a submit button!
 When the submit button is clicked:
 The CGI program specified in the form is
contacted.
 A string representation of the widgets’ values is
sent to the server.

108
Form Values
 Remember a form’s values are sent to the
server as a string.
 Represented as a sequence of
name=value pairs:
 name is the widget’s name.
 value is the widget’s value.
 Values are textual only!
 Other data types cannot be sent.
 Validity of values must be checked by CGI
program.

109
Get vs. Post
 There are two ways to send a form’s
values to a CGI program.
 Get is the default method.
 Data string is attached to URL.
 Seen in browser’s address bar.
 Server removes string from URL.
 Less security and in size
 Stored in environment variable,
QUERY_STRING.
 Post is the optional method.
 Data string is sent through standard input.
 CGI program can simply read it.
 Secured and more in size.
 Length of string is stored in environment
110 variable, CONTENT_LENGTH.
Creating a Form
 <form> tags are used to create a form.
 For example,
<form method=“post” action=“file.pl”>
…
<input type = “submit” value = “submit
form”>
</form>

111

You might also like