Introduction to HTML What is HTML u Hyper

What is HTML? u Hyper Text Markup Language u A markup language designed for

Creating a HTML File 1. 2. 3. 4. 5. 6. Open Notepad Click on

HTML Tags For example: <b>, <font>, <title>, <p> etc. u Tag usually goes with

HTML Document Structure <html> <head> <title> Page Title Goes Here </title> </head> <body> content

Background u u Bgcolor Specifies a background -color for a HTML page. <body bgcolor="#000000">

Text u Put text on a webpage – <p>Today is my first day at

Font u To change text size – <font size=“+3”>Hello</font> – Output: u Hello Tag

Commonly Used Character Entities Result Description Non-breaking space Entity Name < > Less

Headings u There are 6 heading commands. <H 1>This is Heading 1</H 1> <H

List u Unordered list – Code: <ul> <li>Coffee</li> <li>Milk</li> </ul> – Output: u Coffee

Table <table border=“ 1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <td>row 1, cell 1</td> <td>row

Create Links u. A Hypertext link – < a href=“http: //www. iusb. edu”>IUSB Home</a>

Image Formats u. gif – Graphics Interchange Format u. jpeg or. jpg – Joint

Inserting Image u Place all images in the same directory/folder where you web pages

Image Size u Computer images are made up of “pixels” u <IMG HEIGHT=“ 100"

Forms u. A form is an area that can contain form elements. u <form></form>

Text Input Fields u Used when you want the user to type letters, number,

Submission Button u When user clicks on the “Submit” button, the content of the

Checkboxes u Used when you want the user to select one or more options

Radio Buttons u Used when you want the user to select one of a

Text Box u Used when you want to get input from user. <form> <p>Please

Pull-down Menu u Used when you want user to respond with one specific answer

Additional Resource u http: //www. w 3 schools. com/html/defaul t. asp

Slides: 25

Download presentation

Introduction to HTML

What is HTML? u Hyper Text Markup Language u A markup language designed for the creation of web pages and other information viewable in a browser u The basic language used to write web pages u File extension: . htm, . html

How is a HTML File Looks Like

Creating a HTML File 1. 2. 3. 4. 5. 6. Open Notepad Click on File -> Save as… In the File name pull-down box, type in webpage. html Click on Save Type in content for your file Once you finished the content, click on File -> Save

HTML Tags For example: <b>, <font>, <title>, <p> etc. u Tag usually goes with pair: an open tag (<b>) and an end tag (<b>) u Effect Code Used What It Does Bold B <B>Bold</B > Bold Italic I <I>Italic</I > Italic Single tag: <hr>, u Tags are NOT case sensitive u

HTML Document Structure <html> <head> <title> Page Title Goes Here </title> </head> <body> content goes here </body> </html>

Background u u Bgcolor Specifies a background -color for a HTML page. <body bgcolor="#000000"> <body bgcolor="rgb(0, 0, 0)"> <body bgcolor="black"> u u Background Specifies a background -image for a HTML page <body background="clouds. g if"> <body background="http: //w ww. w 3 schools. com/clo uds. gif">

Text u Put text on a webpage – <p>Today is my first day at my new job, I’m so excited!</p> – Output: Today is my first day at my new job, I’m so excited! u Put text in center of a page – <center>Hello</center> – Output: Hello u Put text on the right of a page – <p align=“right”>Hello</p> – Output: Hello

Font u To change text size – <font size=“+3”>Hello</font> – Output: u Hello Tag attribute To change text color – <font color=“red”>Hello</font> – Output: Hello u Using both – <font size=“+3” color=“red”>Hello</font> – Output: Hello

Headings u There are 6 heading commands. <H 1>This is Heading 1</H 1> <H 2>This is Heading 2</H 2> <H 3>This is Heading 3</H 3> <H 4>This is Heading 4</H 4> <H 5>This is Heading 5</H 5> <H 6>This is Heading 6</H 6>

List u Unordered list – Code: <ul> <li>Coffee</li> <li>Milk</li> </ul> – Output: u Coffee u Milk u Ordered list – Code: <ol> <li>Coffee</li > <li>Milk</li> </ol> – Output: 1. 2. Coffee Milk

Table <table border=“ 1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td></td> </tr> </table> Heading Another Heading Row 1, cell 1 Row 1, cell 2 Row 2, cell 1

Create Links u. A Hypertext link – < a href=“http: //www. iusb. edu”>IUSB Home</a> – Output: IUSB Home u. A Email link – <a href=“mailto: vkwong@iusb. edu”> Email me</a> – Output: Email me

Image Formats u. gif – Graphics Interchange Format u. jpeg or. jpg – Joint Photographic Experts Group u. bmp – bitmap

Inserting Image u Place all images in the same directory/folder where you web pages are u <img src> is a single tag u <img src=“image. gif”> – Output: u Turn an image into a hyerlink – <a href=“http: //www. iusb. edu”><img src=“image. gif”></a> – Output:

Image Size u Computer images are made up of “pixels” u <IMG HEIGHT=“ 100" WIDTH=“ 150" SRC="image. gif"> Height Width

Forms u. A form is an area that can contain form elements. u <form></form> u Commonly used form elements includes: – Text fields – Radio buttons – Checkboxes – Submit buttons

Text Input Fields u Used when you want the user to type letters, number, etc. <form> First name: <input type="text" name="firstname"> Last name: <input type="text" name="lastname"> </form> u Output First name: Last name:

Submission Button u When user clicks on the “Submit” button, the content of the form is sent to another file. <form name="input" action="html_form_ac tion. asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> u Output Username:

Checkboxes u Used when you want the user to select one or more options of a limited number of choices. <form> <input type="checkbox" name="bike“ value=“bike”> I have a bike <input type="checkbox" name="car“ value=“car”> I have a u Output I have a bike I have a car

Radio Buttons u Used when you want the user to select one of a limited number of choices. <form> <input type="radio" name="sex" value="male"> Male <input type="radio" name="sex" value="female"> Female </form> u Output Male Female

Text Box u Used when you want to get input from user. <form> <p>Please provide your suggestion in the text box below: </p> <textarea row=“ 10” cols=“ 30”> </textarea> </form> u Output Please provide your suggestion in the text box below:

Pull-down Menu u Used when you want user to respond with one specific answer with choices you given. <p>Select a fruit: </p> <select name"Fruit"> <option selected> Apples <option> Bananas < option > Oranges </select> u Output Select a fruit:

Additional Resource u http: //www. w 3 schools. com/html/defaul t. asp