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...
"Anything on the internet can be modified, deleted or added just with the use of HTML and CSS! Even on instructables.com!"
The best thing is...
All you need is a computer!
So lets get started on our journey into web designing...
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 settings showing the HTML code that the website runs on.
Step 2: HTML, What is it?
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 what to do, 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...
Step 3: What do you need?
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...
Step 4: Basic Structure of an HTML document
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 is to bold 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 not seen when you view the page on a web browser.
Step 5: HTML heading tags
These tags all go in the body tags...
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 these headings 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...
Step 6: Text elements (Tags) in HTML
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 webpage
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 for browsers and search engines to analyze your page...
Step 7: Logical Styles for text in HTML
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 little 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...
Step 8: Physical Styles for text 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.
Step 9: Adding images 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 :
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...
Step 10: Lists in HTML
1) Bulleted or unordered
2) Numbered or ordered
These again go in the body part of the document.
Each item in the list is specified with the
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...
Step 11: Links in HTML
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 :
A mailto link :
defines an anchor, it is used in all links and inline links as it makes an anchor wherever it is inserted in the code.
The property "href" in the tag tells the anchor to link to which website or another anchor itself in some cases...
Step 12: Anchor Linking in HTML
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...
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 :)
Step 13: Tables in HTML
Tables consist of 3 things...or more like 3 tags...
The table tags tell the document where the table starts and ends
The 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 HTML
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 they are 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 in the same browser window and they are split equally...
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 tags will 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...
Step 15: HTML common Entities
All the entities start with an & sign...
< = < (Less than symbol)
> = > (Greater than symbol)
© = © (Copyright symbol)
= (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 are deleted...if you want all of those to be seen then you add the   entity to your
tag and that will add 1 permanent space to your
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 third example...(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 etc with the tags...
Step 16: Quote and Blockquote tags
The Quotation tag is used to show short quotations.
The Quotation tag is used to show long quotations
The tag adds quotes before and after its content ( "Content" )
The Quotation tag separates the text from the surrounding by making it into a block and indent it a little, 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 more organized...
Step 17: Title the webpage in HTML
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 HTML
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...
Step 19: CSS, What is it?
These 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 sheet
2) Internal style sheet
3) Inline styles
CSS was introduced because HTML was created only to note the information down with tags like
CSS was supposed to give HTML all the styles it needed...
Commands in CSS are called "rules" like "tags" in HTML documents...
Step 20: Syntax in CSS
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
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 styles everywhere in your document, then its a waste as your HTML document has styling in it...
Step 24: CSS Text styles
Color of text :
The above examples will make all text in the paragraph tags appear in black color.
Text decoration :
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 underlinedtags.
Text indentation :
This will indent the first line of the
tag by 30 px...
Text Transformation :
This will make all the text in
This text is in uppercasetags uppercase.
Step 25: Font styles in CSS
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 :
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 :
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.
Step 26: CSS background styling
Give your background a color :
Both of the examples give your background a black color
Set an image as the background :
The example above will set the "animals.jpg" image as the background and repeat it as many times as needed to fit the background...
Step 27: Review, Summary and Finishing up
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 tags are still being changed, removed etc...so I decided to teach you the more stable HTML 4.01
I 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 sorts of cool websites you make!
I learnt HTML from a couple of websites and in school...
w3.org is their website as mentioned above