Beginner CSS/HTML tutorial

Beginner CSS/HTML tutorial

This is the ultimate CSS and HTML Beginner Tutorial, it starts with opening an editor and goes to inserting content.

This tutorial has been viewed: 5294 times

 

Intro to CSS/HTML

This tutorial is aimed at a few different people.

  • Those who want to learn more programming/scripting.
  • Those who are tired of trying to read messy HTML files.
  • Those who have procrastinated staying with the times.
  • Those who just don’t anything.
  • And finally, those who just want to make their site look good!

Reguardless of why you are reading this you are already well on your
way to having a good looking site.

HTML

So you want to make a web site huh? Fine. See if we can learn you a
thing or two.

I’m not aiming for any kind of website in particular, I’m just going
to give you the steps on how to create the basic parts that you will
need to create your own website. This means you’ll have to do some
coding. We are going to use a language called HTML (Hyper-Text Markup
Lanuage). HTML is very easy to use, and so I’m not going to give you a
discourse on it. We’re diving right in.

First we’re going to need a place to write our code for our website. For
this tutorial we’ll use Notepad. Any text editor will do though.
If you don’t know what that is don’t worry. I’ll get you there.

  • Click on Start
  • Click on All programs
  • Click on Accessories
  • Click on Notepad

Once you have your Text editor open put this code into it. Don’t
worry, I’ll explain everything.

