{\rtf1\ansi\ansicpg1252\cocoartf1671\cocoasubrtf600
{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\froman\fcharset0 TimesNewRomanPSMT;\f2\fswiss\fcharset0 ArialMT;
\f3\froman\fcharset0 TimesNewRomanPS-BoldMT;\f4\fmodern\fcharset0 Courier;}
{\colortbl;\red255\green255\blue255;\red47\green84\blue150;\red90\green90\blue90;\red191\green191\blue191;
\red0\green0\blue0;}
{\*\expandedcolortbl;;\csgenericrgb\c18431\c32941\c58824;\csgenericrgb\c35294\c35294\c35294;\csgray\c79525;
\csgray\c0;}
{\*\listtable{\list\listtemplateid1\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid1\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc4\levelnfcn4\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{lower-alpha\}.}{\leveltext\leveltemplateid2\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid1}
{\list\listtemplateid2\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid101\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc4\levelnfcn4\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{lower-alpha\}.}{\leveltext\leveltemplateid102\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid2}
{\list\listtemplateid3\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid201\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc4\levelnfcn4\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{lower-alpha\}.}{\leveltext\leveltemplateid202\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid3}
{\list\listtemplateid4\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid301\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc4\levelnfcn4\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{lower-alpha\}.}{\leveltext\leveltemplateid302\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid4}
{\list\listtemplateid5\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid401\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc4\levelnfcn4\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{lower-alpha\}.}{\leveltext\leveltemplateid402\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid5}
{\list\listtemplateid6\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid501\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc4\levelnfcn4\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{lower-alpha\}.}{\leveltext\leveltemplateid502\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid6}
{\list\listtemplateid7\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid601\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc4\levelnfcn4\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{lower-alpha\}.}{\leveltext\leveltemplateid602\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid7}}
{\*\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}{\listoverride\listid2\listoverridecount0\ls2}{\listoverride\listid3\listoverridecount0\ls3}{\listoverride\listid4\listoverridecount0\ls4}{\listoverride\listid5\listoverridecount0\ls5}{\listoverride\listid6\listoverridecount0\ls6}{\listoverride\listid7\listoverridecount0\ls7}}
{\info
{\author Pirmann,Tammy}}\margl720\margr720\margb720\margt720\vieww17320\viewh21000\viewkind1
\deftab720
\pard\pardeftab720\ri0\partightenfactor0

\f0\fs56 \cf0 \kerning1\expnd-2\expndtw-10
dWeek 5/6 \'96 HTML, JavaScript, and Websites
\f1 \kerning1\expnd-2\expndtw-10
\
\pard\pardeftab720\ri0\sl259\slmult1\sb40\partightenfactor0

\f0\fs26 \cf2 \kerning1\expnd-2\expndtw-10
Lab Answer Sheet\
\pard\pardeftab720\ri0\sl259\slmult1\sa160\partightenfactor0

\fs22 \cf3 \kerning1\expnd3\expndtw15
Due 11:59 pm November 4, 2019
\f1 \kerning1\expnd3\expndtw15
\

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrt\brdrs\brdrw10\brdrcf4 \trbrdrl\brdrs\brdrw10\brdrcf4 \trbrdrr\brdrs\brdrw10\brdrcf4
\clvertalt \clshdrawnil \clwWidth2605\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalt \clshdrawnil \clwWidth8185\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0

\f0\fs28 \cf0 \kerning1\expnd3\expndtw15
Role\cell
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0
\cf0 Student Full Name                                        Lab Section#:
\f1 \kerning1\expnd3\expndtw15
\cell \row

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrl\brdrs\brdrw10\brdrcf4 \trbrdrr\brdrs\brdrw10\brdrcf4
\clvertalt \clshdrawnil \clwWidth2605\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalt \clshdrawnil \clwWidth8185\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0

\f2\fs32 \cf0 \kerning1\expnd3\expndtw15
\cell
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0
\cf0 \cell \row

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrl\brdrs\brdrw10\brdrcf4 \trbrdrr\brdrs\brdrw10\brdrcf4
\clvertalt \clshdrawnil \clwWidth2605\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalt \clshdrawnil \clwWidth8185\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0
\cf0 \kerning1\expnd3\expndtw15
\cell
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0
\cf0 \cell \row

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrl\brdrs\brdrw10\brdrcf4 \trbrdrr\brdrs\brdrw10\brdrcf4
\clvertalt \clshdrawnil \clwWidth2605\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalt \clshdrawnil \clwWidth8185\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0
\cf0 \kerning1\expnd3\expndtw15
\cell
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0
\cf0 \cell \row

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrl\brdrs\brdrw10\brdrcf4 \trbrdrb\brdrs\brdrw10\brdrcf4 \trbrdrr\brdrs\brdrw10\brdrcf4
\clvertalt \clshdrawnil \clwWidth2605\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalt \clshdrawnil \clwWidth8185\clftsWidth3 \clbrdrt\brdrs\brdrw10\brdrcf4 \clbrdrl\brdrs\brdrw10\brdrcf4 \clbrdrb\brdrs\brdrw10\brdrcf4 \clbrdrr\brdrs\brdrw10\brdrcf4 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0
\cf0 \kerning1\expnd3\expndtw15
\cell
\pard\intbl\itap1\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardeftab720\ri0\partightenfactor0
\cf0 \cell \lastrow\row
\pard\pardeftab720\ri0\partightenfactor0

\f3\b\fs24 \cf0 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li360\ri0\partightenfactor0

\f1\b0 \cf0 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\ri0\sl240\sa160\partightenfactor0

\f0\fs26 \cf2 \kerning1\expnd3\expndtw15
Week 5\
\pard\pardeftab720\li720\fi-360\ri0\sl240\sa160\partightenfactor0
\ls1\ilvl1
\fs22 \cf0 \kerning1\expnd0\expndtw0 1.
\f1 \kerning1\expnd3\expndtw15
Which option did your team choose? Why?\uc0\u8232 \
\ls1\ilvl1
\f0 \kerning1\expnd0\expndtw0 2.
\f1 \kerning1\expnd3\expndtw15
Add the link to the repository for this project:\uc0\u8232
\fs24 \cf5 \kerning1\expnd0\expndtw0 \CocoaLigature0 		git@gitlab.cci.drexel.edu:trp74/CI101Week56Lab.git
\fs22 \cf0 \kerning1\expnd3\expndtw15
\CocoaLigature1 \
\pard\pardeftab720\li720\fi-360\ri0\partightenfactor0
\ls1\ilvl1
\f0\fs24 \cf0 \kerning1\expnd0\expndtw0 3.	\kerning1\expnd3\expndtw15
What did you find inside the two folders?\uc0\u8232 		logos and nodes module\u8232 \
\pard\pardeftab720\li720\fi-360\ri0\partightenfactor0
\ls1\ilvl1
\fs32 \cf0 \kerning1\expnd0\expndtw0 4.	\kerning1\expnd3\expndtw15
HTML Edits\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls1\ilvl1
\fs24 \cf0 \kerning1\expnd0\expndtw0 a.	\kerning1\expnd3\expndtw15
Find the comment that says question 4a. Add a screenshot below, or just paste the code including the tags.
\f1 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li720\ri0\partightenfactor0
\cf0 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls2\ilvl1
\f0 \cf0 \kerning1\expnd0\expndtw0 b.	\kerning1\expnd3\expndtw15
Find the comment for question 4b. Add a screenshot below, or just paste the code including the  tags.
\f1 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li720\ri0\partightenfactor0
\cf0 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls3\ilvl1
\f0 \cf0 \kerning1\expnd0\expndtw0 c.	\kerning1\expnd3\expndtw15
Find question 4c and add a value to the src attribute (currently #). Which logo did you choose, and why? Also, paste the edited line of code here.
\f1 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li720\ri0\partightenfactor0
\cf0 \kerning1\expnd3\expndtw15
	\
	cci-1.jpg, because I thought the design was nice.\
	<img src="cci-1.jpg"/>\
\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls4\ilvl1
\f0 \cf0 \kerning1\expnd0\expndtw0 d.	\kerning1\expnd3\expndtw15
Find question 4d and add the relative address of stylesheet.css to the href of the link tag. (hint, unlike the images, stylesheet.css is in the same folder as index.html) Paste the edited tag below. Reload the page in the browser. What changed, if anything?\
\
<link rel="stylesheet" href="stylesheet.css">\
We saw the stylesheet.css in the browser\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls4\ilvl1
\f1 \cf0 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls4\ilvl1
\f0 \cf0 \kerning1\expnd0\expndtw0 e.	\kerning1\expnd3\expndtw15
Add a new row to the table, test it then paste your new line of code below
\f1 \kerning1\expnd3\expndtw15
.
\f0 \kerning1\expnd3\expndtw15
 \uc0\u8232
\f1 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li720\fi-360\ri0\partightenfactor0
\ls4\ilvl1
\f0\fs32 \cf0 \kerning1\expnd0\expndtw0 5.	\kerning1\expnd3\expndtw15
CSS Edits\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls4\ilvl1
\fs24 \cf0 \kerning1\expnd0\expndtw0 a.	\kerning1\expnd3\expndtw15
In stylesheet.css, change the background-color of #header-row. Reload the html page in your browser, what happened? Paste the changed CSS rule here.\
\
	#header-row \{\
    background-color: red;\
	\}\uc0\u8232 \
\ls4\ilvl1\kerning1\expnd0\expndtw0 b.	\kerning1\expnd3\expndtw15
Now change the background-color of .rows? How were the two results different? Based on what you\'92ve learned about id and class, what do you think the # and . mean?
\f1 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li720\ri0\partightenfactor0
\cf0 \kerning1\expnd3\expndtw15
\
	# represents the ID and . Represents the classes\
\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls5\ilvl1
\f0 \cf0 \kerning1\expnd0\expndtw0 c.	\kerning1\expnd3\expndtw15
Find question 5c in stylesheet.css. Notice how the button has a margin of 5px and a padding of 5px. What happens if you change the margin? The padding?\
\
	Margin gives space to the text or files within its border while padding is additional space to the already existing space to a border\
\pard\pardeftab720\li720\ri0\partightenfactor0

\f1 \cf0 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls6\ilvl1
\f0 \cf0 \kerning1\expnd0\expndtw0 d.	\kerning1\expnd3\expndtw15
Find question 5d in stylesheet.css. add a background-image to the body element then paste the rule here
\f1 \kerning1\expnd3\expndtw15
.\
\
background-image: url("logos/cci-1.jpg")\
\pard\pardeftab720\li720\ri0\partightenfactor0
\cf0 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li720\fi-360\ri0\partightenfactor0
\ls7\ilvl1
\f0\fs32 \cf0 \kerning1\expnd0\expndtw0 6.	\kerning1\expnd3\expndtw15
A Little JavaScript
\f1 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li1440\fi-360\ri0\partightenfactor0
\ls7\ilvl1
\f0\fs24 \cf0 \kerning1\expnd0\expndtw0 a.	\kerning1\expnd3\expndtw15
Find question 6 in index.html. Change the content of the onclick from # to
\f4\fs21 \kerning1\expnd3\expndtw15
goToCCI().
\f0\fs24 \kerning1\expnd3\expndtw15
What happens when you press the button now? Look in index.js, can you find what\'92s causing this change?
\f1\fs32 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\li720\ri0\partightenfactor0

\fs24 \cf0 \kerning1\expnd3\expndtw15
\
\pard\pardeftab720\ri0\partightenfactor0
\cf0 \kerning1\expnd3\expndtw15
\
\
\
}