Designing a Website in HTML

Objectives

01 Using HTML Tags Add image and related attributes using HTML tags

02 Creating Hyperlinks
in HTML
Implement hyperlinks in HTML

03 Creating Tables in
HTML
Create tables in HTML

04 Creating Lists in
HTML
Create lists in HTML
Objectives

05 Form Tag in HTML Use HTML <form> tag to design and develop forms on a web page

06
Form Controls in
Define various input types for forms
HTML
Using HTML Tags
Adding an Image

▪ Notepad App looks like as shown. We will design a web page using a notepad.
Image Tags

▪ HTML <img> tag is used to include an image in a

web page.

▪ The image tag provides space where the image

will be housed/linked on the web page.

▪ The <img> tag is called an empty tag.

▪ It contains attributes only and does not have a

closing tag.
Image Tags in HTML

The <img> tag has two required attributes:

▪ src – this specifies the path to the image.

▪ alt – this specifies an alternate text for the image.

Image File Formats

▪ Saving images in the correct file format is a must that should be done with due diligence.
On the Internet, three main file format should be followed - gif, jpg and png.

▪ Each is suited to a specific type of image, and matching your image to the correct format should result
in a quick, fast-loading graphic.

▪ When choosing the format for your image, you should always be conscious of both the image’s quality
and file size.
Image File Formats

▪ GIF: Graphics Interchange Format is a file format that supports both animated and static images.

▪ JPG: Joint Photographic Experts Group is a file format commonly used by digital cameras to store
photos since it supports 224 or 16,777,216 colors.
The format also supports varying levels of compression, which makes it ideal for web graphics.

▪ PNG: Portable Network Graphics is the most frequently used for uncompressed raster image format
(images formed with pixels) on the Internet. PNG file format is an open format with no copyright
limitations. Like GIF images, PNG also has the ability to display transparent backgrounds.
With PaintShop Pro, you can apply multiple editing effects on PNG files.
Adding Icons in the Title

▪ Most of the websites adds icon or image logo in the title bar. The icon logo is also known as favicon.

▪ Adding favicons is considered to be good for SEO of websites. The favicon is the combination of
favorite icon.

▪ Syntax:<link rel="icon" href="icon_path" type="image/icon type">

Example of icon logo in title bar:

Adding Icons in the Title
Adding Icons in the Title

▪ It can be seen that we have added Hero Vired icon to our web page. Hyperlink”new window” is added
which gets opens in a new window because we have added target=”blank”.
▪ Google icon can be noticed in a second tab.
Adding Attributes

▪ Attributes are additional properties that are added

to an image.

▪ Attributes can be added to the opening tag

<img> tag of the image.

▪ In addition to src and alt, other attributes you can

add are Height, Width and Align.
Creating Hyperlinks
in HTML
Creating Hyperlinks

▪ A link in HTML is called a hyperlink.

▪ Clicking on a hyperlink opens a new web page.

▪ When you move the mouse over a hyperlink,

the mouse arrow will turn into a hand cursor.

▪ Develop a webpage and save it as

“hyperlinks.html”
Creating Hyperlinks

▪ To create a hyperlink in a web page, type the following syntax in Notepad:

<a href="url">link text</a>

Creating Hyperlinks

▪ The hyperlink “click me” will be seen on the web page.

▪ Clicking it will redirect the user to a new web page.

Creating Hyperlinks

New image that can be seen on clicking “click me.”

Link Attributes

The target attribute defines where the web page will open.
The following values can be assigned to a target attribute:

▪ _blank - This command opens the document

in a new window or tab.

▪ _self - This is the default value. If clicked,

the document will open in the same window or tab.

▪ _parent - This command opens the document

in the parent frame.

▪ _top - Displays the document in the

windows full body.
Link Attributes - HTML Code
Link Attributes - Output

▪ Target attributes can be seen as shown

HTML link colors
HTML Link Colours

By default, a link will appear with the following

characteristics in all browsers:

▪ A visited link is underlined and purple in

colour.

▪ An unvisited link is underlined and appears

blue in colour.

▪ An active link is underlined and red in colour.

Image as a Hyperlink

In HTML, an image can be added as a hyperlink.

Image as a Hyperlink

▪ To add an image as a hyperlink, type the syntax below.

▪ Syntax-<a href="default.asp">
<img src="image.gif" alt="HTML" style="width:42px;height:42px;">
</a>
Hyperlinks - Link to an Email

HTML can also link hyperlinks to an email addresses.

mailto inside the href attributes creates a link that opens the link in user’s email program.
Hyperlinks - Link to an Email

Syntax:-<a href="mailto:[email protected]">hello</a>
Style Tags

▪ The <style> tag is used to define style information (CSS) for a document.

▪ Inside the <style> element, you can specify how HTML elements (<p>, H1 - H6 tags ) should be
presented on a web page with specifications like alignment, text-color, font-size and font-face.
Web Page with a “Style” Tag
Creating Tables in HTML
Representing Data in Tabular Format

▪ Tables help to represent data in a tabular format and is a more organised way of presenting data.

▪ HTML contains elements that can be used to add data in a tabular format.
HTML Table

▪ Use <table> tag to create table in a webpage

▪ Use <th> tag to create headings

▪ Use <td> tag to create table data

▪ Use <tr> to add table rows

HTML Table

▪ Output of the code can be seen on a web page as shown here:

Adding Border

▪ By default, tables are usually added to web pages without borders.

▪ Therefore, we can use <style> tag to add borders to tables.

Adding Border -Output

▪ By using the Style tag, we can add a border to a table.

▪ We can also change the colour of the border using the <style> tag and use the border
attribute to assign the color.
Managing Width

▪ The width of a table can be manipulated by using inline style attributes.

▪ Syntax<table style="width:50%">
 Adding Attributes: Border-Collapse
and Text-Align
You can collapse the borders of a table into one border by using the following syntax:

Syntax:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse; }
<style>
Creating Lists in HTML
Lists in HTML

▪ In HTML, lists are used to display data in an organized and logical manner. There are three types of
lists, and each has a purpose. These are:

▪ Unordered list – this is a collection of similar objects that are arranged in any order.

▪ Ordered list - this is used to create lists of related items arranged in a defined order.

▪ Description list - this is used to make a list of items and their descriptions.
Unordered List

▪ An unordered list starts with the “ul” tag.

▪ Each list item starts with the “li” tag.
▪ The list items are marked with bullets i.e small black circles by default
Unordered List with Type Attributes

type attributes with unordered list type

type=circle;
type=disc;
type=square;
Ordered List

Ordered lists (<ol>) - The list items are marked with numbers or letters.
Description List

Description list is a list of terms having a description of each term.

▪ <dl> tag description list
▪ <dt> tag defines term
▪ <dd> tag defines each term
Adding <div> Tag

▪ The <div> tag defines a division or a section in an HTML document.

▪ The <div> tag is used as a box for HTML elements - which is are styled with CSS or manipulated with
JavaScript.

▪ The <div> tag is easily styled by using the class or id attribute.

▪ HTML elements can be kept in a <div> tag.

Adding <div> Tag
Adding <div> Tag

▪ Sections of a web page can be formatted using the <div> tag.

▪ Formatting like text colour, background colour and the font family like “Times New Roman” etc can be
assigned to only one section of a webpage exclusively using the <div> tag.

▪ Syntax:<style> div { color:red; background-color: yellow; font-family:Calibri; } </style>

<span> Tag

▪ The <span> tag in HTML is an inline container or box to lock formatting and styling of a smaller section
of a webpage, for example, a line of a paragraph.

▪ The <span> tag is easily formatted and styled by stylesheets.

▪ The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline
element.

▪ Syntax:<p>Today is <span style="color:blue">”FRIDAY”</span> please sleep well.</p>

Including <span>Tag
Including <span>Tag
Form Tag
HTML Forms

▪ HTML forms are used to collect data from the end-users by using web clients like browsers.

▪ This data is then sent to a server for processing.

▪ The <form> element creates forms to collect data from users.

▪ The <form> element is a holder for input elements like:

