Table of contents
Learn Online for Free
At ZENVA we have a full HTML/CSS beginners video course, you can access it for free here.
The paragraph element
In HTML, the paragraph tag is part of the block level elements group.
Block level elements will generally start on a new line, and any Mark-up under or after the block
level element will also start on a new line.
Here is an example of a paragraph tag in HTML, followed by some text after the ending paragraph
tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paragraphs</title>
</head>
<body>
<p>This is a paragraph in HTML</p>
We are no longer inside the Paragraph element.
</body>
</html>Even though all of the text is on one line, the paragraph tag (block level element) will place the
text after the closing paragraph tag on a new line.
Output:
This is a paragraph in HTML
We are no longer inside the Paragraph element.
Block level elements
There are a variety of other block level elements available in HTML; including Headings, logical (or document) divisions, horizontal rules, ordered lists and unordered lists.
So, lets check out some of these block level elements in action.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Block level elements</title>
</head>
<body>
<h1>I am a level 1 heading</h1>
<h2>I am a level 2 heading</h2>
<div>I am inside a logical division</div>
<hr />
I have a horizontal rule above me!
<ol>
<li>This is an ordered list.</li>
<li>I am ordered by numbers</li>
</ol>
<ul>
<li>This is an unordered list.</li>
<li>li stands for list item</li>
<li>We put list items inside the list element</li>
</ul>
</body>
</html>Output:
I am a level 1 heading
I am a level 2 heading
I have a horizontal rule above me!
- This is an ordered list.
- I am ordered by numbers
- This is an unordered list.
- li stands for list item
- We put list items inside the list element
Line break
The break element or tag in HTML (as you can guess) provides a break (or new line). Some people may like to ‘over-use’ this element, but I suggest using the paragraph element when dealing with
text (where possible), to provide formatting and appropriate spacing.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Line Break</title>
</head>
<body>
This text is before our line break
<br>
</body>
</html>We could do the same thing with the paragraph tag, but with a better format.
Try it out! Create a new HTML document and add two lines of text separated by a line break and load it in your browser. Take note of how this renders in your browser. Now try removing the line break, encasing each line of text within its own paragraph element and load it in your browser.
Text Modifiers
Introducing the strong and em tags.
As you may have guessed, the strong tag is used to define important text and will render text as bold.
The em tag is a little harder to guess… The em tag renders text as Italic and is used to ’emphasize’
text. The Strong and em tags are both part of the Text Modifiers group.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Text Modifiers</title>
</head>
<body>
This is some <strong>strong</strong> text and this is some text with <em>emphasis</em>!
</body>
</html>Text modifiers can be a simple way to make certain text stand out or add character to a document.
Just like this!
Images
Images are an important part of any form of content, especially websites. As a web developer, you will find it very helpful and necessary to be able to implement images onto a web page.
The image tag can be used as follows:
<img src="" alt="">
We would then put the URL for our image inside the src (source) attribute. The URL could be relative or absolute.
When Working in a Live or Development environment it is good practice to use relative file paths, rather than absolute or full file Paths.
• A relative file Path can be defined as being a localised link; using the current directory structure as a means of navigation between files.
• An absolute file Path is a direct link or URL to a file.
If we had an image titled ‘logo.png’ in the Same folder or directory as our current html file, we could Simply link to that file just by using the files name:
<img src="logo.png" alt="">
If our image or file was in a directory titled “images” inside our Current folder or directory we would then link to The Image using:
<img src="images/logo.png" alt="">
Some times we need to navigate downwards (as opposed to upwards) in our directory structure.
If our directory Structure looked something like: /home/html/Public/Current/
and our Current html document is in our “current” folder, we could link to our image (which would be located at /home/html/public/images/) by using:
<img src="../images/logo.png" alt="">
../images/logo.png basically tells the browser to navigate one directory down, into our images directory and locate the file titled logo.png.
Alternate Text
When an image is unable to be displayed by a browser we need a fall-back method.
So the alt (alternate text) can be used as our fall-back method; meaning we will have some descriptive text to
display if the image itself is unable to be displayed for any reason.
An example of an image not displaying could be an HTML email (Gmail will, by default hide any
images and ask the user if they want to show images) or the results in a search engine.
Search Engines cannot “read” images, so they can only render “alternate” text in Search Engine Result
Pages (SERPs).
It is good to be descriptive and short with the alt attribute, like so:
<img src="logo.png" alt="Html5 logo">
Displaying Images
So lets try out our image tag with a real image!
<img src="logo.png" alt="HTML5 Logo">
Output:
Hmmm.. I feel as though it would be a better idea to have the image a little smaller, wouldn’t you agree?
Sizing an Image
We can specify both height and width attributes inside our image tag like so:
<img src="logo.png" alt="HTML5 Logo" width="72" height="72">
Note: The height and width values are in px (pixels).
So, lets try out this image with the height and width attributes specified.
I am going to guess… It looks a little more appropriate now!
Anchor Tags/ Hyperlinks
Now, lets move on to the ever-so important hyper links.
We use an anchor tags like so:
<a href="">This is a link without a value for the href attribute.</a>
The above code will render as:
This is a link without a value for the href attribute.
Let’s try a simple link to google:
<a href="http://google.com">Go To Google?</a>
The above example will render:
Type out the above code and Try it out, notice that the browser will now load Google’s homepage when you click on the link.
We have covered how to link to a page, but what if we want our users to go to our linked page, but in a new window (so they don’t leave our interesting website)?
<a href="http://google.com" target="_blank">Go To Google?</a>
The above example will render:
Type out the above code and Try it out, notice that the browser will now load Google’s homepage in a new window when you click on the link.
The most important attribute for the anchor tag is the href attribute. The href (Hypertext Reference) attribute will tell the anchor tag where to link to, or where to send the user once clicked on.
Email Links
In HTML we can create a matilto: link, when the user clicks on this link, their email client will open and the mailto: value (our email address) will be added to the TO: field.
This makes it easy and enticing for a user to quickly send us some email, regarding our web page.
<a href="mailto:[email protected]?Subject=Email">Contact Us!</a>
You may have noticed that I have added ‘?Subject=Email’, this will add “Email” to the subject field within the email. You can change the mailto and Subject values to suit your needs.
Tables
Sometimes when we have some information to display on our web page, it makes sense to display that information or data in a table. Tables in HTML are relatively simple. We have the Opening Table Tag and The closing Table tag. Inside of our Table element, we have table rows. Inside the table rows we have table data or cells. But, for our table headers, we will be using the table header
tags inside our table row.
Here is an example of a 3×3 table:
<table>
<tbody>
<tr>
<th>Height</th>
<th>Width</th>
<th>Color</th>
</tr>
<tr>
<td>200</td>
<td>50</td>
<td>Green</td>
</tr>
<tr>
<td>450</td>
<td>25</td>
<td>Black</td>
</tr>
</tbody>
</table>Output:
| Height | Width | Color |
|---|---|---|
| 200 | 50 | Green |
| 450 | 25 | Black |
Forms
One of the many things you may have noticed on a web page is a contact form, for example. We can create a form in HTML by using the form opening and closing tags. Inside of our Form element we have inputs and a submit button.
Some of our inputs will be of type text and our submit button will actually be an input of type submit. When we work with HTML forms in the real world, the are two attributes that we need to add to our opening form tag.
Method and Action:
The scope of this tutorial will not be covering server-side processing of HTML data, but it is helpful to know what these attributes do. For the action attribute, you would enter in the destination of the Form data.
The method will take either a POST or GET value. You would generally be using POST to submit most forms of data. The main difference between POST and GET is that POST sends data to the server ‘behind the scenes’, whereas GET will form a query string. A query string consists of name attribute values and the values input by the user. As you can imagine, if we were submitting sensitive data to the server we would definitely not use GET; in the case that we did, all information input by the user would be clearly visible in the URL address bar.
For the purpose of this tutorial, we will be taking a look at forming a query string, using GET. Type out the following code and enter and select some values from the form and click the submit button.
<form action="#" method="GET"> <input type="text" name="first"> <input type="text" name="last"> <br> <input type="checkbox" name="rememberMe" value="yes"> Remember Me? <br> <br> <input type="submit"> </form>
Output:
Remember Me?After you fill in some of the fields and click the submit button, take a look in your URL Address bar; this is called a query string- the part following the ‘?’.
