Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introhtml 2


Published on


Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

Introhtml 2

  1. 1. 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
  2. 2. How is a HTML File Looks Like
  3. 3. 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
  4. 4. 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
  5. 5. HTML Document Structure<html><head><title> Page Title Goes Here </title></head><body>content goes here</body></html>
  6. 6. 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="">
  7. 7. 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
  8. 8. 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
  9. 9. Commonly Used Character EntitiesResult Description Entity NameNon-breaking space &nbsp;< Less than &lt;> Greater than &gt;& Ampersand &amp;“ Quotation mark &quot;© Copyright &copy;
  10. 10. 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>
  11. 11. 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
  12. 12. 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
  13. 13. Create Links A Hypertext link < a href=“”>GSB Home</a> Output: GBS Home A Email link <a href=“”>Email me</a> Output: Email me
  14. 14. Image Formats .gif Graphics Interchange Format .jpeg or .jpg Joint Photographic Experts Group .bmp bitmap
  15. 15. 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=“”><imgsrc=“image.gif”></a> Output:
  16. 16. Image Size Computer images are made up of “pixels” <IMG HEIGHT=“100%" WIDTH=“150"SRC="image.gif">WidthHeight
  17. 17. 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
  18. 18. 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:
  19. 19. 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:
  20. 20. 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
  21. 21. 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
  22. 22. 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:
  23. 23. 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:
  24. 24. Additional Resource