Basic HTML

1
Basic HTML

• with Internal Cascading Style Sheets

2
HTML HyperText Markup Language

• HTML is a markup language designed for the
  creation of web pages and other information
  viewable in a browser.
• HTML is used to structure information denoting
  certain texts as headings, paragraphs, or lists,
  separating sections of the page into separate
  divisions, and so on
• it is up to the browser to determine how each of
  these elements is displayed when the page is
  viewed...

3
HTML Quick history

• HTML started out with really loose syntax rules
  that made it easy to make pages viewable in web
  browsers
• However, each update to HTML by the W3C gets
  stricter and stricter, as people become
  accustomed to making correct pages and are more
  open to web standards
• The current version of HTML is XHTML 1.0. We're
  using it today, but leaving out a few of the more
  complicated rules of it until later on.

4
HTML HyperText Markup Language

• You can write an HTML page by hand using any text
  editor (Notepad, WordPad, etc).
• Because using higher-end text editors (like
  Microsoft Word) tends to add invalid characters
  that messes up the HTML (like smart quotes
  where you should have "straight quotes"), I would
  stick to Notepad for now.
• Save your page as HTML by changing the extension
  to .htm or .html using "Save As" (either one is
  fine, but be consistent)

5

• In HTML, each page should at least have the
  following
• Page Title
• Content for the body

6
Tags

• and ,
• and , and
• and are all examples of markup
  tags.
• Most types of markup tags have can also have
  attributes that go along with them.
• These attributes specify more about the tag, such
  as its ID or class (for style sheets).

7
Some HTML tags to remember

• This is a paragraph
• Most Important Headline
• Less Important Headline
• Even less important headline
• "strong" text, bold by default
• "emphasized" text, italicized by default
• This is for unordered (bulleted) lists
• These go around ordered (numbered) lists
  
• These go around each item in a lists
• Your
• tags should go between
  or
  
  tags
  1. 
     Is a line break. You dont need a
     .
     Instead, the closing slash is included in the
     opening tag.
  
  8
  To Display an Image
  • altdescribe what this image is of /
  • The src attribute tells the browser where to find
    the image
  • if it is saved in the same directory (folder) as
    your page, you can just put the file name (
    src"pic.jpg" / ). This is a relative path
    because the image is located in a folder relative
    to the page you are currently on.
  • if it is saved on a different server than your
    page, you have to put in its full address, like
  • This is a absolute path, because the source of
    the image doesn't depend on where the page you
    are writing is stored.
  
  9
  To Display an Image
  • altdescribe what this image is of /
  • The alt attribute tells the browser what to
    display if the picture cant be displayed.
  • Every img tag that displays an image important to
    your web pages meaning should have an alt
    attribute
  • EVERY IMG TAG THAT DISPLAYS AN IMAGE IMPORTANT TO
    YOUR PAGE'S MEANING SHOULD HAVE AN ALT ATTRIBUTE
  • If the image is not important to the page's
    meaning, just say alt"" (an empty alt attribute)
  
  10
  Hypertext
  • Hypertext is what separates the WWW from
    traditional document formats the ability to jump
    around the document by clicking text instead of
    going in a linear path through the data
  • To link to another page, use the anchor tag with
    a hypertext reference (HREF)
  • Clickable Text
  • You can also make the page appear in a new
    window, by changing the target attribute of the a
    tag
  • Click/a
  
  11
  Styles
  • If you had a chance to look around the w3schools
    last class, you might have seen ways to change
    font color and such
  • There is a lot of attributes for tags that allow
    you to change the look of the document, but it is
    worth repeating again that HTML was never meant
    to define the design or formatting elements of a
    page, just the content.
  
  12
  Styles
  • Although design tags like font were added to HTML
    3.2, in more recent versions all formatting has
    moved to a separate attribute called style.
  • Using styles is easy to do, and lets you do a lot
    of things you couldnt do the old way
  
  13
  Styles CSS
  • For instance, one thing you can do with styles is
    define what the existing tags meanfor instance,
    making the tags turn the text
    in between them maroon, instead of making it
    darker.
  • You do this by adding style definitions to your
    page using a cascading style sheet (CSS).
  • You can do this with an external style sheet that
    is separate from your HTML page, but for right
    now we will keep it in the same page and put our
    new style definitions in our header, to keep the
    tags company
  
  14
  • Page Title
  • strong color maroon font-weight
    normal
  • a color gray text-decoration none
  • ahover
  • color black
  • border-top-style dashed
  • border-bottom-style dashed
  • background gray
  • Title
  • A paragraph. Strong
    stuff.
  • Linkp
  
  15
  Styles
  • You will notice that by using styles, you can
    change how a hyperlink is displayed, and what
    happens when you put your mouse over the
    hyperlink (through defining ahover)
  • You can check out all the different ways to
    define styles by going to the learn CSS link at
    www.w3schools.com.
  • Play around with defining styles, and see what
    you can come up with. We'll be talking about them
    A LOT more in coming days.
  
  16
  Lab 1
  • Use Notepad to write a personal web page in HTML.
    
  • Your page should have at least 3 different
    sections, each with a heading or title. For
    instance, in one section you could tell me about
    you, in another you could tell me about your job
    or hobbies, etc.
  • Use at least 6 different pre-defined tags, not
    including the , , , or
    tags. Define styles for at least 3 of the tags
    you use.
  • Include at least two hyperlinks. Consider making
    one of the hyperlinks open up a page in a new
    window using the target"_blank" attribute.
  • You may include pictures from other sites, but do
    so by using an absolute path, setting the source
    equal to the pictures current location on the
    Internet, like/
  • You must cite the source of all pictures you use
    on your site, giving the address where you found
    each picture as a hyperlink.
  • USE THIS POWERPOINT AND THE W3SCHOOLS FOR
    REFERENCE!!!