HTML and CSS Tips and FAQs

Contents
    FAQs
    CSS demo
    Links to sample websites

First up: Some basic website FAQs based on questions I get asked about a million times each semester:

Q: Why can't I see my website? It says "Forbidden" (or such)!
A: You'll only see your main page on the KU People servers by default - that is, when you visit your site, such as http://www.people.ku.edu/~cmckit - if you name your main page index.shtml Most other servers require that you name your (default) home page some variant of index.html


Q: But I didn't name it that. How do I see it?
A: It's probably as simple as your not typing the filename correctly, or mis-capitalizing it. Turn on the "View common file-name extensions" (or however it's worded) in your computer's file folders, because you need to be able to see the exact spelling and capitalization of the file-name extension, such as homepage.HTM versus HomePage.html). That's the solution 99.9% of the time for not visible or "Forbidden" pages! If you don't name your website's main page index.shtml (for KU sites; others use variations of this), you need to type the file name after the slash in your site's URL, such as http://www.people.ku.edu/~cmckit/wwowitsawebsite.htm


Q: How come my pictures don't show up? Why isn't my CSS working? How come (whatever) isn't on my website?
A1: All the files you want your audience to see, including HTML, CSS, images, and so forth, must be in the folder named public_html

A2: If you put things into sub-folders such as http://www.people.ku.edu/~cmckit/TechComm/WebLinks.htm, you need to include those in the full path (or tricksy partial paths), as well. Much simpler is to just put all your files into the public_html folder without sub-folders, so you can simply link to other pages and images and CSS files and so forth by the file name. For example, I link to page 2 by coding <a href="page2.html> and I'm done. Simple.


Q: What do you mean by "pages" for my website? What is a "page"?
A: Websites are made up of many things - images, videos, text - and all of these dwell on pages. A page is the place where those things live; for example, http://www.people.ku.edu/~cmckit/TechComm/WebLinks.htm is a page. So is http://www.people.ku.edu/~cmckit/TechComm/Tips-Videos.htm - each separate HTML file that makes up your website is a unique page.


Q: Arrgh! None of this helps me see my pages / images / insert thing here.
A: If you ever see a path that includes stuff like F:\\My Documents\Website\index.shtml, get rid of the offending path stuff to your computer (the "F:" and everything else that isn't just the file name or an http: path). No one else can see your computer's hard drive or your flash drive. You should end up with just index.shtml


Q: How do I cite the sources for information and images I use in my website? Should I make a bibliography page?
A: It's not necessary to make a separate References page, but it is necessary to cite your sources. You can simply link to the sources from your citations like this, and if they use Creative Commons licenses, they'll tell you exactly how you can use their material, how to cite, and so forth. Remember: An image is a complete document in itself, so don't plagiarize those, either!

Some more tips:

Of course, your best place to find everything is on our HTML Web Links page!


Next is a demo on how you can use CSS to format a lot of things, including how to make an image for your background stretch to the full size of the screen. Right-click this page to see the HTML and CSS link (or just click here to open the stylesheet). The idea of using a CSS document is that it cascades across all your pages; for example, this page links to the CSS I created especially for it by using this in the <head> section:

<link rel="stylesheet" type="text/css" href="http://www.people.ku.edu/~cmckit/stretch.css">

In this case, the stylesheet is a separate file named stretch.css that I can link from as many pages as I want, and it'll affect all of those linked pages. Here are the CSS properties I created for this demo page:

body {background-image:url(Oliver-typewriter.jpg); background-size:100%; background-repeat:no-repeat; background-attachment:fixed; }

p, li, dd {font-family:Verdana, Arial, Helvetica, sans-serif; color:blue; }
p.date { font-size: 8pt; font-family: verdana,helvetica,arial,sans-serif; text-align: center; color: gray; }

h1 {font-family:Verdana, Arial, Helvetica, sans-serif; color:orange; text-align:center; }

a {text-decoration:none; font-size:smaller; }
a:hover {color:white; background-color:black; }

.sample {color:black; font-family:courier; margin-left:10px; margin-right:6px; }

.navbuttons {text-align:center; margin-left:auto; margin-right:auto; width:90%; }

.green {background-color: lime; width:20%; }
.pink {background-color: #FF00FF; width:20%; }
.gray {background-color: #C0C0C0; width:20%; }
.aqua {background-color: #00FFFF; width:20%; }

.wacky {text-decoration:overline; font-size:x-large; font-weight:bold; font-variant:small-caps; text-align:center; font-style:italic; background-color:gray; color:lime; line-height:30px; }

Notice that the HTML and CSS samples on this page are in a paragraph that uses class="sample" so they show up looking a little different per the .sample CSS class element: The text is black, Courier font, and indents on the left by 10 pixels and on the right by 6 pixels. I used <span class="sample"> around the code excerpts on this page, too, so there's a weird gap in the middle of sentences like this one. <Span> is a utility tag in HTML that allows you to use a class for anything including individual words, images, and so forth, as long as you give it a class that's defined in your CSS. (If you're viewing this in Internet Explorer, you can see the nav table at the top with background colors but not centered; in Firefox and Chrome, the <td> boxes lose their background colors but are cetered. Just browser quirkiness.)

The reason the text in these paragraphs, bulleted-list items, and definition list items (<dd> in the CSS; I used that for the top Q&A list) is that they're all defined in this single CSS line: p, li, dd {font-family:Verdana, Arial, Helvetica, sans-serif; color:blue; }

CSS gives you tons of power and control over how your website appears. Take full advantage of it!

By the way, if you keep scrolling down, you'll see that the background image stays put; that's because of the background-attachment:"fixed" element.

Oh, and the reason you see so many blank lines below the text is that I was lazy and just created blank paragraphs. This is a sub-optimal way to do this, but simple. Whenever you want a browser to recognize blank lines, you need to use a non-breaking space in the paragraph. The code for that is <p>&nbsp;</p>


And here's a CSS and HTML Tips & Tricks page I put together for y'all:
http://www.people.ku.edu/~cmckit/HTML-and-CSS-tips.htm

 

 

 

 

 

 

Have fun, and be creative!

updated 11/6/2014.