HTML for Beginners

1
HTML for Beginners

• An IEEE/ACM Presentation given by Hamilton Turner

2
What you need to have

• Running computer
• Text editor
• NotePad
• BB Edit
• Web Browser
• Internet Explorer
• Firefox
• Safari
• Somewhere to save your work
• Note You dont have to work online!

3
How to use the materials

• Open text editor
• Type/Edit your HTML
• Hit File ? Save As
• Change Save as Type option
• Make it read Save as Type All files
• If that is not an option, put the name in quotes
• Save our test page as test.html
• Point web browser to the file location
• Type something similar to C/My_HTML/test.html in
  the browser bar

4
Tags

• Tags tell a browser (Internet Explorer, Firefox,
  ect) how to arrange information
• Tags start with
• Normally tags come in pairs, and the closing tag
  starts with
• Examples
• This is bold and this is not
• Underlined! Not Underlined ?

5
Basic Structure

• Title of your page here!
• Content goes here!

6
First tags

• and
• bolds
• and
• italicizes
• and
• underlines
• and
• Puts in the center of the page, or aligns center

7
More basics

• and
• Headers preset to help define sections
• Six different choices down to and
• The
  tag
• Causes a line break
• Difference between this is bold and
  This is bold
  and there is a line break
• Why is there not a
  ?
• and
• Paragraph tag

8
Text tags

• and
• ???? Can be a name of most common colors
• Red, blue, green, black, yellow, ect
• X is a number preceded by a or a
• will raise the font size by 2
• This font is tiny!!!!
• Hexadecimal Colors?
• What does mean?
• Red, Green, Blue In order!
• 0-9 then A-F, higher values mean more of that
  color

9
Links!

• Go to Google!
  
• Hypertext reference
• What else can you do?
• Make an image a link
• Link to different places in your own page
• Uses anchors
• Relative versus Absolute links
• Absolute is normally the way to go when you are
  starting out!

10
Adding images

• Why is there no ?
• What else can I do?
• Align the image (center it, ect)
• Resize the image (height and width)
• Use alt and title
• What is the difference?
• Alt is alternative text
• Title is, well, the title of the image
• Add a border
• Use a background image

11
Some useful Stuff

• and - preformatted
• and - sub script
• and - superscript
• How to put in symbols
• nbsp and others
• http//www.w3schools.com/tags/ref_entities.asp

12
The body tag

• Attributes
• Bgcolor
• Text
• Link
• Alink
• Vlink
• Background

13
The email link

• Add mailtomyaddress_at_whereever.com
• Example
• Email John!
  
• Add a subject
• Add ?subjectyour subj here to the end
• is an email from your website, john_at_bellsouth.c
  om Email John!
• You can add cc and bcc fields too
• After the subject, use cccopy_to_me_at_bellsth.net
  or add bcca_at_a.com or both

14
Adding sounds

• Link to the file
• Use the tag
• Src
• Width, height
• Good values are 144 width and 60 height
• Autostart
• True or false
• Loop
• True or false
• Hidden
• True or false

15
META tags and why you want them

• META tags help search engines find your page
• Between and
• Examples
• L,attempt
• making a web page with HTML, come check it out
• What is content"2URLhttp//www.yoursite.com/newpage.htm
  "

16
The tag

• Horizontal rule
• Use these sparingly!!
• Attributes
• Width
• Align
• Size
• Default of 2 (pixels tall)
• Noshade
• True or false
• Color

17
Comments

• Start with
• Comments are special tags
• You can type whatever you want in the middle
• Example

18
Lists

• and
  stand for un-ordered list
• Aka this is a list with bullets
• and
  stand for ordered lists
• 1. First Item
• 2. Second
• 3. Ect
• and
stand for list item
• These are used inside the
  and
  
  tags

19
Lists, Examples

• • This is the first item
  • This is the second
  • 2. This item will be numbered
    4. So will this one!
  • the last un-ordered item
• Note how the tags match up, a starting tag always
  has a closing tag

20
Tables

• Tables are created out three main parts, or tags
• The and tag tells the browser
  that you are creating a table
• The table row tags ( and ) create a
  single row
• The table division tags ( and ) create a
  single cell within a row

21
Table, basic example

• This is the top left cell
• This is the top row, right cell
• This is the bottom row, left cell
• this is the bottom row, right cell

22
So why the ?

• The tag allows us to give attributes to
  the table as a whole
• Border
• Cell Spacing
• The space in between one cell and another
• Cell Padding
• The space in between the edge of one cell and the
  actual content in that cell (normally text)
• Bgcolor
• Background

23
Review

• Tags are the main parts of html
• Tags can be changed with attribute values
• hello
• is the opening tag
• Color is an attribute of the font tag
• is the closing tag
• Most tags apply to a section of code, and need a
  closing/ending tag
• Some tags, like
  and do not
• The correct way to close these tags is the /
  ending
• Most of the time they will work without it
• 99 of the time,
  and
  will do the same
  thing

24
Tags we know
25
Lets build a simple site

• If you havent already, create a folder to store
  your HTML
• I Recommend C/HTML for now, its easy to remember
• Freely create three different pages
• Remember the basic HTML structure
• Dont fret, I will walk you through all of this,
  so if you dont know where to start its ok
• You will make mistakes, thats ok too. Its part
  of learning

26
Final notes

• Good places to learn more
• http//www.w3schools.com/html/
• http//www.davesite.com/webstation/html/
• Dont try to memorize every HTML tag you see
• All you need to know is what is possible
• You can look up the specific tag
• Aka, I would search how do you create a table in
  HTML to find the specific tags

27
Want to know more

• A common way to layout the content on your page
  is to make a large table
• Check out http//www.w3schools.com/html/tryit.asp?
  filenametryhtml_layout
• You might see the word deprecated a lot when
  learning
• This means there is a newer way to do the same
  thing
• This happens for a lot of reasons (simpler code,
  makes more sense, ect)
• Normally the old way will still work, so dont
  stress to much, its not the end of your site and
  you dont have to update

28
So whats next?

• Style Sheets
• Why???
• See http//www.w3schools.com/html/html_whyusehtml4
  .asp
• The original HTML was never intended to contain
  tags for formatting a documentIn HTML 4.0 all
  formatting can be removed from the HTML document
  and stored in a separate style sheet.
• Hence, next weeks lesson is on CSS, or Cascading
  Style Sheets