Scribd
Upload
38 views110 pages

Chapter 2

Uploaded by

barugemada
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
38 views110 pages

Chapter 2

Uploaded by

barugemada
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/ 110

1

CHAPTER TWO
Web page development using

html
Fikru F..
2

Contents

HTML Basics

Linking Between Pages

Working with Tables, Forms and Frames

Cascading Style Sheet (CSS)

Introduction to XML
3

HTML
• HTML stands for Hypertext Markup Language

• It is the markup language used for creating web pages

• HTML uses markup tags to describe web pages.

• HTML is written in the form of HTML elements consisting of

HTML tags surrounded by angle brackets (e.g. <html>).


• HTML tags normally come in pairs like <b> and </b>.

• HTML is not a programming language, is a markup language


4

• HTML elements form the building blocks of all


websites.
• HTML allows images and objects to be embedded and
can be used to create interactive forms.
• It can embed JavaScript which affect the behavior of
HTML webpage.
• HTML can also be used to include Cascading Style
Sheets (CSS) to define the appearance and layout of
text.
• World Wide Web Consortium (W3C) is the organization
that develops guidelines and specifications for HTML.
• The W3C website is found at www.w3.org.
5

HTML Document
• A text document containing markup tags

• The tags tell the browser how to display the document

• Should have a .htm or .html file name extension

• Can be created using a simple text editor like Notepad,

Notepad++, Sublime, WordPad, ….


6

HTML Document Structure


• An HTML document has the following basic structure:

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

HTML Terms
• Tag
• a piece of code that acts as a label that a web browser interprets
• Used to tag or "mark-up" pieces of text. Once tagged, the text
becomes HTML code to be interpreted by a web browser. Tags
look like this: <tag>
• Element
• A complete tag, having an opening <tag> and a closing </tag>.
• Attribute
• Is a property value that customizes or modifies an HTML
• Elements will often have multiple attributes.
8

HTML Elements
• Names enclosed in angle bracket < 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>, <hr>
• Tags may have attributes
• <tag_name attr1=“val1” attr2=“val2” …>…</tag_name>
• E.g. <font face=“arial” size=“9”>Hello</font>

• Not case sensitive


9

HTML Tags
• html
• everything in the document should be within <html> &</html>
• head
• Contains information which is not displayed in the browser
• May contain other tags in it such as <title> </title> tag.
• 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>
10

HTML Tags
• body
• Contains the visible part of the web page
• What we place here will be displayed to our visitors.
• 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”
11

HTML Tags
• headings
• Predefined formats for text presentation
• Six(6) 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>
12

HTML Tags
• 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>
13

HTML Tags
• 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
14

HTML Tags
• 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>
15

HTML Tags
• Formatting Tags
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through
16

HTML Tags
• Lists: Unordered, Ordered and Definition 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>
17

HTML Tags
• 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>
18

HTML Tags
• 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>
19

HTML Tags
• images
• insert images in an html document
• Format: <img> {no end tag}
• Attributes:
• src=“img url” --> Location of image file(relative or absolute)
• alt=“alternate text” --> Substitute text for display
• border=“border width” -- > Size of border, 0 for no border
• width=“image width” -- > Number of pixels of the width
• height=“image height” -- > Number of pixels of the height
• supported image formats:
• gif, jpg/jpeg, png
• E.g. <img src=“assets/images/logo.gif” alt=“Site Logo”>
20

HTML Tags
• anchor
• defines a hyperlink or a named anchor
• used for navigation
• Format: <a>…</a>
• Attributes:
• href=“url”
• target=“target” { _self, _blank }
• name=“anchor name”
• E.g.
<a href=“home.htm”>Go to home</a>
<a href=“http://www.google.com” target=“_blank”>Google</a>
21

HTML Tags-Target Attribute


• The target attribute specifies where to open the linked
document.
• The target attribute can have one of the following values:
• _blank - Opens the linked document in a new window or
tab
• _self - Opens the linked document in the same window/tab
as it was clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the
window
22

HTML Tags
• Navigation with anchors
• named anchors
• 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.ddu.edu.et/history.htm#establishment”>
Establishment of DDU</a>
23

HTML Tags
Tables
• Tables are defined with the <table> tag.
• A table is divided into rows with the <tr> tag
• Each row is divided into data cells with the <td> tag.
• td stands for "table data," and holds the content of a data cell.
• A <td> tag can contain text, links, images, lists, forms, other
tables, etc.
• Tags involved: <table>, <tr>, <td>, <th>, <caption>
• NB: If you do not specify a border attribute, the table will be
displayed without borders.
Table headers
• Headers in a table are defined with the <th> tag.
• The text in a <th> element will be bold and centered.
24

HTML Tags
 Format:
<table>
<caption>table caption</caption>
<tr>
<td>…</td> <td>…</td> …
</tr>
<tr>
<td>…</td> <td>…</td> …
</tr>
…
</table>
NB: The <caption> element puts a title above the
table
25

HTML Tags
• E.g.
<table>
<caption align=“center” valign=“bottom”>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>
26

Example <table border="1">


<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Mulugeta G.</td>
<td>Internet Programming</td>
<td>3</td>
</tr>
<tr>
<td>Damana D.</td>
<td>Android Programming</td>
<td>3</td>
</tr>
<tr>
</table>
27

HTML Tags
• Table attributes:

• align=“alignment” {left, center, right}

• bgcolor=“color” --> - background colour (inside cells)

• width=“table width” {absolute or relative}

• border=“border width” -- > width of border

• bordercolor=“color”

• cellspacing=“space amount” {in pixels}-> separation between

cells
• cellpadding=“padding amount” {in pixels}-> around data

inside cell
28

HTML Tags
• Table row attributes:
• align=“alignment” {left, center, right}
• bgcolor=“color”
• height=“height”
• valign=“alignment” {top, middle, bottom}
• Table data/heading attributes:
• align=“alignment”
• valign=“alignment”
• width=“width”
• bgcolor=“color”
• Unless otherwise specified, <tr> and <td> inherit attributes of
<table> whenever it applies.
29
Attribute Value Description
align Left Specifies the alignment of a table according to
Center surrounding text
right

bgcolor rgb(x,x,x) Specifies the background color for a table


#xxxxxx
colorname

background Image url Sets background image of the table


border pixels Specifies the width of the borders around a table
bordercolor rgb(x,x,x) Specifies the color used for the border
#xxxxxx
colorname

cellpadding pixels Specifies the space between the cell wall and the cell
content

cellspacing pixels Specifies the space between cells


width Pixels Specifies the width of a table
%

height Pixels Specifies the height of a table


%
30

HTML Tags
• 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>
31

HTML Tags
• 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>
32

Example <table border="1">


<tr>
<th colspan=“2”>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>Alemayehu</td>
<td>Bekele</td>
<td rowspan=“2”>Internet
Programming</td>
<td>3</td>
</tr>
<tr>
<td>Helen</td>
<td>Getahun</td>
<td>2</td>
</tr>
<tr>
</table>
33

Example
Tables: align and width attributes
 Align – determines position
of text within a cell <table
<tr>
border="1" align="center">
 Width – determines width <th colspan="2"
of row relative to table width="60%">Name</th>
<th rowspan="2">Course</th>
<th rowspan="2">Year</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
<tr>
<td>Helen</td>
<td>Getahun</td>
<td>IP</td>
<td align="center">3</td>
</tr>
<!– etc -->
34

HTML Tags
• HTML Comments

• Comments are not displayed by the browser, but they can

help to document your HTML source code.


• insert commented text in an html document

• Format: <!-- comment text -->

• Notice that there is an exclamation point (!) in the opening

tag, but not in the closing tag.


• E.g. <!-- this is a comment text -->
35

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
• & reg;  ® &trade;  ™
Character Code Short name Character name 36

" &#34; &quot; quotation mark


