This is not the document you are looking for? Use the search form below to find more!

Report home > House and Family

HTML and CSS Guide - DRAFT

5.00 (1 votes)
Document Description
Basic guide I wish for people to view and help me make it perfect
File Details
  • Added: March, 09th 2011
  • Reads: 135
  • Downloads: 3
  • File size: 467.39kb
  • Pages: 5
  • Tags: draft, html, css
  • content preview
Submitter
  • Name: Mathew Hutchison
Embed Code:

Add New Comment




Related Documents

Up to Speed on HTML 5 and CSS 3

by: joeri, 67 pages

Up to Speed on HTML 5 and CSS 3

HTML and CSS Example

by: Aleksander, 1 pages

For a friend

A Reading and Discussion Guide

by: frej, 4 pages

MotherKind By Jayne Anne Phillips Alfred. A Reading and Discussion Guide

New Perspectives on Blended HTML, XHTML, and CSS: Introductory, 2nd Edition. Henry Bojack, CENGAGW, IM+SOLUTIONS+TB

by: mysmandtb, 9 pages

Solution Manuals and Test Banks I have huge collection of solution manuals and test banks. I strive to provide you unbeatable prices with excellent support. So, I assure you that you won’t be ...

Ski and snowboard guide to Bulgaria - Where to go, what to do and how to save

by: manualzon, 107 pages

traveling guide to Bulgaria, with ski and snowboard guide, guide create by expat in bulgaria

HP ProBook 4520s Notebook PC & HP ProBook 4720s Notebook PC Maintenance and Service Guide

by: etoile, 177 pages

HP ProBook 4520s Notebook PC & HP ProBook 4720s Notebook PC Maintenance and Service Guide

HP Universal Print Driver Solution and Feature Guide

by: david, 24 pages

HP Universal Print Driver Solution and Feature Guide

A Quick and Easy Guide To Baby Showers

by: raghavendra, 50 pages

A Quick and Easy Guide To Baby Showers

Maintenance and Service Guide HP Pavilion dv6000 Notebook PC

by: manualzon, 278 pages

service guide hp pavilion DV6000 contains service schematics, service guide notebook, laptop manual shop manual, and troubleshooting guide

Maintenance and Service Guide HP Pavilion zd8000 Notebook PC

by: manualzon, 189 pages

service manual and user guide of HP laptop notebook pavilion dv8000 series

Content Preview

HTML and CSS Guide____________________________________________________
This is going to be a nice and simple guide on how to use and maintain a website just by using
HTML and CSS. There are many websites that can teach you how to use each of these and they’ll
be listed at the end of this guide. If any help is needed, please do try and research as well as
asking someone with excellent knowledge in this field. There are endless tutorials on this so be
sure to check them out, also see references below.

HTML_____________________________________________________________________
The Basics
Getting to know the basics in HTML is pretty simple (CSS will be touched up on later), some
people who have never looked at it pretty much think ‘what the hell is that?’ Well, we’ll get to
know some basic everyday attributes and let’s look at their code. Essentially, when using HTML
you should always close off the tags. For example: <code here> </code here>
In the following table will be a few attributes you can use for your daily designs:
Attribute Names
Code (Open)
Code (Open) Result
Bold
<b>
</b>
Bold
Break
<br>
--
Space
Italic
<i>
</i>
Italic
Strikeout
<s>
</s>
Strike Out
Underline
<u>
</u>
Underline
Center
<center>
</center>
Center

Well these are your basic attributes to use, you can also have a few special ones which can be
used for fun use which will be referred to later on in this guide as well. Now, we need to simply
dissect a webpage. You can simply refer to a webpage being a human being, supporting this: A
webpage has a header, body and a footer. Now let’s begin to define these below:
Header
A header is used to put all style properties for your website. This is to ensure these are loaded
before the body is used. In the example below, you’ll see what a header, body and footer looks
like. You can add your title, style sheets as well as other scripts into here.
Body
This is what your user will see. Generally what is seen through the eyes of the internet. So for
example, if you went to http://www.google.com and see what it looks like, then that’s their
body.
Footer
Closes off the website, some scripts are usually permitted here but we’ll touch up on this later
on.
In the example, you will see:
<title> </title>
This refers to the little text that is shown on the top of the web browser as well as on the
HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 1



browsers tabs. This helps let the user know what page they are on as well if it is the correct
website.

HTML Example
************************************************************************************************
<html>
<head>
<title> Your website title can be here, feel free to change it </title>
</head>
<body>
<center> <b>Hi, this is a test page</b> </center>
</body>
</html>
************************************************************************************************
You can grab the code above and put it in a Notepad/Wordpad document. When saving web
pages, you must always specify what type of code it will be. Since we’re looking at HTML for the
moment, you should save it as: “index.html” But why index.html? Why not testpage.html? Well,
it can be anything you like I guess, as long as it ends in the .html format. Essentially there are a
lot of other ones but let’s not get too detailed.. Yet. Index.html lets the web server know that this
would be the first file to come online when you go to a website.
Getting Into More Detail
Okay, so you’ve just learnt pretty much the basics of the HTML ways. We now need to consider,
what else can HTML do? I could provide HTML 5.0 but that’s up to you guys to do that
yourselves. In this section, some more codes will be provided for you to use. However, examples
will not be shown do to this guide being only text based. What will be provided are the names
and the effects that they can do.
Attribute
Code
Effect It Does
Marquee
<marquee>
Makes text scroll, left to right
Header (h1 through to h6)
<h1> to <h6> Changes text size. H1 is the biggest

I didn’t add the closed tags because it’s pretty much the same thing except with the forward
slash added (/). Now particularly I left out one attribute out on purpose. I want to give this a
little bit of an explanation for this, not a lot but it’s should be a bit more than the small table.
The code that I am referring to is known as the A Href tag. This lets the coder to turn a piece of
text into a link which can lead to another page or website. The code for this would be: <a
href=”LINK GOES HERE”> You can put the text here</a> - See how this needs a bit more?
Another trick that you can do, is instead of using the ‘You can put text here’, you can also insert
another tag which is also the Image SRC tag. This lets you insert an image on your page using:
<img src=”Your image location here”> - You can put this code and then you’re a href tag will
become an image button. When inserting an image, it is always important to provide a stable
folder for the images to be located in. This is generally supported in the code by using: <img
src=”../images/YOURIMAGE”>
HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 2



In the next example, you will see the use of images and how you can use them to link to another
website or even a webpage on your current website. Do take note that mistakes can be easily
done when writing codes manually, so you should always check if there are any errors.
HTML Example with Images
************************************************************************************************
<html>
<head>
<title> Your website title can be here, feel free to change it </title>
</head>
<body>
<center> <a href=http://google.com><img src=”../images/google.png></a> </center>
</body>
</html>
************************************************************************************************
Since this website has no folder attached, you can create this yourself and use it to your own
imagination. You can use this code and add whatever you like, like I said, it’s up to your own
imagination.
Concluding HTML
As mentioned in the top part of this guide, there are other tutorials online that can provide extra
bits into different parts of HTML. This can include forms, tables and more. This is basic, but it
covers all the basics that you can use and what you need to know.
CSS________________________________________________________________________
CSS seems tricky once HTML is learned. While the use of Cascading Style Sheets (CSS), it’s pretty
much simplifying the HTML provided and making it look cleaner and sexier. To use CSS, you use
div tags which help let the webpage know what properties to use.
In order to use DIVs, then we need to know what the div tag is. This is just simply using:
<div id=”DIV ID”> Any extra information here will be explained </div>
Like human identification, then DIVs need ‘personal’ ids. So now let me explain what simple
properties you need to know when using cascading style sheets which I’ll show in the table
below.
DIV ID
Code
What it does
Margin-Left/Right/Top/Bottom Margin-left: px;
Positions the div
Background-color
Background-color: px;
Changes the bg color
Background-image
Background-image: url(img); Changes the bg image
Color
Color: #hex;
Changes the font color

When we use divs, they are a lot more different than using HTML codes. In the bolded ID, this
can be customised to however you want it. Below will be shown what the body div looks like
and then another content div looks like. Also note that CSS and HTML are using American
language so color is not colour!

HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 3




CSS Example Code
************************************************************************************************
body {

background-color:
#ffffff;

color:

#000000;
}
#content {

Margin-left:

auto;

margin-right:
auto;
}
************************************************************************************************
This is our basic body and content div stylesheet. We use the background color to change the
background to black while we use color to make the font white. When you use margin-left and
margin-right on auto, it centers the div to the middle of your screen. But wait, what do we save
this file as? How would it be inputted in our website? Using stylesheets, they use the .css format.
When you save the file, make sure to save it as style.css, alternatively you can use anything as
style but it’s more convenient.
When we use a separate stylesheet then we must use a separate link which is added onto the
<head> tags within the HTML page. The code for this we would use:
<link rel=”stylesheet/css” href=”style.css”>
Please do take note that you do not have to close off these tags.
There are a lot of tricks that CSS can provide. Adding in navigation bars, putting images on top
of others as well as layering. When using this, make sure you correctly layer your divs properly
so it looks neat and clean.
HTML and CSS______________________________________________________________________
We should utulise with the knowledge we have currently, if you’ve decided to research more
into this, then that’s probably a good idea. This is the last example providing a source code
showing two separate text files using CSS and HTML working together. You can put these codes
into notepad and edit it yourselves.
Before we start, we should make sure you have these checkpoints set:
Have You:
Y/N
Learnt the basic HTML attributes
Y/N

Covered the extra HTML attributes
Y/N

Researched into more HTML codes
Y/N
Learnt the basic CSS attributes
Y/N
Know the CSS reference code
Y/N

Understand everything in this document


HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 4



Full Example Code
************************************************************************************************
index.html
************************************************************************************************
<html>
<head>
<title> HTML and CSS Source Guide </title>
<link rel=”stylesheet/css” href=”style.css”>
</head>

<body>

<div id=”container”>
Welcome to my site. <br>
<a href=”#”><img src=”image.png”></a>
</div>

</body>
</html>
************************************************************************************************
style.css
************************************************************************************************
body {


background-color: #000fff;


color:

#ffffff;
}
#container {


margin-left:

auto;


margin-right:
auto;
}

References_________________________________________________________________
In this section, we can use some tutorial sites that can further your web design experiences and
knowledge. Some great sites include:

http://www.w3schools.com
http://www.quackit.com
http://www.tizag.com

Other tutorials that use videos are great and give you a great sense of knowledge. Go out and
explore more information and have fun while doing so.
HTML and CSS Guide – Written in 2011 by Mathew Hutchison
Page 5


Download
HTML and CSS Guide - DRAFT

 

 

Your download will begin in a moment.
If it doesn't, click here to try again.

Share HTML and CSS Guide - DRAFT to:

Insert your wordpress URL:

example:

http://myblog.wordpress.com/
or
http://myblog.com/

Share HTML and CSS Guide - DRAFT as:

From:

To:

Share HTML and CSS Guide - DRAFT.

Enter two words as shown below. If you cannot read the words, click the refresh icon.

loading

Share HTML and CSS Guide - DRAFT as:

Copy html code above and paste to your web page.

loading