Transcript
  • 7/30/2019 Web Designing Basics HTML and CSS

    1/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Food Living Outside Play Technology Workshop

    Web Designing Basics (HTML and CSS)by vishalapar on December 30, 2011

    Table of Contents

    Web Designing Basics (HTML and CSS) ............................................................................................

    Intro: Web Designing Basics (HTML and CSS) ....................................................................................

    Step 1: What is a website made of? .............................................................................................

    Right click on any blank area on the webpage. ...................................................................................

    Click view page source .....................................................................................................

    This will open up a new window or a tab according to your ..........................................................................

    Step 2: HTML, What is i t? ....................................................................................................

    Hyper Text Markup Language... ..............................................................................................

    Step 3: What do you need? ...................................................................................................

    Step 4: Basic Structure of an HTML document .....................................................................................

    Step 5: HTML heading tags ...................................................................................................

    Step 6: Text elements (Tags) in HTML ...........................................................................................

    Step 7: Logical Styles for text in HTML ..........................................................................................

    Step 8: Physical Styles for text in HTML ..........................................................................................

    Step 9: Adding images in HTML ...............................................................................................

    Step 10: Lists in HTML ......................................................................................................

    Step 11: Links in HTML ...................................................................................................... 1

    Step 12: Anchor Linking in HTML .............................................................................................. 1

    Step 13: Tables in HTML ..................................................................................................... 1

    ............................................................................................ 1

    Step 14: Frames and IFrames in HTML .......................................................................................... 1

    Step 15: HTML common Entities ............................................................................................... 1

    Step 16: Quote and Blockquote tags ............................................................................................ 1

    Step 17: Title the webpage in HTML ............................................................................................ 1

    Step 18: Meta tags in HTML .................................................................................................. 1

    Step 19: CSS, What is it? .................................................................................................... 1

    Step 20: Syntax in CSS ...................................................................................................... 1

    Step 21: Adding comments in CSS ............................................................................................. 1

    Step 22: CSS ID and CLASS rules ............................................................................................. 1

    Step 23: 3 types of style sheets... .............................................................................................. 1

    Step 24: CSS Text styles ..................................................................................................... 1

    Step 25: Font styles in CSS ................................................................................................... 2

    Step 26: CSS background styling .............................................................................................. 2

    http://www.instructables.com/member/vishalapar/?utm_source=pdf&utm_campaign=titlehttp://www.instructables.com/tag/type-id/category-workshop/http://www.instructables.com/tag/type-id/category-technology/http://www.instructables.com/tag/type-id/category-play/http://www.instructables.com/tag/type-id/category-outside/http://www.instructables.com/tag/type-id/category-living/http://www.instructables.com/tag/type-id/category-food/
  • 7/30/2019 Web Designing Basics HTML and CSS

    2/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 27: Review, Summary and Finishing up ...................................................................................... 2

    What Next? .................................................................................................................. 2

    File Downloads ........................................................................................................... 2

    Related Instructables ........................................................................................................ 2

    Comments ................................................................................................................ 2

  • 7/30/2019 Web Designing Basics HTML and CSS

    3/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Author:vishalapar

    Coolest site ever-I-N-S-T-R-U-C-T-A-B-L-E-S-.-C-O-M

    Intro: Web Designing Basics (HTML and CSS)I am learning HTML and CSS and am soon going to get certified in it as well, and I thought that it would be a good idea to give out a tutorial on how to start designingyour own website using HTML and a l ittle bit of CSS...

    HTML is an abbreviation for Hyper Text Markup Language .CSS is an abbreviation for Cascading Style Sheets .

    HTML is actually used to create the webpage and the content that it has, like the images and writing.CSS is used to design the webpage and tell the writing and images to be in a certain place, like an image on the top of the page, another in the center etc...

    So lets get started on our journey into web designing...

    Step 1:What is a website made of?If you are surfing the web and find any website interesting and cool, and want to find out what and how it was made, or to find out what HTML coding they used, then

    you need to do is,

    Right click on any blank area on the webpage.Click view page sourceThis will open up a new window or a tab according to your settings showing the HTML code that the website runs on.

    NOTE : Some websites like instructables, google, youtube etc use a lot of Javascript in their coding, so don't get scared...after reading this ible, you will be easily ableunderstand what HTML and CSS are and the fundamental tags.

    http://member/vishalapar/http://member/vishalapar/
  • 7/30/2019 Web Designing Basics HTML and CSS

    4/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Image Notes1. Lots of coding...will get used to it soon :)2. Source code of google.com

    Image Notes1. Source code of instructables.com

    Image Notes1. Source code of youtube.com

    Step 2:HTML, What is it?HTML as I said before is

    Hyper Text Markup Language...

    Everything in HTML works by the use of 'Tags' , Tags are elements in an HTML document that give commands to the writing or images or audio or video files whatdo, where to be placed etc in a website...

    In HTML, tags always have "" after the tag...ex- (This tag makes the text bold)

    All HTML documents start and end with

    These tags tell the browsers that this file is a webpage and not just an ordinary text file...

  • 7/30/2019 Web Designing Basics HTML and CSS

    5/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 3:What do you need?To start making webpages, all you need is :

    A word editor. ..like notepad.

    Many people making websites out there use programs like 'Dreanweaver' and 'Microsoft Frontpage' as they make it easier to make websites and help in the coding.

    But the best way to learn HTML is to use the basics...Notepad and then once you have learnt the basics, then you can move on to the editing programs...

    Image Notes1. Notepad

    Image Notes1. Dreamweaver 8

  • 7/30/2019 Web Designing Basics HTML and CSS

    6/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Image Notes1. Microsoft frontpage

    Step 4:Basic Structure of an HTML documentAll HTML documents have a "Head" and a "Body" tag...

    So all HTML documents have a structure similar to this...

    (Starting the html document) (Starting the head tag) (Ending the head tag) (Starting the body tag) (Ending the body tag) (Ending the html document)

    NOTE : HTML tags are not case sensitive, this means that it does not matter if you write them with capitals or small letters...

    Every HTML tag, has an opening and a closing tag , and any content between those tags, gives that content the property the tag commands...ex: ... (This isbold the text)Some HTML tags have the opening and closing tag in the same tag...ex:
    (This is to break line)

    Whatever is in the body tags, is directly shown on the webpage, and whatever there is in the head tags, they define and give information about the webpage that is noseen when you view the page on a web browser.

    Image Notes1. Necessities of HTML

    Image Notes1. Only closing tag is inside the opening tag itself2. Opening tag3. Closing tag

  • 7/30/2019 Web Designing Basics HTML and CSS

    7/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 5:HTML heading tagsIn HTML there are 6 sets of tags used for headings...These tags all go in the body tags...

    This is the largest heading This is the smallest heading

    NOTE:Most people make a mistake on using these tags to make the text bigger or smaller, and that should not be done, as search engines define the page by theseheadings to find out which parts of the page is what...and just using it for font size would not give a good definition for the page by the search engines...

    Image Notes1. Preview in web browser

    Step 6:Text elements (Tags) in HTMLIn HTML, there are about 5 tags which define text in the webpage.These tags go in the body section of the HTML document.

    Everything in here will be set out as a new paragraph


    This adds a line break (Its like pressing "Enter" on the keyboard while typing)

    This adds a line wherever placed in the document (Horizontal Rule)

    Everything in here will be shown just as it is typed...all spaces and "Enters" when we type will be shown on the webpa

    The most common tags out of these are the

    and
    tags as they are used in almost any and every webpage...The pre tag is great if you are lazy and just want the spaces and enters to be as you will instead of adding the other text elements, but then it will be hard again forbrowsers and search engines to analyze your page...
  • 7/30/2019 Web Designing Basics HTML and CSS

    8/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 7:Logical Styles for text in HTMLThese elements go in the body tags again as they define text that is shown on the webpage...There are 3 main logical styles for text in HTML....

    Text in here is emphasized

    Text in here is strong

    Computer code is put in here

    The emphasis tag just makes the text italic, but a little more bent than normal italic font...The strong tag makes the text bold, but also makes it a l ittle more closer, as the letter spacing is reduced.The code tag defines computer code that is needed to show on the webpage, it has a different font and the spacing and size of the font are small...

    Image Notes1. This isn't any real code...its made up :)

    Step 8:Physical Styles for text in HTMLThere are only 2 common physical styles used for text these days in HTML....These tags are also inserted into the body part of the document.

    This text is bold

    This text is italic

    These tags are very very common as everyone used them even in text editing programs like microsoft word...The bold tag make the text more thick and wider and a little longer...

    The italic tag makes the text bent a little to the right.

  • 7/30/2019 Web Designing Basics HTML and CSS

    9/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 9:Adding images in HTMLThis is one of the simplest things to do in HTML...This tag is inserted in the body section of the document as well...

    The above tag adds an image to your page...and if you want to align it then all you need to do is add :

    align="right"

    align="letf"

    align="center"

    Add either one of those right after you close the quotes and before the greater than sign

    Note: The image you are adding should be in the same folder that your HTML document is saved in, or else you need to specify the file path to the image...

    Image Notes1. That cute little Instructables robot :D

    Step 10:Lists in HTMLIn HTML, there are 2 types of l ists:1) Bulleted or unordered2) Numbered or ordered

    These again go in the body part of the document.

    Each item in the list is specified with the List Item tag.

    First list item

    Second list item

    Third list item

    First list item

    Second list item

    Third list item

    The first one is an ordered list which shows the list with numbers from 1,2,3 and so on...The second one is an unordered list which shows the list with bullet points...

  • 7/30/2019 Web Designing Basics HTML and CSS

    10/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 11:Links in HTMLIn HTML, there are 3 main types of links,1) Ordinary link, to link to a different online website or to link to another webpage on your computer.2) Images link, to use an image itself as a clickable link.3) Mailto link, to make a link that opens up an email client.

    These tags also go into the body tag of the document

    An ordinary link :Jump to Google

    An image link :

  • 7/30/2019 Web Designing Basics HTML and CSS

    11/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Image Notes1. Click to go to google.com2. Click to go to google.com3. Click to email vishapps...

    Step 12:Anchor Linking in HTMLHave you seen those cool websites which have an index linking to different parts of their page? like Wikipedia?

    http://en.wikipedia.org/wiki/HTML(Look at the contents part)

    To make those, we use the anchor tags and link 2 anchor tags together,These tags are also used in the body part of the document...

    Step 5

    Jump to step 5

    The first tag tells that the text Step 5 is anchored to the document with the name of "Step 5"The second tag is the link tag which makes the text "Jump to step 5" a link that links to the Step 5 anchor we made before...

    Using this tag is an absolute necessary for websites which state lots of information like Wikipedia :)

    http://en.wikipedia.org/wiki/HTML
  • 7/30/2019 Web Designing Basics HTML and CSS

    12/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 13:Tables in HTMLTables are main parts if your website is based on stats and details....the tables sort of look like Microsoft Excel tables but you can make them look more interesting byediting them in CSS which we will cover later in this instructable...

    Tables consist of 3 things...or more like 3 tags...

    All these tags go into the body section of the document as well...

    The table tags tell the document where the table starts and endsThe tr tags add a row to the table (Table Row)The td tags add cells to the table (Table Description)

    Have a look at the images to get a better understanding at how tables work...as tables are one of the hardest parts in HTML...

    Step 14:Frames and IFrames in HTMLFrames and IFrames are the same thing, as they are used to show a webpage in a box like thing inside another webpage....

    IFrame is used when you only have one webpage you want to show on your webpage in a little box...

    This will show www.google.com in a small frame in your website...

    Frames always are inside a and tags as these tags group the frames... do the exact same thing as but thare used when you have more than 1 frame (webpage) you want to show and are grouped by tags...How many ever frames you insert, those are shown inthe same browser window and they are split equally...

  • 7/30/2019 Web Designing Basics HTML and CSS

    13/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    When using frames, you cannot use the tags so all you can do is display more than 1 webpage in a browser window...Adding the tagswill stop the tags from working

    An easy way to remember which is which, iframe is for single frames as "I Frame" sounds like "Independent Frame"These tags are not very common in most of the websites..but some websites still do use these tags...

    Image Notes

    1. You can scroll to view the whole webpage2. The vertical scrolbar

    Image Notes1. Both are instructables.com...first one of 25% width and the second one of75%...

    Step 15:HTML common EntitiesIn HTML, if you want to insert text like < or > etc then you often use HTML entities to show the symbols so that they do not get mixed up with tags in the document.

    All the entities start with an & sign...

    &lt = < (Less than symbol)

    &gt = > (Greater than symbol)

    = (Copyright symbol)

    &nbsp = (Non-Breakable Space) (HTML deletes any extra spaces you add in your writing, so in a

    tag if you have 10 spaces, only 1 space will be seen as the rest

    deleted...if you want all of those to be seen then you add the &bsp entity to your

    tag and that will add 1 permanent space to your

    tag...

    There are 2 ways you can write an entity, one is with the character code like the first 2 examples, and the other way is with the number code, like the thirdexample...(Number entities have "#" before them)

    These entities are essential if you want your HTML document to display everything as you want and not mix up < or > etc with the tags...

  • 7/30/2019 Web Designing Basics HTML and CSS

    14/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Image Notes1. If you do not use entities, browsers usually do not display them correctly...theymust be used wherever needed...

    Step 16:Quote and Blockquote tagsThese two tags are used to show quotations...

    TheQuotation

    tag is used to show short quotations.The Quotation tag is used to show long quotations

    The tag adds quotes before and after i ts content ( "Content" )The Quotation tag separates the text from the surrounding by making it into a block and indent it a li ttle, like we do it in essays to

    block long quotations in a different paragraph

    THIS TEXT HAS BEEN BLOCK-QUOTED (This is a block-quote)

    The tag is quite useful as it indents the content, but the tag is not that useful as we could just add quotes ourselves but it makes the text moreorganized...

  • 7/30/2019 Web Designing Basics HTML and CSS

    15/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 17:Title the webpage in HTMLFor a change, this tag is added in the section of the document, this tag tells what the title of your document is, that is what will appear on the tab or page title oyour webpage....have a look at the images to get a better understanding.

    THIS IS THE TITLE OF THE PAGE!

    This is not an optional element of a webpage, every single webpage has to have a title or else the file name will be shown as the tile...

    Step 18:Meta tags in HTMLThis is another head element...It gives description of what your site is to the internet.

    The first tag is a description meta tag and the content describes your website...The second tag is a keyword meta tag and the content gives keywords about your website...

    There are other meta tags out there used for different things like "meta author" etc but these are the most common ones...

    NOTE: Search engines and website ranking softwares look for the meta tag to understand what the website is about and what cateogary does it belong to...

    Image Notes1. Meta tags are really important as they rise your search engine ranking of thewebsite!

  • 7/30/2019 Web Designing Basics HTML and CSS

    16/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 19:CSS, What is it?CSS as I said before stands for Cascading Style SheetsThese styles that we apply decide how to show and place the HTML elements.

    There are 3 ways we can apply styles to our HTML document :1) External style sheet2) Internal style sheet3) Inline styles

    CSS was introduced because HTML was created only to note the information down with tags like


    etc...CSS was supposed to give HTML all the styles it needed...

    Commands in CSS are called "rules" like "tags" in HTML documents...

    Image Notes1. Don't worry, just follow through the ible to understand what this means :)

    Step 20:Syntax in CSSEvery CSS rule has 2 parts in it,

    1) Selector (Each rule can only have 1 selector)2) Declaration (Each rule can have more than 1 declaration)

    Selector is the actual HTML tag that you want to style and edit, so if you want to change the look of a tag, then

    Selector = h1Declaration = color:purple font-weight:bold(These declarations are used if you want to make anything contained in the tag to be in purple color and be seen in bold)

    In declarations, the first part is the property, "CSS property" (color, font-weight) and the second part is the "value" (purple, bold)

    Image Notes1. Property2. Value

  • 7/30/2019 Web Designing Basics HTML and CSS

    17/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 21:Adding comments in CSSIf your CSS file contains lots of rules, then to make which rule is for what clearer, you can use comments to write in anything you want and it will not be shown or interthe CSS rules...

    /*comment*/

    This is how a comment is added in CSS, much simpler than HTML ( )

    You can type in what some rules do if you are not sure, then you can look it up online, and then add a comment saying what that specific rule does...

    Step 22:CSS ID and CLASS rulesLets say you want to make a box on the right of your page where you can insert text...then you would need to make your own tag and define it via CSS in order for it toso....

    We use ID and CLASS selectors to get the job done for us...

    We use them like this :

    HTML file

    This content goes into the box on the right hand side of the page

    CSS file

    #MYFIRSTDIVID{

    float:right;

    height:100px;

    width:100px;

    border: 2px solid black;

    }

    To style div id's that you make, you use the "#" sign in the CSS file...To style div classes that you make, you use a "." (period) in the CSS file

    IDs are used when you are making i t like a whole different tag like in the example above, but CLASSES are used when you want to style things inside another tag, like

    HTML File

    This text is styled by div class...

    CSS file

    .MYFIRSTDIVCLASS

    {

    font-style:italic;

    font-weight:bold;

    font-color:yellow;

    }

    So classes are used when you have the specific div class inside another HTML tag (Excluding HTML, Body and Head tags)Pre-defined elements like (h2, p, h1, br, em, i, b etc...) are edited using the div class function because they are repeated a lot of times in the document, and therefore ihas to be a class div...Div IDs are used when you are going to use the styles element only once in the HTML document...

  • 7/30/2019 Web Designing Basics HTML and CSS

    18/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Image Notes1. It is floating to the right side of the browser windows...as specified

    Step 23:3 types of style sheets...If you are using an external style sheet for CSS , then you will need to link the style sheet to the HTML document in the head tag using

    The "href" attribute should have the file name of your CSS file....and all external CSS files must end with the filetype ".css"CSS files should not contain any HTML tags like

    etc...

    If you are using an internal style sheet , then you write the following in the head tags :

    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    The xxxxxxxx should have everything that your external style sheet had in it...so it should have all the rules in it...

    If you are using an inline style then you will need to do the following :

    If you want to style the tag with an inline style,Then you need to add an attribute "style" and all your rules go in there...

    This is a heading.

    NOTE : Inline styles should be used as least as possible because CSS was created so that there is no styling in the HTML document, so if there are inline styleseverywhere in your document, then its a waste as your HTML document has styling in it...

  • 7/30/2019 Web Designing Basics HTML and CSS

    19/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 24:CSS Text stylesThere are a couple of text styles that you can allocate for texts in any tags...

    Color of text :

    ex:p {color:black;)

    p {color:#000000;)

    The above examples will make all text in the paragraph tags appear in black color.

    Text decoration :

    ex:p {text-decoration:none;}

    p {text-decoration:underline;)

    The first example will remove underlines, over-lines etc and makes the text appear normally...this is useful if you do not want links to have an underline...

    The second example adds an underline to any text in the

    This text is underlined

    tags.

    Text indentation :

    ex:p {text-indent:30px;)

    This will indent the first line of the

    tag by 30 px...

    Text Transformation :

    ex:p {text-transform:uppercase;)

    This will make all the text in

    This text is in uppercase

    tags uppercase.
  • 7/30/2019 Web Designing Basics HTML and CSS

    20/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 25:Font styles in CSSIf you want to change the font of text in a tag, then you use the font-family selector...

    ex:

    p {font-family:Arial;}

    p {font-family:Verdana;}

    In the first example, all text in the

    tags will be in Arial...In the second example, all text in the tags will be in Verdana...

    Style of font :

    ex:

    p {font-style:italic;}

    p {font-style:oblique;}

    In the first example, the text in the

    tags will be in italics...In the second example, the text in the tags will be in oblique (oblique font is very similar to italic font)

    Font size :

    ex:

    p {font-size:16px;}

    p {font-size:1em;}

    In the first and second example, the size of font in the

    tags is 16px...

    1em = 16px"em" was introduced because of a re-sizing problem with Internet Explorer.

    Image Notes1. Never forget the semicolons! I did that a lot of times and wondered why nothingworked!

  • 7/30/2019 Web Designing Basics HTML and CSS

    21/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 26:CSS background stylingYour background can either have an image or just a color as a background...

    Give your background a color :

    ex:

    body {background-color:#000000;}

    body {background-color:black;}

    Both of the examples give your background a black color

    Set an image as the background :

    ex:

    body {background-image:url(animals.jpg);}

    The example above will set the "animals.jpg" image as the background and repeat it as many times as needed to fit the background...

    Image Notes1. Such adorable penguins :)

  • 7/30/2019 Web Designing Basics HTML and CSS

    22/23

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/

    Step 27:Review, Summary and Finishing upI will attach 2 notepad files which have summaries of CSS and HTML, I searched and collected all the information and edited it to make a good summary...

    In this instructable, I covered topic of HTML 4.01 and not HTML 5.0 because it is still under development and a lot of the tag are still being changed, removed etc...so decided to teach you the more stable HTML 4.01I covered CSS 3.0 as it is the latest version and is quite stable...

    If you have any questions, then post them in the comments , I will be happy to clarify your doubts...If you are actually going to make a website, then once you do make it, post a comment with the code :) I would like to see what cool websites you make!

    I learnt HTML from a couple of websites and in school...

    http://htmldog.com/http://www.littlewebhut.com/

    http://www.w3.org/http://www.htmlgoodies.com/

    W3C is the World Wide Web Consortium , they set all the web standards for HTML and all the tags and their valuesw3.org is their website as mentioned above

    What Next?Now that you know the basics of HTML and CSS, you can research online for more advanced tutorials (YouTube has some very good tutorials).Once you think you hamastered these languages, you can go ahead and apply for a certification...and then once you are certified, you can make your own websites and make yourself aliving...if you become a website designer....lets call it "webmaster" ...

    Image Notes1. This is code for the website on which I am working right now :) I am sure you can start making cool websites now! So go ahead and make awesome websites!

    File Downloads

    CSS Properties Reference.rtf (10 KB)[NOTE: When saving, if you see .tmp as the file ext, rename it to 'CSS Properties Reference.rtf']

    HTML 4.01 Summary.rtf (3 KB)[NOTE: When saving, if you see .tmp as the file ext, rename it to 'HTML 4.01 Summary.rtf']

    Related Instructables

    How to StartYour HTMLDocument Right

    by gnoseon

    Build aprofessionalwebsite: Part 3

    CSS by htmlincHow to make afree website

    using HTML. by

    samsq1

    How to edit yourMyspace

    background by

    the_don125

    Make a Website

    by crestind

    How to make awebsite in

    HTML by

    Spacekidkyle

    http://www.instructables.com/member/Spacekidkyle/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-make-a-website-in-HTML/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-make-a-website-in-HTML/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-make-a-website-in-HTML/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-make-a-website-in-HTML/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/member/crestind/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/Make-a-Website/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/Make-a-Website/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/member/the_don125/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-edit-your-Myspace-background/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-edit-your-Myspace-background/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-edit-your-Myspace-background/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-edit-your-Myspace-background/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/member/samsq1/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-make-a-free-website-using-HTML/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-make-a-free-website-using-HTML/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-make-a-free-website-using-HTML/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-make-a-free-website-using-HTML/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/member/htmlinc/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/Build-a-professional-website-Part-3-CSS/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/Build-a-professional-website-Part-3-CSS/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/Build-a-professional-website-Part-3-CSS/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/Build-a-professional-website-Part-3-CSS/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/Build-a-professional-website-Part-3-CSS/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/member/gnoseon/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-Start-Your-HTML-Document-Right/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-Start-Your-HTML-Document-Right/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-Start-Your-HTML-Document-Right/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/id/How-to-Start-Your-HTML-Document-Right/?utm_source=pdf&utm_campaign=relatedhttp://www.instructables.com/files/orig/FL8/59NA/GWF5U9WJ/FL859NAGWF5U9WJ.rtf?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FL8/59NA/GWF5U9WJ/FL859NAGWF5U9WJ.rtf?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FL8/59NA/GWF5U9WJ/FL859NAGWF5U9WJ.rtf?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/FL8/59NA/GWF5U9WJ/FL859NAGWF5U9WJ.rtf?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/F30/WJGT/GWT2MNCN/F30WJGTGWT2MNCN.rtf?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/F30/WJGT/GWT2MNCN/F30WJGTGWT2MNCN.rtf?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/F30/WJGT/GWT2MNCN/F30WJGTGWT2MNCN.rtf?utm_source=pdf&utm_campaign=fileshttp://www.instructables.com/files/orig/F30/WJGT/GWT2MNCN/F30WJGTGWT2MNCN.rtf?utm_source=pdf&utm_campaign=fileshttp://www.htmlgoodies.com/http://www.w3.org/http://www.littlewebhut.com/http://htmldog.com/
  • 7/30/2019 Web Designing Basics HTML and CSS

    23/23

    Comments

    1 comments Add Comment

    anoop vanguru says: Jan 1, 2012. 12:00 PM REPI am a website designer for my part time job, and this instructable is perfect! I mean it explains all the basics and is just amazing! I wish it was there when Ilearnt HTML and CSS...Well done!!!

    http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/?utm_source=pdf&utm_campaign=comments#DISCUSShttp://www.instructables.com/member/anoop+vanguru/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/member/anoop+vanguru/?utm_source=pdf&utm_campaign=commentshttp://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/?utm_source=pdf&utm_campaign=comments#comments

Top Related