Scribd
Upload
9 views24 pages

Module 5-HTML

Uploaded by

moshabeeb401
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
9 views24 pages

Module 5-HTML

Uploaded by

moshabeeb401
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 24

UNIT 5

Creating Simple Tables :


HTML Table :HTML table tag is used to display data in tabular form (row * column).There can be many columns
in a row.We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>,
and <th> elements. IN Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data
is defined by <td> tags.

HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.


HTML Table with Border :There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML 2. By border property in CSS

HTML Table with cell padding:specify padding for table header and table data by two ways:
1. By cellpadding attribute of table in HTML 2. By padding property in CSS
HTML Table width: We can specify the HTML table width using the CSS width property. It can be specify
in pixels or percentage.We can adjust our table width as per our requirement. Following is the example to display
table with width. table{ width: 100%; } <html>

<head> <title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;
}

</style>
</head>
<body>
<table>
<tr>
<th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
<td>2 data</td>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</html>
HTML Table with colspan :If you want to make a cell span more than one column, you can use the colspan
attribute.It will divide one cell/row into multiple columns, and the number of columns depend on the value of
colspan attribute.

HTML Table with rowspan :If you want to make a cell span more than one row, you can use the rowspan
attribute.It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values.
Form Controls
An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes,
radio buttons, submit button, menus etc.An HTML form facilitates the user to enter data that is to be sent to the
server for processing such as name, email address, password, phone number, etc. .

Why use HTML Form :HTML forms are required if you want to collect some data from of the site visitor.
HTML <form> element :The HTML <form> element provide a document section to take input from user.It
provides various interactive controls for submitting information to web server such as text field, text area, password
field, etc.
Syntax: <form> //Form elements </form>

HTML <input> element :The HTML <input> element is fundamental form element. It is used to create form
fields, to take input from user. We can apply different input filed to gather different information form user.
Following is the example to show the simple text input.
<body>
<form> Enter your name <br>
<input type="text" name="username">
</form>
/body>

HTML TextField Control :The type="text" attribute of input tag creates textfield control also known as single
line textfield control. The name attribute is optional, but it is required for the server side component such as JSP,
ASP, PHP etc.
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
HTML <textarea> tag in form:The <textarea> tag in HTML is used to insert multiple-line text in a form. The
size of <textarea> can be specify either using "rows" or "cols" attribute or by CSS.
<html> <head> <title>Form in HTML</title> </head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>

Label Tag in Form :It is considered better to have label in form. As it makes the code parser/browser/user
friendly.If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in
label tag that must be same as id attribute of input tag.
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>

HTML Password Field Control :The password is not visible to the user in password field control.
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
HTML 5 Email Field Control :The email field in new in HTML 5. It validates the text for correct email
address. You must use @ and . in this field.
<form>
<label for="email">Email: </label> <input type="email" id="email" name="email"/> <br/
>
</form>

Radio Button Control :The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.If you use one name for all the radio buttons, only one radio button can be selected at a time.Using
radio buttons for multiple options, you can only choose a single option at a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>
Checkbox Control :The checkbox control is used to check multiple options from given checkboxes.
<form> Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<input type="checkbox" id="football" name="football" value="football"/>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
</form>

Submit button control :HTML <input type="submit"> are used to add a submit button on web page. When user clicks on
submit button, then form get submit to the server. Syntax: <input type="submit" value="submit">
The type = submit , specifying that it is a submit button.
The value attribute can be anything which we write on button on web page.
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
HTML <fieldset> element: The <fieldset> element in HTML is used to group the related information of a form.
This element is used with <legend> element which provide caption for the grouped elements.
<form>
<fieldset> <legend>User Information:</legend>
<label for="name">Enter name</label><br><input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br><input type="Password" id="pass" name="pass">
<input type="submit" value="submit"> </fieldset>
</form>

HTML Form Example


