Tuesday, October 31, 2023

Using the max-width Property — Responsive Web Design

Using the max-width Property — Responsive Web Design

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>"max-width:100%" prevents the image from getting bigger than its original size. However, if you make the browser window smaller, the image will still scale down.</p>
<p>Resize the browser window to see the effect.</p>

<img src="images/Icecream.jpg" style="max-width:100%;height:auto;">

</body>
</html>

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below changes depending on the width:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>

<picture>
  <source srcset="images/garden-flowers-small.jpg" media="(max-width: 600px)">
  <source srcset="images/flowers.jpg" media="(max-width: 1500px)">
  <source srcset="images/flowers.jpg">
  <img src="images/flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

Responsive Text Size

The text size can be set with a “vw” unit, which means the “viewport width”.

That way the text size will follow the size of the browser window:

style=”font-size:10vw;” → Responsive Text

style=”font-size:5vw;” → Resize the browser window to see how the text size scales.

style=”font-size:5vw;” → Use the “vw” unit when sizing the text. 10vw will set the size to 10% of the viewport width.

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>
at No comments:

Monday, October 30, 2023

HTML Responsive Web Design

HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes and viewports.

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web pages:

Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Setting the Viewport</h2>
<p>Just showing you how to add the viewport meta element in this example.</p>

</body>
</html>

This will set the viewport of your page, which will give the browser instructions on how to control the page’s dimensions and scaling.

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>

<img src="images/height.jpg" style="width:100%;">

</body>
at No comments:

Saturday, October 28, 2023

HTML Layout Elements

               HTML Layout Elements

Websites often display content in multiple columns (like a magazine or a newspaper).

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

  • <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
<!DOCTYPE html>
<html>
    <head>
        <title>website layout</title>
        <link rel="stylesheet" href="style19webout.css">
    </head>
    <body>

        <!--semantic tags = keep your content organized
                            better for SEO(search engine optimization)
                            Assists screen readers and
                        other tech for accessibility
            <header> = introductory content
            <nav>    = navigation bar, links
            <main>   = main content (section,aside,article,div)
            <section>= dependent content
            <aside>  = side content
            <article>= independent content
            <footer> = closing content
        -->
        
        <header>
            <h2>Header</h2>
        </header>


        <nav class="navbar">

        </nav>

        <main>
            <aside>
                <h2>This is aside</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque obcaecati magni illum assumenda nihil officia asperiores at nemo natus, necessitatibus iste ut minima dolores facilis, dolor dignissimos adipisci, exercitationem eveniet.</p>
            </aside>
            <section>
                <h2>This is a section</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae ut officiis quis quidem labore placeat sint necessitatibus temporibus explicabo voluptatibus et modi deserunt impedit magni, autem ratione hic vero eveniet?</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos temporibus impedit omnis pariatur voluptas! Natus corporis veritatis aperiam, quisquam nesciunt consequatur consequuntur quo esse fugit deserunt earum exercitationem saepe ratione.</p>
            </section>
            <article>
                <h2>This is a article</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad praesentium in labore nemo architecto vero illum, dolorum suscipit quam blanditiis incidunt similique nihil libero sint ex voluptatibus totam aliquid! Perferendis!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur porro quia vel error possimus sint, illo dicta beatae deserunt ex sunt laborum maxime! Necessitatibus incidunt quis molestias accusamus, aliquam maxime.</p>
            </article>
        </main>

        <footer>
            <h2>Footer</h2>
        </footer>


    </body>
</html>

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

  • CSS framework
  • CSS float property
  • CSS flexbox
  • CSS grid

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work.

Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>float property in css</title>
        <link rel="stylesheet" href="style5float.css">
    </head>
    <body>
        <!--float = allows other elements to flow around it-->

        <img src="images/cutedog.gif" alt="cute dog" width="200" id="img1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ullam sunt asperiores reiciendis officia iure a harum voluptatem nobis dicta nihil necessitatibus quia odit facilis inventore, architecto deleniti rerum itaque?</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt voluptatum repellat obcaecati explicabo nisi officia nobis atque. Iure quae doloremque esse, dolore aliquam facere expedita voluptatum rerum, laboriosam harum nostrum?</p>
        <img src="images/icon.png" alt="cute dog" width="200" id="img2">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum explicabo aperiam dolor suscipit sapiente. Minus nihil at quas quasi. Vero eum sunt inventore accusamus perferendis voluptatum eos odio voluptatibus quas?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea maxime a repudiandae laborum reiciendis. Neque commodi suscipit, perferendis cum repudiandae unde repellat sapiente et, cupiditate ipsum dignissimos. Et, inventore eius!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores maiores qui porro, nemo iusto at blanditiis laborum sed accusamus maxime ut facilis voluptate delectus. Fugit consequatur similique saepe temporibus numquam.</p>
    </body>
</html>

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

<!DOCTYPE html>
<html>
    <head>
        <title>flexbox</title>
        <link rel="stylesheet" href="style22flexbox.css">
    </head>
    <body>
        <div class="container">
            <div class="box" id="box1">1</div>
            <div class="box" id="box2">2</div>
            <div class="box" id="box3">3</div>
            <div class="box" id="box4">4</div>
            <div class="box" id="box1">1</div>
            <div class="box" id="box2">2</div>
            <div class="box" id="box3">3</div>
            <div class="box" id="box4">4</div>
        </div>

    </body>

</html>
at No comments:
Subscribe to: Posts (Atom)

Building Static Website(part6) HTML Lists

  Building Static Website (part6) HTML Lists Today, let us add some lists to our detailed view section by using html lists. Lists: List is a...

  • Advantages and disadvantages of MySQL
                 MySQL Advantages and                     Disadvantages Advantages: L ike other relational database system, MySQL database serve...
  • HTML Text Formatting
                               HTML Text Formatting HTML contains several elements for defining text with a special meaning. HTML Formatting Ele...
  • HTML Table Colspan & Rowspan
      HTML Table Colspan & Rowspan HTML tables can have cells that span over multiple rows and/or columns. HTML Table — Colspan To make a ce...