Month: January 2022

Lecture 2: Intro to HTML & CSS, Divs, Box Model

Posted on | by nayeon

To-do for today’s class

  • Download VS Code (or any other text editors such as Sublime Text or Atom)
  • Download FileZilla (client only)
  • Later during the lecture, copy paste the following text:

Pikachu is a short, chubby rodent Pokémon. It is covered in yellow fur with two horizontal brown stripes on its back. It has a small mouth, long, pointed ears with black tips, brown eyes, and the two red circles on its cheeks contain pouches for electricity storage. It has short forearms with five fingers on each paw, and its feet each have three toes. At the base of its lightning bolt-shaped tail is a patch of brown fur. A female will have a V-shaped notch at the end of its tail, which looks like the top of a heart. It is classified as quadruped, but it has been known to stand and walk on its hind legs.

The anime has shown that wild Pikachu live in groups in forested areas. Pikachu communicates amongst themselves using squeaks and tail-shaking as friendly gestures. Electricity can be used to receive and send messages with each other, as well as other Electric Pokémon species. It raises its tail to check its surroundings and is occasionally struck by lightning in this position. When groups grow, they can inadvertently cause lightning storms. Pikachu is found foraging for berries it roasts with electricity to make them tender enough to eat. A sure sign that Pikachu inhabits a location is patches of burnt grass. It has been observed eating and sometimes destroying telephone poles, wires, and other electronic equipment.

Slides

Link to download PDF version.

Helpful Readings

  • Getting Started with HTML (MDN) – this is the first article of a series of articles about HTML. Click “Next” on this article to continue reading.
  • What is CSS? (MDN) – this is the first article of a series of articles about CSS. Click “Next” on this article to continue reading.

Useful References

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer

Assignment 1: Interests Page

Posted on | by nayeon

Overview

In his assignment, you will write HTML and CSS to build your first webpage about something that you are interested in. You will use <div> tags to create “sections”, CSS to style the page, and need to look through HTML documentation to add HTML tags that are not covered in this lecture.

Resources

You learned the syntax and some example usage of HTML & CSS in lecture. Now you are expected to look up some HTML tags and CSS properties to use on this assignment. These resources are recommended but you may use other sources.

Requirements

HTML & CSS
  1. Create a new HTML file. Name the file interest.html (all lowercase).
  2. Write all CSS in an internal stylesheet. Do not write inline CSS.
  3. Pick something that you are interested in that you would want to create a web page about. It could be a TV show, a movie, your pet, a video game, a hobby — anything you like. You can grab images and text from an external source.
  4. Save images in a folder named images.
  5. At the top, use a heading tag to display the title of the page, which is the topic you chose.
  6. Create two sections (use <div> tag to create each section). The first section must include:
    1. A secondary heading tag that displays “About [name of interest]”
    2. An image that represents the image
    3. At least two paragraphs about the topic. The text can be from an external source.
    4. A table with at least three rows and columns. You will need to research how to create a table with HTML.
      1. Add a background color to the table heading (the first row of the table).
    5. Some spacing inside and outside the section (see sample).
  7. The second section must include:
    1. A secondary heading tag that displays “Why I like [name of interest]”
    2. A bullet point list with at least three bullet points describing why you like this topic.
    3. Some spacing inside and outside the section (see sample).
  8. Both sections must have a border around it and a width set. 
  9. Horizontally center both sections.
  10. Add a background color to the browser.
  11. Bonus: not required but if you have time — add a custom font using Google fonts (https://fonts.google.com/).
  12. Misc requirements
    1. All elements and text need to be readable (i.e. no dark text colors on dark backgrounds).
    2. No text or images should be at edges of containers or text. Add spacing. See sample for details.
    3. Add spacing between the title and the two sections. See sample for details.
  13. Make sure all tags are closed, all attributes have opening and closing double quotes, and no extraneous tags linger. You will be deducted points for syntax errors.
    1. You can use a validator like this one to check for syntax errors: https://validator.w3.org/
Submission/Upload to the server

Please follow the submission requirements below carefully. You will be deducted points for not following submission requirements to the teeth.

  1. Open a browser and go to https://303.itpwebdev.com/cpanel (it will redirect you to https://54-148-150-30.cprapid.com:2083/).
  2. Login with your username and password (this password does not sync with your USC NETID password. You have created this password separately. If you don’t remember your password, post on EdStem and a course staff member will reset it for you).
  3. Scroll down to Files section and click on File Manager. You will see a list of folders and files like below.
  4. Double click to navigate inside the public_html folder.
  5. Create a new folder inside the public_html folder by clicking on the “+Folder” button on the top left.
  6. Name the folder assignment01. Double click it to navigate inside this folder.
  7. Click on “Upload” to upload your interest.html file to this folder.
  8. Drag and drop your interest.html to upload this file to the server.
  9. Create another folder for your images and upload your images to this folder. Note: file/folder names are case sensitive so use the exact same name and letter casing for all folders/files as you did on your computer.
  10. In your browser, go to http://303.itpwebdev.com/~yourusername/assignment1/interest.html to check that the assignment file has been uploaded correctly.
  11. One last thing. In your computer, open up student_page.html that you created in Lab 1. Add a link to this assignment to student_page.html under the heading “Assignments” so that the graders can easily access your completed assignment.
  12. Re-upload the updated student_page.html to the itpwebdev server via cPanel -> Files -> File Manager. If it asks you want to overwrite the previous file, click Yes.
  13. If all the above is completed, go to your student page at http://303.itpwebdev.com/~yourusername/student_page.html and check that the link to this assignment is there. The TAs/graders use this link to access your assignment so make sure this is working! Here is a sample of what it should look like: http://303.itpwebdev.com/~nayeon/student_page.html (screenshot is also below).
  14. (Optional) If you are having trouble uploading to the server and cannot upload on time, add all files for this assignment in a folder, compress it as a .zip file and upload it to Blackboard. On Blackboard, go to Assignments -> Assignment 1: Interests Page. You will get some points deducted for not uploading correctly but at least you will not get a zero.

Sample

Note: the sample below covers more than the requirements.

Lecture 1: Course Overview, Intro to HTML

Posted on | by nayeon

Slides

View Slides
Link to download PDF version.

Helpful Readings Before Next Class

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

Lab 1: Student Page & Server Set-up

Posted on | by nayeon

Overview

This lab serves as a basis and setup for future assignments and labs. You will:

  1. Create your first HTML page and add some basic information about yourself.
  2. Ensure you can access your account on the itpwebdev web server.
  3. Upload your first webpage to “the Internet” via cPanel.

Requirements

HTML & CSS
  1. Create a new HTML file named student_page.html (all lowercase, no spaces)
  2. Using the HTML you learned in lecture, add the following info in your student_page.html. Scroll down below for a sample.
    1. Your Name (bolded, bigger font size than rest of the page, use a heading tag)
    2. Your Email Address
    3. A list of courses you are taking this semester (A bulleted list)
    4. At least three of your favorite websites with correct links to them.
    5. Your favorite color. Set the text of your favorite color to that favorite color. (e.g. blue, green, pink etc)
    6. Some kind of background color that covers the entire page.
    7. An area titled “Labs.” You will be adding links to your future labs here.
    8. An area titled “Assignments.” You will be adding links to your future assignments here.
  3. When complete, you need to upload this to a web server to make this page “live” on the Internet. Follow the instructions below to get access to the itpwebdev web server.
  4. Make sure all tags are closed, all attributes have opening and closing double quotes, and no extraneous tags linger. You will be deducted points for syntax errors.
    1. You can use a validator like this one to check for syntax errors: https://validator.w3.org/

As of 1/13, server is running into issues so you will not see your files under your domain. Skip the requirements below that require you to check something on your domain. Still upload the file on cPanel AND blackboard.

Server set up
  1. Go to https://303.itpwebdev.com/cpanel (it will redirect you to https://54-148-150-30.cprapid.com:2083/).
  2. Log in with your USC NetID as the username. Get the temporary password from Edstem.
  3. Upon login, change your password by scrolling down to the Preferences section. Click Password & Security and change your password to something memorable but hard to guess.
  4. Check that your domain is working. Every ITP 303 student is assigned to a domain that points to your assigned server space. Your domain would be something like: http://303.itpwebdev.com/~youruscusername/ . Replace youruscusername with your USC Net ID and you should see something like the screenshot below:
  5. If your domain is working correctly, you can now upload your completed student_page.html to the server.
Upload your first file to the web server
  1. Open a browser and go to https://303.itpwebdev.com/cpanel (it will redirect you to https://54-148-150-30.cprapid.com:2083/).
  2. Login with your username and password (this password does not sync with your USC NETID password. You have created this password separately. If you don’t remember your password, post on EdStem and a course staff member will reset it for you).
  3. Scroll down to Files section and click on File Manager. You will see a list of folders and files like below.
  4. Double click to navigate inside the public_html folder.
  5. Click on “Upload” to upload your files to your server account.
  6. Drag and drop your student_page.html to upload this file to the server.
  7. Once the upload is completed, in your browser, go to http://303.itpwebdev.com/~yourusername/student_page.html to check that your student_page.html has been successfully uploaded and is now live on the Internet. Replace yourusername with your USC NETID that you use to log into Blackboard and etc. Leave the ~ symbol before your username.
  8. That’s it! This page is now on the Internet and anyone with this URL can access this page. Do not modify this page since the last modified timestamp is considered the time you submitted this file.

Sample

Lecture 1: Course Overview, WWW

Posted on | by nayeon

To-do for today’s class

  • Download VS Code (or any other text editors such as VS Code or Atom)
  • Download FileZilla (client only)
  • Later during lecture, copy paste the following text:

Pikachu is a short, chubby rodent Pokémon. It is covered in yellow fur with two horizontal brown stripes on its back. It has a small mouth, long, pointed ears with black tips, brown eyes, and the two red circles on its cheeks contain pouches for electricity storage. It has short forearms with five fingers on each paw, and its feet each have three toes. At the base of its lightning bolt-shaped tail is a patch of brown fur. A female will have a V-shaped notch at the end of its tail, which looks like the top of a heart. It is classified as a quadruped, but it has been known to stand and walk on its hind legs.

The anime has shown that wild Pikachu live in groups in forested areas. Pikachu communicate amongst themselves using squeaks and tail-shaking as friendly gestures. Electricity can be used to receive and send messages with each other, as well as other Electric Pokémon species. It raises its tail to check its surroundings, and is occasionally struck by lightning in this position. When groups grow, they can inadvertently cause lightning storms. Pikachu is found foraging for berries it roasts with electricity to make them tender enough to eat. A sure sign that Pikachu inhabits a location is patches of burnt grass. It has been observed eating and sometimes destroying telephone poles, wires, and other electronic equipment.

Slides


Link to download PDF version.

Helpful Readings

Completed Code

Coming soon…