Scribd
Upload
12 views9 pages

Job 6 (CW1)

computer workshop odf

Uploaded by

Anodit Pandey
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
12 views9 pages

Job 6 (CW1)

computer workshop odf

Uploaded by

Anodit Pandey
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/ 9

JOB: 6

HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

A Simple HTML Document


Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Start tag Element content

<h1> My First Heading

<p> My first paragraph.

<br> none

Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!
WEB BROWSER

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the
document:

HTML Page Structure


Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: The content inside the <body> section will be displayed in a browser. The content inside
the <title> element will be shown in the browser's title bar or in the page's tab.

MY HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anodit Pandey Portfolio</title>
<link rel="stylesheet" href="./styles/style.css">
<link rel="website icon" href="media/images/my.jpg" type="jpg" style="shape-rendering: auto;">
</head>
<body>
<div id="container">
<nav>
<ul>
<li ><a href="#about">About Me</a></li>
<li><a href="#video">My Video</a></li>
<li><a href="#gallery">Photo Gallery</a></li>
<li><a href="#projects">My Projects</a></li>
<li><a href="#resume">My Résumé</a></li>
<li><a href="#audio">My Audio Clip</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<header >
<a href="https://www.instagram.com/anoditpandey?igsh=bGJibnFrdWdjenln"
target="_main"><img src="./media/images/my.jpg" alt="My Photo" id="profile-pic"></a>
<p style="color:whitesmoke; text-shadow: red 1px 0px 10px;"><b>ANODIT
PANDEY</b></p>
</header>

<section id="about">
<h2><span style="color: white; text-shadow: yellow 1px 0px 10px; "><b>About
me</b></span></h2>
<p>
Hi, I am Anodit Pandey, a B.Tech student at the Faculty of Technology, University of
Delhi, specializing in Electronics and Communication Engineering (ECE). </p>

<p>
I am fueled by a passion for electronics and a love for coding. As an ECE enthusiast, I
thrive on understanding the intricacies of circuits, exploring communication protocols, and diving into
programming languages. Whether it’s designing hardware systems or writing elegant code, I’m
always up for the challenge.
Future Goals: I aspire to bridge the gap between hardware and software, creating innovative
solutions that impact real-world problems. Whether it’s developing smart devices, optimizing
communication networks, or contributing to open-source projects, I’m excited about the journey
ahead. </p>

</section>

<section id="video">
<h2><span style="color:whitesmoke; text-shadow: yellow 10px 0px 10px; "><b>My
videos</b></span></h2>
<video controls width="500" style="box-shadow:skyblue 4px 0px 30px;">
<source src="./media/video/my_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>

<section id="gallery">
<h1><span style="color:white; text-shadow: yellow 1px 0px 10px;"><b>Photos
Gallery</b></span></h1>
<div class="photo-grid">
<img src="./media/images/myphoto1.jpg" alt="Photo 1">
<img src="./media/images/myphoto2.jpg" alt="Photo 2">
<img src="./media/images/myphoto3.jpg" alt="Photo 3">
<img src="./media/images/myphoto4.jpg" alt="Photo 4">
<img src="./media/images/myphoto5.jpg" alt="Photo 5">
</div>
</section>

<section id="visit youtube">


<h2><span style="color:white; text-shadow: yellow 1px 0px 10px; box-shadow: red 1px 0px
10px; "><b>Visit my youtube</b></span></h2>
<div class="projects-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/zj70ytg08ps?
si=kex27VHysiBZrHAT" title="YouTube video player" style=" box-shadow: red 3px 0px 10px"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>
</div>
</section>

<section id="resume">
<h2><span style="color:white; text-shadow: yellow 1px 0px 10px;"><b>My
resume</b></span></h2>
<a href="./files/my resume2.pdf" target="_main" style="color: aqua; text-shadow: yellow
1px0px; cursor: pointer;">Download My Résumé</a>
</section>

<section id="audio">
<h2><span style="color:white; text-shadow: yellow 1px 0px 10px;"><b>My
audioclips</b></span></h2>
<audio controls>
<source src="./media/audio/my_audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</section>

<section id="contact">
<h2><span style="color: white; text-shadow: yellow 1px 0px 10px;"><b>Contact
me</b></span></h2>
<p style="color: white;">
Mobile No:
<a href="tel:+917275300755" style="color: aqua; text-shadow: yellow 1px 0px
10px;">+91-7275300755</a>
</p>
<p style="color: white;">
Mail to:
<a href="mailto:[email protected]" style="color: aqua; text-shadow: yellow 1px
0px 10px;"> [email protected] </a>
</p>
</section>
<section>
<a href="https://www.linkedin.com/in/anoditpandey-b34643288?lipi=urn%3Ali%3Apage
%3Ad_flagship3_profile_view_base_contact_details%3BEXj7ZEytS%2ByI1SZEtgiMAA%3D%3D"
target="_main"> <img src="media/images/linkedinn.png" width="30px" ></a>
<a href="mailto: [email protected]" target="_main"><img
src="/portfolio_website/media/images/email.png" alt="email" width="30px"> </a>
</section>
</div>

<script src="./scripts/0.js"></script>
</body>
</html>

My portfolio-
Home page-
About me-

Gallery section-
Contact Details-

You might also like