Open In App

Design a Webpage like Technical Documentation using HTML and CSS

Last Updated : 17 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will design a webpage-like technical documentation using HTML and CSS . Technical documentation is any document that explains the features of the respective product. In this project, we are going to create technical documentation of C++ by using HTML and CSS. The webpage has a menu section that helps to navigate to different sections of the webpage.

Approach:

  • Structure the webpage into two sections: left for a Documentation Menu and right for topic descriptions.
  • Create anchor tags in the left section to serve as navigation links, linking to corresponding IDs on the right (e.g., inheritance, polymorphism).
  • Enable dynamic loading of topic details on the right side when users click on a link in the Documentation Menu.
  • Enhance the web page’s visual appeal using CSS for text alignment, padding, margin, and overall design aesthetics.
  • Implement responsive design with CSS to adapt the layout for different screen sizes.

Example:

HTML Code




<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
 
<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 C++?
                </header>
                <p>
                    C++ is a general purpose programming
                    language and widely used now a days '
                    for competitive programming. It has
                    imperative, object-oriented and generic
                    programming features. C++ runs on lots of
                    platform like Windows, Linux, Unix, Mac etc.
                    C++ is an efficient
                    and powerful language and finds wide use
                    in various GUI platforms, 3D graphics and
                    real-time simulations. Because of the
                    inclusion of rich function libraries,
                    working in C++ becomes simpler and
                    convenient than C. Being object-oriented
                    programming like Java, C++ provides
                    the support of inheritance, polymorphism,
                    encapsulation, etc. Unlike C, C++ allows
                    exception handling and function overloading.
                </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>
                    #include<iostream
                    <br>
                    using namespace std; 
                    <br>
                    int main()
                    <br>
                        {
                            <br>
                            cout〈〈"Hello World";
                            <br>
                            return 0;
                            <br>
                        }
                </code>
                <br>
                <p>C++ is an Object Oriented Programming Language.
                    <br> The main pillars of Object Oriented
                    Programming are :
                </p>
                <ul>
                    <li>Objects and Classes</li>
                    <li>Inheritance</li>
                    <li>Polymorphism</li>
                    <li>Abstraction</li>
                    <li>Encapsulation</li>
                </ul>
            </section>
 
            <section class="main-section" id="Object">
                <header>
                    Objects and Classes
                </header>
                <p>
                    Object-oriented programming – As the name
                    suggests uses objects in programming.
                    Object-oriented programming aims to
                    implement real-world entities like
                    inheritance, hiding, polymorphism,
                    etc in programming. The main
                    aim of OOP is to bind together the data
                    and the functions that operate on them
                    so that no other part of the code can
                    access this data except that function.
                </p>
                <p><b>Object : </b>An Object is an identifiable
                    entity with some characteristics and behavior.
                    An Object is an instance of a Class. When a
                    class is defined, no memory is allocated but
                    when it is instantiated (i.e. an
                    object is created) memory is allocated.
                    <br>
                    <b>Class : </b>The building block of C++ that
                    leads to Object-Oriented programming is a Class.
                    It is a user-defined data type, which holds its
                    own data members and member functions, which can
                    be accessed & used by creating an instance
                    of that class. A class is like a blueprint for
                    an object. For Example: Consider the Class
                    of Cars. There may be many cars with different
                    names and brand but all of them will share
                    some common properties like all of them will
                    have 4 wheels, Speed Limit, Mileage range etc.
                    So here, Car is the class and wheels,
                    speed limits, mileage are their properties.
                </p>
            </section>
 
            <section class="main-section" id="Inheritance">
                <header>
                    Inheritance
                </header>
                <p>
                    The capability of a class to derive
                    properties and characteristics from
                    another class is called Inheritance.
                    Inheritance is one of the most important
                    feature of Object Oriented Programming.
                    Sub Class: The class that inherits
                    properties from another class
                    is called Sub class or Derived Class.
                    Super Class: The class whose properties
                    are inherited by sub class is called Base
                    Class or Super class. Using inheritance, we
                    have to write the functions only one time
                    instead of three times as we
                    have inherited rest of the three classes
                    from base class(Vehicle).
                </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 C++ : </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>
                    The word polymorphism means having many
                    forms. In simple words, we can define
                    polymorphism as the ability of a message
                    to be displayed in more than one form.
                    A real-life example of polymorphism, a
                    person at the same time can have
                    different characteristics.
                    Like a man at the same time is a father,
                    a husband, an employee. So the same
                    person posses different behavior in
                    different situations. This is called
                    polymorphism. Polymorphism is considered
                    as one of the important features of Object
                    Oriented Programming.
                    <br>
                    <b>In C++ 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>
                    Data abstraction is one of the most
                    essential and important feature of object
                    oriented programming in C++. Abstraction
                    means displaying only essential information
                    and hiding the details. Data abstraction
                    refers to providing only essential information
                    about the data to the outside world,
                    hiding the background details or implementation.
                    <br> Consider a real life example of a man driving
                    a car. The man only knows that pressing the
                    accelerators will increase the speed of car
                    or applying brakes will stop the car but he
                    does not know about how on pressing accelerator
                    the speed is actually increasing, he does
                    not know about the inner mechanism of the car
                    or the implementation of accelerator, brakes
                    etc in the car. This is what abstraction is.
                </p>
 
                <p>
                    <b>Abstraction using Classes:</b> We can
                    implement Abstraction in C++ 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 C++ 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




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:

tfg



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads