Welcome back to the Web Developer’s Tutorial Page. This Tutorial will be about how to use Basic Tags when adding details in the body of the webpage.
If you tried to add text in between the body of your HTML website as discussed in the previous tutorial here. Then, you will have noticed that all the text you have added would wrap around in a long paragraph. Maybe you would like to add images or links to your page and didn’t know how. This tutorial will explain how to format your paragraphs, and add images and links to your webpage using basic tags.
Paragraph Tag
This is one of the most common tags used in web development. The paragraph tag has a very simple function it helps create a line break to separate one paragraph from another.
This way text like this:
It was a dark and stormy night. The window was being tapped ever so slightly by the dead tree branch. The tapping along side the gentle rumble of the rain drops pelting my rooftop was soothing. My throat was parched that night. I remember it well as I woke up and headed for the kitchen to quench my thirst. As I shuffled my feet down the hall I heard some children laugh nearby. At first it didn’t concern me thinking it was just the neighborhood kids that have not gone to bed just yet. Grabbing a cup from the cupboards, was when a sudden realization dawned on me. My house is alone with the nearest other dwelling a mile down the road both ways. With a horrific scream, I ran back to my room hiding under the covers until the morning’s light.
To look like this:
It was a dark and stormy night. The window was being tapped ever so slightly by the dead tree branch. The tapping along side the gentle rumble of the rain drops pelting my rooftop was soothing.
My throat was parched that night. I remember it well as I woke up and headed for the kitchen to quench my thirst. As I shuffled my feet down the hall I heard some children laugh nearby. At first it didn’t concern me thinking it was just the neighborhood kids that have not gone to bed just yet.
Grabbing a cup from the cupboards, was when a sudden realization dawned on me. My house is alone with the nearest other dwelling a mile down the road both ways. With a horrific scream, I ran back to my room hiding under the covers until the morning’s light.
The paragraph tag is one of the few tags used in HTML where it doesn’t need closing tag. Due to this every new paragraph created should begin with the start paragraph tag.
start tag and end tag.
<p> </p>
Line Break Tag
The Line break tag is very similar to the paragraph tag. Both tags can be used to create line breaks and the two tags do not need to have an end tag. However the main difference between the line break tag and the paragraph tag is being able to use the tag multiple times. Also line break tags have no end tags.
For example:
| Example Code | Result of the code |
| <p> <p> <p> | Results in only 1 line break as web browsers will only read the first paragraph tag. |
| <br> <br> <br> | Results in 3 line breaks as web browsers. |
Start Tag
<br>
Image Tag
The image tag allows you to take an image that is in the website’s root directory (or a subfolder in the root directory). Images that are hosted on other web domains can also be displayed on your website (Just make sure you have permission to use the image before placing it on your site).
The image will be displayed once it is linked onto the website. There Image Tag does not have an end tag since the tag only calls for an image to be brought into the webpage.
The Image tag is typed as follows:
<img src=”(URL of image location)”>
One way that makes it easy for me to remember this tag is reading it as “image source is this URL”.
Link Tag
The Link tag is designed to take text or an image and convert it to a clickable object that redirects the user to another webpage. The only things you need are the URL of the landing page and what you want the link to be.
The link tag is typed as follows.
<a href=”(URL destination)”>(Text or image tag)</a>
Everything that is between the start and end tag of the link tag will become a clickable object that redirects the user to another webpage.
Conclusion
Thank you for reading this part web building tutorial. I hope these basic tags will help you in formatting all the information on your webpages. Next time, Page Layouts will be discussed from headers and footers, to division tags and table tags. Until then See you later.