GSBV BURARI
WEB APPLICATION
PROJECT FILE
Submitted By: SubmittedTo:
Name : Rhythm Anand BALRAM SIR
Roll no. : 04 LECTURER CS/IP
Class & Section: 12A
CBSE Roll no. :
Certified that the work contained in the project titled
“WEB DEVELOPMENT” by “RHYTHM Anand ” has
successfully completed this project the project work
entitled “WEB DEVELOPMENT” in the subject of
Computer Science class 12 project lead down in the
regulations CSSE for the process of Project Report.
Teacher’s Signature
ACKNOWLEDGEMENT
Apart from the efforts of me, the success of any project depends largely on the encouragement and
guidelines of many others. I take this opportunity to express my gratitude to the people who have
been instrumental in the successful completion of this project.
I express deep sense of gratitude to almighty God for giving me strength for the successful
completion of the project.
I express my heartfelt gratitude to my parents for constant encouragement while carrying out this
project.
I gratefully acknowledge the contribution of the individuals who contributed in bringing this project
up to this level, who continues to look after me despite my flaws.
I express my deep sense of gratitude to the luminary Balram SIR who has been continuously
motivating and extending their helping hand to us.
My sincere thanks to Balram SIR, Master in-charge. A guide, Mentor all the above a friend, who
critically reviewed my project and helped in solving each and every problem, occurred during
implementation of the project.
The guidance and support received from all the members who contributed and who are contributing
to this project, was vital for the success of the project. I am grateful for their c constant support and
help
ABSTRACT
This project is about the various valuable coding languages and software,
methods that are utilized in the process of advancement of a website. The main
Purpose Of this project is to create a SelfDesigned Website using HTML, CSS.
Web development, an ever-evolving discipline at the crossroads of technology
and creativity, plays a pivotal role in shaping the digital landscape. This abstract
provides a glimpse into the multifaceted realm of web development,
encompassing its key components, trends, and the transformative impact it has
on the online experience.Web development involves the creation, maintenance,
and enhancement of websites and web applications. It integrates a spectrum of
technologies, programming languages, and design principles to deliver
seamless, interactive, and user-friendly digital experiences.
INTRODUCTION
HTML
HyperText Markup Language (HTML) is a
markup language used to create web pages. It
was created in 1990 by Sir Tim Berners-Lee, a
British computer scientist who is credited with
inventing the World Wide Web.[1] webpage can
include writing, links, pictures, and even sound
and video. HTML tells web browsers what
webpage should look like. HTML also adds meta information to webpage. Meta
information is information about a webpage e.g., the name of the person who
created the page. Web browsers usually do not show meta information.
HTML is often used with Cascading Style Sheets (CSS) and JavaScript. CSS is
used to change the way HTML looks. JavaScript tells websites how to behave.
It can also change HTML and CSS.
HTML is made by the World Wide Web Consortium (W3C). There are many
versions of HTML. As of September 2018, the current standard of HTML is
called HTML 5 and is specifically at version 5.2.
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web
page:
Layout ELEMENTS
• <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
CSS
Css(Cascading Style Sheets)is a style sheet language used for describing the
presentation of a document written in a markup language
such as HTML or XML. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
CSS is designed to enable the separation of content and presentation, including
layout, colors, and fonts. This separation can improve content
accessibility; provide more flexibility and control in the specification of presentation
characteristics; enable multiple web pages to share formatting by specifying the
relevant CSS in a separate .css file, which reduces complexity and repetition in the
structural content; and enable the .css file to be cached to improve the page load
speed between the pages that share the file and its formatting.
CSS Syntax
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a CSS property name and a value, separated by a
colon.
Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
HTML in Visual Studio Code
Visual Studio Code provides basic support for HTML programming out of the
box. There is syntax highlighting, smart completions with IntelliSense, and
customizable formatting. VS Code also includes great Emmet support.
As you type in HTML, we offer suggestions via HTML IntelliSense. In the image
below, you can see a suggested HTML element closure </div> as well as a
context specific list of suggested elements.
Document symbols are also available for HTML, allowing you to quickly
navigate to DOM nodes by id and class name.
You can also work with embedded CSS and JavaScript. However, note that
script and style includes from other files are not followed, the language support
only looks at the content of the HTML file.
You can trigger suggestions at any time by pressing Ctrl+Space.
You can also control which built-in code completion providers are active.
Override these in your user or workspace settings if you prefer not to see the
corresponding suggestions.
// Configures if the built-in HTML language suggests HTML5 tags, properties and
values.
"html.suggest.html5": true
Close tags
Tag elements are automatically closed when > of the opening tag is typed.
The matching closing tag is inserted when / of the closing tag is entered.
You can turn off autoclosing tags with the following setting:
"html.autoClosingTags": false
Colour picker
The VS Code color picker UI is now available in HTML style sections.
It supports configuration of hue, saturation and opacity for the colour that is
picked up from the editor. It also provides the ability to trigger between different
colour modes by clicking on the colour string at the top of the picker. The picker
appears on a hover when you are over a colour definition.
CSS in visual studio code
Visual Studio Code has built -in support for editing style sheets in CSS .css, you
can install an extension for greater functionality.
VS Code has support for selectors, properties and values. Use Ctrl+Space to get
a list of context specific options.
Proposals contain extensive documentation, including a list of browsers that
support the property. To see the full description text of the selected entry, use
Ctrl+Space.
Syntax colouring & colour preview
As you type, there is syntax highlighting as well as in context preview of colors.
Clicking on a color preview will launch the integrated color picker which
supports configuration of hue, saturation and opacity.
Tip: You can trigger between different color modes by clicking on the color
string at the top of the picker.
You can hide VS Code's color previews by setting the following setting:
C/C++ for Visual Studio Code
C/C++ support for Visual Studio Code is provided by a Microsoft C/C++
extension to enable cross-platform C and C++ development on Windows,
Linux, and macOS. When you create a *.cpp file, the extension adds features
such as syntax highlighting (colorization), smart completions and hovers
(IntelliSense), and error checking.
What is C++?
C++ is a cross-platform language that can be used to create
highperformance applications.
C++ was developed by Bjarne Stroustrup, as an extension to the C
language.
C++ gives programmers a high level of control over system resources and
memory.
The language was updated 4 major times in 2011, 2014, 2017, and 2020
to C++11, C++14, C++17, C++20.
.
Install the extension
1. Open VS Code.
2. Select the Extensions view icon on the Activity bar or use the keyboard
shortcut (Ctrl+Shift+X).
3. Search for 'C++'.
4. Select Install.
Set up your C++ Environment
C++ is a compiled language meaning your program's source code must be
translated (compiled) before it can be run on your computer. The C/C++
extension doesn't include a C++ compiler or debugger, since VS Code as an
editor relies on command-line tools for the development workflow. You need to
install these tools or use the tools already installed on
BASIC REQUIREMENTS
Browser requirements
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 CSS3 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and
Android phones all have excellent support for HTML5.
Software Requirements
Visual studio code
Html extension
Css extension
C++ extension
Minimum System Requirements:
Processor (CPU): A modern dual-core processor with a clock speed of at
least 1.6 GHz or equivalent.
RAM (Memory): 2 GB of RAM or more. This is sufficient for running a
basic chess program.
Graphics: A basic integrated graphics card or equivalent should be fine for
most chess games. A dedicated graphics card is not typically necessary for
playing this chess game. ➢ Storage: At least 100 MB of free disk space
for the chess program and associated files. (NOTE: Approximately for the
chess game only)
Operating System: Most chess programs are designed to run on a variety
of operating systems, including Windows, macOS, and Linux. Ensure
your system meets the requirements for the specific chess program you
choose.
Display: A screen with a resolution of 1600x900 pixels or higher is
recommended for a good gaming experience. (NOTE: At 1600x900, the
close button will not be on the screen, but the game will be, so if a person
really wants to play this game, they can play with this resolution.)
Input Devices: A standard keyboard and mouse or a touchpad.
Creating a Profile Card
1. Create a new folder in your local disk “Webpage Creation” select the folder in visual studio code
Explorer.
2. Create a new file with a name “home.html”
3. After adding the HTML and CSS part in the “home.html” save the file
4. For adding the image in your profile card
a. Save the image in the same folder we created in the local disk (Soth the html file and the
image need to be in the same folder).
5. Check the extension if you have open in browser (if not install it)
6. Now right click “home.html” file and open the file with default browser.
Code
Step 1) Add HTML (content for the Sody)
Step2): Add CSS
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/
fontawesome.min.css">
<style> .card { box-shadow: 0 4px 8px
0 rgba(0, 0, 0, 0.2); max-width: 300px;
margin: auto; textalign: center;
font-family: arial; }
.title { color:
grey; fontsize:
18px; } button {
border: none;
outline: 0;
display: inline-
block; padding:
8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer; width:
100%; font-size: 18px;
} a {
textdecoration:
none; font-size:
22px; color:
black; }
button:hover,
a:hover {
opacity:
0.7;
}
</style>
</head>
Output:
