3 HTML CSS

HTML & CSS
Week – 2 (Part – 1)
Enterprise Application Development
Capital University of Science and Technology
(C.U.S.T)
WWW
• World Wide Web consists of a large group of computers to provide

information.
• Web operates on a client-server model
• Web Browser
• Web Server
• Web Document
3
WWW Architecture
PC/Mac/Unix/Mobile
Client Browser (IE, Firefox, Chrome,
Opera, Safari)
Request:
http://www.bbc.com/default.html
Web/Application Server
Apache Tomcat
Response:
<html>…</html>
4
WWW Client Server Model

• The web operates on a client-server model.
• Web Browser
• Knows how to contact web servers to get information.
• Knows how to open and interpret web pages.
• Web server
• Hosts at IP addresses identified by host names/ domain names
• Knows how to respond to requests for web pages.
• Web servers and web browsers speak HTTP
5
WWW Languages
• HTTP / HTTPS (URL, GET/POST)
• Stateless protocol between client and server
• Client-side:
• HTML / XHTML (Extensible HyperText Markup Language)
• JavaScript / VBScript (client-side scripting)
• Applets / ActiveX controls
• Server-side:
• ASP.NET (latest generation of ASP)
• Java Servlets
• JSP (Java Server Pages)
• PHP, Phython, JSP, …
HTML
(HYPERTEXT MARKUP
LANGUAGE)
7
HTML
• HyperText Markup Language (HTML) is the language of the web
• HTML is just a document
• Web browsers can display several types of documents, not just
HTML i.e. XML, XHTML, etc.
• the document type is called the Document Type Declaration, or DTD
for short
• The document type for HTML5 is
<!doctype html> <!doctype html5>

8
HTML (continued)
•<> root element: <html> …. </html>
• HTML documents use a specific structure enabling
web browser to read document
<!doctype html>
<html>
<head>
<title>My First Document </title>
</head>
<body>
<div>My Web Page</div>
</body>
</html>
9
HTML Tags (Basic)
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Introduces horizontal line
 Defines a comment
10
HTML Tags (Formatting)
Tag Description
<abbr> Defines an abbreviation
Defines contact information for the
<address>
author/owner of a document/article
<b> <i><u> Defines bold text
<bdo> Overrides the current text direction
Defines a section that is quoted from
<blockquote>
another source
<cite> Defines the title of a work
<code> Defines a piece of computer code
11
HTML Tags (Formatting)
<mark> Defines marked/highlighted text
Defines a scalar measurement within a

<meter>
known range (a gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<s> Defines text that is no longer correct
<sub> Defines subscripted text
<sup> Defines superscripted text
<time> Defines a date/time

12
HTML Tags (Lists)
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
Defines a description of a term/name in
<dd>
a description list
<menu> Defines a list/menu of commands
Defines a command button that a user
<command>
can invoke
13
HTML Tags (Hypertext)

Tag Description
<a> Defines a hyperlink (href, name)
<img> Defines an image (src, alt)
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
Used to draw graphics, on the fly, via scripting
<canvas>
(usually JavaScript)
<audio> Defines sound content
Defines multiple media resources for media
<source>
elements (<video> and <audio>)
Defines text tracks for media elements (<video>
<track>
and <audio>)
<video> Defines a video or movie
14
<TITLE>Bucky Badger’s web page</TITLE>

<BODY>
<H1>Welcome to Bucky's web page</H1>
<IMG SRC="bucky.gif">
<P>I am Bucky, the mascot for University of Wisconsin
athletics. Please visit
<A HREF="http://www.uwbadgers.com/football/index.html">
the web page of our football team</A>
and <A
HREF="http://www.uwbadgers.com/basketball/index.html">
the web page of our basketball team</A>.
</BODY>
15
HTML Tags (Table)

Tag Description
<table> Defines a table
<caption> Defines a table caption
<tr> Defines a row in a table
<th> Defines a header cell in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Specifies column properties for each column
<col>
within a <colgroup> element
Specifies a group of one or more columns in a
<colgroup>
table for formatting
16
Table Example 1
<table border="3">
<tr align="center"><th>Title</th>
<th>Authors</th>
<th>Publisher</th>
</tr>
<tr><td>HTML: The Definitive Guide</td>
<td>Chuck Musciano and Bill Kennedy</td>
<td>O'Reilly & Associates</td>
</tr>
<tr><td>Learning C# 2005</td>
<td>Jesse Liberty and Brian MacDonald</td>
<td>O'Reilly & Associates</td>
</tr>
</table>
17
Table Example 2
<table width="300">
<tr valign="top">
<td rowspan="2" valign="middle">
<i>You can contact the people listed here.</i></td>
<td width="140">
<img src="sohi-mini.jpg" />
<br /><b><a href="/~sohi/">Prof. Gurindar Sohi
</a></b>
<br />Chair</td>
<td width="140">
<img src="horwitz-mini.jpg" />
<br /><b><a href="/~horwitz/">Prof. Susan Horwitz
</a></b>
<br />Associate Chair</td>
</tr>
<tr><td colspan="2" align="center">
<i>There are a few others we should have listed.</i>
</td>
</tr>
</table>
18
HTML Tags (Form)
Tag Description
<form> Defines an HTML form for user input
Defines an input control
<input>
http://www.w3schools.com/tags/att_input_type.asp
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
19
<form id="contact-form" action="script.php" method="post">
<fieldset>
<legend>Contact Us:</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female
<textarea name="comments" id="comments" cols="25"
rows="3"></textarea>
<input type="checkbox" checked="checked" id="mailing-list"
value="Yes, sign me up!" />
<select>
<option value="edu">Education</option>
<option value="health">Health</option>
<option value="sports">Sports</option>
</select>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</fieldset>
CSS
(CASCADING STYLE
SHEETS)
21
Adding Colors to life

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• HTML was never intended to contain tags for formatting a
document.
• Tags like <font>, and color attributes were added to the HTML 3.2
• Nightmare for web developers adding font/colors to every single
page, long and expensive process.
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files
• /*CSS comments*/
22
CSS Syntax
• A CSS rule has two main parts
• a selector, normally HTML element you want to style
• and one or more declarations consists of a property:value; ending
with semicolon;
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color:orange;
text-align:center; }
</style>
</head>
<body>
<h1>Heading 1 with CSS</h1>
</body>
</html>
23
CSS Id and Class

