devXero's blog

a blog about agile, development, and automation

Starting from the beginning, a re-introduction to HTML

Posted by Mike Longin on September 19, 2009

To start teaching web UI automation techniques using any DOM based (SWAT, Selenium, WATIN) automation tools I think we all need to take a step back and start by looking at HTML.  A great reference for HTML is the W3Schools tutorial here.

Wikipedia definition of HTML (http://en.wikipedia.org/wiki/Html)

HTML, which stands for Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms. It is written in the form ofHTML elements consisting of “tags” surrounded by angle brackets within the web page content. It can include or can load; scripts in languages such as JavaScript which affect the behavior of HTML processors like Web browsers; and Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both HTML and CSS standards, encourages the use of CSS over explicit presentational markup.[1]

Hyper Text Markup Language(HTML)is the encoding scheme used to create and format a web document.A user need not be a expert programmer to make use of HTML for creating hypertext documents that can be put on the internet.

Put more clearly, HTML is the language of the Web. Every web page is created using HTML. Below you will find an example of some very simple HTML

<HTML>

<HEAD>

</HEAD>

<BODY id="myBodyId" name="myBodyName" class="bodyClass">

<DIV>

This would create a page which has a single link to my blog <a href="devxero.wordpress.com"> here </a>

</DIV>

</BODY>

</HTML>

In that code block we can see 5 sets of tags, also known as element.

The first 3 tags you should notice are the basic building block tags.

  • HTML – This is the base tag for all webpages
  • HEAD – This block will contain behinds the scenes information
  • BODY – This is where all of the visible web page content is going to go

Looking at the Body tag you will see additional information in the tag.  These are attributes of the element.  Lets examine them for a minute:

  • id – This is an id for the tag.  HTML does not require id’s to be unique but it is a good coding practice
  • name – This is a name for the tag.  Many times the name and id will be the same.  Different pieces of the web use id vs name.
  • class – The class name for a tag is used for styling a webpage.  We use styles to affect the look and feel of the page

Inside the body you will find 2 more sets of tags

  • DIV – This is a basic “block area” tag.  Inside a div tag you may find all sorts of additional content.
  • A – This is your link tag.  The href attribute is where the link is going to go to.  Between the open and close A tag’s is the text that would show up in a link.

Check back in later this weekend\week for a more indepth look at different tags in HTML.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: