Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat:Html-media Issue #118 #120

Merged
merged 7 commits into from
Oct 10, 2023
Merged

Feat:Html-media Issue #118 #120

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0e4b3ee
Update html/html_media/index.html
Diptenusarkar Oct 10, 2023
1a35476
Update html/html_media/index.html
Diptenusarkar Oct 10, 2023
01c550d
Update html/html_media/index.html
Diptenusarkar Oct 10, 2023
0930876
Update html/html_media/index.html
Diptenusarkar Oct 10, 2023
558e65a
feat:HTML5_Media
zainbinshakoor Oct 11, 2023
08c42ed
feat:Html_media
zainbinshakoor Oct 11, 2023
c4d67f7
Update html/html_media/index.html
Diptenusarkar Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions html/html_acessibility/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
<main class="main">
<div class="navigation-link">
<a href="../html_math/"><i class="bi bi-chevron-double-left"></i> Previous</a>
<a href="../html_intro/">Next <i class="bi bi-chevron-double-right"></i></a>
<a href="../html_media/">Next <i class="bi bi-chevron-double-right"></i></a>
</div>

<div class="htmlpost__box">
Expand Down Expand Up @@ -144,7 +144,7 @@ <h2>Read the WCAG and learn best practices</h2>

<div class="navigation-link">
<a href="../html_math/"><i class="bi bi-chevron-double-left"></i> Previous</a>
<a href="../html_intro/">Next <i class="bi bi-chevron-double-right"></i></a>
<a href="../html_media/">Next <i class="bi bi-chevron-double-right"></i></a>
</div>
</main>

Expand Down
83 changes: 83 additions & 0 deletions html/html_media/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<title>html.org.in | Page Not Found</title><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html.org.in | Page Not Found</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="apple-touch-icon" sizes="180x180" href="../../favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../favicon_io/favicon-16x16.png">
<link rel="manifest" href="../../favicon_io/site.webmanifest">
<style>
.page_404 {
padding: 40px 0;
background: #fff;
font-family: 'Arvo', serif;
}

.page_404 img {
width: 100%;
}

.four_zero_four_bg {

background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
height: 400px;
background-position: center;
}

.four_zero_four_bg h1 {
font-size: 80px;
}

.four_zero_four_bg h3 {
font-size: 80px;
}

.link_404 {
color: #fff !important;
padding: 10px 20px;
background: #39ac31;
margin: 20px 0;
display: inline-block;
}

.contant_box_404 {
margin-top: -50px;
}
</style>
</head>

<body>
<section class="page_404">
<div class="container">
<div class="row">
<div class="col-sm-12 ">
<div class="col-sm-10 col-sm-offset-1 text-center">
<div class="four_zero_four_bg">
<h1 class="text-center ">404</h1>


</div>

<div class="contant_box_404">
<h3 class="h2">
Look like you're lost
</h3>

<p>the page you are looking for not avaible!</p>

<a href="./" class="link_404">Go to Home</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>

</html>
159 changes: 159 additions & 0 deletions html/html_media/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Dsky Solution v1.0.0" />
<meta property="og:title" content="HTML Elements | A open source project 💖" />
<meta property="og:locale" content="en_IN" />
<meta name="description" content="HTML.ORG.IN A free platform for html learning " />
<meta property="og:description" content="HTML.ORG.IN A free platform for html learning " />
<link rel="canonical" href="https://html.org.in/" />
<meta property="og:url" content="https://html.org.in/" />
<meta property="og:site_name" content="html.org.in for html learner" />
<meta property="og:image" content="https://www.html.org.in/Website/assets/image/social-card.png" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://www.html.org.in/Website/assets/image/social-card.png" />
<meta property="twitter:title" content="html.org.in for html learner" />
<meta name="twitter:site" content="@diptenusarkar" />

<title>HTML Elements | A open source project 💖</title>

<!-- !Stylesheet -->
<link rel="stylesheet" href="../../Website/Style/web/main_post_d485f_v1.css">
<link rel="stylesheet" href="../../Website/Style/vender/css/prism.css">

<!-- media query screen -->
<link rel="stylesheet" type="text/css" media="(max-width: 320px)" href="../../Website/media_query/media320.css">
<link rel="stylesheet" type="text/css" media="(max-width: 375px)" href="../../Website/media_query/media375.css">
<link rel="stylesheet" type="text/css" media="(max-width: 425px)" href="../../Website/media_query/media425.css">
<link rel="stylesheet" type="text/css" media="(min-width:426px) and (max-width: 768px)"
href="../../Website/media_query/media768.css">
<link rel="stylesheet" type="text/css" media="(min-width: 768px)" href="../../Website/media_query/media1000.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

<link rel="apple-touch-icon" sizes="180x180" href="../../favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../favicon_io/favicon-16x16.png">
<link rel="manifest" href="../../favicon_io/site.webmanifest">
</head>

<body>
<header class="header">
<nav class="menu-wrap nav">
<a href="/" class="logo__top" style="color:#ff6d00;"><i class="bi bi-filetype-html"></i> HTML.ORG.IN </a>
<input type="checkbox" class="toggler">

