More HTML and CSS

1. More HTML and CSS INFSCI 1052

2. Basic HTML Concepts • 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

3. HTML Links • <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

4. Directory Structure • 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.

5. Directory Structure • 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 is10 directory image dir: collie.jpg pug.jpg

6. Tips • 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

7. Images • 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. • <imgsrc="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/

8. More practice • 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.

9. More Practice • 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.

10. More CSS • 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>

11. CSS Syntax • 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

12. CSS Styles • 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.

13. CSS Styles • 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

14. CSS ID's and Classes • 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.

15. Some More CSS Practice • 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

16. W3 Schools CSS Example Page • 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. • .

17. Universal Selector From Stylin by Charles Wyke-Smith • 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

18. Pseudo Classes • 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.

19. Pseudo Classes • 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;}

20. Group Exercise • 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 page First 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 .