1 / 23

CSW 131 – Chapter 2 Getting Started with HTML

CSW 131 – Chapter 2 Getting Started with HTML. Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston, Wiley. File Structure. On your flash drive create the folder: csw131 and subfolders downloads (from Prof. B. and/or publisher, Wiley)

amaranta-nova
Download Presentation

CSW 131 – Chapter 2 Getting Started with HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSW 131 – Chapter 2Getting Started with HTML Prepared by Prof. B. for use withTeach Yourself Visually Web Designby Ron Huddleston, Wiley

  2. File Structure • On your flash drive create the folder: • csw131and 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_workfolder, create chapter subfolders(ch2, ch3, etc.) • project • public_html • Home for CSW131 website pages, images folder, etc. • images (for your images and photos)

  3. Download Files • Go to :http://courses.wcupa.edu/sbattilana/hot131!.htm • download ch02.zip into downloadssubfolder • extract (unzip) ch02.zip into class_work, which becomes subfolder ch02 in class_worksubfolder

  4. 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 <p title="WCU Home">wcupa.edu</p> opening tag your text element attribute closing tag

  5. 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.)

  6. 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

  7. 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

  8. Preview a Page in a Browser (pp. 24-25) • Two options to open (preview) a Page in a browser: • 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 = PressCtrl + O keys (then find & open file/page) • 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:

  9. 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…

  10. 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/xhtml1-transitional.dtd"> [the above lines are typed as 1 line] <html><head><title>My First Page</title><body></body></html> more…

  11. 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 tagto 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…

  12. 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?

  13. 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.

  14. 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.

  15. 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.

  16. 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 • http is the most common protocol • httpsis the secure version for buying, banking, etc. • For the URL www.amazon.comis made up of: • www is the host • amazonis the domain • comis 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

  17. 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 referencehref attribute. • Using Notepad, open links.html, and on a new line before </body> type: <p><a href="secondpage.html">Second page</a></p> </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. Actual location link will visit Link user sees

  18. Link to Pages on the Web (pp. 38-39) • You typically will use the ABSOLUTE path for these links. • Uses anchor<a> & target hyperlink referencehref 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.

  19. 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.

  20. Link to an E-mail Address (pp. 42-43) • Before starting this simple process, consider these 2 issues: • To work, user must use their own computer (invokes their email program). • 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:contact@somesite.com"> 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).

  21. 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.

  22. 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.

  23. 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

More Related