CSW131 Steven Battilana 1 CSW 131 – Chapter 2 Getting Started with HTML Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston, Wiley
CSW131 Steven Battilana 2 File 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)
CSW131 Steven Battilana 3 Download Files Go to : Go to : download ch02.zip into downloads subfolder extract (unzip) ch02.zip into class_work, which becomes subfolder ch02 in class_work subfolder
CSW131 Steven Battilana 4 Introduction to HTML (pp ) HTML = Hypertext Markup Language THE “language” for web pages, but only text Browsers interpret HTML and display web pages Tags Tags Tells browser how to treat enclosed text: your text Elements Elements Tags contain W3 defined elements (about 100 exist) Attribute Attribute Elements may use an attribute for details wcupa.edu wcupa.edu elementattribute opening tag closing tag your text
CSW131 Steven Battilana 5 Introduction to HTML (pp CONT.) Container Tags (most tags) Container Tags (most tags) block of text Empty Tags (few exist) Empty Tags (few exist) A basic instruction to browser = break in a line... There is NO closing tag Whitespace and Capitalization 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) 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 becomes (etc.)
CSW131 Steven Battilana 6 Create Your First Web Page (pp ) Web pages can be created using any text editor Web pages can be created using any text editor Open Notepad on your PC Open Notepad on your PC Web pages have 2 sections & 4 required elements 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
CSW131 Steven Battilana 7 Create Your First Web Page (pp CONT.) Save Your Web Page (pp ) OK, we’re going to type the following: OK, we’re going to type the following:<html><head> My First Page My First Page </head><body></body> SAVE as firstpage.html in subfolder, i.e., csw131/class_work/ch02/firstpage.html SAVE as firstpage.html in subfolder, i.e., csw131/class_work/ch02/firstpage.html
CSW131 Steven Battilana 8 Preview a Page in a Browser (pp ) Two options to open (preview) a Page in a browser: 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: Test your pages in: Win: Mac:
CSW131 Steven Battilana 9 Validate Markup Language: W3.org Validator (NOT in book) Navigate to w3.org Navigate to w3.org Scroll to bottom right of the page and click the link for: HTML and markup validator Scroll to bottom right of the page and click the link for: HTML and markup validatorHTML and markup validatorHTML and markup validator Click the tab: Validate by File Upload Click the tab: Validate by File UploadValidate by File UploadValidate by File Upload Click the Browse button and select firstpage.html Click the Browse button and select firstpage.html Observe the results - we need to make some changes… Observe the results - we need to make some changes…
CSW131 Steven Battilana 10 Declare Your Document Type (pp ) 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. 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: Using Notepad, open htmltransitionaldoctype.html for editing: [the above lines are typed as 1 line] My First Page My First Page more…
CSW131 Steven Battilana 11 Declare Your Document Type (Cont.) (pp ) Since XHTML is based on XML, the tag needs to be edited to include a mandatory xmlns attribute. Then we use a meta tag to declare encoding for international Unicode mapping: Since XHTML is based on XML, the tag needs to be edited to include a mandatory xmlns attribute. Then we use a meta tag to declare encoding for international Unicode mapping: [the above lines are typed as 1 line] My First Page [the above lines are typed as 1 line] My First Page SAVE as xhtmltransitionaldoctype.html & view in your browser SAVE as xhtmltransitionaldoctype.html & view in your browser transitional.dtd requires well formed XML vs. html4 loose.dtd. transitional.dtd requires well formed XML vs. html4 loose.dtd.more…
CSW131 Steven Battilana 12 Revisit W3.org Validator to Check Web Page (NOT in book) Navigate to w3.org Navigate to w3.org Scroll to bottom right of the page and click the link for: HTML and markup validator Scroll to bottom right of the page and click the link for: HTML and markup validatorHTML and markup validatorHTML and markup validator Click the tab: Validate by File Upload Click the tab: Validate by File UploadValidate by File UploadValidate by File Upload Click the Browse button and select xhtmltransitionaldoctype.html Click the Browse button and select xhtmltransitionaldoctype.html Observe the results – better? Observe the results – better?
CSW131 Steven Battilana 13 Add Headings (pp ) Headings range in importance (and initial size) from (most) to (least important / size) Headings range in importance (and initial size) from (most) to (least important / size) Using Notepad, open headings.html, and on a new line before type: Using Notepad, open headings.html, and on a new line before type: Welcome to my page! Welcome to my page! Save file and view it in your browser. Try. Save file and view it in your browser. Try. Note: Web surfers scan pages – headings matter! Note: Web surfers scan pages – headings matter! Tip: Remember, creating web pages is like writing a paper; except it is formatted for the Internet. Tip: Remember, creating web pages is like writing a paper; except it is formatted for the Internet.
CSW131 Steven Battilana 14 Add Paragraphs (pp ) Use paragraph tags for most non-headings: Use paragraph tags for most non-headings: Using Notepad, open paragraphs.html, and on a new line before type: Using Notepad, open paragraphs.html, and on a new line before type: Please take a few minutes to look around the site. Please take a few minutes to look around the site. Feel free to contact us for more information. Feel free to contact us for more information. Save file & view it in your browser noting spacing. Save file & view it in your browser noting spacing.
CSW131 Steven Battilana 15 Apply Logical Formatting (pp ) (X)HTML = underlying meaning; CSS = appearance (X)HTML = underlying meaning; CSS = appearance Using Notepad, open logicalformatting.html, and edit the following lines accordingly: Using Notepad, open logicalformatting.html, and edit the following lines accordingly: Welcome to my page! Welcome to my page! Please look around the site. [strong appears bold, but means important] Please look around the site. [strong appears bold, but means important] Feel free to contact us for more info. [me appears italicized, but is important] Feel free to contact us for more info. [me appears italicized, but is important]</body> Save file & view it in your browser. Save file & view it in your browser. Discussion: Google vs. visually impaired users. Discussion: Google vs. visually impaired users.
CSW131 Steven Battilana 16 Understanding URLs and File Paths (pp ) To effectively link to other pages & locations of other pages on your site, pages on other sites, ing, etc., we use... To effectively link to other pages & locations of other pages on your site, pages on other sites, ing, 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 domain and page location –http is the most common protocol –https is the secure version for buying, banking, etc. For the URL 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 rent com, net, org -
CSW131 Steven Battilana 17 Link to Other Pages in YOUR Site (pp ) You typically will use the RELATIVE path for these links. You typically will use the RELATIVE path for these links. Uses anchor & target hyperlink reference href attribute. Uses anchor & target hyperlink reference href attribute. Using Notepad, open links.html, and on a new line before type: Using Notepad, open links.html, and on a new line before type: Second page Second page </body> Save file & view it in your browser. Try clicking the link. 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]. 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. CSS can alter the appearance of the link (pretty much) as you wish. Actual location link will visitLink user sees
CSW131 Steven Battilana 18 Link to Pages on the Web (pp ) You typically will use the ABSOLUTE path for these links. You typically will use the ABSOLUTE path for these links. Uses anchor & target hyperlink reference href attribute. Uses anchor & target hyperlink reference href attribute. Using Notepad, open weblinks.html, and on a new line before type: Search Google Using Notepad, open weblinks.html, and on a new line before type: Search Google Save file & view it in your browser. Try clicking the link. Save file & view it in your browser. Try clicking the link. Note: Keep visitors on YOUR site when linking to another. Try: Note: Keep visitors on YOUR site when linking to another. Try: Search Google Search Google Tip: cutting & pasting links into your code is “fool proof”. Tip: cutting & pasting links into your code is “fool proof”. Note: The use of target= " _blank " is not in the textbook. Note: The use of target= " _blank " is not in the textbook.
CSW131 Steven Battilana 19 Link within a Page (pp ) Again using & target href attribute, we now also mark the target within the page as an ID and use #ID in href to find it. Again using & 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 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: 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 type Back to top Back to top 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 tag near the top of the page and edit it as follows: Some Interesting Information Some Interesting Information Save file & view it in your browser. Try clicking the link. Save file & view it in your browser. Try clicking the link. Note 1: If no tag existed to edit, instead we could have used: Note 1: If no tag existed to edit, instead we could have used: 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. 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.
CSW131 Steven Battilana 20 Link to an Address (pp ) 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 program). 2.Spammers LOVE this – they can easily “harvest” active addresses! Using Notepad, open links.html Using Notepad, open links.html Edit as follows (all on ONE line): Edit as follows (all on ONE line): Feel free to contact us for more information. Feel free to contact us for more information. mailto: before the address does the work here. mailto: before the address does the work here. Save file & view in your browser (option: try on your computer). 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). Note: The good news is there are better ways to do this using common server side scripts (discussed in future chapters).
CSW131 Steven Battilana 21 Link to Other Document Types (pp ) 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. 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.Link to Pages on the WebLink to Pages on the Web Using Notepad, open documentlinks.html Using Notepad, open documentlinks.html Type as follows (all on ONE line) on a new line below link: Type as follows (all on ONE line) on a new line below link: You can also learn more about us by downloading our PDF. You can also learn more about us by downloading our PDF. Save file & view it in your browser. Try clicking the link. Save file & view it in your browser. Try clicking the link. Also see “TIPS” at the bottom of p. 45. Also see “TIPS” at the bottom of p. 45. target= " _blank " works for opening a document on a new page target= " _blank " works for opening a document on a new page Note: Method to add a resume or CV to your website. Note: Method to add a resume or CV to your website. Tip: Easily create a PDF file using Microsoft Office. Tip: Easily create a PDF file using Microsoft Office.
CSW131 Steven Battilana 22 Show Tool Tips for Links (pp ) 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 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 Using Notepad, open tooltips.html Edit the anchor tag (all on ONE line) on the info document line: Edit the anchor tag (all on ONE line) on the info document line: You can also learn more about us by downloading our PDF. You can also learn more about us by downloading our PDF. Save file & view it in your browser. Point at the link to see tip. Save file & view it in your browser. Point at the link to see tip. Try FF, IE, and Chrome browsers to see the differences. Try FF, IE, and Chrome browsers to see the differences. Note: Keep tips brief. They can be added to any page element. Note: Keep tips brief. They can be added to any page element.
CSW131 Steven Battilana 23 To Do List Read Chapter 2 Read Chapter 2 Revisit what we did in class Revisit what we did in class Be careful as we do not follow book Remember, MUCH more detail about anything we cover is: Remember, MUCH more detail about anything we cover is: at w3.org the Appendices of your book Your Project – will it be about... 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 Start using the Project Plan templateProject PlanProject Plan