COMMON HTML TAGS for CREATING WEB PAGES

1
COMMON HTML TAGS for CREATING WEB PAGES!

• All tags must appear in brackets.Most tags have
  an opening and closing bracket.
• Tags should be keyed in lowercase letters.

2
HTML

• Every webpage should include the lthtmlgt lt/htmlgt
  tags.
• Tells the browser that the file it is opening is
  an HTML file.

3
HEAD

• This is the text that is saved when the site is
  bookmarked.
• The title must be in the head tag.

4
TITLE

• The information typed in between the lttitlegt
  lt/titlegt tags it displayed in the top bar of the
  browser.

5
BODY

• The data that is displayed on the page should
  appear between the ltbodygt and lt/bodygt tags.

6
PARAGRAPH TAGS

• You begin paragraphs with the opening paragraph
  tag ltpgt and you close paragraphs with the
  closing paragraph tag lt/pgt.
• Pressing enter in Notepad will not move the text
  in a browser.
• All browsers display paragraphs differently, but
  they all clearly distinguish between paragraphs
  in one way or another.
• A paragraph in HTML would look like ltpgtThis is
  my sample paragraph. There is no need to indent
  the beginning because the web browser is going to
  ignore any white space anyway.lt/pgt

7
CENTRING TEXT

• ltcentergt and lt/centergt

8
ADDING WHITE SPACE ltbr /gt

• ltbr /gt forces whatever comes next in your
  document to be on the next line.
• If you have two ltbr /gt tags in a row you get a
  blank line.
• Some browsers condense multiple ltbr /gt tags to
  one ltbr /gt tag.
• The following is an example of using the ltbr /gt
  tag
• This text will appear on one line, ltbr /gt ltbr
  /gtand this text will appear a double space below
  the above text.

9
ADDING WHITE SPACE ltBR CLEARgt

• Useful when working with images and other
  non-text objects.
• Instead of going to just the next line, skips to
  the first blank line after an object.
• If you want text to appear at the bottom of an
  image and not next to it, you would need to add a
  ltbr cleargt tag.

10
ltHRgt

• The lthrgt tag adds a horizontal line (rule) or
  divider to your web site.

11
CHANGING FONT STYLE

• ltugtunderlined textlt/ugt
• ltbgtbold textlt/bgt
• ltigtItalicized textlt/igt

12
CHANGING FONT SIZE

• lth1gtBiggest textlt/h1gt
• lth2gtBigger textlt/h2gt
• lth3gtBig textlt/h3gt
• lth4gtsmall textlt/h4gt
• lth5gtsmaller textlt/h5gt
• lth6gtsmallest textlt/h6gt
• Normal sized text is between h3 and h4.

13
ADDING COLOUR TO TEXT

• ltfont size6 colorredgtThis text will appear in
  red.lt/fontgt
• Font size The larger the number the larger the
  font.

14
LISTS ORDERED

• Beginning Tag ltolgt
• Ending Tag lt/olgt
• All items in a list must be preceded by an ltligt
  tag.
• ltolgt ltligtone element
• ltligttwo elements
• ltligtthree elements lt/olgt
• In your web browser it would appear as1.one
  element2.two elements3.three elements

15
LISTS UNORDERED

• Beginning Tag ltulgt
• Ending Tag lt/ulgt
• ltulgt ltligtone element
• ltligttwo elements
• ltligtthree elements lt/ulgt
• In your web browser it would appear as
• one element
• two elements
• three elements

16
LINKS TEXT

• A part of your web page that the user can click
  on that takes them to another page or another
  part of the page.
• lta href"http//gvc.gvsd.mb.ca"gtThis is an
  example of a text link. If the user would click
  on this link, the G. V. C. home page would
  load.lt/agt
• The letter A tells the browser that it is a link.
• HREF tells the browser where to go when the user
  clicks on the link.

17
LINKS - GRAPHIC

• E.g. Insert the G. V. C. apple as a link.
• lta hrefhttp//gvc.gvsd.mb.cagt ltimg
  srcGVCapple.jpg /gt lt/agt
• If the user would click on the apple,
  gvc.gvsd.mb.ca page would load.
• By default the apple would have a border around
  it. To remove the borderlta hrefhttp//gvc.gvs
  d.mb.cagt ltimg srcGVCapple.jpg border0 /gt
  lt/agt

18
LINKS - E-MAIL

• You can add an e-mail link by doing the
  followinglta ref"mailtoyouraddress_at_yahoo.com"gt
  E-mail me lt/agt
• This would appear in the browser like any other
  link E-mail me
• When the user clicks on the link an e-mail window
  pops up.

19
LINKS - ON THE PAGE

• Create links to different parts of a page.
• Add the lta namegt tag to the part of your document
  you would like to link to.
• E.g. ltp idmenugt
• At the top of your page you add the following
  link lta href"menu"gt.
• The symbol tells your browser to look for the
  link within the same document instead of looking
  for another file.

