Creating Web Pages Using HTML

Size: px

Start display at page:

Download "Creating Web Pages Using HTML"

Heather Lynch
5 years ago
Views:

1 Creating Web Pages Using HTML

2 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

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

4 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

5 An HTML 5 Template <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>template</title>  </head> <body> <h1>hello World</h1> </body> </html> Be careful when using copy/paste. HTML docs need straight quotes!

6 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!

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

8 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

9 Example <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>template</title>  </head> <body> Here is a sample <br> web page <p> It uses paragraph tags</p> <h1>and heading tags</h1> </body> </html>

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

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

12 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

13 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

14 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">

15 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">

16 Creating Links To create a link to another URL use the tag: <a href = " "> 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)

17 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

18 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

19 Forms: Input Structures <form action=" " method = " " > </form> action is the name of the file that will process the data method is "get" or "post"

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

21 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

22 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

23 Selection List <select name=" "> <option value="value1"> text1 </option> <option value="value2"> text2 </option> <option value="value3"> text3 </option> </select>

24 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

25 Sample Data Sent to Server (GET) stype=business&firstname=bob&lastname=jones&phone = &street=601+S.+College+Rd&city=Wilmington &state=nc&zip=28409&amount=%24100&creditcard=m C&cardHolder=Bob+Jones&cardNumber= &expMonth=01&expYear=2011&volunteer=on&com ments=please+send+a+receipt

26 For additional information The following websites may be useful:

CSC Web Technologies, Spring HTML Review

CSC Web Technologies, Spring HTML Review CSC 342 - Web Technologies, Spring 2017 HTML Review HTML elements content : is an opening tag : is a closing tag element: is the name of the element attribute: