header

HTML Help

Html uses tags to format pages. The first line in your html pages should be a tag that says that this is an html file. It should look like this:

<!DOCTYPE html>

The next line should be the opening html tag (<html>). Then your file should end with the closing html tag (</html>). Everything else on your page should go between these two tags. Two other tags that just about every webpage will have are the head tags (<head> & </head>) and the body tags (<body> & </body>). The best way to learn how to use html is to look at the source of other people's html pages. The following lists some of the more common html tags and what they produce.

Headings

HTMLBrowser View
<h1>h1 text</h1>

h1 text

<h2>h1 text</h2>

h2 text

<h3>h1 text</h3>

h3 text

<h4>h1 text</h4>

h4 text

<h5>h1 text</h5>
h5 text
<h6>h1 text</h6>
h6 text

Paragraphs and Line Breaks

Enclose all paragraphs between <p> and </p> tags.
To just create a line break, just use <br />.

Example

<p>Twinkle, twinkle, little star,<br />
How I wonder what you are!<br />
Up above the world so high,<br />
Like a diamond in the sky!</p>

<p>When the blazing sun is gone,<br />
When he nothing shines upon,<br />
Then you show your little light,<br />
Twinkle, twinkle, all the night.</p>

Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky!

When the blazing sun is gone,
When he nothing shines upon,
Then you show your little light,
Twinkle, twinkle, all the night.

Links

Link to other webpages using the <a href> and </a> tags. If the page is on a different site, be sure to put the entire web address after the href tag. If the page is on the same site as the current page, only the filename is needed.

<a href="http://www.uchicago.edu">The University of Chicago</a> website
The University of Chicago website
Main <a href="/">Outreach</a> webpage
Main Outreach webpage

Lists

There are two types of lists available, ordered and unordered lists.

<ol>
<li>First List Item</li>
	<ul>
		<li>Subitem in unordered list</li>
		<li>Another subitem</li>
	</ul>
<li>Second List Item</li>
<li>Third List Item</li>
</ol>
  1. First List Item
    • Subitem in unordered list
    • Another subitem
  2. Second List Item
  3. Third List Item

Images

Images use the <img> tag. Here's an example image tag and the resulting image.

<img src="../images/full-color-sm.jpg" alt="small univeristy shield" />
small university shield

Code

To show plain text without any formatting (say to show code for example), use the pre or code tags.

<pre>
void setup() {
  // put your setup code here, to run once:

}

void loop() {
  // put your main code here, to run repeatedly: 
  
}
</pre>
setup() {
  // put your setup code here, to run once:

}

void loop() {
  // put your main code here, to run repeatedly: 
  
}