' &#39; &apos; apostrophe
& &#38; &amp; ampersand
< &#60; &lt; less-than
> &#62; &gt; greater-than
&#160; &nbsp; non-breaking space
¡ &#161; &iexcl; inverted exclamation mark
¢ &#162; &cent; cent
£ &#163; &pound; pound
¤ &#164; &curren; currency
¥ &#165; &yen; yen
¦ &#166; &brvbar; broken vertical bar
§ &#167; &sect; section
¨ &#168; &uml; spacing diaeresis
© &#169; &copy; copyright
ª &#170; &ordf; feminine ordinal indicator
« &#171; &laquo; angle quotation mark (left)
¿ &#191; &iquest; inverted question mark
× &#215; &times; multiplication
÷ &#247; &divide; division
37

Example
<table border="1" bgcolor="cyan">
<tr > <th colspan="4"> School of Computing </th> </tr>
<tr align="center">
<td> Chair 1 </td>
<td> Chair 2 </td>
<td> Chair 3 </td>
<td> Chair 4 </td>
</tr>
<tr>
<td> Computer Science </td>
<td> Information Technology </td>
<td> Software Engineering </td>
<td> Information Science </td>
</tr>
<tr> <td colspan="4" align="center"> Copy &copy;2012 </td> </tr>
</table>
38

Lab Practice
39

HTML Tags
• Frames and Framesets
• Frames are a way of dividing the browser window into
several independent windows where each section can
load a separate HTML document
• Each frame can be independently loaded a different url.
• Frameset - collection of frames in the browser window
• The window is divided into frames in a similar way the
tables are organized into rows and columns.
• Advantages of Frames
• Improved performance (minimal page refresh)
• Flexibility
• Simultaneous multiple views
40

HTML Tags
 Drawbacks of Frames
 Fairly complex (for developer)
 May confuse users (if not properly used)
 Some (old) browsers may not support frames
 URL masking, when printing and bookmarking
 Frames are found in Framesets

 Framesets define the ‘layout’ of the frames it contains

 Used to divide the body into different sections (therefore, no need to use

the body tag in the HTML)


 Several frames can be included in a frameset

 Framesets can be nested in one another to provide a more complex layout.


41

HTML Tags
• Tag format:
 Single frameset
 Nested frameset

<frameset> <frameset>
<frame> <frame>
<frame> <frameset>
… <frame>
</frameset> <frame>
…
</frameset>
<frame>
…
</frameset>
42

HTML Tags
 Frameset Attributes

• rows = “row dimensions” { ex. rows=“10%, 90%” }

• cols = “column dimensions” { ex. cols=“20%, *, 30% }

• border = “value”

• bordercolor = “color”

• frameborder = “value” { 0, 1, no, yes }

• framespacing = “value”
43

HTML Tags
 Frame Attributes

 name = “frame_name”

 src = “url” { url can be local or external }

 noresize [= “noresize”]

 scrolling = “value” { auto, yes, no }

 allowtransparency = “value” { in % }

 frameborder = “value” { 0, 1, yes, no }

 bordercolor = “color”
44

Example
45

Example
index.html
<html><head><title>My site</title></head>
<frameset cols = “30%, 70%”>
<frame src=“nav.html” noresize scrolling=“no”>
<frame name = “viewer” src=“http://www.google.com” noresize>
</frameset>
</html>
nav.html
<html><body>
<a href=“http://www.google.com” target=“viewer”>google</a><br>
<a href=“http://www.yahoo.com” target=“viewer”>yahoo</a><br>
<a href=“http://www.altavista.com” target=“viewer”>altavista</a><br>
<a href=“http://www.msn.com” target=“viewer”>msn</a><br>
</body></html>
46

Example
47

Example
index.html
<html><head><title>My site</title></head>
<frameset cols = “30%, 70%”>
<frame src=“nav.html” scrolling=“no”>
<frameset rows = “20%, *”>
<frame src=“title.html” noresize>
<frame name = “viewer” src=“http://www.google.com” noresize>
</frameset>
</frameset>
</html>
title.html
<html><body>
<h1>Welcome to My Bookmarks !</h1>
</body></html>
48

Example
test.html
<html>
<head><title>HTML Target Frames</title></head>
<frameset cols="200, *">
<frame src="menu.html" name="menu_page" />
<frame src="main.html" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
49

