STRATEGY & CREATIVITY

Phasellus iaculis dolor nec urna nullam. Vivamus mattis blandit porttitor nullam.

PORTFOLIO

We pride ourselves on bringing a fresh perspective and effective marketing to each project.

Showing posts with label Web Developing HTML. Show all posts

HTML Iframe

HTML Iframe

An iframe is used to display a web page within a web page.

HTML Iframe creates an Inline frame for embedding third party contents (media, applets ect). The content of the frame and the web page are Independent, but they can interact through javascript.

Not all browser support frames, we must define an alternate text, which will be display to the user, if the browser cannot display the content of the frame.

The src attribute is required for the <iframe> tag. It defines the URL of the document, which must be
displayed in the frame.

Syntax

<iframe src="https://www.kumaratuljaiswal.in"></iframe>

Example

<!DOCTYPE html>
<html>

<head>

<title>HTML Iframe Tag</title>

</head>

<body>

<iframe src="https://www.kumaratuljaiswal.in"></iframe>

</body>
</html>

Result

To set the size of iframe you can use the height and width attributes, or use CSS. The attribute values

are set in pixels by default, but they can also be in percent.

Example

<!DOCTYPE html>
<html>
<head>

<title>HTML Iframe Tag</title>

</head>

<body>

<iframe src="https://www.kumaratuljaiswal.in" width="60%;" height="380;" ></iframe>

</body>
</html>

Result

By default, an iframe has a border around it. To remove the border, you can use the style attribute

and or CSS border property.

Example

<!DOCTYPE html>
<html>
<head>

<title>HTML Iframe Tag</title>

</head>

<body>

<iframe src="https://www.kumaratuljaiswal.in" style="width:80%; height:400px;" style="border:none;" ></iframe>

</body>
</html>

Result

HTML List

HTML List

There are major two types of HTML List.

HTML UL ( Unordered List )
HTML OL ( Ordered lIST )

HTML List Example

An Unordered List

HTML Ordered List

first paid
second paid
third paid
fourth paid
fifth paid

HTML Unordered List

An unordered list start with the <ul> . Each list item start with the <li> tag. This list item will be marked with bullets ( small black circles ) by default.

Example

<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>

<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

Result

An unordered HTML list

Unordered HTML List : Choose list item marker

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example of HTML Disc

<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>

<body>

<h2>Unordered List with Disc Bullets/h2><

<ul style="list-style-type : disc;">

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

</ul>

</body>
</html>

Result

Unordered List with Disc Bullets

Example of HTML Circle

<!DOCTYPE html>
<html>
<head>
<title> HTML5 List</title>
</head>

<body>

<h2>Unordered List with circle Bullets/h2><

<ul style="list-style-type : circle;">

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

</ul>

</body>
</html>

Result

Example of HTML Square

<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>

<body>

<h2>Unordered List with square Bullets/h2><

<ul style="list-style-type : square;">

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

</ul>

</body>
</html>

Result

Example of HTML None

<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>

<body>

<h2>Unordered List with none</h2>

<ul style="list-style-type : none;">

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

</ul>

</body>
</html>

Result

HTML Ordered list

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

An ordered HTML list :

Coffee
Tea
Milk

Ordered Html List : The type attribute

The type attribute of the <o> tag. define the type of the list item marker.

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Example of HTML Numbers

<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>

<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Result

Ordered List with Numbers

cofee
Tea
Milk

Example of HTML UppersCase Letters

<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>

<body>

<h2>Ordered List with Letters</h2>

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Result

A. Coffee
B. Tea
C. Milk

Example of HTML LowerCase Letters

<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>

<body>

<h2>Ordered List with Lowercase Letters</h2>

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Result

a. Coffee
b. Tea
c. Milk

Example of HTML LowerCase Letters

<!DOCTYPE html>
<html>
<head>
<title> HTML5 List </title>
</head>

<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Result

I. Coffee
II. Tea
III. Milk

Video On This Topic :

Have a Nice Stay Here :-)

HTML5 <Ins> Tag

The <ins> Tag define a text that has been inserted into a document. It is often paired with a <del> element which identifies deleted text replaced by the text contained in the <ins> element.

HTML5 <del> Tag

HTML5 Del Tag :- <del> Tag
Article :- <del> Tag

Display

Inline

Usage

Semantic/Textual

Example

<!DOCTYPE html>
<html>
<head>
<title> HTML5 Del Tag </title>
</head>

<body>

<p>Tickets for the Train are <del>$50</del> <ins>$10</ins>.</p>

</body>
</html>

Result

Tickets for the Train are ~~$50~~ $10.

Video on this Topic :- Soon

HTML Table with Inline Internal & External

HTML Table

An HTML Table is define with the <table> Tag.

Each table row is deifined with the <tr> tag.
A table header is defined with the <th> tag.
A table data.cell is defined with the <td> tag.

By default Table headings are bold and centered.

Row and Column

Example

<!DOCTYPE html>
<html>
<body>

<h2>HTML Table</h2>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>

<tr>
<td>Kumar Atul</td>
<td> jaiswal</td>
<td>19</td>
</tr>

<tr>
<td>Hacker</td>
<td>BoY</td>
<td>18</td>
</tr>

<tr>
<td>Naam to</td>
<td>suna hoga</td>
<td>17</td>
</tr>
</table>

</body>

</html>

Result

Note: The <td> elements are the data containers of the table.

They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

Adding a border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

table, th, td {
border: 1px solid black;

}

Example of Adding Internal CSS

<!DOCTYPE html>
<html>
<head>

<style>

table, th, td {
border: 1px solid black;
}

</style>

</head>
<body>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>


<tr>
<td>Kumar Atul</td>
<td> jaiswal</td>
<td>19</td>
</tr>


<tr>
<td>Hacker</td>
<td>BoY</td>
<td>18</td>
</tr>


<tr>
<td>Naam to</td>
<td>suna hi hoga</td>
<td>17</td>
</tr>

</table>

</body>
</html>

Result

Example of Adding Inline CSS

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<table style="width:100%">
<tr>
<th style=" border: 1px solid black;" >Firstname</th>
<th style=" border: 1px solid black;" >Lastname</th>
<th style=" border: 1px solid black;">Age</th>
</tr>


<tr>
<td style=" border: 1px solid black;">Kumar Atul</td>
<td style=" border: 1px solid black;"> jaiswal</td>
<td style=" border: 1px solid black;">19</td>
</tr>


<tr>
<td style=" border: 1px solid black;">Hacker</td>
<td style=" border: 1px solid black;">BoY</td>
<td style=" border: 1px solid black;">18</td>
</tr>


<tr>
<td style=" border: 1px solid black;">Naam to</td>
<td style=" border: 1px solid black;">suna hoga</td>
<td style=" border: 1px solid black;">17</td>
</tr>

</table>

</body>
</html>

Result

Example of Adding External CSS

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<p>Use the external CSS File to add a border to the table.</p>

<table style="width:100%">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Kumar Atul</td>

<td> jaiswal</td>

<td>19</td>

</tr>

<tr>

<td>Hacker</td>

<td>BoY</td>

<td>18</td>

</tr>

<tr>

<td>Naam to</td>

<td>suna hoga</td>

<td>17</td>

</tr>

</table>

</body>

</html>

Result

otherwise if you do not want to use of CSS Internal file, you can use of Inline CSS

Internal CSS

Internal CSS

Inline CSS

External CSS

Video on this Topic :- Coming Soon

WHAT WE DO

We've been developing corporate tailored services for clients for 30 years.

ABOUT US

OUR TEAM

Kumar Atul Jaiswal

Kumar Atul Jaiswal

Kumar Atul Jaiswal

OUR SKILLS

Marketing

Websites

PR

ACHIEVEMENTS

STRATEGY & CREATIVITY

PORTFOLIO

An ordered HTML list :

Ordered List with Numbers

Ads

Youtube

Linkedln

Popular Posts

Like Us

Labels

Let's Talk About

Tweet

Connection

WHAT WE DO

ANALYTICS

CONSULTING

DESIGN

DEVELOPMENT

MARKETING

SEO

CONTACT US

Hacking Truth.in