Scribd
Upload
3 views

WEEK1to3

The document contains a series of HTML code examples demonstrating various web technologies and concepts, including HTML structure, CSS styling, and form creation. Each week features different topics such as creating web pages, styling elements, and embedding media. The examples are authored by Rishika Arisetty and cover practical applications for building web content.

Uploaded by

hitikhatod
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

WEEK1to3

The document contains a series of HTML code examples demonstrating various web technologies and concepts, including HTML structure, CSS styling, and form creation. Each week features different topics such as creating web pages, styling elements, and embedding media. The examples are authored by Rishika Arisetty and cover practical applications for building web content.

Uploaded by

hitikhatod
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

WEB TECHNOLOGY-RECORD SUBMISSION

WEEK-1:
1. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="Description" content="creating web page.">
<title>web page</title>
</head>
<body>
<h1>about HTML.</h1>
<p>creating web application using html....</p>
</body>
</html>

Output:

2. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="Description" content="creating web page.">
<title>web page</title>
</head>
<body>

<h1>My favorite things in subjects and my Hobbies.</h1>

<h2>Hobbies</h2>

<ul>

<li>painting</li>

<li>Reading Novels.</li>

</ul>

<h2>Subjects</h2>

<ol>

<li>Mathematics</li>

<li>Physics</li>

</ol>

</body>

</html>

Output:

3. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="Description" content="creating web page.">
<title>web page</title>
</head>
<body>
<h1>about HTML.</h1>
<img src="HTML5.png" alt="HTML icon" title="HTML" width="512" height="512">

<figcaption>HTML ICON</figcaption>

<h2>hyperlink</h2>

<p><a href="https://www.google.com">VISIT GOOGLE</a></p>


</body>
</html>

Output:
4. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="Description" content="creating web page.">
<title>Weekly Timetable</title>
</head>
<body>
<h1>TIME TABLE</h1>
<table>
<tr>
<th>Day</th>
<th>Time</th>
<th>Subject</th>
</tr>
<tr>
<td>Monday</td>
<td>9-10</td>
<td>math</td>
</tr>
<tr>
<td>Tuesday</td>
<td>9-10</td>
<td>social</td>
</tr>
<tr>
<td>Wednesday</td>
<td>9-10</td>
<td>Sciencs</td>
</tr>
<tr>
<td>thursday</td>
<td>9-10</td>
<td>english</td>
</tr>
<tr><td>Friday</td>
<td>9-10</td>
<td>telugu</td>
</tr>
</table>
</body>
</html>
Output:

5. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="Description" content="creating web page.">
<title>Contact US!!</title>
</head>
<body>
<h1>Our Contact Form</h1>
<form action="https://httpbin.org/get" method="get">
<fieldset>
<legend>Send Us A Message</legend>
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="your name" required>
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="your mail" required>
</p>
<p>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>
</p>
<p>
<label>Interests:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="music" value="music">
<label for="music">music</label>
<input type="checkbox" id="travel" name="travel" value="travel">
<label for="music">travel</label>
</p>
</fieldset>
<button type="submit">Send</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
Output:
6. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="Description" content="creating web page.">
<title>Text formatting</title>
</head>
<body>
<h1>Example for text formatting.</h1>
<ul> <li>this is a <b>BOLD</b> text.</li>
<li>this is an <i>italicized</i> text.</li>
<li>this is an <u>underlined</u> text.</li>
<li>this is an<mark>highlighted</mark> text.</li>
<li>this is an <small>small-sized</small> text.</li>
</ul>
</body>
</html>
Output:
7. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="Description" content="creating web page.">
<title>Navigation Bar</title>
</head>
<body>
<h1>Navigation Bar</h1>
<p>
<a href="#home">Home</a><br>
<a href="#about">about us</a><br>
<a href="#contact">contact us</a>
</p>
</body> </html>
Output:

8. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="Description" content="creating web page.">
<title>Media Embedding</title>
</head>
<body>
<h1>Embedded Video</h1>
<video width="440" height="260" controls>
<source src="video.mp4" type="video/mp4">Your browser does not support the video
tag
</video>
<h2>Embbeded Audio</h2>
<audio controls><source src="audio.mp3" type="audio/mpeg">Your browser does not
support the audio tag.</audio>
</body> </html>

