Intro to HTML

1
Intro to HTML

• Introduction to HTML
• Testing your pages
• Common reasons pages dont work

2
Introduction to HTML

• What is HTML?
• Hypertext Markup Language
• Tells browser (Internet Explorer, Netscape, etc.)
  what to do and how to display everything
• Tags Building blocks of an HTML page
• Directions/Layout instructions are taken from
  TAGS
• Tags made up of English words or abbreviations
• Distinguished from regular words by angle
  brackets lt and gt (eg ltTAGNAMEgt)
• Some tags dictate how the page will be formatted
• The paragraph tag ltPgt starts a new paragraph
• Some tags dictate how words appear
• The bold tag ltBgt makes text bold
• Some tags travel in pairs / denotes an ending
  tag, or end of that tags function (eg
  ltTAGNAMEgtlt/TAGNAMEgt)

3
Introduction to HTML

• HTML Exercise/Demonstration
• All you need is a text editor (eg Notepad)
• Open Notepad
• Getting the html document ready
• Before adding content create your document
  layout
• ltHTMLgtlt/HTMLgt - Creates an HTML document. Every
  thing that will be displayed on the web page is
  enclosed between this beginning tag and the
  corresponding
• ending tag.
• ltHEADgtlt/HEADgt - Where you create the title of the
  page and other universal document information
• ltBODYgtlt/BODYgt - The visible portion of the page
• Giving your page a name
• ltTITLEgtMy very first HTML pagelt/TITLEgt

4
Introduction to HTML

• Giving the page some content
• In-between the ltBODYgtlt/BODYgt tags add the
  following lines of text
• Name
• Job title
• Department
• Office phone number
• e-mail address
• Save the page to your desktop (when you save
  under notepad use Save As All Files)
• Open browser to view the page

5
Introduction to HTML

• Add some line breaks / carriage returns at the
  end of each line
• Line break tag ltBRgt
• Save the page and view it again
• To add a header line in your content
• Header tag ltH1gt (largest), ltH2gt, ltH3gt, ltH4gt,
  ltH5gt, ltH6gt (smallest)
• ltH3gtMy Informationlt/H3gt
• To center your content
• Center tag ltCENTERgtAll contentlt/CENTERgt
• Save the page and view it again
• To make your content bolded text
• Bold tag ltBgtYour Namelt/Bgt
• To make your content italicized text
• Italicize tag ltIgtJob Titlelt/Igt
• Save the page and view it again

6
Introduction to HTML

• Link to our departments webpage
• Hyperlink tag
• ltA HREFhttp//www.mtsu.edu/gtMTSUlt/Agt
• Save and view the page, click on link then click
  on the browsers Back button to return to your
  page.
• Link to your e-mail address
• Hyperlink tag with mailto reference
• ltA HREFmailtocsjudy_at_mtsu.edugtMy e-maillt/Agt
• Change the font of your content
• Font tag ltFONT faceArialgtContentlt/FONTgt
• Save and view the page

7
Introduction to HTML

• Page cosmetics
• Changing the background color
• Using the bgcolor attribute in the ltBODYgt tag
• ltBODY bgcolorbluegt
• Choose a background color (white is default)
• Possible bgcolor values
• Color names (eg blue, red, purple)
• Simple colors
• Hex values (6633FF, CC3300, 993399)
• More complex colors
• See references for more hex colors
• Save and view the page

8
Introduction to HTML

• Changing the foreground color or text color
• Using the text attribute in the ltBODYgt tag
• ltBODY bgcolorblue textgreengt
• Choose your foreground color
• Changing the link color
• Using link attribute in the ltBODYgt tag
• ltBODY bgcolorblue textgreen linkred
  alinkpurple vlinkwhitegt
• Three different link states
• Choose your link colors
• Save and view the page

9
Publishing pages

• Viewing your pages via the internet
• Send pages to a web server (frank)
• How a page is distributed
• Server space maintenance
• FTP (file transfer protocol) used for sending
  pages to a web server

10
Publishing pages

• On MTSUs server, all pages in your web site
  should reside in a folder called public_html
• Your home page should be called index.html

11
Publishing pages

• You can publish pages (transfer them to our
  server) to mtsu.edu through an FTP client
• Go to the desktop
• Open WS_FTP
• Select files to be transferred and transfer them
• Open My Computer or Internet Explorer
• To view your home page, type in the following URL
  into the address field www.mtsu.edu/YourUserID

12
Web Graphics

• Why should we use graphics?
• Can be used to display information, such as a
  map, or a statistical graph.
• Can also create a certain look and feel to the
  site, also when used consistently, can create a
  unified look on your site that your audience can
  identify with.

13
Web Graphics

• Two main types of Web graphic files
• GIF (Graphics Interchange Format)
• Great for logos, charts, buttons
• JPG (Joint Photographic Experts Group)
• Great for photographs

14
Web Graphics

• Important points about graphics
• Keep graphic files size small Most users are
  impatient when it comes to pages loading.
• Add ALTernative text to identify graphics in
  non-graphic browsers.
• Resize the image in a graphic editor rather than
  sizing the graphic in HTML

15
Web Graphics

• ltIMGgt tag is used to insert graphic content.
  The SRC attribute is used to give the name of the
  file containing the graphics.
• ltIMG SRCmyphoto.jpggtlt/imggt
• ALT (alternative) text
• ltIMG SRCmtsulogo.gif ALTMTSUs Logogtlt/imggt
• For example, the MTSU homepage has graphic links
  to Students and Alumni, there is an ALT
  equivalent so if you were unable to see the
  graphic, the ALT text will tell you what it reads.

16
Web Graphics

• Resizing the Image
• The Internet uses pixel widths instead of inches.
  Pixels refers to the monitor resolution.
• Think in terms of a page being 650 pixels wide.
  Images should be around 200 pixels wide.
  Sometimes more or less depending on situation.
• Resizing the image in a graphics program will
  decrease the file size. Whereas resizing the
  image in HTML will distort the image appearance
  and the computer will still have to load the
  original sized image, then resize it. So it
  doesnt cut down on load time.

17
Web Graphics

• Where to find graphics/how to get in digital
  format
• www.google.com search for images
• Right click on image you want, save locally on
  your machine.
• Use a desktop scanner to scan images.
• Film developing, select digital format for a CD
  of your roll of film.

18
Web Graphics

• Adding a graphic to a Web page
• HTML code ltIMG SRCmtsulogo.gif ALTMTSUs
  Logogt
• Modifying graphic
• Add a border ltIMG SRCmtsulogo.gif ALTMTSUs
  Logo BORDER1gt
• Change alignment ltIMG SRCmtsulogo.gif
  ALTMTSUs Logo ALIGNRIGHTgt

19
Testing Your Pages

• Its always important to test your work.
• Check your page in different browsers like
  Microsoft Explorer and Netscape.
• Check your page in older versions of those
  browsers. People may be using old machines and do
  not have the latest versions of browsers.
• Check for Accessibility.
• Check to make sure you have used ALT tags on
  graphics
• Use Bobby site to test for accessibility issues.
• http//bobby.watchfire.com/bobby/html/en/index.jsp
  

20
Common Reasons Why Pages Dont Work

• Copied text from Word that hasnt been stripped
  of its formatting.
• File names of HTML pages or graphics with more
  than eight characters.
• Using spaces and special characters in file
  names.
• Incorrect HTML coding.
• Redundant HTML tags, for example ltFONT
  FACEarialgtltFONT FACEtimes size 9gtWelcome
  to my homepagelt/FONTgt