HTML Slides

 HTMLdocuments are simply text
documents with a specific form

• Documents comprised of content and markup
tags
• Content: actual information being conveyed
• The markup tags tell the Web browser how to
display the page
• An HTML file must have an htm or html file
extension
• An HTML file can be created using a simple text
editor
2
91- 93- 95- 97- 99- 01- 03- 05- 07- 09- 11- 13-
92 94 96 98 00 02 04 06 08 10 12 14
HTML 1 HTML 2 HTML 4 XHTML HTML
1 5
CSS 1 CSS 2 T-less Web CSS3
D 2.0
JS ECMA, DOM 2 Ajax DOM,
DOM APIs
HTML 5 CSS
2004 WHATWG started 1996 – CSS 1 W3C Rec
2008 W3C Working Draft 1998 – CSS 2 W3C Rec
1999 – CSS 3 Proposed
2012 (2010) W3C Candidate Rec
2005 – CSS 2.1 W3C Candidate Rec
2022 W3C Rec

2001 – CSS 3 W3C Working Draft
 Web pages are text files containing HTML
 HTML – Hyper Text Markup Language
• A notation for describing
 document structure (semantic markup)
 formatting (presentation markup)
• Looks (looked?) like:
 A Microsoft Word document
 The
markup tags provide information
about the page content structure
4
 WWW use classical client / server
architecture
• HTTP is text-based request-response protocol
HTTP
Page request
HTTP
Server response
Server running
Client running a
Web Server
Web Browser
Software (IIS,
Apache, etc.) 5
 HTML Page
 Basic tags
 Lists
 Div and Span
 Frames
 Hyperlink
 Tables
 Forms
 Layout
 If you are running Windows, start Notepad
 If you are on a Mac, start SimpleText
 If you telnet to csupomona.edu, use “pico”
 Type in the following:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
 Open this file using a browser, and you will see…
7
 HTMLtags are used to mark-up HTML
elements
• Surrounded by angle brackets < and >
• HTML tags normally come in pairs, like
<tagname> (start tag) and </tagname> (end
tag)
• The text between the start and end tags is the
element content
• Not case-sensitive
• Follow the latest web standards:
 Use lowercase tags
8
 Tagscan have attributes that provide
additional information to an HTML element
• Attributes always come in name/value pairs like:
name=“value”
• Attributes are always specified in the start tag
• Attribute values should always be enclosed in
quotes. Double quotes are most common.
• Also case-insensitive: however, lowercase is
recommended
• <tagname a1=“v1” a2=“v2”></tagname>
• For example, <table border=“0”> is a start tag that
defines a table that has no borders
9
 Entiredocument enclosed within <html>
and </html> tags
 Two subparts:
• Head
 Enclosed within <head> and </head>
 Within the head, more tags can be used to specify
title of the page, meta-information, etc.
• Body
 Enclosed within <body> and </body>
 Within the body, content is to be displayed
 Other tags can be embedded in the body
10
Remember the DOCTYPE declaration from XHTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In HTML5, there is just one possible DOCTYPE declaration and it is simpler:
<!DOCTYPE html>
Just 15 characters!
The DOCTYPE tells the browser which type and version of document to
expect. This should be the last time the DOCTYPE is ever changed. From
now on, all future versions of HTML will use this same simplified declaration.
This is what the <html> element looked like in XHTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">
Again, HTML5 simplifies this line:
<html lang="en">
The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it
can assist search engines and screen readers.
Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
Here is a typical XHTML <head> section:
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
And the HTML5 version:
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
Notice the simplified character set declaration, the shorter CSS stylesheet link
text, and the removal of the trailing slashes for these two lines.
Putting the prior sections together, and now adding the <body> section and
closing tags, we have our first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>
Let's open this page in a web browser to see how it looks…

 Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
 Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
 Sections: div and span
<div style="background: skyblue;">

This is a div</div>
15
 Text
formatting tags modify the text
between the opening tag and the closing
tag
• Ex. <b>Hello</b> makes “Hello” bold
<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
<article> <figcaption> <progress>
<aside> <footer> <section>
<audio> <header> <source>
<canvas> <hgroup> <svg>
<datalist> <mark> <time>
<figure> <nav> <video>
 <html>
 <head>
 <title> CGS 2100 </title>
 </head>
 <body>
 <p> Here is the first paragraph. </p>
 <p> Here is the second paragraph. </p>
 </body>
 </html>
Ordered list: used to display information in a numeric
order. The syntax for creating an ordered list is:
<ol > e.g. <ol >
<li>item1 </li> <li> Name: Your name </li>
<li>item2 </li> <li> Section: ### </li>
… <li> Instructor: Yuping </li>
</ol> </ol>
 Result:
 Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
 Attribute values for type are 1, A, a, I, or i
<li>Grapefruit</li>
</ol>
1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
20
 Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
 Attribute values for type are:

• disc, circle or square
• Apple o Apple  Apple

• Orange o Orange  Orange
• Pear o Pear  Pear
21
 Create definition lists using <dl>
• Pairs of text and associated definition; text is in <dt>
tag, definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
• Renders without bullets
• Definition is indented
22
<ol type="1">
<li>Apple</li>
<li>Orange</li> lists.html
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>
23
Symbol Name HTML Entity Symbol
Copyright Sign © ©
Registered Trademark Sign ® ®
Trademark Sign ™ ™
Less Than < <
Greater Than > >
Ampersand & &
Non-breaking Space
Em Dash — —
Quotation Mark " "
Euro € €
British Pound £ £
Japanese Yen ¥ ¥
24
 Blockelements add a line break before
and after them
• <div> is a block element
• Other block elements are <table>, <hr>,
headings, lists, <p> and etc.
 Inline
elements don’t break the text
before and after them
• <span> is an inline element
• Most HTML elements are inline, e.g. <a>
25
 <div> creates logical divisions within a
page
 Block style element
 Used with CSS
 Example:
<div style="font-size:24px; color:red">DIV

example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
26
 Inlinestyle element
 Useful for modifying a specific portion of
text
• Don't create a separate area
(paragraph) in the document
 Very useful with CSS
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>
27
 Frames provide a way to show multiple
HTML documents in a single Web page
 The page can be split into separate views
(frames) horizontally and vertically
 Frames were popular in the early ages of
HTML development, but now their usage is
rejected
 Frames are not supported by all user agents
(browsers, search engines, etc.)
• A <noframes> element is used to provide content for
non-compatible agents.
28
frames.html
<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px">
<frame src="left.html" />
<frame src="middle.html" />
<frame src="right.html" />
</frameset>
</html>
 Note the target attribute applied to

the <a> elements in the left frame.
29
 Inline
frames provide a way to show one
website inside another website:
iframe-demo.html
<iframe name="iframeGoogle" width="600" height="400"
src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>
30
Link to a document called form.html on the
same server in the same directory:
<a href="form.html">Fill Our Form</a>
 Linkto a document called parent.html on

the same server in the parent directory:
<a href="../parent.html">Parent</a>
 Link
to a document called cat.html on the
same server in the subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
31
 Link to an external Web site:
<a href="http://www.devbg.org" target="_blank">BASD</a>
• Always use a full URL, including "http://", not

just "www.somesite.com"
• Using the target="_blank" attribute opens the
link in a new window
 Link to an e-mail address:
<a href="mailto:bugs@example.com?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
32
 Link to a document called apply-now.html
• On the same server, in same directory
• Using an image as a link button:
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>
 Link to a document called index.html

• On the same server, in the subdirectory
english of the parent directory:
<a href="../english/index.html">Switch to
English version</a>
33
<a href="#section1">Go to Introduction</a>
...
<h2 id="section1">Introduction</h2>
<a href="chapter3.html#section3.1.1">Go to Section

3.1.1</a>
<!–- In chapter3.html -->
...
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
34
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
35
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />
36
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...

<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...
37
 Inserting an image with <img> tag:
<img src="/img/basd-logo.png">
 Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
 Example:
<img src="./php.png" alt="PHP Logo" />
38
 <hr />: Draws a horizontal rule (line):
<hr size="5" width="70%" />
 <center></center>: Deprecated!
<center>Hello World!</center>
 <font></font>: Deprecated!
<font size="3" color="blue">Font3</font>

<font size="+4" color="blue">Font+4</font>
39
 Thefirst step to creating a table is to
specify the table structure:
• the number of rows and columns
• the location of column headings
• the placement of a table caption
 Once the table structure is in place, you
can start entering data into the table.
40
 Graphical tables are enclosed within a
two-sided <table> tag that identifies the
start and ending of the table structure.
 Each row of the table is indicated using a
two-sided <tr> (for table row).
 Within each table row, a two-sided <td>
(for table data) tag indicates the
presence of individual table cells.
41
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>
two rows
two columns
42
beginning of
the table
structure
table cells
You do not need to

indent the <td> tags
first row of six or place them on
in the table
separate lines, but
you may find it
easier to interpret
your code if you do
so.
After the table

structure is in place,
you’re ready to add
end of the the text for each
table structure cell.
43
 HTML provides the <th> tag for table
headings.
 Text formatted with the <th> tag is
centered within the cell and displayed in
a boldface font.
 The <th> tag is most often used for
column headings, but you can use it for
any cell that you want to contain centered
boldfaced text.
44
 Only Internet Explorer supports all caption values.
 Netscape supports only the “top” and “bottom”
values.
 The <caption> tag works only with tables, the tag
must be placed within the table structure.
 Captions are shown as normal text without special
formatting.
 Captions can be formatted by embedding the caption
text within other HTML tags.
• for example, place the caption text within a pair of <b>
and <i> tags causes the caption to display as bold and
italic
45
 Youcan modify the appearance of a table
by adding:
• gridlines
• borders
• background color
 HTML also provides tags and attributes to
control the placement and size of a table.
46
 By default, browsers display tables without
table borders.
 A table border can be added using the
border attribute to the <table> tag.
 The syntax for creating a table border is:
<table border=“value”>
• value is the width of the border in pixels
 Thesize attribute is optional; if you don’t
specify a size, the browser creates a table
border 1 pixel wide.
47
 The cellspacing attribute controls the
amount of space inserted between table
cells.
 The syntax for specifying the cell space is:
<table cellspacing=“value”>
• value is the width of the interior borders in pixels

• the default cell spacing is 2 pixels
 Cellspacing refers to the space between

the cells.
48
 To control the space between the table text
and the cell borders, add the cellpadding
attribute to the table tag.
 The syntax for this attribute is:
<table cellpadding=“value”>
• value is the distance from the table text to the cell
border, as measured in pixels
• the default cell padding value is 1 pixel
 Cellpadding refers to the space within the

cells.
49
 The syntax for specifying the table size is:
<table width=“size” height=“size”>
• size is the width and height of the table as measured in pixels
or as a percentage of the display area
 To create a table whose height is equal to the entire height
of the display area, enter the attribute height=“100%”.
 If you specify an absolute size for a table in pixels, its size
remains constant, regardless of the browser or monitor
settings used.
 Remember that some monitors display Web pages at a
resolution of 640 by 480 pixels.
50
 To set the width of an individual cell, add the width
attribute to either the <td> or <th> tags.
 The syntax is: width=“value”
• value can be expressed in pixels or as a percentage of the
table width
• width value of 30% displays a cell that is 30% of the total
width of table.
 The height attribute can also be used in the <td> or
<th> tags to set the height of individual cells.
• The height attribute is expressed either in pixels or as a
percentage of the height of the table.
• If you include more text than can be displayed within that
height value you specify, the cell expands to display the
additional text.
51
 By default, a browser places a table on the left margin
of a Web page, with surrounding text placed above and
below the table.
 To align a table with the surrounding text, use the align
attribute as follows: align=“alignment”
• alignment equals “left”, “right”, or “center”
• left or right alignment places the table on the margin of the
Web page and wraps surrounding text to the side
• center alignment places the table in the horizontal center of the
page, but does not allow text to wrap around it
 The align attribute is similar to the align attribute used with
the <img> tag.
52
 To merge several cells into one, you need
to create a spanning cell.
 A spanning cell is a cell that occupies
more than one row or column in a table.
 Spanning cells are created by inserting
the rowspan and colspan attribute in a
<td> or <th> tag.
 The syntax for these attributes is:
rowspan=“value” colspan=“value”
• value is the number of rows or columns that the
cell spans in the table
53
This cell
spans two this cell
columns spans
and two three
rows columns
This cell
spans three
rows
54
 Table elements support the bgcolor attribute.
 To specify a background color for all of the cells in a table,
all of the cells in a row, or for individual cells, by adding the
bgcolor attribute to either the <table>, <tr>, <td>, or
<th> tags as follows:
<table bgcolor=“color”>
<tr bgcolor=“color”>
<td bgcolor=“color”>
<th bgcolor=“color”>
• color is either a color name or hexadecimal color value
55
 By default, table borders are displayed in two shades
of gray that create a three-dimensional effect.
 The syntax for the bordercolor attribute is:
<table bordercolor=“color”>
• color is an HTML color name or hexadecimal color value
 Internet Explorer and Netscape apply this attribute
differently.
<table border=“10” bordercolor=“blue”>
Internet Explorer Netscape

56
620 pixels
1) newspaper logo
120 pixels 500 pixels

2) list of 3) articles
links
a sample table
layout of a Web
page.
4) address and phone number
57
 <form> is just another kind of XHTML/HTML tag
 Forms are used to create (rather primitive) GUIs on Web
pages
• Usually the purpose is to ask the user for information
• The information is then sent back to the server
 A form is an area that can contain form elements
• The syntax is: <form parameters> ...form elements... </form>
• Form elements include: buttons, checkboxes, text fields, radio
buttons, drop-down menus, etc
 Other kinds of tags can be mixed in with the form elements
• A form usually contains a Submit button to send the information in
he form elements to the server
• The form’s parameters tell JavaScript how to send the information
to the server (there are two different ways it could be sent)
• Forms can be used for other things, such as a GUI for simple
programs
58
 The JavaScript language can be used to make pages
that “do something”
• You can use JavaScript to write complete programs, but...
• Usually you just use snippets of JavaScript here and there
throughout your Web page
• JavaScript code snippets can be attached to various form
elements
 For example, you might want to check that a zipcode field contains a
5-digit integer before you send that information to the server
 Microsoft calls its version of JavaScript “active
scripting”
 Forms can be used without JavaScript, and JavaScript
can be used without forms, but they work well together
 JavaScript for forms is covered in a separate lecture
59
 The <form arguments> ... </form> tag encloses form
elements (and probably other elements as well)
 The arguments to form tell what to do with the user
input
• action="url" (required)
 Specifies where to send the data when the Submit button is
clicked
• method="get" (default)
 Form data is sent as a URL with ?form_data info appended to the
end
 Can be used only if data is all ASCII and not more than 100
characters
• method="post"
 Form data is sent in the body of the URL request
 Cannot be bookmarked by most browsers
• target="target"
 Tells where to open the page sent as a result of the request
 target= _blank means open in a new window
 target= _top means use the same window
60
 Most, but not all, form elements use the input tag, with a
type="..." argument to tell which kind of element it is
• type can be text, checkbox, radio, password, hidden, submit,
reset, button, file, or image
 Other common input tag arguments include:
• name: the name of the element
• id: a unique identifier for the element
• value: the “value” of the element; used in different ways for
different values of type
• readonly: the value cannot be changed
• disabled: the user can’t do anything with this element
• Other arguments are defined for the input tag but have
meaning only for certain values of type
61
A text field:
<input type="text" name="textfield" value="with an initial value" />
A multi-line text field

<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret" />
• Note that two of these use the input tag, but one uses textarea
62
 A submit button:
<input type="submit" name="Submit" value="Submit" />
 A reset button:
<input type="reset" name="Submit2" value="Reset" />
 A plain button:
<input type="button" name="Submit3" value="Push Me" />
 submit: send data

 reset: restore all form elements to their
initial state
 button: take some action as specified
by JavaScript
• Note that the type is input, not “button”
63
Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1" />
male<br>
<input type="radio" name="radiobutton" value="myValue2”
checked="checked" />female
 If two or more radio buttons have the same name, the user
