Basic HTML Tags

Headings

Like any document HTML documents may have several layers of headings. In fact you can have heading levels from 1 to 6 in an HTML document.

Now modify the example above to add the next three levels of headings. What do you notice? What happens if you add a level 7 heading? What happens if you close an h2 tag with an h1 or an h3?

As you might expect, the headings continue to get smaller as you go from 1 to 6. But when you go to level 7 the text gets bigger. This is because the web browser is written so that it just ignores any tags that it does not know about. This is somewhat of a disadvantage as you don’t get any error messages, things just look wrong, and you have to figure out why.

Another aspect of the heading tag is that it is what we call a block tag. Notice that each heading appears on its own line. Thats pretty much what we would expect for a heading. But not necessarily for other tags. shortly, we will see some inline tags that do not each appear on their own line.

Paragraphs

Paragraphs are another funamental element of documents. Paragraphs are also another example of a block element in that each paragraph gets its own space and is separated from other html elements by blank lines in the document.

What happens when you put a paragraph inside another paragraph? What about a header inside a paragraph?

Images

Images are another common element of a document or a web page. To include an image in a document you must use an img tag. Image tags are an example of an inline element because they just flow in with the surrounding text. They do not force a new block to be created in the rendering of the html. Here are a couple of images:

../_images/LutherBellPic.jpg

Luther Bell: http://interactivepython.org/runestone/static/webfundamentals/_images/LutherBellPic.jpg

../_images/norse-logo.png

Norse Logo: http://interactivepython.org/runestone/static/webfundamentals/_images/norse-logo.png

The image tag has a new component to it called an attribute. In general tags can have many attributes in the case of an image we can inlude it by using a src attribute that contains the URL to the image we want to embed. We can embed any image on the internet in our own document by referring to it by its URL in the src attribute.

Try modifying the example above so that it includes the norse logo rather than the bell. You can also change the height and width of an image by using a height= attribute or a width= attribute. Try changing the size of the image in the example above. Notice what it does to the flow. Try changing just one of height or width and then try changing both at the same time. You can stretch your image in all kinds of crazy ways.

There are several other attributes of the image tag as well. You can read about them here.

Simple Text Formatting

Making text bold or italic and other formatting is easy in HTML as well. The following example illustrates the basic text formatting tags.

You can mix and match these styles in all kinds of ways. Try making a superscript inside a superscript. Try making the subscript bold or italic.

Check your Understanding

Click on the beginning tag for all block elements in the example.Block elements start on a new line and take up the full width available.
<html>
<body>

<h1>Welcome to my Page</h1>
<p>Hello World!   This is <b>me</b> <img src="me.jpg"> </p>
<p>This is my second paragraph
<a href="home.html">Click here for my homepage</a>
</p>
</body>
</html>
Click on the beginning tag for all inline elements in the example.Inline elements do not start on a new line and only take as much width as needed.
 <html>
 <body>
 <h1>Welcome to my Page</h1>
 <p>Hello World!  This is <b>me</b> <img src="me.jpg"> </p>

 <p>This is my second paragraph
 <a href="home.html">Click here for my homepage</a>
 </p>
 </body>
 </html>
Next Section - Advanced HTML Tags