Scribd
Upload
17 views8 pages

Computer Workshopjob

The document describes the structure of an HTML document and some key HTML elements like headings, paragraphs, images and links. It also explains what a web browser does and provides an example HTML code for a basic portfolio homepage with different sections like about, gallery, projects etc.

Uploaded by

ayushkumar77447
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
17 views8 pages

Computer Workshopjob

The document describes the structure of an HTML document and some key HTML elements like headings, paragraphs, images and links. It also explains what a web browser does and provides an example HTML code for a basic portfolio homepage with different sections like about, gallery, projects etc.

Uploaded by

ayushkumar77447
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/ 8

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 portfolio-
Home page-
<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>
<img src=".\media\images\Linkedin_Profile_Pic.jpg" alt="My Photo" id="profile-pic">
<p>Bhavya Raj</p>
</header>
About me-
<section id="about">
<h2>About Me</h2>
<p>
Hi, I am Bhavya Raj, 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>

Gallery section-
<section id="gallery">
<h2>Photo Gallery</h2>
<div class="photo-grid">
<img src=".\media\images\Linkedin_Profile_Pic.jpg" alt="Photo 1">
<img src=".\media\images\Screenshot 2024-03-21 013642.png" alt="Photo 2">
<img src=".\media\images\Photo.jpg" alt="Photo 3">
</div>
</section>
Video section-
<section id="video">
<h2>My Video</h2>
<video src=".\media\video\my_video.mp4" alt="My Video" controls height="300px"
width="150px"></video>
</section>

My Projects-
<section id="projects">
<h2>My Projects</h2>
<div class="projects-container">
<table>
<tr>
<td><img src=".\media\images\Robotic arm.jpeg" alt="Project 2"></td>
<td>
<h3>The Robotic Arm</h3>
<p>
This was a basic project build by me for fun in which I was practicing on how to
work with arduino and servo motors.
</p>
</td>
</tr>
<tr>
<td>
<img src=".\media\images\robowar.jpeg" alt="Project 1">
</td>
<td>
<h3>ROBOWAR Robot</h3>
<p>
This is a project developed by me for Robowar competitions. It is a very powerful
robot and have almost won all the robowar competitions so far.
</p>
</td>
</tr>
<tr>
<td><img src=".\media\images\Cyborg.jpeg" alt="Project 3"></td>
<td>
<h3>Cyborg Technology</h3>
<p>
This is kinda futuristic project on which I am currently researching. I am highly
interested in working with this project.
</p>
</td>
</tr>
<tr>
</table>
</div>
</section>
Resume, Audio, Contact -
<section id="resume">
<h2>My Résumé</h2>
<a href=".\files\Bhavya Raj_CV.pdf" download>Download My Résumé</a>
</section>

<section id="audio">
<h2>My Audio Clip</h2>
<audio controls>
<source src=".\media\audio\Aam Jahe Munde _ Parmish Verma feat Pardhaan _ Desi Crew
_ Laddi Chahal.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</section>

<section id="contact">
<h2>Contact Me</h2>
<p>
Mobile No:
<a href="tel:+919905075164">+919905075164</a>
</p>
<p>
Email:
<a href="mailto:[email protected]">[email protected]</a>
</p>
<p>
Linkedin:
<a href="https://www.linkedin.com/in/bhavya-raj-1aa8692b2/">rajbhavya1011</a>
</p>
</section>
</div>

You might also like