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: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.
.html
not .htm
)
<!-- 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.
<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>
<head>
element,
Add <title>
element containing the title of the page.
<title>Example home page</title>
<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
<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)
<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
<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).
<section>
element containing your highlight.
Inside the <section>
element:
<h3>
containing the title of the highlight,
followed by a brief paragraph (<p>
) describing this highlight
(remember to keep it short).<img>
displaying the highlight image.<section>
element to group your hightlight sections.
<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.
<nav>
element to organize your navigation menu,
within the header. Add links to the empty pages you created previously.
<section>
element that introduces your hightlight,
let's wrap each highlight within an anchor element linking to a proper page
Refer to CSS overview
<link>
element to the <head>
section of your HTML file.
<link rel="stylesheet" href="styles/main.css">
<header>
<footer>
<section>
logo
class selector and set the float
property to be left
.
Then, add class to the primary header element
copyright
class and set the float
property
to be left
.
primary-footer
class and set
top and bottom padding.
Then, add class to the footer
Assuming the viewport has been set using a <meta>
tag.
* { box-sizing: border-box; }
@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
/* For mobile phones: */ [class*="col-"] { width: 100%; }
@media only screen and (max-width: 768px) { /* For mobile phones and tablets: */ [class*="col-"] { width: 100%; } }
@media only screen and (min-width: 768px) { ... rules ... }
@media only screen and (max-width: 600px) { #fadeshow { display: none; }
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.
Released under the CC-BY-NC-SA 4.0 license.
Last updated 2022-05-24 20:32