INDEX Internship Report

WEB PROGRAMMING
Including HTML CSS PHP WORDPRESS

By KALAVATI TECHNOLOGIES
CHHATRAPATI SAMBHAJINAGAR

STUDENT NAME:- Rudrawar Anushka Shailesh

COLLEGE NAME:- GOVERNMENT POLYTECHNIC NANDED
 GOVERNMENT POLYTECHNIC NANDED
INFORMATION TECHNOLOGY

Date: [05/06/2024 ]

Internship Daily Report

Student Name: Rudrawar Anushka Shailesh

Roll no: 936

HOD: S.N.Dhole

Guide Name: Mr.Nitin Nikam

Documentation:
Status of activities planned in [Current Session]

➢ Date • Description ✓ Status

05/06/2024 Intro of HTML. ✓ Complete

Understanding
Internet.
What is Website?

06/06/2024 Learn HTML ✓ Complete

structure
Assignment
Installation of
notepad++ IDE

07/06/2024 Holiday ✓ Complete

08/06/2024 Holiday ✓ Complete

09/06/2024 Holiday ✓ Complete

10/06/2024 HTML table tag ✓ Complete

HTML table code
structure
Examples
HTML Fonts
11/06/2024 Practice Questions ✓ Complete

12/06/2024 Marquee Tag and ✓ Complete

it’s attributes
HR tag
BR tag
Adding Image into
HTML document.
Adding Audio to
HTML document
Adding you tube
videos to HTML
document.

✓
✓

✓
Date: 05/06/2024

Introduction to HTML.

HTML Stands For Hypertext Markup Language.

It is the most basic language, and simple to learn and modify. It is a combination of both
hypertext and markup language. It contains the elements that can change/develop a web
page’s look and the displayed contents. Or we can say that HTML creates or defines the
structure of web pages. We can create websites using HTML which can be viewed on internet-
connected devices like laptops, android mobile phones, etc. It was created by Tim Berners-Lee
in 1991.

Hypertext: Text that is not restricted to a sequential format and that includes links to other text
is called Hypertext. The links can connect online pages inside a single or different website.

Markup Language: Markup Language is a language that is interpreted by the browser and it
defines the elements within a document using “tags”. It is human-readable, which means that
markup files use common words rather than the complicated syntax of programming
languages.

Use of HTML: HTML ) is the code that is used to structure a web page and its content. For
example, content could be structured within a set of paragraphs, a list of bulleted points, or
using images and data tables.
Date: 06/06/2024

HTML Basic learnings and structure

Html used predefined tags and attributes to tell the browser how to display content, means in
which format, style, font size, and images to display. Html is a case insensitive language. Case
insensitive means there is no difference in upper case and lower case ( capital and small letters)
both treated as the same, for r example ‘D’ and ‘d’ both are the same here.

An HTML Document is mainly divided into two parts:

HEAD: This contains the information about the HTML document. For Example, the Title of the
page, version of HTML, Meta Data, etc.

BODY: This contains everything you want to display on the Web Page.

Ex.; Structure of HTML code

Simple HTML Code

Output:
Basic HTML Tags:
Assignment : 1

Q1: Are the HTML tags and elements are same thing ?
Ans: HTML tags and elements are related but distinct concepts in HTML.

1. HTML Tags: Tags are the building blocks of HTML. They are used to mark the start and
end of an HTML element. Tags are enclosed in angle brackets, with the opening tag
indicating the beginning of an element (e.g., `<p>`) and the closing tag indicating the end
(e.g., `</p>`). Some tags do not have a closing counterpart, known as self-closing tags
(e.g., `<img />`).
2. HTML Elements: An element consists of the opening tag, the content (if any), and the
closing tag. For example, in the element `<p>Hello, World!</p>`, `<p>` is the opening
tag, `Hello, World!` is the content, and `</p>` is the closing tag. Together, they form a
paragraph element.

In summary, tags are the markers that define the start and end of an element, while the
element includes the tags and the content they enclose.

Q2: What are tags and attributes in HTML?

Ans: In HTML, tags and attributes are fundamental components used to create and structure
web content.

HTML tags:

HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left
to right. HTML tags are used to create HTML documents and render their properties. Each
HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.

Some basic tags in HTML are ,

• Unclosed HTML tags : <br>,<hr>.

 • HTML link tags : <a> and <base>.

• HTML text tags : <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>,
<acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>,
<kbd>, <pre>, <samp>, <var> and <br>.

• HTML list tags : <ul>, <ol>, <li>, <dl>, <dt> and <dd>.

• HTML image and object tags : <img>, <area>, <map>, <param> and <object>.

HTML attributes:

HTML attributes give additional information about the HTML elements and are always specified
in the start tag. In our previous blog on HTML tags, we learned about different tags, such as
paragraph tag <p> and image tag <img>, in their simplest form.

Syntax., <tag attribute_name=”attribute_value”>Some content…</tag>

Ex., <p style=” background:lightblue; color:navy;”>Style attribute in HTML.</p>

Commonly used HTML attributes are

• Style attributes.
• Width and height attributes.
• Alt attributes.
• Src attributes.
• Href attributes.

Q3: What are HTML entities?

Ans: The HTML entities are used to display reserved characters (characters that are used in
HTML code), special characters, or invisible characters.

<p>This is a &lt;p&gt; tag.</p>

Output: This is a <p> tag.

Here, &lt; and &gt; are the HTML entities used to display < and > respectively.If we were to use
the <p> tag instead of &lt;p&gt; the browser would read it as a tag. Hence to display <p> we
need to use &lt; and &gt; instead of < and > respectively.

HTML entities are represented by either their name or their number.

 • Entity names : We use &entity_name; to add reserved characters using Entity names.
For example,
&cent; would be displayed as ¢
• Entity number : We use &#entity_number; to add reserved characters using Entity
number. For example, &#162; would also be displayed as ¢
All entity names and numbers start with an & and end with an ;
• Special Characters: Special characters are characters that are not available on a general
keyboard like ®, ©, ¢, etc.We use HTML entities to add special characters to HTML
documents.
<footer> &copy; 2024 all rights reserved. </footer>
Output: , ©2024 all rights reserved.

Some important HTML entities:

Q4: Describe HTML layout structure.
Ans: HTML Layout

HTML layouts are the backbone of web pages, structuring content for user-friendly
navigation. They ensure organized presentation and enhance user experience. This
guide explores elements and techniques vital for crafting effective HTML layouts.

<header> - Defines a header for a document or a section

<nav> - Defines a set of navigation links

<section> - Defines a section in a document

<article> - Defines an independent, self-contained content

<aside> - Defines content aside from the content (like a sidebar)

<footer> - Defines a footer for a document or a section

<details> - Defines additional details that the user can open and close on demand

<summary> - Defines a heading for the <details> element

Q5: Explain list elements in HTML. OL, UL, DL.
Ans: An HTML list is a record of related information used to display the data or any information
on web pages in the ordered or unordered form.

OL: Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will
be marked with numbers by default:

Ex., <!DOCTYPE html>

<html>

<body>

<h2>An ordered HTML list of Programming languages</h2>

<ol>

<li>C</li>

<li>C++</li>

<li>Java</li>

<li>Python</li>

<li>Django</li>

</ol>

</body>

</html>

Output:
UL: Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items
will be marked with bullets (small black circles) by default

Ex., <!DOCTYPE html>

<html>

<body>

<h2>An unordered HTML list of primary colors</h2>

<ul>

<li>Red</li>

<li>Green</li>

<li>Blue</li>

</ul>

</body>

</html>

Output:
DL: Description List

A description list is a list of terms, with a description of each term.The <dl> tag defines the
description list, the <dt> tag defines the term (name), and the <dd> tag describes each term

Ex., <!DOCTYPE html>

<html>

<body>

<h2>A Description List</h2>

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

</body>

</html>

Output:
Q6: Explain Steps of installation of notepad++.
Ans:

Step 1: Visit the official Notepad++ website on any web browser. Click on Download Notepad++
v8.1.9.3

Step 2: On the next webpage, different installer files are listed, click on the Download button.
Downloading of the executable file will start shortly. It is a small 4.19 MB file that will hardly
take a minute.

Step 3: Now check for the executable file in downloads in your system and run it.
Step 4: It will prompt confirmation to make changes to your system. Click on Yes.

Step 5: Next screen is of selecting language, click OK

Step 6: Setup screen will appear, click on Next.

Step 7: The next screen will be of License Agreement, click on I Agree.

Step 8:The next screen will be of installing location so choose the drive which will have
sufficient memory space for installation. It needed a memory space of 11.3 MB.
Step 9: Next screen is of choosing components, all components are already marked so don’t
change anything just click on the Next button.

Step 10: Next screen is to create a desktop icon so check the box and click install. The
installation will be completed in a few seconds
Step 11: Click on Finish to finish the installation process.

Notepad++ is successfully installed on the system and an icon is created on the desktop
Q7 : Self Task.
Ans: Café Menu

<html>

<body>

<h2> India café </h2>

<h1> welcome to the eatery universe and enjoy yummy food</h1>

<p>food menu</p>

<ul>

<li>Coffee</li>

<ol>

<li>Choco frolics</li>

<li>Thick cold coffee</li>

<li>Frappe</li>

<li>Latte</li>

<li>Filter coffee</li>

</ol>

</ul>

<ul>

<li>Grills</li>

<ol>

<li>Plain cheese grill</li>

<li>Corn cheese </li>

<li>Paneer cheese grill</li>

 <li>Cheese capsicum grill</li>

<li>veggies cheese grill</li>

</ol>

</ul>

<ul>

<li>Pizza</li>

<ol>

<li>Cheese burst pizza</li>

<li>Cheesy vegetable pizza</li>

<li>Margherita pizza</li>

<li>Pesto pizza</li>

<li>Classic pizza</li>

</ol>

</ul>

</body>

</html>

Output:
Date: 10/06/2024

HTML Table tag

HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags. HTML tables are used to manage the layout of the page e.g. header
section, navigation bar, body content, footer section etc. But it is recommended to use div tag
over table to manage the layout of the page.

HTML Table tags and their Purpose

Table Format

Code structure of HTML Table

Example.,
<html>

<table border=”1” >

<tr>

<th>Name</th>

<th>Age</th>

<th>Country</th>

</tr>

<tr>

<td>MS Dhoni</td>

<td>42</td>

<td>India</td>

</tr>

<tr>

<td>Joe Root</td>

<td>35</td>

<td>England</td>

</tr>

<tr>

<td>Rachin Ravindra </td>

<td>24</td>

<td>New-Zealand</td>

</tr>

</table>
</html>

Output:
Learn Font Family
Fonts play a very important role in making a website more user friendly and increasing content
readability. Font face and color depends entirely on the computer and browser that is being
used to view your page but you can use HTML <font> tag to add style, size, and color to the text
on your website. You can use a <basefont> tag to set all of your text to the same size, face, and
color.

HTML font tag is having three attributes called size, color, and face to customize your fonts. To
change any of the font attributes at any time within your webpage, simply use the <font> tag.
The text that follows will remain changed until you close with the </font> tag. You can change
one or all of the font attributes within one <font> tag.

Font Colour:
<!DOCTYPE html>

<html>

<body>

<p style="color: red">This is a paragraph.</p>

<p style="color: blue">This is another paragraph.</p>

</body>

Output:

Font Name:
<!DOCTYPE html>

<html>

<body>

<p style="font-family:verdana">This is a paragraph.</p>

<p style="font-family: ‘Courier New'">This is another paragraph.</p>

</body>

</html>

Output:

Font Size:
<!DOCTYPE html>

<html>

<body>

<p style=”font-size:30px”>This is a paragraph.</p>

<p style=”font-size:11px”>This is another paragraph.</p>

</body>

</html>

Output:
• Task 1

Add index to table containing friends data that is name and contact no.

Source Code:
<!DOCTYPE html>

<html>

<head>

<title> Friend Information </title>

<body>

<center>

<h3 align ="center"><b> Friends Contact list</b></h3>

<table border ="4" bgcolor ="#FFC0CB">

<tr bgcolor = cyan >

<th><p style ="font-family : tahoma;font-size :15px;color : blue ">

Sr.No</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : blue "> Friend's

Name</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : blue "> Contact

Number's</p></th>

</tr>

<tr>

<td> 01 </td>

<td> smriti Mandhana </td>

<td> 8977563402</td>

</tr>
<tr>

<td> 02 </td>

<td> Shreyanka Patil</td>

<td> 9537772201</td>

</tr>

<tr>

<td> 03 </td>

<td> Richa Ghosh </td>

<td> 7898752201</td>

</tr>

<tr>

<td> 04</td>

<td> Radha Yadav </td>

<td> 9035689201</td>

</tr>

<tr>

<td> 05 </td>

<td> Pooja Vastrakar </td>

<td> 5678219881</td>

</tr>

<tr>

<tr>

<td> 06</td>

<td> Harmanpreet Kaur </td>

<td> 9997521131</td>

</tr>

<tr>

<td> 07 </td>

<td> Deepti Sharma </td>

<td> 9882387385</td>

</tr>

<tr>

<td> 08 </td>

<td> Shefali Varma </td>

<td> 9834671201</td>

</tr>

<tr>

<td> 09 </td>

<td> Renuka Singh </td>

<td> 9340937652</td>

</tr>

<tr>

<td> 10 </td>

<td> Asha Shobhana </td>

<td> 8901379310</td>

</tr>

</table>

</body>
</head>

</html>

Output:
 • Task 2

Create your Marksheet using table tag

Source Code:
<!DOCTYPE html>

<html>

<head>

<title> 10 th Marksheet</title>

</head>

<body>

<center>

<table border = 2 bordercolor ="black" bgcolor ="lightpink" cellspacing =0

cellpadding=0 width =30% >

<tr align ="center" >

<th colspan =5><font face = Calibari ;font size =4>Maharashtra State Board

of<br> Secondary and Higher Secondary Education ,Pune.</font><br>

<font face =Arial ; font size =2 > <br>SECONDARY SCHOOL CERTIFICATE

EXAMINATION -CERTIFICATE</FONT><font size =2><br> Candidate's Full Name( Surname

first)</font><br>

<h4 align="center"><B>RUDRAWAR ANUSHKA SHAILESH <B></H4>

<H6> CANDIDATE MOTHER NAME :TRUPTI</h6>

<tr BGCOLOR ="SILVER">

<th>Divisional Board</th>

<th> Seat No</th>

<th> centre NO</th>

<th> School No</th>

<th> Sr.No of certificate</th>

</tr>

<tr>

<td>LATUR</td>

<td> L045037</td>

<td> 5014</td>

<td> 58.01.045</td>

<td> 005024</td>

</tr>

<tr align="center">

<td colspan=8>

<tr bgcolor ="silver">

<th>Main subjects</th>

<th>Max.Marks</th>

<th> Min.marks</th>

<th> Marks Obtained</th>

<th> Marks in words </th>

</tr>

<tr>

<tr>

<td>01 MARATHI(1ST LANG)</td>

<td>100</td>

<td> 35</td>
<td>097</td>

<td>NINETY SEVEN</td>

</tr>

<tr>

<td>27 SANSKRIT(2/3 LANG)</td>

<td>100</td>

<td> 35</td>

<td>100</td>

<td>ONE HUNDRED</td>

</tr>

<tr>

<td>17 ENGLISH(2/3 LANG)</td>

<td>100</td>

<td> 35</td>

<td>88</td>

<td>EIGHTY EIGHT</td>

</tr>

<tr>

<td>71 MATHEMATICS</td>

<td>100</td>

<td> 35</td>

<td>82</td>

<td>EIGHTY TWO</td>
</tr>

<tr>

<td>72 SCIENCE & TECHNOLOGY</td>

<td>100</td>

<td> 35</td>

<td>100</td>

<td>ONE HUNDRED</td>

</TR>

<tr>

<td> SOCAIL SCIENCE</td>

<td>100</td>

<td> 35</td>

<td>97</td>

<td>NINETY SEVEN</td>

</tr>

<tr>

<td> TOTAL MARKS</td>

<td>500</td>

<td> 175</td>

<td>482+05</td>

<td>FOUR HUNDRED AND EIGHTY SEVEN</td>

</tr>

<tr align =center>

Output:
 • Task 3

Self task : Indian t20i 2024 world cup squad

Source Code :

<!DOCTYPE html>

<html>

<head>

<title> T20i World Cup Squad 2024 <br> Indian Cricket Team </title>

<body>

<center>

<h3 align ="center"><b> T20i World Cup Squad 2024 <br> Indian Cricket Team </b></h3>

<table border ="4" bgcolor ="#DDA0DD">

<tr bgcolor = yellow >

<th><p style ="font-family : tahoma;font-size :15px;color : Red">

Sr.No</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : Red ">

Player Name</p> </th>

<th><p style ="font-family : tahoma;font-size :15px;color : Red "> Playing Role </p></th>

</tr>

<tr>

<td> 01 </td>

<td> Rohit Sharma (C) </td>

<td> Batter</td>

</tr>

<tr>
<td> 02 </td>

<td> Virat Kohli</td>

<td> Batter</td>

</tr>

<tr>

<td> 03 </td>

<td> Suryakumar Yadav </td>

<td> Batter</td>

</tr>

<tr>

<td> 04</td>

