Advanced Internet Technology

Experiment No 1
Aim: To study basic HTML5 elements.

Theory:
Canvas: The HTML <canvas> element is a container for canvas graphics.
An HTML canvas is a rectangular area on an HTML page. Canvas has
several methods for drawing paths, boxes, circles, text, and graphic
images.
Svg: Creates an SVG document fragment.
Video: The <video> tag specifies video, such as a movie clip or other video
streams. Currently, there are 3 supported video formats for the <video>
element: MP4, WebM, and Ogg.
Audio: The <audio> tag defines sound, such as music or other audio
streams. Currently, there are 3 supported file formats for the <audio>
element: MP3, Wav, and Ogg.
Object: The <object> tag defines an embedded object within an HTML
document. Use this element to embed multimedia (like audio, video, Java
applets, ActiveX, PDF, and Flash) in your web pages.You can also use the
<object> tag to embed another webpage into your HTML document.
Article: The <article> tag specifies independent, self-contained content.An
article should make sense on its own and it should be possible to distribute
it independently from the rest of the site. Sources: Blog Post, News Story
etc.
Aside: The <aside> tag defines some content aside from the content it is
placed in. The aside content should be related to the surrounding content.
Details: The <details> tag specifies additional details that the user can
view or hide on demand. The <details> tag can be used to create an
interactive widget that the user can open and close. The content of a
<details> element should not be visible unless the open attribute is set.
Figcaption: The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the
<figure> element.
Figure: The <figure> tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.While the content of the <figure>
element is related to the main flow, its position is independent of the main
flow, and if removed it should not affect the flow of the document.
Footer: A <footer> element should contain information about its containing
element.
Header: The <header> element represents a container for introductory
content or a set of navigational links.
Main: The content inside the <main> element should be unique to the
document. It should not contain any content that is repeated across
documents such as sidebars, navigation links, copyright information, site
logos, and search forms.
Mark: Use the <mark> tag if you want to highlight parts of your text.
Nav: The <nav> tag defines a set of navigation links.
Section: The <section> tag defines sections in a document, such as
chapters, headers, footers, or any other sections of the document.
Summary: The <summary> tag defines a visible heading for
the <details> element. The heading can be clicked to view/hide the details.
Time: The <time> tag defines a human-readable date/time.
Code:
Using html5 elements:
Code:
<!DOCTYPE html>
<html>
<head>
<title> exp1 </title>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,200,100);
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas> <br>
<svg width="400" height="100">
<rect width="200" height="100" style="fill:rgb(0,0,255);stroke:rgb(0,0,0)" />
</svg>
<audio controls>
<source src="horse.ogg" type="audio/ogg" >
Your browser does not support the audio element.
</audio>
<video width="150" height="150" controls >
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<object width="200" height="200" data="helloworld.swf"> </object>
</body>
</html>
OUTPUT:
Using html5 semantics:

CODE:
<!DOCTYPE html>
<html>
<body>
<main>
<h1> Famous engineering college in mumbai</h1>
<section>
<h1>D.J.SANGHVI</h1>
<p>
Dwarkadas Jamnadas Sanghvi College of Engineering (D.J. Sanghvi or DJ, as it is
popularly known) is an engineering college in Vile Parle, Mumbai. The college was
established by Vile Parle Kelavani Mandal in 1994.College operates between <time>
7:00 </time> and <time> 17:30 </time> </p>
<article>
<header>
<h1>History of D.J.Sanghvi?</h1>
<p>History</p>
</header>
<p>D. J. Sanghvi College of Engineering was established in 1994. It was named after
Dwarkadas J. Sanghvi, an industrialist and pioneer in the pen industry</p>
</article>
<aside>
<h4>Svkm</h4>
<p><mark>Shri Vile Parle Kelavani Mandal</mark> is a Public Charitable Trust
registered under the Societys Registration Act and Bombay Public Trust Act.</p>
</aside>
<figure>
<img src="djscoe.jpg" alt="D.J.Sanghvi" width="304" height="228">
<figcaption> D.J.Sanghvi. - Vile Parle ,India.</figcaption>
</figure>
<nav>
<a href="http://www.djsce.ac.in/">D.J.Sanghvi College of Engineering</a> <br>
<a href="http://www.engineering.careers360.com/dwarkadas-j-sanghvi-college-ofengineering-mumbai">D.J.Sanghvi College Of Engineering Mumbai</a>
</nav>
<summary> Copy-right:1995-2015</summary>
<footer>
<p>Posted by: TE-IT</p>
<p>Contact information: <a href="mailto:someone@example.com">
te-it@gmail.com</a>.</p>
</footer>
</section>
</main>
</body>
</html>
OUTPUT:

Advanced Internet Technology

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Advanced Internet Technology

Cargado por

Copyright:

Formatos disponibles

Experiment No 1

Aim: To study basic HTML5 elements.

Figcaption: The <figcaption> tag defines a caption for a <figure> element.

Using html5 semantics:

También podría gustarte