Web Assignment
First select Cloud Storage then Buckets
Note: You can PIN cloud products to appear first in drop down menu by
Clicking the pin.
Next hit +CREATE BUCKET
Select a unique name for the bucket
Note: If bucket is already in use it will display an error
Select Region for where to store your data
Select Standard for storage class and leave set as default selected
Un-check box that says Enforce public access prevention so the website can be made public.
Then hit CREATE
Next make the bucket public - select PERMISSIONS
Then Add under Permissions hit GRANT ACCESS
Under Add principals enter allUsers
Under Assign Roles Quick access Cloud Storage
then Storage Object Viewer
Then click SAVE
Click ALLOW PUBLIC ACCESS
You are now ready to build your site
Back to Bucket Details
Click on the 3 dots to the left of the bucket name to edit website configuration
Edit website configurations
Type in index.html in the Index (main) page suffix box then hit save
This allows for anyone visiting your site to load your start up page
You are now ready to build your pages.
First we will build our index.html page.
The index.html page is the default page that is served when you access most web servers.
Can either build locally with notepad or any text editor or use the cloud linux shell.
Cloud Linux shell instructions
First let's get an image for our page
Right click to save image
Create a folder for images
Click into the images folder
Click upload files
Select file to upload
Click on shell access
Create a directory for the website
Welcome to Cloud Shell! Type "help" to get started.
Your Cloud Platform project in this session is set to sentiment-analysis-379200.
Use “gcloud config set project [PROJECT_ID]” to change to a different project.
john_iacovacci1@cloudshell:~ (sentiment-analysis-379200)$
john_iacovacci1@cloudshell:~ (sentiment-analysis-379200)$ mkdir website
Open editor
Highlight the website directory
Right click on website directory and hit new file
Type in the name of your page which should be index.html
My index.html
=========================================================
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightblue;}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
p {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 24px
}
h1 {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 30px
}
</style>
<title>UCONN Stamford
</title>
</head>
<body>
<H1> UCONN Stamford Student Web Site </H1>
<img src="https://storage.googleapis.com/uconn-stamford-website/images/us.jpg" style="width:50%;"">
<P>Helping UCONN Stamford students with Campus Information</P>
<h2>Website Map</h2>
<ul>
<li></li><a href="https://stamford.uconn.edu/">Link to UCONN Stamford Home Page</a></li>
<li></li><a href="https://career.uconn.edu/stamford/">Link to UCONN Stamford Career Center</a></li>
<li></li><a href="https://storage.googleapis.com/uconn-stamford-website/about.html">About UCONN Stamford</a></li>
<li></li><a href="https://storage.googleapis.com/uconn-stamford-website/join.html"> Google Student Developers Club</a></li>
</ul>
</body>
</html>
=========================================================
About.html
========================================================================
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 24px
}
p.solid {border-style: solid;border-width: thick;padding: 70px;}
body {background-color: lightblue;}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
p {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 18px
}
</style>
<title>UCONN Stamford
</title>
</head>
<body>
<H1> Welcome to UCONN Stamford </H1>
<h1>Address: 1 University Pl, Stamford, CT 06901</h1>
<h1>Phone: (203) 251-8400</h1>
<img src="https://uconnhuskies.com/images/logos/site/site.png" style="width:30%;"">
<hr>
<p>Acceptance rate: 92.2% (2022) IPEDS
Acceptance: 92% niche.com
Undergraduate tuition and fees: In-state tuition 16,650 USD, Out-of-state tuition 39,318 USD (2022-23) IPEDS
Typical SAT scores: Reading and Writing 510-620, Math 480-620 (2021-22) IPEDS
Graduation rate: 64.5% (For first-time, full-time in 2021-22)</P>
<h2>Four-Year Degrees at Stamford</h2>
<p class="solid">Business Data Analytics, Communication, Computer Science, Digital Media & Design, Economics, English,
Financial Technology, Financial Management, Bachelor of General Studies, History,
Human Development and Family Sciences, Marketing Management, Political Science, Psychological Sciences, Sociology
</p>
</body>
</html>
==========================================================
join.html
==========================================================
<!DOCTYPE html>
<html>
<style>
body {background-color: lightblue;}
h1 {
color: blue;
text-align: center;
font-family: Verdana, sans-serif;
font-size: 24px
}
p {color: black;
font-family: Verdana, sans-serif;
font-size: 18px
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="https://uconnhuskies.com/images/logos/site/site.png" alt="UCONN Stamford" width="300" height="300">
<h1>UCONN Stamford Student Profile</h1>
<br>
<br>
<form action="contactus.php" method="post">
<p>Student Name : </p>
<p><input type="text" name="my-name" value="Your name"></p>
<p>Major : </p>
<p><input type="text" name="my-major" value="Your major"></p>
<p>What do you want to do?</p>
<p><textarea name="my-comments" rows="5" cols="20">Your comments</textarea></p>
<p>Graduation Year :</p>
<p><input type="radio" name="my-grad" value="2025"> 2025</p>
<p><input type="radio" name="my-grad" value="2026"> 2026</p>
<p><input type="radio" name="my-grad" value="2027"> 2027</p>
<p><input type="radio" name="my-grad" value="2028"> 2028</p>
<p><input type="submit"></p>
</form>
<a href="https://developers.google.com/community/gdsc">Link to Google Student Developers Club</a><br>
<a href="https://uconntact.uconn.edu/organization/gdsc">Join UCONN Stamford Google Club</a>
</body>
</html>
==========================================================
WHEN COMPLETE use
gsutil cp index.html gs://uconnstamford//
to copy pages to your bucket
No comments:
Post a Comment