introduction to html. what is html? hyper text markup language a markup language designed for the...
TRANSCRIPT
![Page 1: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/1.jpg)
Introduction to HTMLIntroduction to HTML
![Page 2: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/3.jpg)
How is a HTML File Looks LikeHow is a HTML File Looks Like
![Page 4: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/5.jpg)
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
![Page 6: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/6.jpg)
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>
![Page 7: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/7.jpg)
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">
![Page 8: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/8.jpg)
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
![Page 9: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/10.jpg)
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 ©©
![Page 11: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/11.jpg)
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>
![Page 12: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/14.jpg)
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
![Page 15: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/16.jpg)
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:
![Page 17: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/19.jpg)
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:
![Page 20: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/20.jpg)
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:
![Page 21: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/23.jpg)
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:
![Page 24: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/24.jpg)
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:
![Page 25: Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable](https://reader036.vdocuments.us/reader036/viewer/2022062321/56649ed95503460f94be764e/html5/thumbnails/25.jpg)
Additional ResourceAdditional Resource
http://www.w3schools.com/html/default.http://www.w3schools.com/html/default.aspasp