<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ol>
<li>
<div include-html="../../include/navlink.html" id="navlink_file"></div>
</li>
<li>
<div class="theme__box">
<select id="themeSwitcher">
<option value="">Select One</option>
<option value="theme-dark">Dark</option>
<option value="theme-light">Light</option>
<option value="theme-gray">Gray</option>
<option value="theme-yellow">Yellow</option>
<option value="theme-blue">Blue</option>
<option value="theme-purple">Purple</option>
</select>
</div>
</li>
</ol>
</div>
</div>
</div>
</nav>
</header>
<!-- <div class="theme__box">
<select id="themeSwitcher">
<option value="">Select One</option>
<option value="theme-dark">Dark</option>
<option value="theme-light">Light</option>
</select>
</div> -->

<main class="main">
<div class="navigation-link">
<a href="../html_acessibility/"><i class="bi bi-chevron-double-left"></i> Previous</a>
<a href="../html_intro/">Next <i class="bi bi-chevron-double-right"></i></a>
</div>

<div class="htmlpost__box">
<h1>Media &#128204;</h1>
<hr>
<p class="htmlpost__hr-p">
Media elements in HTML enrich web content by allowing the integration of audio, video, and external content. They enhance user engagement and interactivity.
</p>
<hr>
<h2>Audio (Using &lt;audio&gt;)</h2>
<p>
The &lt;audio&gt; element enables you to embed audio content like music or podcasts. You can specify the audio source using the "src" attribute and customize playback controls.
<br>
Example:
<pre class="language-html">
&lt;audio src="music.mp3" controls&gt;&lt;/audio&gt;
Diptenusarkar marked this conversation as resolved.
Show resolved Hide resolved
</pre>
</p>
<h2>Video (Using &lt;video&gt;)</h2>
<p>
The &lt;video&gt; element seamlessly embeds videos into webpages. It supports various formats (e.g., MP4, WebM) for broader compatibility. Customize playback controls, dimensions, and multiple source formats.
<br>
Example:
<pre class="language-html">
&lt;video width="640" height="360" controls&gt;
Diptenusarkar marked this conversation as resolved.
Show resolved Hide resolved
&lt;source src="video.mp4" type="video/mp4"&gt;
&lt;source src="video.webm" type="video/webm"&gt;
Your browser does not support the video tag.
&lt;/video&gt;
Diptenusarkar marked this conversation as resolved.
Show resolved Hide resolved
</pre>
</p>
<h2>Embedding YouTube Videos</h2>
<p>
Use an &lt;iframe&gt; element with the YouTube video URL to easily embed and play YouTube videos on your website.
<br>
Example:
<pre class="language-html">
&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
Diptenusarkar marked this conversation as resolved.
Show resolved Hide resolved
</pre>
Diptenusarkar marked this conversation as resolved.
Show resolved Hide resolved
</p>
<h2>Plugins</h2>
<p>
Plugins extend the functionality of web browsers. Common examples include Flash and Java applets, although their usage has decreased over time due to security concerns and evolving web standards.
</p>
<h2>Enhancing User Experience</h2>
<p>
HTML media elements and plugins empower web developers to create interactive, multimedia-rich experiences, making web content more engaging and appealing to users.
</p>
</div>




<div class="navigation-link">
<a href="../html_acessibility/"><i class="bi bi-chevron-double-left"></i> Previous</a>
<a href="../html_intro/">Next <i class="bi bi-chevron-double-right"></i></a>
</div>
</main>

<div include-html="../../include/post__footer.html" id="footer_file"></div>
<script src="../../Website/JavaScript/jquery-3.6.0.min.js"></script>
<script src="../../Website/JavaScript/include-html.min.js"></script>

<script src="../../Website/Style/vender/js/prism.js"></script>
<script src="../../Website/app.js"></script>
</body>

</html>
18 changes: 16 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,8 @@ <h1>HTML Classes</h1>
<h1>HTML Block And Inline Elements</h1>
<p>
We are going to talk about the different block and inline elements in html.
<a href="/html/html_block_and_inline_elements/index.html">Learn More <i class="bi bi-book"></i></a>
<a href="/html/html_block_and_inline_elements/index.html">Learn More <i
class="bi bi-book"></i></a>
</p>
</div>
</div>
Expand Down Expand Up @@ -468,11 +469,24 @@ <h1>HTML MathML</h1>
<h1>HTML Acessibility</h1>
<p>
Having accessible websites is crucial for inclusivity, legal compliance, a broader audience and
improved user experience
improves user experience
<a href="/html/html_acessibility/">Learn More <i class="bi bi-book"></i></a>
</p>
</div>
</div>
<div class="main__html-componentBox">
<div class="main__html-componentBox-logobox">
<img src="/Website/assets/svg/icons8-html-5.svg" alt="html logo">
</div>
<div class="main__html-componentBox-textBox">
<h1>HTML Media</h1>
<p>
HTML media elements, like audio and video, allow you to embed and play audio or video files
on webpages, enhancing the multimedia experience for users.
<a href="/html/html_media/">Learn More <i class="bi bi-book"></i></a>
</p>
</div>
</div>
</section>
</main>

Expand Down