INFSCI 1052

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 .