Creating a Web Page Using HTML
Radio Button
A radio button allows you to select only one option from several options in a form. The following code allows you to add radio buttons in your form: <form> <input type=radio name="sex" value="male" checked>Male <br> <input type=radio name="sex" value="female">Female </form>
Clickable Button
When you create a form, you can add clickable buttons. On these buttons, you can write either a word or a phrase. Here is the code to add a clickable button in your form: <form> <input type="button" name="my button" value="ok" >Click Me</button> </form>
Submit Button
A submit button is a special clickable button that submits the HTML form to the form handler. The form handler is a server page with a script that processes data captured in the form. Use the following code to add a submit button to your form: <form> <input type="submit" value=Submit> </form> You need File Transfer Protocol (FTP) to upload a form to a server.
Checkbox
Checkboxes allow you to select more than one option from several options. Here is an example of adding checkboxes to your form: <form> <input type="checkbox" name="vehicle" value=Bike checked> I have a bike<br> <input type="checkbox" name="vehicle" value=Car checked> I have a car<br> <input type="checkbox" name="vehicle" value=Truck> I have a truck<br> </form>
Overview of HTML
Developers use HyperText Markup Language (HTML) to code documents that specify the content and structure of a website. The purpose of HTML is to identify and describe the various components of a web page. Unlike programming languages, such as Java and C++, it does not perform any operations on data. Documents with HTML code are saved with the .html extension. The image shows the HTML code of a simple web page. The first line in this code is a <!DOCTYPE html> declaration. It states the HTML version used on the page. The code also shows angle brackets that enclose the HTML tags (in purple font). These tags occur in pairs. Notice that the second tag in each pair has a slash (/) in it. Each pair of tags encloses an element of the web page. The opening tag marks the beginning of the element, and the closing tag marks its end. There can also be a pair of tags within another pair of tags. These tags define nested elements, which allow you to organize content in a logical order. Note that the tags don't appear on the web page seen in the browser—they are only visible in the code. Besides specifying what the browser will display, HTML tags also add meaning to the content. For this purpose, the tags allow you to assign user-defined classes to the content. For example, marking text as a heading shows the importance of those words on the web page. Semantic markup refers to HTML tags that describe the meaning of the content. These tags include <form>, <table>, <img>, and so on. Such tags describe the meaning of the element to the browser and to the developer. Semantic markup also makes it easier to apply general formatting rules throughout a web page. Additionally, it also helps search engines evaluate the importance of information on the web pages. When you code your web page in HTML, it is more likely that the page will come up in search results. The code is generally shorter and better organized compared to the code generated by a website design tool. You may also need to change the code generated by a tool to get the desired results. Semantic elements are special HTML tags that describe the meaning of the content.
HTML Tags
Now that you know what HTML tags are, let's discuss the different types of HTML tags. An HTML document has two parts— a head and a body. The HTML Head The head section of an HTML document includes global formatting or style information. The <head> element of your document contains metadata. Metadata is data about data. Meta elements specify page description, keywords, author of the document, and so on. Let's look at the tags that describe metadata: <title>: Use the <title> tag to define the title of the HTML document. You write the title in this format: <title>Title name</title>. <style>: Use the <style> tag to change the color of the text, convert text to an image, and so on. You use this tag in this format: <style>p {color:blue;}</style>. <link>: Use the <link> tag to define a link between the document and an external source. You write the link in this format: <link href="default.css" rel="stylesheet" title="default style">. <meta>: Use the <meta> tag to provide metadata about the HTML document. You write the metadata in this format: <meta name="keywords" content="HTML">. <script>: Use the <script> tag to define a client-side script, such as JavaScript. You write the script in this format: <script>src="javascript.js"</script>. <base>: Use the <base> tag to define the base URL in an HTML document. You specify the URL in this format: <base href="URL name">.
List Tags
Sometimes, you may want or need to list items on your web page. There are three types of HTML list tags used to list items. Let's discuss them one by one. The Unordered List Tag: <ul> You can use an unordered list tag to create a bulleted list of items. Changing the order of the items does not change the meaning of the list. For example, if you want to create an unordered list of costs, you'll first write the opening unordered list tag: <ul>. Then, if you want, you can add a header using the <lh>Total Cost</lh> tag. Next, write the <li> tag, followed by the first type of cost. Continue writing the remaining types of costs in the same way. Finally, write the closing unordered list tag: </ul>. The following HTML code produces an unordered list of costs, as shown in the image: <ul> <lh>Total Cost</lh> <li>Cost of raw materials</li> <li>Direct labor costs</li> <li>Company overhead</li> </ul> The Ordered List Tag: <ol> Use an ordered list tag to list numbered items. For example, if you want to create a numbered list of costs, you'll first write the opening ordered list tag: <ol>. Then create a list body similar to what you did while creating an unordered list. Finally, add the closing </ol> tag at the end of the list. The following HTML code creates a numbered list of the items in the previous example, as shown in the image: <ol> <lh>Total Cost</lh> <li>Cost of raw materials</li> <li>Direct labor costs</li> <li>Company overhead</li> </ol> Numbering can be in the form of numerals, letters, Roman numerals, or bullets. CSS defines the numbering style.
The HTML Body
The <body> element of your HTML document contains text, hyperlinks, images, tables, lists, and more. Let's look at some important body tags: <html>: Use the <html> tag to tell the browser that your document is in HTML format. This tag is the root of the document. You write the tag in this format: <!DOCTYPE HTML><html><head><title>Title </title></head>. <p>: Use the <p> tag to define a paragraph. You write a paragraph in this format: <p>This is a paragraph</p>. <br>: Use the <br> tag to add a line break. You can add multiple line breaks in your document. <h1> to <h6>: Use these tags to define different levels of headings in your document. You write the heading in this format: <h1>Heading 1</h1>. <img>: Use the <img> tag to define an image. You can add an image using this format: <img src="image name">.
HTML Forms
You can use the <form> tag to define an HTML form. An HTML form is a window or screen to enter data. A form lets you enter information when you visit a website. You can then submit the information to the server for processing. The elements of a form include checkboxes, radio buttons, text fields, a submit button, and more. You can upload a form to a server using File Transfer Protocol (FTP). Let's look at some of these elements. Text Field A text field lets you enter a word, phrase, or numbers in a single line. For example, the following HTML code adds two text fields to enter first and last names in your form: <form> First name: <br> <input type="text" name="firstname" value=Jeff> <br> Last name: <br> <input type="text" name="lastname" value=Simons> </form>
The Table Tag: <table>
You can use the <table> tag to define an HTML table. The <th>, <tr>, and <td> tags define a table header, a table row, and a cell, respectively. In an HTML table, you can write text, add images, write links, and more. For example, you can use the following HTML code if you want to create a table for computing systems: <table> <tr> <th>Computing System</th> <th>Number</th> </tr> <tr> <td>T-1000 interface</td> <td>23</td> </tr> <tr> <td>HAL9000 OS</td> <td>42</td> </tr> </table> Cellpadding and cellspacing are two important features of an HTML table. Cellpadding sets the space around the data in each cell. Cellspacing sets the space around each cell in the table. For example, if you want to draw a table for different colors with the cellpadding and cellspacing attributes of 10 pixels, you would change the code in the statement table as follows: <table border=1 cellpadding=10 cellspacing=10>
How do you use the following tags to create a web page?
You use the <ul> tag to define an unordered list. You use the <td> tag to define a cell in a table. You use the <ol> tag to define an ordered list. You use the <lh> tag to define a list header.