Intro to Web Development Styling Tabs with CSS Scott Lydiard www.scottsdevelopers.com
Goal: Create "Tabs" website Demonstrating site navigation tabs created with CSS
Goal: Website with 4 Web Pages index.htm . . . <h2>Home</h2> Good programming style: 1. All file names lower case 2. No spaces in file names 3. Filenames the same as page names, except the "Home" page, which must be index.html . . . <h2>Tuition</h2> . . . <h2>Location</h2> . . . <h1>Contact Us</h2> tuition.htm location.htm contactus.htm
A Web Page is a Single HTML file. index.htm . . . <h1>Home</h1> Good programming style: 1. All file names lower case 2. No spaces in file names 3. Filenames the same as page names, except the "Home" page, which must be index.html
A Web Site is several Web Pages hyperlinked together. index.htm . . . <h2>Home</h2> Good programming style: 1. All file names lower case 2. No spaces in file names 3. Filenames the same as page names, except the "Home" page, which must be index.html . . . <h2>Tuition</h2> . . . <h2>Location</h2> . . . <h2>Contact Us</h2> tuition.htm location.htm contactus.htm
The Home Page is the Default first page opened when a browser goes to a web address: It is usually named index.htm or index.html (NOT home.htm or home.html!) index.htm Good programming style: 1. All file names lower case 2. No spaces in file names 3. Filenames the same as page names, except the "Home" page, which must be index.html . . . <h1>Home</h1>
Every web site has one and only one Home Page Good programming style: 1. All file names lower case 2. No spaces in file names 3. Filenames the same as page names, except the "Home" page, which must be index.html
A Web Site can consist of a single Home Page or thousands of Web Pages Good programming style: 1. All file names lower case 2. No spaces in file names 3. Filenames the same as page names, except the "Home" page, which must be index.html
Every Web Page on a Web Site can be navigated to (linked to) from the Home Page Good programming style: 1. All file names lower case 2. No spaces in file names 3. Filenames the same as page names, except the "Home" page, which must be index.html
Methodology Build tabs step-by-step by editing <li> CSS styling in tabs.css Changing css file then refreshing browser with F5 to see results
Step 1: Start with index.html From www.scottsdevelopers.com | Resources | Intro to Web Development | Class C: index.html Save to Desktop or Rename home.html on Desktop to index.html from "Links" class lab Note: This html template file is available on www.scottsdevelopers.com Navigate to HTML | HTML Templates | HTML Simple To screen scrape, 1. Click anywhere in yellow text box in Powerpoint 2. ctrl-a (select all) 3. ctrl-c (copy text to Windows clipboard) 4. alt-tab (switch focus to editor) 5. ctrl-v (copy code into .html or .css file)
Step 1: Start with index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Home</title> </head> <body> <h1>Home</h1> <button> <a href="tuition.html">Tuition</a> </button> </body> </html> Note: This html template file is available on www.scottsdevelopers.com Navigate to HTML | HTML Templates | HTML Simple To screen scrape, 1. Click anywhere in yellow text box in Powerpoint 2. ctrl-a (select all) 3. ctrl-c (copy text to Windows clipboard) 4. alt-tab (switch focus to editor) 5. ctrl-v (copy code into .html or .css file)
Replace the <button> and <a> elements with: Step 2: Update Template Change title to “Tabs” Replace the <button> and <a> elements with: Save on Desktop as index.html <title> is browser window name - appears on browser tabs. <h1> is website name - appears at the top of every web page <h2> is the webpage name - different for each web page <h1> Tabs </h1> <h2> Home </h2>
Test with Chrome site name from <title> element site name from <h1> element To test with chrome, double-click index.html on the desktop. page name from <h2> element
Step 3: Create Site Navigation To index.html add a bulleted navigation menu consisting of four pages: Home, Tuition, Location and Contact Us. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tabs</title> </head> <body> <h1> Tabs </h1> <h2> Home </h2> </body> </html> As before, screen scrape and paster into editor. Test. <ul> <li> Home </li> <li> Tuition </li> <li> Location </li> <li> Contact Us </li> </ul>
Step 4: Add Links to Site Pages <ul> <li><a href="index.html"> Home </a></li> <li><a href="tuition.html"> Tuition </a></li> <li><a href="location.html"> Location </a></li> <li><a href="contactus.html"> Contact Us </a></li> </ul> Easiest way is to delete current <ul>…</ul> element, replace with screen-scrapped yellow above.
CSS Syntax body { background-color:white; color:blue; }
CSS Syntax: What is being styled body { background-color:white; color:blue; }
CSS Syntax: CSS Properties body { background-color: white; color: blue; }
CSS Syntax: CSS Property Values body { background-color: white; color: blue; }
Three methods for adding CSS to a Web Page: 1. <style> element inside <head> <style> body { background-color:white; color:blue; } </style>
Three methods for adding CSS to a Web Page: 2. "Inline" styling of element <body style="background-color:white;color:blue">
Three methods for adding CSS to a Web Page: 3. External Style Sheet index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tabs</title> <link href="tabs.css" rel="stylesheet"> </head> <body> . . . tabs.css body { background-color:green; color:blue; } <link href="tabs.css" rel="stylesheet">
Step 5: Link to site CSS file Add a <link> element index.html: <head> <meta charset="utf-8"> <title>Tabs</title> </head> <link href="tabs.css" rel="stylesheet">
Step 6: Eliminate bullets with CSS Save and close index.html In Atom, create a new external CSS file (file | new) for the webpage. Save to desktop as tabs.css. In this CCS file, style the <li> elements to have no list style type: tabs.css: We want to have two files, index.html and tabs.css in two separate windows. If using a programming editor like Notepad++ or Sublime, open up a new file. If using Notepad (which doesn't support two open files in the same session), start another instance of Notepad. li { list-style-type: none; }
Step 6: Eliminate bullets with CSS Save and close index.html In Atom, create a new external CSS file (file | new) for the webpage. Save to desktop as tabs.css. In this CCS file, style the <li> elements to have no list style type: tabs.css: We want to have two files, index.html and tabs.css in two separate windows. If using a programming editor like Notepad++ or Sublime, open up a new file. If using Notepad (which doesn't support two open files in the same session), start another instance of Notepad. li { list-style-type: none; }
Arrange Desktop Atom Chrome
Step 7: Eliminate Link Underlining Style the <a> elements with CSS to have no text decoration. tabs.css browser screen: li { list-style-type:none; } a { text-decoration:none; }
Step 8: Display Links Horizontally Add a styling to <li> in tabs.css to change the display styling to inline-block. tabs.css: li { list-style-type: none; } a { text-decoration: none; display:inline-block;
Check with Chrome
Step 9: Change Web Page Font Add a styling to <body> in tabs.css to change the web page default font properties: tabs.css : body { font-family:Arial,sans-serif; font-weight:bold; font-size:24px; }
Step 10: Style Tabs li { . . . width:200px; } background-color:thistle;
Step 11: Center and Add Padding li { . . . } text-align:center; padding:7px;
Step 12: Add Rounded Corners & Margins around Tabs li { . . . } border-radius: 10px 10px 0 0; margin:10px;
Step 13: Add bisque color hovering li { . . . } li:hover { background-color:bisque; }
Step 14: Make all Link Text Black, except Mouse-Down Text Red a:visited, a:hover, a:link { color:black; } a:active { color:red;
Step 15: Center Everything on Page h1, h2, ul { text-align: center; }
Step 16: Create Site Web Pages Make 3 copies of the site Home page (index.html) on the Desktop named as below: Change the <h2> in each new file: Example: index.html tuition.html location.html contactus.html <h2>Tuition</h2>
Step 17: Test Like CRAZY!!! Verify the tab navigation works among the four pages: index.html tuition.html location.html contactus.html
Step 18: Modify Menu for Selected Page Edit each of the four files, changing the menu item for the current page by: Deleting the <a> link (so page doesn't link to itself) Add an id="selected" to the <li> element. Example for the home page index.html: <ul> <li> <a href="tuition.htm"> Tuition </a></li> <li> <a href="location.htm"> Location </a></li> <li> <a href="contactus.htm"> Contact Us </a></li> </ul> <li id="selected" Home </li>
Step 18: Modify Menu for Selected Page Example for page tuition.html: <ul> <li><a href="index.html"> Home </a></li> <li id="selected"> Tuition </li> <li><a href="location.html"> Location </a></li> <li><a href="contactus.html"> Contact Us </a></li> </ul>
Step 19: Style Selected Page li#selected { background-color:brown; color:white; }
Step 20: Test Like CRAZY!!! Verify the tab navigation works among the four pages: index.html tuition.html location.html contactus.html