can only select one of them at a time
• This is how you make a radio button “group”
 If you ask for the value of that name, you will get the value
specified for the selected radio button
 As with checkboxes, radio buttons do not contain any text
64
 In many cases, the labels for controls are not part of the
control
• <input type="radio" name="gender" value="m" />male
• In this case, clicking on the word “male” has no effect
 A label tag will bind the text to the control
• <label><input type="radio" name="gender" value="m" />male</label>
• Clicking on the word “male” now clicks the radio button
 w3schools says that you should use the for attribute:
• <label for="lname">Last Name:</label>
<input type="text" name="lastname" id="lname" />
• In my testing (Firefox and Opera), this isn’t necessary, but it may
be for some browsers
 Labels also help page readers read the page correctly
 Some browsers may render labels differently
65
 A checkbox:
<input type="checkbox" name="checkbox"
value="checkbox" checked="checked">
 type: "checkbox"
 name: used to reference this form element from
JavaScript
 value: value to be returned when element is checked
 Note that there is no text associated with the
checkbox
• Unless you use a label tag, only clicking on the box itself has
any effect
66
 A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
 Additional arguments:
• size: the number of items visible in the list (default is "1")
• multiple
 if set to "true" (or just about anything else), any number of items may be
selected
 if omitted, only one item may be selected
 if set to "false", behavior depends on the particular browser
67
 <input type="hidden" name="hiddenField" value="nyah">
<-- right there, don't you see it?
 What good is this?

• All input fields are sent back to the server, including hidden fields
• This is a way to include information that the user doesn’t need to
see (or that you don’t want her to see)
• The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted
68
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<label><input type="radio" name="gender" value="m" />Male<label>
<label><input type="radio" name="gender" value="f" />Female</label>
</p>
</form>
</body>
</html>
69
 Placeholder text
 Specific text input: email, URL, number,
search
 Slider
 Date picker
 User Agent validation
Header Figure
Navigation
Section
Article
Footer
Image, Video, Quote, Table,
Article etc…
Asid
Footer
e
Article
Footer
Legend
Footer
 Makes website more flexible
• CSS is reusable
• Change stylesheet to change design of many pages
• Example: CSS Zen garden http://www.csszengarden.com/
 Easier to maintain
• Cleaner HTML code
• Separates styles from HTML tags and page content
• Consistent look across entire website that is easily
maintained by changing styles in one place.
Not uniformly supported by all
browsers.
Firefox adheres to CSS standards
more than IE
• For this course we use Firefox
 CSS allows you to add “style” to an HTML (web page)
element
• E.g., color, size, or positioning information
 There are two aspects to adding style to a web page
via CSS
• Specifying what the style looks like
 Called the CSS style “Declaration”
• Naming the HTML (or XML) element to which the style applies
 Referred to as specifying the CSS “Selector”
 The “declaration” part looks a bit like HTML:
{
font-size: 10px;
background-color: #fff; A CSS declaration
color: #222;
margin: 20px;
}
 The above CSS declaration takes an HTML
element and adds a background color, a margin,
and changes the element’s font size/color
 A question: how does the browser know which
HTML element on the webpage this declaration
applies to?
{
font-size: 10px;
background-color: #fff;
color: #222;
margin: 20px;
}
 Answer: we precede the declaration with the
selector.
 For example:
body {
font-size: 10px;
color: #222; }
…this tells the browser to apply the declared style

to the HTML <body> element.
 “Simple” type selectors
Ex.: body{}, p{}, strong{}
• Selects every instance of the corresponding
HTML element
• These simple selectors are commonly used
 Wildcard selector
* { }
• Selects all elements on a page
• Can be used in combination with other selectors
 You can apply the same declaration to a
group of selectors by listing all of the desired
selector names separated by commas.
 Example:
h1, h2, h3, h4, h5, h6 {color:#ff0000;
font-family:sans-serif}
 The usefulness of selectors relates to how much
specificity you have in selecting different parts
of a web page.
 Simple example: your personal webpage
• You may not want the same font/color type style
throughout the entire <body> element
 You could use the declaration with the selector
just for the HTML <p> tag
p{
font-size: 10px;
color: #222; }
…this tells the browser to apply the declared
style to HTML <p> tags.
But, what if you want <p> blocks in the About
Me section to look one way, and those within
your Education section to be styled
differently?
 There are two naming options for an HTML
element: assigning “ID” names and “class
names.”
 When you give an HTML element a class or id
name, you need to use that name when making
the corresponding style declaration
• These two options are very similar, and the “class name”
approach is more popular, so we focus on that.
 Aside: An id declaration is the same as a class
declaration, except that it should only be used
specifically once per web page
• The syntax for id vs. class is also nearly identical, the only
difference being the use of a pound sign (#) instead of the
period (.) you will see in a couple slides.
 The following HTML block gives the “class name”
bigblue to the following specific <h1> tag in this
(very) simple webpage.
<html>
<body>
<h1 class=”myboldandbluelook”> Introduction </h1>
</body>
<html>
 To connect a style declaration to a particular class
name you wrote into your HTML document, you
simply precede the class declaration with:
.theclassname
• Example
.myboldandbluelook
Aside: if you want this style to be
{ used only once in the web page, then
font-weight: bold; specify it as an ID style with this
color: blue; slight syntax change:
} #myboldandbluelook
{
font-weight: bold;
color: blue;
}
 Descendant (nested) selector
ul li a strong{color:green;}
• Syntax is similar to the example of grouping
selectors—but without the commas
 Selects all elements that correspond to the
“nested” structure specified by the selector
• E.g., the above style will apply to any <strong> HTML tag
that lies within an <a> tag that lies within an <li> tag that
lies within a <ul> tag
 Very (!!!) specific—nice!
You can style links to respond dynamically.
The associated style selectors are called the hyperlink (or “anchor”)
pseudo-class selectors:
:link, :visited, :hover, :active { }

Example:
a:link {color:#FF0000;} /* color to apply to link before it’s visited */
a:visited {color:#00FF00;} /* color to apply to link before it’s visited*/
a:hover {color:#FF00FF;} /* color to apply to link while mouse pointer is over it*/
a:active {color:#0000FF;} /* color to apply while left mouse button is held down on link */
 Note: a:hover MUST be listed after a:link and a:visited !

 Note: a:active MUST be listed after a:hover !
 Cascading means a more-specific selector beats out
a less-specific selector.
 For example, with styles... Both the body and
.red selectors
.red { color: red; } pertain, but the .red
body { color: black; } selector overrules
because it is more
What will this HTML look like? specific
<body>
<p>I am black</p>
<p class="red">I am red</p>
</body>
Related point: if both ID (#) and class (.) styles to the same HTML
element, the ID style “wins” because ID styles are supposed to be
used just once per web-page (thus, in some sense, quite
specifically)
 What if there is a “tie” regarding how
specific the selectors are?
p{font-weight:bold;}
p{font-weight:normal;}
p{color:green;}
<p>This will be green text with a
normal font weight</p>
 When there is a tie, the tied selector that is most
immediately preceding the HTML element wins
(in this case, the second “p” selector)
• In other words, in a tie, the last-defined selector
wins
 Two good approaches for named (class or id)
styles:
• Internal stylesheet
 Put the style declarations in the <head> of HTML text file
• External stylesheet
 Put the style declarations in a separate text file and then
import that text file into your HTML file
 Third approach when you don’t want to bother
naming/reusing a style:
• Inline style
 Simply put the style declaration within the HTML tag
where it’s used
• Example
<p style=“font-size: 14px;”>Text</p>
• Note: instead of using an inline (i.e., embedded
in HTML) style, we could use our HTML tags
<p> <font size=“14px”>Text</font> </p>
<head>
<style type=“text/css”>
CSS Code Here
</style>
</head>
 You create a separate style document (example:
style.css).
 Insert it into your html head tag
<head>
<link rel=“stylesheet” href=http://yoursite.com/style.css
type=“text/css”>
</head>
 Aside: the above “link” tag works for Importing a stylesheet,
and there is also an equivalent “<@import>” tag
 Inline – apply style attribute to a single tag
• Takes a lot of work to maintain across a
website
 Internal, (“embedded,” “global”)
• stylesheet defined in the <head> tag of a
page
 External style sheet (a .css text file)
• same functionality as Internal
 Nice description for beginners:
• http://www.cssbasics.com/introduction-to-css/
 Nice tutorial for beginners:

• http://www.w3.org/Style/Examples/011/firstcss
Responsive Web
Design…
Means that a web site
works optimally well for In 2012, PC sales were lower
users regardless of the than the previous year,
device they are using. something that hasn’t
happened since 2001. Why?
Tablets. Phones.
The core of RWD is a
media query, a request for
the resolution of the users’
viewport.
http://mashable.com/2012/12/11/respons
ve-web-design/
Think of a viewport as the virtual canvas on which your
CSS will render. With different devices, screens can be
as small as 2” or as large as 48”…and their resolution
may vary too.
But those are screens. A viewport is under your
control. It lets you set pixel values in “CSS pixels”
regardless of the device pixels. At 100% zoom, device
pixels = CSS pixels. No big deal. As users zoom in
with a gesture on a mobile device, less CSS pixels fit
in the viewport, but the layout does not reflow.
<link rel="stylesheet" media="screen and
(min-width:320px) and (max-width:480px)"
href="css/mobile.css" />
The standard:
http://www.w3.org/TR/css3-mediaqueries/
Where would a rule like this come in handy?
@media screen{
Body{background: #ff0000;}
}
@media print {
Body{background: #fff;}
}
#logo { background: url(images/logo.png); width:
600px; border: 1px #ccc solid; }
@media only screen and (max-device-width:
480px) {
#logo { background:
url(images/logo_mobile.png); width: 440px; }
}
Adjust logo for small
viewport
Resize the screen to see it working:
http://www.htmlgoodies.com/imagesvr_ce/3028/mq_demo.html
• There are many sites for testing
responsive designs. I like this one:
http://www.responsinator.com/
 Why do I need to know about media calls
if I can just use a responsive theme in a
CMS?
 Have a look:
http://responsinator.com/?url=billhd.co
m
 If I don’t know how to change them, I’m
stuck with the “responses” I am given by
the theme designer…
 Based on the theme a color palette can
be selected.
 Choosing good colors are important for
web design.
 The color themes can be natural,
technical, sports, food etc.
 Tools for choosing color palettes are
colorpicker.com, paletton.com,
colorsafe.com.
 Nature- 191919,DFE2DB,FFF056,FFFFFF
 Tech-C63D0F,3B3738,FDF3E1,7E8F76
 Game-005A31,A8CD1B,CBE32D,F3FAB6
 Events-558C89,74AFAD,D9853B,ECECEA
 Fonts-Myriad Pro, Ubuntu, League Gothic, Futura, PT

Serif
Header Figure
Navigation
Section
Article
Footer
Image, Video, Quote, Table,
Article etc…
Asid
Footer
e
Article
Footer
Legend
Footer

HTML Slides

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Slides

Cargado por

Copyright:

Formatos disponibles

 HTMLdocuments are simply text

documents with a specific form

2022 W3C Rec

 Open this file using a browser, and you will see…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

Again, HTML5 simplifies this line:

And the HTML5 version:

Let's open this page in a web browser to see how it looks…

<div style="background: skyblue;">

 Attribute values for type are:

• Apple o Apple  Apple

<div style="font-size:24px; color:red">DIV

 Note the target attribute applied to

 Linkto a document called parent.html on

• Always use a full URL, including "http://", not

 Link to a document called index.html

<a href="chapter3.html#section3.1.1">Go to Section

<font size="3" color="blue">Font3</font>

You do not need to

After the table

• value is the width of the interior borders in pixels

 Cellspacing refers to the space between

 Cellpadding refers to the space within the

Internet Explorer Netscape

120 pixels 500 pixels

4) address and phone number

A multi-line text field

 submit: send data

• Note that the type is input, not “button”

 What good is this?

…this tells the browser to apply the declared style

:link, :visited, :hover, :active { }

 Note: a:hover MUST be listed after a:link and a:visited !

 Nice tutorial for beginners:

 Fonts-Myriad Pro, Ubuntu, League Gothic, Futura, PT

También podría gustarte