Scribd
Upload
45 views22 pages

Internship Report on HTML & CSS Training

The internship report details the experience of Netla Bala Chandra Reddy at Manac Infotech from February to May 2021, focusing on web application development using HTML and CSS. The report includes an introduction to HTML, its elements, attributes, and various modules, along with a structured agenda of topics covered each week. It concludes with an assessment section that outlines programming tasks completed during the internship.

Uploaded by

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

Internship Report on HTML & CSS Training

The internship report details the experience of Netla Bala Chandra Reddy at Manac Infotech from February to May 2021, focusing on web application development using HTML and CSS. The report includes an introduction to HTML, its elements, attributes, and various modules, along with a structured agenda of topics covered each week. It concludes with an assessment section that outlines programming tasks completed during the internship.

Uploaded by

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

INTERNSHIP REPORT

AT MANAC INFOTECH,

Attended by
Netla Bala Chandra Reddy

in partial fulfilment for the award of the degree of


Bachelor of Technology
In
ELECTRONICS AND COMMUNICATION
from 16th FEB 2021 to 20th MAY 2021

DEPARTMENT OF ELECTRONICS AND COMMUNICATION


ENGINEERING
SCHOOL OF ELECTRICAL SCIENCES
HINDUSTAN INSTITUTE OF TECHNOLOGY AND SCIENCE
PADUR 603 103

1
BONAFIDE CERTIFICATE

This is to certify that the “Internship report” submitted by N.


Bala Chandra Reddy is the work done by him and submitted
during 2020–2021 academic year, in partial fulfilment of the
requirements for the award of the degree of Bachelor of
Technology in ELECTRONICS AND COMMUNICATION ,
at MANAC INFOTECH.

HEAD OF THE DEPARTMENT INTERNSHIP COORDINATOR


[Link] [Link]

2
CERTIFICATION

3
TABLE OF CONTENT

[Link] TITLE PAGE NO

1 Introduction 5

2 Agenda 6

3 Topics 8
3.1 HTML introduction 8
3.2 HTML Basic 10
3.3 HTML Tutorial 12
3.3.1 HTML ELEMENTS 12
3.3.2 HTML ATTRIBUTES 13
3.3.3 STYLES AND FORMATTING 14

4
3.3.4 HTML CSS 14
3.3.5 LINKS,IMAGES,TABLES 16

4 Assessment 17
4.1Assessment 17

[Link]

The platform, which was founded in 2010, started out as a WordPress


blog that aggregated internships across India and articles on
education, technology and skill gap. Manac infotech launched its
online training in 2014. As of 2018, the platform had 3.5 million
students and 80,000 companies.

Services: Internship matching, online training

Founder: Sarvesh Agrawal

Industry: Education, Employment

Headquarter: Hyderabad, India

5
MANAC infotech is India's no.1 internship and training platform with
40000+ paid internships in Engineering, MBA, media, law, arts, and
other streams. The Top Internshala Courses
❖ Beginner's Trading Certification.
❖ Learn Digital Marketing.
❖ Learn How to Startup.
❖ Learn Business Communication Skills.
❖ Learn Financial Modeling and Valuation.
❖ Learn French.
❖ Learn Advanced Excel.
❖ Business Communication Skills Training.

In this Internship, I had learnt about Programming with web


application frontend technologies like HTML and CSS and designing
the web application. Such that 12weeks of internship has many topics
and did mini projects and final assessment in the end of internship i.e
on 13th week.

2. AGENDA

Week 1 - HTML introduction, Basics


Week 2 - HTML Elements, Attributes, Headings
Week 3 - HTML Paragraphs, Styles
Week4 - HTML Formatting, Quotations
Week 5 - HTML Comments, Colors
Week 6 - HTML CSS and links
Week 7 - HTML images, Favicon, Tables
Week 8 - HTML Lists and examples
Week 9 - HTML Block& Inline
Week 10 - HTML Classes, ID, Iframes

6
Week 11 - HTML JavaScript
Week 12 - HTML File paths, Layout, Responsive
Week 13 - Assesment

3. Topics
3.1 HTML INTRO

● 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.

7
Explanation of example :

● 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)

8
● 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

3.2 Features of HTML

HTML definition is Hyper Text Markup Language and it is a markup


language. A markup language is a set of markup tags and the tags
describe document content. HTML documents contain HTML tags
and plain text. HTML documents are also called web pages.

–
1. HTML Tags:
HTML markup tags are usually called HTML tags and tags are
keywords surrounded by angle brackets like <html>. These tags are
also called as basic html elements. HTML tags normally come in pairs

9
like <b> and </b>. The first tag in a pair is the start tag, the second tag
is the end tag. The end tag is written like the start tag, with a forward
slash before the tag name. Start and end tags are also called opening
tags and closing tags. By using these tags we can create a simple
HTML page very easily.

2. HTML Elements:

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


tag.

HTML Elements Example

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

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

3. Attributes :
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attributes :
<a href="My_Fam.com">Visit W3Schools</a>
4. HTML styles :

10
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.

5. HTML COLORS:

HTML colors are specified with predefined color names,


or with RGB, HEX, HSL, RGBA, or HSLA values.

6. HTML CSS:

Cascading Style Sheets (CSS) is used to format the layout of a


webpage.

With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what

11
background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!

CSS can be added to HTML documents in 3 ways:

● Inline - by using the style attribute inside HTML elements


● Internal - by using a <style> element in the <head> section
● External - by using a <link> element to link to an external CSS file

7. HTML LINKS:
Links are found in nearly all web pages. Links allow users to click
their way from page to page.
HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into
a little hand.

8. HTML IMAGES:
Images can improve the design and the appearance of a web page.
Example code :

12
HTML Images Syntax

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

9. HTML Class:
The HTML class attribute is used to specify a class for a HTML
element.
Example for using the class attribute:

13
10. HTML Tables:
HTML tables allow web developers to arrange data into rows and
columns.

3.3 Different HTML Modules:


3.3.1 HTML Forms

14
An HTML form is used to collect user input. The user input is most
often sent to a server for processing.

The <input> Element :

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on


the type attribute.

Form Attribute – The action attribute defines the action to be performed


when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on
the submit button.

Form Elements – The action attribute defines the action to be


performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user
clicks on the submit button.

Input Types – <input type="submit"> defines a button


for submitting form data to a form-handler.

The form-handler is typically a server page with a script for


processing input data.

3.3.2 HTML Graphics

15
1) HTML Canvas Graphics

The HTML <canvas> element is used to draw graphics on a web


page.

The graphic to the left is created with <canvas>. It shows four


elements: a red rectangle, a gradient rectangle, a multicolor rectangle,
and a multicolor text.
2) HTML SVG Graphics

SVG defines vector-based graphics in XML format.

● SVG stands for Scalable Vector Graphics


● SVG is used to define graphics for the Web
● SVG is a W3C recommendation

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and
graphic images.

3.3.3 HTML Media

16
Multimedia on the web is sound, music, videos, movies, and
animations.
Multimedia comes in many different formats. It can be almost
anything you can hear or see, like images, music, sound, videos,
records, films, animations, and more.
Web pages often contain multimedia elements of different types and
formats.

Browser Support

The first web browsers had support for text only, limited to a single
font in a single color.

Later came browsers with support for colors, fonts, images, and
multimedia!

3.3.4 HTML APIs

The HTML Geolocation API is used to locate a user's position.


Locate the User's Position

The HTML Geolocation API is used to get the geographical position


of a user.

Since this can compromise privacy, the position is not available unless
the user approves it.

4. Assessment

17
4.1 Assessment

Assessment is done for the Programming Questions and quiz.


Programming questions:
a. Write a program which accepts empty elements.
b. Program to get a sentence with different colour and size.
c. Create a hyper Link
d. Write a code to display an image in webpage
e. Create a form which accepts first and last name and
submit button

(a)<html>
<body>
<p>This is a <br> paragraph with a line break.</p>

</body>
</html>

Output :

(b) <html>
<body>

18
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>

Output :

© <html>

19
<body>

<h1>HTML Links</h1>

<p><ahref="[Link]
[Link]!</a></p>

</body>
</html>

Output :

(d)
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>

20
Output :

(e)
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>

21
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>
</body>
</html>

Output :

22

Common questions

Powered by AI

The <canvas> element allows developers to draw graphics programmatically using JavaScript, making it ideal for dynamic and interactive content like games and data visualizations . On the other hand, <svg> (Scalable Vector Graphics) is used for defining static yet scalable graphic content directly in HTML using XML syntax . SVG is well-suited for applications requiring resolution-independent images like logos and icons, whereas <canvas> is more flexible for real-time rendering. Both play crucial roles in modern web design by enhancing visual elements and user interaction.

Semantic HTML tags like <article>, <footer>, or <header> provide meaningful descriptions of the information within tags, improving the accessibility and readability of web pages for both machines and humans. For accessibility, semantic tags help screen readers and other assistive technologies to understand and navigate the content more effectively . In terms of SEO, search engines can better index and rank web pages when they can clearly understand the structure and importance of the content on a webpage . Thus, semantic HTML enhances both the user experience and search engine visibility.

HTML elements form the fundamental building blocks of web pages, defining the structure and content such as headings, paragraphs, and links. These elements are denoted by tags which usually come in pairs, including a start tag and an end tag . Attributes provide additional information about HTML elements, specifying details like links' destinations with 'href' or alternative text for images with 'alt' . This interaction between elements and attributes allows browsers to correctly render and link different parts of a web page.

CSS, or Cascading Style Sheets, greatly enhances HTML by providing control over the layout and style of web pages. While HTML is used to structure content by defining elements such as headings and paragraphs, CSS allows for the separation of content from design, enabling developers to apply consistent styling across multiple pages . CSS allows control over text color, font, layout, and spacing, and adapts elements to different device sizes . This separation of structure and style improves maintainability and efficiency in web design.

Web forms are vulnerable to a range of security threats such as cross-site scripting (XSS) and SQL injection. These attacks exploit vulnerabilities in forms to inject malicious code into web applications . To counter these, developers should implement validation and sanitization of input data server-side and client-side. Utilizing HTTPS can prevent interception and tampering with form data. Furthermore, employing CAPTCHA systems can deter automated attacks, and implementing Content Security Policies (CSP) can restrict the sources from which content is loaded, minimizing the risk of code injection.

The <!DOCTYPE html> declaration is crucial in HTML documents as it specifies the version of HTML being used to ensure proper rendering by browsers. It is especially significant for HTML5 documents where it declares that the document conforms to the HTML5 standard . This declaration helps browsers to operate in 'standards mode' rather than 'quirks mode,' which distinguishes between stricter and more lenient rendering behaviors. Thus, the correct Doctype ensures consistent and expected page rendering across different browsers.

Hypertext links, or hyperlinks, are foundational to the World Wide Web's interconnectivity, enabling navigation between web pages and resources across the internet . Effective implementation of hyperlinks involves using descriptive anchor text that clearly conveys the link's purpose, ensuring usability and accessibility. It is also best practice to ensure that links open in the same window unless specified, to prevent disorientation. Additionally, links should be maintained to avoid 'dead' links, which can deter users and SEO performance.

External CSS, linked through a separate file, promotes reusability and reduces duplication by allowing multiple HTML documents to share the same stylesheet, simplifying maintenance and loading efficiency . Internal CSS, embedded within the HTML document, is useful for applying styles specific to a single page, offering quicker access at the cost of less reusability. A developer might choose external CSS for multi-page sites seeking consistent styling across pages, whereas internal CSS is beneficial in one-off pages to reduce HTTP requests associated with loading additional files.

Inline CSS styles are inserted directly in HTML elements using the 'style' attribute, which can lead to code bloat, reducing readability and maintainability by introducing significant style redundancy . Such practices complicate updates, as styles must be altered across multiple individual tags. To mitigate these challenges, developers should utilize CSS classes and IDs for styling, consolidating repeated styles into external stylesheets. This practice not only streamlines the HTML structure but also enhances the manageability of styles across multiple documents.

HTML forms and input elements provide critical functionality for capturing user input and transmitting it to servers for processing. Forms consist of various input types, including text fields, checkboxes, and submit buttons, allowing developers to create robust data collection interfaces . Common use cases include user authentication, search queries, feedback collection, and purchasing processes on e-commerce platforms. By structuring inputs meaningfully, these forms facilitate interactive and personalized user experiences on the web.

You might also like