WEEK-2
1. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" description="Rishika Arisetty">
<title>CSS ELEMENT SELECTORS</title>
<style>
h1 {
color:brown;
font-size: 30px;
}
p{
color : blue;
font-size: 20px;
}
</style>
</head>
<body>
<h1>SELECTORS</h1>
<P>This a paragraph with blue text.</P>
<p>All paragraphs will have same style.</p>
</body> </html>

2. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta name="author" description="Rishika Arisetty">
<title>CSS BACKGROUND AND BORDERS</title>
<style>
h1{
color:purple;
font-size: 30px;
}
body{
background-color: lightgray;
}
.box{
background-color:beige;
border: 3px dotted black;
border-radius:10px;
padding:20px;
width: 250px;
text-align: center;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>Background and colors</h1>
<p class="box">This is a box with a border</p>
<p class="box"> this is normal paragraph.</p>
</body>
</html>
Output:
3. <!DOCTYPE html>
<html lan="en">

<head>

<meta charset="UTF-8">

<meta content="author" description="Rishika Arisetty">

<title>CSS FONTS</title>

<style>

h1 {

font-family: 'Courier New', Courier, monospace;

font-size: 30px;

font-weight: bold;

text-align: center;

p{

font-size: 18px;

font-style: italic;

</style>

</head>

<body>

<h1>Styled Heading</h1>

<p>This is a paragraph with a different font-style.</p>

</body> </html>

4. <!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<meta content="author" description="Rishika Arisetty">
<title>CSS EFFECTS</title>
<style>
.box{
width: 250px;
padding: 20px;
background:white;
box-shadow: 5px 5px 10px purple;
text-align: center;
margin: 20px auto;
border: 1px solid black;
}
h2 {
text-shadow: 2px 2px 5px gray;
text-align: center;
}
button{
display:black;
background-color: yellow;
color: white;
padding:10px;
border: none;
cursor: pointer;
margin:20px auto;
font-size: 16px;
}
button:Hover{
background-color:silver;
}
</style>
</head>
<body>
<h2>Text Shadow Effect</h2>
<p class="box">This box has a shadow</p>
<button>Hover Me!</button>
</body>
</html>
Output:
WEEK-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="description" content="The official website for The Aura Cafe">
<title>The Aura Cafe</title>
<link rel="icon" href="bread-640x247.jpg" type="image/x-icon">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>Welcome to The Aura Cafe</h1>
<nav>
<ul>
<li><a href="#about">About<abbr title="The Aura Cafe">
TAC</abbr></a></li>
<li><a href="#menu">Our Menu</a></li>
<li><a href="hours.html">Store Hours</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<figure>
<!--uploading an image on the page which contains link of the pic and alt
shows the name during unloaded and size of the image and title will pop on
image for clear understanding-->
<img src="coffee_640x247.jpg" alt="Coffee Beans" title="We love
Coffee!!" width="640" height="247">
<figcaption>COFFEE AND BEANS!!</figcaption>
</figure>
</header>
<hr>
<main>
<article id="about">
<h2>About <abbr title="The Aura Cafe">TAC</abbr></h2>
<p>
The Aura Cafe was founded in <time datetime="2024">2024</time>.
Where flavors meet stories and moments turn into memories. At Aura,
we offer a cozy ambiance, exceptional coffee, and handcrafted delicacies to
delight your senses. Join us for a perfect escape, whether you're looking to
relax, work, or connect with loved ones❤️✨.
</p>
<aside>
<h3>Our Specialities</h3>
<details>
<summary>What inspired us to start this coffee journey?</summary>
<p><i>A deep love for coffee and a desire to share its rich culture and
flavors with the world inspired us to start our brand.</i></p>
</details>
<br>
<details>
<summary>Do we offer gluten-free dessert options?</summary>
<p><i>Yes! We have a selection of gluten-free desserts, including
almond cookies, flourless chocolate cake, and gluten-free muffins.</i></p>
</details>
<br>
<details>
<summary>How do we ensure quality in our desserts and
snacks?</summary>
<p><i>We source the finest ingredients, use traditional recipes, and
focus on small-batch preparation for every treat we offer.</i></p>
</details>
</aside>
</article>
<hr>
<article id="menu">
<h2>Our Menu!!</h2>
<table>
<caption>Cafe Menu</caption>
<thead>
<tr>
<th>Items</th>
<th scope="col">Flaovurs</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" rowspan="4">COFFEE</th>
<td>Esprresso</td><td>$3.00</td>
</tr>
<tr>
<td>Cappuccino</td><td>$4.50</td>
</tr>
<tr><td>Americano</td><td>$3.50</td></tr>
<tr><td>Mocha</td><td>$4.75</td></tr>
<tr><th scope="row" rowspan="4">Desserts</th>
<td>Chocolate Brownie</td>
<td>$2.50</td></tr>
<tr>
<td>Muffins</td>
<td>$3.25</td>
</tr>
<tr>
<td>Cheese Cake</td><td>$4.50</td>
</tr>
<tr><td>Triamsiu</td><td>$5.00</td></tr>
<tr>
<th scope="row" rowspan="3">Snacks</th>
<td>Sandwich</td><td>$5.00</td>
</tr>
<tr><td>Mixed Nuts</td><td>$3.00</td></tr>
<tr><td>Granola Bar</td><td>$2.00</td></tr>
</tbody>
<tfoot><tr>
<td colspan="3">Chips &amp; Cookies $2.00</td>
</tr></tfoot>
</table>
</article>
<p><a href="#">Back To Top</a></p>
</main>
<hr>
<footer>
<p>Copyright &copy; <strong>The Aura Shop</strong></p>
</footer>
</body>
</html>
PAGE:2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="description" content="Store hours for The Aura Cafe">
<title>TAC Hours</title>
<link rel="icon" href="bread-640x247.jpg" type="image/x-icon">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>Timings</h1>
<nav>
<ul>
<li><a href="/">Home</a>/li>
<li><a href="/#about">About<abbr title="The Aura
Cafe">TAC</abbr></a></li>
<li><a href="/#menu">Our Menu</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
<figure>
<!--uploading an image on the page which contains link of the pic and alt
shows the name during unloaded and size of the image for clear
understanding-->
<img src="coffee_640x247.jpg" alt="Coffee Beans" title="We love
Coffee!!" width="640" height="247">
<figcaption>COFFEE</figcaption>
</figure>
</header>
<hr>
<main>
<p>WE OPEN 7 DAYS A WEEK!</p>
<dl>
<dt>Sunday-Thursday</dt>
<dd>11am-9pm</dd>
<dt>Friday-Saturday</dt>
<dd>11am-11pm</dd>
</dl>
<p>
<a href="#">Back To Top </p> </main> <hr>
<footer>
<p>Copyright &copy; The aura Shop</p>
</footer>
</body>
</html>
PAGE:3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Rishika Arisetty">
<meta name="description" content="Contact Information for The Aura Cafe">
<title>The Aura Cafe</title>
<link rel="icon" href="bread-640x247.jpg" type="image/x-icon">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>Contact Us!</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/#about">About<abbr title="The Aura Cafe">TAC</abbr></a></li>
<li><a href="/#menu">Our Menu</a></li>
<li><a href="hours.html">Store Hours</a></li>
</ul>
</nav>
<figure>
<!--uploading an image on the page which contains link of the pic and alt shows the
name during unloaded and size of the image for clear understanding-->
<img src="coffee_640x247.jpg" alt="Coffee Beans" title="We love Coffee!!"
width="640" height="247">
<figcaption>COFFEE</figcaption>
</figure>
</header>
<hr>
<main>
<section>
<h2>Our Contact Form</h2>
<form action="https://httpbin.org/get" method="get">
<fieldset>
<legend>Send Us A Message</legend>
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="your name" required>
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="your mail" required>
</p>
<p>
<label for="message">Your Message:</label>
<br>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Your
message..."></textarea>
</p>
</fieldset>
<button type="submit">Send</button>
<button type="reset">Reset</button>
</form>
</section>
<section>
<h2>Our loacation:</h2>
<address>
Chodavaram,<br>
Anakapalli,<br>
phone: <a href="tel:+919876543210">9876-543-210 ,</a><br>
pincode:531036
</address>
</section>
</main>
<hr>
<footer>
<p>Copyright &copy; The aura Shop</p>
</footer> </body> </html>

You might also like