Html advance

HTML Block and Inline Elements
Block-level Elements:
• A block-level element always starts on a new line.
• A block-level element always takes up the full width available.
• 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.

<html>
<body>
<div style="border: 1px solid black">welcome tamilnadu</div>
<p>hi tamilnadu people...</p>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city </p>
<p>Standing on the Riveroing</p>
</div>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello
World</span> element inside a paragraph.</p>
<p>The SPAN element is an element</p>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>coimbatore
<span style="color:blue;font-weight:bold">best city</span>salem<span
style="color:darkolivegreen;font-weight:bold">green city</span> in the tamilnadu
state.
</p>
</body>
</html>

HTML Tags:
Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

HTML class Attribute
• The HTML class attribute is used to specify a class for an HTML
element.
• Multiple HTML elements can share the same class.

Using The class Attribute
• The class attribute is often used to point to a class name in a style sheet.
• <div> elements with a class attribute with the value of "city".
• All of the three <div> elements will be styled equally according to the .city style
definition in the head section:

<!DOCTYPE html>
<html>
<head>
<style>
.city
{
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>coimbatore</h2>
<p>big city</p>
</div>
<div class="city">
<h2>salem</h2>
<p>small city</p>
</div>
<div class="city">
<h2>erode</h2>
<p>small city</p>
</div>
</body>
</html>

HTML id Attribute
• The HTML id attribute is used to specify a unique id for an HTML
element.

Using The id Attribute
• The id attribute specifies a unique id for an HTML element. The value of the id
attribute must be unique within the HTML document.
• The id attribute is used to point to a specific style declaration in a style sheet. It is
also used by JavaScript to access and manipulate the element with the specific id.
• The syntax for id is:
write a hash character (#), followed by an id name.
Then, define the CSS properties within curly braces { }.

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader
{
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">tamilnadu</h1>
</body>
</html>

Points:
• Note: The id name is case sensitive!

Difference Between Class and ID
• A class name can be used by multiple HTML elements, while an id name must
only be used by one HTML element within the page:

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name
must only be used by one HTML element within the page:</p>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">coimbatore</h2>
<p>coimbatore big</p>
<h2 class="city">salem</h2>
<p>salem small</p>
<h2 class="city">erode</h2>
<p>erode small</p>
</body>
</html>

HTML Iframes
• An HTML iframe is used to display a web page within a web page.
HTML Iframe Syntax:
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML
document.

Syntax:
<iframe src="url" title="description">
</iframe>
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
<iframe src="demo_iframe.html" height="200" width="300" title=“example">
</iframe>

<!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<p>With CSS</p>
<iframe src="welcome.html" style="border:2px solid red;" title="example"></iframe>
<iframe src="welcome1.html" height="200" width="300" title=“example1"></iframe>
</body>
</html>

The HTML <script> Tag
• The HTML <script> tag is used to define a client-side script (JavaScript).
• The <script> element either contains script statements, or it points to an
external script file through the src attribute.
• Common uses for JavaScript are image manipulation, form validation, and
dynamic changes of content.
• To select an HTML element, JavaScript most often uses the
document.getElementById() method.
• This JavaScript example writes "Hello JavaScript!" into an HTML element
with id="demo":

<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes </p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = “welcome master!";
</script>
</body>
</html>

Example
JavaScript can change styles:
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">welcome my tamil people</p>
<script>
function myFunction()
{
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>

Example
• JavaScript can change attributes:
document.getElementById("image").src = "picture.gif";

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>Here, a JavaScript </p>
<script>
function light(sw)
{
var pic;
if (sw == 0)
{
pic = "vijay.jpg"
} else
{
pic = "ajith.jpg"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="child.jpg" width="100"
height="180">
<p>
<button type="button"
onclick="light(1)">ajith</button>
<button type="button"
onclick="light(0)">vijay</button>
</p>
</body>
</html>

HTML File Paths
• A file path describes the location of a file in a web site's folder structure.

HTML Layout Elements and Techniques

HTML Layout Elements
• HTML has several semantic elements that define the different parts of a web page:

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on
demand
<summary> - Defines a heading for the <details> element

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: red;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background:blue;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: yellow;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section::after {
content: "";
display: table;

clear: both;
}
/* Style the footer */
footer {
background-color: green;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other,
on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">coimbatore</a></li>
<li><a href="#">madurai</a></li>
<li><a href="#">salem</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>coimbatore big city</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>

<marquee> element
The HTML <marquee> element is used to insert a scrolling area of text.

<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>

<marquee width="60%" direction="down" height="100px">
This is a sample scrolling text that has scrolls texts to down.
</marquee>

<marquee width="60%" direction="right" height="100px">
This is a sample scrolling text that has scrolls texts to right.
</marquee>

<marquee width="60%" direction="left" height="100px">
This is a sample scrolling text that has scrolls texts to left.
</marquee>

Example:
<marquee behavior="scroll" direction="up" scrollamount="1">
Slow Scrolling
</marquee>
<marquee behavior=“slide" direction="right" scrollamount="12">
Little Fast Scrolling
</marquee>
<marquee behavior=“alternate" direction="left" scrollamount="20">
Fast Scrolling
</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">
Very Fast Scrolling
</marquee>

<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<marquee direction = "up">
The direction of text will be from bottom to top.
</marquee>
</body>
</html>

margin property
• The margin property sets the margins for an element, and is a
shorthand property for the following properties:
• margin-top
• margin-right
• margin-bottom
• margin-left

• If the margin property has four values:
margin: 10px 5px 15px 20px;
• top margin is 10px
• right margin is 5px
• bottom margin is 15px
• left margin is 20px
• If the margin property has three values:
margin: 10px 5px 15px;
• top margin is 10px
• right and left margins are 5px
• bottom margin is 15px
• If the margin property has two values:
margin: 10px 5px;
• top and bottom margins are 10px
• right and left margins are 5px
• If the margin property has one value:
margin: 10px;
• all four margins are 10px

The margin-bottom property sets the bottom margin of an element.
<html>
<head>
<style>
p.ex1
{
margin-bottom: 25px;
}
</style>
</head>
<body>
<h1>tamilnadu</h1>
<p>coimbatore is big city</p>
<p class="ex1">madurai samll city</p>
<p>salem small city</p>
</body>
</html>

Definition and Usage
• The margin-left property sets the left margin of an element.

<html>
<head>
<style>
p.ex1
{
margin-left: 400px;
}
</style>
</head>
<body>
<h1>Tamilnadu</h1>
<p class="ex1">madurai small city</p>
</body>
</html>

• The margin-right property sets the right margin of an element.

<html>
<head>
<style>
p.ex1
{
margin-right:500px;
}
</style>
</head>
<body>
<h1>tamilnadu</h1>
<p>coimbatore is big city</p>
</body>
</html>

• The margin-top property sets the top margin of an element.

<html>
<head>
<style>
p.ex1
{
margin-top: 500px;
}
</style>
</head>
<body>
<h1>tamilnadu</h1>
</body>
</html>

@media rule
The @media rule is used in media queries to apply different styles for
different media types/devices.
Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: yellow;
}
@media only screen and (max-width: 600px) {
body {
}
}
</style>
</head>
<body>
<h1>tamilnadu state</h1>
<p>coimbatore,salem,madurai,erode</p>
</body>
</html>

<html>
<head>
<style>
body {
}
@media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
</style>
</head>
<body>
<h1>tamilnadu</h1>
<p>madurai,salem,erode</p>
</body>
</html>

<HEAD>
<TITLE>How to Carve Wood</TITLE>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
<BODY>
<H1 class="wood"> How to Carve Wood </H1>

• How to Use Google Chart?
• To use Google Chart in your web page, add a link to
the charts loader:
<script
src="https://www.gstatic.com/charts/loader.js">
</script>

• Google Chart is easy to use.
• Just add a <div> element to display the chart:
• <div id="myChart" style="max-width:700px;
height:400px"></div>

• The <div> element must have a unique id.
• Then load the Google Graph API:
1.Load the Visualization API and the corechart package
2.Set a callback function to call when the API is loaded

google.charts.load('current',{packages:['corechart'
]});
2 google.charts.setOnLoadCallback(drawChart);

<html>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js">
</script>
<body>
<div id="myChart" style="width:100%; max-
width:600px; height:500px;"></div>
<script>
google.charts.load('current',{packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],
[100,9],[110,10],[120,11],
[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs. Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw
var chart = new
google.visualization.LineChart(document.getElement
ById('myChart'));
chart.draw(data, options);
}
</script>
</body>
</html>

Scatter Plots
• To scatter plot the same data, change google.visualization to
LineChart:
var chart
= new google.visualization.LineChart(document.getEle
mentById('myChart'));

<!DOCTYPE html>
<html>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></scrip
t>
<body>
<div id="myChart" style="width:100%; max-
width:600px; height:500px;"></div>
<script>
google.charts.load('current',{packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
['Price', 'Size'],
[50,7],[60,8],[70,8],[80,9],[90,9],
[100,9],[110,10],[120,11],
[130,14],[140,14],[150,15]
]);
// Set Options
var options = {
title: 'House Prices vs. Size',
hAxis: {title: 'Square Meters'},
vAxis: {title: 'Price in Millions'},
legend: 'none'
};
// Draw
var chart = new
google.visualization.ScatterChart(document.getElemen
tById('myChart'));
chart.draw(data, options);
}
</script>
</body>
</html>

Html advance

Recommended

Recommended

More Related Content

Similar to Html advance

Similar to Html advance (20)

Recently uploaded

Recently uploaded (20)

Html advance