Monthly Archives: June 2014

CSS and HTML refresher!

This is my basic refresher to HTML and CSS, I will try to go over some basic information to get you started with creating your own html content, and you can learn the rest as you go along.  There are tons of references online!

First go make a new folder in your computer, and create a new file saved with a .html extension, such as index.html.  Now open that file up in a text editor like sublime, typically all html pages start off with the version of html

<!doctype html>

that signifies that we are using HTML5.  Don’t worry about the why just remember to type that in for now.  If your curious you can google it.  

Web pages are created with html tags, tags are started off with something like <body> and when the content in the body is finished the tag is closed off with </body> , notice the foward slash indicating that the tag is finished.

Pages are usually formatted as shown below.  I didn’t use good indenting but you should, because it shows relationships between each element, and whether they are direct descendants or siblings of each other.  

<!doctype html>

  <html>

  <head>

  <title>My website</title>

  <meta charset=”utf-8″/>

  </head>

  <body>  

    <h1>some text</h1>

    <p>the  h1 tag above stands for header level 1 element, generally its the top most heading, receives the most weight, and search engines may rank your site according to the description here.  Notice below the h1 tag is closed out.  Right now we are in a paragraph tag.  How does the browser know whether some text should be bold, or specific font weight, or size?  Well browsers have default styling in place.  It is up to us to override it to create the pages in<em> our</em> image.  The em in between the word ‘our’ gives emphasis or makes that text italic.  Strong elements are used to bold out <strong>contents</strong>, html describes your content.</p>

     <p>reach me here at my <a href=”www.jubclubhub.com” target=”_blank” >site</a>.  Notice the anchor tags between the word ‘site’.  This is so I can create a clickable link.  To make a link type in href=”” with your site address.  </p>  

<img src=”img/photo.png” alt=”photo”/>

<p>  Above is the syntax for putting images on your site.  Is is similar to linking, but instead of href we use src =”” which stands for source.  So you would save an image file to your project folder under a folder that you created called image for example.  Now it is good practice if you are linking to an image that you pay for that image and not hot link to the web address of that image.  Linking to an actual address isn’t fair to the owner of that site because you are using their server to link to that image.  Instead you should download that image into a image folder in your project, then you can link to that directory.  The alt= “” is used as a description of the image incase it doesn’t show.</p>

  </body>

</html>

You will notice in different html elements sizes or indentations may be different.  How do we override the default attributes that html gives us?  We use CSS and style attribute tags.  Lets say we have a paragraph tag that is linking to a page.  To apply some CSS styling to it we will use a style attribute.  

Notice below there is a anchor tag attribute that links to mysite.html.  In the style attribute we can use CSS, such as color:blue;, this just a statement that says “get the color: make it yellow”.  You can use rgb values for example color: rgb(10,200,20);, or hex values for example  color:#e3e3e3; .

<p><a href=”mysite.html” style=”color: blue;  text-decoration: underline;”>Click here!</a></p>

Notice I added more styling attributes like text-decoration, and there are many more such as background-color:, font, etc.  This is an example of inline CSS where you are mixing styling with presentation and as you can see it can get really messy, imagine all your html having styling like this on every line!  You wouldn’t be able to read your code.  You shouldn’t use this method to often.  

Instead use a style sheet.  All you have to do is create a new folder in your project called style or what ever you want, then make a new blank file, give it a name and save it as a .css.  So now you can keep your html file clean by referencing specific html elements and giving it CSS styling in another file.  This also allows you to make easy changes in your styling.  Instead of having to edit through every element in your html you can just edit it once in the style sheet, all those attributes will filter down to the specific class, id, or element you chose.  

This is the external style sheet method.  Now say we made this new style.css file with our CSS changes but our index.html file isn’t changing.  Well that is simply because the browser doesn’t know that we want to pull in the styling from that new file, we have to link to it to let the browser know where our changes are coming from.  So in your index.html file you will provide a link to that file in between the <head> </head>portion of your index.html file.  

<head>

      <link rel=”stylesheet” href=”style.css”>

</head>

In your style sheet you must be specific about the css changes and what elements they are to affect.  This is an example of a CSS style sheet called style.css. 

p {

        color: red; 

        font-family: arial;

}

The ‘p’ before {  } represents the element paragraph tag, what ever is inside the brackets is the CSS.  You can apply commas between for multiple elements.

img, p, h1  {

        color: red; 

        font-family: arial;

}

Selecting multiple elements using commas can be bad practice, it is applying attributes for every single element on the page that you chose.  What if I had another image or paragraph later.  Instead wrap material that are related in a div tag in the index.html file as shown below.  

Be sure to close out those divs or you can have problems later on.

<div>

   <h1>hey</h1>

    <p>

    </p>

    <img src=”” alt=”picture”/>

</div>

Now in your CSS style sheet style.css file you can provide styling for that specific division.  

   div {   

          color: red;  width: 500px; margin:auto;

          font-family: arial;

    }

 

Internal style sheet is used when a small area has a unique style, or maybe it is just a small change that you want to complete that won’t make the html file look to messy.  To use internal style you just make a style tag inside the header section of the html page.  

<head>

   <style>

      p {margin-right: 10px;}

      body  {background-image: url(“image/pic.png”);}

  </style>

</head>

——————————————————————————————————-

To target a very specific element lets say you have an unordered list <ul> and list items <li>, you can specify an item by giving it an ID.  We use an Id to target only one element.  I’ll use internal style sheet to edit the CSS.   Use ‘#’ to indicate ID is being used in style sheet.  

<head>

     <style>

      #rah {

          color: green;

      }

     </style>

</head>

 

<body>

<ul>

   <li id=”rah”>milk</li> 

   <li>eggs</li> 

   <li>juice</li> 

   <li>beer</li> 

</ul>

</body>

 

 

We use classes to target a group of elements.  Use ‘.’ to indicate class.

<head>

     <style>

      .rah {

          color: green;

      }

     </style>

</head>

 

<body>

<ul>

   <li class=”rah”>milk</li> 

   <li>eggs</li> 

   <li> class=”rah” juice</li> 

   <li>beer</li> 

</ul>

 

Because of Cascading order if there is more than one style for an html element, the styles will cascade in a funny ways according to priority.  With Inline style being highest priority.    

1-browser, 2- external style sheet, 3- internal style, 4- Inline style  

 

Tagged ,

github

Finally put something in my github account I created months ago, and it just sat there!  Will be posting a lot more stuff on there soon.

https://github.com/wjin0352