<td> Yashaswi Jaiswal </td>

<td> Batter </td>

</tr>

<tr>

<td> 05 </td>

<td> Hardik Pandya (VC) </td>

<td> All-rounder </td>

</tr>

<tr>

<td> 06</td>

<td> Rishabh Pant (Wk) </td>

<td> Batter , Wicket-Keeper</td>

</tr>
<tr>

<td> 07 </td>

<td>Sanju Samson (Wk) </td>

<td> Batter , Wicket-Keeper</td>

</tr>

<tr>

<td> 08 </td>

<td> Shivam Dube </td>

<td> All-rounder </td>

</tr>

<tr>

<td> 09 </td>

<td> Ravindra Jadeja </td>

<td> All-rounder</td>

</tr>

<tr>

<td> 10 </td>

<td> Axar Patel </td>

<td> All-rounder</td>

</tr>

<tr>

<td> 11 </td>

<td> Kuldeep Yadav </td>

<td> Bowler</td>
</tr>

<tr>

<td> 12 </td>

<td> Yuzvendra Chahal </td>

<td> Bowler</td>

</tr>

<tr>

<td> 13 </td>

<td> Arshdeep Singh</td>

<td> Bowler</td>

</tr>

<tr>

<td> 14 </td>

<td> Jasprit Bumrah </td>

<td> Bowler</td>

</tr>

<tr>

<td> 15 </td>

<td> Mohd. Siraj </td>

<td> Bowler</td>

</tr>

</table>

</body>

<b>Reserves</b>: Shubman Gill, Rinku Singh, Khaleel Ahmed, Avesh Khan.

</head>

</html>

Output:
Date: 11/06/2024

Practice Questions:
Q1: Building the Basics : The Bare Bones Website

Start with a simple HTML document structure: the <!DOCTYPE html>, <html>,
<head>, <title>, <body>, and closing tags.

Experiment with text formatting using heading (<h1> to <h6>), paragraph (<p>),
And line break (<br>) tags.

Add an image (<img>) with a source (src) attribute and explore alternative text
(alt) for accessibility.

Answer:
<!DOCTYPE html>

<html>

<head>

<title> Introduction To The Legends</title>

</head>

<body style =”background-color : lightblue”>

<center>

<h2 style =”color : Magenta”><b>Introduction To The Legends<b></h2>

<h2 style = “color: brown”><b> VIRAT KOHLI </b></h2>

<img src =”Phone/Pictures/Screenshots/ Screenshot 2024-06-12-15-38-47-99 680d0

3679600f7af0b4c700c6b270fe7.jpg” width =”185” height =”185” border=”5”>

<p>is an Indian international cricketer and the former captain of the Indian national cricket
team.He is a right-handed batsman and an occasional medium-fast bowler. He currently
represents Royal Challengers Bengaluru in the IPL and Delhi in domestic cricket. Kohli is widely
regarded as one of the greatest batsmen of all time. He holds the record as the highest run-
scorer in IPL, ranks second in T20I, third in ODI, and stands as the fourth-highest in international
cricket.<br>He also holds the record for scoring the most centuries in ODI cricket and stands
second in the list of most international centuries scored. Kohli was a key member of the Indian
team that won the 2011 Cricket World Cup, 2013 ICC Champions Trophy, and captained India to
win the ICC Test mace three consecutive times in 2017, 2018, and 2019.</p>

</body>

</html>

Output:
Q2: Creating Structures with Headings and lists.

Organize content with heading tags (<h1> to <h6>) to create a hierarchy. Use
ordered (<ol>) and unordered (<ul>) lists to present Items sequentially or non-
sequentially, respectively. Practice nesting lists (<li> within <ul> or <ol>) for more
complex structures.

Answer
<!DOCTYPE HTML>

<html>

<head>

<title> Headings</title>

<body style = “ Background-color : #ff9999” >

<h1> PROGRAMMING LANGUAGES </h1>

<h1> Java(Heading H1)<h1>

<h2> Python(Heading H2)<h2>

<h3> Angular(Heading H3)<h3>

<h4> C++(Heading H4)<h4>

<h5> C(Heading H5)<h5>

<h6> C#(Heading H6)<h6>

</body>

</html>

Output:
Use Ordered (<ol>) and unordered (<ul>) lists to present items sequentially or

Non-sequentially, respectively.

Practice nesting lists (<li> within <ul> or <ol>) for more complex structures.

Answer:
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Food Items</title>

