MA10126 Introduction to HTML by gregoria

VIEWS: 41 PAGES: 19

									          MA10126
    Introduction to HTML


          Gavin Shaddick
www.bath.ac.uk/~masgs/ma10126.html
            Web addresses
• URL - Uniform Resource Locator
         "protocol://address"

• protocol is something like http, gopher,
  FTP, telnet
• address is merely the server and pathname
  (if any) of a given resource or page
• For example, http://www.bath.ac.uk
            What is HTML?
• HTML – “hypertext mark up language”
• a format that tells a computer how to
  display a web page in a browser, e.g
  Explorer, Netscape.
• The documents themselves are plain text
  files with special "tags" or codes that a web
  browser knows how to interpret and display
  on your screen.
Where do you create HTML files ?
 • Any text editor program capable of creating
   plain text files e.g. emacs, pico or even
   notepad in windows.
 • Dedicated HTML editor or generator, e.g.
   Frontpage
 • You cannot guarantee that your document
   will appear to other people exactly as it
   does to you.
                   Tags
• HTML is composed of tags.
• HTML tags are always enclosed in angle-
  brackets, < >
• Tags typically occur in begin-end pairs.
  These pairs are in the form
           <tag> ... </tag>
Begin-end tags
             Document tags
• The first and last tags in a document should
  always be the HTML tags

        <html>
        </html>


• If you were to load such a page into a Web
  browser, it wouldn't do anything except give
  you a blank screen
               Heads and titles
• HEAD
  – contain all of the document's header information, e.g.
    title
       <head>        </head>
• TITLE
  – This will appear at the top of the browser's title bar, and
    also appears in the history list.
  – Will also go into a bookmark list
       <title> Document Title </title>
                  Body
• BODY comes after the HEAD structure.
• Between the BODY tags, you find most of
  the content that gets displayed in the
  browser window.
  <body>
  This appears in the browser window
  </body>
           First web page
<html>
<head>
<title>MA10126 - HTML</title> </head>
<body>
This appears in the browser window
</body>
</html>
Putting it all together
              Comment Tags
• If you want to leave yourself notes in an HTML
  document, but don't want those notes to show up
  in the browser window
• <!-- Hi, I'm a comment. -->
• you do need an exclamation point after the
  opening bracket, but not before the closing
  bracket.
• there is no end tag, i.e. </!-- text -->
• This is an empty tag
                  Headings
• Used to set apart document or section titles.
• There are six levels of headings, from Heading 1
  through Heading 6.
• Heading 1 (h1) is "most important" and Heading 6
  (h6) is "least important."

            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>
                  Paragraphs
• The beginning of a paragraph is marked by <p>,
  and the end by </p>.

<p> Paragraphs can often be far too long, wandering on
  with no clear sense of direction or purpose, boring
  the reader to sleep and obscuring the point of the
  message contained within the text. </p>
<p> On the other hand, they can be pretty short. </p>
<p> Really short. </p>
                    Line break
• If you want to end a line after a certain word, but
  don't want to start a new paragraph
• Use the <br> tag
• There is no </br> tag – another empty tag

<p> If you want to force a line break for some reason,
  but it doesn't make sense to start a new paragraph,
  then you can use the line break tag just as I will do at
  the end of this sentence.<br> See the forced display
  on the next line?<br> How about there?<br> Or
  there? </p>
             Hyperlinks
• HREF stands for "Hypertext REFerence”
    Have you seen the
 <a href="http://www.bath.ac.uk/">
    Bath home page </a>

<a href=“c:\web\example1”> Click here to
 see this example </a>
                    Images
• Images are placed in Web documents using the
  IMG tag, <img>
• Kept in separate files
• Use a SRC attribute - "source"
• Can be a web address or a file

        <img src="URL of graphic">

     <img src=“c:\web\figures\boatseattle.jpg">
Creating your own home page on
             BUCS
• Run the mkhome command on UNIX server
• Creates a basic home page (ie name, postal
  address, phone & fax numbers and e-mail
  address).
• Home page is called index.html
• Created in a directory called public_html in your
  UNIX home directory
• Also accessible on H drive under public_html
    Your homepage on the web
• Once you've created your personal home
  page it will be added to the list of all
  personal home pages at Bath
• URL: http://www.bath.ac.uk/~username/
• index.html will be the first page that opens
• This facility is provided as a personal
  privilege and should not be abused

								
To top