• Save
Introhtml 2
Upcoming SlideShare
Loading in...5

Introhtml 2







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Introhtml 2 Introhtml 2 Presentation Transcript

  • What is HTML? Hyper Text Markup Language A markup language designed for the creation of webpages and other information viewable in a browser The basic language used to write web pages File extension: .htm, .html
  • How is a HTML File Looks Like
  • Creating a HTML File1. Open Notepad2. Click on File -> Save as…3. In the File name pull-down box, type inwebpage.html4. Click on Save5. Type in content for your file6. Once you finished the content, click on File -> Save
  • HTML Tags For example: <b>, <font>,<title>, <p> etc. Tag usually goes with pair: an open tag (<b>)and an end tag (<b>) Single tag: <hr>,<br> Tags are NOT case sensitiveEffect Code Code Used What It DoesBold B <B>Bold</B> BoldItalic I <I>Italic</I> Italic
  • HTML Document Structure<html><head><title> Page Title Goes Here </title></head><body>content goes here</body></html>
  • Background Bgcolor Specifies a background-color for a HTML page.<body bgcolor="#000000"><bodybgcolor="rgb(0,0,0)"><body bgcolor="black"> Background Specifies a background-image for a HTML page<bodybackground="clouds.gif"><bodybackground="http://www.w3schools.com/clouds.gif">
  • Text Put text on a webpage <p>Today is my first day at my new job, I’m soexcited!</p> Output: Today is my first day at my new job, I’m soexcited! Put text in center of a page <center>Hello</center> Output: Hello Put text on the right of a page <p align=“right”>Hello</p> Output: Hello
  • Font To change text size <font size=“+3”>Hello</font> Output: Hello To change text color <font color=“red”>Hello</font> Output: Hello Using both <font size=“+3” color=“red”>Hello</font> Output: HelloTag attribute
  • Commonly Used Character EntitiesResult Description Entity NameNon-breaking space &nbsp;< Less than &lt;> Greater than &gt;& Ampersand &amp;“ Quotation mark &quot;© Copyright &copy;
  • Headings There are 6 heading commands.<H1>This is Heading 1</H1><H2>This is Heading 2</H2><H3>This is Heading 3</H3><H4>This is Heading 4</H4><H5>This is Heading 5</H5><H6>This is Heading 6</H6>
  • List Unordered list Code:<ul><li>Coffee</li><li>Milk</li></ul> Output: Coffee Milk Ordered list Code:<ol><li>Coffee</li><li>Milk</li></ol> Output:1. Coffee2. Milk
  • Table<table border=“1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td></td></tr></table>Heading Another HeadingRow 1, cell 1 Row 1, cell 2Row 2, cell 1
  • Create Links A Hypertext link < a href=“http://www.globalbschool.in”>GSB Home</a> Output: GBS Home A Email link <a href=“mailto:chidanand@globalbschool.in”>Email me</a> Output: Email me
  • Image Formats .gif Graphics Interchange Format .jpeg or .jpg Joint Photographic Experts Group .bmp bitmap
  • Inserting Image Place all images in the same directory/folder whereyou web pages are <img src> is a single tag <img src=“imagesimage.gif”> Output: Turn an image into a hyerlink <a href=“http://www.iusb.edu”><imgsrc=“image.gif”></a> Output:
  • Image Size Computer images are made up of “pixels” <IMG HEIGHT=“100%" WIDTH=“150"SRC="image.gif">WidthHeight
  • Forms A form is an area that can contain form elements. <form></form> Commonly used form elements includes: Text fields Radio buttons Checkboxes Submit buttons
  • Text Input Fields Used when you want theuser to type letters,number, etc.<form>First name: <inputtype="text"name="firstname"><br>Password: <inputtype=“password”name="lastname"></form> OutputFirst name:Password:
  • Submission Button When user clicks on the“Submit” button, thecontent of the form is sentto another file.<form name="input"action="html_form_action.asp" method="get">Username: <inputtype="text" name="user"><br><input type="submit"value="Submit"></form> OutputUsername:
  • Checkboxes Used when you want theuser to select one or moreoptions of a limitednumber of choices.<form><input type="checkbox"name="bike“ value=“bike”>I have a bike<br><input type="checkbox"name="car“ value=“car”> Ihave a car </form> OutputI have a bikeI have a car
  • Radio Buttons Used when you want theuser to select one of alimited number of choices.<form><input type="radio"name="sex" value="male">Male<br><input type="radio"name="sex"value="female"> Female</form> OutputMaleFemale
  • Text Box Used when you want to getinput from user.<form><p>Please provide yoursuggestion in the text boxbelow:</p><textareaname=“suggestion”row=“10” cols=“30”></textarea></form>• OutputPlease provide yoursuggestion in the text boxbelow:
  • Pull-down Menu Used when you want userto respond with onespecific answer withchoices you given.<p>Select a fruit:</p><select name"Fruit"><option > Apples<option> Bananas< option selected >Oranges</select>• OutputSelect a fruit:
  • Additional Resource http://www.w3schools.com/html/default.asp