Date post: | 30-Dec-2015 |
Category: |
Documents |
Upload: | amaranta-nova |
View: | 31 times |
Download: | 0 times |
CS
W1
31
Ste
ven
B
att
ilan
a
1
CSW 131 – Chapter 2CSW 131 – Chapter 2Getting Started with HTMLGetting Started with HTML
Prepared by Prof. B. for use withPrepared by Prof. B. for use withTeach Yourself Visually Web DesignTeach Yourself Visually Web Design
by Ron Huddleston, Wileyby Ron Huddleston, Wiley
CS
W1
31
Ste
ven
B
att
ilan
a
2
File StructureFile Structure
On your flash drive create the folder: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)
CS
W1
31
Ste
ven
B
att
ilan
a
3
Download FilesDownload Files
Go to :Go to :
http://courses.wcupa.edu/sbattilana/hot131http://courses.wcupa.edu/sbattilana/hot131!.htm!.htm
download ch02.zip into downloads subfolder
extract (unzip) ch02.zip into class_work , which becomes subfolder ch02 in class_work subfolder
CS
W1
31
Ste
ven
B
att
ilan
a
4
Introduction to HTML Introduction to HTML (pp. 18-19)(pp. 18-19)
HTML = HTML = HHyperyperttext ext MMarkup arkup LLanguageanguage THE “language” for web pages, but only text Browsers interpret HTML and display web pages
TagsTags Tells browser how to treat enclosed text:
<opening tag>your text</closing tag> ElementsElements
Tags contain W3 defined elements (about 100 exist)
AttributeAttributeElements may use an attribute for details
<p title="WCU Home">wcupa.edu</p><p title="WCU Home">wcupa.edu</p>element attribute
opening tag
closing tagyour text
CS
W1
31
Ste
ven
B
att
ilan
a
5
Introduction to HTML Introduction to HTML (pp. 18-19 CONT.)(pp. 18-19 CONT.)
Container Tags (most tags)Container Tags (most tags) <opening tag>block of text</closing tag>
Empty Tags (few exist)Empty Tags (few exist) A basic instruction to browser
<br> = break in a line . . . There is NO closing tag Whitespace and CapitalizationWhitespace 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 HTML versusversus XHTML XHTML (used on MOST web sites)(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.)
CS
W1
31
Ste
ven
B
att
ilan
a
6
Create Your First Web Page Create Your First Web Page (pp. 20-21)(pp. 20-21)
Web pages can be created using any text Web pages can be created using any text editoreditor
Open Notepad Open Notepad on your PCon your PC Web pages have 2 sections & Web pages have 2 sections & 4 required 4 required
elementselements 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 barUsed by search engines to help catalogue it
body (section 2)Holds most of the web page code and content
CS
W1
31
Ste
ven
B
att
ilan
a
7
Create Your First Web Page Create Your First Web Page (pp. 20-21 CONT.)(pp. 20-21 CONT.)
Save Your Web Page Save Your Web Page (pp. 22-23)(pp. 22-23)
OK, we’re going to OK, we’re going to type the followingtype the following::
<html><html>
<head><head>
<title>My First Page</title><title>My First Page</title>
</head></head>
<body><body>
</body></body>
</html></html>
SAVESAVE as as firstpage.htmlfirstpage.html in subfolder, i.e., in subfolder, i.e., csw131/class_work/ch02/firstpage.htmlcsw131/class_work/ch02/firstpage.html
CS
W1
31
Ste
ven
B
att
ilan
a
8
Preview a Page in a Browser Preview a Page in a Browser (pp. 24-25)(pp. 24-25)
Two options to open (Two options to open (previewpreview) a Page in a ) a Page in a browser: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 fileDouble click the file and it will open in the browser
Test your pages in:Test your pages in:Win: Mac:Win: Mac:
CS
W1
31
Ste
ven
B
att
ilan
a
9
Validate Markup Language: W3.org Validator Validate Markup Language: W3.org Validator (NOT in (NOT in book)book)
Navigate to w3.orgNavigate to w3.org Scroll to bottom right of the page and click Scroll to bottom right of the page and click
the link for: HTML and markup validatorthe link for: HTML and markup validator Click the tab: Validate by File UploadClick the tab: Validate by File Upload Click the Browse button and select Click the Browse button and select
firstpage.htmlfirstpage.html Observe the results Observe the results - we need to make - we need to make
some changes…some changes…
CS
W1
31
Ste
ven
B
att
ilan
a
10
Declare Your Document Type Declare Your Document Type (pp. 26-27)(pp. 26-27)
This is the This is the FIRST line FIRST line of your web pages, which tells the of your web pages, which tells the browser how to interpret/render it, with three types: Strict, browser how to interpret/render it, with three types: Strict, TransitionalTransitional, and Frameset., and Frameset.
Most pages are, and Most pages are, and we will use (XHTML) Transitionalwe will use (XHTML) Transitional
Using Using NotepadNotepad, open , open htmltransitionaldoctype.html htmltransitionaldoctype.html forfor editingediting::
<!DOCTYPE html PUBLIC "-//W3C//DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 XHTML 1.0 TransitionalTransitional//EN" //EN" "http://www.w3.org/TR/"http://www.w3.org/TR/xhtml1/DTD/xhtml1-xhtml1/DTD/xhtml1-transitional.dtdtransitional.dtd">">
[the above lines are typed as 1 line][the above lines are typed as 1 line]<html><html><head><head><title>My First Page</title><title>My First Page</title><body><body></body></body></html></html>
more…more…
CS
W1
31
Ste
ven
B
att
ilan
a
11
Declare Your Document Type (Cont.) Declare Your Document Type (Cont.) (pp. 26-27)(pp. 26-27)
Since XHTML is based on XML, the Since XHTML is based on XML, the <html> <html> tag needs to be tag needs to be edited to include a mandatory xmlns attribute. Then we use a edited to include a mandatory xmlns attribute. Then we use a meta tagmeta tag to declare encoding for internationalto declare encoding for international Unicode Unicode mapping: mapping:
<html <html xmlns="http://www.w3.org/1999/xhtml"xmlns="http://www.w3.org/1999/xhtml">>
<head><head>
<meta http-equiv="Content-Type" <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />content="text/html; charset=utf-8" />[the above lines are typed as 1 line] [the above lines are typed as 1 line]
<title>My First Page</title><title>My First Page</title><body><body></body></body></html></html>
SAVESAVE as as xhtmltransitionaldoctype.html xhtmltransitionaldoctype.html & & view view in your in your browser browser
transitional.dtdtransitional.dtd requires well formed requires well formed XMLXML vs. html4 vs. html4 loose.dtdloose.dtd..
more…more…
CS
W1
31
Ste
ven
B
att
ilan
a
12
Revisit W3.org Validator to Check Web Page Revisit W3.org Validator to Check Web Page (NOT in (NOT in book)book)
Navigate to w3.orgNavigate to w3.org Scroll to bottom right of the page and click Scroll to bottom right of the page and click
the link for: HTML and markup validatorthe link for: HTML and markup validator Click the tab: Validate by File UploadClick the tab: Validate by File Upload Click the Browse button and select Click the Browse button and select
xhtmltransitionaldoctype.html xhtmltransitionaldoctype.html Observe the results Observe the results – better?– better?
CS
W1
31
Ste
ven
B
att
ilan
a
13
Add Headings Add Headings (pp. 28-29)(pp. 28-29)
HeadingsHeadings range in importance (and initial size) range in importance (and initial size) from <h1> (most) to <h6> (least important / from <h1> (most) to <h6> (least important / size)size)
Using Using NotepadNotepad, open , open headings.htmlheadings.html, and on a , and on a new line before new line before </body> </body> type:type:
<body><body><h1>Welcome to my page!</h1><h1>Welcome to my page!</h1></body></body></html></html>
Save file Save file and and view it view it in your browser. Try in your browser. Try <h6><h6>.. NoteNote: Web surfers scan pages – headings : Web surfers scan pages – headings
matter!matter!
TipTip: Remember, creating web pages is like : Remember, creating web pages is like writing a paper; except it is formatted for the writing a paper; except it is formatted for the Internet. Internet.
CS
W1
31
Ste
ven
B
att
ilan
a
14
Add Paragraphs Add Paragraphs (pp. 30-31)(pp. 30-31)
Use Use paragraph tags paragraph tags <p> for most non-<p> for most non-headings:headings:
Using Using NotepadNotepad, open , open paragraphs.htmlparagraphs.html, and , and on a new line before on a new line before </body> </body> type:type:<p>Please take a few minutes to look around the site.</p><p>Please take a few minutes to look around the site.</p><p>Feel free to contact us for more information.</p><p>Feel free to contact us for more information.</p></body></body></html></html>
Save file Save file & & view it view it in your browser in your browser noting noting spacingspacing..
CS
W1
31
Ste
ven
B
att
ilan
a
15
Apply Logical Formatting Apply Logical Formatting (pp. 32-33)(pp. 32-33)
(X)HTML(X)HTML = = underlying meaningunderlying meaning; ; CSSCSS = = appearanceappearance
Using Using NotepadNotepad, open , open logicalformatting.htmllogicalformatting.html, and , and editedit the the following lines accordingly:following lines accordingly:
<h1>Welcome to my page!</h1><h1>Welcome to my page!</h1><p> <p> <strong><strong> Please Please </strong></strong> look around the look around the site.</p> site.</p> [strong appears bold, but means important][strong appears bold, but means important]<p>Feel free to contact us for <p>Feel free to contact us for <em><em> more info more info </em></em>.</p> .</p> [me appears italicized, but is important][me appears italicized, but is important]</body></body>
Save file Save file & & view it view it in your browser. in your browser. DiscussionDiscussion: Google vs. visually impaired : Google vs. visually impaired
users.users.
CS
W1
31
Ste
ven
B
att
ilan
a
16
Understanding URLs and File Paths Understanding URLs and File Paths (pp. 34-35)(pp. 34-35)
To effectively link to other pages & locations of other To effectively link to other pages & locations of other pages on your site, pages on other sites, emailing, etc., pages on your site, pages on other sites, emailing, etc., we use . . .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
– http is the most common protocol
– 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
– 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
Cheap to rentcom, net, org
-
CS
W1
31
Ste
ven
B
att
ilan
a
17
Link to Other Pages in YOUR Site Link to Other Pages in YOUR Site (pp. 36-37)(pp. 36-37)
You typically will use the You typically will use the RELATIVE path RELATIVE path for these links.for these links.
Uses Uses anchoranchor <a><a> & target & target hyperlink referencehyperlink reference hrefhref attribute.attribute.
Using Using NotepadNotepad, open , open links.htmllinks.html, and on a new line , and on a new line before before </body></body> type: type:
<p><a href=<p><a href=""secondpage.htmlsecondpage.html"">Second page</a></p> >Second page</a></p>
</body></body>
Save file Save file & & view it view it in your browser. Try clicking the in your browser. Try clicking the link.link.
NoteNote differences between differences between secondpage.htmlsecondpage.html & & Second Second pagepage and and one of the most common criminal activitiesone of the most common criminal activities [quick demo].[quick demo].
CSSCSS can alter the appearance of the link (pretty much) as you can alter the appearance of the link (pretty much) as you wish.wish.
Actual location link will visit Link user sees
CS
W1
31
Ste
ven
B
att
ilan
a
18
Link to Pages on the Web Link to Pages on the Web (pp. 38-39)(pp. 38-39)
You typically will use the You typically will use the ABSOLUTE path ABSOLUTE path for these links.for these links.
Uses Uses anchoranchor <a><a> & target & target hyperlink referencehyperlink reference hrefhref attribute.attribute.
Using Using NotepadNotepad, open , open weblinks.htmlweblinks.html, and on a new line before , and on a new line before </body></body> type: type:
<p><a href=<p><a href=""http://www.google.comhttp://www.google.com"">Search Google</a></p> >Search Google</a></p>
</body></body>
Save file Save file & & view it view it in your browser. Try clicking the link.in your browser. Try clicking the link. Note: Keep visitors on YOUR site when linking to another. Note: Keep visitors on YOUR site when linking to another.
Try:Try:
<p><a <p><a target=target=""_blank_blank"" href=href=""http://www.google.comhttp://www.google.com"">Search >Search Google</a></p>Google</a></p>
TipTip: : cutting & pasting links cutting & pasting links into your code is “fool proof”.into your code is “fool proof”. NoteNote: The use of : The use of target=target=""_blank_blank"" is is notnot in the textbook. in the textbook.
CS
W1
31
Ste
ven
B
att
ilan
a
19
Link within a Page Link within a Page (pp. 40-41)(pp. 40-41)
Again using Again using <a><a> & target & target hrefhref attribute, we now also mark the attribute, we now also mark the target within the page as an target within the page as an ID ID and use and use #ID #ID in in hrefhref to find it. to find it.
Using Using NotepadNotepad, open , open internallinks.htmlinternallinks.html
Say we want a link at the bottom of our very long page that 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:allows the user to click it and jump back to the top of the page:
On the line before On the line before </body> </body> typetype
<p><a href=<p><a href=""#top#top"">Back to top</a></p>>Back to top</a></p>
This creates a link on the page to a (thus far) non-existent target, 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 so lets create that target within the page by adding the IDID “top”. “top”. Go to the Go to the <h1> tag<h1> tag near the top of the page and near the top of the page and edit itedit it as follows: as follows:
<h1 <h1 id=id=""toptop"">Some Interesting Information</h1>>Some Interesting Information</h1>
Save file Save file & & view it view it in your browser. Try clicking the link.in your browser. Try clicking the link.
Note 1:Note 1: If no tag existed to edit, instead we could have used: If no tag existed to edit, instead we could have used:
<span id=<span id=""toptop""></span>></span>
Note 2:Note 2: A target within a page (e.g., A target within a page (e.g., ""#top#top"") can be referenced ) can be referenced directly from another page or website; add it (e.g., directly from another page or website; add it (e.g., ""#top#top"") to the ) to the end of the URL.end of the URL.
CS
W1
31
Ste
ven
B
att
ilan
a
20
Link to an E-mail Address Link to an E-mail Address (pp. 42-43)(pp. 42-43)
Before starting this simple process, consider these 2 issues: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 Using NotepadNotepad, open , open emaillinks.htmlemaillinks.html
Edit Edit as follows (all on as follows (all on ONE lineONE line):):
<p>Feel free to <p>Feel free to <a href=<a href=""mailto:[email protected]:[email protected]""> > contact uscontact us</a> </a> for <em>more information</em>.</p>for <em>more information</em>.</p>
mailto:mailto: before the email address does the work here. before the email address does the work here.
Save file Save file & & view view in your browser (option: try on your in your browser (option: try on your computer). computer).
Note:Note: The good news is The good news is there are better ways to do this there are better ways to do this using using common server side scripts (discussed in future chapters).common server side scripts (discussed in future chapters).
CS
W1
31
Ste
ven
B
att
ilan
a
21
Link to Other Document Types Link to Other Document Types (pp. 44-45)(pp. 44-45)
This is similar to “Link to Pages on the Web”, and This is similar to “Link to Pages on the Web”, and pages will either open in a browser plug-in (like a PDF pages will either open in a browser plug-in (like a PDF file), or ask if user would like to download the file.file), or ask if user would like to download the file.
Using Using NotepadNotepad, open , open documentlinks.htmldocumentlinks.html
Type Type as follows (all on as follows (all on ONE lineONE line) ) on a new line below on a new line below email linkemail link::
<p>You can also learn more about us by <a <p>You can also learn more about us by <a href="info.pdf">downloading our PDF</a>.</p>href="info.pdf">downloading our PDF</a>.</p>
Save file Save file & & view it view it in your browser. Try clicking the in your browser. Try clicking the link.link.
Also see “Also see “TIPSTIPS” at the bottom of p. 45.” at the bottom of p. 45.
target=target=""_blank_blank" " works for opening a document on a works for opening a document on a new pagenew page
NoteNote: Method to add a resume or CV to your website.: Method to add a resume or CV to your website.
TipTip: Easily create a PDF file using Microsoft Office.: Easily create a PDF file using Microsoft Office.
CS
W1
31
Ste
ven
B
att
ilan
a
22
Show Tool Tips for Links Show Tool Tips for Links (pp. 46-47)(pp. 46-47)
Using a Using a titletitle attribute of the attribute of the anchoranchor tag enables tag enables a a description of the link description of the link to which the user points. This to which the user points. This tool tiptool tip should accurately describe the link. should accurately describe the link.
Using Using NotepadNotepad, open , open tooltips.htmltooltips.html
EditEdit the anchor tag (all on the anchor tag (all on ONE lineONE line) ) on the info on the info document linedocument line::
<p>You can also learn more about us by <a <p>You can also learn more about us by <a href="info.pdf" href="info.pdf" title="Download a 26KB PDF file" title="Download a 26KB PDF file" >downloading our PDF</a>.</p>>downloading our PDF</a>.</p>
Save file Save file & & view it view it in your browser. Point at the link in your browser. Point at the link to see tip.to see tip.
Try FF, IE, and Chrome browsers to see the Try FF, IE, and Chrome browsers to see the differencesdifferences..
NoteNote: : Keep tips briefKeep tips brief. They can be added to any page . They can be added to any page element.element.
CS
W1
31
Ste
ven
B
att
ilan
a
23
To Do ListTo Do List
Read Chapter 2Read Chapter 2 Revisit what we did in classRevisit what we did in class
Be careful as we do not follow book Remember, MUCH more detail about Remember, MUCH more detail about
anything we cover is:anything we cover is: at w3.org the Appendices of your book
Your Project – Your Project – will it be about . . .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 templateStart using the Project Plan template