<html> <head> <title>Form in HTML</title> </head>
<body>
<h2>Registration form</h2>
<form>
<fieldset> <legend>User personal information</legend>
<label>Enter your full name</label><br> <input type="text" name="name"><br>
<label>Enter your email</label><br> <input type="email" name="email"><br>
<label>Enter your password</label><br> <input type="password" name="pass"><br>
<label>confirm your password</label><br> <input type="password" name="pass"><br
<label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br> <textarea></textarea><br>
<input type="submit" value="sign-up"> </fieldset>
</form>
</body>
</html>
Select Boxes in HTML Forms : Select boxes are used to allow users to select one or more than one option
from a pull-down list of options. Select boxes are created using two elements which are “select” and “option”.List
items are defined within the select element.
<!DOCTYPE html>
<html>
<h3>Example of a Select Box</h3>
<body>
<form>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Australia">Australia</option>
</select>
</form>
</body>
</html>

Reset And Submit Buttons :The Submit Button allows the user to send the form data to the web server. The
Reset Button is used to reset the form data and use the default values.
<html>
<h3>Example of a Submit And Reset Button</h3>
<body>
<form action="test.php" method="post" id="users">
<label for="username">Username:</label>
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Hidden controls : HTML Hide Element- You can hide an element by using the Boolean attribute hidden with the
element. When you specify the hidden attribute in the HTML file, then the browser will not display that element,
which is specified with this attribute.
Syntax :<element or tag hidden> Any statement or content </element or tag>

Attributes Used in HTML Forms :


The Action Attribute : The action to be performed after the submission of the form is decided by the action attribute.
Generally, the form data is sent to a webpage on the web server after the user clicks on the submit button.

The Target Attribute in HTML Forms : The Target attribute is used to specify whether the submitted result will
open in the current window, a new tab or on a new frame. The default value used is “self” which results in the form
submission in the same window. For making the form result open in a new browser tab, the value should be set to
“blank”.
Name Attribute in Html Forms : The name attribute is required for each input field. If the name attribute is not
specified in an input field then the data of that field would not be sent at all.
The Method Attribute :It is used to specify the HTTP method used to send data while submitting the form.There
are two kinds of HTTP Methods, which are GET and POST.
In the GET method, after the submission of the form, the form values will be visible in the address bar of the new
browser tab.
In the post method, after the submission of the form, the form values will not be visible in the address bar of the
new browser tab as it was visible in the GET method.
<html>
<body>
<form action="/test.php" target="_blank" method="post">
Username:<br> <input type="text" name="username"> <br>
Password:<br> <input type="password" name="password"> <br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
HTML <frame> tag (Not supported in HTML5)
HTML <frame> tag define the particular area within an HTML file where another HTML web page can be
displayed.A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or frames, and
each frame can contain different web pages.

Note: Do not use HTML <frame> tag as it is not supported in HTML5, instead you can use <iframe> or <div>
with CSS to achieve similar effects in HTML. Syntax :< frame src = "URL" >

<html> <head> <title>Frame tag</title> </head>


<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Create Horizontal frames:


<html> <head> <title>Frame tag</title> </head>
<frameset rows="30%, 40%, 30%">
<frame name="top" src="frame1.html" >
<frame name="main" src="frame2.html">
<frame name="bottom" src="frame3.html">
</frameset>
</html>
HTML <frameset> tag (Not supported in HTML5)
HTML <frameset> tag is used to contain the group of frames which can be controlled and styled as a unit. The
<frameset> element also specifies the number of rows and columns in the frameset, and how much space they will
occupy in a frame.

Note: Do not use HTML <frameset> element as it is deprecated and not supported by HTML5, but you can use
<iframe> tag instead. Syntax : <frameset cols=" ">............</frameset>

<html> <head> <title>Frame tag</title> </head>


<frameset cols="50%,50%">
<frame src="https://www.javatpoint.com/html-table">
<frame src="https://www.javatpoint.com/css-table">
</frameset>
</html>
HTML iframes : HTML Iframe is used to display a nested webpage (a webpage within a webpage). The
HTML <iframe> tag defines an inline frame, hence it is also called as an Inline frame.An HTML iframe embeds
another document within the current HTML document in the rectangular region.The webpage content and iframe
contents can interact with each other using JavaScript.

Iframe Syntax : An HTML iframe is defined with the <iframe> tag: <iframe src="URL"></iframe>
Here, "src" attribute specifies the web address (URL) of the inline frame page.

Set Width and Height of iframe :You can set the width and height of iframe by using "width" and "height"
attributes. By default, the attributes values are specified in pixels but you can also set them in percent. i.e. 50%,
60% etc.

