Web 1 html5 - NOVA Student Web
advertisement
Web Design Intro
Instructor: William Pegram
bill@billpegram.com
revised 1/29/2016
Your login: directory\Your NovaConnect ID
Password (default is your birthday): mmddyy
Copy whole CD to your flash drive or desktop
NVCC IT HelpDesk: 703 426-4141 (can reset
your password)
Class Schedule
1.
2.
3.
4.
Basic page creation, validation,
uploading
Format with styles, lists, use color
Links, Images, Video
Tables, Testing, Your Projects
2
Get the most from class
Software discounts @ NVCC Bookstore,
IT section
Practice at home
Study great sites
Design: how sites look
Navigation: how users find things
3
Under the Hood of
a Web Page
DTD – describes the markup language syntax
HTML element– contains the web page document
Head element – contains the head section
The head section contains information that describes the
web page document
Title element– Text displays in title bar of window
Meta element – describes the character encoding
Body element – contains the body section
The body section contains the text and elements that
display in the browser viewport.
4
Your First HTML5 Web Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-80">
</head>
<body>
... body text and more HTML tags go here ...
</body>
</html>
5
The Paragraph Element
<p> tag
Paragraph element
<p> …paragraph goes here… </p>
Groups sentences and sections of text
together.
Produces empty space above and below the
paragraph
6
The Heading Element
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
7
The Line Break Element
<br> tag
Line Break element
This is a stand-alone tag or one-sided tag,
called a void element in HTML5
…text goes here <br>
This starts on a new line….
Causes the next element or text to display on
a new line
8
The Horizontal Rule Element
<hr> tag
Horizontal Rule element
Also a void element
<hr>
Configures a horizontal line on the page
In HTML5, it should be used to indicate a
thematic break at the paragraph level
(this is a new meaning to a tag that
existed in previous versions of HTML)
9
The Blockquote Element
<blockquote>
Blockquote element
Indents a block of text for special emphasis
Semantically correct use is to use it only when
displaying large blocks of quoted text within a
web page
<blockquote>
…text goes here…
</blockquote>
10
Phrase Elements
Indicate the context and meaning of the text
Display inline with the text
Common Phrase Elements
<b></b>
Text is displayed in bold font, but doesn’t have greater
importance than rest of text
<strong></strong>
Text has strong importance and is displayed in bold
<i></i>
Text is displayed in italic font
<em></em>
Text has emphasis (i.e. text would have a different inflection if
read out loud) and is displayed in italic font
11
Proper Nesting – close out tags
in the reverse order of how you
open them
<p><i>Call for a free quote for your web development needs:
<strong>888.555.5555 </strong></i></p>
BROWSER DISPLAY:
Call for a free quote for your web
development needs: 888.555.5555
12
HTML List Basics
Unordered List
Ordered List
Description List (XHTML Definition List)
13
Unordered List
Displays information with bullet points
Unordered List Element
<ul>
Contains the unordered list
The type attribute, which was used to describe what sort of
bullet would appear, is not supported in HTML5; use the
CSS list-style property instead
List Item Element
<li>
Contains an item in the list
14
Unordered List Example
<h1>My Favorite Colors</h1>
<ul>
<li>Blue</li>
<li>Teal</li>
<li>Red</li>
</ul>
15
Ordered List
Conveys information in an ordered fashion
Ordered List Element
<ol>
Contains the ordered list
The type attribute determines numbering scheme of list
default is numerals
List Item Element
<li>
Contains an item in the list
16
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
17
Description
List- not often used
Formerly called a definition list in XHTML and HTML 4.0
Uses:
Display a list of terms and descriptions
Display a list of FAQ and answers
The Description List element
<dl> tag
Contains the definition list
The dt Element
<dt> tag
Contains a term or name
The dd Element
<dd> tag
Contains a definition or description
Indents the text
18
Description List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
19
Special Entity Characters
Display special characters such as quotes,
copyright symbol, etc. - use because item isn't
on keyboard or because character is part of
HTML
Character
©
<
>
&
Code
&copy;
&lt;
&gt;
&amp;
&nbsp;
20
The div element
<div>
Purpose:
Configure a specially formatted division or area of
a web page
Block display with empty space above and
below the div
Can contain other block display and inline
display elements
21
HTML5 Structural Elements
Header Element
<header></header>
Contains the web page
document’s headings
Nav Element
<nav></nav>
Contains web page
document’s main navigation
Footer Element
<footer></footer>
Contains the web page
document’s footer
22
HTML5 Structural
Elements
Example:
<body>
<header> document headings go here </header>
<nav> main navigation goes here </nav>
<div> main content goes here </div>
<footer> document footer information goes here </footer>
</body>
23
Writing Valid HTML
Check your code for syntax errors
Benefit:
W3C HTML Validation Tool
Valid code
more consistent browser display
http://validator.w3.org
Additional HTML5 Validation Tool
http://html5.validator.nu
24
Reminders
Filenames and foldernames should not have
spaces in them, and such names will be casesensitive on some servers
All the content of the webpage should go
between the <body> and </body>
Things in between <head> and </head>
<title> - required for validation
<style> - embedded stylesheet (if present)
<link> - for external stylesheets (if present)
<meta> - meta tags
<script> - JavaScript (if present; can also be in
body)
25
Your NVCC Web Site
http://www.student.nvcc.edu/home/lanID
You can lookup your lanID at
https://www.nvcc.edu/stu_id/search.htm
hostname: www.student.nvcc.edu
username: nvstu\lanid
password: birthday in mmddyyyy format
IT Help Desk 703-426-4141 can reset
password
26
Day 1 Review
HTML 4.01,XHTML, HTML5, <!doctype>
<html>,<head>, <body>
<title>, <p>, <br>, <h1> … <h6>
Validation at http://validator.w3.org
HTML comments, HTML editors (e.g.
Dreamweaver)
27
Day 2 Review
Cascading style sheets (CSS)
Inline <h1 style="color:red">
Embedded, e.g.
<head>
<style>
h1{ color:red; }
.highlight {color: yellow; }
</style>
</head>
<body>
<h1>Today’s topics</h1>
<p class=“topper”>
<p><span class=“topper”>
28
Day 2 Review (cont.)
External style sheets – styles put in a
file with extension .css, e.g. style.css
html files reference this with the
following in the head section of the
document
<link rel="stylesheet" href="style.css">
<div> and <span> tags can be used to
apply styles where there is no html tag
present
29
Day 2 Review (cont.)
Physical (e.g. <b>) and logical (e.g.
<strong>) tags
Deprecated or obsolete tags and
attributes
Unordered, ordered, and definition lists
<hr>, <blockquote>, special
characters, e.g. &nbsp;
30
Day 2 Review (cont.)
Color – names ("blue"), hexadecimal
(#0000FF), RGB(0,0,255), RGB(0%,
0%, 100%)
CSS properties: color, backgroundcolor, text-align, font-family
31
The anchor element
The Anchor Element
<a>
Inline display element
Specifies a hyperlink reference (href) to a file
Text between the <a> and </a> is displayed on the web
page.
<a href="contact.html">Contact Us</a>
•
href Attribute
Indicates the file name or URL
Web page document, photo, pdf, etc. (thus one can link to lots of
things, not just other web pages)
32
Absolute link
More on Hyperlinks
Link to other websites
<a href="http://yahoo.com">Yahoo</a>
Relative link
Preferred way to link to pages on your own
site
Path specified is relative to the current page
<a href="index.html">Home</a>
33
Opening a Link
in a New Browser Window
The target attribute on the anchor element opens a
link in a new browser window or new browser tab.
<a href="http://yahoo.com" target="_blank">Yahoo!</a>
Often used when one links to other websites, rarely used when
linking within one's own site
34
Day 3 - Ways of Referencing
Other Files
Absolute using http:// -- must use for
files on other websites
Relative – location is specified relative
to the location of the reference file
Using / – specifies the path from the
top level (root) of the site
35
Relative references (p. 48)
links in the same folder need no path
filename
links up one directory are listed as
../filename
Can be repeated multiple times
../../ for up two levels, etc.
sub-directories are listed without any
preceding slashes
weekly/filename
36
Use of leading / in reference
/ means start at the top level of the site
Disadvantages of /
can't be tested without a server
The root of the site can depend on host, so the
site becomes less portable than if the reference
were relative
37
Linking within a page (p.52)
Give an element a named id and then
link to that id
<h1 id="top">
<a href="#top">Return to top</a>
Older versions of html used the name
attribute for this purpose, e.g.
<h1 name="top">
<a href="#top">Return to top</a>
38
Email Hyperlinks
Automatically launch the default mail
program configured for the browser
If no browser default is configured,
a dialog box is displayed asking whether
you want to configure the email
<a href="mailto:me@hotmail.com">me@hotmail.com</a>
39
Resizing Images
For both web and print work, when
working with images that you don’t
create yourself in a graphics program,
by far the most common action is
resizing images
When resizing for the web, you
normally want to use 72 pixels per inch;
for print, at least 300 pixels per inch
40
Exporting from Image Created in
Graphics Program to the Web
Graphics program will provide a choice of gif and jpg
format and allow you to compare the appearance and file
size of the two alternatives
General rule: jpg for photographs, gif for everything else,
When you do the export, you can also choose the quality
Tradeoff between perceived quality and image file size
within each format
Jpg – quality setting between 1-100 (100 largest file size,
best quality)
Gif – number of colors (256, 128, 64, 32, 16, 8, 4, 2);
Fireworks uses a default setting of 80 for quality; higher values
often don't noticeably improve quality but considerably
increase file size
41
GIF Image Format
gif
Limited to 256 colors
Supports transparency
Supports animation (animated gif)
"Lossless" compression – but if original has
more than 256 colors, going to 256 colors
loses information
Compression algorithm takes advantage of
areas of constant color
42
JPG Format
Any jpg can have over 17 million colors (256
possibilities in Red x 256 possibilities in Green x
256 possibilities in Blue)
No transparency, no animation
Better format for photographs than gif because
of lots of colors in photographs
Compression algorithm is lossy (one loses
information) so if one is making a series of
changes in a jpg, best to make all changes
before saving rather than saving as one goes
along
43
Exercise: Resizing an Image in
Fireworks and Paint
http://www.billpegram.com/camerapict
ures/P1010003.JPG
44
Inline images in web page
<img src="cat.gif" height="100"
width="150" alt="black cat">
http://www.billpegram.com/WWWDesig
n/align.html discusses alignment issues,
p. 58 of text
45
Accessibility & Images
Required:
Configure the alt attribute
Alternate text content to convey the meaning/intent of the
image
If the image contains a text message, then the text should
typically be the value of the alt attribute
NOT the file name of the image
Use alt="" for purely decorative images
Recommended:
If your site navigation uses image links for the main navigation,
provide simple text links at the bottom of the page.
46
Image Links
To create an image link use an anchor element to
contain an image element
<a href="index.html"><img src="home.gif"
height="19" width="85" alt="Home"></a>
Home
Browsers used to automatically add a border to
image links, but current versions don't
Can use CSS to eliminate the border if worried
about older browsers
img {border-style: none; }
47
Thumbnail Image
A small image linked to a larger version of that
image.
<a href="big.jpg"><img src="small.jpg" alt="country
road" width="200" height="100"></a>
48
Background images
body {background-image:url(cat.jpg);
background-repeat: repeat-y;}
possible values for background-repeat are
repeat (the default), repeat-y, repeat-x,
no-repeat
Background images are often small in one
dimension and tiled in that dimension,
e.g. going the width of the page but few
49
pixels high, and then tiling vertically
CSS background-image Property
Configures a background-image
By default, background images tile (repeat)
body { background-image: url(background1.gif); }
50
CSS background-repeat Property
51
Tiling of Background Images
http://www.billpegram.com/WWWDesig
n/backgroundimagecssbodytag.html
http://www.billpegram.com/WWWDesig
n/backgroundimagepatterncss.html
Both examples use a margin-left CSS
property to keep the text off of the
colored background
52
<table border="1">
<caption>Birthday List</caption>
<tr>
<td>Name</td>
<td>Birthday</td>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
<tr>
<td>Sparky</td>
<td>11/28</td>
</tr>
</table>
HTML
Table Example
Birthday List
53
<table border="1">
<tr>
<th>Name</th>
<th>Birthday</th>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
<tr>
<td>Sparky</td>
<td>11/28</td>
</tr>
</table>
HTML
Table Example 2
Using the <th> Element
54
HTML border Attribute
Indicates the table is specifically not
used for page layout
Optional
border="1"
Visible border
border=""
No visible browser,
which is the browser default.
55
HTML
colspan Attribute
<table border="1">
<tr>
<td colspan="2">
Birthday List</td>
</tr>
<tr>
<td>James</td>
<td>11/08</td>
</tr>
<tr>
<td>Karen</td>
<td>4/17</td>
</tr>
</table>
56
HTML
rowspan
Attribute
<table border="1">
<tr>
<td rowspan="2">This spans two rows</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 2</td>
</tr>
</table>
57
Table attributes and CSS
Most attributes of the <table>, <tr>,
<td>, and <th> tags (but not colspan
and rowspan) are deprecated in XHTML
and obsolete in HTML5; use CSS
properties instead (see p. 69-71)
58
Tables
In the past, practically all web pages used
tables for page layout. Furthermore, often
tables were nested inside of other tables (e.g.
www.sharingpeace.org). Use of colspan and
rowspan to avoid use of nested tables is
recommended
Using CSS instead is recommended for layout
Tables still appropriate for displaying data; a
data table is any table in which items in a row
are related to each other (e.g techu.htm
59
table)
Making tables accessible
Simple tables can be made accessible by using <th>
instead of <td> for row and column headers and by
adding scope="row" to the <th> for row headers,
and scope="col" for column headers
“Some screen readers still do not fully support
complex tables with spanned or multiple levels of row
and/or column headers. When possible, try to
'flatten' the table and avoid spanned cells and
multiple levels of header cells.”
(http://webaim.org/techniques/tables/data )
see example on p. 73
60
Accessible Tables
For complex tables, using the headers
and id attribute may be appropriate
61
Accessibility for Complicated
Tables
Travel Expense Report
Meals
San Jose
25-Aug-97
37.74
26-Aug-97
27.28
subtotals
65.02
Seattle
27-Aug-97
96.25
28-Aug-97
35.00
subtotals
131.25
Totals
196.27
Hotels
Transport
subtotals
112.00
112.00
224.00
45.00
45.00
90.00
379.02
109.00
109.00
218.00
442.00
36.00
36.00
72.00
162.00
421.25
800.27
62
Code for Complex Table
Here is sample HTML mark up for the data cells of this table using the headers attribute. c1,
c2, c3, ... are the id's of the column headings and r1, r2, r3, ... are the id's of the row
headings.
<table border="1"> <caption>Travel Expense Report</caption>
<tr>
<td></td>
<th id="c2">Meals</th>
<th id="c3">Hotels</th>
<th id="c4">Transport</th>
<td id="c5">subtotals</td></tr>
<tr>
<th id="r2">San Jose</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr><td id="r3" >25-Aug-97</td>
<td headers="c2 r2 r3" bgcolor="#ffff00">37.74</td>
<td headers="c3 r2 r3">112.00</td>
<td headers="c4 r2 r3">45.00</td>
63
Complex Table code continued
<td></td></tr>
<tr>
<td id="r4">26-Aug-97</td>
<td headers="c2 r2 r4">27.28</td>
<td headers="c3 r2 r4">112.00</td>
<td headers="c4 r2 r4">45.00</td> ...
<tr><th id="r10">Totals</th>
<td headers="c2 r10">196.27</td>
<td headers="c3 r10">442.00</td>
<td headers="c4 r10">162.00</td>
<td headers="c5 r10">800.27</td>
</tr> </table>
The highlighted cell with the value 37.74, for example, is associated with the
date "25-Aug-97" (id="r3"), the city "San Jose," (id="r2") and expense item
"Meals" (id="c2"). To make it readable, the subject cell is coded:
< td headers="c2 r2 r3">37.74</td>
Assistive technology might then read this cell "Meals, San Jose, 25-Aug-97,
37.74" or "37.74 ,Meals, San Jose, 25-Aug-97."
64
Approaches to Common
Content Across Pages
Get one page right, and then create
other pages from this through cut and
paste or save as (what we’ll do now)
Frames
Includes, principally server-side includes
Templates provided by HTML editor
(e.g. FrontPage shared borders,
Dreamweaver templates)
65
ASP.NET Master pages
wwwroot and database
security
Many hosting providers require that you
put your html files in a folder at the top
level of the site named wwwroot or
htdocs or something similar
This is done for security reasons, so
that one can't enter a URL that will
access a database
Consider what happens in the absence
of this
66
wwwroot and database
security
Often databases are put in a special
folder so that the proper permissions
are automatically enabled
So let's assume at the top level of your
site www.billpegram.com, you have a
folder called [access_db] which contains
your database (call it important.mdb)
and at the top level of your site you
have your index.html file and other
67
wwwroot and database
security
So to access the home page, in the browser one types
www.billpegram.com; however if one types
www.billpegram.com/access_db/important.mdb one could (in
theory) access the database
So one standard solution is that any reference to the root of the
site (www.billpegram.com) will be interpreted as a reference to
www.billpegram.com/wwwroot -- thus anything outside this
folder won't be accessible through the browser.
68
