Discover the Art of Cutting-Edge Designs
Capture attention with vibrant visuals! Explore our world of innovation and style. Elevate your experience with cutting-edge designs. Unleash creativity – discover more today!
Dear learners, Are you interested in assessing your progress?
Request your mentor to give you access and start your Test.
HTML (Hypertext Markup Language) is the backbone of web development, serving as the standard markup language for creating and structuring web content. As a beginner, understanding the basics of HTML is the first step towards crafting web pages
Learn Advanced-level HTML
1.HTML LAYOUT:
HTML5 tags :
As we know that HTML5 is a new version of HTML ( Hypertext markup language). HTML5 introduced many new tags that will benefit many developers. These tags are generally supported by all major browsers. These tags belong to many aspects such as graphics, media, and forms.
Here is the list of some HTML5 tags :
<article> / <aside> / <audio>/ <canvas> / <figure>/ <footer>/ <header>/ <main>/ <mark>/ <nav>/ <section>/ <svg>/ <time>/ <video> etc.
HTML layout :
HTML layout refers to the structure of a web page, achieved through elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>. These elements help organize content, define the page’s sections, and enhance accessibility and SEO.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Page Layout</title>
</head>
<body>
<header>
<div class="head1"> Eligo CS </div>
<div class="head2">
A computer science portal for eligocs
</div>
</header>
<nav class="menu">
<a href="#home"> HOME</a>
<a href="#news"> NEWS</a>
<a href="#notification"> NOTIFICATIONS </a>
<div class="menu-log">
<a href="#login"> LOGIN</a>
</div>
</nav>
<main class="body_sec">
<section id="Content">
<h3> Content section</h3>
</section>
</main>
<footer> Footer Section</footer>
</body>
</html>
HTML
2. <video>/ <audio>/ <figure> /<svg> tags in HTML .
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Page Title</title>
</head>
<body>
<h2> Click play button to play video</h2>
<div>
<video src="./test.mp4" controls> </video>
<audio src="./test.mp3" controls> </audio>
<svg height="150" width="100">
<line x1="10" y1="10" x2="400" y2="400"
style="stroke:rgb(0,0,255);stroke-width:3" /> </svg>
<figure> <img src="C:\Users\ecs\Desktop\seminar.png"alt="The Pulpit Rock" width="304"height="228">
<figcaption> Eligo logo</figcaption> </figure>
</div>
</body>
</html>
HTML
3. Adding Google map & <canvas> tag :
The <canvas> tag in HTML is used to draw graphics on a web page using JavaScript. It can be used to draw paths, boxes, texts, gradients, and adding images. By default, it does not contain borders and text.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title> Customize the scroll-bar</title>
</head>
<body> <center>
<h1 style="color:lawngreen;"> Eligo CS</h1>
<div>
<iframe src=
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3506.2233913121413!2d77.4051603706222!3d28.50292593193056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce626851f7009%3A0x621185133cfd1ad1!2sGeeksforGeeks!5e0!3m2!1sen!2sin!4v1585040658255!5m2!1sen!2sin"
width="400"height="300"frameborder="0"style="border:0;" allowfullscreen=""aria-hidden="false"tabindex="0"> </iframe>
</div>
<canvas id="Eligo CS"
width="200" height="100"
style="border:1px solid black"> </canvas>
</center>
</body>
</html>
HTML
- In this article, we will know HTML Iframes, and their implementation through the examples. The iframe tag in HTML stands for Inline Frame and is used to embed another HTML document within the current document.
HTML
<!DOCTYPE html>
<html>
<head>
<title> HTML iframe Tag</title>
</head>
<body style="text-align: center">
<h1> Eligo CS</h1>
<nav>
<a href="#"> Home</a>
<a href="#"> Interview</a>
<a href="#"> Languages</a>
<a href="#"> Data Structure</a>
<a href="#"> Algorithm</a>
</nav>
<iframe src="https://eligocs.com/index.php"height="200"width="400"> </iframe>
</body>
</html>
HTML
Eligo CS
4. <section> , < main> and <article> tag :
Placing <article> tag inside of <section> tag is good practice, like section basically defines the types and the articles will contain the specific contents in that type of section.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
article tag over section tag
</title>
<style>
.container {
width: 650px;
height: auto;
}
.section {
float: right;
}
.article {
float: left;
}
h1 {
color: green;
}
</style>
</head>
<body>
<main>
<center>
<h1>Eligo CS</h1>
<p>A Computer Science Portal</p>
<div class="container">
<div class="article">
<article>
<h2>This is article tag</h2>
<p>
Above header(h2) placed
in article tag
</p>
</article>
<h2>This is non-article tag</h2>
<p>
The header is larger compare
to above header
</p>
</div>
<div class="section">
<section>
<h2>This is section tag</h2>
<p>
Above header(h2) placed
in section tag
</p>
</section>
<h2>This is non-section tag</h2>
<p>
The header is larger compare
to above header
</p>
</div>
</div>
</center>
</main>
</body>
</html>
HTML
5. Responsiveness of Web page :
HTML Viewport represents the area of display or screen visible to the user. It varies from device to device. This approach set the available screen width as the 100% width of the web pages and adjusts content accordingly to make it responsive.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Eligo CS</title>
<meta charset="utf-8"name="viewport"content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="ECS">Eligo CS</div>
<div class="ELIGO">HTML Introduction</div>
<p>
HTML stands for HyperText Markup Language. It is
used to design web pages using a markup
language.
</p>
</body>
</html>
HTML
Dear learners, Are you interested in assessing your progress?
Request your mentor to give you access and start your test.