Start with a template base structure Think about how to structure your document
using headers, paragraphs, divs, unordered lists, imgs .
Typically a page has a header section, a main section and a footer section.
Here is a page that lists some different HTML tags and shows how they can be used. Some of this will be a repeat from before but some will be new.: http://www.w3schools.com/html/html_examples.asp
<a href="http://www.pitt.edu">Welcome to Pitt</a>
Welcome to Pitt – This is the text the user sees
<a ………>………..</a> - This is the actual opening and closing anchor tag
href="http://www.pitt.edu" - This is the full web address
So the page loads and the user sees a link and clicks on it and goes to a new web page associated with the specified web address
What does your directory structure look like for your homework page?
html directory is10 52directory
index.html --this is your homework page webpage.html -- these are homework assignments javascript.xxx database.xxx
Because your webpage.html, javascript.xxx and database.xxx all live in the same directory as index.html your anchor tags in the index.html file simply look like <a href="name of file.xxx">What user sees</a>
You don't need the full web address of http://www.pitt.edu/~username/is10/webpage.html.
A common directory structure scheme is to put all of your images into an image directory.
html directory is1052 --directory
index.html -- homework page hw1.html –first homework image --directory
collie.jpg -- picture pug.jpg -- picture
Path to the pug file from an anchor tag in the hw1.html file:
<a href="/image/pug.jpg">My Lovable Pug</a>
html directory
is1052 directory
image dir:collie.jpgpug.jpg
Unix based system are brutal about two things: Case
Be careful when using lower case and upper case For ex: these are two different files: Index.html and index.html
Spaces Unix does not like spaces in file names
Good: my_web_page.html Not so good: my web page.html
File extensions – they tell the computer how to interpret your document
.html – for web pages .docx – for Word doc .accdb – Access Database .txt – plain text
Once you have chosen an image right click and choose save as to save the file to your computer. In most cases your image will not be the right size.
You can resize an image by setting the height and width attributes in the img tag. Not good idea. <img src="doggie.jpg" alt="Collie Dog" height="42"
width="42"> The measurements are in pixels Try to keep the height and width proportion equal to the
original There are online image resize websites:
http://www.picresize.com/ http://www.shrinkpictures.com/ http://www.resizeyourimage.com/
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_hr
This page demos adding the <hr /> tag It’s a separator
Also, when looking at a web page if you right click you will see a menu option to view source.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_poem
This demonstrates that browsers pay attention to the initial space in our html code but ignore multiple spaces.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pre But we have a way of fixing the space
problem if we want to.
Remember that we can create styles and place them in the head section of our document and apply the style to a tag on our page.
...</head><style type="text/css">
styles go here</style></head>
A style syntax looks like the following: selector {property: value;} The selector is the name of the tag such as
div, p, ul The property represents a list of different
things we can affect such as color, font, size The value is how much do want to affect
something P {color:blue;} – here we made the text
color of paragraphs blue. A list of CSS properties: http://
www.htmlhelp.com/reference/css/properties.html
Start with simple styles Change the color of the text–
p{color:blue;} Specify the size of your h1 or h2 or h3 etc
h2{font-size:10px;} Pick a web safe font to use for your page
p{font-family:"Times New Roman",Georgia,Serif;} Center your page
#mainpage{width:800px; margin:0 auto;} Here is an example of a <div id="mainpage">
</div> surrounding all of the html between the body tags.
Float a div with an image in it to the left or right div#collie {float:left;} Here we have a div tag with an id of collie:
<div id="collie> <img> </div>
Use margins to create space on top, right, bottom or left of a tag div#collie{margin-left:10px;}
Create a background color for a tag p {background-color:#33ccee;}
Check out the link for possible colors: http://www.hypergurl.com/colormatch.php
When you want to target only one tag then use an id:div#footer {color:blue;}--------------------------------------<div id = "footer")
stuff………….</div>
When you want to apply a style to multiple tags then use a class
p.makebig{ font-size:30px;}
<p class ="makebig">I look big</p><p class ="makebig">I look big too</p><p > I look regular size</p>Notice a # sign for id and a period . for a class.
There are many websites dedicated to teaching CSS
W3C Schools is very popular: http://www.w3schools.com/css/css_examples.asp
Tizag is good too http://www.tizag.com/cssT/
Code Academy is a little different style http://www.codecademy.com/tracks/web
Code school is another site: http://www.codecademy.com/tracks/web
They charge after the into sessions(s) LYNDA.com- Free and Great videos on everything
IT: http://technology.pitt.edu/help/lynda/lynda-login.html
Here are some CSS examples to learn from: www.w3schools.com/CSS/css_examples.asp This is a good reference list and each week in class
we will be learning some of these techniques. Start with some of the basics before moving onto
the more complicated. Make your own list of techniques and commands
that you have begun to master Success in this class depends upon you taking the
time to practice and learn different CSS techniques.
.
Universal Selector Uses the * Ex: *{color:red;}
All text in the document will be red unless overridden
Affects all elements Also acts as the reverse of the child selector
p * em { font-size:12px} All ems that are NOT a direct child of p. They
must at least be a grandchild
From Stylin by Charles Wyke-Smith
Pseudo Classes Most often used with hyperlinks They are called pseudo because they don’t
have a direct tag they are attached to in the markup.
Four pseudo classes:▪ Link – waiting to be clicked▪ Visited – has been clicked▪ Hover – cursor over link▪ Active – currently being clicked
Order is important! – Think LoVeHAte.
Pseudo Classes You can use elements other than the anchor
tag▪ For example you can make a paragraph change
text color or background color when the cursor hovers over it
▪ Caution: IE6 only supports hovers over links Example:▪ a:link {color:blue;}▪ a:visited {color:red;}▪ a:hover {font-size:22px;}▪ a:active {color:green;}
Group Exercise: List, describe and write a style exampleof your top ten CSS techniques.
Ex; 1) Select paragraphs and headers and control the
color of the text. p { color:#3344CC;}h1 {color:#445533;}
2) Center a web pageFirst wrap the html tags in a div with an id of mainpage. Then apply the following style
div#mainpage { width:800px; margin: 0 auto;}
Be ready to justify your choices .