20
IMAGES

• The image file has to be in the same directory as
  your html file.
• To add the image to your web page you add the
  following HTML to your pageltimg
  src"filename.gif"gt
• IMG tells the browser to add an image
• SRC tells your browser where to find the image

21
IMAGES

• ALWAYS assume that some people will be viewing
  your web page without the images.
• ALT tag allows people who cannot see your image
  to see a text version.
• Example of how to use the ALT attributeltimg
  src"mouse.gif" alt"mouse /gt
• In the above example, if someone cannot see the
  image of a mouse at least they will be able to
  read the name of the image and know that it would
  be a mouse.

22
IMAGES - HEIGHT WIDTH

• Include the height and width of your image in
  pixels in the IMG tag like the followingltimg
  src"filename.gif" height"200" width"200 /gt
• The values of the HEIGHT and WIDTH tags should
  always be the actual dimensions of your image.

23
IMAGES ALIGN

• Determines where the text on your page should be
  in relation to your image.
• ALIGN can have any of the following values left,
  right, and center.

24
IMAGES CENTRING

• Enclose it in ltpgt...lt/pgt tags and use the
  align"center" attribute in the paragraph tag
  like the followingltp align"center"gt ltimg
  src"mouse.gif alt"mouse /gt lt/pgt

25
BACKGROUND COLOUR

• Change the background colour and the text colour
  of your document by adding attributes to your
  ltbodygt tag like the followingltbody
  bgcolorcolour" textcolour"gt
• The values of BGCOLOR and TEXT are RGB values or
  Red-Green-Blue values.
• Six digit values where the first two digits
  correspond to how much red is in the colour, so
  on, rrggbb.

26
BACKGROUND COLOUR

• Each digit in a RGB value can be either 0-9 or
  A-F.
• 0 is the smallest amount of a colour
• F is the most amount of a colour that you can
  have.
• The following are some example coloursltbody
  bgcolor"000000" text"FF0000"gt black background,
  red textltbody bgcolor"FFFFFF" texet"003300"gt
  white background, dark green textltbody
  bgcolor"0000FF" text"FFFFFF"gt blue background,
  white text

27
R G B

• RGB values abide by the mixture of light, not the
  mixture of crayons.
• The best thing to do is to play around with
  different values, keeping in mind the rrggbb
  ordering, until you figure it out.

28
BACKGROUND GRAPHIC

• To add a background picture to your web page,
  replace bgcolor with background.
• It's value should be the name of the picture
  file. ltbody background"filename.gif"gt

29
TABLES

• Tables are a powerful tool in HTML.
• Because HTML does not accommodate a lot of page
  layout, tables are often used for formatting a
  page.
• lttablegt lt/tablegt Open close a table.
• lttrgt lt/trgt Open and close a row.
• lttdgt lt/tdgt Open and close a cell or square in
  the table.
• ltthgt lt/thgt Also cell tags, but are used as
  headers and are bold.
• Tables are developed one row at a time.
• Open a row, include all of the cell tags for that
  row, close that row and then move on to the next
  row.

30
TABLES

• The opening lttablegt tag can take a number of
  attributes.
• The most important one is the WIDTH attribute.
  Its value can be in pixels or percentages.
• The CELLSPACING attribute refers to the space
  between cells and should be in pixels.
• The CELLPADDING attribute refers to the spacing
  within the cell in pixels (the space between the
  cell walls and contents of the cell).
• The BORDER attribute refers to the size of the
  outside border of the table.

31
TABLE EXAMPLE

• lttable width"100" cellspacing"5"
  cellpadding"5" border"5"gt
• lttrgt
• ltthgtThis is a square in my tablelt/thgt
• ltthgtThis is a square in my table.lt/thgt
• lt/trgt
• lttrgt
• lttdgtThis is a square in my table.lt/tdgt
• lttdgtThis is a square in my table.lt/tdgt
• lt/trgt
• lt/tablegt

32
ADDRESS

• The part of the web page where you should have a
  little bit of information about yourself.
• In order to give credit to any work you have done
  on the web and to allow people to reach you, it
  is a good idea to have an e-mail link to yourself
  in the address.
• Include when the page was last modified so that
  the user knows how old the information is.
• Exampleltaddressgt Last Modified 22 March 2002
  ltbr /gt Created by lta hrefmailtoyouraddress_at_mts.n
  etgt Your Name lt/agt lt/addressgt

33
IMAGES

• Most commonly used file formats used for images
  are
• GIFs and JPEGs
• Both are compressed formats, and have very
  different uses.

34
GIFs

• Can have no more than 256 colours.
• Maintains the colours of the original image.
• The lower the number of colours you have in the
  image, the lower the file size will be.
• Best for solid images.

35
JPEGs

• Uses a mathematical formula to compress the image
  and will distort the original slightly.
• The lower the compression, the higher the file
  size, but the clearer the image.
• Best for images.