Scribd
Upload
6 views47 pages

Introduction To HTML

This document provides an introduction to HTML, explaining its purpose as a markup language for designing web pages. It covers various HTML elements, including tags, attributes, and how to create links, lists, images, tables, and forms. Additionally, it includes examples of syntax and usage for each element discussed.

Uploaded by

ruthnambuka42
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views47 pages

Introduction To HTML

This document provides an introduction to HTML, explaining its purpose as a markup language for designing web pages. It covers various HTML elements, including tags, attributes, and how to create links, lists, images, tables, and forms. Additionally, it includes examples of syntax and usage for each element discussed.

Uploaded by

ruthnambuka42
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

INTRODUCTION TO

HTML
WHAT IS HTML?
Is a programming application to design web
pages
Is a language for describing web pages
Stands for hyper text markup language
Is not a programming language but it is a
markup language
A markup language is a set of markup tags
Uses markup tags to describe web pages
HTML TAGS
Html markup tags are usually called html tags
Are keywords surrounded by angle brackets like
<html>
Normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second
tag is the end tag
Start and end tags are also called opening and
closing tags
TYPES OF TAGS

1. Non-self closing tag/container tag


For example,
<html> opening tag
</html> and corresponding closing tag
2. Self closing tag/ empty tag
For example,
<br/> break element and closed immediately
<hr/> and <img/
TITLE TAG
Title has to be written between <head> opening and </
head> closing tag. For example
<html>
<head>
<title>MY WEBSITE</title>
<meta charset =“UTF -8”>
</head>
<body>
</body>
</html>
META ELEMENTS
Meta elements is used to provide extra
elements/functions to a website
 Meta will have child elements inside it
 Content of an element is called an attribute
An attribute is an extra function of an
element
Word charset stands for character set –
so charset is an attribute
HOW DO YOU ASSIGN A VALUE TO
ATTRIBUTE?

= Sign Means assigning a value to


For example,
<Meta charset = “UTF -8”>
SIMPLE HTML PAGE IN NOTEPAD
<!Doctype html>
<html>
<head>
<title> MY FIRST WEBSITE </title>
<meta charset = “UTF-8”/>
</head>
<body>
<p> WELCOME TO MY FIRST WEBSITE !!! </p>
</body>
</html>
HOW TO SAVE A HTML FILE?

Click file tab


Click save
Type file name
For example: index.html
Finally, click on save
ADDING VALUES TO AN ATTRIBUTE
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>First font size change</title>
5. <meta charset = “UTF-8”/>
6. </head>
7. <body>
8. <p style = "font-size:8px"> Some text for you to make tiny! </p>
9. <p style = "font-size:10px ; background-color: blue"> Some text for you
to make normal size!</p>
10. <p style = "font-size:18px”> Some text for you to make super big!</p>
11. </body>
12. </html>
How to align paragraphs?
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>PARAGRAPH FORMATTING</title>
5. <meta charset = “UTF-8”/>
6. </head>
7. <body>
8. <p align = “center”> THIS IS MY FIRST PARAGRAPH </P>
9. <p align = “right”> THIS IS MY SECOND PARAGRAPH </P>
10. <p align = “left”> THIS IS MY THIRD PARAGRAPH </P>
11. <p align = “justify”> THIS IS MY LAST PARAGRAPH </P>
12. </body>
13. </html>
How to create links in HTML?
HYPERLINKS: Website is an interconnected of network pages.
A link to an internal page on your website or to an external page
on the web, is called a hyperlink. text or image can be linked.
For example,
<a href =https://websitesetup.org””>Please visit my website </a>
The tag <a> is sued to define links in HTML
“href” attribute is used to specify the destination of a link. Then
the link is put into a quote before the tag is closed.
How to create links in HTML?

