CSW 131 – Chapter 2 Getting Started with HTML

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