Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
33 views

Introduction To HTML 1

The document provides an overview of essential HTML tags including <!DOCTYPE html>, <html>, <head>, <title>, and <body>. It also describes common text, link, image, list, table, form, and other tags and their usage.

Uploaded by

ahmadmuhammadbuhari313
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Introduction To HTML 1

The document provides an overview of essential HTML tags including <!DOCTYPE html>, <html>, <head>, <title>, and <body>. It also describes common text, link, image, list, table, form, and other tags and their usage.

Uploaded by

ahmadmuhammadbuhari313
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Introduction to HTML

Overview
HTML tags are like keywords that define how a web browser will format and
display content. With the help of tags, a web browser can distinguish between
HTML content and simple content. HTML tags contain three main parts: an
opening tag, a content, and a closing tag. But some HTML tags are unclosed tags.

Essential HTML Tags

There are some tags in HTML that are necessary for your HTML document
because they present important information about our webpage for the
interpretation of the browser.
Some examples of essential HTML tags include <!DOCTYPE html> tag, the
<head> tag, the<title> tag, etc. Let's explore these and understand what they are
and how to use them.

The <!DOCTYPE html> Tag

The <!DOCTYPE html> tag is the first tag of any HTML document. It's a special
tag that does not have a closing set of brackets and doesn't have any HTML content
inside it.
It is used to tell the browser that the document loaded is an HTML document.

Here's the syntax to use it:


<!DOCTYPE html>
...
The <html> Tag
The first meaningful tag of any HTML document is the <html> tag. It indicates the
scope of an HTML document. All the other tags and content that constitute your
web page go inside this <html> tag.

If you put an HTML tag outside the <html> tag, it may not be considered by the
browser.
<html>
...
</html>

The <head> Tag

1
The <head> tag appears at the top of any HTML document. It displays some other
tags inside it that are used to give some additional information about the webpage.
For instance, it may have a <meta> tag to provide some meta information about the
document, as shown below.
<head>
<meta charset="UTF-8">
</head>

The <title> Tag

The <title> tag is used to give a title to the HTML document. This title also
appears on the tab of a browser where your HTML document is rendered.
<title> HTML Tags </title>

The <body> Tag

The <body> tag encloses all HTML tags that are used to create various HTML
documents and webpages of your website.
<body> …….. </body>

For instance, let's say you have a portfolio website where you want to talk about
yourself. The entire content of your portfolio website would go inside the <body>
tag as shown below:

<body>
<h1>
Hi there! This is my portfolio
</h1>
<p>I'm a <strong>web developer</strong></p>
</body>

Other HTML Tags

Now that we're through with the basics, let's explore some other commonly used
HTML tags alongside their use cases and syntax.

2
Unclosed HTML Tags

Some tags in HTML do not require a closing tag. They don't allow any content
inside them.
Since these tags don't have a set of closing brackets, they're called Unclosed
HTML tags. They're also known as void elements in HTML.

For instance, the horizontal ruling tag <hr> is an unclosed HTML tag.
Sytax:
<hr>

Here's a list of some the unclosed tags or void elements defined by HTML
Standard:
<br>
<col>
<hr>
<img>
<input>
<link>
<meta>

HTML Text Tags


The majority of content on any website comprises texts. HTML provides a bunch
of tags that allow us to render text on a webpage in different formats and sizes.

The <p> Tag

The <p> tag stands for the paragraph tag. It is used to render a paragraph or a
group of words on the webpage.

<p>
This is a paragraph!
</p>

You can use a <p> tag whenever you need to render more than one word, a line, or
a bunch of lines that need to be styled in a similar fashion.

The <span> Tag

3
The <span> tag is used for a group of words within a paragraph that needs to be
styled differently.
Here's an example of a <span> tag that has a different font color than the rest of the
paragraph:

<p>Our <span style=”color:red”programming class </span>, is Mondays</p>


Now all the words enclosed within the <span> tag will have a red color, unlike the
outside tags.

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading
of a HTML tag.
<h1> This is H1 </h1>
<h2> This is H2 </h2>
<h3> This is H3 </h3>
<h4> This is H4 </h4>
<h5> This is H5 </h5>
<h6> This is H6 </h6>

The <strong> Tag

Sometimes you need to lay more emphasis on some parts of your paragraph.
Browsers, by default, render anything inside a <strong> tag as bold text.
<p> Sokoto State University has <strong>faculty of ICT</strong></p>
In the above sytax the words in side <strong> Tag will displayed in bold form on a
web browser.

The <em> Tag

Just like the <strong>, the <em> tag is also used to lay emphasis on certain text
within a paragraph.
However, instead of making the text bold, browsers render content inside the <em>
tag as italics.

<p>This paragraph illustrate how em tag <em>IT in our society</em></p>

HTML Link (Hyperlinks) Tags

There are two types of Link tags in HTML:


4
The <a> or anchor tag to include hyperlinks to the same pages of a website or
different pages of another website.
The <link> tag is used for linking an internal or external resource to your HTML
document.

The <a> Tag


The <a> tag is used to add external or internal links as content in your HTML
document.
Let's say you want to display a menu or a navbar that links different pages of your
website together. You can use a <a> tag to add these links.

