HTML Project - 03 Design a webpage like Technical documentation using HTML & CSS
 |
| Technical Documentation Page using html css |
Hey Everyone In this post we will create a Technical Documentation Page using html css and no use of Javascript. I have recently started HTML & CSS Projects for beginners Which Enhance your skills and make your practice good. And these projects are from beginners to advanced.
This documentation page source code is easy to understand you can download the source code at the bottom.
Source Code :
HTML Code -
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- Title -->
<title>Technical Documentation Page</title>
<body>
<div class="main-body">
<nav id="navbar">
<header>Documentation Menu</header>
<a href="#Intro" class="nav-link">
What is C++</a>
<a href="#Object" class="nav-link">
Objects and Classes</a>
<a href="#Inheritance" class="nav-link">
Inheritance</a>
<a href="#Polymorphism" class="nav-link">
Polymorphism</a>
<a href="#Abstraction" class="nav-link">
Abstraction</a>
<a href="#Encapsulation" class="nav-link">
Encapsulation</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Intro">
<header>
What is Java?
</header>
<p>
Java is a high-level, class-based,
bject-oriented programming language
that is designed to have as few implementation
dependencies as possible. It is a general-purpose
programming language intended to let application developers
write once, run anywhere (WORA),[17] meaning that compiled Java code can run on all platforms that support
Java without the need for recompilation.
</p>
<p>he “Hello World” program is the first
step towards learning any programming
language and also one of the simplest
programs you will learn. All you have
to do is display the message “Hello World”
on the screen.
<br><br>Let us now look at the program :<br>
</p>
<code>
public class HelloWorldApp{<iostream>
<br>
public static void main(String[] args){
<br>
system.outprintln("Hello World") }
<br>
}
</code>
<br>
<p>Java is an Object Oriented Programming Language.
<br> The main pillars of Object Oriented
Programming are :
</p>
<ul>
<li>Inheritance</li>
<li>Polymorphism</li>
<li>Abstraction</li>
<li>Encapsulation</li>
</ul>
</section>
<section class="main-section" id="Inheritance">
<header>
Inheritance
</header>
<p>
Inheritance is the ability of one object to
acquire some/all properties of another object.
For example, a child inherits the traits of
his/her parents. With inheritance, reusability
is a major advantage. You can reuse the fields
and methods of the existing class. In Java,
there are various types of inheritances: single,
multiple, multilevel, hierarchical, and hybrid.
For example, Apple is a fruit so assume that
we have a class Fruit and a subclass of it named
Apple. Our Apple acquires the properties of the
Fruit class. Other classifications could be grape,
pear, and mango, etc. Fruit defines a class of foods
that are mature ovaries of a plant, fleshy, contains
a large seed within or numerous tiny seeds. Apple
the sub-class acquires these properties from Fruit
and has some unique properties, which are different
from other sub-classes of Fruit such as red,
round, depression at the top.
</p>
<p>
<b>Mode of Inheritance : </b><br><br>
<b>Public Mode : </b>If we derive a sub
class from a public base class. Then the
public member of the base class will
become public in the derived class and
protected members of the base class
will become protected in derived class.
<br><br>
<b>Protected Mode : </b>If we derive a
sub class from a Protected base class.
Then both public member and protected
members of the base class will become
protected in derived class.
<br><br>
<b>Private Mode : </b>If we derive a
sub class from a Private base class.
Then both public member and protected
members of the base class will become
Private in derived class.
<br><br>
<b>Types of Inheritance in Java : </b>
<br><br><br>
<b>Single Inheritance :</b> In single
inheritance, a class is allowed to inherit
from only one class. i.e. one sub class
is inherited by one base class only.
<br><br>
<b>Multiple Inheritance :</b> Multiple
Inheritance is a feature of C++ where a
class can inherit from more than one
classes. i.e one sub class is inherited
from more than one base classes.
<br><br>
<b>Multilevel Inheritance :</b> In this
type of inheritance, a derived class is
created from another derived class.
<br><br>
<b>Hieratical Inheritance :</b> In this
type of inheritance, more than one sub
class is inherited from a single base
class i.e. more than one derived class
is created from a single base class.
<br><br>
<b>Hybrid (Virtual) Inheritance :</b>
Hybrid Inheritance is implemented by
combining more than one type of
inheritance.
For example: Combining Hierarchical
inheritance and Multiple Inheritance.
</p>
</section>
<section class="main-section" id="Polymorphism">
<header>
Polymorphism
</header>
<p>
Polymorphism gives us a way to use a
class exactly like its parent so there
is no confusion with mixing types. This
being said, each child sub-class keeps its own
functions/methods as they are. If we had a
superclass called Mammal that has a method
called mammalSound(). The sub-classes of Mammals
could be Dogs, whales, elephants, and horses.
Each of these would have their own iteration of
a mammal sound
(dog-barks, whale-clicks).
<br>
<b>In Java polymorphism is mainly
divided into two types:</b>
<br> 1. Compile time Polymorphism<br>
2. Runtime Polymorphism
</p>
<p>Compile time polymorphism: This type of
polymorphism is achieved by function
overloading or operator overloading.
<br> Runtime polymorphism: This type
of polymorphism is achieved by
Function Overriding.
</p>
</section>
<section class="main-section" id="Abstraction">
<header>
Abstraction
</header>
<p>
Abstraction is an extension of encapsulation. I
t is the process of selecting data from a
larger pool to show only the relevant details
to the object. <br> Suppose you want to create a
dating application and you are asked to
collect all the information about your users.
You might receive the following data from
your user: Full name, address, phone number,
favorite food, favorite movie, hobbies, t
ax information, social security number,
credit score. This amount of data is great
however not all of it is required to create
a dating profile. You only need to select the
information that is pertinent to your dating
application from that pool. Data like Full name,
favorite food, favorite movie, and hobbies make
sense for a dating application. The process of
fetching/removing/selecting the user information
from a larger pool is referred to as Abstraction. One of the advantages of Abstraction is being able to apply the same information you used for the dating application to other applications
with little or no modification.
<p>
<b>Abstraction using Classes:</b> We can
implement Abstraction in Java using classes.
Class helps us to group data members and member
functions using available access specifiers. A
Class can decide which data member will be
visible to outside
world and which is not.
<br>
<b>Abstraction in Header files:</b> One
more type of abstraction in Java can be
header files. For example, consider the
pow() method present in math.h header file.
Whenever we need to calculate power of a
number, we simply call the
function pow() present in the math.h header
file and pass the numbers as arguments
without knowing the underlying algorithm
according to which the function is actually
calculating power of numbers.
<br><br><b>Advantages of Data Abstraction:
</b><br> 1. Helps the user to avoid writing
the low level code.<br> 2. Avoids code
duplication and increases reusability.<br>
3. Can change internal implementation of
class independently without
affecting the user.<br> 4. Helps to
increase security of an application or program
as only important details are
provided to the user.
</p>
</section>
<section class="main-section" id="Encapsulation">
<header>
Encapsulation
</header>
<p>
In normal terms Encapsulation is defined
as wrapping up of data and information
under a single unit. In Object Oriented
Programming, Encapsulation is defined as
binding together the data and the functions
that manipulates them. Consider
a real life example
of encapsulation, in a company there are
different sections like the accounts section,
finance section, sales section etc. The finance
section handles all the financial transactions
and keep records of all the data related to
finance.
Similarly the sales section handles all the
sales related activities and keep records of
all the sales. Now there may arise a situation
when for some reason an official from finance
section needs all the data about sales in a
particular
month. In this case, he is not allowed to
directly access the data of sales section.
He will first have to contact some other
officer in the sales section and then
request him to
give the particular data. This is what
encapsulation is. Here the data of
sales section and the
employees that can manipulate them are
wrapped under a single name “sales section”.
</p>
<p>
Encapsulation also lead to data abstraction
or hiding. As using encapsulation also hides
the data. In the above example the data of
any of the section like sales, finance or
accounts is hidden from any other section.<br>
In C++ encapsulation
can be implemented using Class
and access modifiers.
</p>
</section>
</main>
</div>
</body>
</html>
CSS Code :
div.main-body {
display: grid;
grid-template-columns: minmax(300px , auto)1fr;
grid-template-areas: "navbar mainContent";
grid-gap: 20px;
}
nav#navbar {
grid-area: navbar;
position: fixed;
}
nav#navbar a {
display: block;
border: 1px solid black;
padding: 5px;
margin: 10px 0;
text-decoration: none;
color: black;
}
main#main-doc {
grid-area: mainContent;
}
header {
font-size: 1.5rem;
font-weight: bold;
}
code {
background-color: #CCC;
display: block;
padding: 20px;
}
OutPut :-
Download Source Code:-
That’s all, now you’ve successfully created a Technical Documentation Page using HTML CSS. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Download Source Code From here👇
If you face any problem during downloading or after downloading the source code files then feel free to comment down or contact us through the contact page.