Web Designing Basics HTML and CSS

Download Web Designing Basics HTML and CSS

Post on 14-Apr-2018

214 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 1/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>Food Living Outside Play Technology Workshop</p><p>Web Designing Basics (HTML and CSS)by vishalapar on December 30, 2011</p><p>Table of Contents</p><p>Web Designing Basics (HTML and CSS) ............................................................................................</p><p>Intro: Web Designing Basics (HTML and CSS) ....................................................................................</p><p>Step 1: What is a website made of? .............................................................................................</p><p>Right click on any blank area on the webpage. ...................................................................................</p><p>Click view page source .....................................................................................................</p><p>This will open up a new window or a tab according to your ..........................................................................</p><p>Step 2: HTML, What is i t? ....................................................................................................</p><p>Hyper Text Markup Language... ..............................................................................................</p><p>Step 3: What do you need? ...................................................................................................</p><p>Step 4: Basic Structure of an HTML document .....................................................................................</p><p>Step 5: HTML heading tags ...................................................................................................</p><p>Step 6: Text elements (Tags) in HTML ...........................................................................................</p><p>Step 7: Logical Styles for text in HTML ..........................................................................................</p><p>Step 8: Physical Styles for text in HTML ..........................................................................................</p><p>Step 9: Adding images in HTML ...............................................................................................</p><p>Step 10: Lists in HTML ......................................................................................................</p><p>Step 11: Links in HTML ...................................................................................................... 1</p><p>Step 12: Anchor Linking in HTML .............................................................................................. 1</p><p>Step 13: Tables in HTML ..................................................................................................... 1</p><p> ............................................................................................ 1</p><p>Step 14: Frames and IFrames in HTML .......................................................................................... 1</p><p>Step 15: HTML common Entities ............................................................................................... 1</p><p>Step 16: Quote and Blockquote tags ............................................................................................ 1</p><p>Step 17: Title the webpage in HTML ............................................................................................ 1</p><p>Step 18: Meta tags in HTML .................................................................................................. 1</p><p>Step 19: CSS, What is it? .................................................................................................... 1</p><p>Step 20: Syntax in CSS ...................................................................................................... 1</p><p>Step 21: Adding comments in CSS ............................................................................................. 1</p><p>Step 22: CSS ID and CLASS rules ............................................................................................. 1</p><p>Step 23: 3 types of style sheets... .............................................................................................. 1</p><p>Step 24: CSS Text styles ..................................................................................................... 1</p><p>Step 25: Font styles in CSS ................................................................................................... 2</p><p>Step 26: CSS background styling .............................................................................................. 2</p>http://www.instructables.com/member/vishalapar/?utm_source=pdf&amp;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/</li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 2/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>Step 27: Review, Summary and Finishing up ...................................................................................... 2</p><p>What Next? .................................................................................................................. 2</p><p>File Downloads ........................................................................................................... 2</p><p>Related Instructables ........................................................................................................ 2</p><p>Comments ................................................................................................................ 2</p></li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 3/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>Author:vishalapar</p><p>Coolest site ever-I-N-S-T-R-U-C-T-A-B-L-E-S-.-C-O-M</p><p>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...</p><p>HTML is an abbreviation for Hyper Text Markup Language .CSS is an abbreviation for Cascading Style Sheets .</p><p>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...</p><p>So lets get started on our journey into web designing...</p><p>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</p><p>you need to do is,</p><p>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.</p><p>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.</p>http://member/vishalapar/http://member/vishalapar/</li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 4/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>Image Notes1. Lots of coding...will get used to it soon :)2. Source code of google.com</p><p>Image Notes1. Source code of instructables.com</p><p>Image Notes1. Source code of youtube.com</p><p>Step 2:HTML, What is it?HTML as I said before is</p><p>Hyper Text Markup Language...</p><p>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...</p><p>In HTML, tags always have "" after the tag...ex- (This tag makes the text bold)</p><p>All HTML documents start and end with</p><p>These tags tell the browsers that this file is a webpage and not just an ordinary text file...</p></li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 5/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>Step 3:What do you need?To start making webpages, all you need is :</p><p>A word editor. ..like notepad.</p><p>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.</p><p>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...</p><p>Image Notes1. Notepad</p><p>Image Notes1. Dreamweaver 8</p></li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 6/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>Image Notes1. Microsoft frontpage</p><p>Step 4:Basic Structure of an HTML documentAll HTML documents have a "Head" and a "Body" tag...</p><p>So all HTML documents have a structure similar to this...</p><p> (Starting the html document) (Starting the head tag) (Ending the head tag) (Starting the body tag) (Ending the body tag) (Ending the html document)</p><p>NOTE : HTML tags are not case sensitive, this means that it does not matter if you write them with capitals or small letters...</p><p>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: <br> (This is to break line)</p><p>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.</p><p>Image Notes1. Necessities of HTML</p><p>Image Notes1. Only closing tag is inside the opening tag itself2. Opening tag3. Closing tag</p></li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 7/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>Step 5:HTML heading tagsIn HTML there are 6 sets of tags used for headings...These tags all go in the body tags...</p><p> This is the largest heading This is the smallest heading</p><p>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...</p><p>Image Notes1. Preview in web browser</p><p>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.</p><p>Everything in here will be set out as a new paragraph</p><p><br>This adds a line break (Its like pressing "Enter" on the keyboard while typing)</p><p>This adds a line wherever placed in the document (Horizontal Rule)</p><p>Everything in here will be shown just as it is typed...all spaces and "Enters" when we type will be shown on the webpa</p><p>The most common tags out of these are the </p> and <br> 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...</li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 8/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>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....</p><p>Text in here is emphasized</p><p>Text in here is strong</p><p>Computer code is put in here</p><p>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...</p><p>Image Notes1. This isn't any real code...its made up :)</p><p>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.</p><p>This text is bold</p><p>This text is italic</p><p>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...</p><p>The italic tag makes the text bent a little to the right.</p></li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 9/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>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...</p><p>The above tag adds an image to your page...and if you want to align it then all you need to do is add :</p><p>align="right"</p><p>align="letf"</p><p>align="center"</p><p>Add either one of those right after you close the quotes and before the greater than sign</p><p>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...</p><p>Image Notes1. That cute little Instructables robot :D</p><p>Step 10:Lists in HTMLIn HTML, there are 2 types of l ists:1) Bulleted or unordered2) Numbered or ordered</p><p>These again go in the body part of the document.</p><p>Each item in the list is specified with the List Item tag.</p><p>First list item</p><p>Second list item</p><p>Third list item</p><p>First list item</p><p>Second list item</p><p>Third list item</p><p>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...</p></li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 10/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>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.</p><p>These tags also go into the body tag of the document</p><p>An ordinary link :Jump to Google</p><p>An image link :</p></li><li><p>7/30/2019 Web Designing Basics HTML and CSS</p><p> 11/23</p><p>http://www.instructables.com/id/Web-Designing-Basics-HTML-and-CSS/</p><p>Image Notes1. Click to go to google.com2. Click to go to google.com3. Click to email vishapps...</p><p>Step 12:Anchor Linking in HTMLHave you seen those cool websites which have an index linking to different parts of their page? like Wikipedia?</p><p>http://en.wikipedia.org/wiki/HTML(Look at the contents part)</p><p>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...</p><p>Step 5</p><p>Jump to step 5</p><p>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...</p><p>Using this tag is an absolute necessary for websit...</p></li></ul>