<a href=”#” >Home</a>


<a href=”#”>Media</a>

The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

The <link> tag

HTML gives us the <link> tag, which can be used to include an external asset,
resource, or file in a document.

The link tag can be used to connect you external css file to your HTML document

Syntax:
<link rel=”stylesheet> type=”text/css” href=”style.css>

HTML Image and Object Tags

The <img> tag in HTML is used to output or render images on the webpage. It
specifies the source of the image using the src attribute, as shown below:

<img src=”images/boy.jpg” height=”400” width=”400”>

The <object> tag is used to render any external resource like an image, video, or
website inside a container in your HTML page.

You can specify the path of the resource inside the data attribute of the <object>
tag as shown:

5
<object data=”image/boy.jpg” width=”400” hight=”400”>

The above would output the same image that the <img> tag did previously.

The <object> isn't used widely on modern websites. There are other alternatives to
the <object> tag, like <img>, <video>, <audio> etc., that are used in its place.

HTML List Tags


Lists are used quite often on websites to display a set of data or items in an ordered
or unordered style.

HTML provides us with three types of list tags:


Unordered List
Ordered List
Description List

Example:

Unordered List <ul> Tag

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
<li>Computer Science</li>
<li>Information Technology</li>
</ul>

Ordered List <ol> Tag

Ordered list starts with the <ol> tag and each list item starts with the <li> tag.
<ol>
<li>Cyber Security</li>
<li>Artificial Intelligence</li>
</ol>

Description List <dl> Tag

HTML provides support for a description list using the <dl> tag. A description list
renders a list of terms using the <dt> tag.
6
For each term, we can use the <dd> tag to present the description of that term.

<dl>
<dt>Web Development</dt>
<dd>HTML & CSS</dd>
<dd>PHP</dd>
<dt> Content Management</dt>
<dd>Wordpress</dd>
<dd>Joomla</dd>
</dl>

HTML Table Tags


HTML provides us with the <table> tag that renders some content in a table on the
webpage.

We can create rows and columns to specify the structure of the table using the <tr>
tag and the <th> tag. Then, we can display content inside each cell of the table
using the <td> tag.

<table>
<tr>
<th>Programmes</th>
<th>Cars</th>
<th>Countires</th>
</tr>
<tr>
<td>Data Science</td>
<td>BMW</td>
<td>Egypt</td>
</tr>
<tr>
<td>Cyber Security</td>
<td>Ford</td>
<td>Nigeria</td>
</tr>
<tr>
<td>Information Systems</td>
<td>Honda</td>
<td>Cyprus</td>
7
</tr>
</table>

HTML Form Tags

Form is a common way to take input from a user, for example create account links
on some websites take some information from a user that wants to apply for a
particular task in the organization such information most often is sent to a server
for processing.

In such scenarios, HTML provides us with the <form> tag that we can use to create
a form on the webpage. Inside the <form> tag, we can render input fields using the
<input> tag and specify their labels using the <label> tag.

The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.

<form>
Some elements here…..
</form>

<input type=”text”> Display a text field


<input type=”checkbox”> A checkbox for selecting many choices
<input type=”radio”> A radio button selecting one out many options
<input type=”button”> Clickable button
<input type=”submit> Submit button for submitting the information

<input type=”text”> element

<form>
<label for=”fname”>First Name</label>
<input type=”text” id=”fname” name=”name”>
<label for=”surname”>Surname</label>
</form>

<input type=”checkbox”> element

<form>
<input type=”checkbox” id=”car” name=”car” value=”car”>
<label for=”car”>Car</label>
8
<input type=”checkbox” id=”bike” name=”bike” value=”bike”>
<label for=”bike”>Bike</label>
</form

<input type=”radio”> element

<form>
<input type=”radio id=”book” name=”book” value=”book”>
<label for=”book”>Book</label>
<input type=”radio” id=”laptop” name=”laptop” value=”laptop”>
<label for=”laptop”>Laptop</label>
</form>

<input type=”button”> element

<form action=”userdata.php”>
<label for=”country”>Country name</label><br>
<input type=”text” id=”country” name=”country”
value=”country”><br>
<label> for=”state”>State Name</label>
<input type=”text” id=”state” name=”state” value=”state”
<input type=”button” value=”submit”>
</form>

HTML Scripting Tags

Modern websites are made highly interactive with JavaScript.


HTML allows us to use JavaScript on any HTML Document using the <script> tag
as shown
Syntax.
<script>
</script>
You can also reference JavaScript files in an HTML document using the <script>
tag by specifying the src attribute on it as shown

<script src="index.js"></script>

Comments in HTML
Comments in programs are subtitles for developers! Comments are messages for
developers that don't have any meaning for the browser.
9
We can add a comment on an HTML page using the opening comment keyword
<!-- and the closing one --> as shown below:

Syntax
<!—some comments here-->

Attributes in HTML

Attributes are properties of HTML tags that provide some additional information
on these tags.
For instance, the src attribute on the <img> tag tells us the URL of the image the
<img> tag is supposed to render.

<img src=”images/ball.jpg” width=”400” hight=”300”>

10

You might also like