Download presentation
Presentation is loading. Please wait.
1
Intro to Web Development
Styling Tabs with CSS Scott Lydiard
2
Goal: Create "Tabs" website
Demonstrating site navigation tabs created with CSS
3
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
4
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
5
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
6
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>
7
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
8
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
9
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
10
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
11
Step 1: Start with index.html
From | 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 Navigate to HTML | HTML Templates | HTML Simple To screen scrape, 1. Click anywhere in yellow text box in Powerpoint 2. ctrl-a (select all) ctrl-c (copy text to Windows clipboard) 4. alt-tab (switch focus to editor) ctrl-v (copy code into .html or .css file)
12
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 Navigate to HTML | HTML Templates | HTML Simple To screen scrape, 1. Click anywhere in yellow text box in Powerpoint 2. ctrl-a (select all) ctrl-c (copy text to Windows clipboard) 4. alt-tab (switch focus to editor) ctrl-v (copy code into .html or .css file)
13
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>
14
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
15
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>
16
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.
17
CSS Syntax body { background-color:white; color:blue; }
18
CSS Syntax: What is being styled body { background-color:white;
color:blue; }
19
CSS Syntax: CSS Properties body { background-color: white;
color: blue; }
20
CSS Syntax: CSS Property Values body { background-color: white;
color: blue; }
21
Three methods for adding CSS to a Web Page:
1. <style> element inside <head> <style> body { background-color:white; color:blue; } </style>
22
Three methods for adding CSS to a Web Page:
2. "Inline" styling of element <body style="background-color:white;color:blue">
23
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">
24
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">
25
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; }
26
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; }
27
Arrange Desktop Atom Chrome
28
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; }
29
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;
30
Check with Chrome
31
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; }
32
Step 10: Style Tabs li { . . . width:200px; }
background-color:thistle;
33
Step 11: Center and Add Padding
li { . . . } text-align:center; padding:7px;
34
Step 12: Add Rounded Corners & Margins around Tabs
li { . . . } border-radius: 10px 10px 0 0; margin:10px;
35
Step 13: Add bisque color hovering
li { . . . } li:hover { background-color:bisque; }
36
Step 14: Make all Link Text Black, except Mouse-Down Text Red
a:visited, a:hover, a:link { color:black; } a:active { color:red;
37
Step 15: Center Everything on Page
h1, h2, ul { text-align: center; }
38
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>
39
Step 17: Test Like CRAZY!!! Verify the tab navigation works among the four pages: index.html tuition.html location.html contactus.html
40
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>
41
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>
42
Step 19: Style Selected Page
li#selected { background-color:brown; color:white; }
43
Step 20: Test Like CRAZY!!! Verify the tab navigation works among the four pages: index.html tuition.html location.html contactus.html
Similar presentations
