cg_register.html <!DOCTYPE html> <html lang=\"en\"> <head> <!-- New Perspectives
ID: 3734482 • Letter: C
Question
cg_register.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 1
CGIP Registration Form
Author:
Date:
Filename: cg_register.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CGIP Registration Form</title>
<link href="cg_base.css" rel="stylesheet" />
<link href="cg_styles.css" rel="stylesheet" />
</head>
<body>
<header>
<img src="cg_logo.png" alt="Computer Graphics and Image Processing" id="logoimg" />
</header>
<nav>
<ul>
<li><a href="#">home page</a></li>
<li><a href="#">keynote address</a></li>
<li><a href="#">speakers</a></li>
<li class="newgroup"><a href="#">general session</a></li>
<li><a href="#">abstracts</a></li>
<li><a href="#">programs</a></li>
<li><a href="#">workshops</a></li>
<li class="newgroup"><a href="#">committees</a></li>
<li><a href="#">executive session</a></li>
<li><a href="#">advisory council</a></li>
<li class="newgroup"><a href="#">travel info</a></li>
<li><a href="#">accommodations</a></li>
<li><a href="#">banquet</a></li>
<li><a href="#">family attractions</a></li>
<li class="newgroup"><a href="#">registration</a></li>
<li class="newgroup"><a href="#">ACGIP home page</a></li>
<li><a href="#">tour Sante Fe</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
<section>
<h1>Conference Registration Form</h1>
<p>Required Item (*)</p>
</section>
<aside>
<dl>
<dt>ACGIP Member ($695)</dt>
<dd>Eligible to attend all sessions and banquet</dd>
<dt>Non-Member ($795)</dt>
<dd>Eligible to attend all sessions and banquet</dd>
<dt>Student ($310)</dt>
<dd>Eligible to attend all sessions. <a href="#">Proof</a> of
student status required</dd>
<dt>Poster ($95)</dt>
<dd>Eligible to attend display hall and vendor stations</dd>
<dt>Guest ($35)</dt>
<dd>Eligible to attend banquet only</dd>
</dl>
</aside>
<footer>
Association of Computer Graphics and Image Processing
</footer>
</body>
</html>
cg_validate_txt
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 1
ACGIP Registration Validation Style Sheet
Author:
Date:
Filename: cg_validate.css
*/
/* Validation Styles */
cg_styles.css
@charset "utf-8";
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 1
ACGIP General Style Sheet
Filename: cg_styles.css
*/
/* HTML and Body styles */
html {
background: rgb(51, 51, 51) url(cg_back.png);
font-family: Verdana, Geneva, sans-serif;
height: 100%;
}
body {
background-color: white;
box-shadow: black 20px 0px 40px, black -20px 0px 40px;
border-left: 3px solid black;
border-right: 3px solid black;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0px auto;
min-width: 320px;
max-width: 1020px;
width: 100%;
}
/* Header styles */
header {
width: 100%;
}
header img#logoimg {
display: block;
width: 100%;
}
/* Navigation Styles */
nav {
width: 100%;
}
nav ul {
background: linear-gradient(to bottom, black, rgb(44, 70, 44));
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-width: 200px;
-moz-column-gap: 25px;
-webkit-column-gap: 25px;
column-gap: 25px;
padding: 25px;
}
nav ul li.newgroup {
margin-top: 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 0.9em;
}
nav a:hover {
color: rgb(191, 231, 191);
text-decoration: underline;
}
/* Section Styles */
section {
background: rgb(245,245,165);
-webkit-flex: 2 1 421px;
flex: 2 1 421px;
padding: 10px 20px 20px 40px;
}
section h1 {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 1.8em;
margin: 20px 0px 5px;
color: rgb(83, 183, 51);
}
section > p {
margin-bottom: 20px;
padding-bottom: 9px;
border-bottom: 3px solid rgb(83, 183, 51);
}
/* Aside Styles */
aside {
background: rgb(144, 170, 144);
color: white;
-webkit-flex: 1 2 220px;
flex: 1 2 220px ;
padding: 25px;
}
dt {
font-size: 1em;
border-bottom: 1px solid white;
font-weight: bold;
}
dd {
margin-bottom: 25px;
}
dl a {
color: gold;
}
/* Footer styles */
footer {
color: white;
background: rgb(44, 70, 44);
height: 70px;
padding-top: 20px;
text-align: center;
font-size: 0.9em;
width: 100%;
}
/* ===============================
Mobile Styles: 0px to 640px
===============================
*/
@media only screen and (max-width: 640px) {
section h1 {
font-size: 1.5em;
}
section p {
font-size: 0.9em;
}
nav {
-webkit-order: 99;
order: 99;
}
footer {
-webkit-order: 100;
order: 100;
}
}
/* =============================================
Tablet and Desktop Styles: greater than 640px
=============================================
*/
@media only screen and (min-width: 641px) {
}
cg_base.css
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 1
ACGIP Base Style Sheet
Filename: cg_base.css
*/
/* Basic styles to be used with all devices and under all conditions */
article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}
address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, nav a, ol, p, section, span, ul,
table, tr, td, th, col, colgroup {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Set the default page element styles */
body {
line-height: 1.2em;
}
ul, ol {
list-style: none;
}
nav ul {
list-style: none;
list-style-image: none;
}
nav a {
text-decoration: none;
}
cg_forms.css
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 7
Case Problem 1
ACGIP Registration Form Style Sheet
Filename: cg_forms.css
*/
/* Form Layout Styles */
label {
display: block;
float: left;
clear: left;
margin: 5px;
width: 200px;
}
input, select, textarea {
display: block;
float: left;
margin: 5px 0px;
width: 200px;
}
textarea {
height: 100px;
}
form p {
clear: left;
text-align: center;
padding-top: 40px;
}
input[type='submit'] {
background-color: rgb(144, 170, 144);
color: rgb(245,245,165);
border-radius: 20px;
float: none;
display: inline;
font-size: 1.1em;
height: 30px;
width: 150px;
}
Explanation / Answer
I see 12 questions in the figures uploaded. However I'll be answering the first 4 questions only.
Answers for first four questions are as follows
1. Updating the comment section is simple. Comments in html are written in between '<!--' and '-->' symbols.
I have pasted below only the updated comment section, with my name and today's date: (in cg_register_txt.html)
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 1
CGIP Registration Form
Author: Manasa B
Date: 21-03-2018
Filename: cg_register.html
-->
Similarly, the comment section in the cg_validate_txt.css needs to be updated. After updating the comment section, do a 'save as' for both the files with the names cg_register.html and cg_validate.css respectively
2.To link stylesheets we use the <link> tag.
I pasted below the updated header section of the cg_register.html file
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 1
CGIP Registration Form
Author: Manasa B
Date: 20-03-2018
Filename: cg_register.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CGIP Registration Form</title>
<link href="cg_base.css" rel="stylesheet" />
<link href="cg_styles.css" rel="stylesheet" />
<link href="cg_forms.css" rel="stylesheet" type="text/css" />
<link href="cg_validate.css" rel="stylesheet" type="text/css" />
</head>
3. To link a script file to the html file, we use the <script> tag
I pasted the updated header section of the html file below
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 7
Case Problem 1
CGIP Registration Form
Author: Manasa B
Date: 20-03-2018
Filename: cg_register.html
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CGIP Registration Form</title>
<link href="cg_base.css" rel="stylesheet" />
<link href="cg_styles.css" rel="stylesheet" />
<link href="cg_forms.css" rel="stylesheet" type="text/css" />
<link href="cg_validate.css" rel="stylesheet" type="text/css" />
<script src="cg_script.js"></script>
</head>
4. Updated the section element with the form contents as -
<section>
<h1>Conference Registration Form</h1>
<p>Required Item (*)</p>
<form action="http://www.example.com/cg/register" target="_blank" method="POST">
Title: <input type="text" name="title" ><br>
First name: <input type="text" name="firstname" required ><br>
Last name: <input type="text" name="lastname" required><br>
Address: <textarea rows="4" cols="50"></textarea> <br>
Company or University: <input type="text" name="lastname"><br>
E-mail: <input type="email" name="email" required><br>
Phone Number: <input type="tel" name="usrtel" required>
ACGIP Membership Number: <input type="txt" name="membership" >
Registration Category: <select>
<option value="ACGIP Member ($695)">ACGIP Member ($695)</option>
</select>
<input type="submit" value="Continue">
</form>
</section>
Hope this was helpful. All the best :)
Note: Answering multiple questions take lot of time and space, hence, I've answered only the 1st four bits of the question
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.