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 high-

performance 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 (Both 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 Body)

<body>

<h2 style="text-align:center">User Profile Card</h2>

<div class="card">
<img src="C:\Users\DELL\Downloads\webpage creation\Tony.jpg" alt="John"
style="width:100%">
<h1>Tony</h1>
<p class="title">12th Standard</p>
<p>Computer Science Student</p>
<div style="margin: 24px 0;">
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</div>
<p><button>Contact</button></p>
</div>
</body>

Step 2) Add CSS:

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}

.title {
color: grey;
font-size: 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 {
text-decoration: none;
font-size: 22px;
color: black;
}

button:hover, a:hover {
opacity: 0.7;
}
</style>
</head>

Output: