Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the...
-
Upload
anthony-jordan-greer -
Category
Documents
-
view
258 -
download
0
Transcript of Introduction to HTML. What is HTML? Hyper Text Markup Language A markup language designed for the...
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/1.jpg)
Introduction 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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/2.jpg)
What is HTML?
• Hyper Text Markup Language• A markup language designed for the
creation of web pages and other information viewable in a browser
• The basic language used to write web pages
• File 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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/3.jpg)
How 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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/4.jpg)
Creating a HTML File
1. Open Notepad
2. Click on File -> Save as…
3. In the File name pull-down box, type in webpage.html
4. Click on Save
5. Type in content for your file
6. Once you finished the content, click on 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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/5.jpg)
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 sensitive
Effect Code Code Used What It Does
Bold B <B>Bold</B> Bold
Italic I <I>Italic</I> Italic
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/6.jpg)
HTML Document Structure
<html> <head> <title> Page Title Goes Here </title></head>
<body> content goes here </body></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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/7.jpg)
Let’s make a web page
• Log on• Bring up Internet Explorer• Bring up Notepad (if not on desktop
– C:\windows\system32)• You will be typing your code in
Notepad
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/8.jpg)
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save your file as webpage.html
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/9.jpg)
Background
• Bgcolor• Specifies a background-color for a HTML page.
<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
• Background• Specifies a background-image for a HTML page
<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/10.jpg)
Text• 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!
• 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
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/11.jpg)
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: Hello
Tag attribute
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/12.jpg)
Commonly Used Character Entities
Result Description Entity NameNon-breaking space
< Less than <
> Greater than >
& Ampersand &
“ Quotation mark "
© Copyright ©
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/13.jpg)
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>
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/14.jpg)
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. Coffee
2. Milk
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/15.jpg)
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 Heading
Row 1, cell 1 Row 1, cell 2
Row 2, cell 1
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/16.jpg)
Create Links
• A Hypertext link– < a href=“http://www.asfa.k12.al.us”>ASFA
Home</a>– Output: ASFA Home
• An Email link– <a href=“mailto:[email protected]”>
Email me</a>– Output: Email me
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/17.jpg)
Image Formats
• .gif– Graphics Interchange Format
• .jpeg or .jpg– Joint Photographic Experts Group
• .bmp– bitmap
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/18.jpg)
Inserting Image
• Place all images in the same directory/folder where you web pages are
• <img src> is a single tag• <img src=“image.gif”>
– Output: • Turn an image into a hyerlink
– <a href=“http://www.iusb.edu”><img src=“image.gif”></a>
– Output:
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/19.jpg)
Image Size
• Computer images are made up of “pixels”• <IMG HEIGHT=“100" WIDTH=“150"
SRC="image.gif">
Width
Height
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/20.jpg)
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
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/21.jpg)
Text Input Fields
• Used when you want the user to type letters, number, etc.<form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>
• Output
First name: Last name:
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/22.jpg)
Submission Button
• When user clicks on the “Submit” button, the content of the form is sent to another file.<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"><br><input type="submit" value="Submit"> </form>
• Output
Username:
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/23.jpg)
Checkboxes
• 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 <br> <input type="checkbox" name="car“ value=“car”> I have a car </form>
• Output
I have a bikeI have a car
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/24.jpg)
Radio Buttons
• Used when you want the user to select one of a limited number of choices.<form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>
• Output
MaleFemale
![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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/25.jpg)
Text Box
• 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>
• Output
Please provide your suggestion in the text box below:
![Page 26: 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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/26.jpg)
Pull-down Menu
• 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>
• Output
Select a fruit:
![Page 27: 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://reader035.fdocuments.net/reader035/viewer/2022081420/56649dc75503460f94abb944/html5/thumbnails/27.jpg)
Additional Resource
• http://www.w3schools.com/html/default.asp