Html n css tutorial

Basic HTML/CSS WebPage Part 1 - HTML
Submittedby:
Yorkiebar
Saturday,April 5, 2014 - 08:26
Language:
HTML/CSS
Introduction:
Thistutorial isgoingto be the firstof two basicparts on how to create a basic webpage withthe
essential componentsusingpure HTML and CSS.
The Structure:
Our webpage isgoingto consistof a headercoveringthe full widthof contentatthe topof the page,a
bodysectioncoveringmostof the wide fromheadertofairlyfardownthe page,a side barcontaining
widgetsonthe righthand side of the page - nexttothe mainbodysectionof the page,and a foot
coveringthe same width(andprobablyheight)asthe headersection;underneathourbodyandside bar
sections.
ThisPart:
Thispart is goingto be on the HTML (HypertextMarkupLanguage),the secondpartisgoingto be on
stylingthe componentsinCSS(Cascade Style Sheets).
Main HTML File:
Firstwe want to define abasicHTML file,itneedsthe doctype,html andbodytags...
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>
Head:
For those of you whohave notusedHTML before,the headtagsare usedto containthingslike imports,
requiresandexternal references,while the bodysection of tagsisusedtoholdthe displayandgraphics
informationsuchasthe headers,footers,images,etc.
For thispage we are goingto be usinga CSS file inthe nextpartso we'll firstinclude thatfile(it'snotyet
createdthoughbut still shouldn'tgive usanymajor,website breakingerrors)...
<head>
<link rel='stylesheet' href='style.css' type='text/css'>
</head>
We reference afile named'style.css'withinthe same directoryasthe file the code iscontainedin
(index.html).We'llcreate thisinthe nextpart.
Nextwe are goingto give our page a title,thiswill show upinthe tab/windowframe of the webpage...
<head>
<link rel='stylesheet' href='style.css' type='text/css'>
<title>My Basic Webpage</title>
</head>
Body:
Nextwe are goingto want to create the mainbodysectionof the page.We are goingto use divsas the
type of contentholdertagsfor separatingoursectionsout.Divs - or Divisions - are usedto holdfair

amountsof data, splitthemupin to easilyreadableandusable sections,aswell asbeingable tohold
otherHTML tags withinthem.
The other thingyouwill needtoknowaboutare classesandIDs. ClassesandIDs are usedinCSS to pair
the stylinggivenwithwherethe stylingshouldbe appliedtowithinthe givenHTML/Jade/PHPfiles.Any
HTML tag can have a CSS ID or Class.Classesare supposedtobe usedforstylingthatisusedmore than
once and for importantcomponentswithinfileswhile IDsare supposedtobe usedforsingularitems
that onlyexistonce withinafile - suchas an article withaspecifictitle,the idcouldbe the title because
it wouldn'tcome upagainwhereasthe classcouldbe 'article'because articleswouldbe usedmultiple
timesandtheywouldhave touse the same styling.
So firstwe move into our bodysection,betweenthe openingandclosingbodytagsandtype twonew
divs,one fora wrapperand the otherfor our header.We give themthe appropriate classnames...
<body>
<div class='wrapper'>
<div class='header'>
</div>
</div>
</body>
Next,underneaththe headerwe wanttocreate a bodysection,I've namedthe class'content'...
<body>
</div>
<div class='content'>
</div>
</div>
</body>
Nowwe create a side barsection,the classname isset to 'side'...
<body>
</div>
</div>
<div class='side'>
</div>
</div>
</body>
Andfinally,we create afootersectionwithaclassname of 'footer'...
<body>
</div>
</div>
<div class='side'>
</div>
<div class='footer'>
</div>
</div>
</body>

We encase all of our sectionsinthe wrapperdivbecause we are goingtouse the wrapperdivtoset the
boundarieson-screenforthe restof the componentsof the webpage.
Classand ID namescan be set towhateveriseasiestforyou,the developerbutmustbe rememberedor
easilyfound/relatedtowhenusingthemlaterontostyle the elements.
NextTutorial:
Nexttutorial we are goingto be stylingthese elementsusingourstyle.cssfile whichwe will create
withinthattutorial.
Basic HTML/CSS Web Page Part 2 - CSS
Submitted by:
Yorkiebar
Sunday, April 6, 2014 - 18:43
Language:
HTML/CSS
Visitors have accessed this post 65 times.
Introduction:
This tutorial is going to be the second of two basic parts on how to create a basic web page with
the essential components using pure HTML and CSS.
The Structure:
Our web page is going to consist of a header covering the full width of content at the top of the
page, a body section covering most of the wide from header to fairly far down the page, a side
bar containing widgets on the right hand side of the page - next to the main body section of the
page, and a foot covering the same width (and probably height) as the header section;
underneath our body and side bar sections.
This Part:
The first part was on the HTML (Hypertext Markup Language), this second part is going to be on
styling the components in CSS (Cascade Style Sheets).
All Components:
First we want to ensure that all the components have our default styling instead of the browsers
default styling that the user is currently using to access the webpage. We do thsi by setting the
all components property which is a star/an asterix (*)...
1. * {
2. padding: 0px;
3. margin: 0px;
4. font-size: 18px;
5. font-color: #0a0a0a;
6. font-family: Verdana;
7. }
We give all the components a default value of no padding or margin (no white space or extra
space), and a default font size, colour and family. (Note; Colour must be spelt the american way
(color)).
We set the default properties for all the components at once because it makes it easier for us
later on without having to re-type the same property code for many different components.
HTML:
This part is not really needed but we also set the html tags to have a full 100% width of the
entire browsing window and a default height (it should stop wherever the components do)...

1. html {
2. width: 100%;
3. height: auto;
4. }
Wrapper:
Next we have the wrapper class. This wrapper class, as mentioned in the previous tutorial, is
going to set the boundaries for the rest of the components. Since we want the rest of the
components to center on the page (within reason of course), we are going to give this wrapper
class div a width of just 980px (essentially the most commonly used desktop width) and center it
in to the middle of the 100% browser width html tags...
1. .wrapper {
2. width: 980px;
3. margin: 0px auto;
4. background-color: #ccc;
5. }
We center the wrapper class by giving it a margin of '0px auto', this sets the top and bottom to
0px white space/extra space, and the left and right sides to auto - which means they have to be
the same, and are therefore centering the container.
Header:
Now we need to style the header. As you can see, we set the wrappers background colour to
hex code #ccc which is a light grey. We are going to set the header to have a width of 980px as
well, center it in the wrapper container div and give it a background colour of black...
1. .header {
2. width: 980px;
3. height: 80px;
4. background-color: black;
6. }
We also set a height property on the header class because we want to be able to see it without
content. By default, the height and width properties are set to auto which means they will only
go as big as they need to be, so since we have no content within the divs, they would not show
up at all.
Content:
Now we have the content div. Instead of giving this one a full 980px browser width of the page,
we want it to stand by the side of the side bar so we set the content to 700px width, giving
280px spare space to use.
1. .content {
2. width: 700px;
3. min-height: 450px;
4. float: left;
5. background-color: blue;
7. }
We also float the content block left which means it will go as far left as possible and other
containers have the ability to be inline with or go past it.
The background colour of this content section is blue.

Side:
The side bar fills up the rest of the space next to the content section. This section has 260px
browser width, which added with the 700px browser width of the content container, gives us a
total of 960px used giving 20px spare. So we use this 20px to separate the two sections by
giving this side bar a 20px padding on the left of it.
1. .side {
2. width: 260px;
3. min-height: 450px;
4. padding-left: 20px;
5. float: right;
6. background-color: red;
8. }
Again, we set a default minimum height, the same as the content container since we may want
them to be the same size at a minimum to make the page look like it has a nice grid like layout.
The background colour of the side bar is red.
Footer:
Finally we have the footer container, this footer has the properties we've seen in all the previous
components but there is one new one, that is 'clear: both;'.
Clear both means that the floats that occured above the section that has the clear:both section
no longer affect the components. This means that it will go with the grid like layout. Whereas if
we didn't have this clear both property on the footer, it would simply go and hide behind the
content and side bar containers - try it out, remove the line and refresh your index.html page.
1. .footer {
2. clear: both;
3. width: 980px;
4. height: 80px;
5. background-color: black;
7. }
Finished, But...
So that is the basic two part tutorial series of setting up a basic HTML and CSS webpage, but
as you can see, it has no content and doesn't look very nice. I've used the different bold colours
to easily show you exactly where the boundaries of each section begin and end.
So, I will almost definitely make another few tutorials on how to make them look nice, add
content and make them flow with each other. If you look forward to seeing them, make sure to
check my tracking on my account/profile page to see if they have been posted yet, or check out
any of my other thread posts.
Thanks for reading!

Html n css tutorial

Recommended

More Related Content

What's hot (11)

Viewers also liked (15)

Similar to Html n css tutorial (20)

More from zubeditufail (20)

Recently uploaded (20)

Html n css tutorial