If you want to link a local file in which you have all your
html pages in the same folder, you don’t have to include
a website URL. Just need to add the file path. For
example,
If you are linking to a file titles index.html, then the
hyperlinks become as follows:
<a href =“index.html”>Please visit my first website </a>
How to create links in HTML?
<!Doctype html>
<html>
<head>
<title> MY FIRST WEBSITE </title>
<meta charset = “UTF-8”/>
</head>
<body>
<p> WELCOME TO MY FIRST WEBSITE !!! </p>
<li><a href =“https://websitesetup.org/”>He is a boy </a></li>
<a href =“https://testwebsite.com/”> This is a link </a>
<a href=https://kasiyacollege.com/>Kasiya college</a>
</body>
</html>
Creating headings in HTML
Headings plays a major role in the success of a website-easy for readers to scan the
content. There are six headings tags in HTML: <h1> to <h6>; <h1> tag indicates the
most important heading and <h6> tag indicates the least important heading.
<!Doctype html>
<html>
<head>
<title> MY FIRST WEBSITE </title>
<meta charset = “UTF-8”/>
</head>
<body>
<h1>This is my first HTML heading </h1>( largest)
<h6> This is my sixth HTML heading </h6> (least)
<p> WELCOME TO MY FIRST WEBSITE !!! </p>
</body>
</html>
FORMATING TEXT IN HTML
<!Doctype html>
<html>
<head>
<title> MY FIRST WEBSITE </title>
<meta charset = “UTF-8”/>
</head>
<body>
BOLD: <b>This is my first HTML heading </b>
ITALICS: <i> This is my sixth HTML heading </i>
UNDERLINE: <u> WELCOME TO MY FIRST WEBSITE !!! </u>
SUBSCRIPT: <sub> FORMATTING TEXT IN HTML </sub>
SUPERSCRIPT: <sup> FORMATTING TEXT IN HTML </sup>
</body>
</html>
ORDERED LIST
<!Doctype html>
<html>
<head>
<title> MY FIRST WEBSITE </title>
<meta charset = “UTF-8”/>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>
</html>
UNORDERED LIST
<!Doctype html>
<html>
<head>
<title> MY FIRST WEBSITE </title>
<meta charset = “UTF-8”/>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
NESTED LIST
<!Doctype html>
<html>
<head>
<title> MY FIRST WEBSITE </title>
<meta charset = “UTF-8”/>
</head>
<body>
<ul>
<li>Item 1</li>
<ul>
<li>Item 1 Nested </li>
<li>Item 2 Nested </li>
<li>Item 3 Nested </li>
<li>Item 4 Nested </li>
<li>Item 5 Nested </li>
</ul>
INSERTING IMAGES IN HTML
Images are added to a html document with the <img>
tag. The tag <img> is an empty tag, so doesn’t need to
be closed.
The tag to add an image is the IMAGE tag, <img>. We
have to tell them where the image is, so we use the src
attribute to specify the image. We do that like this:
<img src="loacation/image.extension" width="500"
height="400" border="1">
How to use Quotation/blockquote in HTML
For example, <blockquote>This is a blockquote</blockquote>
<p> This is a sample. And <blockquote> here is our
blockquote. In this example, we try to demonstrate how to
format text to indicate a blockquote in HTML. This is
different from ordinary quotes but the text is highlighted.</
blockquote> </p>
QUOTATION
<p> This is a sample. Add <q> Here is our quote</q></p>
<q> tag, adds quotation marks automatically.
USING COLORS IN HTML
FOR EXAMPLE
<p style=“color:#0000ff;”> color blue</p>
<p style=“color:rgb (153,255,153);”> color blue</p>
<p style=“color:hsl (60,100,50);”> color yellow</p>
<p style=“color:orange;”> color orange</p>
FONTS IN HTML
The following tags are used for the fonts:
<font size=“6”> use font size 6</font>
<font color=“blue”> use font color blue</font>
<font face=“verdana”> use font face verdana</
font>
Note: accepted font size is 1 to 7. anything above
7 will automatically adjust to font size 7. The
default size is “3”
USING IFRAMES IN HTML
In a HTML document, an iframe (inline frame) can be used to embed a file in the
current document. In essence, you can use it to display another website or content
from another web page inside the current one.
For example,
<iframe src=https://websitesetup.org”> </iframe>
Iframes can be used to display a website, video, games or any other form of content.
For example,
<iframe src=“URL”></IFRAME> - Replace URL with the link to the website content you
want to be displayed.
You can also add certain values such as height and weight
<iframe src=“URL” height =“350px” width=“400px”></IFRAME> - Replace URL with
the link to the website content you want to be displayed
CREATING TABLES IN HTML
Tables are used to present information in a more
organized way. Tables are created with the following
tag:
<table> tag
Each header is specified with the <th> tag –table
header
Each row is specified with the <tr> tag – table row
The table data is then indicated with <td> tag - data
TABLE IN HTML
<table>/<table style=“width:100”>
<tr>
<th> table header 1</th>
<th>table header 2</th>
<th>table header 3</th>
</th>
<tr>
<td>input 1under header 1</td>
<td>input 1under header 2</td>
<td>input 1under header 3</td>
</tr>

