HTML: Tutorial

Which network protocol do you need to upload a form to a server? You need _________________ to upload a form to a server.

- File Transfer Protocol

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>

The Audio Tag: <audio>

Use the <audio> tag to add a sound or music clips to a web page. It is similar to the video tag. The following tag adds an audio file with its controls to a web page: <audio controls> <source src="file name.mp3" type="audio/mpeg"> </audio>

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 write the following HTML code:

<table border=1 cellpadding=10 cellspacing=10> <tr> <td>Red</td> <td>Blue</td> </tr> <tr> <td>Green</td> <td>Yellow</td> </tr> <tr> <td>Orange</td> <td>Red</td> </tr> </table>

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 Image Tag: <img>

Use the <img> tag to add images to your web page. Not all browsers support all formats for images so it is best to save the image in JPEG format, because all browsers support that format. You should also add an alt text description to your image in case the image does not load properly. The alt text gives the reader an idea of what the image is. To add an image, use the following tag: <img src="image name.jpg" alt="alt text">

Which HTML tags describe the meaning of the content? ___________ elements describe the meaning of the content.

Semantic

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

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.

more info:

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

How do you use the following tags to create a web page? Pairs 1. list header 2. unordered list 3. cell 4. ordered list

1. <lh> 2. <ul> 3. <td> 4. <ol>

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>

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>

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.

The HTML Body

The <body> element of your HTML document contains text, hyperlinks, images, tables, lists, and other elements. 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">.

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

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 fruit names, first write the opening ordered list tag: <ol>. If you want to add a list header, write the text in the <lh>title</lh> tag. Then, write the <li> tag, followed by the first list item. Continue writing the remaining items in the same way. Finally, write the closing ordered list tag: </ol>. The following HTML code creates a numbered list of fruit names, as shown in the image: <ol> <lh>Fruit</lh> <li>Apple</li> <li>Mango</li> <li>Orange</li> <li>Banana</li> <li>Peach</li> </ol> The numbering can be in the form of numerals, letters, Roman numerals, or bullets. The CSS defines the numbering style.

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>

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 fruit names, first write the opening unordered list tag: <ul>. Then, add the list header using the <lh>title</lh> tag. Next, write the <li> tag, followed by the first list item. Continue writing the remaining items in the same way. Finally, write the closing unordered list tag: </ul>. The following HTML code produces an unordered list of fruit names, as shown in the image: <ul> <lh>Fruit</lh> <li>Apple</li> <li>Mango</li> <li>Orange</li> <li>Banana</li> <li>Peach</li> </ul>

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 other elements. 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 the 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 so on. For example, you can use the following HTML code to create a table for fruit and animal names: <table> <tr> <th>Fruit</th> <th>Animal</th> </tr> <tr> <td>Apple</td> <td>Lion</td> </tr> <tr> <td>Mango</td> <td>Tiger</td> </tr>

The Video Tag: <video>

You can use the <video> tag to add a video to a web page and state the height and width of the video. You can also include controls, such as play, pause, stop, and volume. Use the following tags to add a video of a specific dimension with all of its controls: <video width="320" height="240" controls> <source src="file name.mp4" type="video/mp4"> </video>

Definition List Tags: <dl>, <dt>, and <dd>

You may want to include a definition list to mention certain terms and their definitions. Use the <dt> tag to specify a term, and the <dd> tag to specify the definition. To write a definition list for various HTML tags, write the opening definition list tag <dl>. Next, write the term in this format: <dt>term name</dt>. Then, write the definition of the term in this format: <dd>definition</dd>. Your web page can have a number of <dt> and <dd> elements. Finally, write the closing definition list tag, </dl>. The following HTML code creates a list of terms and their definitions, as shown in the image: <dl> <dt>Unordered List</dt> <dd>An unordered list is a list of bulleted items.</dd> <dt>Ordered List</dt> <dd>An ordered list is a list of numbered items.</dd> <dt>Definition List</dt> <dd>A definition list is a list of terms with corresponding definitions.</dd> </dl>