Basic HTML & Hand Tagging

A Few Terms to Keep in Mind

• Hand-Tagging - plain text tagging without formatting and graphics. User working with a text editor (notepad, text edit, etc.)
• IT Fluency - an understanding of the underlying concepts of technology and the critical thinking skills needed to select from multiple formats (hardware, software, and media) for optimized knowledge building
• HCI - (Human Computer Interaction) a discipline concerned with the design, evaulation and implementation of interactive computing systems for human use and with the stufy of major phenomena surrounding them

HCI in action

• GUI - (Graphical User Interface) what we see visually on a screen (webpage, etc.)
• HTTP  - (Hyper Text Transfer Protocol) the channel through which we send and receive information on the internet
• HTML - (Hyper Text Markup Language) Marking up for display via:
• Tags - the markup of words (making it bold, itallic, etc.) which adds value
• W3C - (World Wide Web [W3] Consortium) Governing body of HTML

Creating and Editing a Webpage

Note: there are spaces within the tags, as without it Blogger creates the webpage. There should be no spaces within tags

Creating

• Open Text Editor
• Begin with basic tags - tags always starts with < and ends with >. Open tags look like and closed tags look like
• HTML tag - < HTML > - denotes start & stop of HTML content
• Head tag - < HEAD > - creates a header (user usually doesn't see this content)
• Title tag - < TITLE > - Title of the webpage
• Body tag - < BODY > - what is displayed within the web browser itself
• Paragraph tag - < /P > - creates a new paragraph on website
• Headings tag - < HN > - Creates headings within the document N is a variable for font size. Sizes can go from (H1[Largest] to H6 [Smallest]) NOT to be used within paragraph tags
• Line Break - < BR > - creates a line break (line break tag does not need a close (< /br >)
• Bold tag - < b > - bolds text between
• Italics tag - < i > - italicizes text between
• Underline tag - < u > - underlines text between
• Document type tag - < !DOCTYPE html > - declares what type of document and what version of html being used (w3schools.com is a resource listing all document tags)
• For example:
  < HTML >
  < HEAD >
  < TITLE > Learning Libraries </ TITLE>
  < /HEAD >
  < /HTML >
• Save as "index.html"
• Open file in browser to check the page is working

Editing/Entering Content

• Open file in text editor
• Enter/edit content
• For example:
  < HTML >
  < HEAD >
  < TITLE >Learning Libraries < /TITLE >
  < /HEAD >
  < BODY >
  < P >< H4 >< i >Google can bring you back 100,000 answers, a librarian can bring you back the right one.< /i > < /H4 > < BR > < H5 >- Neil Gaiman < /H5 > < /P >
  < /BODY >
  < /HTML >
• Save content
• Open file in browser to see if your edits are applied and page is working properly

Content needs to be nested within the content for example:

• Incorrect : < b > < i > Google Rocks! < /b > < /i >
• Correct : < b > < i > Google Rocks! < /i> < /b >

We can ensure this is correct and validated at validation sites (e.g. http://validator.w3.org)