<br /> <html><br /> <head><br /> <title></title><br /> </head><br /> <body><br /> </body><br /> </html><br />
This is as simple as it get in having a skeleton to work with. These
are the most common HTML tags and in virtually every web page. At any
time you can save your work and view it in a web browser.

  • Click on “File”.
  • Click on “Save As”.
  • Type whatever you want the name to be and put “.html” at the end of it.
  • Then click the drop down arrow on “Save as type” and change it to “All Files”.
  • Save the file wherever you want.
  • Double click on the file after saving it and it will bring it up in the browser.
  • Now all you have to do is go to “File” and click “Save” every time you update your code.
  • As you go through this tutorial or as you code, save often.
  • The
    first tag is the “html” tag. This tag tells the browser “Hey I’m coding
    in HTML here!”. The “head” tag is where we can tell the browser as well
    as the server a lot of things. The only thing we’ll concern ourselves
    with though is the “title” tag. The “title” tag goes in side the “head”
    tags. Whatever you put inside those “title” tags will be the title of
    the Web page. For example. Look at the top of your window or tab. It
    says “Beginning CSS/HTML”. I did it because I have this code in my
    page

    <br /> <head></p> <p> </head><br />

    Cool huh? Now we come to the “body” tags. This is where we get to the
    meat of this business. The “body” tags are basically where everything else
    goes (pictures, links, etc.).

    Now take note for every tag I make,
    I have a closing tag to go with it designated by the “/” in the tag.
    These are a requirement. If you don’t agree then you just got an “F”
    and I’m not telling you anymore.

    Now I’m going to give you some stuff to put inside those “body” tags
    of yours to give a little bit of substance to your page. We’re going
    to start with a the paragraph tags. The paragraph tags are in the form
    of

    <p>This is a really boring paragraph</p> <p> See? No sweat.
    “P” for paragraph. There’s nothing to it. Just put that code inside
    your “body” tags and your good to go. You got some substance. Don’t
    worry though, we got more for you. And just like in writing your
    school paper you can make new paragraphs as much as you would like
    <br /> <body></p> <p>This is a really boring paragraph</p> <p>As is this one</p> <p> </body><br />

    Check that out. The browser even knew to skip some space and start a
    new paragraph for us.

    I know that’s not overly exciting so how about a link? For links we
    use what are called the “anchor” tags. The “anchor” tags are done like
    this

    <a href="http://www.google.com">A boring link</a>
    The “a” stands for “anchor”. Notice we got something new. Inside the
    first anchor tag we have the “href=…”. This is an attribute that is
    assigned a value. The “href attribute” tells the browser where to go
    when the link is clicked on. So “a” creates the link or “anchor” and
    the attribute tells it “where”.

    Now as studly as that was, we’re going to throw an image into our
    web page as well. And a break and a list and a table, and I think
    that’ll give us a nice page.

    <br /> <body><br /> ..<br /> <img src="http://psdesignzone.com/images/beginnerCSS/mypic.jpg" /><br /> </p> <ul> <li>This is a lame list</li> <li>This is a lame list</li> <li>This is a lame list</li> </ul> <table> <th> <td>What a cool table</td> </th> <tr> <td>I want to cry</td> <td>Me to</td> </tr> <tr> <td>Stop crying</td> <td>We&#8217;re about to learn cool stuff!</td> </tr> </table> <p> </body><br />

    If you look at it carefully you can almost read it as if it was
    english. For an image you have the “img” tag with the source (“src”),
    attribute to tell where the image is. We have a break in the page for
    some white space “br”. There’s the “unordered list” (“ul”) tag. Which
    basically means you have a list with no order (bullets). I’ll let you
    try and guess how to do an orderded list. Then we have the “table” tag.
    If you have used Excel before then you know what a table is. It’s
    simply a grid to make things look nice and organized. You first declare
    your rows (“tr”) and then at you do you header (“th”). Then when you
    go to your next row you insert your data (“td”).

    Make sure you close off all your tags. Some of them like the image and
    break tags don’t have anything out side the initial declaration so they
    are closed by having the “/” at the end of the statement right before
    the closing bracket.

    How’s that? You made a web page. Now lets make it look a bit nicer.

    CSS

    Probably the first thing you need to learn is when you make your HTML
    file. Don’t do anything extra. Don’t do something along the lines of

    <body background='blah blah'> Nope we don’t do that. Leave that
    alone. Just don’t touch it <body> That’s all you need. You don’t want to try
    and make your site look good in the HTML file. In fact you want your
    HTML file by itself to look like you just started learning. White
    background, no font color, no centering anything. Just leave that all
    alone. I promise you won’t regret it.

    That is what your HTML should look like. Don’t try and spice it in
    any way.

    Enter CSS!

    I’m going to insert one line into that HTML file between the “head”
    tags

    <link rel="stylesheet" type="text/css" href="css/mycss.css" />

    And we go from this

    to this

    CSS Is the design/style for your website and HTML is the content. Seperating
    your content and style gives your code a lot more readability preventing
    confusion and making it far easier for someone else you work with to
    modify your code if needed. How is this done you ask well I will show
    you the css code and explain each part. Take note in the line we
    inserted into the head tag

    <link rel="... at the end of it
    we have href=&#8221;css/mycss.css&#8221; /> This is telling where the
    css file is. Now lets take a look at the file. Don’t worry this one
    is short.

    <br /> /* CSS Document */<br /> body{<br /> background-color: #000000;<br /> font-family: Verdana;<br /> font-size: 11px;<br /> color: white;<br /> }<br />
    If you put the tags /* and */ up then anything between them is just
    a comment. When you code, comment often so you remember what you are
    doing and others will be able to see what you are doing also.

    The actual code starts off with “body”. This is telling the browser
    that we we’re going to add some style to everything inside the body
    tags. In CSS “body” is what would be called a Selector becuase it is
    what we are selecting to modify. Then we proceed to insert properties
    and their values with which we are going to make our site look good.
    The properties and what they do are self explanatory because you
    probably recognize it from trying to do that in your HTML code from
    before.

    Learning CSS will save you a lot time, coding, space, headaches,
    disease, plauges, and even from Armegeddon (almost anyway). CSS is a must
    go ahead and continue with more tutorials. This one has served to be an
    introduction to what CSS is and can do.

    Tags: , ,

 
Added By:
  1. Alexwebmaster Said: Comment by Alexwebmaster on March 3, 2009 at 12:43 pm | Permalink
     

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

    Reply

 

Leave a Comment