Dear students please drop your notes and doubts here regarding session 6.
HTML 5| SEMANTIC TAGS | NON SEMANTIC TAGS | CSS HTML EXTENSIONS
1 Like
@drishtinayak2828-TA @Hiral_Khakhariya
Practise Session Five Session Five - Practise (FSR060523)
Replit like: https://edyoda-session-five-practice--krishnayadav44.repl.co/
Code Is Here:
<!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>Session-5 Practise(Extensions & Font Styling)</title>
<!-- This Google Font link for Font Family!-->
<link href="https://fonts.googleapis.com/css2?family=Mogra&family=Inter:wght@200&family=Raleway:wght@900&family=Roboto+Mono:wght@200&family=Dancing+Script:wght@400&family=Caveat&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html{
scroll-behavior: smooth;
}
body{
background-color: rgb(255, 255, 255);
}
.logo{
margin: 0px;
padding: 0px;
font-size: 45px;
color:#0087FF;
letter-spacing: -2px;
font-family: 'Raleway', sans-serif;
}
nav{
margin: 0px;
padding: 0px;
background-color: #15294B;
width: 100%;
height: 80px;
border: 0px solid rgb(0, 0, 255);
}
.headerHeading{
margin: 0px;
padding: 17px;
padding-left: 60px;
color:rgb(255, 255, 255);
font-size: 36px;
font-family: 'Raleway', sans-serif;;
border: 0px solid red;
font-family: 'Inter', sans-serif;
text-align: left;
width: 400px;
display: inline-block;
}
.myname{
margin: 0px;
padding: 18px;
color:rgb(255, 255, 255);
font-size: 26px;
font-family: 'Raleway', sans-serif;
border: 0px solid red;
font-family: 'Inter', sans-serif;
text-align: right;
width: 980px;
display: inline-block;
}
#googleFonts{
margin-top: 150px;
display: block;
width: 100%;
height: 400px;
border-bottom: 3px solid black;
}
table{
width: 100%;
border: 0px solid green;
margin-top: 20px;
border-collapse: separate;
}
td{
margin:auto;
}
#fontRoboto{
font-family: 'Roboto Mono', monospace;
margin-left: 3px;
padding: 10px;
width: 350px;
height: 300px;
border: 1px solid blueviolet;
}
#fontDancingScript{
margin-left: 3px;
padding: 10px;
width: 350px;
height: 300px;
border: 1px solid blueviolet;
font-size: 21px;
font-family: 'Dancing Script', cursive;
}
#fontMogra{
font-family: 'Mogra', cursive;
margin-left: 3px;
padding: 10px;
width: 350px;
height: 300px;
border: 1px solid blueviolet;
font-size: 21px;
}
#fontCaveat{
font-family: 'Caveat', cursive;
margin-left: 3px;
padding: 10px;
width: 350px;
height: 300px;
border: 1px solid blueviolet;
font-size: 21px;
}
a{
margin-top: 50px;
text-decoration: underline;
color: blue;
font-size: 18px;
font-weight: bold;
display: block;
text-align: center;
}
#fafaIcon{
margin-top: 160px;
width: 100%;
border-bottom: 3px solid black;
font-size: 18px;
}
.fafaIcon{
color:blueviolet;
font-size: 28px;
font-family: 'Raleway', sans-serif;
}
#fafaAutomobile{
font-family: 'Caveat', cursive;
margin-left: 3px;
padding: 10px;
width: 350px;
height: 300px;
border: 1px solid blueviolet;
font-size: 100px;
text-align: center;
color: red;
}
#fafaAddress{
font-family: 'Caveat', cursive;
margin-left: 3px;
padding: 10px;
width: 350px;
height: 300px;
border: 1px solid blueviolet;
font-size: 100px;
text-align: center;
color: rgb(38, 0, 255);
}
#flatIcon{
width: 100%;
margin-top: 100px;
font-size: 28px;
border-bottom: 3px solid black;
}
.flatIcon{
color:blueviolet;
font-size: 28px;
font-family: 'Raleway', sans-serif;
}
</style>
</head>
<body>
<header>
<h1 class="logo">EDYODA</h1>
<nav>
<h1 class="headerHeading">Session Five Practise</h1>
<h4 class="myname">By Krishna</h4>
</nav>
</header>
<main>
<section id="googleFonts">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Google_Fonts_logo.svg/2560px-
Google_Fonts_logo.svg.png" style="display: block;" width="350" height="50"/>
<table>
<tr>
<td id="fontRoboto">
“If you love a flower, don’t pick it up.<br/>
Because if you pick it up it dies and it ceases to be what you love.<br/>
So if you love a flower, let it be.<br/>
Love is not about possession.<br/>
Love is about appreciation.”<br/>
<b>― Osho</b><br/>
<a href="https://fonts.google.com/specimen/Roboto+Mono" target="_blank">Go To Font</a>
</td>
<td id="fontDancingScript">
“Experience life in all possible ways --<br/>
good-bad, bitter-sweet, dark-light,<br/>
summer-winter. Experience all the dualities.<br/>
Don't be afraid of experience, because<br/>
the more experience you have, the more<br/>
mature you become.”<br/>
<b>― Osho</b><br/>
<a href="https://fonts.google.com/specimen/Dancing+Script" target="_blank">Go To Font</a>
</td>
<td id="fontMogra">
“Friendship is the purest love.<br/>
It is the highest form of Love<br/>
where nothing is asked for, <br/>
no condition, where one simply <br/>
enjoys giving.”<br/>
<b>― Osho</b><br/>
<a href="https://fonts.google.com/specimen/Mogra" target="_blank">Go To Font</a>
</td>
<td id="fontCaveat">
“To be creative means to be in love with life. You can be creative
only if you love life enough that you want to enhance its beauty, you want to
bring a little more music to it, a little more poetry to it, a little more dance to it.”<br/>
<b>― Osho</b>
<a href="https://fonts.google.com/specimen/Caveat" target="_blank">Go To Font</a>
</td>
</tr>
</table>
<div>
</div>
<div>
</div>
</section>
<section id="fafaIcon">
<h1 class="fafaIcon">Fa Fa Icon (Font Awesome)</h1>
<p>
Font Awesome is a toolkit for websites that provides icons and social logos.
Font Awesome is designed to be used with inline elements. The <span style="color:red;"><i></span> and <span style="color:red;"><span></span>
elements are widely used for icons.
Also note that if you change the font-size or color of the icon's container, the icon
changes. Same thing goes for shadow, and anything else that gets inherited using
CSS.<br/>
Example:
<table>
<tr>
<td id="fafaAutomobile">
<span class="fa fa-automobile"></span>
<span class="fa fa-ban"></span>
</td>
<td id="fafaAddress">
<span class="fa fa-address-card"></span>
<span class="fa fa-birthday-cake"></span>
</td>
</tr>
</table>
</p>
</section>
<section id="flatIcon">
<p>
<h1 class="flatIcon">Flat Icons</h1>
Flat icon design is a minimalistic design approach that emphasizes usability. This
interface focuses on open space, bright color and flat graphics or illustration. The
icons on a flat web design or rather “Flat icons” are clean and have crisp edges with
a flat two dimensional graphic layout.<br><br>
<b>Example:</b><br>
<img src="instagram.png" width="200" height="200" alt="Instagram Image">
</p>
</section>
</main>
</body>
</html>
1 Like
@drishtinayak2828-TA @Hiral_Khakhariya “Semantic Tag Practice”
“Html/Css Styling”
https://drive.google.com/drive/folders/1w2XK2iyoYqcv6p--XYyz1wdnVd9lFvI4?usp=share_link
1 Like
practice for session 5 font stylings
code is here;
}
.para{
font-size: 25px;
font-family: 'Old Standard TT', serif;
}
.h1{
font-family: 'Lily Script One', cursive;
}
</style>
Font Stylings
colorpicker
<i class="fa-brands fa-twitter icons"></i>
<i class="fa-brands fa-linkedin icons"></i>
<i class="fa-brands fa-tiktok icons"></i>
<div>
<img src="../Live Session Files/google (1).png">
</div>
<p class="para">Full stack development is the end-to-end development of applications. <br> includes both the front end and back end of an application.<br> The front end is usually accessed by a client, and the back end forms the core of the application where all the business logic is applied.</p>
1 Like
practice for session 6
semantic tags
<title>practice 6 semantic</title>
demo for p tag
demo for footer tag
1 Like
@drishtinayak2828-TA @Hiral_Khakhariya
Session SIX : Session Six Practise(FSR060523) - Semantic HTML
Replit Link: https://edyoda-session-six-practice--krishnayadav44.repl.co/
Code is Here (Just Change Image Adress):
<!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>EDYODA Session 6 - Practise</title>
<link href="fontawesome-free-6.4.0-web/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Mogra&family=Inter:wght@200&family=Raleway:wght@300&family=Raleway:wght@900&family=Roboto+Mono:wght@200&family=Dancing+Script:wght@400&family=Caveat&display=swap"
rel="stylesheet">
<style>
html{
scroll-behavior: smooth;
}
body{
background-color: rgb(255, 255, 255);
}
nav{
background-color: #15294B;
border: 0px solid rgb(235, 9, 9);
padding: 0px;
margin: 0px;
width: 100%;
height: 80px;
}
.logo{
margin: 0px;
padding: 0px;
font-size: 45px;
color:#0087FF;
letter-spacing: -2px;
font-family: 'Raleway', sans-serif;
}
.headerHeading{
margin: 0px;
padding: 17px;
padding-left: 60px;
color:rgb(255, 255, 255);
font-size: 36px;
font-family: 'Raleway', sans-serif;;
border: 0px solid red;
font-family: 'Inter', sans-serif;
text-align: left;
width: 400px;
display: inline-block;
}
.myname{
margin: 0px;
padding: 18px;
color:rgb(255, 255, 255);
font-size: 26px;
font-family: 'Raleway', sans-serif;
border: 0px solid red;
font-family: 'Inter', sans-serif;
text-align: right;
width: 980px;
display: inline-block;
}
#sementicImg{
width: 500px;
height: 500px;
border: 3px solid rebeccapurple;
}
#linkImg{
border: 0px solid rebeccapurple;
margin: 230px 230px;
}
/* Sematic Web Page CSSS */
header{
margin-top: 60px;
padding: 0px;
background-color: #090909;
width: 100%;
height: 120px;
border: 0px solid rgb(0, 0, 255);
}
#headerNav{
background-color: #090909;
float: right;
border: 0px solid rgb(235, 9, 9);
padding: 0px;
margin: 20px;
width: 40.5%;
}
.ulList{
list-style-type: none;
float: left;
margin: 0px;
padding: 0px;
}
li{
float: left;
text-align: center;
padding: 9px;
margin: 1px;
border: 0px solid goldenrod;
}
a{
text-decoration: none;
}
#headerSec{
border: 0px solid rgb(95, 230, 99);
display: inline-block;
padding: 8px 75px;
margin:6px;
}
#logo{
color:#B9B9B9;
font-family: monospace;
font-size: 55px;
padding: 0px;
margin: 0px;
border: 0px solid red;
}
#subTitle{
color:#6B6B6B;
font-size: 23px;
border: 0px solid yellow;
}
.navLogo{
font-family: 'Raleway', sans-serif;
font-size: 18px;
color:#f1e8e8;
}
.subNavLogo{
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 10px;
color:#666666;
}
/* Header Part is finished here */
/* image section CSS start from here */
#imageShow{
background-color: #004AAD;
width: 100%;
height: 400px;
border: 0px solid rebeccapurple;
}
.imgList{
font-family: 'Dancing Script', cursive;
font-size: 24px;
border: 0px solid green;
padding: 0px;
margin: 0px 60px;
width: 600px;
height: 400px;
color:white;
}
</style>
</head>
<body>
<h1 class="logo">EDYODA</h1>
<nav>
<h1 class="headerHeading">Session Six Practise</h1>
<h4 class="myname">By Krishna</h4>
</nav>
<h1>Semantic HTML</h1>
<img src="SemanticHTMLPage.png" id="sementicImg" alt="Semantic"/>
<a href="#semanticHeader"><img id="linkImg" title="Click to show semantic HTML" src="download-circular-button.png" width="150" height="150"/></a>
<main id="semanticHeader">
<header>
<section id="headerSec">
<span id="logo">HEADER</span><br>
<span id="subTitle">PRACTISE INSTITUTE</span>
</section>
<nav id="headerNav">
<ul class="ulList">
<li>
<a href="#home" target="_parent">
<span style="color:rgb(19, 242, 52); font-weight: 700;" class="navLogo">HOME</span><br>
<span class="subNavLogo">WELCOME</span><br>
<span style="color: rgb(202, 198, 198); font-size:18px;" class="fa fa-home"></span>
</a>
</li>
<li>
<a href="#news" target="_parent">
<span class="navLogo">NEWS</span><br>
<span class="subNavLogo">FRESH</span><br>
<span style="color: rgb(202, 198, 198); font-size:18px;" class="fa fa-pen"></span>
</a>
</li>
<li>
<a href="#servises" target="_parent">
<span class="navLogo">SERVICES</span><br>
<span class="subNavLogo">FOR YOU</span><br>
<span style="color: rgb(202, 198, 198); font-size:18px;" class="fa fa-file-code-o"></span>
</a>
</li>
<li>
<a href="#products" target="_parent">
<span class="navLogo">PRODUCTS</span><br>
<span class="subNavLogo">THE BEST</span><br>
<span style="color: rgb(202, 198, 198); font-size:18px;" class="fa fa-gear"></span>
</a>
</li>
<li>
<a href="#contact" target="_parent">
<span class="navLogo">CONTACT</span><br>
<span class="subNavLogo">OUR ADDRESS</span><br>
<span style="color: rgb(202, 198, 198); font-size:18px;" class="fa fa-envelope-o"></span>
</a>
</li>
</ul>
</nav>
</header>
<section id="imageShow">
<ul class="ulList">
<li class="imgList" style="padding-top: 40px;">“Listen to your being. It is continuously giving<br/>
you hints; it is a still, small voice.<br/>
It does not shout at you, that is true. And if you are a<br/>
little silent you will start feeling your way. Be the person you are.<br/>
Never try to be another, and you will <br/>
become mature. Maturity is accepting the responsibility of being oneself,<br/>
whatsoever the cost.<br/>
Risking all to be oneself, that's what maturity is all about.”<br/>
<b>― Osho</b>
</li>
<li class="imgList" style="padding-left: 122px; margin-right: 0;">
<img src="upload://5Xpb2w39DPHcdbYANe5RFUwfYOa.jpeg" width="100%" height="100%">
</li>
</ul>
</section>
</main>
</body>
</html>
1 Like
1 Like
<style>
.abc{
font-family: 'Cedarville Cursive', cursive;
font-family: ‘Dancing Script’, cursive;
font-family: ‘Pacifico’, cursive;
font-family: ‘Smokum’, cursive;
}
.rhino{
color: brown;
font-size: 50px;
height: 100px;
width: 100px;
border: solid;
padding: 10px;
}
</style>
<body>
<div class="box"></div>
<p class="abc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur quisquam facilis explicabo magnam architecto dolores a ipsum doloremque eveniet repudiandae? Voluptatum doloribus perspiciatis sequi iure tempora voluptas assumenda ducimus sed.</p>
<i class="fa-brands fa-facebook rhino"></i>
<i class="fa-brands fa-instagram rhino"></i>
<i class="fa-solid fa-cart-shopping rhino"></i>
1 Like
1 Like
semantic
open
close
about
</header>
<main>
<section>
<article>
<header>
<h1>welcome to the html5</h1>
<a></a>
</header>
</article>
</section>
</main>
</body>
<footer>
tata bye bye
</footer>
1 Like
1 Like
Practice -5
1 Like
Practice Session 7:
<title>HTML Session 7</title>
<form>
<!-- Form without restriction -->
<!-- default input type will be text -->
<label> Username</label>
<input>
<label> Password</label>
<input>
</form><br><br><br><br>
<form>
<!-- Form with basic input types -->
<label> Username</label>
<input type="text"><br><br>
<label> Password</label>
<input type="password"><br><br>
<label>Contact</label>
<input type="number"><br><br>
<label>Age</label>
<input type="number" min="18" max="40"> <br><br>
<!-- Note: We can enter the age more than 40 and less than 18; however, when we click on submit, it will say error. This is because, the input in Age must not be less than 18 and more than 40 -->
<input type="submit">
<!-- Note: input type "Submit" will display in button format -->
</form>
<br><br><br><br>
<form>
<!-- Form with placeholder input types -->
<label> Username</label>
<input type="text" placeholder="Enter username" value="" name="username"><br><br>
<label> Password</label>
<input type="Enter password" placeholder="Password" value="" name="pwd"><br><br>
<label>Contact</label>
<input type="number" placeholder="Enter contact" value="" name="contact"><br><br>
<label>Age</label>
<input type="number" min="18" max="40" placeholder="Enter age" value="" name="age"> <br><br>
<input type="submit">
</form>
<br>
<hr>
<form>
<!-- Email label -->
<label> Email</label>
<input type="email" placeholder="Enter email" value="" name="email"><br>
<input type="submit"><br><br>
</form>
<br>
<hr>
<form>
<!-- Form with FOR, Checkbox, Radio attributes -->
<label for="user1"> Username</label>
<input type="text" placeholder="Enter username" value="" name="username" id="user1"><br><br>
<hr>
<label>Subjects:</label>
<br>
<label for="sub1"> HTML</label>
<input type="checkbox" id="sub1">
<br>
<label for="sub2"> CSS</label>
<input type="checkbox" id="sub2">
<br>
<label for="sub3"> JAVA</label>
<input type="checkbox" id="sub3">
<br>
<hr>
<label>Gender:</label>
<label for="gen1"> Male</label>
<input type="radio" name="gender" id="gen1">
<label for="gen2"> Female</label>
<input type="radio" name="gender" id="gen2"><br>
</form>
<form>
<!-- Form with "select" tag -->
<label> City</label>
<select>
<option selected>Meghalaya</option>
<option>Assam</option>
<option>Manipur</option>
<option>Nagaland</option>
<option>Mizoram</option>
</select>
</form>
<form>
<!-- Form with "optgroup" tag -->
<label>Option_Group Example:</label>
<select>
<optgroup label="Group 1">
<option>G1: A </option>
<option>G1: B </option>
</otpgroup>
<optgroup label="Group 2">
<option>G2: x </option>
<option>G2: y </option>
</otpgroup>
City Meghalaya Assam Manipur Nagaland Mizoram
<br>
<!-- in datalist tag, it will search via name by default. To search via value, we need to add "value" attribute in <option> tag -->
<label> City</label>
<input placeholder="Enter State" list="list">
<datalist id="list">
<option value="123">Meghalaya</option>
<option value="124 ">Assam</option>
<option value="125">Manipur</option>
<option value="126">Nagaland</option>
<option value="127">Mizoram</option>
</datalist>
</form>
<br><br><br><br>
1 Like
session 5
session 6
1 Like
Amazing guys you guys just surprised with this i m expecting more like this practice in continue way in future also 
1 Like
<label for="node_js">node js</label>
<input type="checkbox" value="" id="node_js">
<br>
<br>
<label>geder:-</label>
<br>
<br>
<label>Male</label>
<input type="radio" name="input_male">
<br>
<br>
<label>female</label>
<input type="radio" name="input_female">
<inut type="submit">
<br>
<br>
<label>city</label>
<select>
<option>delhi</option>
<option>hyderabad</option>
<option>banglore</option>
<option>ranchi</option>
</select>
<br>
<br>
<input type="submit">
<br>
<br>
<label>option Group_Example</label>
<select>
<opt label="Group 1">
<option>Group 1:-A</option>
<option>Group 1:-B</option>
</opt>
<opt label="Group 2">
<option>Group 1:-A</option>
<option>Group 2:-B</option>
</opt>
</select>
<br>
<br>
<label>search your city</label>
<input placeholder="enter your search" list="city_list">
<datalist id="city_list">
<option>delhi</option>
<option>hyderabad</option>
<option>banglore</option>
<option>ranchi</option>
</datalist>
<br>
<br>
<label>Date:-</label>
<input type="date">
<input type="submit">
<br>
<br>
<label>month</label>
<input type="month">
<input type="submit">
1 Like