Welcome to Webpagesofease. This is an HTML primer for everyone. It contains an introduction to Html, Css, Forms and Tables. No previous knowledge of HTML is required.The course requirements are:

  1. A modern computer
  2. A browser like Chrome
  3. Fast Internet connection
  4. Photoshop
  5. Sublime text or Atom

Webpage Anatomy 101

html
head
title
/title
style
/style
/head
body
text
images
forms
tables
video
audio
script
/script
footer
/footer
/body
/html

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 html 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.

Let's say you have an ordered list which contains 6 items. The items are the children of the ordered list and can be referred to as 1st child, 2nd child, 3rd child, 4th child and so on. Oh yess ... there are orphans and grandparents but we'll save that for another day.

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 HTML tags.