COMP 484L California State University Northridge ASCII TinyMCE & HTML Code HW Requirements: To complete this project you will write and submit a zip-file n

COMP 484L California State University Northridge ASCII TinyMCE & HTML Code HW Requirements: To complete this project you will write and submit a zip-file named lab0.zip.

Inside this zip-file should be the following…

• 8 image files named lab0_1.jpg, lab0_2.jpg, lab0_3.jpg, lab0_4.jpg,

lab0_5.jpg, lab0_6.jpg, lab0_7.jpg, and lab0_8.jpg

• A file named lab0.html

• A file named lab0A.html

• A file named lab0B.html

• A file named lab0B.css

All files except the image files will be created as ASCII files (i.e. plain text document with a .html

or .css extension). You may create them with any text editor

(notepad/wordpad/sublime/TextEdit) but you must ensure that they are text files. In other words,

they should not contain anything except ASCII characters (including HTML tags and content).

DO NOT USE A WYSIWYG HTML EDITOR FOR THIS ASSIGNMENT! (Any evidence of using

an editor such as Adobe Dreamweaver, Microsoft Expression Web, SharePoint Designer, or

even TinyMCE to create this document will result in a score of 0 on Lab 0.)

In HTML documents, nested elements should be placed on separate lines and every level of

nesting should have an additional indentation for clarity. For ease of reading, indentation is 4

spaces.

Example:

This is a paragraph

REQUIREMENTS

n lab0.html should have a large (full page-size) table in the body, and nothing else. The

table contains 8 cells, with no borders visible (can use or equivalent

CSS). Each cell of the table contains one of the 8 images: lab0_1.jpg,

lab0_2.jpg, lab0_3.jpg, lab0_4.jpg, lab0_5.jpg, lab0_6.jpg,

lab0_7.jpg, and lab0_8.jpg. (Optional: These 8 images can form one

unified image, as presented during the lab lectures on HTML. This is not necessary, but

you are encouraged to be creative.)

Each of these image-cells is also a functional anchor (hyperlink). Thus, the entire table

implements a basic 1990s-level site-navigation. The hrefs should point to the following

locations…

• 5 of your favorite/most-visited sites on the web (pls do not link to any

inappropriate/obscene images which cannot be shared with accreditors)

• lab0A.html

• lab0B.html

• a mailto: link which goes to your CSUN email (as presented in HTML slides)

n lab0A.html does not have to look very good, as it is not necessarily styled (although it

can be…this is your choice). Lab0A.html is supposed to contain only HTML content.

Sections of the Body:

lab0A.html must have the following:

• Your name at top, using a heading element

• A paragraph describing yourself and why you are at CSUN

• A hierarchical un-ordered list of the classes you took last academic year (Fall 2019

and Spring 2020), organized by major (see example below)

My classes in Fall 2019 and Spring 2020:

• Mathematics

o MATH 150B

o MATH 262

• Computer Science

o COMP 122/L

o COMP 182/L

o COMP 282

o COMP 222

• Music

o MUS 306

o MUS 106HH

• A form which has…

o A text field

o A submit button

o A clear button

When the submit button is pressed, the text entered by the user is sent to

google.com using the GET method. In other words, pressing the submit button

should bring up the Google search results for the keyword(s) entered in the text

field.

Here is a hint for how to do this portion of the assignment…

Note that the query string above contains one name/value pair…

Name: q

Value: timer

• A hyperlink (anchor) that returns you to the main page (lab0.html)

n lab0B.html includes (via link) the CSS rules of lab0B.css

Together these implement a simple blog page for one of your interests. These interests

may be fictional, if you like. Be as creative as you wish, although points are not awarded

for this. J

Each blog entry also has an associated image. (These can be images on the web, or

additional images included in your zip file. Please include only images/content that is

non-offensive and can be shared with accreditors.)

The page also contains a box of links to your Friends in a separate column to the left of

