Introduction to CSC110
Download
Report
Transcript Introduction to CSC110
CSW 131 – Chapter 2
Getting Started with HTML
Prepared by Prof. B. for use with
Teach Yourself Visually Web Design
by Ron Huddleston, Wiley
1
File Structure
On your flash drive create the folder:
csw131
and subfolders
downloads (from Prof. B. and/or publisher, Wiley)
class_work (your work so you don’t overwrite Downloads)
– Underscore is used to make a one word file name – a good habit to get
into as file names with spaces can cause problems for browsers.
– For the class_work folder, create chapter subfolders (ch2, ch3, etc.)
project
– public_html
» Home for CSW131 website pages, images folder, etc.
» images (for your images and photos)
2
Download Files
Go to :
http://courses.wcupa.edu/sbattilana/hot131!.htm
download ch02.zip into downloads subfolder
extract (unzip) ch02.zip into class_work , which
becomes subfolder ch02 in class_work subfolder
3
Introduction to HTML (pp. 18-19)
HTML = Hypertext Markup Language
THE “language” for web pages, but only text
Browsers interpret HTML and display web pages
Tags
Tells browser how to treat enclosed text:
<opening tag>your text</closing tag>
Elements
Tags contain W3 defined elements (about 100 exist)
Attribute
Elements may use an attribute for details
opening tag
<p title="WCU Home">wcupa.edu</p>
element
attribute
your text
closing tag
4
Introduction to HTML (pp. 18-19 CONT.)
Container Tags (most tags)
<opening tag>block of text</closing tag>
Empty Tags (few exist)
A basic instruction to browser
<br> = break in a line . . . There is NO closing tag
Whitespace and Capitalization
HTML is case insensitive for both (page display is not
affected in either case) . . . so:
– Use plenty of whitespace writing HTML (easy to read)
– Element names and attributes can be any case
HTML versus XHTML (used on MOST web sites)
XHTML uses stricter syntax (and works better):
All attributes & elements must be lowercase
Attribute values must be enclosed in quotation marks
There are NO empty tags – they must ALL be closed, so
<br> becomes <br /> (etc.)
5
Create Your First Web Page (pp. 20-21)
Web pages can be created using any text editor
Open Notepad on your PC
Web pages have 2 sections & 4 required elements
html
All contents of the page
head (section 1)
Holds information used by browsers & search engines
title (also part of section 1)
Appears in web page title bar
Used by search engines to help catalogue it
body (section 2)
Holds most of the web page code and content
6
Create Your First Web Page (pp. 20-21 CONT.)
Save Your Web Page (pp. 22-23)
OK, we’re going to type the following:
<html>
<head>
<title>My First Page</title>
</head>
<body>
</body>
</html>
SAVE as firstpage.html in subfolder, i.e.,
csw131/class_work/ch02/firstpage.html
7
Preview a Page in a Browser (pp. 24-25)
Two options to open (preview) a Page in a browser:
1. From within browser . . .
FF = Click File, click Open File… (then find & open
file/page)
IE = Click File, click Open… (then find & open file/page)
Chrome = Press Ctrl + O keys (then find & open
file/page)
2. Or simply go to Documents . . .
Find the file – there should be a browser icon next to
it, which tells you it is (most likely) a HTML file
Double click the file and it will open in the browser
Test your pages in:
Win:
Mac:
8
Validate Markup Language: W3.org Validator (NOT in book)
Navigate to w3.org
Scroll to bottom right of the page and click the link
for: HTML and markup validator
Click the tab: Validate by File Upload
Click the Browse button and select firstpage.html
Observe the results - we need to make some
changes…
9
Declare Your Document Type (pp. 26-27)
This is the FIRST line of your web pages, which tells the browser how
to interpret/render it, with three types: Strict, Transitional, and
Frameset.
Most pages are, and we will use (XHTML) Transitional
Using Notepad, open htmltransitionaldoctype.html for editing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
[the above lines are typed as 1 line]
<html>
<head>
<title>My First Page</title>
<body>
</body>
</html>
more…
10
Declare Your Document Type (Cont.) (pp. 26-27)
Since XHTML is based on XML, the <html> tag needs to be edited to
include a mandatory xmlns attribute. Then we use a meta tag to
declare encoding for international Unicode mapping:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
[the above lines are typed as 1 line]
<title>My First Page</title>
<body>
</body>
</html>
SAVE as xhtmltransitionaldoctype.html & view in your browser
transitional.dtd requires well formed XML vs. html4 loose.dtd.
more…
11
Revisit W3.org Validator to Check Web Page (NOT in book)
Navigate to w3.org
Scroll to bottom right of the page and click the link
for: HTML and markup validator
Click the tab: Validate by File Upload
Click the Browse button and select
xhtmltransitionaldoctype.html
Observe the results – better?
12
Add Headings (pp. 28-29)
Headings range in importance (and initial size)
from <h1> (most) to <h6> (least important / size)
Using Notepad, open headings.html, and on a new
line before </body> type:
<body>
<h1>Welcome to my page!</h1>
</body>
</html>
Save file and view it in your browser. Try <h6>.
Note: Web surfers scan pages – headings matter!
Tip: Remember, creating web pages is like writing
a paper; except it is formatted for the Internet.
13
Add Paragraphs (pp. 30-31)
Use paragraph tags <p> for most non-headings:
Using Notepad, open paragraphs.html, and on a new
line before </body> type:
<p>Please take a few minutes to look around the site.</p>
<p>Feel free to contact us for more information.</p>
</body>
</html>
Save file & view it in your browser noting spacing.
14
Apply Logical Formatting (pp. 32-33)
(X)HTML = underlying meaning; CSS = appearance
Using Notepad, open logicalformatting.html, and
edit the following lines accordingly:
<h1>Welcome to my page!</h1>
<p> <strong> Please </strong> look around the
site.</p> [strong appears bold, but means important]
<p>Feel free to contact us for <em> more info
</em>.</p> [me appears italicized, but is important]
</body>
Save file & view it in your browser.
Discussion: Google vs. visually impaired users.
15
Understanding URLs and File Paths (pp. 34-35)
To effectively link to other pages & locations of other pages
on your site, pages on other sites, emailing, etc., we use . . .
Relative Paths - target pages on your site from your current location
Pages in Folders - target pages on your site in another folder
– Specify folder & page, e.g. product/widget.html
Absolute Paths - target pages on another site require complete URLs
http://full domain and page location
- protocol
– http is the most common
– https is the secure version for buying, banking, etc.
For the URL www.amazon.com is made up of:
– www is the host
– amazon is the domain
Cheap to rent
com, net, org
– com is the top-level domain
Folder Path - URLs can include one or more folder names (no .html)
Requesting the Default Document - e.g., amazon.com yields index.html
16
Link to Other Pages in YOUR Site (pp. 36-37)
You typically will use the RELATIVE path for these links.
Uses anchor <a> & target hyperlink reference href attribute.
Using Notepad, open links.html, and on a new line before
</body> type:
<p><a href="secondpage.html">Second page</a></p>
Actual location link will visit
Link user sees
</body>
Save file & view it in your browser. Try clicking the link.
Note differences between secondpage.html & Second page
and one of the most common criminal activities [quick demo].
CSS can alter the appearance of the link (pretty much) as you wish.
17
Link to Pages on the Web (pp. 38-39)
You typically will use the ABSOLUTE path for these links.
Uses anchor <a> & target hyperlink reference href attribute.
Using Notepad, open weblinks.html, and on a new line before </body>
type:
<p><a href="http://www.google.com">Search Google</a></p>
</body>
Save file & view it in your browser. Try clicking the link.
Note: Keep visitors on YOUR site when linking to another. Try:
<p><a target="_blank" href="http://www.google.com">Search
Google</a></p>
Tip: cutting & pasting links into your code is “fool proof”.
Note: The use of target="_blank" is not in the textbook.
18
Link within a Page (pp. 40-41)
Again using <a> & target href attribute, we now also mark the target
within the page as an ID and use #ID in href to find it.
Using Notepad, open internallinks.html
Say we want a link at the bottom of our very long page that allows the
user to click it and jump back to the top of the page:
On the line before </body> type
<p><a href="#top">Back to top</a></p>
This creates a link on the page to a (thus far) non-existent target, so lets
create that target within the page by adding the ID “top”. Go to the <h1>
tag near the top of the page and edit it as follows:
<h1 id="top">Some Interesting Information</h1>
Save file & view it in your browser. Try clicking the link.
Note 1: If no tag existed to edit, instead we could have used:
<span id="top"></span>
Note 2: A target within a page (e.g., "#top") can be referenced directly
from another page or website; add it (e.g., "#top") to the end of the URL.
19
Link to an E-mail Address (pp. 42-43)
Before starting this simple process, consider these 2 issues:
1. To work, user must use their own computer (invokes their email program).
2. Spammers LOVE this – they can easily “harvest” active email addresses!
Using Notepad, open emaillinks.html
Edit as follows (all on ONE line):
<p>Feel free to <a
href="mailto:[email protected]"> contact us</a>
for <em>more information</em>.</p>
mailto: before the email address does the work here.
Save file & view in your browser (option: try on your computer).
Note: The good news is there are better ways to do this using
common server side scripts (discussed in future chapters).
20
Link to Other Document Types (pp. 44-45)
This is similar to “Link to Pages on the Web”, and pages will
either open in a browser plug-in (like a PDF file), or ask if user
would like to download the file.
Using Notepad, open documentlinks.html
Type as follows (all on ONE line) on a new line below email link:
<p>You can also learn more about us by <a
href="info.pdf">downloading our PDF</a>.</p>
Save file & view it in your browser. Try clicking the link.
Also see “TIPS” at the bottom of p. 45.
target="_blank" works for opening a document on a new page
Note: Method to add a resume or CV to your website.
Tip: Easily create a PDF file using Microsoft Office.
21
Show Tool Tips for Links (pp. 46-47)
Using a title attribute of the anchor tag enables a description of
the link to which the user points. This tool tip should accurately
describe the link.
Using Notepad, open tooltips.html
Edit the anchor tag (all on ONE line) on the info document line:
<p>You can also learn more about us by <a
href="info.pdf" title="Download a 26KB PDF file"
>downloading our PDF</a>.</p>
Save file & view it in your browser. Point at the link to see tip.
Try FF, IE, and Chrome browsers to see the differences.
Note: Keep tips brief. They can be added to any page element.
22
To Do List
Read Chapter 2
Revisit what we did in class
Be careful as we do not follow book
Remember, MUCH more detail about anything we
cover is:
at w3.org
the Appendices of your book
Your Project – will it be about . . .
your (planned) business or organization?
another business or organization?
You will work with a “client”
your life and background?
Start using the Project Plan template
23