Welcome everyone... this is part 2 to my Intro Html course. Now it's time to learn how to move html elements. Although it's nice to view pretty webpages, web design becomes more interesting when things change color, move around, explode or even show video. The newest version of HTML [HTML5], make it possible to play audio or video, without the aid of flash or another plugin. .

Webpage Anatomy 101


The Html Skeleton

Learning html tags will be your first task when learning web design. The tags are easy to remember. The most important tags are: the html, head, title, style, body, and script tags.

  • html tag -- begins the webpage.
  • head tag -- contains the title, style, and any meta tags
  • /head tag - closing head tag.
  • style tag - contains the css rules
    that alter color, width and other properties of the html elements.
  • body tag - contains the audio, video, forms, tables, text and images of webpage.
  • script tag - contains any javacript and php scripts of the webpage.
  • /script --- closing script tag.
  • /body tag- closing body tag
  • /html ---- closing webpage tag.

A short Intro to the DOM

OK just one thing before we delve into the Css tags. We must take a quick look at the DOM -- The Document Object Model. It is best described as a group of objects: the browser window, your webpage, and the elements inside [ images, audio, video and text ]. These elements and their containers are related -- like a family tree and its how these elements are referenced in css, html and javascript.

Once any item is placed onto your webpage it is surrounded by layers. The innermost layer against your element [ an image in this case ] is called padding, the next layer is the margin and the outermost layer is the border. These layers vary in thickness and can be measured in pixels, ems, or percent. OK onto the CSS tags.