Embed Size (px)
Citation preview
INFSCI 0010
Last time we built a doggie web page in class following the instructions in the slide deck:
Build Web Page with HTML – see week 3• The topics included starting with a
template, H1 tag, div tag, inline style, paragraph tag, img tag, unordered list tag, embedded style tags, centering a page, use of ID's, floats, clear property and margins.
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
For example, you have a directory called html and in this directory you have a another directory called is10 and a web page (html file) called index.html. So if anyone types www.pitt.edu/~username/is10 they will see your index.html page.
Your index.html should be your homework page. And, it should consist of links to your homework. Funny, because it starts with HW2 because you already emailed me your HW1 which was your interface project.
Here is a snippet of your HTML for your homework page
<body><h1> Homework page for John Smith </h1><p> <a href="webpage.html"> HW2 My
personal web page</a> </p><p> <a href ="javascript.xxx"> HW3
Javascript</a></p><p> <a href="database.xxx">HW4 Database
Homework</a></p><body>
What does your directory structure look like for your homework page?
html directory is10 directory
index.html webpage.html 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 different html directory structure is10 directory
index.html homework – This is another directory inside of is10
directory. And, inside of it are the three files webpage.html javascript.xxx database.xxx
Now, an anchor tag in the index.html page referencing webpage.html would look like:
<a href="/homework/webpage.html"><My webPage</a>
A common directory structure scheme is to put all of your images into an image directory.
html directory is10 directory
index.html image directory
collie.jpg pug.jpg
Path to the pug file:html/is10/image/pug.jpgFull address:
http://www.pitt.edu/~username/html/is10/image/pug.jpg
html directory
is10 directory
image dir:collie.jpgpug.jpg
Lets go to :http://www.w3schools.com/html/html_basic.asp Practice adding a header tag, paragraph
tag, a link and an image. Lets review how to obtain and use images You can search the web using Google or visit
a free image repository such as: http://www.sxc.hu/ http://www.deviantart.com/
Be conscious of copyright.
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. <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/
Lastly save your resized images to the same directory as your webpage.html file or create an image directory and use a path to you images
Try to choose images that match the theme of your website and ones that create the right mood.
Look for good photography: clarity, light vs dark and subject of the photo. Stock photos can look rehearsed and not real.
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: https://www.codeschool.com/ 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
