Creating Web Pages Using HTML
HTML Commands Commands are called tags Each tag is surrounded by <> Some tags need ending tags containing / Tags are not case sensitive, but for future compatibility, use lower case Indentation and spacing are used to make the code more readable
Basic Structure <html> <head> </head> <body> </body> </html> The html tags begin and end the document. The head tags contain information about the web page and should appear only once. The body tags contain the visible part of the web page and appear only once.
Creating your HTML file Notepad++ Save your file by choosing Save As Give your file a simple name and use the.html extension Change the Save As Type to All Files
An HTML 5 Template <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>template</title> <!-- HTML Comment --> </head> <body> <h1>hello World</h1> </body> </html> Be careful when using copy/paste. HTML docs need straight quotes!
Viewing your file in a browser Launch the Browser From the File menu, choose Open Click the Browse button Locate your html file Be sure to check in different browsers!
Viewing changes As you work on your file in Notepad++, you can simply Save any changes once your file is named correctly. If the page is loaded in the Browser already, click the Refresh button to see the changes.
Entering Text Enter text in the body section with the following optional tags: Line break: <br> Paragraph tags insert white space: <p> </p> Heading tags Select heading size: h1 through h6 Use a corresponding ending tag <h1> is the largest <h3> or <h4> are normal <h6> is the smallest
Example <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>template</title> <!-- HTML Comment --> </head> <body> Here is a sample <br> web page <p> It uses paragraph tags</p> <h1>and heading tags</h1> </body> </html>
Titles The <head> section of an HTML document contains information about the page The <title></title> tags are placed in the <head> section to give the page a name. The text contained between the tags will appear in the title bar of the browser Formatting has no effect Additional information in the <head> section might be keywords for searching, meta information or comments, for example.
Some Style Elements Strong: <strong> </strong> Italics (emphasis): <em> </em> Underline: <u> </u> Tags may be nested as follows: <strong><em> CSC455 </em></strong> But don t allow them to cross: <strong><em> CSC455 ></strong></em>
Lists Ordered lists are numbered: <ol> <li>one</li> <li>two</li> <li>three</li> </ol> The li tag stands for list item The HTML at the left creates the following list: 1. One 2. Two 3. Three
More Lists Unordered lists are bulleted: <ul> <li>one</li> <li>two</li> <li>three</li> </ul> The HTML at the left creates the following list: One Two Three
Adding Graphics Graphics files typically end in.gif or.jpg Copy and paste doesn t work The image file must be saved, usually in an images folder in the same directory as the html file Use the following tag: <img src = "filename.xxx"> where filename.xxx is the name of your image file If images are in a folder (a common practice): <img src = "images/filename.xxx">
More about graphics You should include alternative text for users who can t or don t want to load images: <img src = "logo.gif" alt= "Company Logo"> You may also include width and height values in pixels (screens are usually 800x600 and up): <img src = "logo.gif" height="200" width="40">
Creating Links To create a link to another URL use the tag: <a href = "http:// "> Text </a> You can also link to another local HTML file instead: <a href = "page2.htm"> Text </a> The Text is what the user should click on to go to the URL (Note: this could be an img src tag instead)
Tables The entire table is contained between the <table> </table> tags Rows are indicated with the tags <tr></tr> Cell contents may be contained in either Heading tags <th></th> or Data tags: <td></td> Indentation helps outline the structure of the table
Example <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> <th> Heading 1 </th> <th> Heading 2 </th> <td> Cell 1 </td> <td> Cell 2 </td> <td> Cell 3 </td> <td> Cell 4 </td> Heading 1 Heading 2 Cell1 Cell2 Cell3 Cell4
Forms: Input Structures <form action=" " method = " " > </form> action is the name of the file that will process the data method is "get" or "post"
Form Text Boxes <input type="text" name=" " > name assigns the identifier that will store the data when it is processed Example: Username: <input type ="text" name= " username" >
Radio (Option) Buttons <input type="radio" name="group1" value="1" > button one<br> <input type="radio" name="group1" value="2" > button two<br> Only ONE may be selected names should all match each other values should be distinct - this is what will be submitted when the form is processed The text before the <br> tag will be displayed next to (after) the button
Check Boxes <input type= checkbox" name="group1" value="1" > box one<br> <input type="radio" name="group2" value="2" > box two<br> Any, none, or all may be selected names should be distinct values should be distinct - this is what will be submitted when the form is processed
Selection List <select name=" "> <option value="value1"> text1 </option> <option value="value2"> text2 </option> <option value="value3"> text3 </option> </select>
Buttons <input type="submit" value="text" name= "submit" > <input type="reset" value="text" name= "reset" > where "text" is what you choose to appear on the button
Sample Data Sent to Server (GET) http://www.thelighthouse.org/cgibin/donation?email=donations@thelighthouse.org&addres stype=business&firstname=bob&lastname=jones&phone =9627567&street=601+S.+College+Rd&city=Wilmington &state=nc&zip=28409&amount=%24100&creditcard=m C&cardHolder=Bob+Jones&cardNumber=111122223333 4444&expMonth=01&expYear=2011&volunteer=on&com ments=please+send+a+receipt
For additional information The following websites may be useful: http://www.html-form-guide.com/html-form/html-forminput.html http://www.w3schools.com/html/html_forms.asp http://html.about.com/