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

Tex/LaTex

Is also a markup language. It has structures similar to HTML
```
\begin{document}
...
\end{document}
```
It also allows you to construct complicated logic/math statements.

Source:
```
\forall x \in X, \quad \exists y \leq \epsilon
```
PDF:

Source:
```
\lim_{x \to \infty} \exp(-x) = 0
```
PDF:
Latex info@Reed (thesis template)
XML
HTML

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 not case sensitive (with a few exceptions such as the <!DOCTYPE> tag.)
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

<!DOCTYPE html>
<html>
<head>
<title>  </title>
</head>

<body>



</body>
</html>

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>

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>55% women, 45% men </li>
       <li>25% minority enrollment </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>

Glossary Lists: <dl> </dl>


     <dl>
       <dt> Term </dt>
       <dd > Definition </dd>

       <dt> Term </dt>
       <dd > Definition 1 </dd>
       <dd > Definition 2 </dd>
       <dd > Definition 3 </dd>
     </dl>

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 </li>
       <ul>
	 <li> Art </li>
	 <li> Dance </li>
	 <li> Music </li>
	 <li> Theatre </li>
       </ul>
       <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