1 / 113

Introduction to HTML

Introduction to HTML. Vincci Kwong Reference/Instruction Librarian. What is HTML?. H yper T ext M arkup L anguage 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.

alvis
Download Presentation

Introduction to HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to HTML Vincci Kwong Reference/Instruction Librarian

  2. 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

  3. How is a HTML File Looks Like

  4. Creating a HTML File • Open Notepad • Click on File -> Save as… • In the File name pull-down box, type in webpage.html • Click on Save • Type in content for your file • Once you finished the content, click on File -> Save

  5. 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

  6. HTML Document Structure <html> <head> <title> Page Title Goes Here </title> </head> <body> content goes here </body> </html>

  7. 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"> Background

  8. 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

  9. 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

  10. Commonly Used Character Entities

  11. 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>

  12. 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: Coffee Milk List

  13. 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>

  14. Create Links • A Hypertext link • < a href=“http://www.iusb.edu”>IUSB Home</a> • Output: IUSB Home • A Email link • <a href=“mailto:vkwong@iusb.edu”> Email me</a> • Output: Email me • <A href=“mailto:x@yahoo.com”>contact me</a> • <A href=“mailto:x@yahoo.com?subject=topic”>contact me</a> • <A href=“mailto:x@yahoo.com?subject=production inf”>contact me</a> • <A href=“mailto:x@yahoo.com?cc=p@najah,edu”>contact me</a> • <A href=“mailto:x@yahoo.com?bc=p@najah.edu”>contact me</a> • <A href=“mailto:?body=Don’t forget also to send in your financial statements as soon as possible.”>contact me</a>

  15. Image Formats • .gif • Graphics Interchange Format • .jpeg or .jpg • Joint Photographic Experts Group • .bmp • bitmap

  16. 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:

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

  18. 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 • Text area boxes • Pop-up boxes

  19. Used when you want the user to type letters, number, etc. <form name=“x” method=“get” action=“abc.php” > First name: <input type="text" name=“h"> <br> Last name: <input type="text" name=“y"> </form> Output First name: Last name: Text Input Fields

  20. 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

  21. 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=“1”> I have a bike <br> <input type="checkbox" name="car“ value=“1”> I have a car </form> Output I have a bike I have a car Checkboxes

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

  23. 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> Text Area Box • Output • Please provide your suggestion in the text box below:

  24. 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:

  25. Additional Resource • http://www.w3schools.com/html/default.asp

  26. Tables Table tag < table> < table border=“2” > Caption tag ( optional ) < caption align = “bottom” > <TR> table row <TD> table data ( cell by cell >

  27. Examplehtml code for creating the following table BASIC COLORS CODES

  28. < HTML > <HEAD> < TITLE> BASIC COLORS</TITLE> </HEAD> <BODY> <H3 ALIGN=“CENTER”> <TABLE> < CAPTION><STRONG>BASIC COLOR CODES</STRONG></CAPTION> <TR> <TD> COLOR <TD> DEC.CODE <TD> HEX.CODE <TR> <TD><STRONG>RED</STRONG> <TD> 255 000 000 <TD> FF 00 00 <TR> <TD><STRONG>GREEN</STRONG> <TD> 000 255 000 <TD> 00 FF 00 <TR> <TD><STRONG>BLUE</STRONG> <TD> 000 000 255 <TD> 00 00 FF </TABLE></H3> </BODY> </HTML>

  29. TO CREATE AN EMPTY CELL <TD>&nbsp; ( look to page 127 )

  30. Cell spacing and cell padding • Cellspacing affects the amount of spacing between cells. • how many pixels of white space there should be between individual cells • The default value is 2 pixels • Cellpadding affects the high of the cell <TABLE BORDER=“1” CELLSPACEING=“10” CELLPADDING=“5” >

  31. TABLE HEARDER <TH> AND “WIDTH” ATTRIBUTE USED WHEN THE CELL’S CONTENTS IS A HEADING OR LABLE EXAMPLE ( COLOR, DEC.CODE, HEX.CODE ) HEADINGS FOR COLUMNS ( RED, GREEN, BLUE ) HEADINGS FOR ROWS THE EXAMPLE BEFORE WILL BE

  32. < HTML > <HEAD> < TITLE> BASIC COLORS</TITLE> </HEAD> <BODY> <H3 ALIGN=“CENTER”> <TABLE BORDER=“5” CELLSPACING=“5” CELLPADDING=“5”> < CAPTION><STRONG>BASIC COLOR CODES</STRONG></CAPTION> <TR> <TH> COLOR <TH> DEC.CODE <TH> HEX.CODE <TR> <TH>RED <TD> 255 000 000 <TD> FF 00 00 <TR> <TH>GREEN <TD> 000 255 000 <TD> 00 FF 00 <TR> <TH>BLUE <TD> 000 000 255 <TD> 00 00 FF </TABLE></H3> </BODY> </HTML>

  33. WIDTH ATTRIBUTE < TABLE BORDER=“3” CELSPACING=“0” CELLPADDING = “3” WIDTH=“100%” THE TABLE WILL BE EXPANDED TO THE WIDTH OF THE BROWSER SCREEN ( 100% OF THE WIDTH OF THE SCREEN You can control the width of any column <TD width=“40%”> color <TH width=“20%”> dec.code <TH width=“10%”> hex.code

  34. Centering Data Attribute <TABLE BORDER=“5” CELLSPACING=“5” CELLPADDING=“5”> < CAPTION><STRONG>BASIC COLOR CODES</STRONG></CAPTION> <TR> <TH> COLOR <TH> DEC.CODE <TH> HEX.CODE <TR> <TD align=“center”><strong>RED</strong> <TD> 255 000 000 <TD> FF 00 00 ( you can use align center, left, or right

  35. Single Cell Tables • Using the <BR> tag • The cell can contain as many lines of data < H3 align=“center”> < TABLE border=“5” cellpadding=“10”> <TR> < TD align=“center”> AL-Najah University<BR> Faculty of Information Technology<BR> CIS Department </TABLE> </H3>

  36. Using the cell as A Link < H3 align=“center”> < TABLE border=“10” cellpadding=“0” cellspacing=“0”> <TR> < TD><A href=“index.htm”> GO TO NEXT <img src =“x.jpg” Align =“center” ALT=“cross” width=“90” height=“120” border=“0”></A> </TABLE> </H3>

  37. Adding a background color to any cell <table cellpadding=5 cellspacing=3 width=“24” border=“3” height=“50” bgcolor=“#FF00FF” bordercolor=“#111111”>

  38. Placing an Image in a Cell < H3 align=“center”> < TABLE border=“10” cellpadding=“0” cellspacing=“0”> <TR> < TD><A href=“index.htm”><img src=“d2.jpg” Align =“center” ALT=“cross” width=“90” height=“120” border=“0”></A> </TABLE> </H3> if you don’t want the image to be a link just remove the anchor tags and href attribute

  39. Spacing Columns and Rows • COLSPAN and ROWSPAN

  40. Java Scriptsspecification • Fast • Mixed with HTML • Object Oriented • It is not Java ( Java script is an interpreted language , while Java is a compiled language )

  41. Our first example that display the date of the day. (today) <body> < script language=“javascript”> var today = new Date() document.write( today ) </script> </Body>

  42. The HTML code will be < HTML > <HEAD> < TITLE>Our First Script</TITLE> </HEAD> <BODY> <center> <H1>Our First Script</H1> </center> <p>Today is < script language=“javascript”> var today = new date() document.write( today ) </script> </BODY> </HTML>

  43. Java Scripts error messages • Java scripts is case sensitive DOCUMENT.WRITE (“today”) cause error

  44. document.write( “string”) • document.write(“welcome”) • document.write(“ <B>welcome</B> “) • document.write(‘ <img src=“image name.gif” >’) • document.write(“ <img src=‘image name.gif’ >”) • You can make a complete web page using a series of document.write command

  45. Basics of JavaScripts • Value types of Javascripts • Value is a piece of information that can be: string “hello boys” number 4.55 boolean true Null null Object properties and methods of an object Function value returned by a function

  46. Varibles var myvariable myvariable = 10 . . myvariable = 30 . . myvariable =“hello all”

  47. Examplesusing var and variable names var myvar =“java script is cool” You can leave var like myvar=“hello” MyVariable =“welcome” ---------------------------------------------Example--------------------------- < HTML > <HEAD> < TITLE>Our First Script</TITLE> </HEAD> <BODY> < script language=“javascript”> MyVariable = “Java Script is cool” document.write( MyVariable ) </script> </BODY> </HTML>

  48. Example variables and value type < HTML > <HEAD> < TITLE>Our First Script</TITLE> </HEAD> <BODY> < script language=“javascript”> var myVariable=“This is a string” //string document.write( myVariable ) document.write(“<P>”) myVariable=4.55 //number document.write( myVariable ) document.write(“<P>”) myVariable=true //boolean document.write( myVariable ) document.write(“<P>”) myVariable=null //null document.write( myVariable ) document.write(“<P>”) myVariable= new Date() //object document.write( myVariable ) document.write(“<P>”) </script> </BODY> </HTML>

  49. Operators x+y for numeric values x+y for strings ( concatenates x and y ) x*y x/y x%y modulus ( remainder of x/y ) x++ x=x+1 ++x x=x+1 x-- x=x-1 --x x=x-1 -x reverse the sign of x

  50. Example < HTML > <HEAD> < TITLE>Using variables</TITLE> </HEAD> <BODY> < script language=“javascript”> var x=10 var y = 20 var z var xStr=“<br> Please, “ var yStr=“pay the total” var zStr z=x+y zStr=xStr+yStr document.write( z ) document.write(zStr) document.write(“The sum of ”+x+”+”+y+”=“+z) </script> </BODY> </HTML>

More Related