Fluency with Information Technology


Understanding Web Design
     THIS        IS       HTML
FLUENCY6     WITH           IT

A Few Font Types:

Helvetica, Century Gothic, and Bodoni

Web pages are created, stored, and sent in encoded form and a browser converts them to what we see on the screen

Hypertext Markup Language (HTML) is the main language used to define how a Web page should look. Features like background, color, font, and layout are all specified in HTML. The words on a Web page are embellished by hidden formatting tags. (<tags>)

We use tags to ‘mark up’ the HTML file.

Tag Pair

Screen Shot 2015-10-28 at 6.36.18 PM

Tags are words or abbreviations enclosed in pairs of angle brackets. The tag pair surrounds the text to be formatted like parentheses with the first tag being the opening tag, and the second being the closing tag.

Screen Shot 2015-10-28 at 6.38.34 PM

Screen Shot 2015-10-28 at 6.40.09 PM

The rule is to make sure the tags “nest” correctly…they should mirror each other. All the tags between a starting tag and its ending tag should be matched.

A few tags are not paired and they do not have a matching ending tag . For those tags, the closing angle bracket > of the singleton tag is replaced by />  Example: Screen Shot 2015-10-28 at 6.44.43 PMproduces a horizontal line.

HTML tags that are required for every Web page:

Screen Shot 2015-10-28 at 6.55.02 PM

The head section contains the beginning material like the title and other information that applies to the whole page.The body section contains the content of the page.


Webdesign, Layout, Website

This Is My First Web Page



My next goal is to add a link to one or all of the colors. Maybe….


Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks.


Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in between (and includes) the and tags is the body element. As another example, whereas “open title and close title” are tags,and the content between the tags is a title element.

div element groups other elements together into sections of the web page, such as a navigation bar, the main body, and the footer.

The outer <div class="nav">..</div> groups the elements into the navigation bar section of the web page. The inner <divclass="container">..</div>wraps the contents in a container.


There are three types of list; unordered lists, ordered lists and definition lists. Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.

The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item. Do you understand?….I don’t! What am I saying? I need to have a talk with myself…
An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag – the destination of the link. The destination of the link is defined in the href attribute of the tag.


The most commonly used file formats used for images are JPEGs, GIFs, and PNGs. They are compressed formats, and have very different uses.

A JPEG (pronounced “jay-peg”) uses a mathematical algorithm to compress the image and will distort the original slightly. The lower the compression, the higher the file size, but the clearer the image.
JPEGs are typically used for images such as photographs.

A GIF can have no more than 256 colors, but they maintain the colors of the original image. The lower the number of colors you have in the image, the lower the file size will be. GIFs also allow any pixel in the image to be transparent.
GIFs are typically used for images with solid colors, such as icons or logos.

A PNG (pronounced “ping”) replicates colors, much like a GIF, but allows 16 million colors as well as alpha transparency (that is, an area could be 50% transparent).
PNGs are typically used for versatile images in more complex designs BUT they are not fully supported by some older browsers.
The web is forever getting faster and faster but you obviously want your web pages to download as quickly as possible. Using super-high resolution images isn’t doing your or your user’s bandwidth (or patience) any favors. Image compression is a great tool and you need to strike a balance between image quality and image size. Most modern image manipulation programs allow you to compress images and the best way to figure out what is best suited for yourself is trial and error.

What This IZ…

A simple page put together using HTML. This is helping me get a better understanding of the design aspects of a web page. I am learning as I go and hope to be an inspiration to others. IF I CAN DO IT, ANYONE CAN!


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

Digital Identity

Outer Limits Radio Show

Scrapbook of the Planetary Overmind

%d bloggers like this: