HTML 2

Markup

"A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text." (from Wikipedia)

Text:

   Google googlers google Google

With (made up) markup:

  <adjective>Google</adjective>  <noun>googlers</noun> <verb>google</verb>  <noun>Google</noung>


// googlers who work at Google, search using google search engine, the term Google

Notes

HTML Elements

Most elements are written with a start tag and an end tag, with the content in between. Tags are composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag.

A paragraph element <p>


     <p> 
     Call me Ishmael. Some years ago - never mind how long precisely -
       having little or no money in my purse, and nothing particular to
       interest me on shore, I thought I would sail about a little and see
       the watery part of the world. It is a way I have of driving off the
       spleen and regulating the circulation. 
     </p>

Html tags are generally not case sensitive but I suggest you keep it consistant
White space and indentation are ignored.

Notes

Required elements

These elements are required in HTML4 and HTML5 specification. They used to be optional hence most browsers still work without them.

<!DOCTYPE html>
Tells the browser which specification this document is based on. In this case HTML 5. There is no end tag.
<html> </html>
Should immediately follow <!DOCTYPE html>. Indicates to the browser that the content of this file is in HTML.
<head> </head>
Container for information about the page. Here we have the title of the page.
<body> </body>
The content of the HTML page.

Sample HTML page from last class

Notes

Headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Headings are titles to sections of a page. There are six levels of headings in HTML.

Sample file


     <h1>Reed College </h1>
     <h2>Division of the Arts</h2>
          <h3> Art</h3>
          <h3> Theater</h3>
          <h3> Music </h3>
     <h2>Division of History and Social Sciences </h2>
          <h3>Anthropology</h3>
          <h3> Economics </h3>
          <h3> History </h3>
          <h3> Political Science </h3>

Remember, it has to have all the requirement elements to be read

Notes

Paragraphs <p>

Sample file


     <p> Since its founding in 1908 as an independent undergraduate
     institution, Reed College has remained steadfast to one central
     commitment: to provide a balanced, comprehensive education in
     liberal arts and sciences, fulfilling the highest standards of
     intellectual excellence. Reed offers a liberal arts education of
     high quality under unusually favorable conditions, including a
     challenging curriculum involving wide reading, conference- and
     laboratory-based teaching in small groups, and a student body
     motivated by enthusiasm for serious intellectual work.  </p>

Notes

Comments


     <!-- this is a comment. -->
     
     <!-- Text within comments is ignored when the page is parsed and is not shown -->

Note that while comments are not rendered by the browser, it is still in the HTML file which can still be viewed through
Chrome: View -> Developer -> View Source

Notes

Lists

Sample file

List item: <li> </li>

Unordered Lists: <ul> </ul>

     <p> People </p>
     <ul>
       <li> Approximately 1,400 students </li>
       <li> 394 1st year students</li>
       <li> 135 faculty members     </li>
     </ul>

Ordered Lists: <ol> </ol>

     <p> UNDERGRADUATE ORIGINS OF PH.D.s </p>
     <ol>
       <li>Calif. Inst. of Tech. </li>
       <li>Harvey Mudd </li>
       <li>Reed </li>
       <li> Swarthmore </li>
       <li>MIT </li>
     </ol>

FYI: You can change the numbering and bullet styles through CSS.

Notes

Nesting (1)

HTML elements are nested. (You are allowed to start/open a tag any time you want. Before you close a tag, you must close all other tags you opened after that tag.)

In the following example on the left, note that <head> and <body> is nested inside the <html> tags. Nesting creates a parent child relationship.If one element encloses another, it is called the parent of the enclosed (child) element.

With this picuture, after "html", "head", I can't close "html" because I need to close "head" first.

Nesting (2)

Sample file


     <p> Academics </p>
     <ul>
       <li> Arts 
       <ul>
	 <li> Art </li>
	 <li> Dance </li>
	 <li> Music </li>
	 <li> Theatre </li>
       </ul>
       </li>
       <li> History and social sciences </li>
       <li> Literature and language </li>
       <li> Mathematics and natural sciences </li>
       <li> Philosophy, religion, psychology, and linguistics </li>
       <li> Interdisciplinary </li>
     </ul>

Notes

Other tags that add meaning

<em> ... </em>	Emphasize
<strong> ... </strong>	More strongly emphasized than <em> </em>
<code> ... </code>	Code sample
<cite>... </cite>	Citation
<blockquote>... </blockquote>	Quoting text
<address> ... </address>	Address

<address>
     Reed College 3203 SE Woodstock Blvd. Portland OR <br />
     <a href="mailto:info@reed.edu"> info@reed.edu </a>
</address>

Interpreted by browser:

Reed College 3203 SE Woodstock Blvd. Portland OR
info@reed.edu

Notes

HTML Tags

We will cover some more in future classes but for exhaustive list, see List of HTML Elements at w3schools

Notes