[TECH NOTES] Hypertext Markup Language (HTML)

  •  HTML describes the content and structure of information on a web page.
  • The HTML language is not the same as the presentation (which appears on the screen).
  • HTML surrounds text content with opening and closing. (Tags)
  • Each tag’s name is called an element.
  • Most white space is insignificant in HTML.
    • <element>content </element>
  • Some tags can contain additonal information called attributes.
    • <element attribute=”value” attribute=”value”> content </element>
  • Some tags don’t contain contents, so can be written as following:
    • <element attribute=”value” attribute=”value” />
    • Ex:<img src=”bunny.jpg” />
    • Ex: <hr />

 

Structure of HTML Page

<html>

<head>

Information about the page

</head>

 

<body>

Page contents

</body>

</html>

 

  • A header describes the page and a body contains the page’s contents
  • An HTML page is saved info a file .html
  • A newer version of HTML, standardized in 2000, and uses a markup format called XML. Hence (XML + HTML = XHTML).
  • Why use XHTML and web standards?
    • More rigid and structured language.
    • More interoperable across web browsers.
    • More likely that our pages will display correctly in the future.

 

Structure of XHTML page

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

<html xmlns=”http://www.w3.org/1999/xhtml“>

<head>
information about the page
</head>

<body>
page contents
</body>

</html>

  • Page Title: <title>
    • Placed within the head of the page.
    • Displayed in the browser’s title bar and when bookmarking the page.
    • Example: <title>CSE  190 M: HTML</title>
  • Block-level and inline elements
    • Block-Level:
      • An element contain an entire large region of text.
      • Examples: paragraphs, lists, table cells.
      • The browser places a margin of whitespace between block-level elements for separation.
    • Inline:
      • An element affect a small amount of text and must be nested inside a block-level element
      • Examples: bold text, code fragments, images.
      • The browser allows many inline elements to appear on the same line or within the same block-level element.
  • Paragraph: <p>
    • Paragraph of text (block-level)
    • Example:  <p>You’re not your job.
      You’re not how much money you have in the bank.
      You’re not the car you drive.   You’re not the contents
      of your wallet. You’re not your         khakis.  You’re
      the all-singing, all-dancing crap of the world.</p>
  • Headings: <h1>, <h2>, … , <h6>
    • Headings to separate major areas of the page (block-level)
    • Examples:  <h1>University of Whoville</h1>
      <h2>Department of Computer Science</h2>
      <h3>Sponsored by Micro$oft</h3>
  • Anchors: <a>
    • Anchors denote links to other pages (inline)
    • Examples:
      • <p>Search
        <a href=”        http://www.google.com/”>Google</a> now!</p>
      • Use the href attribute to specify the distination URL.
      • Anchors are inline elements, so they must be placed inside a block-level element such a <p> or <h1>
    • Types of URLs that can appear in anchors
      • Relative: to another page on this website.

<p><a href=”1-internet.html”>Lecture Notes 1</a></p>

  • A tooltip can be specified with the title attribute.
  • Nesting Tags:
    • Tags must be correctly nested.
    • The Closing tag must match the most recently opened tag.
  • Line Break: <br>
    • Line break forces a line break in the middle of a block-level element.
    • It’s considered as inline component.
    • Example: <p>Teddy said it was a hat, <br />So I put it on. </p>
    • <br /> should be immidiatly closed with /
  • Horizontal Line: <hr>
    • A horizontal line to visually separate sections of a page.
    • It’s a block-level component.
    • Example:

<p>First Paragraph</p>

<hr />

<p>Second Paragraph</p>

<hr />

  • Hr should also be closed with /
  • Images: <img>
    • Inserts a graphical image into the page.
    • It’s an inline component.
    • The src attribute specified the image URL.
    • XHTML also requires alt attribute describing the image.
    • To make an image as a link, place it inside an anchor
    • Example:

<p><a href=”http://theonering.net/“>
<img src=”gandalf.jpg” alt=”Gandalf from LOTR”
title=”You shall not pass!” /></a></p>

  • The title attribute specifies an optional tooltip
  • Comments: <!–…–>
    • Comments to document HTML file or “comment out” text
  • Unordered list: <ul>, <li>
    • Ul represents a bulleted list of items (block-level)
    • Li represents a single item within the list (block-level)
    • Example:

<ul>
<li>No shoes</li>
<li>No shirt</li>
<li>No problem!</li>
</ul>

  • List of lists:

<ul>
<li>Simpsons:
        <ul>
        <li>Bart</li>
        <li>Lisa</li>
        </ul>
</li>
<li>Family Guy:
        <ul>
        <li>Peter</li>
        <li>Lois</li>
        </ul>
</li>
</ul>

 

  • Ordered List: <ol>
    • Ol represents a numbered list of items (block-level).
    • Example:

<p>RIAA business model:</p>
<ol>
<li>Sell music on easily copyable discs</li>
<li>Sue customers for copying music</li>
<li>???</li><li>Profit!</li></ol>

Leave a comment