My Class Website Famous Quotes

Download PDF
Comment
Report 5 Downloads 114 Views
   

DIRECTIONS: Follow along with this guide to learn more about web design. You will be learning to  author content for the web using HTML, CSS, and JavaScript; afterwards, you will publish your  finished product to your class website. Remember, never include personally identifiable information  in your web projects, e.g., full name, address, mother’s maiden name, cell number, etc. 

  Table of Contents  Getting Started  Creating the Page  Publishing the Page 

Getting Started   

Step 

Detailed Instructions 

❏   Launch Brackets 

■ On Windows:  ○ Start > All Programs > Brackets (or use Desktop Icon)  ■ On Mac:  ○ Finder > Applications > Brackets 

❏   Open "My Class  Website" Project 

■ FILE > Open Folder...  ■ Navigate to and open "my-class-website" folder  

   

 

James Colestock 

My Class Website - Famous Quotes

Page 1 of 3 

Creating the Page   

Step  ❏   Create New Page 

Detailed Instructions  ■ Right/Ctrl-Click "New File" or FILE > New   ■ Right/Ctrl-Click "Rename" to famous.html 

❏   Apply Boilerplate 

■ Type the Basic HTML5 Boilerplate in the code editor:  http://static.colestock.com/Basic_HTML5_Boilerplate.pdf  

❏   Launch Live  Preview 

■ To see the web page as you build it, launch Live Preview:  http://static.colestock.com/Brackets_Live_Preview.pdf 

❏   Title Page 

■ Update contents of element to: Famous Quotes 

❏   Create Page  Heading 

■ Add an element to the page’s  

❏   Create   Famous Person  Subheadings 

■ Add an element, below the , for each of the  following historical figures: Nelson Mandela, Gandhi,   George Bernard Shaw, Frida Kahlo, and Yogi Berra    Example: Nelson Mandela 

❏   Create   Famous Person  Images 

■ Add an element (image) for each famous person  beneath their subheading following the model below:  ○ For srcattribute, use URL from table  ○ For altattribute, use famous person’s name  ○ For widthattribute, use 300 (pixels) 

■ Place inside of it the following text: Famous Quotes 

 

Nelson Mandela 

http://static.colestock.com/images/mandela.jpg 

Gandhi 

http://static.colestock.com/images/gandhi.jpg 

George Bernard Shaw  http://static.colestock.com/images/shaw.jpg  Frida Kahlo 

http://static.colestock.com/images/frida.jpg 

Yogi Berra 

http://static.colestock.com/images/yogi.jpg 

  Nelson Mandela   

❏   Find Noteworthy  Quotations  James Colestock 

■ Using the Internet, 髚nd your three favorite quotations  attributable to each famous person  My Class Website - Famous Quotes

Page 2 of 3 

❏   Create   Famous Person  Quotation Lists  

■ Create an element (ordered list) for each famous person  beneath their which contains three
  • elements (list  items) with their quotations:  ○ Each quotation should begin with “  ○ Each quotation should end with ” 

     
  • “It ain’t over ‘til it’s over”
    •  
  • “It’s deja vu all over again”
    •  
  • “You can observe a lot by watching”
    •    

    ❏   Replace Special  Characters 

    ■ Since many characters cannot be used "as is" in HTML, you  need to go back and replace any of the following in your text  with the codes below: 

      ❏   Review Your Work 

    ■ Your page should have a heading and five "famous person"  subheadings each with their own image and ordered list  containing three quotations; the HTML for each "famous  person" section should resemble the following: 

    Yogi Berra     
  • “It ain’t over ‘til it’s over”
    •  
  • “It’s deja vu all over again”
    •  
  • “You can observe a lot by watching”
    •    

    ❏   Save Page 

    ■ Ctrl+S/⌘ S or FILE > Save  

    Publishing the Page   

    Step  ❏   Publish Page to  Class Website 

    Detailed Instructions  ■ Use FileZilla to FTP famous.html to your class website:  http://static.colestock.com/FileZilla_Publishing.pdf 

     

    James Colestock 

    My Class Website - Famous Quotes

    Page 3 of 3 

    Recommend Documents