<tr>
<td>input 2under header 1</td>
<td>input 2under header 2</td>
<td>input 2under header 3</td>
</tr>
<tr>
<td>input 3under header 1</td>
<td>input 3under header 2</td>
<td>input 3under header 3</td>
</tr>
</table>
FORMS IN HTML
An HTML form is used to collect user input. The user input can
then be sent to a server for processing.
The HTML <form> element is used to create an HTML form for
user input.
<form>
.
form elements
.
</form>
Form elements are different types of input elements, like: text
fields, checkboxes, radio buttons, submit buttons, and more.
The <input> Element
The <input> is the most important in the form element
An <input> can be displayed in many different ways, depending
on the type attribute. Here are some examples:

Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting
one of many choices)
<input type="submit"> Displays a submit button (for
submitting the form)
FOR EXAMPLE,
<!DOCTYPE html>
<html>
<body>

<h2>The input Element</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
TEXT FIELDS
<input type=“text”> defines a single-line input field for text input. For example:
<!DOCTYPE html>
<html>
<body>

<h2>Text input fields</h2>

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</
p>

</body>
</html>
The <label> Element

The <label> tag defines a label for many form elements.


The <label> element is useful for screen-reader users,
because the screen-reader will read out loud the label when
the user is focused on the input element.
The <label> element also help users who have difficulty
clicking on very small regions (such as radio buttons or
checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to
the id attribute of the <input> element to bind them together.
RADIO BUTTONS
<input type=“radio” defines a radio button.
Radio buttons let a user select one of a limited number of choices.
<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>

</body>
</html>
The submit button
<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a page on the server with a script for processing input data.
The form-handler is specified in the form's action attribute. For example,
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>
THE SELECT ELEMENT
The <select> element defines a drop-down list.
<!DOCTYPE html>
<html>/<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>/</html>
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option: for example

<!DOCTYPE html>
<html>
<body>

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attribute:</p>

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
VISIBLE VALUES
USE THE size ATTRIBUTE TO SPECIFY THE NUMBER OF VISIBLE VALUES
<!DOCTYPE html>
<html>
<body>
<h2>Visible Option Values</h2>
<p>Use the size attribute to specify the number of visible values.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>
Allow Multiple Selections
USE MULTIPLE ATTRIBUTE TO ALLOW THE USER TO SELECT MORE THAN ONE OPTION.

<h2>Allow Multiple Seletcions</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
The <textarea> Element
The <textarea> element defines a multiple-line input field (a text area). For example,
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
Check the notepad
You can also define the size of the text area by using the following:
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
The <button> Element
The <element> defines a clickable button. For
example,
<button type="button" onclick="alert('Hello
World!')">Click Me!</button>
Note: Always specify the type attribute for the
button element. Different browsers may use
different default types for the button element.
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element. For example,
<form>
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the
fieldset element.</p>
<form>
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of an <input> element, must refer to the id attribute of <datalist>
element.
For example,
<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>
</body>
</html>
The <output> Element
The <output> element represents the result of the calculation. For example, it performs a calculation
and show the result in an <output> element.
<h2>The output Element</h2>
<p>The output element represents the result of a calculation.</p>

<form>
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>
Test Yourself With Exercises
Exercise:
In the form below, add an empty drop down list with
the name "cars".
<form>
< >
</ >
</form>
HTML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)

<label> Defines a label for an <input> element


<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element

<select> Defines a drop-down list


<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list


<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

You might also like