HTML Development 101 – Working With Objects

HTML Development 101 – Working With Objects

 

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.

The below screenshots give examples of the formatting and the styling that has been explained:

 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.

The input element with the Text type attribute creates a one-line input field that allows the user to enter text into it.  The default size of the text field is 20 characters.  The Password type is like a text field but the text the user enters will be masked (shown as asterisk’s).  The Checkbox attribute creates a checkbox. Checkboxes let a user select several options of a limited number of choices provided.  The Radio type attribute creates a radio button. Radio buttons let a user select only one of a limited number of choices provided.  The Button type attribute creates a button on the page.  The button can be made to call a method to store or receive information that is needed.  This requires javascript that will not be covered in this but will described in later tutorials.  There is a Submit type in HTML that creates a submit button and sends all information on the page to the .asp/server to be used later for other things.  Again, .asp will not be covered in this specific tutorial and may be covered later.

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.


Tags assigned to this article:
DevFirefoxHistoryHTMLNotepadTextpadTutorial

Related Articles

Windows Phone 7 Development 101 – Isolated Storage

  In this tutorial we are going to cover the basics required to set up an IsolatedStorage object and use

BlackBerry 10 Water Intake Application Approved

We dont like to toot our own horn but it seems that as of 3AM this morning, our Water Intake

Blackberry Development 101 – Graphical User Interface Design

Welcome to the third development tutorial in the Blackberry Development 101 series. In this tutorial we are going to purely

  • http://www.facebook.com/dave.d.mclellan Dave McLellan

    Hey man, cool little article. Just a couple of things to remember with styling. You should be referencing a style sheet (  ) instead of putting your page style on the page with style tags. 

    Also, when  implementing a custom style on a particular element, instead of in-line style (ie: style=”color:#000000;” you should declare a class name on that element and add that class style to your style sheet.

    .className{     color: #000000;}

     :)

    • Garrett Wilson

      Thank you Dave for the great point.  This is just the basics on styling in HTML and showing the reader what they can do with it.  The next tutorial will be getting into using style sheets and class names as you mentioned.
      Thanks for reading.

%d bloggers like this: