introduction to html. what is html? hyper text markup language a markup language designed for the...
Post on 02-Jan-2016
228 Views
Preview:
TRANSCRIPT
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>
<H2>This is Heading 2</H2><H2>This is Heading 2</H2>
<H3>This is Heading 3</H3><H3>This is Heading 3</H3>
<H4>This is Heading 4</H4><H4>This is Heading 4</H4>
<H5>This is Heading 5</H5><H5>This is Heading 5</H5>
<H6>This is Heading 6</H6><H6>This is Heading 6</H6>
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:vkwong@iusb.edu”><a href=“mailto:vkwong@iusb.edu”>
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
top related