Introduction to HTML

Introduction to HTML

HTML • Hyper Text Markup Language • Basic __________ language for developing web sites • HTML documents are __________files that can be created using any text _____. • Notepad • File extension: .htm, .html

HTML Basics • Element • Fundamental ____________of the structure of a text document. • Some examples of elements: • ________ • Tables • ________ • Lists

HTML Basics • HTML ________ • Start Tag -- (<a tag name>) • End Tag – (</a tag name>) • Tags are usually ________ • <H1> and </H1>

Creating a HTML File • Open Notepad • Click Start then Run • In the Open box type Notepad & then click OK • Click on File -> Save as… • In the File name box: type in “name of page”.htm • Click on Save

HTML Basics <html> <head> <TITLE> A Simple HTML Example</TITLE> </head> <body><H1> HTML is Easy To Learn</H1> <P> Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph! </P><P>And this is the second paragraph.</P> </body> </html>

HTML Basics • <HTML> • This element tells your browser that the file _________ HTML-code. • When saving, use .htm as your extension • </HTML>

HTML Basics • <HEAD> • Contains the _________ • Title shown as part of your browser's window • </HEAD> • <TITLE> • Displayed in the ______ ____ of the browser • </TITLE>

HTML Basics • <BODY> • ________ part of your HTML document • This is what people _______ • All other tags now come within the body tag. • </BODY>

HTML Basics • Headings • 6 _________ of headings • 1 being the largest • Headings are typically displayed in larger and/or bolder fonts than normal body text. • The first heading in each document should be tagged _______

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>

HTML Basics • Paragraphs • Any amount of ____________ including: • Spaces • Linefeed • Carriage returns – are automatically compressed into a single space when your HTML document is displayed in a browser • A Web __________ ignores this line break and starts a new paragraph only when it encounters another _______ tag • Same as hitting the enter twice in Word

_________ list Code: <ul> <li>Coffee</li> <li>Milk</li> </ul> Output: Coffee Milk ____________ list Code: <ol> <li>Coffee</li> <li>Milk</li> </ol> Output: Coffee Milk Lists

Create Links • A ___________ link (hyperlink) • < a href=“http://www.iusb.edu”>IUSB Home</a> • Output: IUSB Home • A _________ link • <a href=“mailto:vkwong@iusb.edu”> Email me</a> • Output: Email me

Image Formats • .gif • Graphics ___________ Format • .jpeg or .jpg • Joint Photographic ________ Group • .bmp • bitmap

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

Inserting Image • Place all images in the same directory/_____ 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:

Forms • A form is an area that can contain form elements. • <form></form> • Commonly used form elements includes: • ________ fields • _________ buttons • ______________ • ____________ buttons

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: Text Input Fields

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: Submission Button

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 bike I have a car Checkboxes

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

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

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> Pull-down Menu • Output • Select a fruit:

Tables • Very useful for presentation of tabular information • Useful to creative HTML authors who use the table tags to present their regular Web pages • Tables can control _________ ________

Table Format <TABLE>  <CAPTION> caption contents </CAPTION>  <TR>  <TH> first header cell contents </TH> <TH> last header cell contents </TH> </TR>  <TR>

Table Format  <TD> first row, first cell contents </TD> <TD> first row, last cell contents </TD> </TR>  <TR>  <TD> last row, first cell contents </TD> <TD> last row, last cell contents </TD> </TR>  </TABLE>

Introduction to HTML