</head>

<body>

<h1>Food Items</h1>

<h2>Ordered List of Food Categories</h2>

<ol>

<li>Fruits</li>

<li>Vegetables</li>

<li>Dairy</li>

<li>Meats</li>

<li>Grains</li>

</ol>

<h2>Unordered List of Food Items</h2>

<ul>

<li>Fruit
<ul>

<li>Apple</li>

<li>Banana</li>

<li>Orange</li>

</ul>

</li>

<li>Vegetables

<ul>

<li>Carrot</li>

<li>Broccoli</li>

<li>Spinach</li>

</ul>

</li>

<li>Dairy

<ul>

<li>Milk</li>

<li>Cheese</li>

<li>Yogurt</li>

</ul>

</li>

<li>Meats

<ul>

<li>Chicken</li>

<li>Beef</li>
 <li>Pork</li>

</ul>

</li>

<li>Grains

<ul>

<li>Rice</li>

<li>Bread</li>

<li>Pasta</li>

</ul>

</li>

</ul>

</body>

</html>

Output:
Q3: Linking Up : Navigation with Hyperlinks.

Create links (<a>) to connect web pages within your site or to external websites.

Set the href attribute to specify the destination URL.

Optionally, use the title attribute to provide additional information for screen
Readers or tooltips.

Answer:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>External Links Example

</title>

</head>

<body>

<h1>Welcome to the External Links Page</h1>

<p>Here are some useful external links:</p>

<a href="https://www.google.com" target="_blank">Google</a><br>

<a href="https://www.msbte.com" target="_blank">MSBTE</a><br>

<a href="https://www.cricbuzz.com" target="_blank">Cricbuzz</a>

</body>

</html>

Output:
Q4: Building a simple resume .

Showcase your skills and experience by creating a basic resume or portfolio

Website.

Use heading tags for sections like “Education,” “Skills,” and “Projects.”

Include unordered lists to display skills or project details.

Optionally, add images and links to further enhance your portfolio.

Answer:
<!DOCTYPE html>

<html>

<head>

<title>Resume - Engineering Student</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff;

margin: 0;

padding: 20px;

