Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, we studied about the Html phrase tags. In this tutorial guide, we are going to be discussing about the rest of the phrase tags.
Short Quotations
The <q>......</q> element is used when you want to add a double quote within a sentence. Below is a simple example.
Example
<!DOCTYPE html>
<html>
<head>
<title>Double Quotes Example</title>
</head>
<body>
<p>Lagos is in Nigeria, <q>I think am correct</q>.</p>
</body>
</html>
<html>
<head>
<title>Double Quotes Example</title>
</head>
<body>
<p>Lagos is in Nigeria, <q>I think am correct</q>.</p>
</body>
</html>
You should try the above code out to get a clearer understanding and feel free to drop your questions in the comment box, i will attend to them as soon as possible.
Text Citations
If you are quoting a text, you can indicate the source by placing the text in between an opening <cite> tag and closing </cite> tag. The contents of the <cite> element is displayed as an italiced character by default. Below is a very simple example -
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Citation Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite></p>
</body>
</html>
<html>
<head>
<title>Text Citation Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite></p>
</body>
</html>
You
should try the above code out to get a clearer understanding and feel free to drop your questions in the comment box, i will attend to them as soon as possible.
Computer Code
When you are working with Html, any computer code to appear on the web page should be placed inside <code>....</code> element. The content of the <code> element is normally been displaced in a monospaced font, just like the code in most programming text books. Below is a simple example.
Example
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Normal text goes here and <code>Computer Code goes here</code> and it continues with a regular text.</p>
</body>
</html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Normal text goes here and <code>Computer Code goes here</code> and it continues with a regular text.</p>
</body>
</html>
You
should try the above code out to get a clearer understanding and feel free to drop your questions in the comment box, i will attend to them as soon as possible.
Keyboard Text
When talking about computers, if you want to tell the reader to enter some texts, you can make use of the <kbd>.......</kbd> element to indicate what should be typed in. An example goes below
Example
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Insert your<kbd>names and age</kbd>here.</p>
</body>
</html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Insert your<kbd>names and age</kbd>here.</p>
</body>
</html>
You
should try the above code out to get a clearer understanding and feel free to drop your questions in the comment box, i will attend to them as soon as possible.
Programming Variables
This element is used jointly with the <pre> and <code> elements for indicating that the content of the element is a variable. Below is a simple example.
Example
<!DOCTYPE html>
<html>
<head>
<title>Programming Variables Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>
<html>
<head>
<title>Programming Variables Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>
You should try the above code out to get a clearer understanding and feel free to drop your questions in the comment box, i will attend to them as soon as possible.
Program Output
The <samp> and </samp> element is used to indicate sample output of a program, and script etc. It is mostly used when documenting a programming concept. Below is a simple example.
Example
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>The output of this program is <samp>Hello HTML and CSS</samp></p>
</body>
</html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>The output of this program is <samp>Hello HTML and CSS</samp></p>
</body>
</html>
You
should try the above code out to get a clearer understanding and feel free to drop your questions in the comment box, i will attend to them as soon as possible.
Address Text
When discussing about Html, as the name implies the <address>.....</address> element is used in Html to contain any address. Let us take a look at a short example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Address Text Example</title>
</head>
<body>
<address>plot 26B Oladimeji Alo Street Lekki Phase 1,Lagos Nigeria</address>
</body>
</html>
<html>
<head>
<title>Address Text Example</title>
</head>
<body>
<address>plot 26B Oladimeji Alo Street Lekki Phase 1,Lagos Nigeria</address>
</body>
</html>
You should try the above code out to get a clearer understanding and feel free to drop your questions in the comment box, i will attend to them as soon as possible.
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about the Html Meta Tags.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.