html and css: an introduction · css has different rules. swap out these symbols: • instead of...
TRANSCRIPT
1. Tells the browser you are using html.
2. Header tags for defining information that will not appear on the main area of your site, such as the title, the page styles, etc.
3. The main content area of your site.
4. The order in which your basic framework tags should be presented on your page.
5. Page title. Tags go in between the two header tags.
6. Bolds text7. Italicizes text8. Underlines text9. Ordered (numbered) listList itemExample:
JMC 305Roschkespring14 HTML and CSS: An Introduction1. <html></html>
2. <head></head>
3. <body></body>
4. <html><head></head><body></body></html>
5. <title></title>Example: <head><title>The Walter Cronkite School...</title></head>
6. <strong></strong>7. <em></em>8. <u></u>9. <ol><li></li></ol>Example:Class Objectives:<ol><li> HTML/CSS Web De-sign </li><li> Interactive Graphics</li><li> Multimedia Journalism</li></ol> Adapted from Rich Johnson’s JMC 305 Class Materials
10. <ul><li></li></ul>Example:Class Objectives:<ul><li> HTML/CSS Web Design </li><li> Interactive Graphics</li><li> Multimedia Journalism</li></ul>
11. <a href=“http://www.asu.edu/”target=“_blank”>This is a link to ASU’s website</a>
12. <a href=“mailto:[email protected]”>Email me</a>
13. <br />
14. <p></p>Example:<p>This is aparagraph</p><p>So is this</p>
10. Unordered (bulleted) listExample:
11. Hyperlink.The “href ” attribute lists your destination.The “target” attribute tells the browser where you want to open the link. In this case, we used “_blank” which opens the link in a new tab.
12. This creates an email link.
13. Line break (only one line) Remember, HTML won’t read returns, so you have to tell it where to break.Also remember that the break tag closes itself, so the slash goes at the end of the tag instead of in a separate tag.
14. Separates the text as a paragraph. This will apply any para-graph styles to an area and will also double space your line of text.
2
15. Creates standalone, bolded headlines/subheads that gradually decrease in size.
16. Image tag. It closes itself like the <br /> tagThe “src” attribute tells you where you are getting the picture from.The “alt” attribute puts in alternate text for visually impaired people or for browsers that can’t load the images (or block them).If you are hosting the photo on your own server, you will need to get a direct link for it based on whatever directory it is in. However, if you are using a photo from a web sharing service, such as Flickr, you can have it provide the URL for you (be sure you have permission under Creative Commons).Make sure you get the photo URL, not the one for the page its embedded on on Flickr.
15. <h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
16. <img src=“url for image goes here” alt=“alternate text goes here” width=“number” />
Example:<a href=“https://www.flickr.com/photos/7119320@N05/3312523469” title=“Cronkite Bldg 1 by Sean_Marshall, on Flickr”><img src=“https://farm4.staticflickr.com/3327/3312523469_4debe198c7_s.jpg” width=“300” height=“500” alt=“Cronkite Bldg 1”></a>
H1
H2
H3
3
16. Creates an invisible content “box” that you can manipulate (i.e. position where you want, change the color of the text/background) ESPN.com is a good example of visible divs. Look at all those boxes with content (pictures/text/back-grounds/etc.).
The “id” attribute will allow you to name the div in order to organize it or manipulate it. The “class” attribute allows you to define the style for similar divs throughout your whole website (for example all of the pictures) so that they are standard on every page.
17. The style attribute for the div tag allows you to use CSS (Cascading Style Sheets) to manipulate this div. Because you are using the style attribute here, everything within the quota-tion marks will change to CSS. CSS has different rules than HTML. Instead of using the equals sign, for example, we use a colon. Instead of closing with a / your line should end in a semicolon.
“Float” allows you to position the div on a line along with other content. It will allow you to wrap text around your div.
“Padding” will put space around the div. In this case, it will put 15 pixels around each side of the photo. If you want to only put space on certain sides of the div, use the “margin” properties (margin-left, margin-right, margin-top, or margin-bottom).
16. <div></div><div id=“picture”></div><div class=“picture”></div>
17. <div style= “float:left; padding:15px;”></div>
4
CSS has different rules. Swap out these symbols:• Instead of closing with a / (slash) use ; (semi-colon) at the end of a line.
• Instead of using = (equal sign) use a : (colon)
• Instead of using <> (angle brackets) use { } (curly brackets)
Also, when defining the styles for a whole page or site, you can define styles for certain tags (such as <body>, <p>, <a>, or <div>) that will apply every time use that tag. You can also de-fine for the div class attribute.
With CSS, you can define styles in several different ways. You can use the HTML style attribute (as in the float example) within any tag and it will only apply to that tag. If you have several pages that need a standard style, you can put it in an external stylesheet that you link to your HTML document. If you just want to apply it to one page, put it between the <head> </head> tags.
CSS
1. Tells the browser you are using CSS to define a style. Don’t forget to close the <style> tag before you close the head tag. Everything that goes between those two style tags will now be CSS.
2. Tells the browser that you are defining the style for the <p> tag. This change will only be applied to the <p> tag. You can swap out the p here for any other tag that you want to define (such as body, div, etc.). Notice that there is not a pair of <>.
3. Changes the body’s background color to black, the font size to 50 pixels and the font color to white. Notice that the back-ground-color and font-size properties are hyphenated but that you just say “color” not “text-color” or “font-color” for the text.
For colors, you can use most of the “main” colors (red, yellow, blue, etc.) by spelling out the word. You can also be more pre-cise by using hexidecimal codes (such as #FFFFFF).
1. <head><style type=“text/css”></style></head>
2. <style type=“text/css”>p{}</style>
3. body{background-color:black;font-size:50px;}
5
4. Changes the font of anything I add the <p> tag to into Arial. Notice the difference here (the other line does not have a <p> tag and so it takes the body style, which I defined as font-fami-ly Georgia, Times, serif.
5. Instead of a background color, this will give you an image in the background. Where it says “url” type those letters ex-actly. You will put the actual url inside of the parentheses and the single quote (notice that it is a single quote not quotation marks).
Notice that the picture tiles. There are many background im-ages you can use that are tiles that will give you texture that you won’t notice the tile. If you want to still use the image, add this property to the css: background-repeat:no-repeat. Of course, you will need to make sure your image is big enough to do that.Also, notice that you can’t see the text. If you want to use a background/color image and still use black text, you can cre-ate a div that has a white background and set it over the top of your page. See the next page for an example.
4. p{font-family:Arial, Helvetica, sans-serif;}
5. body{background-image:url (‘http://farm4.staticflickr.com/3291/2874230387_015c7cd3c5.jpg’);}
6
6. The HTML/CSS to the left describes having a background color or background image and still being able to see the text. You can make the div as deep as you’d like with the height property (just like you did with the width).
6. <html><head><title>My Great Webpage</title><style type=“text/css”>body{background-color:black;font-size:50px;}</style></head><body><div id=“content” style=“background-color:white; width:500px; margin-left:20px;”>Hello World!</div></body></html>
7