• Text fields
• Checkboxes
• Radio buttons
• Submit buttons
First HTML Form
First HTML Form
Form Controls
HTML Forms <input> Elements

Some lines of syntax for <input> form controls are:

▪ <input type=”text”> Single line text input

▪ <input type=”number”> Add number as input

▪ <input type=”button”> Add button to the form

▪ <input type=”submit”> Add submit button

▪ <input type=”checkbox”> Add checkboxes

▪ <input type=”radio”> Add radio button

▪ <label> tag defines a label for many form elements

Including Input Controls in a Webpage
Including Input Controls in a Webpage

▪ An HTML form will appear as shown in the image.

Input Type - Email

▪ HTML5 input form control also validates the correct

email address with the value of type attribute as
email.

Syntax:

<form>

<label for="email">Email: </label>

<input type="email" id="email“

name="email"/> <br/>

</form>
HTML Form Attributes

▪ The action performed when a form is submitted is defined by an Action attribute.

▪ Form data is transferred to the server when the Submit button is pressed.
HTML Form Attributes

▪ Depending on where the form

is submitted, the target’s
attribute’s value is defined.
▪ _blank - Response submitted
on a new page.
▪ _self - Current window is
used to display the response.
▪ _paren t- Parent frame is
used to display the response.
▪ _top - Full body of the
window is used to display the
response.
HTML Form Attributes

▪ The Method attribute specifies the HTTP method to be used when submitting the form data.
▪ The form data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
Form Output
Select Box Control

▪ A Select box or a Drop-down box provides a list

of an element to the end-user.
▪ Thus, the user can select option/options as per
his/her wish.
Select Box Control

▪ Select the multiple options by using the selected attribute.

Textfield

▪ A Form control is used when a

user input includes multiple lines
of text.

Syntax:

<textarea rows = "5" cols =

"50" name = "description">

Enter description here…

</textarea>
Output
File Upload Box

▪ The HTML File Upload box

allows the user to upload
a file to a website.

▪ File Upload box is utilized

when a user needs to
upload /submit files like
images or documents etc.

▪ A File Upload box is also

created using the <input>
element. But the type
attribute should be set to
the file.
File Upload Box - Output

▪ You can browse for the file, which could be an image or document, from your local machine and upload it.
Different Types of Buttons

▪ You can create a button that

automatically submits a form.

▪ You can also create a button

to automatically reset form
controls to their initial values.

▪ You also can create a button

that is used to trigger a
client-side script when the
user clicks that button.

▪ Finally, you can also create a clickable button with an image in the background of the button.
Different Types of Buttons

▪ Here, an image is added to the button control of the form.

▪ Clicking the image, triggers an event like redirecting the user to a new window.
ID Attributes in HTML

▪ The HTML ID attribute is defined to give a unique ID to an HTML element.

▪ The HTML ID can be used to define only one HTML element.

▪ It is not possible to define more than one HTML element with the same ID as it is used to specify a specific style
of declaration in a style sheet.

▪ A scripting language like JavaScript uses specific style types like font color, background color, alignment etc.
ID Attributes in HTML

▪ The ID attribute is used to point to a specific style declaration in a style sheet.

▪ It is also used by scripting languages like JavaScript to access and manipulate the element with the specific ID.

Syntax: Inside <style> tag use -# character followed by id name followed by css properties in curly braces

Ex: #abc { background-color:red;

color:blue. }
HTML ID Attribute
HTML ID Attribute

▪ On running the HTML code following changes can be seen on the browser window.
HTML ID Attribute

▪ Here we are adding

different styling
components using ID
attributes.
HTML ID Attribute

▪ Here we are adding two styling components to different HTML elements using ID attributes.
HTML Class Attribute

▪ The class attribute can be used on any

HTML element.
▪ The class name can be used by CSS and
JavaScript to perform certain tasks for
elements with a specified class name.

Syntax:
HTML element followed by period sign
followed by CSS styling written in {} curly
braces.
Ex
<style>
h1.c
{
color: cyan;
}
HTML Class Attribute

▪ Here we are adding a class attribute to HTML element like h1 and p.