• In addition to setting a style for a HTML element, CSS allows you to
specify your own selectors called "id" and "class“
• id selector uses the id attribute of the HTML element, and is defined
with a "#“
#mypara1 {
text-align:center;
color:red;
}
<p id="mypara1">Centered Text!</p>
<p>This paragraph is not affected
by the style.</p>
24
CSS Id and Class

• The class selector is used to specify a style for a group of elements
uses HTML class attribute, and is defined with a ".“
.center { text-align:center; }
• You can also specify that only specific HTML elements should be
affected by a class.
p.center {text-align:right;}
<div class=“center">Centered Text!</p>

<p>This paragraph is righ align</p>
25
CSS How To...

• Three Ways to Insert CSS
• Inline Styles
• Internal style sheet
• External style sheet
• Inline Style
• loses many of the advantages of style sheets by mixing content
with presentation.
<p style="color:sienna;">coloured paragraph.</p>
• Internal Style Sheet
• Should be used when a single document has a unique style.
• Define internal styles in the head section of an HTML page, by
using the <style> tag
26
CSS How To...

• External Style Sheet
• Ideal when the style is applied to many pages.
• 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
• Style sheet should be saved .css should NOT have HTML
<head>
<link rel="stylesheet" type="text/css" href="mystle.css">
</head>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
27
CSS Property Groups
• Color • Transform
• Background and Borders • Transition
• Basic Box • Basic User Interface
• Flexible Box • Multi-column
• Text • Paged Media
• Text Decoration • Generated Content
• Fonts • Filter Effects
• Writing Modes • Image/Replaced Content
• Table • Masking
• Lists and Counters • Speech
• Animation • Marquee
28
CSS Selectors
• Selectors are patterns used to select element(s) to style
.class .intro elements with class="intro"
#id #firstname element with id="firstname"
* * selects all elements
element p all <p> elements
[attribute] [target] all elements with a target attribute
:link a:link all unvisited links
:focus input:focus input element which has focus
:first-letter p:first-letter first letter of every <p> element
:first-line p:first-line first line of every <p> element
current active #news element (clicked on a
:target #news:target
URL containing that anchor name)
:not(selector) :not(p) every element that is not a <p> element
::selection ::selection portion of an element that is selected by user

29
Take Home
• WWW consists of a large group of computers (servers), to
provide information (Document; html etc) requested by
client, a piece of computer software (web browser).
• Web Browser and Server speaks (stateless) HTTP
• Client (Browser) languages are HTML, JavaScript, ...
• Server Languages of interest are ASP.net, PHP, ...
• Home Work1.2: Make a stylish static web site using

most of HTML tags and CSS. (for example your CV,
containing an index page, a detailed page of your projects,
and page about your soft skills)Due Date: NEXT WEEK 1st
lecture
•

3 HTML CSS

Uploaded by

3 HTML CSS

Uploaded by

HTML & CSS

• World Wide Web consists of a large group of computers to provide

• Web operates on a client-server model

WWW Client Server Model

<!doctype html> <!doctype html5>

HTML Tags (Basic)

HTML Tags (Formatting)

HTML Tags (Formatting)

<mark> Defines marked/highlighted text

Defines a scalar measurement within a

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<s> Defines text that is no longer correct

<sub> Defines subscripted text

<sup> Defines superscripted text

<time> Defines a date/time

HTML Tags (Lists)

HTML Tags (Hypertext)

<TITLE>Bucky Badger’s web page</TITLE>

HTML Tags (Table)

HTML Tags (Form)

Adding Colors to life

CSS Id and Class

CSS Id and Class

<div class=“center">Centered Text!</p>

CSS How To...

CSS How To...

::selection ::selection portion of an element that is selected by user

• Home Work1.2: Make a stylish static web site using

You might also like