HTML Assignment Practical 3

 

1. Simple Webpage with Inline CSS

<!DOCTYPE html>
<html>
<head>
    <title>Simple Webpage</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Welcome to My Website</h1>
    <p style="font-size: 18px; color: gray;">This is a simple webpage styled with inline CSS.</p>
</body>
</html>

Explanation:
Inline CSS is applied directly within HTML elements using the style attribute.

2. Webpage with Internal CSS

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: green;
            text-align: center;
        }
        p {
            color: #333;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>Welcome</h1>
    <p>This webpage is styled using internal CSS.</p>
</body>
</html>

Explanation:
Internal CSS is defined within the <style> tag in the <head> section of the document.

3. Webpage with External CSS

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome</h1>
    <p>This webpage uses an external CSS file.</p>
</body>
</html>

CSS (styles.css):

body {
    background-color: #e0f7fa;
    font-family: Verdana, sans-serif;
}
h1 {
    color: #00796b;
    text-align: center;
}
p {
    color: #004d40;
}

Explanation:
The external stylesheet is linked to the HTML document using the <link> tag.

4. Responsive Webpage with Media Queries

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Design</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        @media (max-width: 600px) {
            h1 {
                font-size: 18px;
                color: red;
            }
        }
    </style>
</head>
<body>
    <h1>Resize the browser to see the effect</h1>
</body>
</html>

Explanation:
Media queries are used to apply CSS rules based on screen size.

5. Webpage with a Navigation Bar

<!DOCTYPE html>
<html>
<head>
    <title>Navigation Bar</title>
    <style>
        nav {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
        nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
        }
        nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</body>
</html>

Explanation:
The <nav> tag is styled to create a navigation bar, with hover effects added using CSS.

6. Webpage with a Styled Button

<!DOCTYPE html>
<html>
<head>
    <title>Styled Button</title>
    <style>
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <button>Click Me</button>
</body>
</html>

Explanation:
CSS styles the button with colors and hover effects.

7. Webpage with Grid Layout

<!DOCTYPE html>
<html>
<head>
    <title>Grid Layout</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            padding: 10px;
        }
        .box {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

Explanation:
The grid layout organizes content into columns and rows.

8. Webpage with a Card Design

<!DOCTYPE html>
<html>
<head>
    <title>Card Design</title>
    <style>
        .card {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            width: 300px;
            margin: 20px auto;
            box-shadow: 2px 2px 5px #aaa;
        }
        .card h3 {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="card">
        <h3>Card Title</h3>
        <p>This is a simple card design.</p>
    </div>
</body>
</html>

Explanation:
CSS styles the card with borders, padding, and shadows.

9. Webpage with Flexbox Layout

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Layout</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            padding: 20px;
        }
        .box {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

Explanation:
Flexbox is used to align items horizontally with spacing.

10. Webpage with CSS Animations

<!DOCTYPE html>
<html>
<head>
    <title>CSS Animation</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px auto;
            animation: move 2s infinite alternate;
        }
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Explanation:
CSS animations are created using @keyframes and applied to elements using the animation property.

Comments

Post a Comment

Popular posts from this blog

Introduction to Computer

Image
Computers are electronic devices that are designed to process, store, and retrieve data. They are used for a wide variety of purposes, from personal computing to complex scientific simulations and industrial automation. A computer consists of various hardware components, including a central processing unit (CPU), memory, storage devices, input/output (I/O) devices such as keyboards, mice, and displays, and various other peripherals. Computers communicate with each other over networks, which are interconnected groups of computers that share resources and information. The internet is a global network that connects millions of computers around the world and enables communication and information sharing on an unprecedented scale. The field of computer science is concerned with the study of computers and computational systems, including their design, development, and application. It encompasses many subfields, including artificial intelligence, computer graphics, databases, programming lang...
Read more

History of Computer

Image
  History of Computer Topics  Definition of computer  Earliest computer  Computer History  Computer Generations Definition of Computer  Computer is a programmable machine.  Computer is a machine that manipulates data according to a list of instructions.  Computer is any device which aids humans in performing various kinds of computations or calculations.  Definition of Computer Three principles characteristic of computer:  It responds to a specific set of instructions in a well-defined manner.  It can execute a pre-recorded list of instructions.  It can quickly store and retrieve large amounts of data.  Earliest Computer  Originally calculations were computed by humans, whose job title was computers.  These human computers were typically engaged in the calculation of a mathematical expression.  The calculations of this period were specialized and expensive, requiring years of training in mathematics.  T...
Read more

Computer Generation

Image
 There are five generations of computer:  First generation– 1946 - 1958  Second generation– 1959 - 1964  Third generation– 1965 - 1970  Fourth generation– 1971 - today  Fifth generation– Today to future The First Generation   The first computers used vacuum tubes for circuitry and magnetic drums for memory, and were often enormous, taking up entire rooms.  They were very expensive to operate and in addition to using a great deal of electricity, generated a lot of heat, which was often the cause of malfunctions. The Second Generation   Transistors replaced vacuum tubes and ushered in the second generation of computers.  One transistor replaced the equivalent of 40 vacuum tubes.    Allowing computers to become smaller, faster, cheaper, more energy-efficient and more reliable.  Still generated a great deal of heat that can damage the computer. The Third Generation  The development of the integrated circuit was ...
Read more