header {

background-color: #4682b4;

color: white;

padding: 10px 0;

text-align: center;

h2 {

color: #4682b4;

border-bottom: 2px solid #4682b4;

padding-bottom: 5px;

table {
 width: 100%;

border-collapse: collapse;

margin-bottom: 20px;

th, td {

border: 1px solid #ddd;

padding: 8px;

th {

background-color: #f2f2f2;

</style>

</head>

<body>

<header>

<h1>Anushka Rudrawar</h1>

<p>Diploma in Indormation Technology Student</p>

</header>

<section>

<h2>Contact Information</h2>

<table>

<tr>

<th>Email</th>

<td>anushka@example.com</td>
 </tr>

<tr>

<th>Phone</th>

<td>+123 456 7890</td>

</tr>

<tr>

<th>Address</th>

<td>456 Edden Towers, Wakad, Pune, INDIA</td>

</tr>

</table>

</section>

<section>

<h2>Education</h2>

<table>

<tr>

<th>Degree</th>

<th>Institution</th>

<th>Year</th>

</tr>

<tr>

<td>Diploma in Information Technology </td>

<td>Government Polytechnic,Nanded</td>

<td>2022</td>

</tr>
 </table>

</section>

<section>

<h2>Projects</h2>

<ul>

<li><strong> Web Designing:</strong> Developed a website for cafe menu

management.</li>

</ul>

</section>

<section>

<h2>Internships</h2>

<table>

<tr>

<th>Position</th>

<th>Company</th>

<th>Duration</th>

</tr>

<tr>

<td>Intern Engineer</td>

<td>Kalavati Technologies</td>

<td>June 2024 - Ongoing</td>

</tr>

</table>
</section>

<section>

<h2>Skills</h2>

<ul>

<li>Web developing </li>

<li>Software developing</li>

<li>Presentation Skills</li>

<li>Human Resource</li>

<li>Project Management</li>

</ul>

</section>

<h4> Thank You!</h4>

</body>

</html>

Output:
Q5: Design a fun “About me ” page .

Tell your story! Create a creative “About Me” page to introduce yourself.

Use heading tags, paragraphs, and lists to share your hobbies, interests, and
Aspirations.

Include an image or GIF to personalize your page.

Answer:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>About Me</title>

</head>

<body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f9;

color: #333;">

<header style="background-color: #4CAF50; color: white; padding: 10px 0; text-align:

center;">

<h1>About Me</h1>

</header>

<div style="width: 80%; margin: 20px auto;">

<div style="background-color: #fff; padding: 20px; margin-bottom: 20px; border: 1px solid
#ccc;">

<h2 style="color: #4CAF50;">Personal Information</h2>

<p>Hi, my name is Anushka . I am a Diploma student. Live in pune. I have a passion for
coding . I am a open minded person who love to play and watch cricket..</p>
 </div>

<div style="background-color: #fff; padding: 20px; margin-bottom: 20px; border: 1px solid
#ccc;">

<h2 style="color: #4CAF50;">Hobbies</h2>

<ul>

<li>watching Cricket</li>

<li> Listning Music</li>

<li> Poetry</li>

<li> Cooking </li>

</ul>

</div>

<div style="background-color: #fff; padding: 20px; margin-bottom: 20px; border: 1px solid
#ccc;">

<h2 style="color: #4CAF50;">My Favorite’s</h2>

<ul>

<li> Favourite Color : Black </li>

<li> Favourite Singer : Arijit Singh , ED sheeran.</li>

<li> Favourite Athelete:Virat Kohli </li>

<li> Favourite Song : Perfect , Shape of You</li>

<li> Favourite City : Rome </li>

<li> Favourite Cuisine: Indian cuisine </li>

</ul>

</div>

</div>

</body>
</html>

Output:
Q6: Experimenting with Tables.

Create tables (<table>, <tr>, <th>, <td>) for presenting data in a structured
Format.

Use table headers (<th>) for column labels and table data (<td>) for content.

Explore table formatting options like border style, background color, and cell
spacing and cell padding .

Answer:
<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>HTML Table Example</title>

</head>

<body>

<h2>Employee Data Table</h2>

<table border=”1” cellpadding=”8” cellspacing=”0” width=”100%”>

<tr bgcolor=”#666362”>

<th>Name</th>

<th>Age</th>

<th>Occupation</th>

</tr>

<tr bgcolor=”#93E9BE”>

<td>John Doe</td>
 <td>28</td>

<td>Software Engineer</td>

</tr>

<tr bgcolor=”#93E9BE”>

<td>Jane Smith</td>

<td>34</td>

<td>Graphic Designer</td>

</tr>

<tr bgcolor=”#93E9BE”>

<td>Emily Johnson</td>

<td>22</td>

<td>Data Analyst</td>

</tr>

<tr bgcolor=”#93E9BE”>

<td>Michael Brown</td>

<td>45</td>

<td>Project Manager</td>

</tr>

</table>

</body>

</html>

Output:
Date : 12/06/2024

Marquee Tag
The <marquee> tag in HTML is used to create a scrolling piece of text or an image. It can scroll
in various directions, such as left, right, up, or down. The most typical use was to create a
scrolling text effect where the text moved horizontally across the screen. This was often used
for news tickers or to draw attention to important information. Some websites used it to create
dynamic headers or footers, often including moving text with information like contact details or
social media links.

Marquee Tag Attributes

❖ Width : provides the width or breadth of a marquee. For example width=”10” or
width=”20%”.
❖ Height : provides the height or length of a marquee. For example height=”20” or
height=”30%”.
❖ Direction : provides the direction or way in which your marquee will allow you to
scroll. The value of this attribute can be: left, right, up, or down.
❖ Scrolldelay : provides a feature whose value will be used for delaying each jump.
❖ Scrollamount : provides value for speeding the marquee feature.
❖ Behavior : provides the scrolling type in a marquee. That scrolling can be like sliding,
scrolling, or alternate.
❖ Loop : provides how many times the marquee will loop.
❖ Bgcolor : provides a background color where the value will be either the name of the
color or the hexadecimal color code.
❖ Vspace : provides a vertical space, and its value can be like vspace=”20” or
vspace=”30%”.
❖ Hspace : provides a horizontal space, and its value can be like hspace=”20” or
hspace=”30%”.

Marquee Tag Syntax

Example :
<!DOCTYPE html>

<html lang=”en”>

<head>

<title>Marquee Example</title>

</head>

<body style=”background-color:#4B0082 ; color:#9370DB ; font-family: Arial, sans-serif; text-

align: center;”>

<marquee behavior=”scroll” direction=”left” scrollamount=”5” style=”background-

color:#9370DB; color: white; padding: 20px; border-radius: 10px; font-size: 24px;”>

Welcome to the Marquee Example!

</marquee>

</body>

</html>

Output:
HR Tag:
In HTML, <hr> tag stands for horizontal rule. HR is an HTML tag that enables us to add a
horizontal rule or a thematic break to an HTML page. Using the <hr> tag, we can divide
document sections.

The <hr> tag is an empty tag. It means that it does not require an end tag. So, you need to type
<hr> to add a horizontal line to an HTML page.

BR Tag:
The <br> tag in HTML inserts line breaks in a text. It stands for “Break”. This tag is particularly
useful when you want to create a new line within a paragraph or other element without
starting a new paragraph. The <br> tag is an empty tag, meaning it does not have a closing tag.
The <br> tag doesn’t carry any semantic meaning. It’s purely for formatting.

Example of both hr and br tags :

<!DOCTYPE html>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Simple HTML Example</title>

</head>

<body style=”background-color: green; color: darkred; font-family: Arial, sans-serif;”>

<h1>Welcome to My Webpage</h1>

<hr>

<p>This is the first section of my webpage.</p>

<p>Here is some text with line breaks:<br>

This is a new line.<br>

And this is another new line.</p>

<hr>
 <p>This is the second section of my webpage.<br>

Notice how the <hr>tag creates a horizontal line to separate sections.</p>

<hr>

<h2>Thank You for Visiting!</h2>

<p>Feel free to browse around and learn more.<br>

Have a great day!</p>

</body>

</html>

Output:
Inserting Images in Webpage
The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img>
tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

• Src – Specifies the path to the image

• Alt – Specifies an alternate text for the image

Syntax:
<img src=”url” alt=”alternatetext”>

Example :

<!DOCTYPE html>

<html>

<head>

<title>Image tag</title>

</head>

<body>

<h2>HTML image example with height and width</h2>

<img src=https://static.anu/htmlpages/images/animal.jpg height=”180” width=”300”

alt=”animal image”>

</body>

</html>

Output:
Adding Audio into the HTML webpage
The HTML <audio> tag is used to embed a media player which supports audio playback into the
HTML page. We use the HTML <audio> tag along with the <source> tag to add the audio player.

Audio Tag Attributes:

❖ Autoplay : The autoplay attribute automatically plays the audio.
❖ Controls : The control attribute allows the user to control audio playback including
volume, seeking, and pause/resume playback.
❖ Loop : The loop attribute specifies the audio to start from the beginning once it ends.
❖ Muted : The muted attribute sets the volume of the audio to 0.
❖ Src : The src attribute specifies the location of the audio file that should be played in the
audio player.
❖ Preload : The preload attribute specifies how the audio file should be loaded after the
page loads for a better user experience. It may have one of the following values:

None: Indicates that the audio should not be preloaded.

Metadata: Indicates that only audio metadata is fetched.

Audio: Indicates that the entire audio file will be loaded when the page loads.

Example:

<!DOCTYPE html>

<html>

<body bgcolor= “ red”>

<h2> Sound of Horse 🐴 <h2>

<audio controls autoplay>

<source src=”horse.mp3” type=”audio/mpeg”>

Your browser does not support the audio element.

</audio>

</body>

</html>

Output:
Adding You Tube videos into the HTML webpage
Adding a video to a webpage was a real challenge since one had to convert the videos to
different formats to make them play in all browsers. Converting videos to different formats can
be difficult and time-consuming.

Now, adding a video to a webpage has become as easy as copying and pasting and a very apt
solution to add videos to a website is using Youtube. YouTube helps to host a video for a user
so that they can be further embedded on web pages.

YouTube displays an id like “BGAk3_2zi8k“, whenever a video is saved or played. This ID is

further used as a referral for the YouTube video to be embedded in the webpage.

Steps to Add YouTube Video on a Webpage :

Step 1 : Upload the video that you want to embed on your webpage on YouTube.

Step 2 : Copy the video ID of the video.

Step 3 : Use the iframe, object, or ’embed’ element in your web page for video definition

Step 4 : Use the src attribute to point to the URL of the video.

Step 5 : Dimensions of the player can be adjusted using the width and height attributes.

Example :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Embed YouTube Video</title>

</head>
<body>

<h1>My Favorite Song</h1>

<p>Here is a video I like:</p>

<iframe width="560" height="315" src="https://www.youtube.com/embed/2Vv-BfVoq4g"

</iframe>

</body>

</html>

Output: