More Related Content
What's hot
What's hot (11)
Viewers also liked
Viewers also liked (15)
Similar to Html n css tutorial
Similar to Html n css tutorial (20)
More from zubeditufail
More from zubeditufail (20)
Recently uploaded
Recently uploaded (20)
Html n css tutorial
- 1. 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
- 2. 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 class='wrapper'> <div class='header'> </div> <div class='content'> </div> </div> </body> Nowwe create a side barsection,the classname isset to 'side'... <body> <div class='wrapper'> <div class='header'> </div> <div class='content'> </div> <div class='side'> </div> </div> </body> Andfinally,we create afootersectionwithaclassname of 'footer'... <body> <div class='wrapper'> <div class='header'> </div> <div class='content'> </div> <div class='side'> </div> <div class='footer'> </div> </div> </body>
- 3. 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)...
- 4. 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; 5. margin: 0px auto; 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; 6. margin: 0px auto; 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.
- 5. 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; 7. margin: 0px auto; 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; 6. margin: 0px auto; 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!