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