Lab 02 Reverse Engineering
Goal
- Learn phrase elements
- Use your existing HTML knowledge to reverse engineer multiple web pages based on images.
Learn
Phrase Elements - are used to indicate that a block of text has structural meaning.
<em>- emphasized - Italicizes words and emphasizes it to the browser<strong>- makes the appearance bolder and tells the browser this word is important<abbr title="abbreviation">- abbreviation tag - indicates that the content inside is an abbreviation, the title attribute allows the user to hover over the word to see if unabbreviated<mark>- marked tag - highlights the text (defaults to yellow)<i>- is used to only italicize the word or phrase, does not tell the browser this word is important<b>- is only used to bold the word or phrase, does not tell the browser this word is important<sup>- element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.<sub>- element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.
Experiment Try adding the strong, mark, sup, and sub tags to a word(s) in the paragraph below.
HTML
Preview
Practice
Today you will use the images of web pages and content given below, and will turn them into 4 different HTML files. This is known as reverse engineering.
Hint:
- The list of provided tags for each page is in random order.
- The navigation on each page should navigate to the HTML file of the same name.
- The heading for each section below are the names of the html files you should create.
- You do NOT need to add a
style="width"attribute to the images.
Open GitHub Desktop (you may need to download the program again if the computers get wiped.)
Couple of things to check in GitHub Desktop.
- Check to see if it says Pull Origin in the top right tab. If it does, click Pull Origin. Why? A pull occurs if you or a collaborator made a change to the repository and pushed the changes. ALWAYS MAKE SURE TO PULL BEFORE CODING!
- If the computers were wiped you made need to reclone your repository to the computer.
With your cs-318 repository selected, Click open in Visual Studio code.
Create a new folder called lab02
Create four new files called index.html, things-in-reverse.html, palindromes.html, opposites.html in the lab02 folder
index.html
This HTML file will contain the following tags:
list items <li>.
2 meta tags <meta>.
body <body>.
main <main>.
head <head>.
header <header>.
heading 1 <h1>.
heading 2 <h2>.
navigation <nav>.
anchors <a>.
html <html>.
ordered lists <ol>.
title <title>.
doctype <DOCTYPE html>
Content: Reverse Things in Reverse Palindromes Opposites Adjective opposite or contrary to a previous or normal condition acting, operating, or arranged in a manner contrary to the usual so made that the part which normally prints in color appears white against a colored background Verb to turn completely about in position or direction to turn upside down to cause to take an opposite point of view Noun something directly contrary to something else an act or instance of reversing the back part of something
things-in-reverse.html
This HTML file contains the following tags:
heading 3 <h3>.
image <img> (with alt tags).
title <title>.
heading 1 <h1>.
body <body>.
main <main>.
html <html>.
meta <meta>.
anchors <a>.
header <header>.
head <head>.
heading 2 <h2>.
navigation <nav>.
doctype <DOCTYPE html>.
Content:
Reverse Things in Reverse Palindromes Opposites Gifs of Reverse An orange unpeeling alt="An orange unpeeling" Dr. Grant Becomes Unamazed alt="Dr. Grant puts his glasses back on" Reverse Zoom Camera Effect alt="Reverse zoom camera effect from Jaws"
Files Images:
palindromes.html
This HTML file contains the following elements:
unordered lists <ul>.
main <main>.
body <body>.
head <head>.
title <title>.
meta <meta>.
heading 2 <h2>.
image <img> (with alt tags).
paragraphs <p>.
heading 3 <h3>.
heading 1 <h1>.
anchors <a>.
list items <li>.
html <html>.
header <header>.
navigation <nav>.
doctype <DOCTYPE html>.
Content:
Reverse Things in Reverse Palindromes Opposites alt="Cat that looks like a taco" Palindromes Palindromes date back at least to 79 AD, as a palindrome was found as a graffito at Herculaneum, in a city buried by ash in that year. This palindrome, called Sator Square, consists of a sentence written in Latin: "Sator Arepo Tenet Opera Rotas" ("The sower Arepo holds with effort the wheels"). It is remarkable for the fact that the first letters of each word form the first word, the second letters form the second word, and so forth. Hence, it can be arranged into a word square that reads in four different ways: horizontally or vertically from either top left to bottom right or bottom right to top left. As such, they can be referred to as palindromatic. The palindromic Latin riddle "In girum imus nocte et consumimur igni" ("we go in a circle at night and are consumed by fire") describes the behavior of moths. It is likely that this palindrome is from medieval rather than ancient times. The second word, borrowed from Greek, should properly be spelled gyrum. Famous Palindromes Taco cat. Never odd or even. A man, a plan, a canal - Panama. Doc, note: I dissent. A fast never prevents a fatness. I diet on cod. T. Eliot, top bard, notes putrid tang emanating, is sad; I'd assign it a name: gnat dirt upset on drab pot toilet. Palindrome Words Redivider Civic Radar Level Kayak Sentences or Phrases A man, a plan, a canal - Panama Do geese see God? Was it a car or a cat I saw? Go hang a salami, I'm a lasagna hog.
Image Files:
Opposites.html
This HTML file contains the following tags:
phrase elements
<sup><sub><mark><b>.
title <title>.
heading 1 <h1>.
body <body>.
main <main>.
html <html>.
meta <meta>.
anchors <a>.
header <header>.
head <head>.
paragraph <p>.
heading 2 <h2>.
navigation <nav>.
doctype <!DOCTYPE html>.
Content:
Reverse Things in Reverse Palindromes Opposites Opposites "Opposites are not contradictory but complimentary." Big vs. Little High vs. Low Bright vs. Dark Hot vs. Cold Near vs. Far Heavy vs. Light
Final Steps
Validate your HTML.
- Navigate to W3C Validator
- Select the validate by file upload tab at the top of the page
Now look at GitHub Desktop. You should see all of your files listed out in the left column.
Now you are going to commit your changes.
With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.
Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab02 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"
Your are Done with Lab02
Are you someone who needs to double check that it worked? If you want to make sure the push was successful click on the "View on GitHub" button from GitHub Desktop. It will open up your repository in the browser. From there you should be able to see all of your files.
...What if I need to make a change after pushing?
So let's say you have already pushed but noticed an error. No worries, this is easy to fix.
In visual studio code make any changes you need to. Once you are done making corrections. Save.
Go back to GitHub Desktop. You should see your changes to the documents listed there.
Fill out the Summary field again. I suggest saying what you fixed. For example: "Fixed paragraph error on Sea-Jellies"
Click "Commit to main"
Click "Push Origin" and you are done.
On the next page you will drag and drop your Lab2 folder (unzipped) into the box on the Github form.
.
Once your files have finished loading you will see them listed out.
Fill out the field under Commit Changes with "Lab2". Then click Commit Changes.
Now your repository should show Lab2. If you click on Lab2 you will see all of your files. If they are all there you are done with the lab.
