ASP.NET: Basic HTML

HTML is a collection of containers (or tags), many of which are nested inside of other containers. Each container begins with an opening tag, such as <p>, and either a closing tag, such as </p>, or a backslash at the end of the opening tag, such as <img src="dank_meme.jpg"/>. Webpage content is defined entirely within a <html> tag, followed by three other sections: the (optional) <head>, where we define metadata about this page (including the label this page will have as a tab on your browser), CSS styles, or scripts; the <body>, where the webpage content itself will be placed; and the (optional) <footer>, where you place end-page web content, typically shared among multiple pages. The NIU logo and "Department of Computer Science" footer at the bottom of this course website's pages is one example of this.

Containers can be broadly defined under two categories: content and structure. Content tags include:

  • p: the paragraph tag, used to contain text fields. By default, p tags will include a top/bottom buffer of a single line of whitespace. For example, the following <p>Line 1</p> would appear as:

    Here is some text

    Line 1

    And here's some other text.

  • a: the hyperlink tag, used to create links to other pages.

  • img: the image tag, used for displaying images. While it is possible to adjust the dimensions of the image displayed, you almost never want to do this within the HTML, as the resulting image distortion is often quite hideous.

  • button: the, well, button tag. Functionally identical to the Button components we've been adding to our Windows Forms.

Examples of structure tags include:

  • table: the table tag creates a N x M partitioned area, split up among a (optionally included) <th> table-header row, <tr> table rows, and <td> table data (the individual cells). While obviously useful for displaying tables of information, they can also be (heavily) modified to become the layout of an entire page of content. This is often a primitive solution, though, as the intelligent use of CSS and <div> containers often allows for more flexible and elegant presentations.

  • ul and ol: unordered lists and ordered lists create bulleted lists of items, contained within <li> list items. This webpage features the default display for unordered lists, while Assignment 1 makes use of an ordered list.

  • span and div: spans and divs are containers used almost exclusively as a way to apply a particular style to one or more parts of the webpage. There are technical differnces between the two, with div containers being the more rigid, stable container, and spans used for small-scale styles. For example, these webpages are partitioned into areas defined within div containers, while this font is included by wrapping that text inside of a short span container.

  • hr: the horizontal rule tag simply tosses in a horizontal bar across the width of a container. Such as:
    This can be great for partitioning long vertical stretches of content.

Each HTML tag comes with a series of well-defined attributes. Most every HTML attribute will be one pertaining to the function of that tag, such as the hyper-reference (href) or link to where an a-tag will go when clicked, or the source (src) file to be used when displaying an image. There are a few examples of implemeting style effects with HTML attributes, but they are few in number and often overshadowed by the versatility and easy-of-use from CSS styles.