Template
Documentation
TASK 02c
INLS 161
Tools for
Information
Literacy
One Page Scrolling Nav
All 02c requirements demonstrated
2
Contents (pres.mode only)
41 image 1
42 image 2
43 alt text
44 h3 subhead
46 Interactive javascript example
50 Copyright
51 Page Last Updated Javascript
52 CUSTOM.CSS
53 Header image using CSS in html and css files
54 adjusting text to look better over an image
55 center all elements in a document
56 theme is default left-align
57 change the color of the classes content box
58 change the background color of a section
59 round the left corner of the content box
60 round the right corner of the content box
62 change the inactive tab link color
63 add margins to the top and bottom of h3 tags
64 force one element left even if all else is centered
65 GOOGLE FONTS DEMO (Server Side script example)
69 SUMMARY
70 Validation
Overview 1
4
Contents (pres.mode only)
Overview 1
5
Contents (pres.mode only)
Overview 1
6
Contents (pres.mode only)
Overview 1
7
Contents (pres.mode only)
Overview 1
8
Contents (pres.mode only)
Overview 2
9
Contents (pres.mode only)
Overview 2
10
Contents (pres.mode only)
Overview 2
11
Contents (pres.mode only)
Overview 3
12
Contents (pres.mode only)
Head, Navigation, & Header
Head: Title | Favicon
Top Bar Navigation: Brand | Primary Links
Header: image | h1 | “tagline”
13
Contents (pres.mode only)
14
Title
Title: tabs, favorites, etc.
Link to Student Z Sample Site
Contents (pres.mode only)
15
Favicon
Favicon ( this was included in template)
Link to Student Z Sample Site
Contents (pres.mode only)
16
Navbar Brand
brand
Link to Student Z Sample Site
Contents (pres.mode only)
17
Navigation Links
Nav links
Link to Student Z Sample Site
Contents (pres.mode only)
18
Custom Dark Glow Class
H1 tag
Link to Student Z Sample Site
See the CSS Slide for deeper understanding…Slide 54
Contents (pres.mode only)
19
Scrolling Button
Start Scrolling Button
Link to Student Z Sample Site
Contents (pres.mode only)
�About Section
h2 | Headshot Photo | Text | Obfuscated email | Resume
20
Contents (pres.mode only)
21
About Me (h2)
<h2>
Link to Example About Me Section
Link to Bootstrap Buttons
Contents (pres.mode only)
22
About Section Image
image
Link to Example About Me Section
Link to Bootstrap Buttons
Contents (pres.mode only)
23
Alt text for Image
Don’t Forget your alt text image description!
What is alt text?
Also called alt tags and alt descriptions, alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website.
<img src="img/profile-image.png" height="200" alt="Photo of Student Z.">
Contents (pres.mode only)
24
About Me Text
Text
Link to Example About Me Section
Link to Bootstrap Buttons
Contents (pres.mode only)
25
Obfuscated Email Link
Obfuscated
Email link
ARL Obfuscator Tool
Link to Example About Me Section
Link to Bootstrap Buttons
Contents (pres.mode only)
26
Resume Link
Resume button
ARL Obfuscator Tool
Link to Example About Me Section
Link to Bootstrap Buttons
Contents (pres.mode only)
27
<a href='mailto:StudentZ@em%61%69l.unc.e%64%75'>StudentZ@email.unc.edu</a>
<a class="btn btn-outline-dark" href='mailto:StudentZ@em%61%69l.unc.e%64%75'>StudentZ@email.unc.edu</a>
The obfuscated code will not have a Bootstrap button class:
But you can add one:
<a class="btn btn-outline-dark" href="-z-student-resume.pdf" target="_blank">Download My Resume </a>
And you can also add one to your resume link:
Contents (pres.mode only)
Classes Section
h2 |Top tabs | tabs content | absolute links
(Absolute links begin with http:// or https://)
28
Contents (pres.mode only)
29
Classes h2
<h2>
Link to Example Classes Section
Contents (pres.mode only)
30
Classes Section: top tabs 1
Link to Example Classes Section
Contents (pres.mode only)
31
Classes Section: top tabs 2
Link to Example Classes Section
Contents (pres.mode only)
32
Classes Section: top tabs 3
Link to Example Classes Section
Contents (pres.mode only)
33
Classes Section: top tabs 4
Link to Example Classes Section
Contents (pres.mode only)
34
Classes Section: tab 1 content
<p><a href="https://ils.unc.edu/courses/2021_fall/inls161_001/" target="_blank">Link to Class Site</a></p>
(From the <a href="https://catalog.unc.edu/courses/inls/" target="_blank">UNC Catalog</a>)
Contents (pres.mode only)
35
Classes Section: tab 2 content
(From the <a href="https://catalog.unc.edu/courses/enec/" target="_blank">UNC Catalog</a>)</p>
Contents (pres.mode only)
36
Classes Section: tab 3 content
<p><a href="https://englishcomplit.unc.edu/" target="_blank">Link to English & Comparative Literature Department Site</a></p>
Contents (pres.mode only)
37
Classes Section: tab 4 content
<p><a href="https://englishcomplit.unc.edu/" target="_blank">Link to English & Comparative Literature Department Site</a></p>
Contents (pres.mode only)
Interests Section
h2 | text | image(s) | h3
<ul> or <ol> list
Optional JavaScript
38
Contents (pres.mode only)
39
Interests Section h2
<h2>
Link to Example Interests Section
Contents (pres.mode only)
40
Interests Section text
<h2>
text
Link to Example Interests Section
Contents (pres.mode only)
41
Interests Section images
<h2>
text
images
Link to Example Interests Section
Contents (pres.mode only)
42
Interests Section Images
<h2>
text
images
Link to Example Interests Section
Contents (pres.mode only)
43
Images alt text
<h2>
text
images
Link to Example Interests Section
Don’t Forget your alt text image descriptions!
What is alt text?
Also called alt tags and alt descriptions, alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website.
<img src="img/lab-dog.jpg" height="200" alt="Student Z's dog Buster.">
<img src="img/cat.jpg" height="200" alt="Student Z's cat Missy.">
Contents (pres.mode only)
44
Interests h3
<h2>
text
images
<h3>
Link to Example Interests Section
Contents (pres.mode only)
45
list items
<h2>
text
images
<h3>
a link
<ol>
or
<ul>
Link to Example Interests Section
Contents (pres.mode only)
46
Optional Interactive JavaScript
<h2>
text
images
<h3>
a link
<ol>
or
<ul>
Interactive
JavaScript
Link to Example Interests Section
Contents (pres.mode only)
47
Try to reduce the size of your images, but if they are not perfectly sized you can adjust width or height.
(Don’t forget to use alt text on your images)
Contents (pres.mode only)
48
Bootstrap 5 has a built-in responsive class
<img src="..." class="img-fluid" alt="...">
Image help at get bootstrap.com
Link to this sample page
Contents (pres.mode only)
Footer Section
Copyright | required page last updated JavaScript
49
Contents (pres.mode only)
50
Footer Copyright
Contents (pres.mode only)
51
Page Last Updated
Contents (pres.mode only)
custom.css
Header and Body | Classes | Interests
52
Contents (pres.mode only)
53
CSS image for header
View custom.css file to copy code
Contents (pres.mode only)
54
Custom Dark Glow Class
View custom.css file to copy code
This custom class helps your text stand out on top of your images. You can name the class as you wish, but make sure they match exactly in both the css and the html files.
Note: you can switch this to a black color and a white text shadow if you need the opposite effect. You might want to change the class name to .custom-light-glow if you do that.
You must change the code in the custom.css file and also add the class in the index.html file.
Contents (pres.mode only)
55
Center all text in body
body {text-align:center;}
View custom.css file to copy code
Note: left-align is the default for the scrolling-nav theme.
You must add
body{text-align:center;}
to the custom.css
file if you want all of your page elements centered.
Contents (pres.mode only)
56
CSS comments
View custom.css file to copy code
Note: left-align is the default for the scrolling-nav theme. You must add
body{text-align:center;}
to the custom.css file if you want all of your page elements centered.
If you add the center style and you want to turn if off, but not delete the style, you can
comment it out.
Contents (pres.mode only)
57
Tab content color change
White background (#fff)
background-color: #fff;
View custom.css file to copy code
Does not have to be white. Choose your own color so integrated better with your site.
Contents (pres.mode only)
58
Section Background Color
#4B9CD3
must apply my-custom-color class to section in index.html
View custom.css file to copy code
Does not have to be blue. Choose your own color to integrate better with your site.
Contents (pres.mode only)
59
Bottom left Border Radius
border-bottom-left-radius: 5px;
View custom.css file to copy code
This is not required, but is demonstrated in case you want to use rounded corners. Rounding the top corners will not look as good as there is a horizontal rule that will show.
Contents (pres.mode only)
60
Bottom Right Border Radius
border-bottom-right-radius: 5px;
View custom.css file to copy code
This is not required, but is demonstrated in case you want to use rounded corners. Rounding the top corners will not look as good as there is a horizontal rule that will show.
Contents (pres.mode only)
61
Hover Color for Tabs
View custom.css file to copy code
Depending on your background color choice, you may need to specify a different, more appropriate :hover color.
Contents (pres.mode only)
62
Inactive Link Color
View custom.css file to copy code
Depending on your background color choice, you may need to specify a different, more appropriate, inactive .nav-link { color:.
Contents (pres.mode only)
63
Adjust Margins
if you want to add some top and bottom margin to h3 tags
View custom.css file to copy code
Contents (pres.mode only)
64
Make one thing align left
list tag can be forced aligned left, even if all else is centered
Contents (pres.mode only)
Google Fonts Demo
This will count for server-side script if you wish
Otherwise, use an example Dr. Berquist covered in lecture
or you can do this PHP Exercise
65
Note: if you want your Google Font to count as your server-side script, and you are using the scrolling-nav Student Z example, you will need to change it from the Rammetto One Sample to a different font.
Contents (pres.mode only)
66
Find a font you like; don’t use Rammetto One sample
View custom.css file to see example code
Note: if you want your Google Font to count as your server-side script, and you are using the scrolling-nav Student Z example, you will need to change it from the Rammetto One Sample to a different font.
style.css
index.html
Contents (pres.mode only)
67
Google Fonts Index Code
Example of Big Shoulders
Replace this code with your new Google font code in the
index.html just before the closing </head> tag.
Contents (pres.mode only)
68
Google Fonts Index Code
Example of Rammetto One at Google Font Change this if you want ServerSide Credit
Replace this code with your new Google font code in the
custom.css
don't copy the
.big-shoulders class…
just copy the internal declarations.
Just copy the 3 internal lines of code
paste only the 3 internal lines of code
Contents (pres.mode only)
Wrap Up
Be sure to check Html validation
69
& Watch out for spaces & non-standard characters in all file and folder names
W3C
HTML
Markup
Validation
Service
[link]
W3C
CSS
Validation Service
[link]
Student Z Sample Site
Validates on HTML and CSS
View source code in Firefox before validation
[click for more]
Contents (pres.mode only)
70
The closing </body> tag should not have any content following it.
This is an example where an extra </body> tag was pasted in when the script example was copied.
There may not be any problem with the <p> tag in red.
It may be affected by the extra body tag.
If you open your site in Firefox and then view the source code, any errors will show in red.
Common errors:
Contents (pres.mode only)
Common Errors
When things go wrong
71
Contents (pres.mode only)
72
Self-closing trailing slashes in head are deprecated now: now.
should delete them–and space–in old templates
keep them in ending tags
Contents (pres.mode only)
73
Remove spaces in your directory name:
https://opal.ils.unc.edu/~onyen/task%202.03%20completed%20website/
https://opal.ils.unc.edu/~onyen/task 2.03 completed website/
https://opal.ils.unc.edu/~onyen/task2.03
Keep it short and simple with no spaces:
This is what happens when you paste the link in Sakai:
Contents (pres.mode only)
74
index.html is not named correctly so files list out
during the course of your development, if you were working on a variation you will need to rename it to index.html
Don’t use a capital: Index.html
Contents (pres.mode only)
75
Google Fonts need to be in css AND html file:
body {
/* put google font css code here for all tags */
}
h1 {
/* google font css code here for h1 only */
}
p {
/* google font css code here for paragraph only */
}
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="icon" href="img/guitar.png">
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample Profile</title>
<link href="css/styles.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<!-- this is where your missing Google Font html code goes-->
</head>
style.css
index.html
Contents (pres.mode only)
76
Google Fonts can be just in css if you use import:
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
body {
font-family: 'Muli', sans-serif;
}
h1 {
font-family: 'Quicksand', sans-serif;
}
style.css
Contents (pres.mode only)
77
Server-side credit for Google font not given for default font
EZ template
must be changed from
Nunito+Sans
Scrolling Nav Template
must be changed from Rammetto One
Use these fonts if you like, but come up with an alternate server side script.
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap" rel="stylesheet">
Contents (pres.mode only)
78
Contents (pres.mode only)