Professional Documents
Culture Documents
Living
Outside
Play
Technology
Workshop
Step 11: Links in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Step 12: Anchor Linking in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Step 13: Tables in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 <table></table> <tr><tr> <td><td> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Step 14: Frames and IFrames in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Step 15: HTML common Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Step 16: Quote and Blockquote tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Step 17: Title the webpage in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Step 18: Meta tags in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Step 19: CSS, What is it? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Step 20: Syntax in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Step 21: Adding comments in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Step 22: CSS ID and CLASS rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Step 23: 3 types of style sheets... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Step 24: CSS Text styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Step 25: Font styles in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Step 26: CSS background styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
Step 27: Review, Summary and Finishing up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 What Next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 File Downloads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Related Instructables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
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.
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 able to understand what HTML and CSS are and the fundamental tags.
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
Image Notes 1. Lots of coding...will get used to it soon :) 2. Source code of google.com
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
Image Notes 1. Only closing tag is inside the opening tag itself 2. Opening tag 3. Closing tag
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
When using frames, you cannot use the <body></body> tags so all you can do is display more than 1 webpage in a browser window...Adding the <body></body> tags will stop the <frame> 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 webpage 2. The vertical scrolbar
Image Notes 1. Both are instructables.com...first one of 25% width and the second one of 75%...
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
Image Notes 1. If you do not use entities, browsers usually do not display them correctly...they must be used wherever needed...
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
Image Notes 1. Meta tags are really important as they rise your search engine ranking of the website!
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
Image Notes 1. Don't worry, just follow through the ible to understand what this means :)
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
Image Notes 1. It is floating to the right side of the browser windows...as specified
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
Image Notes 1. Never forget the semicolons! I did that a lot of times and wondered why nothing worked!
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
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 have mastered 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 a living...if you become a website designer....lets call it "webmaster" ...
Image Notes 1. 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
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/
Comments
1 comments
Add Comment
Jan 1, 2012. 12:00 PM REPLY I 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 I learnt HTML and CSS...Well done!!!
http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/