the blog entries. (Your friends may also be fictional if you wish. In this example, mine

are.)

The page is labeled with a title and subtitle. In the example page given, the title is

“Adam’s Metal Journal” and the subtitle is “A Playlist For Every Occasion.”

Note: all images are the property of their respective copyright holders. Images courtesy

http://en.wikipedia.org/wiki/Cause_of_Death_%28alb… and http://en.wikipedia.org/wiki/Holy_Diver

Match the colors and layout of this example as best you can. The emphasis is on layout, so

using the colors black, red, white, lightgreen, purple, and blue is acceptable. Note that the

background color of the entire body of the page is blue.

Abide by the following style specifications for the page:

• There should be divs around every boxed element, allowing you to style the entire

enclosing virtual box. This includes the page title box, the friends box, each blog entry,

and the white box surrounding this content. These sets of divs should be given

appropriate classes to match the corresponding styles.

• The title is a

and the subtitle is a
in the lightgreen title box. These headings should be aligned to the right of that section of the page. The subtitle font can be resized to best match the layout above. • The text of each blog entry should be widened so that it fills the entire width of its section (i.e. “fully justified”). • The title of each blog entry is an
. • The images should float on the right side of a blog entry next to the surrounding text. They must stay within the bounds of the enclosing box, and not bleed into other content. • Each of… the white containing box, friends box, blog boxes, and title box… should have a solid, black border. • The friends box should have a
for “Friends” and a
with hyperlink list items to each friend. The hyperlinks should be underlined and change color to red when mousedover (using the hover pseudoclass). • The friends box is a left-aligned independent div. • Set all padding/margins to best match the example above. Submission: Prior to the deadline upload your file lab0.zip to Canvas. Grade Breakdown: 10%: Submission instructions followed to the letter (all filenames and zip-file structure correct) 10%: HTML has proper indentation and HTML/CSS files are clean and clearly spaced 40%: Web pages render properly in reasonably recent Mozilla Firefox (version 60+) 40%: Web pages contain all required content Cheating: This project (like all projects in this class) is an individual project. You can COMP  484L  Summer  2020  
 
 
 
 
     Lab  0:  The  $8  Webpage    
Due  Monday,  July  27th  2020  at  23:55  
Late  submissions  will  be  penalized  by  10%  per  day  (or  part  thereof),  up  to  10  days.  
After  10  days,  the  assignment  will  be  given  a  0%.  
Purpose:  You  are  going  to  learn  how  to  create  an  HTML  document  from  scratch,  as  well  as  a  
1990s-­era  site  navigation  (image/table),  as  well  as  style  an  HTML  document  using  CSS.  
 
Requirements:  To  complete  this  project  you  will  write  and  submit  a  zip-­file  named  lab0.zip.  
Inside  this  zip-­file  should  be  the  following…  
 
•   8   image   files   named   lab0_1.jpg, lab0_2.jpg, lab0_3.jpg, lab0_4.jpg,
lab0_5.jpg, lab0_6.jpg, lab0_7.jpg, and lab0_8.jpg  
•   A  file  named  lab0.html  
•   A  file  named  lab0A.html  
•   A  file  named  lab0B.html  
•   A  file  named  lab0B.css  
 
All  files  except  the  image  files  will  be  created  as  ASCII  files  (i.e.  plain  text  document  with  a  .html  
or  
.css  
extension).  
You  
may  
create  
them  
with  
any  
text  
editor  
(notepad/wordpad/sublime/TextEdit)  but  you  must  ensure  that  they  are  text  files.  In  other  words,  
they  should  not  contain  anything  except  ASCII  characters  (including  HTML  tags  and  content).  
 
DO  NOT  USE  A  WYSIWYG  HTML  EDITOR  FOR  THIS  ASSIGNMENT!  (Any  evidence  of  using  
an   editor   such   as   Adobe   Dreamweaver,   Microsoft   Expression   Web,   SharePoint   Designer,   or  
even  TinyMCE  to  create  this  document  will  result  in  a  score  of  0  on  Lab  0.)  
 
In   HTML   documents,   nested   elements   should   be   placed   on   separate   lines   and   every   level   of  
nesting   should   have   an   additional   indentation   for   clarity.   For   ease   of   reading,   indentation   is   4  
spaces.    
 
Example:  
This is the title of the web page
This is a paragraph
 
 
 
 
 
 
REQUIREMENTS  
 
n?   lab0.html  should  have  a  large  (full  page-­size)  table  in  the  body,  and  nothing  else.  The  
table  contains  8  cells,  with  no  borders  visible  (can  use    or  equivalent  
CSS).   Each   cell   of   the   table   contains   one   of   the   8   images:   lab0_1.jpg,
lab0_2.jpg,
lab0_3.jpg,
lab0_4.jpg,
lab0_5.jpg,
lab0_6.jpg,
lab0_7.jpg, and lab0_8.jpg. (Optional: These   8   images   can   form   one  
unified  image,  as  presented  during  the  lab  lectures  on  HTML.  This  is  not  necessary,  but  
you  are  encouraged  to  be  creative.)    
 
Each  of  these  image-­cells  is  also  a  functional  anchor  (hyperlink).  Thus,  the  entire  table  
implements   a   basic   1990s-­level   site-­navigation.   The   hrefs   should   point   to   the   following  
locations…  
•   5   of   your   favorite/most-­visited   sites   on   the   web   (pls   do   not   link   to   any  
inappropriate/obscene  images  which  cannot  be  shared  with  accreditors)  
•   lab0A.html  
•   lab0B.html  
•   a  mailto:  link  which  goes  to  your  CSUN  email  (as  presented  in  HTML  slides)  
 
 
n?   lab0A.html  does  not  have  to  look  very  good,  as  it  is  not  necessarily  styled  (although  it  
can  be…this  is  your  choice).  Lab0A.html  is  supposed  to  contain  only  HTML  content.  
 
 
Sections  of  the  Body:  
 
lab0A.html  must  have  the  following:  
 
•   Your  name  at  top,  using  a  heading  element  
 
•   A  paragraph  describing  yourself  and  why  you  are  at  CSUN  
 
•   A  hierarchical  un-­ordered  list  of  the  classes  you  took  last  academic  year  (Fall  2019  
and  Spring  2020),  organized  by  major  (see  example  below)  
 
My classes in Fall 2019 and Spring 2020:
•   Mathematics
o   MATH 150B
o   MATH 262
•   Computer Science
o   COMP 122/L
o   COMP 182/L
o   COMP 282
o   COMP 222
•   Music
o   MUS 306
o   MUS 106HH
 
•   A  form  which  has…  
o   A  text  field  
o   A  submit  button  
o   A  clear  button  
 
When  the  submit  button  is  pressed,  the  text  entered  by  the  user  is  sent  to    
google.com  using  the  GET  method.  In  other  words,  pressing  the  submit  button  
should  bring  up  the  Google  search  results  for  the  keyword(s)  entered  in  the  text  
field.  
 
Here  is  a  hint  for  how  to  do  this  portion  of  the  assignment…  
 
 
 
 
 
Note  that  the  query  string  above  contains  one  name/value  pair…  
 
Name:  q  
Value:  timer  
 
•   A  hyperlink  (anchor)  that  returns  you  to  the  main  page  (lab0.html)  
 
 
 
n?   lab0B.html  includes  (via  link)  the  CSS  rules  of  lab0B.css  
Together  these  implement  a  simple  blog  page  for  one  of  your  interests.  These  interests  
may  be  fictional,  if  you  like.  Be  as  creative  as  you  wish,  although  points  are  not  awarded  
for  this.  J?  
 
Each  blog  entry  also  has  an  associated  image.  (These  can  be  images  on  the  web,  or  
additional  images  included  in  your  zip  file.  Please  include  only  images/content  that  is  
non-­offensive  and  can  be  shared  with  accreditors.)  
 
The  page  also  contains  a  box  of  links  to  your  Friends  in  a  separate  column  to  the  left  of    
the  blog  entries.  (Your  friends  may  also  be  fictional  if  you  wish.  In  this  example,  mine  
are.)    
 
The  page  is  labeled  with  a  title  and  subtitle.  In  the  example  page  given,  the  title  is    
“Adam’s  Metal  Journal”  and  the  subtitle  is  “A  Playlist  For  Every  Occasion.”  
 
 
 
Note:  all  images  are  the  property  of  their  respective  copyright  holders.  Images  courtesy  
http://en.wikipedia.org/wiki/Cause_of_Death_%28album%29  and  http://en.wikipedia.org/wiki/Holy_Diver  
 
 
Match  the  colors  and  layout  of  this  example  as  best  you  can.  The  emphasis  is  on  layout,  so  
using  the  colors  black,  red,  white,  lightgreen,  purple,  and  blue  is  acceptable.  Note  that  the  
background  color  of  the  entire  body  of  the  page  is  blue.    
 
 
Abide  by  the  following  style  specifications  for  the  page:  
•   There   should   be   divs   around   every   boxed   element,   allowing   you   to   style   the   entire  
enclosing  virtual  box.  This  includes  the  page  title  box,  the  friends  box,  each  blog  entry,  
•  
•  
•  
•  
•  
•  
•  
•  
and   the   white   box   surrounding   this   content.   These   sets   of   divs   should   be   given  
appropriate  classes  to  match  the  corresponding  styles.  
The  title  is  a    and  the  subtitle  is  a    in  the  lightgreen  title  box.  These  headings  
should  be  aligned  to  the  right  of  that  section  of  the  page.  The  subtitle  font  can  be  resized  
to  best  match  the  layout  above.  
The  text  of  each  blog  entry  should  be  widened  so  that  it  fills  the  entire  width  of  its  section  
(i.e.  “fully  justified”).  
The  title  of  each  blog  entry  is  an  .  
The   images   should   float   on   the   right   side   of   a   blog   entry   next   to   the   surrounding   text.  
They  must  stay  within  the  bounds  of  the  enclosing  box,  and  not  bleed  into  other  content.  
Each  of…  the  white  containing  box,  friends  box,  blog  boxes,  and  title  box…  should  have  
a  solid,  black  border.  
The  friends  box  should  have  a    for  “Friends”  and  a    with  hyperlink  list  items  to  
each  friend.  The  hyperlinks  should  be  underlined  and  change  color  to  red  when  moused-­
over  (using  the  hover  pseudoclass).  
The  friends  box  is  a  left-­aligned  independent  div.    
Set  all  padding/margins  to  best  match  the  example  above.  
 
 
Submission:  Prior  to  the  deadline  upload  your  file  lab0.zip to  Canvas.    
 
 
Grade  Breakdown:  
10%:  Submission  instructions  followed  to  the  letter  (all  filenames  and  zip-­file  structure  correct)  
 
10%:  HTML  has  proper  indentation  and  HTML/CSS  files  are  clean  and  clearly  spaced  
 
40%:  Web  pages  render  properly  in  reasonably  recent  Mozilla  Firefox  (version  60+)  
 
40%:  Web  pages  contain  all  required  content  
 
 
Cheating:  This  project  (like  all  projects  in  this  class)  is  an  individual  project.  You  can  discuss  
this  project  with  other  students.  You  can  explain  what  needs  to  be  done  and  give  suggestions  
on  how  to  do  it.  You  cannot  share  source  code.  If  two  projects  are  submitted  which  show  
significant  similarity  in  source  code  then  both  students  will  receive  a  0%  (score  of  0)  on  this  
assignment.  Note:  a  student  who  gives  his/her  code  to  another  student  also  receives  this  score  
of  0.  

Purchase answer to see full
attachment