Download Introduction to CSC110

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
page
15
page
16
page
17
page
18
page
19
page
20
page
21
page
22
page
23
Document related concepts

Cascading Style Sheets wikipedia , lookup

URL redirection wikipedia , lookup

Transcript 
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
Related documents
What are Web Pages
What are Web Pages
Presentation PPT
Presentation PPT
World Wide Web
World Wide Web
Creating and Editing a Web Page
Creating and Editing a Web Page
Disclaimer
Disclaimer
How Web Pages Work - THE MCDONALD MEMO
How Web Pages Work - THE MCDONALD MEMO
Introduction to HTML
Introduction to HTML
Introduction to Web Application
Introduction to Web Application
Computer Science 101 - Washington and Lee University
Computer Science 101 - Washington and Lee University
Internet terms
Internet terms
Introduction to Hypertext Markup Language
Introduction to Hypertext Markup Language
Windows and Notepad
Windows and Notepad
Browsing and Publishing
Browsing and Publishing
World Wide Web Basics
World Wide Web Basics
Unit 4 Lesson 2
Unit 4 Lesson 2