Introduction to HTML
advertisement
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 1. Open Notepad Click Start then Run In the Open box type Notepad & then click OK 2. Click on File -> Save as… In 3. 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 </TITLE> in the ______ ____ of the browser 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 Lists _________ list Code: ____________ list Code: <ol> <li>Coffee</li> <li>Milk</li> </ol> Output: 1. Coffee 2. Milk <ul> <li>Coffee</li> <li>Milk</li> </ul> Output: Coffee Milk 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 .jpeg Joint ___________ Format or .jpg 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 <a an image into a hyerlink 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 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: 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_acti on.asp" method="get"> Username: <input type="text" name="user"> <br> <input type="submit" value="Submit"> </form> Output Username: 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 bike I have a car Radio Buttons 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 Text Box 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> • Output Please provide your suggestion in the text box below: 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: 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> <!-- start of table definition --> <CAPTION> caption contents </CAPTION> <!-- caption definition --> <TR> <!-- start of header row definition --> <TH> first header cell contents </TH> <TH> last header cell contents </TH> </TR> <!-- end of header row definition --> <TR> Table Format <!-- start of first row definition --> <TD> first row, first cell contents </TD> <TD> first row, last cell contents </TD> </TR> <!-- end of first row definition --> <TR> <!-- start of last row definition --> <TD> last row, first cell contents </TD> <TD> last row, last cell contents </TD> </TR> <!-- end of last row definition --> </TABLE> <!-- end of table definition -->