Example
main.html
<html>
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed
here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
menu.html
<html>
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Google</a><br /><br />
<a href="https://mail.google.com/" target="main_page">G-Mail</a><br
/><br />
<a href="http://news.bbc.co.uk" target="main_page">BBC News</a>
</body>
</html>
50

HTML Tags
Inline Frames (iframe)
• iframes are also called floating frames
• Like frames
• But can occur anywhere in the <body> tag of an html document
• Unlike frames which should only occur in the <frameset> tag
• <iframe> tag defines a rectangular region within
the document in which the browser can display a
separate document

• Tag format:
<iframe></iframe>
51

HTML Tags
• Attributes of iframe
• src = “url”
• name = “name”
• height = “value”
• width = “value”
• scrolling = “value” { auto, yes, no }
• noresize [= “noresize”]
• align = “alignment” { left, right, middle, top, bottom }
• allowtransparency = “value”
• frameborder – whether or not the borders of that frame
are shown = {1(yes) or 0(no)}
52

Example
<html>
<head>
<title>iFrame sample</title>
</head>
<body>
Below is the google site <br>
<iframe height="600px" width="600px"
src="http://www.google.com"
scrolling="auto"></iframe>
</body>
</html>
53

HTML Forms
• Used to gather data/input from users
• Client-side scripts can read input data
• To validate the data, prior to sending to server
• To use in local processing which may output web page
content that is displayed on the client
• 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
54

HTML Forms
• 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
55

HTML Forms
• Attributes:
• name=“name”
• method=“method” {get, post}->used to upload data
• action=“url” {url of the server-side script to post data to or
backend script ready to process your passed data}
• enctype=“enctype” {multipart/form-data, text/plain, … }
• multipart/form-data – used when uploading files
• Tag Format:
<form method=“post” action=“search.php” >
….
</form>
56

HTML Forms
• <input> tag:
• used to define input fields in a form
• several types of input fields, such as:
{textbox, listbox, checkbox, radio, button, select, …}
• Attributes:
• name=“name” --> Used to give a name to the
control
• type=“type” --> {text, hidden, password, file, submit,
reset, button, checkbox, radio, image, …}
• value=“value” --> Used to provide an initial value
• disabled=“disabled”
• checked=“checked”
57

HTML Forms
• The possible input types:
• text – input text box [Single line, Multiline or Password]
• 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
58

HTML Forms
• HTML5 added several new input types:
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="month">
• <input type="number">
• <input type="range">
• <input type="search">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
59

HTML Forms
• Example for input fields:
60

HTML Forms
• Other input fields
• <textarea> tag
• used to input a large block of text/Multiline input field
• Tag format:
<textarea>…</textarea>

• Attributes:
• name=“name”
• cols=“num_columns”
• rows=“num_rows”
• readonly=“readonly”
• wrap=“wrap_type” {off, hard, soft, virtual, physical}
61

HTML Forms
• <select> tag
• used to create a select box/ defines drop-down list
• Tag format:
• <select>
<option>…</option>
<option>…</option>
…
</select>
• Attributes:
• <select>
• name=“name”
• multiple=“multiple” {enables selection of multiple items}
• disabled=“disabled”
62

HTML Forms
• <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
Tech.</option>
<option value=“3”>Computer Eng.
</option>
63

HTML Forms
• submit & reset buttons
• Submit the data to a form handler
• the value attribute is the caption of the buttons
• To be submitted correctly, each input field must have name
attribute.
• The common way to submit a form to a server, is by using a
submit button.

Ex. <input type=“submit” value=“ok”>


• inserts a button with the caption (label) ok.

• file upload fields


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

HTML Forms
• <label> tag
• used to give labels to input fields

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

HTML Forms
• <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}
66

HTML Forms
• Example for input types:
67

HTML Forms
• 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
68

HTML Forms
• 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.


69

Example
• 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
70

Exercise
• 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 Technology
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
71

HTML Color
• HTML colors are specified using predefined color names, or
RGB, HEX, HSL, RGBA, HSLA values.

• Hex color codes: the intensity of red, green and blue


72

Blocks (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.
73

Cascading Style Sheets (CSS)


• An extension (addition) to HTML which allows us to style our

web pages
• Provides more detailed attributes to elements than the ones

defined in standard HTML


• Styles are defined once and used any number of times and in

several contexts
• Clearly separates content from its presentation

• Saves a lot of work - especially in website maintenance


and upgrading
74

Cascading Style Sheets


• Cascading Style Sheet?
• a style language that defines layout of HTML documents
• supported by all browsers today.
• Difference between CSS and HTML
 HTML
• designed to specify the content and structure of web pages
 CSS:
• CSS defines how HTML elements are to be displayed
(formatting structured content)
• used to specify the presentation, or styling, of elements on a
web page (e.g., fonts, spacing, sizes, colors, positioning).
• style portable web pages independently of their content &
structure
75

Cascading Style Sheets


• Benefits
• Web sites designed in CSS are faster to change and
update.
• speeds the time it takes to develop and update site layouts.
• Typography and page layout can be better controlled
• Style is separable & stored from structure
• document are potentially smaller
• this makes site maintenance easier.
76

Cascading Style Sheets


• CSS styles can be specified:
• Inside a single HTML element (inline)
• Inside the <head> element of an HTML document (internal)
• In an external CSS file (external)

• Cascading Order:
• Inline styles
• Internal styles
• External styles
• Browser default
• From highest to lowest
77

Cascading Style Sheets


• CSS Syntax
• Consists of :
• A selector
• A property
• A value

• Format: selector { property : value }


• selector – tells the browser which part of the document is
affected
• property – specifies what aspect of layout is being set
• value – which gives the value for the style property
• Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center }
• CSS declaration always ends with a semicolon
78

Cascading Style Sheets


• Types of Selectors
• HTML tag names or Element name selectors
• Class selectors
• Id selectors

• HTML tag names or Element name as selectors


• selects elements based on the element name.
• used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red;
text-decoration: overline;
}
79

• The class selector(.)


• define generic styles that can be applied to different HTML
elements
• applied to the class attribute of HTML elements
Format:
1. Styles for a particular element
tag_name.style_name { property: value }
Ex. p.color { color: green; }
 <p class=“color”>some text</p>
2. Styles for all elements
.style_name { property: value }
Ex. .color { color: blue; }
 <div class=“color”>some text</div>
<table class=“color”>…</table>
80

• The Id selector
• unlike the class selector, the Id selector always applies to
only one element and defined with “#”
• uses the id attribute of an HTML element to select a specific
element.
Format:
1. Styles for a particular element
tag_name#style_name { property: value }
Ex. p#color { color: green }
 <p id=“color”>some text</p>
2. Styles for all elements
#style_name { property: value }
Ex. #color { color: blue }
 <div id=“color”>some text</div>
81

Cascading Style Sheets


Grouping Selectors
• If you have elements with the same style definitions, like this:
h1 {
text-align: center; • It will be better to group the selectors, to
color: red; minimize the code.
} • To group selectors, separate each
selector with a comma.
h2 {
text-align: center;
color: red; h1, h2, p {
} text-align: center;
color: red;
p{
text-align: center;
}
color: red;
}
82

Cascading Style Sheets


CSS comments
• are used to explain the code, and may help when you edit the
source code at a later date.
• Comments are ignored by browsers.
• Format:
/* comment text */
• Example:
p{
color: red;
/* This is a single-line comment */
text-align: center;
}
83

Cascading Style Sheets


• Inserting CSS
Can be done in three ways:
1. Inline
• used to apply a unique style for a single element.
• using a style attribute in HTML element
• Format:
<tag_name style=“property:value; property: value;”> …
</tag_name>
• Example:
<h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>
<table style=“background-color: yellow”>… </table>
84

Cascading Style Sheets


2. Internal
• using <style> element defined in the <head> element
• Format:
<head>
<style type=“text/css”>
property:value; ...
</style>
</head>
Example:
85

Cascading Style Sheets


