2.2. Basic HTML Tags¶
2.2.1. 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.
2.2.2. 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?
2.2.3. 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:
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.
2.2.4. Links¶
The last basic link to cover in this section is the link tag a
. In fact the last sentence of the previous section used a link to send you to the w3schools website to learn more about the attributes of an img
tag. Links are what made the web so popular in the first place. Today we call them links, but in earlier years they were usually referred to as Hyperlinks. You can provide a link to any URL on the web using the href
attribute on the a
tag. The text that you will click on goes between the opening a
tag and the closing a
tag.
Try clicking on the link in the example above. What happens? How do you get back? Don’t worry, you can always just reload this page.
Links can also be used to navigate within the same page. to do this you use one a
tag to create
an anchor point on the page using the name attribute like this: <a name="target">I am a target</a>
You can create
a link that will jump to the target anywhere else on the page using <a href="#target">Go to Target</a>
2.2.5. 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
<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>
<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>