Comp5347 W2 HTML CSS-1
Caricato da
DestriousComp5347 W2 HTML CSS-1
Caricato da
DestriousCOMP5347: Web
Application Development
Introduction to HTML
and CSS
Dr. Basem Suleiman
School of Computer Science
The University of Sydney Page 1
COMMONWEALTH OF
Copyright Regulations 1969
WARNING
This material has been reproduced and communicated to
you by or on behalf of the University of Sydney pursuant to Part VB of the
Copyright Act 1968 (the Act).
The material in this communication may be subject to copyright under the Act.
Any further reproduction or communication of this material by you may be the
subject of copyright protection under the Act.
Do not remove this notice.
The University of Sydney Page 2
Outline
– HTML
– Syntax
– Structure
– Quick Tour
– Semantic Markups
– CSS
– Syntax and Location
– Selector
– The box model
– Text Styling
Content based on Ch2 and Ch3 of Fundamentals of Web Development, Global Edition.
COMP5347 Web Application Development
The University of Sydney Page 3
HTML
“To publish information for global distribution, one needs a universally understood
language, a kind of publishing mother tongue that all computers may potentially
understand. The publishing language used by the World Wide Web is HTML” –
(from Hyper Text Markup Language)
– A markup language is simply a way of annotating a document
in such a way to make the annotations distinct from the text
being annotated.
• E.g. Latex
– HTML is used world wide, standardization is essential
• The W3C is the main standards organization for the World Wide Web.
COMP5347 Web Application Development
The University of Sydney Page 4
Key events in the history of HTML
– First public specification by Tim Berners-Lee (1991)
– W3C standardization (1997)
– Frozen at 4.01 by W3C (1998)
– W3C’s XTHML (XML + HTML) (late 1990s)
– Survived till XHTML 2.0 in mid 2000
– WHATWG(Web Hypertext Application Technology Working Group) under
W3C was formed by developers at Opera and Mozilla to challenge the
idea of XML+HTML (mid 2000)
– More practical approach, e.g., specify how should browsers deal with invalid
mark-up
– W3C stopped work on XHTML 2.0 and adopted the work by WHATWG
and named it HTML5 (2009)
COMP5347 Web Application Development
The University of Sydney Page 5
HTML5 – Aims
• Specify unambiguously how browsers should deal with invalid
markup.
• Provide an open, non-proprietary programming framework (via
Javascript) for creating rich web applications.
• Be backwards compatible with the existing web.
COMP5347 Web Application Development
The University of Sydney Page 6
HTML: Elements and Attributes
– HTML documents = text content + HTML elements
– An HTML element
– Text, other elements, or be empty
– Identified in the HTML document by tags
– HTML elements can also contain HTML attribute
– name=value pair that provides more information about the HTML
element
COMP5347 Web Application Development
The University of Sydney Page 7
What HTML lets you do
▪ Insert images using the <img> tag
▪ Create links with the <a> tag
▪ Create lists with the <ul>, <ol> and <li> tags
▪ Create headings with <H1>, <H2>, …, <H6>
▪ Define metatdata with <meta> tag
▪ And much more…
COMP5347 Web Application Development
The University of Sydney Page 8
Elements and Attributes
Opening Tag Closing Tag
<a href="http://www.centralpark.com">Central Park</a>
Element Name Attribute Content
May be text or other HTML elements
Trailing Slash
Example empty element <br />
Element Name
COMP5347 Web Application Development
The University of Sydney Page 9
Nesting HTML elements
ancestor
<body> parent
child
<p>
This is some <strong>text</strong>
</p>
<h1>Title goes here</h1>
sibling
<div>descendants
<p>
This is <span>important</span>
</p>
</div>
</body>
<body>
descendants children
<p> <h1> <div>
siblings
<strong> <p>
ancestors
<span>
COMP5347 Web Application Development
The University of Sydney Page 10
Nesting HTML elements
– Browsers expect proper nesting of HTML elements
– Important for proper construction
– A child’s ending tag must occur before its parents ending tag
Correct Nesting
<h1>Share Your <strong>Travels</strong></h1>
<h1>Share Your <strong>Travels</h1></strong>
Incorrect Nesting
COMP5347 Web Application Development
The University of Sydney Page 11
Outline
– HTML
– Syntax
– Structure
– Quick Tour
– Semantic Markups
– CSS
– Syntax and Location
– Selector
– The box model
– Text Styling
COMP5347 Web Application Development
The University of Sydney Page 12
Simplest HTML document
• The <title> element provides a broad description of the content.
• The title is typically displayed by the browser in its window and/or tab
1 <!DOCTYPE html>
<title>A Very Small Document</title>
<p>This is a simple document with not much content</p>
COMP5347 Web Application Development
The University of Sydney Page 13
A more complete document
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
COMP5347 Web Application Development
The University of Sydney Page 14
DOCTYPE
– Tells the browser what type of document it is about to process
– It does not indicate the HTML version
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
COMP5347 Web Application Development
The University of Sydney Page 15
HTML, Head, and Body
– <html>, <head>, and <body> not required in HTML 5
– Required in XHTML most web authors continue to use them
– The <html> contains all other elements (the root element)
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
COMP5347 Web Application Development
The University of Sydney Page 16
Head and Body
– HTML pages are divided into: the head and the body
– The head contains descriptive elements about the document
– The body contains content to displayed by the browser
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
COMP5347 Web Application Development
The University of Sydney Page 17
Inside the head
– <meta> declares the character encoding for the document, e.g.,
UTF-8
– <link> specifies reference to external file (e.g., CSS stylesheet
that defines the visual look)
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
COMP5347 Web Application Development
The University of Sydney Page 18
Outline
– HTML
– Syntax
– Structure
– Quick Tour
– Semantic Markups
– CSS
– Syntax and Location
– Selector
– The box model
– Text Styling
COMP5347 Web Application Development
The University of Sydney Page 19
Sample Document
<body>
<h1>Share Your Travels</h1>
1
<h2>New York - Central Park</h2>
2 <p>Photo by Randy Connolly</p>
<p>This photo of Conservatory Pond in
<a href="http://www.centralpark.com/">Central Park</a> 3
New York City was taken on October 22, 2011 with a
<strong>Canon EOS 30D</strong> camera.
</p> 4
5 <img src="images/central-park.jpg" alt="Central Park" />
<h3>Reviews</h3>
6 <div> 7
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<div>
<p>By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
8
<p><small>Copyright © 2012 Share Your Travels</small></p>
</body> 9
COMP5347 Web Application Development
The University of Sydney Page 20
HTML Headings, Paragraphs and Division
• Six levels of headings (h1, h2, … h6)
• Used by the browser to create a
document outline for the page
• Tool support: HTML 5 Outliner
• Browser’s default styling (customize
by CSS)
• <p> (paragraph) container for text
and HTML elements
• <div> (division) container element
used for logical grouping of content
The University of Sydney Page 21
Links
• Created using the <a> element (anchor)
• Consists of: the destination and the label
<a href="http://www.centralpark.com">Central Park</a>
Destination Label (text)
<a href="index.html"><img src="logo.gif" /></a>
Label (image)
The University of Sydney Page 22
HTML Types of Links (1)
COMP5347 Web Application Development
The University of Sydney Page 23
HTML Types of Links (2)
COMP5347 Web Application Development
The University of Sydney Page 24
Types of Links
• Links to external sites (or to individual resources such as
images or movies on an external site)
• Links to other pages or resources within the current site
• Links to other places within the current page
• Links to a particular location on another page
• Links that are instructions to the browser to start the user’s
email program
• Links that are instructions to the browser to execute a
Javascript function
The University of Sydney Page 25
Images
• Different ways to specify images:
• Decorative images in CSS (not in the markup)
• Background gradients and patterns, logos, border art, etc.
• Content images using <img> tag
• Images in a gallery or the image of a product in a product details
pageh
Specifies the URL of the image to display Text in title attribute will be displayed in a popup
(note: uses standard relative referencing) tool tip when user moves mouse over image.
<img src="images/central-park.jpg" alt="Central Park" title="Central Park" width="80" height="40" />
Text in alt attribute provides a brief Specifies the width and height of
description of image’s content for users who image in pixels.
are unable to see it.
The University of Sydney Page 26
Lists
• Unordered lists <ul>
Collections of items in no certain order; by default rendered by
the browser as a bulleted list
• Ordered lists <ol>
Collections of items that have a set order; by default rendered by
the browser as a numbered list
• Description lists <dl>
Collection of name and definition pairs
The University of Sydney Page 27
Lists <ol>
<li>Introduction</li>
<li>Background</li>
Notice that the list item element <li>My Solution</li>
can contain other HTML <li>
elements <ol>
<li>Methodology</li>
<ul> <li>Results</li>
<li><a href="index.html">Home</a></li> <li>Discussion</li>
<li>About Us</li> </ol>
<li>Products</li> </li>
<li>Contact Us</li> <li>Conclusion</li>
</ul> </ol>
COMP5347 Web Application Development
The University of Sydney Page 28
HTML Elements – Special Characters
• No easy way to type them via a keyboard
• Have a reserved meaning in HTML (like“<“)
Entity Description
Nonbreakable space
< <
> >
© ©
™ ™
The University of Sydney Page 29
Outline
– HTML
– Syntax
– Structure
– Quick Tour
– Semantic Markups
– CSS
– Syntax and Location
– Selector
– The box model
– Text Styling
COMP5347 Web Application Development
The University of Sydney Page 31
Semantic markups
– The commonly agreed good practice
– HTML should only focus on the structure of a document
– CSS should specify how the content should be displayed in a browser
window
– HTML5 has introduced many new semantic tags
– <article>, <section>, <header>, <footer>, <aside>, etc to replace
tags like
• <div id=“header”>, <div id = “footer”>, etc
COMP5347 Web Application Development
The University of Sydney Page 32
XHTML versus HTML5
<body>
<div id="header"> <body>
1 <header>
<div id="logo-headings">
<header> 2 <hgroup>
1 <hgroup>
...
... 2
</div>
...
</hgroup>
<div id="top-navigation">
...
...
<nav>
</div>
...
</div>
3 <nav> </nav> 3
4 </header>
<div id="main">
<div id="main">
<div id="left-navigation">
<nav>
...
...
</div>
</nav>
<div class="content">
5 <section>
<div class="story">
<section> ...
5 <article>
</div>
6 <article> ... 6
</article>
<div class="story">
<article>
...
<figure>
<div class="story-photo">
<img ... class="blog-photo"/>
7 <img ... /> 7
<figcaption>...
<p classs="photo-caption">... <figure>
</figure>
</div>
8 <figcaption> ...
</div>
</article> 8
<div class="related-stuff-on-right">
<aside>
... 9 <aside> ... 9
</div>
</aside>
</div> </section>
<div class="content"> <section>
... ...
</div> </section>
</div> </div>
<div id="footer"> <footer>
10
... ...
10
<footer> </div> </footer>
</body> </body>
COMP5347 Web Application Development
The University of Sydney Page 33
Header and Footer
– Typically the header contains
• the site logo
• title (and perhaps additional subtitles or taglines)
• horizontal navigation links, and
• perhaps one or two horizontal banners.
– The typical footer contains less important material, e.g.,
• smaller text versions of the navigation,
• copyright notices,
• information about the site’s privacy policy, and
• perhaps twitter feeds or links to other social sites.
H1 deader debate: Gsnedders.html5.org/outliner
COMP5347 Web Application Development
The University of Sydney Page 34
Navigation
• The <nav> represents a section of a page that contains links to
other pages or to other parts within the same page
• The browser does not apply any special presentation to the
<nav>
• The <nav> was intended for major navigation blocks, presumably
the global and secondary navigation systems
<header>
<img src="logo.gif" alt="logo" />
<h1>Fundamentals of Web Development</h1>
<nav role="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
</nav>
</header>
The University of Sydney Page 35
Figure and Figure Captions
<p>This photo was taken on October 22, 2011 with a Canon EOS 30D camera.</p>
<figure>
<img src="images/central-park.jpg" alt="Central Park" /><br/>
Figure could be <figcaption>Conservatory Pond in Central Park</figcaption>
moved to a </figure>
different <p>
location in
It was a wonderfully beautiful autumn Sunday, with strong sunlight and
document
expressive clouds. I was very fortunate that my one day in New York was
…
blessed with such weather!
But it has to
</p>
exist in the
document
(i.e., the
figure isn’t
optional)
COMP5347 Web Application Development
The University of Sydney Page 36
Semantic HTML
HTML 5 Element Description / use
<main> contain the main unique content of the document. It provides a
semantic replacement for markup such as <div id="main"> or
<div id="main-content">
<section> for a much broader element
<article> for blocks of content that could potentially be read or consumed
independently of the other content on the page
<aside> for sidebars, pull quotes, groups of advertising images, or any
other grouping of nonessential elements
The University of Sydney Page 37
Semantic Markup – Benefits
– Maintainability
– Easy to update and change (structure only!)
– Performance/speed
– Faster to download and quicker to author
– Accessibility
– Sight disabilities experience the web using voice reading software
– Semantic web makes it easier to read
– Search Engine Optimization
– Provides semantic elements to tell web crawlers of the important content
COMP5347 Web Application Development
The University of Sydney Page 38
Outline
– HTML
– Syntax
– Structure
– Quick Tour
– Semantic Markups
– CSS
– Syntax and Location
– Selector
– The box model
– Text Styling
COMP5347 Web Application Development
The University of Sydney Page 39
Cascading Style Sheets (CSS)
– W3C standard for describing the presentation (or
appearance) of HTML elements
– With CSS, we can assign
• font properties, colors, sizes, borders, background images, even the
position of elements
COMP5347 Web Application Development
The University of Sydney Page 40
CSS – brief history
– CSS came not too long after the proposal of HTML
– The first recommendation CSS Level 1 (CSS1) in 1996
– The CSS Level 2 (CSS2) was published in 1998
– Updated version CSS2.1 became official W3C recommendation in 2011
– The current version is CSS3 with a variety of modules at different stages:
recommendation, draft and so on
– backwards-compatible with earlier versions of CSS.
– Browser support has long been an issue of CSS
– Not all browsers have all parts of the CSS2 recommendation
COMP5347 Web Application Development
The University of Sydney Page 41
CSS Syntax
– A CSS document consists of one or more style rules
– Each rule consists of a selector followed by list of declarations
(property-value pairs)
COMP5347 Web Application Development
The University of Sydney Page 42
CSS Syntax
• Every CSS rule begins with a selector
• The selector identifies which element/elements in the HTML document
will be affected by the declarations in the rule
• Each individual CSS declaration must contain a property
• The CSS2.1 recommendation defines over a hundred different
property names
• The unit of any given value is dependent upon the property.
• Some property values are from a predefined list of keywords.
Others are values such as length measurements, percentages,
numbers without units, color values, and URLs.
The University of Sydney Page 43
CSS Syntax
– Selector identifies the element(s) to be affected by the styles
– Selector can be based on name, class, id, attribute and more
– The property name predefined by CSS standard
– The property value are either predefined keywords (e.g., color
name) or other values (e.g., length measurement, percentage)
– The unit of any given value is dependent upon the property
COMP5347 Web Application Development
The University of Sydney Page 44
CSS Properties
Property Type Property
Fonts Font, font-family, font-size, font-style, font-weight, @font-face
Text letter-spacing, line-height, text-align, text-decoration, *text-
indent
Color and Background, background-color, background-image,
Background background-position, background-repeat, box-shadow, color,
Opacity
Borders border*, border-color, border-width, border-style, border-top,
border-left, ...*, border-image*, border-radius
COMP5347 Web Application Development
The University of Sydney Page 45
Units of Measurement
– Relative vs. Absolute measurements
– Relative units are based on the value of something else, (e.g., the size of a
parent element)
– Absolute units have real world size
COMP5347 Web Application Development
The University of Sydney Page 46
Relative Units
COMP5347 Web Application Development
The University of Sydney Page 47
CSS location – Inline
– Inline within an HTML element
<h1>Share Your Travels</h1>
<h2 style="font-size: 24pt">Description</h2>
...
<h2 style="font-size: 24pt; font-weight:bold;">
Reviews</h2>
– Not recommended practice
– Good for quick testing
COMP5347 Web Application Development
The University of Sydney Page 48
CSS location – Embedded Stylesheet
– Embedded stylesheet (internal) in a HTML document
<head>
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<style>
h1 { font-size: 24pt; }
h2 {
font-size: 18pt;
font-weight: bold;
}
</style>
</head>
<body>
...
– Better than inline but it’s not recommended
COMP5347 Web Application Development
The University of Sydney Page 49
CSS location – External
– External style placed in a separate file (.css extension) and are
linked to the HTML file
– <link href="style.css" rel="stylesheet">
<head>
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central
Park</title>
<link rel="stylesheet" href="styles.css" />
</head>
– Highly recommended for maintainability
COMP5347 Web Application Development
The University of Sydney Page 50
CSS location – External
– Browser has a default set of rules for pages/elements that do
not have a customized style
– Check CSS Default values reference for ddefault CSS values
for HTML elements
– In Chrome, check
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
COMP5347 Web Application Development
The University of Sydney Page 51
What is “Cascading”?
– Cascading is the principle to resolve conflicting style rules
– Cascade: style rule will continue to take precedence with child elements
– Inheritance
– Certain properties defined for the <body> element will be inherited by all elements
embedded in it
– Inheritable: font, color, list and text properties
– Not Inheritable: layout, sizing, border, background and spacing properties
– Specificity
– Style rules with more specific selector will override rules with more general selector
• E.g. If both <body> and <p> elements define a font rule, the text inside the <p>
element will use the font defined in the <p> element
– Location
– The latest (closest) rule wins If inheritance and specificity cannot determine style
precedence
• E.g. inline rule is closer to that element than the rules in an external file
COMP5347 Web Application Development
The University of Sydney Page 52
“Cascading” – Inheritance
COMP5347 Web Application Development
The University of Sydney Page 53
Outline
– HTML
– Syntax
– Structure
– Quick Tour
– Semantic Markups
– CSS
– Syntax and Location
– Selector
– The box model
– Text Styling
COMP5347 Web Application Development
The University of Sydney Page 56
Selectors
– A selector tells the browser which elements will be affected
– CSS selectors allow you to select
– individual elements
– multiple HTML elements,
– elements that belong together in some way, or
– elements that are positioned in specific ways in the document hierarchy.
COMP5347 Web Application Development
The University of Sydney Page 57
Element Selectors
Uses the HTML element name
You can select all elements by using the universal element
selector, the * (asterisk) character
declaration
selector { property: value; property2: value2; } rule
declaration block
selector
em { color: red; }
property value
p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
The University of Sydney Page 58
Grouped Selectors
The University of Sydney Page 59
Class Selectors
• Allows you to simultaneously target different HTML
elements regardless of their position in the document tree
• A series of HTML elements labeled with the same class
attribute value can be targeted for styling by using a class
selector
• How: period (.) followed by the class name
The University of Sydney Page 60
Class Selectors
<head>
<title>Share Your Travels </title>
<style>
.first {
font-style: italic;
color: brown; .first {
} font-style: italic;
</style> color: brown;
</head> }
<body>
<h1 class="first">Reviews</h1>
<div>
<p class="first">By Ricardo on <time>September 15,
2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>
<p class="first">By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>
COMP5347 Web Application Development
The University of Sydney Page 61
Id Selectors
Allows you to target a specific element by its id attribute
regardless of its type or position
If an HTML element has been labeled with an id attribute,
then you can target it for styling by using an id selector
How: pound/hash (#) followed by the id name.
The University of Sydney Page 62
Id vs. Class Selectors
• Referencing a single HTML element → id selector
• id attribute can only be assigned to a single HTML element
• (Potentially) referencing several related elements → class
selector
The University of Sydney Page 64
Pseudo Selectors
• Pseudo-element selector a way to select something that
does not exist explicitly as an element in the HTML
document tree, but is still a recognizable selectable object
• pseudo-class selector does apply to an HTML element,
but targets either a particular state or, in CSS3, a variety
of family relationships
• The most common use of this type of selectors is for
targeting link states
The University of Sydney Page 65
Pseudo Selectors
COMP5347 Web Application Development
The University of Sydney Page 66
Contextual Selectors
• It selects elements based on their context or their relation to other
elements in the document tree
• Ancestors, descendants, or siblings
• Called combinators in CSS3
The University of Sydney Page 67
Outline
– HTML
– Syntax
– Structure
– Quick Tour
– Semantic Markups
– CSS
– Syntax and Location
– Selector
– The box model
– Text Styling
COMP5347 Web Application Development
The University of Sydney Page 69
The Box Model
In CSS, all HTML elements exist within an element box.
The University of Sydney Page 70
The Box Model – Example
The University of Sydney Page 71
Background properties
The background color or image fills an element out to its border (if
it has one that is).
background-image: url(../images/backgrounds/body-background-tile.gif);
background-repeat: repeat;
background-repeat: no-repeat; background-repeat: repeat-y; background-repeat: repeat-x;
The University of Sydney Page 72
Margins and Padding
p {
border: solid 1pt red;
margin: 0;
padding: 0;
}
p {
border: solid 1pt red;
margin: 30px;
padding: 0;
}
p {
border: solid 1pt red;
margin: 30px;
padding: 30px;
}
The University of Sydney Page 73
Margins and padding properties
border-top-color: red; /* sets just the top side */
border-right-color: green; /* sets just the right side */
border-bottom-color: yellow; /* sets just the bottom side */
border-left-color: blue; /* sets just the left side */
Alternately, we can set all four sides at once:
border-color: red; /* sets all four sides to red */
border-color: red green orange blue; /* sets 4 colors */
The University of Sydney Page 74
Collapsing Margins
<div>
<p>Every CSS rule ...</p>
1 90px <p>Every CSS rule ...</p>
</div>
50px <div>
<p>In CSS, the adjoining ... </p>
50px 4 <p>In CSS, the adjoining ... </p>
</div>
50px
div {
2 90px border: dotted 1pt green;
padding: 0;
50px margin: 90px 20px;
}
50px 5
p {
50px border: solid 1pt red;
padding: 0;
3 90px margin: 50px 20px;
}
If overlapping margins did not collapse, then margin space for would be 180p (90pixels for the bottom
margin of the first <div> + 90 pixels for the top margin of the second <div>), while the margins and
for would be 100px.
COMP5347 Web Application Development
The University of Sydney Page 75
Collapsing Margins
When the vertical margins of two elements touch,
• the largest margin value of the elements will be displayed
• the smaller margin value will be collapsed to zero
Horizontal margins, on the other hand, never collapse
The University of Sydney Page 76
Outline
– HTML
– Syntax
– Structure
– Quick Tour
– Semantic Markups
– CSS
– Syntax and Location
– Selector
– The box model
– Text Styling
COMP5347 Web Application Development
The University of Sydney Page 77
Specifying the Font-Family
1 Use this font as
the first choice
If it isn’t available, then
3 use this one
p { font-family: Cambria, Georgia, "Times New Roman", serif; }
But if it is not available,
2 then use this one And if it is not available
4 either, then use the
default generic serif font
COMP5347 Web Application Development
The University of Sydney Page 78
Font sizes
– How do we specify font sizes?
– Typically in word document, we specify 10 points, 12 points
– Printer based, the size of point varied through history
– On screen-based media
– Pixel has been a relatively stable measure
– Device Pixel vs. CSS pixel
– Using relative measure gives better results on various devices
COMP5347 Web Application Development
The University of Sydney Page 79
How to use ems and percents
<body> Browser’s default text size is usually 16 pixels
<p> 100% or 1em is 16 pixels
<h3> 125% or 1.125em is 18 pixels
<h2>
150% or 1.5em is 24 pixels
<h1>
200% or 2em is 32 pixels
/* using 16px scale */ <body>
<p>this will be about 16 pixels</p>
body { font-size: 100%; } <h1>this will be about 32 pixels</h1>
h3 { font-size: 1.125em; } /* 1.25 x 16 = 18 */ <h2>this will be about 24 pixels</h2>
h2 { font-size: 1.5em; } /* 1.5 x 16 = 24 */ <h3>this will be about 18 pixels</h3>
h1 { font-size: 2em; } /* 2 x 16 = 32 */ <p>this will be about 16 pixels</p>
</body>
• Useful Tool: PX to EM Converter
COMP5347 Web Application Development
The University of Sydney Page 80
ems and percent’s complications – Question
<body>
<p>this is 16 pixels</p>
<h1>this is 32 pixels</h1>
<article> Percent and em units are relative to their
<h1>this is 32 pixels</h1>
<p>this is 16 pixels</p> parents, so if the parent font size changes,
<div>
<h1>this is 32 pixels</h1> this affects all of its contents.
<p>this is 16 pixels</p>
</div>
</article>
</body>
/* using 16px scale */
body { font-size: 100%; }
p { font-size: 1em; } /* 1 x 16 = 16px */
h1 { font-size: 2em; } /* 2 x 16 = 32px */
/* using 16px scale */
body { font-size: 100%; }
p { font-size: 1em; }
h1 { font-size: 2em; }
article { font-size: 75% } /* h1 = 2 * 16 * 0.75 = 24px
p = 1 * 16 * 0.75 = 12px */
div { font-size: 75% } /* h1 = 2 * 16 * 0.75 * 0.75 = 18px
p = 1 * 16 * 0.75 * 0.75 = 9px */
COMP5347 Web Application Development
The University of Sydney Page 81
The rem unit
CSS3 supports a new relative measure, the rem (for root em unit).
This unit is always relative to the size of the root element (i.e., the <html> element).
/* using 16px scale */
body { font-size: 100%; }
p {
font-size: 16px; /* for older browsers: won’t scale properly though */
font-size: 1rem; /* for new browsers: scales and simple too */
}
h1 { font-size: 2em; }
article { font-size: 75% } /* h1 = 2 * 16 * 0.75 = 24px
p = 1 * 16 = 16px */
div { font-size: 75% } /* h1 = 2 * 16 * 0.75 * 0.75 = 18px
p = 1 * 16 = 16px */
COMP5347 Web Application Development
The University of Sydney Page 83
Web Development Tools
WYSIWYG Editors
Code Editors
The University of Sydney Page 84
References
– Randy Connolly, Ricardo Hoar, Fundamentals of Web
Development, Global Edition, Pearson
– W3Schools, HTML Tutorial
[https://www.w3schools.com/html/default.asp]
– W3Schools, CSS tutorial
[https://www.w3schools.com/css/default.asp]
COMP5347 Web Application Development
The University of Sydney Page 85
W2 Tutorial: HTML and CSS
Week 3:
More HTML and JavaScript
Client-side Scripting
The University of Sydney Page 86
Potrebbero piacerti anche
- The Ultimate HTML & CSS Study GuideNessuna valutazione finoraThe Ultimate HTML & CSS Study Guide40 pagine
- Lezioni Di HTML: A Cura Del Prof. Gennaro CavazzaNessuna valutazione finoraLezioni Di HTML: A Cura Del Prof. Gennaro Cavazza62 pagine
- CSS: Guida Completa allo Sviluppo di Fogli di Stile per Web Design e la Creazione di Siti Internet. Contiene Esempi di Codice ed Esercizi PraticiDa EverandCSS: Guida Completa allo Sviluppo di Fogli di Stile per Web Design e la Creazione di Siti Internet. Contiene Esempi di Codice ed Esercizi PraticiNessuna valutazione finora
- HTML: Guida Completa allo Sviluppo Web e Web Design per Programmare Siti Web. Contiene Esempi di Codice ed Esercizi PraticiDa EverandHTML: Guida Completa allo Sviluppo Web e Web Design per Programmare Siti Web. Contiene Esempi di Codice ed Esercizi PraticiNessuna valutazione finora
- Programmare Per Il Web - Lato Client (2012)Nessuna valutazione finoraProgrammare Per Il Web - Lato Client (2012)334 pagine
- Progettare e Programmare Vol2 Cap8Nessuna valutazione finoraProgettare e Programmare Vol2 Cap835 pagine
- CSS: Guida Completa allo Sviluppo di Fogli di Stile per Web Design e la Creazione di Siti Internet. Contiene Esempi di Codice ed Esercizi PraticiDa EverandCSS: Guida Completa allo Sviluppo di Fogli di Stile per Web Design e la Creazione di Siti Internet. Contiene Esempi di Codice ed Esercizi Pratici
- HTML: Guida Completa allo Sviluppo Web e Web Design per Programmare Siti Web. Contiene Esempi di Codice ed Esercizi PraticiDa EverandHTML: Guida Completa allo Sviluppo Web e Web Design per Programmare Siti Web. Contiene Esempi di Codice ed Esercizi Pratici