Download to read offline
Uploaded byzubeditufail
DOCX, PDF165 views
Html n css tutorial
This document provides a two-part tutorial on creating a basic webpage with HTML and CSS. The first part covers the HTML structure, including adding divs for the header, content, sidebar, and footer. The second part covers styling the HTML elements with CSS, including setting widths, heights, colors and positioning for each section. Styling is applied to elements like the wrapper, header, content, sidebar and footer. The tutorial provides the necessary CSS code to style each element and position them on the page. Once completed, the basic webpage structure and styling is finished but no actual content is added yet.
Recommended
More Related Content
What's hot
Viewers also liked
Similar to Html n css tutorial
![[SUTD GDSC] Intro to HTML and CSS](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fintrotohtml-230215093923-21d7cfc6-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More from zubeditufail
Recently uploaded
Html n css tutorial
- 1.Basic HTML/CSS WebPagePart 1 - HTMLSubmittedby:YorkiebarSaturday,April 5, 2014 - 08:26Language:HTML/CSSIntroduction:Thistutorial isgoingto be the firstof two basicparts on how to create a basic webpage withtheessential componentsusingpure HTML and CSS.The Structure:Our webpage isgoingto consistof a headercoveringthe full widthof contentatthe topof the page,abodysectioncoveringmostof the wide fromheadertofairlyfardownthe page,a side barcontainingwidgetsonthe righthand side of the page - nexttothe mainbodysectionof the page,and a footcoveringthe same width(andprobablyheight)asthe headersection;underneathourbodyandside barsections.ThisPart:Thispart is goingto be on the HTML (HypertextMarkupLanguage),the secondpartisgoingto be onstylingthe 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 displayandgraphicsinformationsuchasthe headers,footers,images,etc.For thispage we are goingto be usinga CSS file inthe nextpartso we'll firstinclude thatfile(it'snotyetcreatedthoughbut 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 thetype of contentholdertagsfor separatingoursectionsout.Divs - or Divisions - are usedto holdfair
- 2.amountsof data, splitthemupinto easilyreadableandusable sections,aswell asbeingable toholdotherHTML tags withinthem.The other thingyouwill needtoknowaboutare classesandIDs. ClassesandIDs are usedinCSS to pairthe stylinggivenwithwherethe stylingshouldbe appliedtowithinthe givenHTML/Jade/PHPfiles.AnyHTML tag can have a CSS ID or Class.Classesare supposedtobe usedforstylingthatisusedmore thanonce and for importantcomponentswithinfileswhile IDsare supposedtobe usedforsingularitemsthat onlyexistonce withinafile - suchas an article withaspecifictitle,the idcouldbe the title becauseit wouldn'tcome upagainwhereasthe classcouldbe 'article'because articleswouldbe usedmultipletimesandtheywouldhave touse the same styling.So firstwe move into our bodysection,betweenthe openingandclosingbodytagsandtype twonewdivs,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 allof our sectionsinthe wrapperdivbecause we are goingtouse the wrapperdivtoset theboundarieson-screenforthe restof the componentsof the webpage.Classand ID namescan be set towhateveriseasiestforyou,the developerbutmustbe rememberedoreasilyfound/relatedtowhenusingthemlaterontostyle the elements.NextTutorial:Nexttutorial we are goingto be stylingthese elementsusingourstyle.cssfile whichwe will createwithinthattutorial.Basic HTML/CSS Web Page Part 2 - CSSSubmitted by:YorkiebarSunday, April 6, 2014 - 18:43Language:HTML/CSSVisitors 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 withthe 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 thepage, a body section covering most of the wide from header to fairly far down the page, a sidebar containing widgets on the right hand side of the page - next to the main body section of thepage, 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 onstyling 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 browsersdefault styling that the user is currently using to access the webpage. We do thsi by setting theall 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 extraspace), 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 uslater 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 theentire 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, isgoing to set the boundaries for the rest of the components. Since we want the rest of thecomponents to center on the page (within reason of course), we are going to give this wrapperclass div a width of just 980px (essentially the most commonly used desktop width) and center itin 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 to0px white space/extra space, and the left and right sides to auto - which means they have to bethe 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 tohex code #ccc which is a light grey. We are going to set the header to have a width of 980px aswell, 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 withoutcontent. By default, the height and width properties are set to auto which means they will onlygo as big as they need to be, so since we have no content within the divs, they would not showup 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, giving280px 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 othercontainers have the ability to be inline with or go past it.The background colour of this content section is blue.
- 5.Side:The side barfills up the rest of the space next to the content section. This section has 260pxbrowser width, which added with the 700px browser width of the content container, gives us atotal of 960px used giving 20px spare. So we use this 20px to separate the two sections bygiving 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 wantthem 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 previouscomponents 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 sectionno longer affect the components. This means that it will go with the grid like layout. Whereas ifwe didn't have this clear both property on the footer, it would simply go and hide behind thecontent 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, butas you can see, it has no content and doesn't look very nice. I've used the different bold coloursto 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, addcontent and make them flow with each other. If you look forward to seeing them, make sure tocheck my tracking on my account/profile page to see if they have been posted yet, or check outany of my other thread posts.Thanks for reading!