Famous Quotes
DIRECTIONS:Follow along with this step-by-step instruction sheet to create your Famous Quotes web page with the NetBeans IDE. ❏
Launch NetBeans
● Double-click on the NetBeans desktop icon
❏
Open Project
● FILE Menu > Open Project… ● Navigate to COLESTOCK > WEBDEV > my-class-website ● Select ‘Open Project’
❏
Create New Page
● ● ● ●
FILE Menu > New File… Select ‘ HTML5 ’ Category Select ‘ HTML File ’ File Type > Click ‘Next’ Specify Name and Location ○ File Name : famous
● Select ‘Finish’ ● You should now have a new file, under the Site Root of your project, named famous.html ❏
Cleanup the Boilerplate
● Remove the HTML comments from the boilerplate; HTML comments start with ● Remove the contents of the ● Remove the contents of the Refer to the below:
Page 1 of 6
REPLACE: TODO supply a title <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > TODO write content
With THIS: <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
❏
Title Your Page
● Title your page: Famous Quotes Remember, page titles go inside the element which is inside the
❏
Create a Heading For Your Page
● Create a heading, using the element inside the element ● Place inside of it the text: Famous Quotes
❏
Add a Heading For Famous People
● Under the element, create an heading for each of the following famous people and use their name as the element’s content ○ Nelson Mandela ○ Gandhi ○ George Bernard Shaw ○ Frida Kahlo ○ Yogi Berra For example: Nelson Mandela
Page 2 of 6
❏
Save and View Your Work
● Press ‘Save All’ or CTRL+SHIFT+S ● Do one of the following to test your web page: ○ Press SHIFT+F6 ○ Right-click your HTML file then choose ‘Run File’ ● If successful, you should see this page in Google Chrome:
❏
Add an Image For Each Famous Person
● For each famous person, create an element to include an image of them ● Place each element right after their < h2> heading ● For the src attribute, use the following URLs: ○ http://static.colestock.com/images/mandela.jpg ○ http://static.colestock.com/images/gandhi.jpg ○ http://static.colestock.com/images/shaw.jpg ○ http://static.colestock.com/images/frida.jpg ○ http://static.colestock.com/images/yogi.jpg ● For the alt attribute, use the famous person’s name ● For the width attribute, use 300 (pixels) Each section should look something like this:
Nelson Mandela
Page 3 of 6
It should look something like this in your browser:
❏
Create an Ordered List of Each Person’s Top Three Quotes
● Research each of the famous people and find famous quotes that are attributable to them ● After each person’s picture, create an ordered list of their top three famous quotes (in your opinion) Ordered lists are created using the element; each list item is created using a element Each section should look something like this:
“ It ain ’ t over ‘ til it ’ s over ” “ It ’ s deja vu all over again ” “ You can observe a lot by watching ”
Note how, in the above example, there are three ordered list items. Make sure to do this for each famous person! At this point, each section’s HTML should look something like this: Yogi Berra “It ain’t over ‘til it’s over” “It’s deja vu all over again” “You can observe a lot by watching”
Page 4 of 6
❏
Check for Special Characters
● As you can see, certain characters, i.e., apostrophes, quotes, and symbols like the &, for example, cannot be used “as is” in most computer languages ● Go back and replace any of the following in your text with the codes below
❏
Save and View Your Work
● Press ‘Save All’ or CTRL+SHIFT+S ● SHIFT+F6 is the shortcut to test your web page At this point, your page should look something like this:
Page 5 of 6
❏
FTP your Project using FileZilla to your Class Website
● Save your project (CTRL+S) ● Launch FileZilla and login using: ○ Host: www.ahstech.net ○ Username: Student ID # ○ Password: 6-digit birthday
● Click ‘Quickconnect’ ❏
Copy Web Page to Class Website
● Double-click the public_html directory on remote (right) side to navigate inside of it ● Navigate to the COLESTOCK > WEBDEV > my-class-website > public_html directory on the local (left) side (USB drive) ● Select the local famous.html file and copy it into the remote public_html directory by dragging it:
❏
Test Website in Browser
● Test by visiting your website using Google Chrome: http://www.ahstech.net/~XXXXXXX/famous.html (where the Xs represent your Student ID #)
❏
Close the Project
● FILE Menu > Close
Page 6 of 6
Launch NetBeans
● Double-click on the NetBeans desktop icon
❏
Open Project
● FILE Menu > Open Project… ● Navigate to COLESTOCK > WEBDEV > my-class-website ● Select ‘Open Project’
❏
Create New Page
● ● ● ●
FILE Menu > New File… Select ‘ HTML5 ’ Category Select ‘ HTML File ’ File Type > Click ‘Next’ Specify Name and Location ○ File Name : famous
● Select ‘Finish’ ● You should now have a new file, under the Site Root of your project, named famous.html ❏
Cleanup the Boilerplate
● Remove the HTML comments from the boilerplate; HTML comments start with ● Remove the contents of the ● Remove the contents of the Refer to the below:
Page 1 of 6
REPLACE: TODO supply a title <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > TODO write content
With THIS: <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
❏
Title Your Page
● Title your page: Famous Quotes Remember, page titles go inside the element which is inside the
❏
Create a Heading For Your Page
● Create a heading, using the element inside the element ● Place inside of it the text: Famous Quotes
❏
Add a Heading For Famous People
● Under the element, create an heading for each of the following famous people and use their name as the element’s content ○ Nelson Mandela ○ Gandhi ○ George Bernard Shaw ○ Frida Kahlo ○ Yogi Berra For example: Nelson Mandela
Page 2 of 6
❏
Save and View Your Work
● Press ‘Save All’ or CTRL+SHIFT+S ● Do one of the following to test your web page: ○ Press SHIFT+F6 ○ Right-click your HTML file then choose ‘Run File’ ● If successful, you should see this page in Google Chrome:
❏
Add an Image For Each Famous Person
● For each famous person, create an element to include an image of them ● Place each element right after their < h2> heading ● For the src attribute, use the following URLs: ○ http://static.colestock.com/images/mandela.jpg ○ http://static.colestock.com/images/gandhi.jpg ○ http://static.colestock.com/images/shaw.jpg ○ http://static.colestock.com/images/frida.jpg ○ http://static.colestock.com/images/yogi.jpg ● For the alt attribute, use the famous person’s name ● For the width attribute, use 300 (pixels) Each section should look something like this:
Nelson Mandela
Page 3 of 6
It should look something like this in your browser:
❏
Create an Ordered List of Each Person’s Top Three Quotes
● Research each of the famous people and find famous quotes that are attributable to them ● After each person’s picture, create an ordered list of their top three famous quotes (in your opinion) Ordered lists are created using the element; each list item is created using a
Note how, in the above example, there are three ordered list items. Make sure to do this for each famous person! At this point, each section’s HTML should look something like this: Yogi Berra
Page 4 of 6
❏
Check for Special Characters
● As you can see, certain characters, i.e., apostrophes, quotes, and symbols like the &, for example, cannot be used “as is” in most computer languages ● Go back and replace any of the following in your text with the codes below
❏
Save and View Your Work
● Press ‘Save All’ or CTRL+SHIFT+S ● SHIFT+F6 is the shortcut to test your web page At this point, your page should look something like this:
Page 5 of 6
❏
FTP your Project using FileZilla to your Class Website
● Save your project (CTRL+S) ● Launch FileZilla and login using: ○ Host: www.ahstech.net ○ Username: Student ID # ○ Password: 6-digit birthday
● Click ‘Quickconnect’ ❏
Copy Web Page to Class Website
● Double-click the public_html directory on remote (right) side to navigate inside of it ● Navigate to the COLESTOCK > WEBDEV > my-class-website > public_html directory on the local (left) side (USB drive) ● Select the local famous.html file and copy it into the remote public_html directory by dragging it:
❏
Test Website in Browser
● Test by visiting your website using Google Chrome: http://www.ahstech.net/~XXXXXXX/famous.html (where the Xs represent your Student ID #)
❏
Close the Project
● FILE Menu > Close
Page 6 of 6