3. External
• defined in a separate CSS file
• linked to an HTML document using the <link> tag :
<head>
<link rel=“stylesheet” type=“text/css”
href=“url”>
</head>
• changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in which
the style is attached
86

Cascading Style Sheets


some common CSS properties
• Background
• background-color: color
• background-image: url(url)
• background-repeat: repeat_type {repeat, repeat-x, repeat-y, no-repeat}
• background-attachment: attachment_type {scroll, fixed}
• Text
• color: color
• direction: direction {ltr, rtl} borwser issue??
• letter-spacing: value
• text-align: alignment {left, right, center, justify}
• text-decoration: decoration {none, underline, overline, line-through,
blink}
• text-indent: value
87

Cascading Style Sheets


• text-transform: transform {none, capitalize, uppercase,
lowercase}
• word-spacing: value
• Fonts
• font-style: style {normal, italic, oblique}
• font-weight: weight {normal, bold, bolder, lighter, 100, 200, …}
• font-size: size
• font-family: font_list (in order of precedence, separated by
comma)
• Borders
• Margins
• Padding
• List properties
88

CSS Fonts
• color property defines text color to be used for HTML element
• font-family property defines font to be used for HTML element
• font-size property defines text size to be used for HTML element
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
89

CSS Box Model


• Every HTML element has a box around it, even if you cannot
see it
• CSS border property defines a visible border around an HTML
element:
• Example p{
border:1px solid black;
}
• CSS padding property defines a padding (space) inside the
border:
Example
p{
border:1px solid black;
padding:10px;
}
90

