HTML and CSS: An Introduction

Size: px

Start display at page:

Download "HTML and CSS: An Introduction"

Erik Hawkins
6 years ago
Views:

1 JMC 305 Roschke spring14 1. <html></html> 2. <head> 3. <body></body> 4. <html> <head> <body> </body> </html> 5. <title></title> <head> <title> The Walter Cronkite School... </title> HTML and CSS: An Introduction 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. <strong></strong> 7. <em></em> 8. <u></u> 9. <ol> <li></li> </ol> Class Objectives: <ol> <li> HTML/CSS Web Design </li> <li> Interactive Graphics</li> <li> Multimedia Journalism</li> </ol> 6. Bolds text 7. Italicizes text 8. Underlines text 9. Ordered (numbered) list List item Adapted from Rich Johnson s JMC 305 Class Materials

2 10. <ul> <li></li> </ul> Class Objectives: <ul> <li> HTML/CSS Web Design </li> <li> Interactive Graphics</li> <li> Multimedia Journalism</li> </ul> 11. <a href= http://www. asu.

2 2 10. <ul> <li></li> </ul> Class Objectives: <ul> <li> HTML/CSS Web Design </li> <li> Interactive Graphics</li> <li> Multimedia Journalism</li> </ul> 11. <a href= asu.edu/ target= _blank >This is a link to ASU s website</a> 12. <a href= mailto: address@ host.com > me</a> 13. <br /> 14. <p></p> <p>this is a paragraph</p> <p>so is this</p> 10. Unordered (bulleted) list 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 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 paragraph styles to an area and will also double space your line of text.

15. <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 15. Creates standalone, bolded headlines/subheads that gradually decrease in size. H1 H2 H3 3 16.

com/photos/7119320@ N05/3312523469 title= Cronkite Bldg 1 by Sean_Marshall, on Flickr ><img src= https:// farm4.staticflickr.com/3 327/3312523469_4debe1 98c7_s.

3 15. <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 15. Creates standalone, bolded headlines/subheads that gradually decrease in size. H1 H2 H <img src= url for image goes here alt= alternate text goes here width= number /> <a href= com/photos/ @ N05/ title= Cronkite Bldg 1 by Sean_Marshall, on Flickr ><img src= farm4.staticflickr.com/3 327/ _4debe1 98c7_s.jpg width= 300 height= 500 alt= Cronkite Bldg 1 ></a> 16. Image tag. It closes itself like the <br /> tag The 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.

4 16. <div></div> <div id= picture ></div> <div class= picture > </div> 16. Creates an invisible content box that you can manipulate (i.e. position where you want, change the color of the text/ background) ESPN.

4 4 16. <div></div> <div id= picture ></div> <div class= picture > </div> 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/backgrounds/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. <div style= float:left; padding:15px; ></div> 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 quotation 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).

5 5 CSS 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 define 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> tags. 1. <head> <style type= text/css > </style> 2. <style type= text/css > p </style> 3. body background-color:black; font-size:50px; 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 background-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 precise by using hexidecimal codes (such as #FFFFFF).

6 6 4. p font-family: Arial, Helvetica, sans-serif; 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-family Georgia, Times, serif. 5. body background-image:url ( com/3291/ _015c7cd3c5.jpg ); 5. Instead of a background color, this will give you an image in the background. Where it says url type those letters exactly. 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 images 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 create a div that has a white background and set it over the top of your page. See the next page for an example.

6. <html> <head> <title> My Great Webpage </title> <style type= text/css > body background-color:black; font-size:50px; </style> <body> <div id= content style= backgroundcolor:white; width:500px;

7 6. <html> <head> <title> My Great Webpage </title> <style type= text/css > body background-color:black; font-size:50px; </style> <body> <div id= content style= backgroundcolor:white; width:500px; margin-left:20px; > Hello World! </div> </body> </html> 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). 7

The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data.

Review The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. It is not the internet! It is a service of the internet.