Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the...

Introduction to HTMLIntroduction to HTML

What is HTML?What is HTML?

HHyper yper TText ext MMarkup arkup LLanguageanguage A markup language designed for the creA markup language designed for the cre

ation of web pages and other informatioation of web pages and other information viewable in a browsern viewable in a browser

The basic language used to write web paThe basic language used to write web pagesges

File extension: .htm, .htmlFile extension: .htm, .html

How is a HTML File Looks LikeHow is a HTML File Looks Like

Creating a HTML FileCreating a HTML File1.1. Open NotepadOpen Notepad

2.2. Click on File -> Save as…Click on File -> Save as…

3.3. In the File name pull-down box, In the File name pull-down box, type in webpage.htmltype in webpage.html

4.4. Click on SaveClick on Save

5.5. Type in content for your fileType in content for your file

6.6. Once you finished the content, click Once you finished the content, click on File -> Saveon File -> Save

HTML TagsHTML Tags

For example: <b>, <font>,<title>, <p> etc.For example: <b>, <font>,<title>, <p> etc. Tag usually goes with pair: an open tag (<bTag usually goes with pair: an open tag (<b

>) and an end tag (<\b>)>) and an end tag (<\b>)

Single tag: <hr>,<br>Single tag: <hr>,<br> Tags are NOT case sensitiveTags are NOT case sensitive

EffectEffect CodeCode Code UsedCode Used What It What It DoesDoes

BoldBold BB <B>Bold</<B>Bold</B>B>

BoldBold

ItalicItalic II <I>Italic</I><I>Italic</I> ItalicItalic

HTML Document StructureHTML Document Structure

<html> <html> <head> <head> <title> <title> Page Title Goes HerePage Title Goes Here </title> </title></head> </head>

<body> <body> content goes herecontent goes here </body></body></html> </html>

BackgroundBackground

BgcolorBgcolor Specifies a background-Specifies a background-

color for a HTML page.color for a HTML page.<body bgcolor="#00000<body bgcolor="#000000"> <body bgcolor="rgb0"> <body bgcolor="rgb(0,0,0)"> <body bgcolor(0,0,0)"> <body bgcolor="black"> ="black">

BackgroundBackground Specifies a background-iSpecifies a background-i

mage for a HTML pagemage for a HTML page<body background="clo<body background="clouds.gif"> uds.gif"> <body background="htt<body background="http://www.w3schools.cop://www.w3schools.com/clouds.gif"> m/clouds.gif">

TextText Put text on a webpagePut text on a webpage

– <p>Today is my first day at my new job, I’m so <p>Today is my first day at my new job, I’m so excited!</p>excited!</p>

– Output: Today is my first day at my new job, Output: Today is my first day at my new job, I’m so excited!I’m so excited!

Put text in center of a pagePut text in center of a page– <center>Hello</center><center>Hello</center>– Output:Output: HelloHello

Put text on the right of a pagePut text on the right of a page– <p align=“right”>Hello</p><p align=“right”>Hello</p>– Output:Output: HelloHello

FontFont To change text sizeTo change text size

– <font size=“+3”>Hello</font><font size=“+3”>Hello</font>

– Output: Output: HelloHello

To change text colorTo change text color– <font color=“red”>Hello</font><font color=“red”>Hello</font>– Output: Output: HelloHello

Using bothUsing both– <font size=“+3” color=“red”>Hello</font><font size=“+3” color=“red”>Hello</font>

– Output: Output: HelloHello

Tag attribute

Commonly Used Character EntitiesCommonly Used Character Entities

ResultResult DescriptionDescription Entity NameEntity Name

Non-breaking spaceNon-breaking space << Less thanLess than <<>> Greater thanGreater than >>&& AmpersandAmpersand &&

““ Quotation markQuotation mark ""© © CopyrightCopyright ©©

HeadingsHeadings

There are 6 heading commands.There are 6 heading commands.

<H1>This is Heading 1</H1><H1>This is Heading 1</H1>






ListList

Unordered listUnordered list– Code:Code:

<ul> <ul> <li>Coffee</li> <li<li>Coffee</li> <li>Milk</li> >Milk</li> </ul> </ul>

– Output:Output: CoffeeCoffee MilkMilk

Ordered listOrdered list– Code:Code:

<ol> <ol> <li>Coffee</li> <<li>Coffee</li> <li>Milk</li> li>Milk</li> </ol> </ol>

– Output:Output:1.1. CoffeeCoffee2.2. MilkMilk

TableTable

<table border=“1"> <table border=“1"> <tr> <tr> <th>Heading</th><th>Heading</th><th>Another Heading</th<th>Another Heading</th

>></tr> </tr> <tr> <tr> <td>row 1, cell 1</td><td>row 1, cell 1</td><td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr></tr><tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 1</td> <td></td> <td></td> </tr> </tr> </table> </table>

HeadingHeading Another Another HeadingHeading

Row 1, cell 1Row 1, cell 1 Row 1, cell 2Row 1, cell 2

Row 2, cell 1Row 2, cell 1

Create LinksCreate Links

A Hypertext linkA Hypertext link– < a href=“http://www.iusb.edu”>IUSB Ho< a href=“http://www.iusb.edu”>IUSB Ho

me</a>me</a>– Output: Output: IUSB HomeIUSB Home

A Email linkA Email link– <a href=“mailto:[email protected]”><a href=“mailto:[email protected]”>

Email me</a>Email me</a>– Output: Output: Email meEmail me

Image FormatsImage Formats

.gif.gif– Graphics Interchange FormatGraphics Interchange Format

.jpeg or .jpg.jpeg or .jpg– Joint Photographic Experts GroupJoint Photographic Experts Group

.bmp.bmp– bitmapbitmap

Inserting ImageInserting Image

Place all images in the same directory/foPlace all images in the same directory/folder where you web pages arelder where you web pages are

<img src> is a single tag<img src> is a single tag <img src=“image.gif”><img src=“image.gif”>

– Output: Output: Turn an image into a hyerlinkTurn an image into a hyerlink

– <a href=“http://www.iusb.edu”><img src=<a href=“http://www.iusb.edu”><img src=“image.gif”></a>“image.gif”></a>

– Output: Output:

Image SizeImage Size

Computer images are made up of “pixeComputer images are made up of “pixels”ls”

<IMG HEIGHT=“100" WIDTH=“150" SR<IMG HEIGHT=“100" WIDTH=“150" SRC="image.gif"> C="image.gif">

Width

Height

FormsForms

A form is an area that can contain A form is an area that can contain form elements.form elements.

<form></form><form></form> Commonly used form elements Commonly used form elements

includes:includes:– Text fieldsText fields– Radio buttonsRadio buttons– CheckboxesCheckboxes– Submit buttonsSubmit buttons

Text Input FieldsText Input Fields Used when you want the Used when you want the

user to type letters, numuser to type letters, number, etc.ber, etc.<form> <form> First name: <input typeFirst name: <input type="="texttext" name="firstnam" name="firstname"> e"> <br> <br> Last name: <input typeLast name: <input type="="texttext" name="lastnam" name="lastname"> </form> e"> </form>

OutputOutput

First name: First name: Last name: Last name:

Submission ButtonSubmission Button When user clicks on the When user clicks on the

“Submit” button, the “Submit” button, the content of the form is secontent of the form is sent to another file.nt to another file.<form name="input" act<form name="input" action="html_form_action.ion="html_form_action.asp" method="get"> Usasp" method="get"> Username: <input type="teername: <input type="text" name="user">xt" name="user"><br><br><input type="<input type="submitsubmit" va" value="Submit"> lue="Submit"> </form> </form>

OutputOutput

Username:Username:

CheckboxesCheckboxes Used when you want the Used when you want the

user to select one or mouser to select one or more options of a limited nre options of a limited number of choices.umber of choices.<form> <form> <input type="<input type="checkboxcheckbox" " name="bike“ value=name="bike“ value=“bike”> I have a bike “bike”> I have a bike <br> <br> <input type="<input type="checkboxcheckbox" " name="car“ value=“cname="car“ value=“car”> I have a car </formar”> I have a car </form> >

OutputOutput

I have a bikeI have a bikeI have a carI have a car

Radio ButtonsRadio Buttons Used when you want the Used when you want the

user to select one of a liuser to select one of a limited number of choicemited number of choices.s.<form> <form> <input type="<input type="radioradio" na" name="sex" value="malme="sex" value="male"> Male e"> Male <br> <br> <input type="<input type="radioradio" na" name="sex" value="femalme="sex" value="female"> Female </form> e"> Female </form>

OutputOutput

MaleMaleFemaleFemale

Text BoxText Box Used when you want to Used when you want to

get input from user.get input from user.<form><form><p>Please provide your <p>Please provide your suggestion in the text bosuggestion in the text box below:</p>x below:</p><textarea row=“10” co<textarea row=“10” cols=“30”>ls=“30”></textarea></textarea></form> </form>

OutputOutput

Please provide your Please provide your suggestion in the text suggestion in the text box below:box below:

Pull-down MenuPull-down Menu

Used when you want usUsed when you want user to respond with one ser to respond with one specific answer with choipecific answer with choices you given.ces you given.<p>Select a fruit:</p> <s<p>Select a fruit:</p> <select name"Fruit">elect name"Fruit"><option selected> Apple<option selected> Appless<option> Bananas<option> Bananas< option > Oranges< option > Oranges</select> </select>

OutputOutput

Select a fruit:Select a fruit:

Additional ResourceAdditional Resource

http://www.w3schools.com/html/default.http://www.w3schools.com/html/default.aspasp

Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the...

Documents

Transcript of Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the...