Examples:
Inline Example
• Add <h1> and <p> with some text to demonstrate the style attribute
Internal Example
• Add <h1>,<h1> and <p>,<p> with some text to demonstrate the
<style> element in side the <head> element using the 3 types of
selectors
• Tag-name/element name
• Class selector(.)
• Id selector(#)
External Example
• Add <h1> and <p> with some text to demonstrate with <link>
element
<link rel="stylesheet" type="text/css" href=“filename.css">
91

Example 1:
92

Example 2:
93

Introduction to XML
 What is XML – EXtensible Markup Language?
• markup language much like HTML
• was designed to describe data, not to display data
• tags are not predefined - must define your own tags
• designed to be self-descriptive

XML is a meta markup language for text


documents / textual data

XML allows to define languages


(“applications”) to represent text documents
/ textual data
94

XML
• XML is Not a Replacement for HTML (but HTML can be generated
from XML)
• XML is a complement to HTML.
• XML is a software- and hardware-independent tool for carrying
information.
• Difference between XML and HTML
• XML and HTML were designed with different goals:
• XML - designed to describe data, with focus on what data is
• HTML - designed to format & display data, with focus on how
data looks
• HTML- about displaying, while XML is carrying information
• HTML tags have a fixed meaning and browsers know what it is
while XML tags are different for different applications, and users
know what they mean.
HTML XML
• Fixed set of tags • Extensible set of tags
• Presentation oriented • Content orientated
• No data validation • Standard Data infrastructure
capabilities • Allows multiple output forms
• Single presentation
96

Disadvantage of XML
• XML is text (Unicode) based.
• Takes up less space.
• Can be transmitted efficiently.
• XML document can be displayed differently in different media.
• Html, video, CD, DVD,
• XML documents can be modularized. Parts can be reused.
• Easily readable by human users
• Very flexible and customizable (no finite tag set)
• Easy to use from programs (libs available)
• Easy to convert into other representations
• (XML transformation languages)
• Many additional standards and tools
• Widely used and supported
97

Example of HTML Document


<html>
<head><title>Example</title></head.
<body>
<h1>This is an example of a page.</h1>
<h2>Some information goes here.</h2>
</body>
</html>
98

Example of XML Document


<?xml version=“1.0”/>
<address>
<name>Dawit Alemayehu</name>
<email>[email protected]</email>
<phone>911-235-456</phone>
<birthday>1992-07-09</birthday>
</address> <?xml version="1.0" encoding="UTF-8"?>
<note>
<to> Abebe</to>
<from>Dawit</from>
<heading>Reminder</heading>
<body>Don't forget there is an exam!</body>
</note>
99

XML Rules
• Tags are enclosed in angle brackets.
• Tags come in pairs with start-tags and end-tags.
• Tags must be properly nested.
• <name><email>…</name></email> is not allowed.
• <name><email>…</email><name> is.
• Tags that do not have end-tags must be terminated by ‘/’.
• <br /> is an html example.
• Tags are case sensitive.
• <address> is not the same as <Address>
• XML in any combination of cases is not allowed as part of a
tag.
• Tags may not contain ‘<‘ or ‘&’.
• Documents must have a single root tag that begins the
100

Elements in XML Documents


• (Freely definable) tags: article, title, author
• with start tag: <article> etc.
• and end tag: </article> etc.
• Elements: <article> ... </article>
• Elements have a name (article) and a content (...)
• Elements may be nested.
• Elements may be empty: <this_is_empty/>
• Element content is typically parsed character data
(PCDATA), i.e., strings with special characters, and/or nested
elements (mixed content if both).
• Each XML document has exactly one root element and forms
a tree.
• Elements with a common parent are ordered.
101

Elements Vs Attributes
• Elements may have attributes that have a name and a value, e.g.
<section number=“1“>.
• What is the difference between elements and attributes?
• Only one attribute with a given name per element (but an
arbitrary number of subelements)
• Attributes have no structure, simply strings (while elements can
have subelements)
• As a rule of thumb:
• Content into elements
• Metadata into attributes
• Example:
• <person born=“1992-07-09“ died=“2018-06-07“>
• Alan Turing</person> proved that…
102

XML Documents as Ordered Trees


article

author title text


number=“1“
abstract section
Gerhar title=“…“
d
Weiku In order The index provides
m … …
The Web
in 10 We
years b
103

Simple XML Document


<article>
<author>Gerhard Weikum</author>
<title>The Web in Ten Years</title>
<text>
<abstract>In order to evolve...</abstract>
<section number=“1” title=“Introduction”>
The <index>Web</index> provides the
universal...
</section>
</text>
</article>
104

Simple XML Document


<article> Freely definable tags
<author>Gerhard Weikum</author>
<title>The Web in Ten Years</title>
<text>
<abstract>In order to evolve...</abstract>
<section number=“1” title=“Introduction”>
The <index>Web</index> provides the universal...
</section>
</text>
</article>
105

<article> Start
Tag
<author>Gerhard Weikum</author>
<title>The Web in Ten Years</title>
<text>
<abstract>In order to evolve...</abstract>
<section number=“1” title=“Introduction”>
The <index>Web</index> provides the universal...
</section>
</text>
</article>

Content of
End
Eleme the
Tag
nt Element
(Subeleme
nts and/or
106

Simple XML Document


<article>
<author>Gerhard Weikum</author>
<title>The Web in Ten Years</title>
<text>
<abstract>In order to evolve...</abstract>
<section number=“1” title=“Introduction”>
The <index>Web</index> provides the universal...
</section>
</text>
</article> Attributes
with name
and value
107

Namespaces
<library>
<description>Library of the CS Department</description>
<book bid=“HandMS2000“>
<title>Principles of Data Mining</title>
<description>
Short introduction to <em>data mining</em>, useful
for the IRDM course
</description>
</book>
</library>
Semantics of the description element is
ambigous
Content may be defined differently
Renaming may be
 Disambiguation ofimpossible (standards!)
separate XML applications
using unique prefixes
108

Namespace Syntax
<dbs:book xmlns:dbs=“http://www-dbs/dbs“>

Prefix as Unique URI to


abbrevation of identify the
URI namespace
Signal that
namespace
definition happens
109

Namespace Example
<article>
<author>Gerhard Weikum</author>
<title>The Web in Ten Years</title>
<text>
<abstract>In order to evolve...</abstract>
<section number=“1” title=“Introduction”>
The <index>Web</index> provides the universal...
</section>
</text>
</article>
110

?
END OF CHAPTER TWO
Next: Chapter Three

You might also like