HEP header HEP logo

HTML Basics


HTML uses tags to format pages. Tags are written like this <opening tag> and </closing tag>. Here is a completely empty html page that you can use to get started.

	<!DOCTYPE html>
	<html>

	<head>
	Information on setting up the webpage goes here.
	</head>

	<body>
	The text that you'd see on the page goes here.
	</body>
	</html>
	

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: 
  
}