Iframe Target for a link :You can set a target frame for a link by using iframe. Your specified target attribute of
the link must refer to the name attribute of the iframe.
<html> <body> <h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>
<p><a href="https://www.javatpoint.com" target="iframe_a">JavaTpoint.com</a></p>
<p>The name of iframe and link target must have same value else link will not open as a frame.
</body>
</html>
Embed YouTube video using iframe :You can also add a YouTube video on your webpage using the <iframe>
tag. The attached video will be played at your webpage and you can also set height, width, autoplay, and many
more properties for the video.Following are some steps to add YouTube video on your webpage:
o Goto YouTube video which you want to embed.
o Click on SHARE ➦ under the video.
o Click on Embed <> option.
o Copy HTML code.
o Paste the code in your HTML file
o Change height, width, and other properties (as per requirement).

Concept of CSS
CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The reason
of using CSS is to simplify the process of making web pages presentable. CSS allows you to apply styles to web
pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.

Why we learn CSS?


Base for web development: HTML and CSS is the basic skill that every web developer should know. It is the
basic skill that is required for building a website.
Makes your website look attractive: A website that’s dull and plain will not attract the user most probably, so
adding some style would surely make your website presentable to the user.
Makes the design come live: A web developer is responsible in making the design given to him as a live product.
CSS is used for styling to develop the design of the website.
Increases user experience of website: A website with a simple yet beautiful UI would help the users to go
through the website easily. CSS is used to make the user interface better.
More career opportunities: Since CSS is a basic requirement while learning Web Development, therefor there
are abundant career opportunities for it. As a freelancer too you can land up to many projects.
Advantages of CSS:As mentioned before, CSS is one of the most widely used style language over the web.
 CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define
a style for each HTML element and apply it to as many Web pages as you want.
 Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write
one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
 Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages
will be updated automatically.
 Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better
look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device.
By using the same HTML document, different versions of a website can be presented for handheld devices
such as PDAs and cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS.
So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

Creating Style Sheet: Inline, Internal and External


CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements
 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
Inline CSS :An inline CSS is used to apply a unique style to a single HTML element.An inline CSS uses
the style attribute of an HTML element.The following example sets the text color of the <h1> element to blue, and
the text color of the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS :An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of
ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color:

External CSS :An external style sheet is used to define the style for many HTML pages.To use an external style
sheet, add a link to it in the <head> section of each HTML page:
The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be
saved with a .css extension.
"styles.css":
body { background-color: powderblue; }
h1 { color: blue; }
p { color: red; }

CSS Properties

Here are some basic CSS properties to work with.


 Text Properties
 List Properties
 Border Properties
 Font Properties
Text Properties
Property Description Values

color Sets the color of a text RGB, hex, keyword

line-height Sets the distance between lines normal, number, length, %

letter-spacing Increase or decrease the space between characters normal, length

text-align Aligns the text in an element left, right, center, justify

text-decoration Adds decoration to text none, underline, overline, line-through

text-indent Indents the first line of text in an element length, %

text-transform Controls the letters in an element none, capitalize, uppercase, lowercase

List Properties
Property Description Values

list-style Sets all the properties for a list in one declaration list-style-type, list-style-position, list-style-image, inherit

list-style-image Specifies an image as the list-item marker URL, none, inherit

list-style-position Specifies where to place the list-item marker inside, outside, inherit
none, disc, circle, square, decimal, decimal-leading-zero,
list-style-type Specifies the type of list-item marker armenian, georgian, lower-alpha, upper-alpha, lower-greek,
lower-latin, upper-latin, lower-roman, upper-roman, inherit

Border Properties
Property Description Values

Sets all the border properties in one


border border-width, border-style, border-color
declaration

Sets all the bottom border properties in border-bottom-width, border-bottom-style, border-bottom-


border-bottom
one declaration color

border-bottom-color Sets the color of the bottom border border-color

border-bottom-style Sets the style of the bottom border border-style

border-bottom-width Sets the width of the bottom border border-width

border-color Sets the color of the four borders color_name, hex_number, rgb_number, transparent, inherit

Sets all the left border properties in one


border-left border-left-width, border-left-style, border-left-color
declaration

border-left-color Sets the color of the left border border-color

border-left-style Sets the style of the left border border-style

border-left-width Sets the width of the left border border-width

Sets all the right border properties in one


border-right border-right-width, border-right-style, border-right-color
declaration

border-right-color Sets the color of the right border border-color

border-right-style Sets the style of the right border border-style

border-right-width Sets the width of the right border border-width

none, hidden, dotted, dashed, solid, double, groove, ridge,


border-style Sets the style of the four borders
inset, outset, inherit

Sets all the top border properties in one


border-top border-top-width, border-top-style, border-top-color
declaration

border-top-color Sets the color of the top border border-color

border-top-style Sets the style of the top border border-style

border-top-width Sets the width of the top border border-width

border-width Sets the width of the four borders thin, medium, thick, length, inherit
Font Properties
Property Description Values

font-style, font-variant, font-weight, font-size/line-height, font-


Sets all the font properties in one
font family, caption, icon, menu, message-box, small-caption, status-bar,
declaration
inherit

font-family Specifies the font family for text family-name, generic-family, inherit

xx-small, x-small, small, medium, large, x-large, xx-large, smaller,


font-size Specifies the font size of text
larger, length, %, inherit

font-style Specifies the font style for text normal, italic, oblique, inherit

Specifies whether or not a text should


font-variant normal, small-caps, inherit
be displayed in a small-caps font

normal, bold, bolder, lighter,


font-weight Specifies the weight of a font 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
Careful, many of these are not supported!

CSS Styling: Background, Text Format, Controlling Fonts


CSS Colors, Fonts and Sizes :
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
CSS Border :The CSS border property defines a border around an HTML element.

CSS Padding :The CSS padding property defines a padding (space) between the text and the border.

CSS Margin : The CSS margin property defines a margin (space) outside the border.
Font Selection is Important Choosing the right font has a huge impact on how the readers experience a website.
Generic Font Families In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.

Generic Font Family Examples of Font Names

Serif Times New Roman


Georgia
Garamond

Sans-serif Arial
Verdana
Helvetica

Monospace Courier New


Lucida Console
Monaco

Cursive Brush Script MT


Lucida Handwriting

Fantasy
Copperplate
Papyrus

p{ font-family: "Arial", Helvetica, sans-serif; font-style: italic; font-weight: bold; }


p.normal { font-family: "Arial", Helvetica, sans-serif; font-weight: normal; } h1 { font-size: 40px; }
To use a background image for the entire, use the following CSS code.
body { background-image: url("/images/myimage.png"); }
body { background-image: url("/images/myimage.png"); background-repeat: repeat }
body { background-image: url('/images/myimage.png ');
background-repeat: no-repeat; background-position: center; }
Working with Block Elements and Objects
Every HTML element has a default display value, depending on what type of element it is.
There are two display values: block and inline.
Block-level Elements :
A block-level element always starts on a new line.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline element does not.
The <div> element is a block-level element.

Here are the block-level elements in HTML:


<address> <div> <h1>-<h6> <header> <hr> <li> <ol> <p> <ul> <video>
Inline Elements :
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common.
When used together with CSS, the <div> element can be used to style blocks of content:
The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a part of a document.
The <span> element has no required attributes, but style, class and id are common.
When used together with CSS, the <span> element can be used to style parts of the text:

CSS ID and Class


The selectors in CSS are part of the CSS ruleset and used to select the content we want to style. Id and class both
are the CSS element selectors and are used to identify an element based on its assigned name. CSS id and class
selectors are the most used selectors in CSS.
The difference between the id and class is tabulated as follows.
Id Class

We can apply a class to various elements so that it could be The Id is unique in a page, and we can only apply
numerous times on a single page. it to one specific element.

The class is assigned to an element and its name starts with "." The name of the Id starts with the "#" symbol
followed by the name of the class. followed by a unique id name.

We can attach multiple class selectors to an element. We can attach only one ID selector to an element.

Syntax: Syntax:
#id{ .class{
// declarations of CSS // declarations of CSS
} }
ID Selector :The id selector is used to select the id attribute of an HTML element for selecting a particular
element. An id is always unique within the page, so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.

Class Selector :The class selector is used to select the HTML elements with a specific class attribute. It is written
with a period character . (full stop symbol) followed by the class name. A class name should not be started with a
number.
*****************************************

You might also like