Example: Static Web Page (B)

(no submission)

Purpose:

For this exercise, we will work on a static web page. We'll stop periodically, and do exercise one step at a time with discussion between steps. There's a lot going on in this activity. Let's see how much we can complete. You will submit what you have completed today. The more you do, the more experience you have!

You may work alone or another student in this course.

This exercise consists of 3 parts:
  1. Create a static web page
  2. Style a web page
  3. Create a responsive view

Note: This activity is meant to get you started with static web page. You are not required to have a complete, ready to publish web page. However, you are encouraged to try hosting the page on a public server. This helps to verify that your deployment environment is set up properly and your web resource is accessible.

Refer to Basic web deployment (XAMPP or GCP) to deploy and test your web page.


Sample output / screen (based on the following tasks).
Sample images
Sample static web page

Refer to HTML overview

Part 1: Create a static web page (HTML)

  1. Create an HTML file ( .html   not   .htm )
    • A few design decisions:
      • If you decide to use this HTML file as the main/first page of you site, save it as index.html
      • If you would like to have another HTML file named index.html (client-side) redirect to this HTML file, name this file with something else (let's refer to it as your-web-page.html). Include the following code in the <head> section of your index.html file.
        <!--  redirect to personal-page.html in 10 seconds -->
        <meta http-equiv="refresh" content="10; url=http://localhost/cs4640/example/personal-page.html" />
        You may also include the following content in the <body> section of your index.html to let the users know what will be happending.
        If you are not redirected to personal-page in 10 seconds,
        <a href="http://localhost/cs4640/example/personal-page.html">click to redirect.
      Q: What is index.html for?

  2. Include the following <meta> tags in the <head> section of this index.html.
    <!DOCTYPE html>
    <html lang="en">
    
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        
        <meta name="author" content="define author of the page -- your name">
        <meta name="description" content="define a description of this page">
        <meta name="keywords" content="define keywords for search engines">        
      </head>  
      
      <body>
         
      </body>
    </html>

  3. Inside the <head> element, Add <title> element containing the title of the page.
    <title>Example home page</title>

  4. Inside the <body> element, add <h1> element including the heading you wish to include. Add <p> element including a brief intro or a few sentences about your web page/site or you or tagline

  5. Add <header> element to help semantically structure the web page. Include your existing <h1> and also add <h3> element containing tagline or some important phrase (note: observe how content in <h1> and <h3> are displayed)

  6. Add <section> element containing a group of content. Let's begin this section with <h2> element containing a specific phrase about this web page/site. Then, end this section with the paragraph you created previously

  7. Now, let's use <section> element to structure some of your highlight/showcase (Remember: space is limited, you will put just enough information to get the audience attention and invite your audience to explore your website).
    • Add <section> element containing your highlight. Inside the <section> element:
      • Add <h3> containing the title of the highlight, followed by a brief paragraph (<p>) describing this highlight (remember to keep it short).
      • Add <img> displaying the highlight image.
    • Design decision: how many highlights should be on this page? Two — may leave too much space, four — may become crowded, three — seems about right. However, this depends on the content of your page. The most important factor is "balance."
    Once you have completed with the highlight sections, let's add another <section> element to group your hightlight sections.

  8. It is important that you add a copyright to your page. Add <footer> element at the end of your page. Inside <footer>, add <small> element include your copyright such that the copyright will be semantically rendered in small print.

  9. Create several empty HTML files so that clicking the navigation menus and other links open the page (not resulting in HTTP 404). Let's name these empty files: hightlight1.html,  hightlight2.html,  hightlight3.html,  software.html,  research.html,  activity.html,  contact.html (if you want to allow your audience to leave you a message via a form).

  10. Let's add a link to the header such that clicking your name (or logo) will open the main/home page (assume the HTML file you are currentlty working on is the main/home page of the site).

  11. To navigate across all the different pages in your website, add a <nav> element to organize your navigation menu, within the header. Add links to the empty pages you created previously.

  12. Add the same set of navigation menu to the footer.
    Q: Why should you provide navigation menu at the top and at the bottom of the page?

  13. Within the <section> element that introduces your hightlight, let's wrap each highlight within an anchor element linking to a proper page

Refer to CSS overview

Part 2: Style a web page (CSS)

  1. Create a folder styles inside a folder where you save your HTML file. This will be where you store all of your .css files.

  2. Create a CSS file, let's call it main.css

  3. Because every web browser has its own default styles for different elements, the same web page may appear differently. To ensure cross-browser compatibility, CSS resets have become widely used.
    • The idea of CSS resets is to replace a predefined style of every common HTML element with a unified style for all browser.
    • Generally, the reset removes any sizing, margins, paddings, or additional styles and toning these value down.
    • To use the reset, include them at the top of your style sheet (reminder: CSS cascades from top to bottom). This is to ensure that those styles are read first; and as a result, all of the different web browsers are working from a common baseline -- and then your own styles are applied to the page.
    Now, let's borrow one of the currently available resets, meyerweb. Copy the reset and paste it at the top of your main.css file.
    Q: Why should the reset be at the top?

  4. Add <link> element to the <head> section of your HTML file.
      <link rel="stylesheet" href="styles/main.css">

  5. Now, let's work on our styles. Create a class that will serve as a container for your elements, set margin, padding, and width

  6. Apply the container class throughout your HTML
    • <header>
    • <footer>
    • <section>

  7. Let's add vertical space between elements; for example, set bottom margin to 22 pixel

  8. Since we are working on the home page, let's add a bit of padding to the sections. You may want to try adjusting the padding to find the numbers that work for you.

  9. Set position of the element. Let's set your primary header to float left. Create a logo class selector and set the float property to be left. Then, add class to the primary header element

  10. Set the copyright footer to float left. Create a copyright class and set the float property to be left.

  11. Create a primary-footer class and set top and bottom padding. Then, add class to the footer


Part 3: Create a responsive view

Assuming the viewport has been set using a <meta> tag.

  1. Create a grid view
    • Make sure that the padding and border are included in the total width and height of the elements by adding the following CSS rule
      * {
        box-sizing: border-box;
      }  

  2. Define columns width. Typically, we want a responsive grid-view with 12 columns. Therefore, each column's width is 100% / 12 = 8.33%.

  3. Add a breakpoint, use @media (a media query is a CSS technique introduced in CSS3) rule to include a block of css property only if a certain condition is true
    • Design for mobile first. Add the following CSS rule
      /* For mobile phones: */
      [class*="col-"] {
        width: 100%;
      }  

      Alternatively, we may decide to handle all screens smaller than 768px the same way; e.g., each column should have a width of 100%.
      @media only screen and (max-width: 768px) {
        /* For mobile phones and tablets: */
        [class*="col-"] {
          width: 100%;
        }
      } 

    • Add CSS rules to adjust screen bigger than 768px (for example, desktop)
      @media only screen and (min-width: 768px) {
         ... rules ...
      } 

    • Optional: add CSS rule to hide portions of content when the screen is smaller than 600px (phones: 576px, tablets: 768px, desktops: 992px, large desktops 1200px)
      @media only screen and (max-width: 600px) {
        #fadeshow {
          display: none;
      } 

  4. Apply the grid system to the web page

You may modify your interface the way you like. Get creative. Feel free to add additional elements you feel should be included and have fun!

Refer to Basic web deployment (XAMPP or GCP) to deploy and test your web page.


Copyright © 2022 Upsorn Praphamontripong

Released under the Creative Commons License CC-BY-NC-SA 4.0 license.

Last updated 2022-05-24 20:32