In this tutorial we will be looking at more HTML elements. The HTML elements we will looking into are the ones used for formatting and styling the text on the page, as well as creating forms. Formatting is the placement of text on the page and Styling is the design and color of the text and other objects on the page.
There are several ways to format text using HTML which include the break line, paragraph and table elements. For this tutorial we will be focusing on the break line and paragraph elements for formatting and covering the table element in a later tutorial. The break line element (<br/>) is an element that never contains element content and does not use any attributes. It is a closed element that puts any text that comes after it onto the next line. The paragraph element (<p></p>) is an element that creates the look of a paragraph for the text placed in the element content. This element can also use attributes to put in styles.
Styles can be created for a selection of text a couple different ways. There are elements that make the text that is placed in the element content become the desired style. Some of these elements include <b>, <i>, and <u> which are for bolding, italicizing, and underlining the text respectfully. There is also <sub> which makes the text subscript and <sup> which makes the text superscript.
Styles can also be applied to text by use of the style element or attribute. Almost all elements have the ability to use the style attribute. The style attribute can be used to change any part of the select text like the background, font, color, and alignment. All items in the style attribute are all declared in the one attribute. The items are separated by a semi-colon and use a colon like an equal sign to declare each of the style items. Ex. style=”background-color:white;text-align:center;”.
The style element is declared in the head element and is used to designate formatting elements of your choosing to to have a specified text color. The style elements element content is the formatting element of your choice and then curly brackets that contain the variable color with a color of your choosing. When this is completed, any formatting element that has had it’s color changed will now be that color when used in the body of the page.
With styles and formatting now complete we can move onto the Form element and it’s features. Forms are used to pass data to a server. The form element can contain input elements like text fields, checkboxes, radio-buttons, buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The most important form element is the input element which is used to select user information. The input element varies depending on the type attribute used.
Other form elements include Textarea, Label, Fieldset, Legend, Select, Option, and Button. The Textarea is similar to the Text type attribute for Input but can have multiple lines of text. The Label element is similar to putting just text for an Input element. The For attribute used in the Label element lets the label be used for a specific Input element with the matching Name, where ever the two elements are in the HTML code. The Fieldset element creates a border around select elements in a form making the page look cleaner. The Legend element creates a caption for a Fieldset element. The Select element creates a drop down list of objects to select from. The Option element creates an option in the Select list. The button element is similar to the Button type attribute, creating a button that can be clicked to complete a certain function.
With the information from this tutorial you should now be able to make a clean functioning page with the ability to change and format text and to create form objects that can be used for user input. In the next tutorial in this series, we will look at sending the data from a form on one page to another HTML page. Also, we will look into create a separate style sheet instead of using the style attribute/element on each page. If you have any questions or are having any trouble with the content in this tutorial, please leave a comment and I will respond as soon as I can.