HTML Basics

1
HTML Basics

• An Introduction to HTML

2
What is HTML?

• Stands for Hyper Text Markup Language
• Composed of tags which are surrounded by
  sideways triangles ? lt and gt
• Usually occur in Pairs
• lttaggt lt/taggt
• Many different types of tags

3
Where to start?

• Our HTML will be in Notepad
• This can be accessed by
• Start button
• Accessories
• Note pad
• Saved as ______.htm, not the default
  ______.txt

4
Document Tags

• First tag always has to be the HTML tag (since we
  are writing in HTML)
• It looks like this
• lthtmlgt
• lt/htmlgt
• The tag with the slash will appear at the end of
  the page, since all of the html code will be in
  between

5
Document Tags Cont.

• Headers and titles
• Shown by ltheadgt lt/headgt and lttitlegt lt/titlegt
• For example
• ltheadgt
• Ms. Mattatalls Page lt/headgt would be seen like
  the following

6
HTML version vs. Saved Version
7
Body Tags

• Body is the main part of the webpage, aside from
  the title.
• Like this section of text
• Start with ltbodygt
• End with lt/bodygt

8
Body Example
9
How come it didnt work?

• Paragraph Tags
• ltpgt
• Not a paired tag
• Each new paragraph, insert ltpgt

10
Paragraph Tag Example
11
Basic Text Structures

• New Headings (different from earlier)
• Same as the six different sizes of fonts range
  from 1-6
• 1 biggest
• 6 smallest

12
Heading Examples
13
A bit more about headings

• Why no ltpgt between lines?
• Meant to be section headers
• No need for the ltpgt

14
Unordered Lists (not numbered)

• Starts with ltULgt (for unordered list)
• Then list the objects
• ltLIgtMonday
• ltLIgtTuesday
• ltLIgtWednesday
• ltLIgtThursday
• ltLIgtFriday
• ltLIgtSaturday
• ltLIgtSunday
• End with lt/ULgt

15
List Examples
16
Ordered List (same as a numbered list)

• Same as Unordered list
• No bullets, goes with numbers
• Starts with ltOLgt
• Ends with lt/OLgt

17
Ordered List Example
18
Some Easier Tags

• Bold ltbgt lt/bgt
• Italicize ltIgt lt/Igt
• Underline ltugt lt/ugt
• Horizontal Rule (a line that goes across the
  screen, like a divider) lthrgt (an empty tag,
  doesnt need the one at the end)

19
Bold/Italicize/Underline Examples
(notice the ltpgt between the names to create the
new paragraph)
20
Hyperlinks

• How you transfer people from one webpage to
  another
• Referred to as a hypertext reference
• Seen as a href
• Website needs to be in quotations
• Need the http//

21
Hyperlinks Cont.

• Makes words into a link
• Instead of seeing the webpage address, you see
  click here or other words
• Shown as
• lta hrefhttp//www.dhs.ednet.ns.cagt
• Dartmouth High Website
• lt/agt

22
Hypertext Reference Example (hyperlink)
23
Putting in an Image

• This is done through the internet
• Uses the internet source or the image source
• Tag ltimg srcwebsite of imagegt
• To find the source of the image, right click on
  the picture, then go to picture properties

24
Image example
25
Some Other Easy Tags

• To center your words on the page ltcentergt
  lt/centergt
• To change font size ltfont size gt (enter a
  number from 1-7)
• To make your font blink (careful this can be very
  annoying!) ltblinkgt lt/blinkgt

26
Changing Colours

• Not as simple as typing the colour
• Need the colour code found here
• http//html-color-codes.com/ or
  http//www.htmlgoodies.com/tutorials/colors/articl
  e.php/3478961
• Change font by ltfont colorcolour code goes
  heregt
• This needs to go at the top of the page before
  your text if you want it all to be that colour
• Sometimes you can try ltfont colorbluegt with
  simple colours but it does not work for all

27
Changing Background Colour

• At the top of the page, after the lthtmlgt and
  ltbodygt tags, you can enter ltbody bgcolorcolor
  heregt

28
Changing the Font

• ltfont facetimes new romangt
• Use whatever font you prefer, but your computer
  has to support that font for you to see it
• Make sure you use the quotations!!

29
More Tags

• You can find more html tags by searching the
  internet
• These are just simple ones meant to guide you
  along to making a simple web page
• Search for html tags on the internet to learn
  more

30
Assignment 1 - Walkthrough

• Open up notepad
• Start button
• Accessories
• Notepad
• Save in your WWW folder in the H drive as
• Assignment1.html
• MAKE SURE YOU DO THE .HTML part

31
Assignment 1 Cont.

• Write ltHTMLgt at the top
• Press enter 4 times
• Write lt/HTMLgt
• Go up top, click file then save

32
Assignment 1 Cont.

• Everyone should see this

33
Assignment 1 Cont.

• Underneath the first lthtmlgt tag, insert ltfont
  colorbluegt
• Press enter
• Write your name (First, Middle, and Last)

34
Assignment 1 Cont.

• Now you should see this

35
Assignment 1 Cont.

• After your name, press enter
• Create a Horizontal Rule (A horizontal line that
  goes across the screen)
• Write ltHRgt on the next line
• Press enter
• Now we are making the Body text
• Type ltBodygt on the next line
• GO down to where the lt/HTMLgt is (at the bottom).
  On the line above it, type lt/BODYgt

36
Assignment 1 Cont.

• You should see this on your screen

37
Assignment 1 Cont.

• Between the two body tags, press enter a few
  times. This does NOTHING to your page, just helps
  you keep organized.
• Make your text centered type ltCENTERgt below the
  body tag, then press enter again.
• Enter the following
• ltFONT COLORYELLOWgt
• Dartmouth High School
• Press Enter

38
Assignment 1 Cont.

• Now you should see this

39
Assignment 1 Cont.

• Underneath Dartmouth high school, we will make
  your name a different color, make it scroll
  across the screen, make it bold, and make it
  italicized. Sounds hard but its not. Follow
  closely.

40
Assignment 1 Cont.

• Under dartmouth high school, place the following.
  Make sure you press enter after each.
• ltPgt (to create a new paragraph)
• ltFONT FACEVERDANAgt
• ltFONT COLORREDgt
• ltBgt
• ltIgt
• ltMARQUEEgt
• Enter your name again here. (full name)
• lt/MARQUEEgt (To end the scrolling)

41

• Now your screen should look like this

42
Assignment 1 Cont.

• Go to file then save
• Minimize the screen
• Open your H drive in the WWW folder
• You will see assignment1.html saved
• Open it up (it will open as a webpage)

43
Assignment 1 Cont.

• Now your webpage should look like this (the name
  in red will move across the screen