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

Copyright:

Available Formats

3 HTML CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3 HTML CSS

Uploaded by

Copyright:

Available Formats

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