آموزش html

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺑﺮاي ﻣﺜﺎل ﺷﻤﺎ ﻣﻴﺘﻮاﻧﻴﺪ ﻳﻚ روﻧﻮﺷﺖ )‪ (Carbon Copy‬از ﭘﻴﺎم را ﺑﻪ ﻫﻤﺮاه آن ﺑﺮاي ﻛﺲ دﻳﮕﺮي ﺑﻔﺮﺳـﺘﻴﺪ‪ .‬ﻳـﺎ‬ ‫ﻳﻚ ﻧﺴﺨﻪ ﻣﺨﻔﻲ را ﺑﺮاي دﻳﮕﺮي ﺑﻔﺮﺳﺘﻴﺪ‪ .‬ﻳﺎ ﻫﺮ دوي اﻳﻨﻬﺎ را ﺑﻪ ﻛﺎر ﺑﺒﺮﻳﺪ و ﺑﺎﻫﻢ ﺗﺮﻛﻴﺐ ﻛﻨﻴﺪ و‪...‬‬ ‫ﺑﺮاي ﻓﺮﺳﺘﺎدن ﻳﻚ روﻧﻮﺷﺖ از اﻳﻤﻴﻞ ﺑﺎﻳﺪ ﺑﻌﺪ از ﻋﻼﻣﺖ ﺳﻮال از ﻓﺮﻣﺎن =‪ cc‬اﺳـﺘﻔﺎده ﻛـﺮده و ﺑﻌـﺪ آدرس اﻳﻤﻴـﻞ‬ ‫ﻛﺴﺎﻧﻲ ﻛﻪ ﻗﺮار اﺳﺖ روﻧﻮﺷﺖ را درﻳﺎﻓﺖ ﻛﻨﻨﺪ ﺑﻨﻮﻳﺴﻴﺪ‪ .‬در ﺳﻄﺮ زﻳﺮ ﻳﻚ ﻧﻤﻮﻧﻪ از اﻳﻦ ﻧﻮع ﻟﻴﻨﻚ آورده ﺷﺪه اﺳﺖ‪:‬‬ ‫>\"‪<a href=\"mailto:[email protected][email protected]‬‬ ‫>‪</a‬ﻣﺘﻦ ﻟﻴﻨﻚ‬ ‫ﺑﺮاي ﻓﺮﺳﺘﺎدن ﻳﻚ ﻧﺴﺨﻪ ﻣﺨﻔﻲ از اﻳﻤﻴﻞ ﻧﻴﺰ ﻣﺎﻧﻨﺪ ﺑﺎﻻ ﻋﻤﻞ ﻣﻲ ﻛﻨـﻴﻢ ﻓﻘـﻂ ﺑـﻪ ﺟـﺎي ‪ cc‬در ﻓﺮﻣـﺎن ﺑـﺎﻻ از ‪bcc‬‬ ‫اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ‪ .‬ﻣﺎﻧﻨﺪ زﻳﺮ‪:‬‬ ‫>\"‪<a href=\"mailto: [email protected][email protected]‬‬ ‫>‪</a‬ﻣﺘﻦ ﻟﻴﻨﻚ‬ ‫اﮔﺮ ﺧﻮاﺳﺘﻴﺪ ﻳﻚ اﻳﻤﻴﻞ را ﺑﻪ ﭼﻨﺪ ﻧﻔﺮ ﺑﻔﺮﺳﺘﻴﺪ ﺑﺎﻳﺪ ﺑﻴﻦ آدرﺳﻬﺎي ﻣﺨﺘﻠﻒ از ﻛﺎﻣﺎ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬ﻣﺎﻧﻨﺪ زﻳﺮ‪:‬‬ ‫‪<a href=\"mailto:[email protected][email protected],‬‬ ‫>‪</a‬ﻣﺘﻦ ﻟﻴﻨﻚ>\"‪[email protected]‬‬ ‫اﮔﺮ ﻣﻲ ﺧﻮاﻫﻴﺪ ﺑﻴﺶ از ﻳﻜﻲ از اﻳﻦ ﻓﺮﻣﺎﻧﻬﺎ را در ﻳـﻚ ﻟﻴﻨـﻚ اﺳـﺘﻔﺎده ﻛﻨﻴـﺪ ﺑﺎﻳـﺪ ﺑـﺮاي ﻓﺮﻣـﺎن اول از ﻋﻼﻣـﺖ ﺳـﻮال‬ ‫اﺳﺘﻔﺎده ﻛﻨﻴﺪ و ﺑﺮاي ﻓﺮﻣﺎﻧﻬﺎي ﺑﻌﺪ از ﻋﻼﻣﺖ &اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد )در اﻧﺘﻬﺎي ﻓﺮﻣﺎن اول(‪ .‬ﺑﺮاي ﻣﺜﺎل اﮔﺮ ﻣﻲ ﺧﻮاﻫﻴﺪ‬ ‫ﺑﺎ ﻳﻚ ﻟﻴﻨﻚ ﻫﻢ ﻣﻮﺿﻮع ﭘﻴﺎم را ﻣﺸﺨﺺ ﻛﻨﻴﺪ ﻫﻢ ﻳﻚ روﻧﻮﺷﺖ از آن ﺑﺮاي ﻓﺮد دﻳﮕﺮي ﻓﺮﺳﺘﺎده ﺷﻮد ﺑﺎﻳﺪ ﺑـﻪ اﻳﻨﮕﻮﻧـﻪ‬ ‫ﻋﻤﻞ ﻛﻨﻴﺪ‪:‬‬ ‫‪<a href=\"mailto:[email protected]?subject=learn‬‬ ‫>‪</a‬ﻣﺘﻦ ﻟﻴﻨﻚ>\"‪html&[email protected]‬‬‫‪Page50 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ ﻣﻌﺮﻓﻲ ﻓﺮم در ‪ HTML‬و ﺷﻨﺎﺳﻪ ﻫﺎي ﻣﻬﻢ آن‬ ‫اﮔﺮ در ﺻﻔﺤﻪ ﺑﺨﻮاﻫﻴﻢ از ﺑﺎزدﻳﺪ ﻛﻨﻨﺪه اﻃﻼﻋﺎﺗﻲ را درﻳﺎﻓﺖ ﻛﻨﻴﻢ ﺑﺎﻳﺪ از ﻓﺮم ﺑﺮاي اﻳـﻦ ﻛـﺎر اﺳـﺘﻔﺎده ﻛﻨـﻴﻢ‪ .‬ﻓـﺮم ﺑـﺮاي‬ ‫اﻧﺘﻘﺎل اﻃﻼﻋﺎﺗﻲ ﻛﻪ ﺗﻮﺳﻂ ﻛﺎرﺑﺮ وارد ﺷﺪه اﻧﺪ ﺑﻪ ﻳﻚ آدرس ﻣﺸﺨﺺ اﺳﺘﻔﺎده ﻣـﻲ ﺷـﻮد‪ .‬ﻫـﺮ ﻓـﺮم ﻣـﻲ ﺗﻮاﻧـﺪ ﺷـﺎﻣﻞ‬ ‫اﺟﺰاﻳﻲ ﻣﺎﻧﻨﺪ ﻛﺎدر ورودي ﻣﺘﻦ)‪ ، (Text Field‬ﺟﻌﺒﻪ ﻣﺮﺑﻮط ﺑﻪ ورود ﻣﺘﻦ)‪ ، (Text Area‬دﻛﻤﻪ ﻫﺎي رادﻳﻮﻳﻲ‬ ‫)‪ ،(Radio Button‬ﻣﻨﻮﻫﺎي ﻛﺸﻮﻳﻲ‪ ،‬ﭼﻚ ﺑﺎﻛﺲ و ‪ ...‬ﺑﺎﺷﺪ‪.‬‬ ‫در ﺑﺨﺸﻬﺎي ﺑﻌﺪي ﺑﻪ ﺗﻮﺿﻴﺢ اﺟﺰاﻳﻲ ﻛﻪ ﻣﻲ ﺗﻮاﻧﻨﺪ در ﻳﻚ ﻓﺮم ﺑﻪ ﻛﺎر روﻧﺪ ﺧـﻮاﻫﻴﻢ ﭘﺮداﺧـﺖ‪ .‬در اﻳـﻦ ﻗﺴـﻤﺖ ﺑـﻪ ﺗـﮓ‬ ‫>‪<form‬و ﺷﻨﺎﺳﻪ ﻫﺎﻳﻲ ﻛﻪ در آن ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ ﻣﻲ ﭘﺮدازﻳﻢ‪ .‬ﺷﻜﻞ ﻛﻠﻲ اﻳﻦ ﺗﮓ ﻣﻌﻤﻮ ًﻻ ﺑﻪ ﺻﻮرت زﻳﺮ اﺳﺖ‪:‬‬ ‫\"‪<form action=\"formProcessor.php\" method=\"get\" name=\"formName‬‬ ‫>\"‪target=\"_blank‬‬ ‫‪ .................‬اﺟﺰاي ﻣﻮرد اﺳﺘﻔﺎده ﺑﺮاي ﻓﺮم‪.................‬‬ ‫>‪</form‬‬ ‫از ﻣﻴﺎن ﺷﻨﺎﺳﻪ ﻫﺎي ﻣﻮرد اﺳﺘﻔﺎده در ﻓﺮم اﺳﺘﻔﺎده از ﺷﻨﺎﺳﻪ ‪ action‬ﺿﺮوري اﺳـﺖ‪ .‬اﻳـﻦ ﺷﻨﺎﺳـﻪ ﻣﺸـﺨﺺ ﻛﻨﻨـﺪه‬ ‫ﺻﻔﺤﻪ اي اﺳﺖ ﻛﻪ اﻃﻼﻋﺎت ﻓﺮم ﺑﺎﻳﺪ ﺑﻪ آن ارﺳﺎل ﺷﻮد‪ .‬آدرس ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ ﺑﺎﻳﺪ ﺑﻪ ﻋﻨﻮان ﻣﻘﺪار اﻳﻦ ﺷﻨﺎﺳﻪ ﻗـﺮار‬ ‫ﮔﻴﺮد‪ .‬ﻻزم ﺑﻪ ﻳﺎدآوري اﺳﺖ ﻛﻪ ﭘﺲ از اﻳﻨﻜﻪ ﻛﺎرﺑﺮ اﻃﻼﻋﺎت ﻣﻮرد ﻧﻈﺮ را وارد ﻛﺮد و دﻛﻤﻪ ارﺳـﺎل را ﻛﻠﻴـﻚ ﻛـﺮد ﺻـﻔﺤﻪ‬ ‫‪action‬ﺑـــــــــــﺮاي ﭘـــــــــــﺮدازش اﻃﻼﻋـــــــــــﺎت ﺑـــــــــــﺎز ﺧﻮاﻫـــــــــــﺪ ﺷـــــــــــﺪ ‪.‬‬ ‫اﻟﺒﺘﻪ اﺳﺘﻔﺎده از ﺷﻨﺎﺳﻪ ‪ method‬ﻫﻢ اﻫﻤﻴﺖ زﻳﺎدي دارد وﻟﻲ در ﺻﻮرﺗﻲ ﻛﻪ از اﻳﻦ ﺷﻨﺎﺳﻪ اﺳﺘﻔﺎده ﻧﺸـﻮد از ﻣﻘـﺪار‬ ‫ﭘﻴﺶ ﻓﺮض آن ﻳﻌﻨﻲ ‪ get‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫در اﻳﻨﺠﺎ ﻟﻴﺴﺘﻲ از ﺷﻨﺎﺳﻪ ﻫﺎي ﭘﺮ اﺳﺘﻔﺎده در ﺗﮓ ﻓﺮم آورده ﺷﺪه اﺳﺖ‪:‬‬ ‫‪action‬‬ ‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﮔﻔﺘﻪ ﺷﺪ از اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﺻﻔﺤﻪ ﭘﺮدازش ﻛﻨﻨﺪه اﻃﻼﻋﺎت ورودي ﻛﺎرﺑﺮ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬‫‪Page51 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫‪method‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻃﺮﻳﻘﻪ ارﺳﺎل اﻃﻼﻋﺎت را ﺑﻪ ﻓﺎﻳﻞ ‪ action‬ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ و ﺷﺎﻣﻞ دو ﻣﻘﺪار زﻳﺮ اﺳﺖ‪:‬‬ ‫‪ get‬در اﻳﻦ روش اﻃﻼﻋﺎت از ﻃﺮﻳﻖ آدرس ﺻﻔﺤﻪ )ﻧﻮار آدرس( ارﺳﺎل ﻣﻲ ﺷﻮﻧﺪ‪ .‬ﺑﻪ اﻳﻦ ﺻﻮرت ﻛﻪ اﻃﻼﻋﺎت‬ ‫وارد ﺷﺪه در ﻓﺮم ﭘﺲ از ﻳﻚ ﻋﻼﻣﺖ ﺳﺆال ﺑﻌﺪ از آدرس ﺻﻔﺤﻪ ‪ action‬ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ و ارﺳﺎل ﻣﻲ ﺷـﻮﻧﺪ‪.‬‬ ‫از اﻳﻦ روش ﻧﻤﻲ ﺗﻮان ﺑﺮاي اﻃﻼﻋﺎت ﻃﻮﻻﻧﻲ ﻳﺎ ﻛﺎراﻛﺘﺮﻫﺎي ﻏﻴﺮ ‪ ASCII‬اﺳﺘﻔﺎده ﻛﺮد‪ .‬ﻫﻤﭽﻨـﻴﻦ ﺑﻬﺘـﺮ اﺳـﺖ‬ ‫ﺑﺮاي اﻃﻼﻋﺎت ﻣﻬﻢ از ﻗﺒﻴﻞ ﻧﺎم ﻛﺎرﺑﺮي و ﻛﻠﻤﻪ ﻋﺒﻮر ﻫﻢ از اﻳﻦ روش اﺳﺘﻔﺎده ﻧﺸﻮد‪ .‬ﭼﻮن در اﻳـﻦ ﺻـﻮرت اﻳـﻦ‬ ‫اﻃﻼﻋﺎت در ﻧﻮار آدرس ﻣﺮورﮔﺮ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ‪.‬‬ ‫‪ post‬اﻳﻦ روش ﺑﺮاي ارﺳﺎل اﻃﻼﻋﺎت از آدرس ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻧﻤﻲ ﻛﻨﺪ‪ .‬ﻣﺰﻳﺖ اﻳﻦ روش ﻧﺴﺒﺖ ﺑـﻪ روش‬ ‫ﻗﻴﻞ اﻣﻨﻴﺖ ﺑﻴﺸﺘﺮ ﺑﻪ دﻟﻴﻞ ﻋﺪم ﻧﻤﺎﻳﺶ اﻃﻼﻋﺎت ارﺳﺎﻟﻲ ﺑﻪ ﻛﺎرﺑﺮ و ﻫﻤﭽﻨﻴﻦ اﻣﻜﺎن ارﺳﺎل اﻃﻼﻋﺎت ﻃﻮﻻﻧﻲ ﺗﺮ‬ ‫اﺳﺖ‪.‬‬ ‫‪name‬‬ ‫از اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي ﺗﻌﺮﻳﻒ ﻛﺮدن ﻳﻚ ﻧﺎم ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﺑﺮاي ﻓﺮم اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫‪target‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ روش ﺑﺎز ﺷﺪن ﺻﻔﺤﻪ ﭘﺮدازﺷﮕﺮ اﻃﻼﻋﺎت را ﻣﺸﺨﺺ ﻣﻴﻜﻨﺪ‪ .‬ﻣﻲ ﺗﻮان ﺑﺮاي ﻣﻘـﺪار اﻳـﻦ ﺷﻨﺎﺳـﻪ از ﻧـﺎم ﻳـﻚ‬ ‫ﻓﺮﻳﻢ ﺑﺮاي ﺑﺎز ﺷﺪن ﺻﻔﺤﻪ ‪ action‬در آن ﻓﺮﻳﻢ اﺳﺘﻔﺎده ﻛﺮد ﻳﺎ از ﻣﻘﺎدﻳﺮ از ﭘﻴﺶ ﺗﻌﺮﻳﻒ ﺷﺪه زﻳﺮ‪:‬‬ ‫‪ _blank o‬ﺻﻔﺤﻪ ‪ action‬در ﻳﻚ ﭘﻨﺠﺮه ﺟﺪﻳﺪ ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫‪ _self o‬ﺻﻔﺤﻪ ‪ action‬در ﻓﺮﻳﻤﻲ ﻛﻪ ﻓﺮم در آن ﻗﺮار دارد ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫‪ _parent o‬ﺻﻔﺤﻪ ‪ action‬در ‪ frameset‬ﻣﺤﺘﻮي ﻓﺮم ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫‪ _top o‬ﺻﻔﺤﻪ ‪ action‬در ﺗﻤﺎ ﭘﻨﺠﺮه ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬‫‪Page52 ‬‬ ‫ ﺳﺎﺧﺘﻦ ﻛﺎدرﻫﺎي ورودي ﻣﺘﻦ ﺑﺮاي اﺳﺘﻔﺎده در ﻓﺮﻣﻬﺎي‪HTML‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻣﺎ ﺑﺎ اﺳﺘﻔﺎده از ﺗﮓ >‪ <input‬ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﺴﻴﺎري از اﻃﻼﻋﺎﺗﻲ را ﻛﻪ در ﻓﺮﻣﻬﺎ ﻧﻴﺎز دارﻳﻢ از ﻃﺮﻳﻖ ﻛﺎرﺑﺮان ﺑـﻪ دﺳـﺖ‬ ‫آورﻳﻢ‪ .‬در ﺣﻘﻴﻘﺖ اﻳﻦ ﺗﮓ ﺑﺮاي وارد ﻛﺮدن اﻃﻼﻋﺎت ﺗﻮﺳﻂ ﻛﺎرﺑﺮ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬اﻳﻦ ﺗﮓ در‪ HTML4‬ﻧﻴﺎزي ﺑﻪ ﺗﮓ‬ ‫ﭘﺎﻳﺎﻧﻲ ﻧﺪارد‪.‬‬ ‫از ﺗﮓ >‪<input‬ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﺮاي ﺳﺎﺧﺘﻦ ﻛﺎدرﻫﺎي ﻣﺮﺑﻮط ﺑﻪ وارد ﻛﺮدن ﻣـﺘﻦ‪ ،‬ﻛـﺎدر ﻛﻠﻤـﻪ ﻋﺒـﻮر‪ ،‬ﻓﻴﻠـﺪﻫﺎي ﻣﺨﻔـﻲ‪،‬‬ ‫دﻛﻤﻪ ﻫﺎي رادﻳﻮ‪ ،‬ﭼﻚ ﺑﺎﻛﺲ‪ ،‬دﻛﻤﻪ ارﺳﺎل ﻓﺮم‪ ،‬دﻛﻤﻪ ﭘﺎك ﻛﺮدن ﻓﺮم و اﻧﻮاع دﻳﮕﺮ دﻛﻤﻪ ﻫـﺎ و ﭼﻨـﺪ ﻧـﻮع ورودي دﻳﮕـﺮ‬ ‫اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬در اﻳﻨﺠﺎ ﻫﺮ ﻛﺪام از اﻳﻦ ورودي ﻫﺎ را ﺑﻪ ﺻﻮرت ﺟﺪاﮔﺎﻧﻪ ﻣﻮرد ﺑﺮرﺳﻲ ﻗﺮار ﻣﻲ دﻫﻴﻢ‪.‬‬ ‫ﺟﻌﺒﻪ ورودي ﻣﺘﻦ)‪(Text Box‬‬ ‫از اﻳﻦ ﻧﻮع ورودي ﺑﺮاي اﻳﺠﺎد ﻳﻚ ﻛﺎدر ﻳﻚ ﺳﻄﺮي ﺑﺮاي ورود ﻣﺘﻦ اﺳﺘﻔﺎده ﻣـﻲ ﺷـﻮد‪ .‬ﺑـﺮاي ﺳـﺎﺧﺘﻦ اﻳـﻦ ﻛـﺎدر ﺑﺎﻳـﺪ از‬ ‫ﺷﻨﺎﺳﻪ \"‪ type=\"text‬در ﺗﮓ >‪<input‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬در ﺻﻮرت ﺗﻌﺮﻳﻒ ﻧﺸﺪن ﺷﻨﺎﺳﻪ ‪ type‬در ﻣﺮورﮔﺮﻫﺎي‬ ‫ﺟﺪﻳﺪ اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﻪ ﺻـﻮرت ﭘـﻴﺶ ﻓـﺮض ﺑـﻪ ﻛـﺎر ﻣـﻲ رود و ﻳـﻚ ‪ Text Box‬را ﻧﻤـﺎﻳﺶ ﻣـﻲ دﻫـﺪ اﻣـﺎ ﺑﺮﺧـﻲ از‬ ‫ﻣﺮورﮔﺮﻫﺎي ﻗﺪﻳﻤﻲ در ﺻﻮرﺗﻲ ﻛﻪ از اﻳﻦ ﺷﻨﺎﺳﻪ اﺳﺘﻔﺎده ﻧﺸﻮد اﻳﻦ ﻛﺎدر را ﻧﻤﺎﻳﺶ ﻧﻤﻲ دﻫﻨﺪ‪.‬‬ ‫ﻳﻚ ﻧﻤﻮﻧﻪ از ﻛﺪ ﻣﺮﺑﻮط ﺑﻪ اﻳﺠﺎد اﻳﻦ ﻛﺎدر را ﻣﻲ ﺗﻮاﻧﻴﺪ در اﻳﻨﺠﺎ ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪:‬‬ ‫\"‪<input type=\"text\" name=\"testField\" maxlength=\"50\" size=\"30‬‬ ‫>\"ﻛﺎدر ورود ﻣﺘﻦ\"=‪value‬‬ ‫در اﻳﻨﺠﺎ ﺑﻪ ﺗﻮﺿﻴﺢ ﺑﺮﺧﻲ از ﺷﻨﺎﺳﻪ ﻫﺎﻳﻲ ﻛﻪ ﺑﺎ اﻳﻦ ﻧﻮع ورودي ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ ﻣﻲ ﭘﺮدازﻳﻢ‪ .‬ﺑﻪ ﺧـﺎﻃﺮ داﺷـﺘﻪ ﺑﺎﺷـﻴﺪ ﻛـﻪ‬ ‫ﻫﻤﻪ اﻳﻦ ﺷﻨﺎﺳﻪ ﻫﺎ ﺑﺎﻳﺪ در ﺗﮓ >‪<input‬ﺑﻪ ﻛﺎر روﻧﺪ‪.‬‬ ‫‪type‬‬ ‫ﺑﺮاي اﻳﻨﻜﻪ ﻳﻚ ﻛﺎدر ﻣﺘﻨﻲ اﻳﺠﺎد ﻛﻨﻴﻢ ﺑﺎﻳﺪ ﻣﻘﺪار اﻳﻦ ﺷﻨﺎﺳﻪ را ‪ text‬ﻗﺮار دﻫﻴﻢ‪.‬‬‫‪Page53 ‬‬ ‫‪name‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي اﺧﺘﺼﺎص ﻳﻚ ﻧﺎم ﺑﺮاي ورودي ﻣﺮﺑﻮﻃﻪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫‪maxlength‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﺣﺪاﻛﺜﺮ ﺗﻌﺪاد ﻛﺎراﻛﺘﺮﻫﺎي ورودي اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬اﻳﻦ ﺷﻨﺎﺳـﻪ در ﻣـﻮرد ورودي ﻣﺘﻨـﻲ‬ ‫ﻳﻚ ﺳﻄﺮي اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد و ﻣﻘﺪار آن ﺑﺎﻳﺪ ﻋﺪدي ﻣﺜﺒﺖ ﺑﺎﺷﺪ‪.‬‬ ‫‪size‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ در ﻣﻮرد اﻳﻦ ﻧﻮع ورودي ﻃﻮل ﻛﺎدر را ﺑﺮ ﺣﺴﺐ ﺗﻌﺪاد ﻛﺎراﻛﺘﺮ ﻣﺸﺨﺺ ﻣـﻲ ﻛﻨـﺪ‪ .‬اﻟﺒﺘـﻪ ﻣﺮورﮔﺮﻫـﺎي ﻣﺨﺘﻠـﻒ‬ ‫ﻣﻤﻜﻦ اﺳﺖ ﺑﺮ ﺣﺴﺐ ﻧﻮع ﻓﻮﻧﺖ ﻣﻮرد اﺳﺘﻔﺎده اﻧﺪازه اﻳﻦ ﻛﺎدر را ﻣﺎﻧﻨﺪ ﻫﻢ ﻧﺸﺎن ﻧﺪﻫﻨﺪ‪ .‬ﻣﻘﺪار اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺎﻳﺪ ﻋﺪدي‬ ‫ﻣﺜﺒﺖ ﺑﺎﺷﺪ‪ .‬ﻣﻘﺪار ﭘﻴﺶ ﻓﺮض اﻳﻦ ﺷﻨﺎﺳﻪ ‪ 20‬اﺳﺖ‪.‬‬ ‫‪value‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ در ﻣﻮرد ﻛﺎدرﻫﺎي ﻣﺘﻨﻲ‪ ،‬ﻣﺘﻨﻲ را ﻛﻪ ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض در ﻛﺎدر ﻣﺘﻨﻲ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷـﻮد ﻣﻌـﻴﻦ ﻣـﻲ‬ ‫ﻛﻨﺪ‪.‬‬ ‫\"‪readonly=\"readonly‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻓﻘﻂ ﺑﺮاي ﻛﺎدرﻫﺎي ﻣﺘﻨﻲ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد و ﺑﺎﻋﺚ ﻣـﻲ ﺷـﻮد ﺗـﺎ ﻛـﺎرﺑﺮ ﻧﺘﻮاﻧـﺪ ﺗﻐﻴﻴـﺮي در ﻣـﺘﻦ‬ ‫ﻧﻮﺷﺘﻪ ﺷﺪه در اﻳﻦ ﻛﺎدر اﻳﺠﺎد ﻛﻨﺪ اﻣﺎ ﻛﺎرﺑﺮ ﻣﻲ ﺗﻮاﻧﺪ ﻣﺘﻦ را ﻣﺸـﺎﻫﺪه ﻛﻨـﺪ و آﻧـﺮا اﻧﺘﺨـﺎب ﻛﻨـﺪ ‪ .‬ﻣﻘـﺎدﻳﺮ ﻣﺮﺑـﻮط ﺑـﻪ‬ ‫ﻓﻴﻠﺪﻫﺎﻳﻲ ﻛﻪ ﺑﻪ ﺻﻮرت ‪ readonly‬ﻫﺴﺘﻨﺪ اﮔﺮﭼﻪ ﺗﻮﺳﻂ ﻛﺎرﺑﺮ ﺗﻐﻴﻴﺮ ﻧﻤﻲ ﻛﻨﻨﺪ وﻟﻲ ﺑﺎ ارﺳﺎل ﻓﺮم ﺑﻪ ﺳﺮور ارﺳﺎل ﻣﻲ‬ ‫ﺷﻮﻧﺪ‪.‬‬‫‪Page54 ‬‬ ‫\"‪disabled=\"disabled‬‬ ‫از اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي ﻏﻴﺮ ﻓﻌﺎل ﻛﺮدن ﻛﺎدر ﻣﺘﻨﻲ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ ﺻﻮرﺗﻲ ﻛـﻪ ﻛـﺎرﺑﺮ ﻧﻤـﻲ ﺗﻮاﻧـﺪ ﻣﺘﻨـﻲ در اﻳـﻦ ﻛـﺎدر‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺑﻨﻮﻳﺴﺪ و ﻳﺎ ﻣﺘﻦ آﻧـﺮا اﻧﺘﺨـﺎب ﻛﻨـﺪ‪ .‬اﻟﺒﺘـﻪ اﻳـﻦ رﻓﺘـﺎر ﻣﻤﻜـﻦ اﺳـﺖ در ﻣﺮورﮔﺮﻫـﺎي ﻣﺨﺘﻠـﻒ ﺗﻔـﺎوت داﺷـﺘﻪ ﺑﺎﺷـﺪ‪.‬‬ ‫ﻣﻘﺎدﻳﺮ ﻣﺮﺑﻮط ﺑﻪ ﻓﻴﻠﺪﻫﺎﻳﻲ ﻛﻪ ﺑﻪ ﺻﻮرت ‪ disabled‬ﻫﺴﺘﻨﺪ ﺑﺎ ارﺳﺎل ﻓﺮم ﺑﻪ ﺳﺮور ارﺳﺎل ﻧﻤﻲ ﺷﻮﻧﺪ‪.‬‬ ‫ ﻧﺤﻮه ﺳﺎﺧﺘﻦ ﭼﻚ ﺑﺎﻛﺲ ﺑﺮاي اﺳﺘﻔﺎده در ﻓﺮﻣﻬﺎي‪html‬‬ ‫ﭼﻚ ﺑﺎﻛﺲ)‪(checkbox‬‬ ‫ﺑﺮاي ﺳﺎﺧﺘﻦ ﭼﻚ ﺑﺎﻛﺲ ﻫﻢ ﺑﺎﻳﺪ از ﺗﮓ >‪ <input‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬ﺑﺮاي اﻳﻦ ﻛﺎر ﺑﺎﻳـﺪ از ‪ checkbox‬ﺑـﻪ ﻋﻨـﻮان‬ ‫ﻣﻘﺪار ﺷﻨﺎﺳﻪ‪ type‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬در اﻳﻨﺠﺎ ﻳﻚ ﻧﻤﻮﻧﻪ از ﻛﺪي ﻛﻪ ﺑﺮاي ﺳﺎﺧﺘﻦ ﭼﻚ ﺑﺎﻛﺲ آورده ﺷﺪه اﺳﺖ‪:‬‬ ‫>\"ﻣﻘﺪار ﻣﻮرد ﻧﻈﺮ\"=‪<input name=\"someNeme\" type=\"checkbox\" value‬‬ ‫در اﻳﻨﺠﺎ ﺑﻪ ﺗﻮﺿﻴﺢ ﺑﺮﺧﻲ از ﺷﻨﺎﺳﻪ ﻫﺎﻳﻲ ﻛﻪ ﺑﺮاي ﭼﻚ ﺑﺎﻛﺲ ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ ﻣﻲ ﭘﺮدازﻳﻢ‪ .‬ﺑـﻪ ﺧـﺎﻃﺮ داﺷـﺘﻪ ﺑﺎﺷـﻴﺪ ﻛـﻪ‬ ‫ﻫﻤﻪ اﻳﻦ ﺷﻨﺎﺳﻪ ﻫﺎ ﺑﺎﻳﺪ در ﺗﮓ >‪<input‬ﺑﻪ ﻛﺎر روﻧﺪ‪.‬‬ ‫‪type‬‬ ‫ﺑﺮاي اﻳﻨﻜﻪ ﭼﻚ ﺑﺎﻛﺲ ﻣﺘﻨﻲ اﻳﺠﺎد ﻛﻨﻴﻢ ﺑﺎﻳﺪ ﻣﻘﺪار اﻳﻦ ﺷﻨﺎﺳﻪ را ‪ checkbox‬ﻗﺮار دﻫﻴﻢ‪.‬‬ ‫‪name‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي اﺧﺘﺼﺎص ﻳﻚ ﻧﺎم ﺑﺮاي ورودي ﻣﺮﺑﻮﻃﻪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫‪value‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ در ﻣﻮرد در ﻣﻮرد ﭼﻚ ﺑﺎﻛﺲ ﻣﻘﺪاري اﺳﺖ ﻛﻪ در ﺻﻮرت اﻧﺘﺨﺎب ﺷﺪن اﻳﻦ دﻛﻤﻪ ﺑﺎﻳﺪ ﺑﻪ ﺻﻔﺤﻪ ‪action‬‬ ‫اﻧﺘﻘﺎل داده ﺷﻮد‪ .‬اﺳﺘﻔﺎده از اﻳﻦ ﺷﻨﺎﺳﻪ در ﻣﻮرد ﭼﻚ ﺑﺎﻛﺲ و دﻛﻤﻪ ﻫﺎي رادﻳﻮ ﺿﺮوري اﺳﺖ‪.‬‬‫‪Page55 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫\"‪checked=\"checked‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻓﻘﻂ ﺑﺮاي ﭼﻚ ﺑﺎﻛﺲ و دﻛﻤﻪ ﻫﺎي رادﻳﻮ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد و ﺑﺎﻋﺚ ﻣﻲ ﺷﻮد ﺗﺎ در ﻫﻨﮕﺎم ﺑﺎز ﺷﺪن‬ ‫ﺻﻔﺤﻪ اﻳﻦ دﻛﻤﻪ ﻫﺎ ﺑﻪ ﺻﻮرت اﻧﺘﺨﺎب ﺷﺪه ﻧﻤﺎﻳﺶ داده ﺷﻮﻧﺪ‪.‬‬ ‫\"‪disabled=\"disabled‬‬ ‫از اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي ﻏﻴﺮ ﻓﻌﺎل ﭼﻚ ﺑﺎﻛﺲ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ ﺻﻮرﺗﻲ ﻛﻪ ﻛﺎرﺑﺮ ﻧﻤﻲ ﺗﻮاﻧﺪ دﻛﻤﻪ ﻣﺮﺑﻮﻃﻪ را اﻧﺘﺨﺎب ﻛﻨﺪ‬ ‫ﻳﺎ آﻧﺮا ﺑﻪ ﺻﻮرت اﻧﺘﺨﺎب ﻧﺸﺪه در آورد‪ .‬ﻣﻘﺎدﻳﺮ ﻣﺮﺑﻮط ﺑﻪ ﻓﻴﻠﺪﻫﺎﻳﻲ ﻛﻪ ﺑﻪ ﺻﻮرت ‪ disabled‬ﻫﺴﺘﻨﺪ ﺑﺎ ارﺳـﺎل ﻓـﺮم‬ ‫ﺑﻪ ﺳﺮور ارﺳﺎل ﻧﻤﻲ ﺷﻮﻧﺪ‪.‬‬ ‫ ﻧﺤﻮه ﺳﺎﺧﺘﻦ دﻛﻤﻪ ﻫﺎي رادﻳﻮ در ﻓﺮﻣﻬﺎي‪html‬‬ ‫دﻛﻤﻪ ﻫﺎي رادﻳﻮ)‪(Radio Button‬‬ ‫ﺑﺮاي ﺳﺎﺧﺘﻦ دﻛﻤﻪ ﻫﺎي رادﻳﻮ ﻫﻢ ﺑﺎﻳﺪ از ﺗﮓ >‪ <input‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬ﺑـﺮاي اﻳـﻦ ﻛـﺎر ﺑﺎﻳـﺪ از ‪ radio‬ﺑـﻪ ﻋﻨـﻮان‬ ‫ﻣﻘﺪار ﺷﻨﺎﺳﻪ‪ type‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬در اﻳﻨﺠﺎ ﻳﻚ ﻧﻤﻮﻧﻪ از ﻛﺪي ﻛﻪ ﺑﺮاي ﺳﺎﺧﺘﻦ دﻛﻤﻪ رادﻳﻮ آورده ﺷﺪه اﺳﺖ‪:‬‬ ‫>\"ﻣﻘﺪار ﻣﻮرد ﻧﻈﺮ\"=‪<input name=\"someNeme\" type=\"radio\" value‬‬ ‫ﺣﺘﻤﺎً ﺗﺎ ﺑﻪ ﺣﺎل دﻛﻤﻪ ﻫﺎي رادﻳﻮﻳﻲ را ﻛﻪ در ﻳﻚ زﻣﺎن ﻓﻘﻂ ﻳﻜﻲ از آﻧﻬﺎ ﻣﻲ ﺗﻮاﻧﺪ اﻧﺘﺨﺎب ﺷﺪه ﺑﺎﺷﺪ ﻣﺸﺎﻫﺪه ﻛﺮده‬ ‫اﻳﺪ‪ .‬ﺑﺮاي ﺳﺎﺧﺘﻦ اﻳﻦ ﻧﻮع دﻛﻤﻪ ﻫﺎ از ﻛﺪ ﺑﺎﻻ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد ﻫﻤﻪ دﻛﻤﻪ ﻫﺎﻳﻲ ﻛﻪ ﺑﺎﻳﺪ ﺑﻪ اﻳﻦ ﮔﻮﻧﻪ رﻓﺘﺎر ﻛﻨﻨﺪ داراي‬ ‫ﻳﻚ ﻧﺎم ﻫﺴﺘﻨﺪ اﻣﺎ ﻣﻘﺎدﻳﺮ ﻗﺮار ﮔﺮﻓﺘﻪ ﺷﺪه در ﺷﻨﺎﺳﻪ ‪ value‬در آﻧﻬﺎ ﻣﺘﻔﺎوت اﺳﺖ‪ .‬در زﻳﺮ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﺪ ﻣﺮﺑﻮط ﺑﻪ‬‫‪Page56 ‬‬ ‫ﻳﻚ دﺳﺘﻪ دﻛﻤﻪ رادﻳﻮ را ﺑﺒﻴﻨﻴﺪ‪:‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫‪\">Radio Button 1‬ﻣﻘﺪار دﻛﻤﻪ اول\"=‪<input name=\"Neme\" type=\"radio\" value‬‬ ‫>‪<br‬‬ ‫‪\">Radio Button 2‬ﻣﻘﺪار دﻛﻤﻪ دوم\"=‪<input name=\"Neme\" type=\"radio\" value‬‬ ‫>‪<br‬‬ ‫‪\">Radio Button 3‬ﻣﻘﺪار دﻛﻤﻪ ﺳﻮم\"=‪<input name=\"Neme\" type=\"radio\" value‬‬ ‫>‪<br‬‬ ‫در اﻳﻨﺠﺎ ﺑﻪ ﺗﻮﺿﻴﺢ ﺑﺮﺧﻲ از ﺷﻨﺎﺳﻪ ﻫﺎﻳﻲ ﻛﻪ ﺑﺮاي دﻛﻤﻪ ﻫﺎي رادﻳﻮ ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ ﻣﻲ ﭘﺮدازﻳﻢ‪ .‬ﺑﻪ ﺧـﺎﻃﺮ داﺷـﺘﻪ ﺑﺎﺷـﻴﺪ‬ ‫ﻛﻪ ﻫﻤﻪ اﻳﻦ ﺷﻨﺎﺳﻪ ﻫﺎ ﺑﺎﻳﺪ در ﺗﮓ >‪<input‬ﺑﻪ ﻛﺎر روﻧﺪ‪.‬‬ ‫‪type‬‬ ‫ﺑﺮاي اﻳﻨﻜﻪ ﻳﻚ دﻛﻤﻪ رادﻳﻮ اﻳﺠﺎد ﻛﻨﻴﻢ ﺑﺎﻳﺪ ﻣﻘﺪار اﻳﻦ ﺷﻨﺎﺳﻪ را ‪ radio‬ﻗﺮار دﻫﻴﻢ‪.‬‬ ‫‪name‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي اﺧﺘﺼﺎص ﻳﻚ ﻧﺎم ﺑﺮاي ورودي ﻣﺮﺑﻮﻃﻪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫‪value‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ در ﻣﻮرد در ﻣﻮرد دﻛﻤﻪ رادﻳﻮ ﻣﻘﺪاري اﺳﺖ ﻛﻪ در ﺻﻮرت اﻧﺘﺨﺎب ﺷﺪن اﻳﻦ دﻛﻤﻪ ﺑﺎﻳﺪ ﺑﻪ ﺻﻔﺤﻪ ‪action‬‬ ‫اﻧﺘﻘﺎل داده ﺷﻮد‪ .‬اﺳﺘﻔﺎده از اﻳﻦ ﺷﻨﺎﺳﻪ در ﻣﻮرد ﭼﻚ ﺑﺎﻛﺲ و دﻛﻤﻪ ﻫﺎي رادﻳﻮ ﺿﺮوري اﺳﺖ‪.‬‬‫‪Page57 ‬‬ ‫\"‪checked=\"checked‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻓﻘﻂ ﺑﺮاي ﭼﻚ ﺑﺎﻛﺲ و دﻛﻤﻪ ﻫﺎي رادﻳﻮ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد و ﺑﺎﻋﺚ ﻣﻲ ﺷﻮد ﺗﺎ در ﻫﻨﮕﺎم ﺑﺎز ﺷﺪن‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺻــــــﻔﺤﻪ اﻳــــــﻦ دﻛﻤــــــﻪ ﻫــــــﺎ ﺑــــــﻪ ﺻــــــﻮرت اﻧﺘﺨــــــﺎب ﺷــــــﺪه ﻧﻤــــــﺎﻳﺶ داده ﺷــــــﻮﻧﺪ‪.‬‬ ‫ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ در ﻳﻚ دﺳﺘﻪ دﻛﻤﻪ رادﻳﻮ ﻛﻪ در ﺑﺎﻻ ﻳﻚ ﻧﻤﻮﻧﻪ از آن آورده ﺷﺪه اﺳﺖ ﻧﺒﺎﻳـﺪ ﺑـﻴﺶ از ﻳـﻚ دﻛﻤـﻪ‬ ‫داراي اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺎﺷﺪ‪.‬‬ ‫\"‪disabled=\"disabled‬‬ ‫از اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي ﻏﻴﺮ ﻓﻌﺎل دﻛﻤﻪ رادﻳﻮ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ ﺻﻮرﺗﻲ ﻛﻪ ﻛﺎرﺑﺮ ﻧﻤﻲ ﺗﻮاﻧـﺪ دﻛﻤـﻪ ﻣﺮﺑﻮﻃـﻪ را اﻧﺘﺨـﺎب‬ ‫ﻛﻨﺪ‪ .‬ﻣﻘﺎدﻳﺮ ﻣﺮﺑﻮط ﺑﻪ ﻓﻴﻠﺪﻫﺎﻳﻲ ﻛﻪ ﺑﻪ ﺻﻮرت ‪ disabled‬ﻫﺴﺘﻨﺪ ﺑﺎ ارﺳﺎل ﻓﺮم ﺑﻪ ﺳﺮور ارﺳﺎل ﻧﻤﻲ ﺷﻮﻧﺪ‪.‬‬‫‪Page58 ‬‬ ‫ ﺳﺎﺧﺘﻦ دﻛﻤﻪ ﻫﺎ ﺑﺎ اﺳﺘﻔﺎده از ﺗﮓ ‪ input‬در‪html‬‬ ‫دﻛﻤﻪ ارﺳﺎل ﻓﺮم)‪(Submit‬‬ ‫ﺑﺮاي ﺳﺎﺧﺘﻦ دﻛﻤﻪ ارﺳﺎل ﻓﺮم ﺑﺎﻳﺪ از ﺗﮓ >‪ <input‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬ﺑـﺮاي اﻳـﻦ ﻛـﺎر ﺑﺎﻳـﺪ از ‪ submit‬ﺑـﻪ ﻋﻨـﻮان‬ ‫ﻣﻘﺪار ﺷﻨﺎﺳﻪ‪ type‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬در اﻳﻨﺠﺎ ﻳﻚ ﻧﻤﻮﻧﻪ از ﻛﺪي ﻛﻪ ﺑﺮاي ﺳﺎﺧﺘﻦ دﻛﻤﻪ ارﺳﺎل ﻓﺮم آورده ﺷﺪه اﺳﺖ‪:‬‬ ‫>\"‪<input name=\"buttonName\" type=\"submit‬‬ ‫در اﻳﻨﺠﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ دﻛﻤﻪ ارﺳﺎل ﻓﺮم اﻳﺠﺎد ﺷﺪه را ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ اﻟﺒﺘﻪ ﭼﻮن اﻳﻦ دﻛﻤﻪ در ﺗﮓ >‪<form‬ﻗﺮار ﻧﺪارد ﺑـﺎ‬ ‫ﻛﻠﻴﻚ ﻛﺮدن ﺑﺮ روي آن اﺗﻔﺎﻗﻲ رخ ﻧﻤﻲ دﻫﺪ اﻣﺎ اﮔﺮ اﻳﻦ دﻛﻤﻪ در ﺗﮓ ﻓﺮم ﻗﺮار داﺷﺘﻪ ﺑﺎﺷﺪ ﺑﺎ ﻛﻠﻴـﻚ ﻛـﺮدن ﺑـﺮ روي آن‬ ‫اﻃﻼﻋﺎت وارد ﺷﺪه در ﻓﺮم ﺑﻪ ﺻﻔﺤﻪ ‪ action‬ارﺳﺎل ﻣﻲ ﺷﻮﻧﺪ‪.‬‬ ‫دﻛﻤﻪ ﭘﺎك ﻛﺮدن ﻓﺮم)‪(Reset‬‬ ‫ﺑﺮاي ﺳﺎﺧﺘﻦ اﻳﻦ دﻛﻤﻪ ﻫﻢ از ﺗﮓ >‪<input‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد ﺑﻪ اﻳﻦ ﺻـﻮرت ﻛـﻪ ﺑـﺮاي ﺷﻨﺎﺳـﻪ ‪ type‬از ﻣﻘـﺪار‬ ‫‪reset‬اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ‪ .‬در اﻳﻨﺠﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻳﻚ ﻧﻤﻮﻧﻪ از ﻛﺪي را ﻛﻪ ﺑﺮاي ﺳﺎﺧﺘﻦ اﻳـﻦ دﻛﻤـﻪ اﺳـﺘﻔﺎده ﻣـﻲ ﺷـﻮد‬ ‫ﻣﻼﺣﻈﻪ ﻛﻨﻴﺪ‪:‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫>\"‪<input name=\"buttonName\" type=\"reset‬‬ ‫در اﻳﻨﺠﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ دﻛﻤﻪ اي را ﻛﻪ ﺑﺎ اﺳﺘﻔﺎده از ﺗﮓ ﺑﺎﻻ ﺳﺎﺧﺘﻪ ﺷﺪه اﺳﺖ ﻣﻼﺣﻈﻪ ﻛﻨﻴﺪ‪ .‬اﻳﻦ دﻛﻤـﻪ ﻫـﻢ ﻣﺜـﻞ دﻛﻤـﻪ‬ ‫ارﺳﺎل ﻓﺮم ﺑﺎﻳﺪ در ﺗﮓ ﻓﺮم ﻗﺮار داﺷﺘﻪ ﺑﺎﺷﺪ ﺗﺎ ﺑﺎ ﻛﻠﻴﻚ ﺑﺮ روي آن اﻃﻼﻋﺎﺗﻲ ﻛﻪ ﻛﺎرﺑﺮ وارد ﻛـﺮده اﺳـﺖ ﺣـﺬف ﺷـﻮﻧﺪ و‬ ‫ﻓﺮم ﺑﻪ ﺣﺎﻟﺖ اوﻟﻴﻪ ﺑﺎزﮔﺮدد‪.‬‬ ‫ﺳﺎﺧﺘﻦ دﻛﻤﻪ)‪(Button‬‬ ‫ﺑﻪ ﺟﺰ دﻛﻤﻪ ﻫﺎي ارﺳﺎل ﻓﺮم و ﭘﺎك ﻛﺮدن ﻓﺮم دﻛﻤﻪ ﻫﺎﻳﻲ ﻫﻢ وﺟﻮد دارد ﻛـﻪ ﺑﻴﺸـﺘﺮ ﺑـﺮاي اﺳـﺘﻔﺎده در ﺟـﺎوا اﺳـﻜﺮﭘﺖ‬ ‫اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ‪ .‬اﻳﻦ دﻛﻤﻪ ﻫﺎ ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض وﻇﻴﻔﻪ ﺧﺎﺻﻲ را اﻧﺠﺎم ﻧﻤـﻲ دﻫﻨـﺪ و وﻇﻴﻔـﻪ آﻧﻬـﺎ ﺑﺴـﺘﮕﻲ ﺑـﻪ‬ ‫ﻣﻮﻗﻌﻴﺖ و ﻣﻮرد اﺳﺘﻔﺎده آﻧﻬﺎ از ﻧﻈﺮ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺲ دارد‪.‬‬ ‫در اﻳﻨﺠﺎ ﺑﻪ ﺗﻮﺿﻴﺢ ﺑﺮﺧﻲ از ﺷﻨﺎﺳﻪ ﻫﺎﻳﻲ ﻛﻪ ﺑﺮاي دﻛﻤﻪ ﻫﺎي رادﻳﻮ ﺑﻪ ﻛﺎر ﻣﻲ روﻧﺪ ﻣﻲ ﭘﺮدازﻳﻢ‪ .‬ﺑﻪ ﺧـﺎﻃﺮ داﺷـﺘﻪ ﺑﺎﺷـﻴﺪ‬ ‫ﻛﻪ ﻫﻤﻪ اﻳﻦ ﺷﻨﺎﺳﻪ ﻫﺎ ﺑﺎﻳﺪ در ﺗﮓ >‪<input‬ﺑﻪ ﻛﺎر روﻧﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل دﻛﻤﻪ ﻫﺎﻳﻲ ﻛﻪ در ﭘـﺎﻳﻴﻦ ﻫﻤـﻴﻦ ﺻـﻔﺤﻪ ﻗـﺮار‬ ‫دارﻧﺪ و ﺑﺮاي رﻓﺘﻦ ﺑﻪ ﺑﺨﺶ ﻗﺒﻠﻲ ﻳﺎ ﺑﻌﺪي اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ از ﻫﻤﻴﻦ ﻧﻮع دﻛﻤﻪ ﻫﺎ ﻫﺴﺘﻨﺪ‪.‬‬ ‫از ﻛﺪ زﻳﺮ ﺑﺮاي ﺳﺎﺧﺘﻦ اﻳﻦ دﻛﻤﻪ ﻫﺎ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪:‬‬ ‫>\"‪<input name=\"buttonName\" type=\"button‬‬‫‪Page59 ‬‬ ‫در اﻳﻨﺠﺎ ﺑﻪ ﻣﻌﺮﻓﻲ ﺑﺮﺧﻲ از ﺷﻨﺎﺳﻪ ﻫﺎﻳﻲ ﻛﻪ ﺑﺮاي دﻛﻤﻪ ﻫﺎ در ﺗﮓ >‪<input‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ ﻣﻲ ﭘﺮدازﻳﻢ‪:‬‬ ‫‪type‬‬ ‫ﺑــــﺮاي دﻛﻤــــﻪ ارﺳــــﺎل ﻓــــﺮم ﺑﺎﻳــــﺪ از ‪ submit‬ﺑــــﺮاي ﻣﻘــــﺪار اﻳــــﻦ ﺷﻨﺎﺳــــﻪ اﺳــــﺘﻔﺎده ﺷــــﻮد‪.‬‬ ‫ﺑــــﺮاي دﻛﻤــــﻪ ﭘــــﺎك ﻛــــﺮدن ﻓــــﺮم ﺑﺎﻳــــﺪ از ‪ reset‬ﺑــــﺮاي ﻣﻘــــﺪار اﻳــــﻦ ﺷﻨﺎﺳــــﻪ اﺳــــﺘﻔﺎده ﺷــــﻮد‪.‬‬ ‫ﺑﺮاي ﺳﺎﻳﺮ دﻛﻤﻪ ﻫﺎ ﺑﺎﻳﺪ از ‪ button‬ﺑﺮاي ﻣﻘﺪار اﻳﻦ ﺷﻨﺎﺳﻪ اﺳﺘﻔﺎده ﺷﻮد‪.‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫‪name‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي اﺧﺘﺼﺎص ﻳﻚ ﻧﺎم ﺑﻪ ﻫﺮ دﻛﻤﻪ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫‪value‬‬ ‫در ﻣﻮرد دﻛﻤﻪ ﻫﺎ اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﺸﺨﺺ ﻛﻨﻨﺪه ﻣﺘﻨﻲ اﺳﺖ ﻛﻪ در روي دﻛﻤﻪ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬‫‪Page60 ‬‬ ‫\"‪disabled=\"disabled‬‬ ‫از اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي ﻏﻴﺮ ﻓﻌﺎل دﻛﻤﻪ ﻫﺎ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ ﺻﻮرﺗﻲ ﻛﻪ ﻛﺎرﺑﺮ ﻧﻤﻲ ﺗﻮاﻧﺪ دﻛﻤﻪ ﻣﺮﺑﻮﻃـﻪ را ﻛﻠﻴـﻚ ﻛﻨـﺪ‪.‬‬ ‫ﻣﻘﺎدﻳﺮ ﻣﺮﺑﻮط ﺑﻪ ﻓﻴﻠﺪﻫﺎﻳﻲ ﻛﻪ ﺑﻪ ﺻﻮرت ‪ disabled‬ﻫﺴﺘﻨﺪ ﺑﺎ ارﺳﺎل ﻓﺮم ﺑﻪ ﺳﺮور ارﺳﺎل ﻧﻤﻲ ﺷﻮﻧﺪ‪.‬‬ ‫ ﻛﺎدر ﻛﻠﻤﻪ ﻋﺒﻮر و ﻓﻴﻠﺪﻫﺎي ﻣﺨﻔﻲ در ﻃﺮاﺣﻲ ﻓﺮﻣﻬﺎي‪HTML‬‬ ‫ﻛﺎدر ﻛﻠﻤﻪ ﻋﺒﻮر)‪(Password‬‬ ‫اﺣﺘﻤﺎﻻً ﺗﺎ ﺑﻪ ﺣﺎل ﺑﻪ ﺳﺎﻳﺘﻲ ﺑﺮﺧﻮرد ﻛﺮده اﻳﺪ ﻛﻪ ﺑﺮاي ورود ﺑﻪ آن ﻧﻴﺎز ﺑﻪ ﻛﻠﻤﻪ ﻋﺒﻮر داﺷﺘﻪ ﺑﺎﺷﻴﺪ‪ .‬ﺷﻤﺎ ﻣﺴﻠﻤ ًﺎ ﺗﻤﺎﻳـﻞ‬ ‫ﻧﺪارﻳﺪ وﻗﺘﻲ ﻛﻠﻤﻪ ﻋﺒﻮر ﺧﻮد را وارد ﻣﻲ ﻛﻨﻴﺪ ﻛﻠﻤﻪ ﻋﺒﻮر ﺷﻤﺎ ﻧﻤﺎﻳﺶ داده ﺷﻮد و دﻳﮕﺮان ﻗﺎدر ﺑﻪ ﻣﺸـﺎﻫﺪه آن ﺑﺎﺷـﻨﺪ‪.‬‬ ‫ﺑﻪ ﻫﻤﻴﻦ دﻟﻴﻞ ﻣﻌﻤﻮ ًﻻ ﺳﺎﻳﺘﻬﺎ ﺑﺮاي اﻳﻨﻜﻪ ﻛﻠﻤﻪ ﻋﺒﻮر ﻛﺎرﺑﺮان در ﻫﻨﮕﺎم ﭘﺮ ﻛﺮدن ﻓﺮم ﻧﻤﺎﻳﺶ داده ﻧﺸﻮد از ﻧـﻮﻋﻲ ﻛـﺎدر‬ ‫ورودي اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻨﺪ ﻛﻪ ﻛﺎﻣ ًﻼ ﺷﺒﻴﻪ ﻛﺎدري اﺳﺖ ﻛﻪ ﺑﺮاي وارد ﻛﺮدن ﻣﺘﻦ اﺳﺘﻔﺎده ﻣـﻲ ﺷـﻮد )‪ (Text Box‬ﺑـﺎ‬ ‫اﻳﻦ ﺗﻔﺎوت ﻛﻪ ﺑﻪ ﺟﺎي ﻧﻤﺎﻳﺶ ﻛﺎراﻛﺘﺮﻫﺎي ﻛﻠﻤﻪ ﻋﺒﻮر ﺑﻪ ﺟﺎي ﻫﺮ ﻛﺎراﻛﺘﺮ از ﻳﻚ ﻧﻘﻄﻪ ﻳﺎ ﺳﺘﺎره )ﺑﺴﺘﮕﻲ ﺑﻪ ﻣﺮورﮔﺮ دارد(‬ ‫ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﺪ‪.‬‬ ‫ﺑﺮاي ﺳﺎﺧﺘﻦ ﻛﺎدر ﻛﻠﻤﻪ ﻋﺒﻮر ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻛﺪ زﻳﺮ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪:‬‬ ‫>\"‪<input type=\"password\" name=\"someName\" size=\"30‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ در ﻛﺪ ﺑﺎﻻ ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ ﻣﺎ از ﺷﻨﺎﺳﻪ \"‪ size=\"30‬ﺑﺮاي اﻳﻦ ﻛـﺎدر اﺳـﺘﻔﺎده ﻛـﺮدﻳﻢ‪ .‬ﺗﻘﺮﻳﺒـ ًﺎ ﻫﻤـﻪ‬ ‫ﺷﻨﺎﺳﻪ ﻫﺎﻳﻲ ﻛﻪ ﺑﺮاي ﻛﺎدرﻫﺎي ﻣﺘﻨﻲ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮﻧﺪ در ﻣﻮرد ﻛﺎدر ﻛﻠﻤﻪ ﻋﺒﻮر ﻫﻢ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﻫﺴﺘﻨﺪ ‪.‬‬ ‫ﻓﻴﻠﺪﻫﺎي ﻣﺨﻔﻲ)‪(Hidden Fields‬‬ ‫ﻣﻤﻜﻦ اﺳﺖ ﺑﺮاي ﺷﻤﺎ ﭘﻴﺶ آﻣﺪه ﺑﺎﺷﺪ ﻛﻪ ﺑﺨﻮاﻫﻴﺪ ﻗﺴﻤﺘﻲ از اﻃﻼﻋﺎت ﺑﻪ ﻫﻤﺮاه ﻓﺮم ارﺳﺎل ﺷﻮﻧﺪ وﻟﻲ ﻛﺎرﺑﺮ آﻧﻬﺎ را‬ ‫ﻣﺸﺎﻫﺪه ﻧﻜﻨﺪ و ﻧﻴﺎزي ﻧﺒﺎﺷﺪ آﻧﻬﺎ را وارد ﻛﻨﺪ‪ .‬ﺑﺮاي اﻳﻦ ﻛﺎر ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻓﻴﻠﺪﻫﺎي ﻣﺨﻔﻲ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬ﻛﺪ زﻳـﺮ ﻣﺮﺑـﻮط‬ ‫ﺑﻪ ﻳﻚ ﻓﻴﻠﺪ ﻣﺨﻔﻲ اﺳﺖ‪:‬‬ ‫> \"اﻃﻼﻋﺎت ﻣﻮرد ﻧﻈﺮ ﺷﻤﺎ\"=‪<input type=\"hidden\"name=\"FieldName\" value‬‬‫‪Page61 ‬‬ ‫در ﻛﺪ ﺑﺎﻻ ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﻘﺪار ﻣﻮرد ﻧﻈﺮ ﺧﻮد را در ﻗﺎﻟﺐ ﺷﻨﺎﺳﻪ ‪ value‬ﺑﻪ ﺻـﻔﺤﻪ ‪ action‬ارﺳـﺎل ﻛﻨﻴـﺪ ﺑـﺪون‬ ‫اﻳﻨﻜﻪ در ﺻﻔﺤﻪ ﻧﻤﺎﻳﺶ داده ﺷﻮد‪.‬‬ ‫ ﻛﺎدر ﻣﺘﻨﻲ ﺑﺎ ﺑﻴﺶ از ﻳﻚ ﺳﻄﺮ)‪(Text Area‬‬ ‫از ﻳﻚ ‪ Text Area‬ﻛﺎرﺑﺮان ﻣﻲ ﺗﻮاﻧﻨﺪ ﺑﺮاي وارد ﻛﺮدن ﺗﻌﺪاد ﻧﺎﻣﺤﺪودي ﻛﺎراﻛﺘﺮ در ﺑﻴﺶ از ﻳﻚ ﺳﻄﺮ وارد ﻛﻨﻨﺪ‪ .‬ﺑﻬﺘﺮ‬ ‫اﺳﺖ ﺗﺎ ﺑﺮاي ﻣﺘﻨﻬﺎي ﻃﻮﻻﻧﻲ ﺑﻪ ﺟﺎي ‪ Text Box‬از ‪ Text Area‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ ﺗﺎ ﻛﺎرﺑﺮان راﺣﺘﺘﺮ ﺑﺘﻮاﻧﻨـﺪ ﻣـﺘﻦ‬ ‫ﺧﻮد را ﻣﺸﺎﻫﺪه ﻛﻨﻨﺪ و ﻳﺎ آﻧﺮا وﻳﺮاﻳﺶ ﻛﻨﻨﺪ‪.‬‬ ‫ﺑﺮاي اﻳﺠﺎد ‪ Text Area‬ﺑﺎﻳﺪ از ﺗﮓ >‪ <textarea‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬اﻳﻦ ﺗﮓ ﺑﺮ ﺧﻼف ﺗﮓ >‪<input‬ﻳـﻚ ﺗـﮓ‬ ‫ﭘﺎﻳﺎﻧﻲ دارد و ﺑﺎﻳﺪ ﺑﻪ وﺳﻴﻠﻪ ﺗﮓ >‪<textarea/‬ﺑﺴﺘﻪ ﺷﻮد‪ .‬در ﻣﺜﺎل زﻳﺮ ﻣـﻲ ﺗﻮاﻧﻴـﺪ ﻛـﺪ ﻣﺮﺑـﻮط ﺑـﻪ ﻳـﻚ ‪Text‬‬ ‫‪Area‬را ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪:‬‬ ‫>\"‪<textarea name=\"someName\" cols=\"40\" rows=\"3‬‬ ‫اﻳﻦ ﻣﺘﻦ ﺑﻪ ﺻﻮرت ﻣﺘﻦ داﺧﻠﻲ ﻛﺎدر ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‬ ‫>‪</textarea‬‬ ‫ﻣﺘﻨﻲ ﻛﻪ ﺑﻴﻦ ﺗﮓ اﺑﺘﺪاﻳﻲ و ﺗﮓ ﭘﺎﻳﺎﻧﻲ ﻳﻚ ‪ Text Area‬ﻧﻮﺷـﺘﻪ ﺷـﻮد ﺑـﻪ ﺻـﻮرت ﭘـﻴﺶ ﻓـﺮض در ﻛـﺎدر ‪Text‬‬ ‫‪Area‬ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪.‬‬ ‫در اﻳﻨﺠﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮﺧﻲ از ﺷﻨﺎﺳﻪ ﻫﺎي ﻗﺎﺑﻞ اﺳﺘﻔﺎده در ﺗﮓ >‪<textarea‬را ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪:‬‬ ‫‪cols‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻋﺮض ﻛﺎدر را ﺑﺮ ﺣﺴﺐ ﺗﻌﺪاد ﻛﺎراﻛﺘﺮ ﺗﻌﻴﻴﻦ ﻣﻲ ﻛﻨﺪ‪ .‬ﻣﻘﺪار اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺎﻳﺪ ﻋﺪدي ﻣﺜﺒﺖ ﺑﺎﺷﺪ‪ .‬اﻟﺒﺘـﻪ اﻳـﻦ‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻋــﺮض ﺑﺴــﺘﮕﻲ ﺑــﻪ اﻧــﺪازه ﻓﻮﻧــﺖ ﺗﻌﺮﻳــﻒ ﺷــﺪه ﺑــﺮاي ﺻــﻔﺤﻪ و ﻣﺮورﮔــﺮ دارد‪ .‬اﺳــﺘﻔﺎده از اﻳــﻦ ﺷﻨﺎﺳــﻪ ﺑــﺮاي ﺗــﮓ‬ ‫>‪<textarea‬اﻟﺰاﻣﻲ اﺳﺖ‪.‬‬ ‫‪rows‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﺸﺨﺺ ﻛﻨﻨﺪه ﺗﻌﺪاد ﺳﻄﺮﻫﺎي ﻗﺎﺑﻞ ﻣﺸﺎﻫﺪه در ﻛﺎدر اﺳـﺖ‪ .‬اﻳـﻦ ﻣﻘـﺪار ﻫـﻢ ﺑﺎﻳـﺪ ﻋـﺪدي ﻣﺜﺒـﺖ ﺑﺎﺷـﺪ‪.‬‬ ‫اﺳﺘﻔﺎده از ﺷﻨﺎﺳﻪ ‪ rows‬ﺑﺮاي ﺗﮓ >‪<textarea‬اﻟﺰاﻣﻲ اﺳﺖ‪.‬‬ ‫‪name‬‬ ‫از اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﻲ ﺗﻮان ﺑﺮاي اﺧﺘﺼﺎص دادن ﻳﻚ ﻧﺎم ﻣﺸﺨﺺ ﺑﻪ ‪ textarea‬اﺳﺘﻔﺎده ﻛﺮد‪.‬‬ ‫\"‪readonly=\"readonly‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻛﺎدر را ﺑﻪ ﺻﻮرت ﻓﻘﻂ ﺧﻮاﻧﺪﻧﻲ در ﻣﻲ آورد و ﻛﺎرﺑﺮ ﻧﻤﻲ ﺗﻮاﻧﺪ ﻣﺘﻦ ﻣﻮﺟﻮد در ﻛﺎدر را ﺗﻐﻴﻴﺮ دﻫﺪ‪.‬‬ ‫\"‪disabled=\"disabled‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻛﺎدر را ﺑﻪ ﺻﻮرت ﻏﻴﺮ ﻓﻌﺎل در ﻣﻲ آورد و ﺑﺎزدﻳﺪ ﻛﻨﻨﺪه ﻧﻤﻲ ﺗﻮاﻧﺪ ﻣﺘﻦ ﻣﻮﺟﻮد در آن را ﺗﻐﻴﻴﺮ دﻫـﺪ ﻳـﺎ آﻧـﺮا‬ ‫اﻧﺘﺨﺎب ﻛﻨﺪ‪) .‬اﻳﻦ رﻓﺘﺎر ﺑﺴﺘﻪ ﺑﻪ ﻣﺮورﮔﺮ ﻣﺘﻔﺎوت اﺳﺖ(‬ ‫ اﺻﻮل ﻧﻮﺷﺘﻦ ﻟﻴﺴﺘﻬﺎي ﻛﺸﻮﻳﻲ ﺑﺮاي اﺳﺘﻔﺎده در ﻓﺮﻣﻬﺎي‪HTML‬‬‫‪Page62 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻟﻴﺴﺘﻬﺎي ﻛﺸﻮﻳﻲ)‪(Select‬‬ ‫ﺑﺮاي ﺳﺎﺧﺘﻦ ﻟﻴﺴﺘﻬﺎي ﻛﺸﻮﻳﻲ ﻛﻪ ﺑﻪ ﻛﺎرﺑﺮان اﺟﺎزه ﻣﻲ دﻫﺪ ﻳﻚ ﻳﺎ ﭼﻨﺪ ﮔﺰﻳﻨﻪ ﻣﻮﺟﻮد در ﻟﻴﺴﺘﻲ را در ﻳـﻚ ﻓـﺮم اﻧﺘﺨـﺎب‬ ‫ﻛﻨﺪ ﺑﺎﻳﺪ از ﺗﮓ >‪<select‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬ﮔﺰﻳﻨﻪ ﻫﺎي ﻣﻮﺟﻮد در اﻳﻦ ﺗﮓ ﺑﻴﻦ >‪ <option‬و >‪ </option‬ﻗﺮار‬ ‫ﻣﻲ ﮔﺮدﻧﺪ و ﭘﺲ از ﮔﺰﻳﻨﻪ ﻫﺎ ﺗﮓ ﭘﺎﻳﺎﻧﻲ ﻟﻴﺴﺖ ﺑﻪ ﺻﻮرت >‪ <select/‬ﻧﻮﺷﺘﻪ ﻣﻲ ﺷﻮد‪.‬‬ ‫در اﻳﻨﺠﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻳﻚ ﻧﻤﻮﻧﻪ از ﻛﺪي را ﻛﻪ ﺑﺎ آن ﻳﻚ ﻟﻴﺴﺖ ﻛﺸﻮﻳﻲ ﺳﺎﺧﺘﻪ ﻣﻲ ﺷﻮد ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪:‬‬ ‫>\"‪<select name=\"someName‬‬ ‫>‪</option‬ﮔﺰﻳﻨﻪ اول> \"‪<option value=\"value 1‬‬ ‫>‪</option‬ﮔﺰﻳﻨﻪ دوم>\"‪<option value=\"value 2‬‬ ‫>‪</option‬ﮔﺰﻳﻨﻪ ﺳﻮم>\"‪<option value=\"value 3‬‬ ‫>‪</select‬‬ ‫ﺑﺎ اﻧﺘﺨﺎب ﻫﺮ ﻳﻚ از ﮔﺰﻳﻨﻪ ﻫﺎي ﻣﻮﺟﻮد در ﻟﻴﺴﺖ و ﻛﻠﻴﻚ ﺑﺮ روي دﻛﻤﻪ ارﺳﺎل ﻓﺮم‪ ،‬ﻣﻘﺪار ﻣﺮﺑﻮط ﺑﻪ آن ﮔﺰﻳﻨﻪ ﺑﻪ ﺻﻔﺤﻪ‬ ‫‪action‬ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬ ‫از ﺷﻨﺎﺳﻪ ﻫﺎي زﻳﺮ ﻣﻲ ﺗﻮان در ﺗﮓ >‪ <select‬اﺳﺘﻔﺎده ﻛﺮد‪:‬‬ ‫‪name‬‬ ‫از اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي ﺗﺨﺼﻴﺺ ﻳﻚ ﻧﺎم ﺑﻪ ﻟﻴﺴﺖ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫‪size‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ ﭼﻪ ﺗﻌﺪادي از ﮔﺰﻳﻨﻪ ﻫﺎ در ﻳﻚ زﻣﺎن ﻗﺎﺑﻞ ﻣﺸـﺎﻫﺪه ﺑﺎﺷـﻨﺪ‪ .‬در واﻗـﻊ رﺗﻔـﺎع ﻟﻴﺴـﺖ را ﺑـﺮ‬ ‫ﺣﺴﺐ ﺗﻌﺪاد ﮔﺰﻳﻨﻪ ﻫﺎ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‪ .‬ﻣﻘﺪار اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺎﻳﺪ ﻋﺪدي ﺑﺰرﮔﺘﺮ از ﺻﻔﺮ ﺑﺎﺷﺪ‪.‬‬‫‪Page63 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫\"‪multiple=\"multiple‬‬ ‫در ﺻﻮرﺗﻲ ﻛﻪ اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﻪ ﺗﮓ >‪<select‬اﺿﺎﻓﻪ ﺿﻮد ﺑﺎزدﻳﺪ ﻛﻨﻨﺪه ﻣﻲ ﺗﻮاﻧـﺪ ﺑـﻴﺶ از ﻳـﻚ ﮔﺰﻳﻨـﻪ از ﮔﺰﻳﻨـﻪ ﻫـﺎي‬ ‫ﻟﻴﺴﺖ را اﻧﺘﺨﺎب ﻛﻨﺪ‪.‬‬ ‫\"‪disabled=\"disabled‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻟﻴﺴﺖ را ﺑﺮاي ﻛﺎرﺑﺮ ﻏﻴﺮ ﻓﻌﺎل ﻣﻲ ﻛﻨﺪ و در ﻧﺘﻴﺠﻪ ﮔﺰﻳﻨﻪ ﻫﺎي آن اﻣﻜﺎن اﻧﺘﺨﺎب ﺷﺪن ﻧﺪارﻧﺪ‪.‬‬ ‫وارد ﻛﺮدن ﮔﺰﻳﻨﻪ ﻫﺎ ﺑﻪ ﻟﻴﺴﺖ ﺑﺎ ﺗﮓ >‪<option‬‬ ‫ﺑﺮاي ﺳﺎﺧﺘﻦ ﮔﺰﻳﻨﻪ ﻫﺎﻳﻲ ﻛﻪ در ﻟﻴﺴﺖ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد ﺑﺎﻳﺪ از ﺗﮓ >‪ <option‬اﺳﺘﻔﺎده ﻛﻨـﻴﻢ‪ .‬ﺑـﺎ اﺳـﺘﻔﺎده از‬ ‫ﻣﻘﺪاري ﻛﻪ ﺑﺮاي اﻳﻦ ﺗﮓ ﺑﺎ اﺳﺘﻔﺎده از ﺷﻨﺎﺳﻪ ‪ value‬ﺗﻌﺮﻳﻒ ﻣﻲ ﻛﻨﻴﻢ ﻣﻲ ﺗـﻮاﻧﻴﻢ در اﻃﻼﻋـﺎت ارﺳـﺎل ﺷـﺪه ﻓـﺮم‬ ‫ﮔﺰﻳﻨﻪ اﻧﺘﺨﺎب ﺷﺪه ﺗﻮﺳﻂ ﺑﺎزدﻳﺪ ﻛﻨﻨﺪه را ﺗﺸﺨﻴﺺ دﻫﻴﻢ‪.‬‬ ‫ﺑﺮاي ﺗﮓ >‪ <option‬ﻫﻢ ﻣﻲ ﺗﻮاﻧﻴﺪ از ﺷﻨﺎﺳﻪ ﻫﺎﻳﻲ اﺳﺘﻔﺎده ﻛﻨﻴﺪ ﻛﻪ در اﻳﻦ ﺟﺎ ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ‪:‬‬ ‫‪value‬‬ ‫اﻳﻦ ﮔﺰﻳﻨﻪ ﻣﺸﺨﺺ ﻛﻨﻨﺪه ﻣﺘﻨﻲ اﺳﺖ ﻛﻪ در ﺻﻮرت اﻧﺘﺨﺎب ﺷﺪن ﮔﺰﻳﻨﻪ ﻣﺮﺑﻮﻃﻪ ﺑـﻪ ﻋﻨـﻮان ﻣﻘـﺪار ﻟﻴﺴـﺖ ﻛﺸـﻮﻳﻲ ﺑـﻪ‬ ‫ﺻﻔﺤﻪ ‪ action‬ارﺳﺎل ﻣﻲ ﺷﻮد‪.‬‬‫‪Page64 ‬‬ ‫\"‪selected=\"selected‬‬ ‫از اﻳﻦ ﮔﺰﻳﻨﻪ ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﮔﺰﻳﻨﻪ اي ﻛﻪ ﺑﻪ ﻫﻨﮕﺎم ﺑﺎز ﻛﺮدن ﺻﻔﺤﻪ ﺑـﻪ ﺻـﻮرت ﭘـﻴﺶ ﻓـﺮض اﻧﺘﺨـﺎب ﺷـﺪه اﺳـﺖ‬ ‫اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬در ﺻﻮرﺗﻲ ﻛﻪ ﺑﺮاي ﻫﻴﭽﻜﺪام از ﮔﺰﻳﻨﻪ ﻫﺎي ﻣﻮﺟﻮد در ﻟﻴﺴﺖ از اﻳﻦ ﺷﻨﺎﺳﻪ اﺳﺘﻔﺎده ﻧﺸﺪه ﺑﺎﺷﺪ ﮔﺰﻳﻨـﻪ‬ ‫اول ﺑﻪ ﻋﻨﻮان ﮔﺰﻳﻨﻪ ﭘﻴﺶ ﻓﺮض اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫دﺳﺘﻪ ﺑﻨﺪي ﮔﺰﻳﻨﻪ ﻫﺎي ﻟﻴﺴﺖ ﻫﺎي ﻛﺸﻮﻳﻲ ﺑﺎ اﺳﺘﻔﺎده از >‪<optgroup‬‬ ‫اﮔﺮ ﻳﻚ ﻟﻴﺴﺖ ﻛﺸﻮﻳﻲ ﻃﻮﻻﻧﻲ دارﻳﺪ ﺗﻮاﻧﻴﺪ ﺑﺮاي ﺳﻬﻮﻟﺖ ﻛﺎر ﺑﺮاي ﺑﺎزدﻳﺪ ﻛﻨﻨﺪه ﮔﺰﻳﻨﻪ ﻫﺎي ﻣﺮﺗﺒﻂ ﺑﺎ ﻫﻢ را در ﻳﻚ دﺳـﺘﻪ‬ ‫ﻗﺮار دﻫﻴﺪ ﺑﻪ ﺻﻮرﺗﻲ ﻛﻪ از ﺳﺎﻳﺮ ﮔﺰﻳﻨﻪ ﻫﺎ ﺟﺪا ﺑﺎﺷﻨﺪ‪ .‬ﺑﺮاي اﻧﺠﺎم اﻳﻦ ﻛﺎر ﻣﻲ ﺗﻮاﻧﻴﺪ از ﺗﮓ >‪ <optgroup‬اﺳـﺘﻔﺎده‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻛﻨﻴـــﺪ‪ .‬ﺑـــﺎ اﺳـــﺘﻔﺎده از اﻳـــﻦ ﺗـــﮓ ﻣـــﻲ ﺗﻮاﻧﻴـــﺪ ﮔﺰﻳﻨـــﻪ ﻫـــﺎي ﻣـــﻮرد ﻧﻈـــﺮ ﺧـــﻮد ﺑـــﺮاي ﻳـــﻚ دﺳـــﺘﻪ را‬ ‫ﺑﻴﻦ >‪ <optgroup‬و >‪ </optgroup‬ﻗﺮار دﻫﻴﺪ‪.‬‬ ‫ﻛﺪ زﻳﺮ ﻳﻚ ﻧﻤﻮﻧﻪ از ﻟﻴﺴﺖ ﻛﺸﻮﻳﻲ را ﻧﺸﺎن ﻣﻲ دﻫﺪ ﻛﻪ ﮔﺰﻳﻨﻪ ﻫﺎ در آن دﺳﺘﻪ ﺑﻨﺪي ﺷﺪه اﻧﺪ‪:‬‬ ‫>‪<select‬‬ ‫>\"ﻋﻨﻮان ﮔﺮوه اول\"=‪<optgroup label‬‬ ‫>‪ </option‬ﮔﺰﻳﻨﻪ اول در ﮔﺮوه اول >\" ‪<option value =\"some value‬‬ ‫>‪ </option‬ﮔﺰﻳﻨﻪ دوم در ﮔﺮوه اول >\"‪<option value =\"saab‬‬ ‫>‪</optgroup‬‬ ‫>\"ﻋﻨﻮان ﮔﺮوه دوم\"=‪<optgroup label‬‬ ‫>‪ </option‬ﮔﺰﻳﻨﻪ اول در ﮔﺮوه دوم >\"‪<option value =\"mercedes‬‬ ‫>‪ </option‬ﮔﺰﻳﻨﻪ دوم در ﮔﺮوه دوم >\"‪<option value =\"audi‬‬ ‫>‪</optgroup‬‬ ‫>‪</select‬‬ ‫اﺳﺘﻔﺎده از ﺷﻨﺎﺳﻪ زﻳﺮ در ﺗﮓ >‪ <optgroup‬اﻟﺰاﻣﻲ اﺳﺖ‪:‬‬ ‫‪label‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﺮاي ﻫﺮ ﮔﺮوه از ﮔﺰﻳﻨﻪ ﻫﺎ ﻳﻚ ﻋﻨﻮان ﻳﺎ ﺑﺮﭼﺴﺐ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ ﻛﻪ در ﻟﻴﺴـﺖ در ﺑـﺎﻻي ﻫـﺮ ﮔـﺮوه ﻧﻤـﺎﻳﺶ‬ ‫داده ﻣﻲ ﺷﻮد و آن ﮔﺮوه را از ﺳﺎﻳﺮ ﮔﺰﻳﻨﻪ ﻫﺎ ﺟﺪا ﻣﻲ ﻛﻨﺪ‪.‬‬‫‪Page65 ‬‬ ‫ اﺳﺘﻔﺎده از ﻣﻮزﻳﻚ در ﺻﻔﺤﻪ‬ ‫ﺑﺮاي ﻗﺮار دادن ﺻﺪا و ﻣﻮزﻳﻚ در ﺻﻔﺤﻪ دو راه وﺟﻮد دارد‪ :‬راه اول اﻳﻦ اﺳﺖ ﻛﻪ ﺷﻤﺎ ﻣـﻲ ﺗﻮاﻧﻴـﺪ ﻳـﻚ ﻟﻴﻨـﻚ ﺑـﻪ ﻓﺎﻳـﻞ‬ ‫ﻣﻮزﻳﻚ اﻳﺠﺎد ﻛﻨﻴﺪ ﺗﺎ اﻓﺮاد ﺑﺘﻮاﻧﻨﺪ آﻧﺮا داﻧﻠﻮد ﻛﻨﻨﺪ و ﺳﭙﺲ ﺑﻪ آن ﮔﻮش دﻫﻨﺪ‪ .‬راه دوم ﺟﺎﺳﺎزي ﻛﺮدن ﻣﻮزﻳﻚ در ﺻﻔﺤﻪ‬ ‫اﺳﺖ‪.‬‬ ‫در اﺑﺘﺪا ﺑﻪ اوﻟﻴﻦ روش ﻣﻲ ﭘﺮدازﻳﻢ‪:‬‬ ‫ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ ﻳﻚ ﻓﺎﻳﻞ ﺻﻮﺗﻲ ﺑﺎ ﻧﺎم ‪ example.mid‬را در ﺻﻔﺤﻪ ﻗـﺮار دﻫـﻴﻢ‪ .‬در ﺻـﻮرﺗﻲ ﻛـﻪ ﻓﺎﻳـﻞ در‬ ‫ﻫﻤﺎن ﭘﻮﺷﻪ ﺻﻔﺤﻪ ﻗﺮار داﺷﺘﻪ ﺑﺎﺷﺪ ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﻪ اﻳﻦ ﺻﻮرت ﻋﻤﻞ ﻛﻨﻴﻢ‪:‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫>‪</a‬ﻣﺘﻦ ﻟﻴﻨﻚ ﻣﻮزﻳﻚ>\"‪<a href=\"example.mid‬‬ ‫ﺑﻪ اﻳﻦ ﻃﺮﻳﻖ ﻣﻲ ﺗﻮان ﻳﻚ ﻟﻴﻨﻚ ﺑﻪ ﻳﻚ ﻓﺎﻳﻞ ﻣﻮزﻳﻚ اﻳﺠﺎد ﻛﺮد‪ .‬در اﻳﻦ ﻣﺜﺎل ﻣﺎ از ﻳﻚ ﻓﺎﻳﻞ ‪ MIDI‬اﺳﺘﻔﺎده ﻛﺮدﻳﻢ‪،‬‬ ‫ﻫﻤﻴﻦ ﻛﺎر را ﻣﻲ ﺗﻮان ﺑﺎ ﻓﺎﻳﻠﻬﺎﻳﻲ ﺑﺎ ﭘﺴﻮﻧﺪ‪wav ،‬و ‪ aud‬و اﻏﻠﺐ ﻓﺮﻣﺘﻬﺎي ﺻﻮﺗﻲ اﻧﺠﺎم داد‪ .‬ﻛﺎرﺑﺮ ﭘﺲ از ﺑﺎز ﺷﺪن‬ ‫ﺻﻔﺤﻪ ﻟﻴﻨﻜﻲ ﻣﺸﺎﺑﻪ زﻳﺮ را ﺧﻮاﻫﺪ دﻳﺪ ﻛﻪ ﺑﺎ ﻛﻠﻴﻚ ﻛﺮدن ﺑﺮ روي آن داﻧﻠﻮد ﻓﺎﻳﻞ ﻣﻮزﻳﻚ ﺷﺮوع ﻣﻲ ﺷﻮد‪.‬‬ ‫اﺣﺘﻤﺎ ًﻻ ﭘﺲ از اﺗﻤﺎم داﺗﻠﻮد ﻓﺎﻳﻞ ﭘﻨﺠﺮه ﺟﺪﻳﺪي ﺑﺎز ﻣﻲ ﺷﻮد و ﺷﺮوع ﺑﻪ ﭘﺨﺶ ﻓﺎﻳﻞ ﻣﻲ ﻛﻨﺪ‪ .‬ﻛﺎرﺑﺮ ﺑﺴـﺘﻪ ﺑـﻪ‪plug-‬‬ ‫‪in‬ﻫﺎﻳﻲ ﻛﻪ دارد ﻣﻤﻜﻦ اﺳﺖ ﺗﻮاﻧﺎﻳﻲ ﺟﻠﻮ و ﻋﻘﺐ ﺑﺮدن ﻣﻮزﻳﻚ و ﻣﺘﻮﻗﻒ ﻛﺮدن آﻧﺮا ﻧﻴﺰ داﺷﺘﻪ ﺑﺎﺷـﺪ‪ .‬در اﻳـﻦ ﺣﺎﻟـﺖ‬ ‫ﻛﺎرﺑﺮ ﺗﻮاﻧﺎﻳﻲ ذﺧﻴﺮه ﻓﺎﻳﻞ ﺻﻮﺗﻲ را ﻣﺎﻧﻨﺪ ﻳﻚ ﺗﺼﻮﻳﺮ دارد‪ .‬ﻛﺎرﺑﺮ ﻣﻲ ﺗﻮاﻧﺪ ﭘﻨﺠﺮه ﺟﺪﻳﺪ را ﺑﺒﻨـﺪد و ﺑـﻪ اداﻣـﻪ ﺑﺎزدﻳـﺪش از‬ ‫ﺳﺎﻳﺖ ﺑﺪون ﺻﺪاي ﻣﻮزﻳﻚ ﺑﭙﺮدازد‪ .‬ﻣﺸﻜﻞ اﻳﻦ روش اﻳﻦ اﺳﺖ ﻛﻪ ﻛﺎرﺑﺮ ﺑﺎﻳﺪ ﻟﻴﻨﻚ ﻣﻮزﻳﻚ را ﻛﻠﻴﻚ ﻛﻨﺪ و ﺻﺒﺮ ﻛﻨـﺪ ﺗـﺎ‬ ‫آن داﻧﻠﻮد ﺷﻮد‪ .‬اﻟﺒﺘﻪ اﻳﻦ ﻣﺴﺌﻠﻪ در ﻣﻮاﻗﻌﻲ ﻛﻪ ﺷﻤﺎ آﻫﻨﮕﻬﺎي زﻳﺎدي در ﺻﻔﺤﻪ ﺧﻮد دارﻳﺪ ﻣﻲ ﺗﻮاﻧﺪ ﺑﻪ ﻛﺎرﺑﺮ ﻛﻤﻚ ﻛﻨﺪ‬ ‫ﺗﺎ آﻫﻨﮓ ﻣﻮرد ﻋﻼﻗﻪ ﺧﻮد را ﭘﻴﺪا ﻛﻨﺪ‪.‬‬‫‪Page66 ‬‬ ‫ﺟﺎﺳﺎزي ﻣﻮزﻳﻚ در ﺻﻔﺤﻪ‪:‬‬ ‫اﻳﻦ روش ﺑﺮاي ﭘﺨﺶ ﻳﻚ آﻫﻨﮓ در ﺻﻔﺤﻪ روش ﻣﻨﺎﺳﺒﻲ اﺳﺖ ﭼﻮن ﺑﻪ ﻛﺎرﺑﺮ اﺧﺘﻴﺎرات ﺑﻴﺸﺘﺮي ﻧﺴﺒﺖ ﺑﻪ ﻳﻚ ﻟﻴﻨﻚ ﻣﻲ‬ ‫دﻫﺪ‪ .‬در اﻳﻦ روش ﻣﻲ ﺗﺎن راﺑﻂ ﺻﺪا در ﺻﻔﺤﻪ را ﻃﻮري ﺗﻨﻈﻴﻢ ﻛﺮد ﻛﻪ ﺑﻪ ﺻﻮرت ﺧﻮدﻛﺎر ﺷﺮوع ﺑﻪ ﭘﺨﺶ ﻣﻮزﻳﻚ ﻛﻨﺪ و ﻳﺎ‬ ‫ﻣﻮزﻳﻚ را ﺗﻜﺮار ﻛﻨﺪ ﻳﺎ آﻧﺮا ﻓﻘﻂ ﻳﻚ ﺑﺎر ﭘﺨﺶ ﻛﻨﺪ‪ .‬ﺑﺮاي اﺟﺮاي اﻳﻦ روش ﺑﺎﻳﺪ از ﺗﮓ ‪ EMBED‬اﺳـﺘﻔﺎده ﻛﻨﻴـﺪ‪ .‬اﻳـﻦ‬ ‫ﺗﮓ ﻣﺎﻧﻨﺪ ﺗﮓ ﻋﻜﺲ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﻲ ﮔﻴﺮد‪ .‬اﺑﺘﺪا ﺑﺎﻳﺪ ﻣﻨﺒﻊ ﺻﺪا را ﻣﺸﺨﺺ ﻛﻨﻴﻢ و ﺑﻌﺪ در ﺻﻮرت ﻧﻴـﺎز ﺑـﻪ ﺗـﮓ‬ ‫ﻓﺮﻣﺎﻧﻬﺎﻳﻲ را ﺑﺎﻓﺰاﻳﻴﻢ‪.‬‬ ‫ﺑﺮاي ﻧﻤﻮﻧﻪ ﺑﻪ ﺗﮓ زﻳﺮ ﻧﮕﺎه ﻛﻨﻴﺪ‪:‬‬ ‫>\"‪<embed src=\"example.mid‬‬ ‫اﻳﻦ ﺗﮓ ﺑﻪ ﻣﺮورﮔﺮ ﻣﻲ ﮔﻮﻳﺪ ﺗﺎ ﻓﺎﻳﻞ ﺻﻮﺗﻲ را ﻫﻤﺎن ﺟﺎﻳﻲ ﻛﻪ ﺷﻤﺎ ﺗﮓ را ﻗﺮار داده اﻳﺪ در ﺻﻔﺤﻪ ﻗﺮار دﻫﺪ‪ .‬در اﻳﻦ روش‬ ‫ﻧﻴﺰ ﺷﻤﺎ ﻣﺠﺒﻮر ﻧﻴﺴﺘﻴﺪ ﺻﺮﻓﺎً از ﻓﺎﻳﻠﻬﺎي ‪ MIDI‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ و ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻓﺮﻣﺘﻬﺎي دﻳﮕﺮ اﺳﺘﻔﺎده ﻛﻨﻴـﺪ‪ .‬ﻫﻤـﺎﻧﻄﻮر‬ ‫ﻛﻪ ﻣﻲ ﺑﻴﻨﻴﺪ در اﻳﻦ ﺗﮓ ﻓﺮﻣﺎن \" \"=‪ src‬ﻣﺸﺨﺺ ﻛﻨﻨﺪه ﻣﺤﻞ ﻗﺮار ﮔﻴﺮي ﻓﺎﻳﻞ ﺻﻮﺗﻲ در ﺳﺎﻳﺖ ﺷـﻤﺎ اﺳـﺖ‪ .‬ﺷـﻤﺎ‬ ‫ﻣﻲ ﺗﻮاﻧﻴﺪ از آدرس ﻛﺎﻣﻞ ﻓﺎﻳﻞ در اﻳﻨﺠﺎ اﺳﺘﻔﺎده ﻛﻨﻴﺪ ﻳﺎ اﮔﺮ ﻓﺎﻳﻞ و ﺻﻔﺤﻪ اي ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻓﺎﻳﻞ در آن ﺷﻨﻴﺪه ﺷﻮد‬ ‫در ﻳﻚ ﭘﻮﺷﻪ ﻫﺴﺘﻨﺪ ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻧﺎم ﻓﺎﻳﻞ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ اﻳﻦ ﺗﮓ ﻓﺮﻣﺎﻧﻬﺎﻳﻲ اﺿﺎﻓﻪ ﻛﻨﻴﺪ ﺗﺎ ﺑﻬﺘﺮ ﺑﺘﻮاﻧﻴﺪ ﺻﺪاي ﺧﺮوﺟﻲ ﻫﻤﭽﻨﻴﻦ ﻇﺎﻫﺮ ﺻﻔﺤﻪ را ﻛﻨﺘـﺮل ﻛﻨﻴـﺪ‪.‬‬ ‫در اﻳﻨﺠﺎ ﺗﻌﺪادي از اﻳﻦ ﻓﺮﻣﺎﻧﻬﺎ آورده ﺷﺪه اﺳﺖ ﻛﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ از آﻧﻬﺎ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪:‬‬ ‫‪Width‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﺗﻌﻴﻴﻦ ﻛﻨﻨﺪه ﻋﺮض ﻓﺎﻳﻞ ﺻﻮﺗﻲ در ﺻﻔﺤﻪ اﺳﺖ‪ .‬ﺷﻤﺎ ﺑﺎ ﻗﺮار دادن ﻳﻚ ﻋﺪد در ﻣﻘﻴﺎس ﭘﻴﻜﺴﻞ ﺑﻴﻦ دو داﺑـﻞ‬ ‫ﻛﻮت اﻳﻦ ﻓﺮﻣﺎن ﻣﻲ ﺗﻮاﻧﻴﺪ ﺗﻌﻴﻴﻦ ﻛﻨﻴﺪ ﻓﺎﻳﻞ ﺷﻤﺎ ﺑﺎ ﭼﻪ ﻣﻴﺰان ﻋﺮض در ﺻﻔﺤﻪ ﺑﻪ ﻧﻤﺎﻳﺶ درآﻳﺪ‪.‬‬ ‫‪Height‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﺗﻌﻴﻴﻦ ﻛﻨﻨﺪه ارﺗﻔﺎع ﻓﺎﻳﻞ ﺻﻮﺗﻲ در ﺻﻔﺤﻪ اﺳﺖ‪ .‬ﺷﻤﺎ ﺑﺎ ﻗﺮار دادن ﻳﻚ ﻋﺪد در ﻣﻘﻴﺎس ﭘﻴﻜﺴﻞ ﺑﻴﻦ دو داﺑﻞ‬ ‫ﻛﻮت اﻳﻦ ﻓﺮﻣﺎن ﻣﻲ ﺗﻮاﻧﻴﺪ ﺗﻌﻴﻴﻦ ﻛﻨﻴﺪ ﻓﺎﻳﻞ ﺷﻤﺎ ﺑﺎ ﭼﻪ ﻣﻴﺰان ارﺗﻔﺎع در ﺻﻔﺤﻪ ﺑﻪ ﻧﻤﺎﻳﺶ درآﻳﺪ‪ .‬ﻣﻌﻤـﻮﻻً ﺑـﺮاي اﻳـﻦ‬ ‫ﻓﺮﻣﺎن از ارﺗﻔﺎع ‪ 60‬ﭘﻴﻜﺴﻞ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫\"‪autostart=\"true‬‬ ‫ﻣﺮورﮔﺮ را وادار ﻣﻲ ﻛﻨﺪ ﺗﺎ ﺑﻼﻓﺎﺻﻠﻪ ﭘﺲ از ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ ﺷﺮوع ﺑﻪ ﭘﺨﺶ ﻓﺎﻳﻞ ﺻﻮﺗﻲ ﻛﻨﺪ‪ .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ اﻳﻦ ﮔﺰﻳﻨـﻪ‬ ‫را ﺑﺎ ﻗﺮار دادن ﻣﻘﺪار ‪ false‬ﺑﻪ ﺟﺎي ‪ true‬ﻏﻴﺮ ﻓﻌﺎل ﻛﻨﻴﺪ‪ .‬ﻣﻌﻤﻮﻻً اﻳﻦ ﮔﺰﻳﻨﻪ ﺑﻪ ﻃﻮر ﭘﻴﺶ ﻓﺮض ﻏﻴﺮ ﻓﻌﺎل اﺳﺖ‪.‬‬ ‫\"‪loop=\"true‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﻣﺮورﮔﺮ را وادار ﻣﻲ ﻛﻨﺪ ﭘﺲ از ﺑﻪ اﺗﻤﺎم رﺳﻴﺪن ﻓﺎﻳﻞ دوﺑﺎره از اول آﻧﺮا اﺟﺮا ﻛﻨﺪ‪ ،‬و اﻳﻦ ﻋﻤـﻞ ﺗـﺎ ﻫﻨﮕـﺎﻣﻲ‬ ‫ﻛﻪ ﺻﻔﺤﻪ ﺑﺎز اﺳﺖ ﻳﺎ ﻛﺎرﺑﺮ دﻛﻤﻪ ﺗﻮﻗﻒ را ﻛﻠﻴﻚ ﻧﻜﺮده اﺳﺖ اداﻣﻪ ﭘﻴﺪا ﻣﻲ ﻛﻨﺪ‪ .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺎ ﻗﺮار دادن ‪false‬‬ ‫ﺑﻪ ﺟﺎي ‪ true‬اﻳﻦ ﮔﺰﻳﻨﻪ را ﻏﻴﺮ ﻓﻌﺎل ﻛﻨﻴﺪ‪ .‬اﻟﺒﺘﻪ ﻣﻌﻤﻮﻻً اﻳﻦ ﮔﺰﻳﻨﻪ ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض ﻏﻴﺮ ﻓﻌﺎل اﺳﺖ‪.‬‬‫‪Page67 ‬‬ ‫\"‪hidden=\"true‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﺑﻪ ﻣﺮورﮔﺮ دﺳﺘﻮر ﻣﺨﻔﻲ ﻛﺮدن راﺑﻂ ﮔﺮاﻓﻴﻜﻲ ﭘﺨﺶ ﺻﺪا را ﻣـﻲ دﻫـﺪ‪ .‬در اﻳـﻦ ﺻـﻮرت ﻛـﺎرﺑﺮان ﻧﻤـﻲ ﺗﻮاﻧﻨـﺪ‬ ‫ﺑﺮﻧﺎﻣﻪ اي را ﻛﻪ ﺻﺪا را ﭘﺨﺶ ﻣﻲ ﻛﻨﺪ و ﻫﻤﭽﻨﻴﻦ دﻛﻤﻪ ﻫﺎي ﻛﻨﺘﺮل آﻧﺮا ﺑﺒﻴﻨﻨﺪ‪ .‬در اﻳﻦ ﺻﻮرت ﺻﺪا ﺗﺎ زﻣﺎﻧﻲ ﻛﻪ ﺑﻪ ﭘﺎﻳﺎن‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻧﺮﺳﻴﺪه ﻳﺎ ﺗﺎ زﻣﺎﻧﻲ ﻛﻪ ﺗﻨﻈﻴﻢ ﺷﺪه ﺑﺎﺷﺪ ﭘﺨﺶ ﻣﻲ ﺷﻮد و ﻛﺎرﺑﺮ ﻧﻤﻲ ﺗﻮاﻧﺪ از ﭘﺨﺶ آن ﺟﻠﻮﮔﻴﺮي ﻛﻨﺪ‪ .‬اﻳﻦ ﮔﺰﻳﻨﻪ ﺑﺎ ﻗﺮار‬ ‫دادن ‪ false‬ﺑﻪ ﺟﺎي ‪ true‬ﻏﻴﺮ ﻓﻌﺎل ﻣﻲ ﺷﻮد‪ .‬ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض ﻫﻢ اﻳﻦ ﮔﺰﻳﻨﻪ ﻏﻴﺮ ﻓﻌﺎل اﺳﺖ‪.‬‬ ‫ آﺷﻨﺎﻳﻲ ﺑﺎ ﻣﺘﺎ ﺗﮕﻬﺎ و ﻣﻮارد اﺳﺘﻔﺎده آﻧﻬﺎ در‪HTML‬‬ ‫ﺗﮕﻬﺎي ‪ META‬ﻣﻮرد اﺳﺘﻔﺎده ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﺮاي ﺑﺮرﺳﻲ و ﺷﺎﺧﺺ ﮔﺬاري ﺻﻔﺤﺎت ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ‪ .‬ﻣﺨﺼﻮﺻ ًﺎ اﮔـﺮ‬ ‫ﺻﻔﺤﻪ ﺷﻤﺎ ﻓﺮﻳﻢ )ﻗﺎب( داﺷﺘﻪ ﺑﺎﺷﺪ‪ .‬اﻳﻦ ﺗﮕﻬﺎ ﺑﺎﻳﺪ در ﻗﺴﻤﺖ ‪ HEAD‬ﺻﻔﺤﻪ ﺷﻤﺎ ﻗﺮار ﮔﻴﺮﻧﺪ‪.‬‬ ‫در ﺳﻄﺮ زﻳﺮ ﻳﻜﻲ از ﻣﻌﻤﻮل ﺗﺮﻳﻦ ﺗﮕﻬﺎي ‪ META‬را ﻣﻲ ﺑﻴﻨﻴﺪ‪:‬‬ ‫>‪<head‬‬ ‫>‪</title‬ﻋﻨﻮان ﺻﻔﺤﻪ>‪<title‬‬ ‫>\" \"=‪<meta name=\" \" content‬‬ ‫>‪</head‬‬ ‫ﺷﻨﺎﺳﻪ‪name‬‬ ‫ﻣﺸﺨﺺ ﻛﻨﻨﺪه ﻧﻮع ﻣﺘﺎ ﺗﮕﻲ اﺳﺖ ﻛﻪ ﺷﻤﺎ ﻗﺼﺪ اﺳﺘﻔﺎده از آن را دارﻳﺪ‪.‬‬ ‫ﺷﻨﺎﺳﻪ‪content‬‬ ‫ﺗﻌﻴﻴﻦ ﻛﻨﻨﺪه ﻣﺤﺘﻮﻳﺎت ﻣﺘﺎ ﺗﮓ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ اﺳﺖ‪.‬‬ ‫در اﻳﻦ ﺑﺨﺶ ﺑﻪ ﺗﻮﺿﻴﺢ دو ﻣﺘﺎ ﺗﮓ ﻛﻪ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ اﻫﻤﻴﺖ ﺑﻴﺸﺘﺮي دارﻧﺪ ﻣﻲ ﭘﺮدازﻳﻢ‪.‬‬‫‪Page68 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫‪META Keywords‬‬ ‫>\"ﻣﺘﺎ ﺗﮓ‪ ,‬ﻣﻮﺗﻮر ﺟﺴﺘﺠﻮ\"=‪<meta name=\"keywords\" content‬‬ ‫\"‪name=\"keywords‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﺑﺮﻧﺎﻣﻪ اﺳﭙﺎﻳﺪر ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ را از وﺟﻮد ﻳﻚ دﺳﺘﻪ از ﻛﻠﻤﺎت ﻛﻠﻴﺪي اﻳﻦ ﺻﻔﺤﻪ در اﻳـﻦ ﺗـﮓ آﮔـﺎه ﻣـﻲ‬ ‫ﻛﻨﺪ‪.‬‬ ‫\"ﻣﺘﺎ ﺗﮓ‪ ،‬ﻣﻮﺗﻮر ﺟﺴﺘﺠﻮ\"=‪content‬‬ ‫اﻳﻦ ﻗﺴﻤﺖ ﻟﻴﺴﺘﻲ از ﻛﻠﻤﺎت ﻛﻠﻴﺪي ﻣﻮﺟﻮد در اﻳﻦ ﺻﻔﺤﻪ اﺳﺖ‪ .‬در اﻳﻦ ﻗﺴﻤﺖ ﺑﺮاي ﺟﺪا ﻛﺮدن ﻛﻠﻴﺪ واژه ﻫﺎ از ﻳﻜﺪﻳﮕﺮ‬ ‫از ﻋﻼﻣﺖ ﻛﺎﻣﺎ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪.‬‬ ‫ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﻧﺒﺎﻳﺪ ﻳﻚ ﻛﻠﻴﺪ واژه را ﭼﻨﺪﻳﻦ ﺑﺎر ﺗﻜﺮار ﻛﻨﻴﺪ و ﻛﻠﻲ واژه ﻫﺎ ﺑﺎﻳﺪ ﺑﺎ ﻣﺘﻦ ﺷـﻤﺎ در ﺻـﻔﺤﻪ ﻣﺮﺑﻮﻃـﻪ‬ ‫ارﺗﺒﺎط ﺑﺎﺷﻨﺪ‪ .‬ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻣﻌﻤﻮﻻً رﺗﺒﻪ ﺑﻨﺪي ﺻﻔﺤﺎﺗﻲ را ﻛﻪ در آﻧﻬﺎ ﺑﺎ ﺗﻜﺮار ﺑﻴﺶ از ﺣﺪ ﻳﻚ ﻛﻠﻴﺪ واژه ﻳﺎ ذﻛﺮ ﻛﻠﻴﺪ‬ ‫واژه اي ﻛﻪ ﺑﺎ ﻣﺘﻦ ﺻﻔﺤﻪ ارﺗﺒﺎﻃﻲ ﻧﺪارد ﺳﻌﻲ ﻣﻲ ﺷﻮد رﺗﺒﻪ ﺑﺎﻻﻳﻲ را ﺑﻪ دﺳﺖ ﺑﻴﺎورﻧﺪ‪ ،‬ﻣﺘﻮﻗﻒ ﻣﻲ ﻛﻨﻨﺪ‪.‬‬ ‫‪META Description‬‬ ‫اﻳﻦ ﺗﮓ ﻣﺤﺘﻮﻳﺎت ﺻﻔﺤﻪ را ﺗﻮﺻﻴﻒ ﻣﻲ ﻛﻨﺪ‪.‬‬ ‫>\"اﻓﺰودن ﻣﺘﺎ ﺗﮓ ﺑﻪ ﺻﻔﺤﻪ\"=‪<meta name=\"description\" content‬‬ ‫\"‪name=\"description‬‬ ‫اﻳﻦ ﺑﺨﺶ ﺗﻮﺿﻴﺤﻲ در ﺑﺎره ﺻﻔﺤﻪ ﺑﺮاي ﺑﺮﻧﺎﻣﻪ اﺳﭙﺎﻳﺪر ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ اﺳﺖ‪.‬‬‫‪Page69 ‬‬ ‫\"اﻓﺰودن ﻣﺘﺎ ﺗﮓ ﺑﻪ ﺻﻔﺤﻪ\"=‪content‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫اﻳﻦ ﺑﺨﺶ ﺗﻮﺻﻴﻔﻲ اﺳﺖ ﻛﻪ ﺷﻤﺎ از ﺻﻔﺤﻪ ﺧﻮد ﻣﻲ ﻧﻮﻳﺴﻴﺪ‪ .‬در اﻳﻦ ﻗﺴﻤﺖ ﻫﺮ ﭼﻴﺰي را ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ درﺑـﺎره ﺻـﻔﺤﻪ‬ ‫ﺧﻮد ﺗﻮﺿﻴﺢ دﻫﻴﺪ‪ ،‬ﻫﻤﭽﻨﻴﻦ ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻳﻚ دو ﺗﺎ از ﻛﻠﻴﺪ واژه ﻫﺎ ﻫﻢ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬ﺑﺴﻴﺎري از ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ اﻳـﻦ‬ ‫ﻗﺴﻤﺖ را در ﻟﻴﺴﺖ ﻧﺘﺎﻳﺞ ﺟﺴﺘﺠﻮ ﺑﻪ ﻋﻨﻮان ﺗﻮﺿﻴﺢ ﺻﻔﺤﻪ ﻧﺸﺎن ﻣﻲ دﻫﻨﺪ‪.‬‬ ‫دو ﻣﺘﺎ ﺗﮓ ذﻛﺮ ﺷﺪه در ﺑﺎﻻ از ﺑﻘﻴﻪ ﻣﺘﺎ ﺗﮕﻬﺎ ﭘﺮ ﻛﺎرﺑﺮد ﺗﺮ ﻫﺴﺘﻨﺪ‪ .‬ﻣﺘﺎ ﺗﮓ ﻫﺎي دﻳﮕﺮي ﻫﻢ وﺟﻮد دارﻧﺪ ﻛﻪ در زﻳﺮ ﺑﻪ ﺑﺮﺧـﻲ‬ ‫از آﻧﻬﺎ اﺷﺎره ﻣﻲ ﺷﻮد‪:‬‬ ‫>\"ﻧﺎم ﻧﻮﻳﺴﻨﺪه ﺻﻔﺤﻪ\"=‪<meta name=\"author\" content‬‬ ‫اﻳﻦ ﺗﮓ ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﻣﻲ دﻫﺪ ﻛﻪ ﻧﻮﻳﺴﻨﺪه ﺻﻔﺤﻪ را ﻣﺸﺨﺺ ﻛﻨﻴﺪ‪ .‬ﻓﻘﻂ ﻧﺎم ﻧﻮﻳﺴﻨﺪه را در اﻳﻦ ﺗـﮓ ﺑﻨﻮﻳﺴـﻴﺪ ﺗـﺎ ﻫـﺮ‬ ‫ﻛﺴﻲ ﻛﻪ ﻛﺪﻫﺎي ‪ HTML‬اﻳﻦ ﺻﻔﺤﻪ را ﻣﻲ ﺑﻴﻨﺪ‪ ،‬ﺑﺪاﻧﺪ ﭼﻪ ﻛﺴﻲ اﻳﻦ ﺻـﻔﺤﻪ را ﻧﻮﺷـﺘﻪ اﺳـﺖ‪ .‬ﻣﻮﺗـﻮر ﻫـﺎي ﺟﺴـﺘﺠﻮ‬ ‫ﻣﻌﻤﻮﻻً از اﻳﻦ ﺗﮓ ﺑﺮاي رﺗﺒﻪ ﺑﻨﺪي ﺻﻔﺤﺎت اﺳﺘﻔﺎده ﻧﻤﻲ ﻛﻨﻨﺪ‪.‬‬ ‫>\"ﻧﺎم ﺑﺮﻧﺎﻣﻪ ﻣﻮرد اﺳﺘﻔﺎده ﺷﻤﺎ\"=‪<meta name=\"generator\" content‬‬ ‫اﻳﻦ ﺗﮓ ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﻣﻲ دﻫﺪ ﻛﻪ ﺑﻪ اﻓﺮادي ﻛﻪ ﻛﺪﻫﺎي اﻳﻦ ﺻﻔﺤﻪ را ﻣﻲ ﺑﻴﻨﻨﺪ ﺑﮕﻮﻳﻴﺪ ﻛﻪ ﺷﻤﺎ از ﭼﻪ ﺑﺮﻧﺎﻣـﻪ اي ﺑـﺮاي‬ ‫ﻧﻮﺷﺘﻦ اﻳﻦ ﻛﺪﻫﺎ اﺳﺘﻔﺎده ﻛﺮده اﻳﺪ‪ .‬اﻳﻦ ﺗﮓ ﻧﻴﺰ ﺑﺮاي رﺗﺒﻪ ﺑﻨﺪي ﺻﻔﺤﺎت در ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ اﺳﺘﻔﺎده ﻧﻤﻲ ﺷﻮد‪.‬‬‫‪Page70 ‬‬ ‫ ﺗﻐﻴﻴﺮ ﻣﺴﻴﺮ ﺑﺎزدﻳﺪ ﻛﻨﻨﺪﮔﺎن ﭘﺲ از ﻣﺪت ﻣﺸﺨﺺ ﺑﺎ‪HTML‬‬ ‫اﮔﺮ ﺻﻔﺤﻪ ﺷﻤﺎ ﺟﺎﺑﺠﺎ ﺷﺪ ﻳﺎ ﺑﻪ ﻫﺮ دﻟﻴﻠﻲ ﺧﻮاﺳﺘﻴﺪ ﻣﺴﻴﺮ ﺑﺎزدﻳﺪﻛﻨﻨﺪﮔﺎن ﺧﻮد را ﺗﻐﻴﻴﺮ دﻫﻴﺪ ﻣﻲ ﺗﻮاﻧﻴﺪ از ﺗـﮓ ‪meta‬‬ ‫‪refresh‬ﺑﺮاي ﺑﺮدن ﺑﺎزدﻳﺪ ﻛﻨﻨﺪﮔﺎن ﺑﻪ ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮﺗﺎن اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬اﻟﺒﺘﻪ در اﺳﺘﻔﺎده از اﻳﻦ روش ﺑـﺮاي ﺗﻐﻴﻴـﺮ‬ ‫ﻣﺴﻴﺮ ﺑﺎزدﻳﺪ ﻛﻨﻨﺪﮔﺎن‪ ،‬ﻣﺨﺼﻮﺻﺎً در ﺻﻔﺤﻪ اﺻﻠﻲ ﺳﺎﻳﺖ ﺧﻮد ﺑﺎﻳﺪ ﺑﻪ اﻳﻦ ﻧﻜﺘﻪ ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ ﺑﺮﺧﻲ از ﻣﻮﺗﻮرﻫﺎي ﺟﺴـﺘﺠﻮ‬ ‫ﺑﻪ دﻧﺒﺎل ﺗﮕﻬﺎي ‪ meta refresh‬ﻣﻲ ﮔﺮدﻧﺪ ﻛﻪ ﺑﺎزدﻳﺪ ﻛﻨﻨﺪﮔﺎن را از ﻳﻚ ﺻـﻔﺤﻪ ﻛـﻪ ﺑـﺎ ﻛﻠﻤـﺎت ﻛﻠﻴـﺪي ﭘـﺮ ﺷـﺪه‬ ‫اﺳﺖ‪ ،‬ﺑﻪ ﺻﻔﺤﻪ واﻗﻌﻲ ﻣﻲ ﺑﺮﻧﺪ ﻛﻪ ﻣﻤﻜﻦ اﺳﺖ در آن از ﻛﻠﻤﺎت ﻛﻠﻴﺪي اﺳﺘﻔﺎده ﻧﺸﺪه ﺑﺎﺷﺪ و در ﻧﺘﻴﺠـﻪ ﺑـﺎ ﻣﻮﺿـﻮع‬ ‫ﻣﻮرد ﻧﻈﺮ ﺑﺎزدﻳﺪ ﻛﻨﻨﺪه ﻣﺮﺗﺒﻂ ﻧﺒﺎﺷﺪ‪ .‬ﺑﻨﺎﺑﺮاﻳﻦ ﺗﻐﻴﻴﺮ ﻣﺴﻴﺮ ﺑﺎزدﻳﺪ ﻛﻨﻨﺪه از ﻳﻚ ﺻﻔﺤﻪ ﺑﺎ ﺳﺮﻋﺖ زﻳﺎد )ﻣﻌﻤﻮﻻً ﻛﻤﺘﺮ از ‪10‬‬ ‫ﺛﺎﻧﻴﻪ( ﻣﻤﻜﻦ اﺳﺖ ﺑﺎﻋﺚ ﺷﻮد اﻳﻦ ﺻﻔﺤﻪ در ﻟﻴﺴﺖ ﻣﻮﺗﻮر ﺟﺴﺘﺠﻮ ﻗﺮار ﻧﮕﻴﺮد‪ .‬اﻟﺒﺘﻪ اﮔﺮ اﻳﻦ ﺻﻔﺤﻪ ﺻﻔﺤﻪ اﺻﻠﻲ ﺳﺎﻳﺖ‬ ‫ﺷﻤﺎ ﻧﺒﺎﺷﺪ ﻣﻤﻜﻦ اﺳﺖ ﻧﺨﻮاﻫﻴﺪ در ﻟﻴﺴﺖ ﻣﻮﺗﻮر ﺟﺴﺘﺠﻮ ﻗﺮار ﮔﻴﺮد‪.‬‬ ‫ﻛﺪ زﻳﺮ را ﻣﻲ ﺗﻮان ﺑﺮاي ﺗﻐﻴﻴﺮ ﻣﺴﻴﺮ ﺑﺎزدﻳﺪ ﻛﻨﻨﺪه اﺳﺘﻔﺎده ﻛﺮد‪:‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫\"‪<meta http-equiv=\"refresh‬‬ ‫>\"‪content=\"3;url=http://www.yosit.com/destinationpage.htm‬‬ ‫>‪</title‬اﻳﻦ ﺻﻔﺤﻪ ﺟﺎ ﺑﻪ ﺟﺎ ﺷﺪه اﺳﺖ>‪<title‬‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫ﻣﺘﻦ ﻣﻮرد ﻧﻈﺮ ﺷﻤﺎ‬ ‫>‪</body‬‬ ‫>‪</html‬‬ ‫اﻳﻦ ﻧﻜﺘﻪ را ﻣﺪ ﻧﻈﺮ داﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺗﮓ ‪ Meta refresh‬ﻗﺒﻞ از ﻋﻨﻮان ﺻﻔﺤﻪ )‪ (TITLE‬ﻧﻮﺷﺘﻪ ﻣﻲ ﺷﻮد‪.‬‬ ‫ﻓﺮﻣﺎن \" \"=‪ content‬دو ﻛﺎر را اﻧﺠﺎم ﻣﻲ دﻫﺪ‪ .‬اول ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ ﻛﻪ ﻣﺮورﮔﺮ ﻗﻴﻞ از ﺗﻐﻴﻴـﺮ ﻣﺴـﻴﺮ ﭼﻨـﺪ ﺛﺎﻧﻴـﻪ‬ ‫ﺑﺎﻳﺪ ﺻﺒﺮ ﻛﻨﺪ‪ .‬دوم آدرس ﺻﻔﺤﻪ اي ﻛﻪ ﺑﺎﻳﺪ ﻣﺴﻴﺮ ﺑﻪ آن آدرس ﺗﻐﻴﻴﺮ ﻳﺎﺑﺪ‪ .‬ﺑﻪ اﻳﻦ ﻧﻜﺘﻪ ﺗﻮﺟﻪ ﻛﻨﻴﺪ ﻛﻪ ﻫﺮ دو ﻗﺴـﻤﺖ‬ ‫زﻣﺎن و آدرس ﺻﻔﺤﻪ در ﻳﻚ ﺟﻔﺖ داﺑﻞ ﻛﻮت ﻗﺮار دارﻧﺪ ﻧﻪ دو ﺟﻔﺖ‪ .‬ﺑـﺮاي ﺟـﺪا ﻛـﺮدن اﻳـﻦ دو ﻗﺴـﻤﺖ ﺑﺎﻳـﺪ از ﻧﻘﻄـﻪ‬ ‫وﻳﺮﮔﻮل );( اﺳﺘﻔﺎده ﻛﺮد‪.‬‬ ‫در ﺑﺨﺶ ‪ BODY‬ﻫﻢ ر ﭼﻴﺰي ﻛﻪ ﺑﺨﻮاﻫﻴﺪ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻨﻮﻳﺴﻴﺪ‪ .‬ﻫﻤﭽﻨﻴﻦ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮاي ﻛـﺎرﺑﺮاﻧﻲ ﻛـﻪ از ﻣﺮورﮔﺮﻫـﺎي‬ ‫ﻗﺪﻳﻤﻲ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻨﺪ ﻳﻚ ﻟﻴﻨﻚ را ﻗﺮار دﻫﻴﺪ ﺗﺎ ﺑﻪ ﺻﻮرت دﺳﺘﻲ ﺑﻪ ﺻﻔﺤﻪ ﺟﺪﻳﺪ وارد ﺷﻮﻧﺪ‪.‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫\"‪<meta http-equiv=\"refresh‬‬ ‫>\"‪content=\"3;url=http://www.yosit.com/destinationpage.htm‬‬ ‫>‪</title‬اﻳﻦ ﺻﻔﺤﻪ ﺟﺎ ﺑﻪ ﺟﺎ ﺷﺪه اﺳﺖ>‪<title‬‬ ‫>‪</head‬‬ ‫>‪<body‬‬ ‫اﻳﻦ ﺻﻔﺤﻪ ﺟﺎ ﺑﻪ ﺟﺎ ﺷﺪه اﺳﺖ‪ .‬اﮔﺮ ﻣﺮورﮔﺮ ﺷﻤﺎ ﺑﻪ ﺻﻮرت اﺗﻮﻣﺎﺗﻴﻚ ﺑﻪ ﺻﻔﺤﻪ ﺟﺪﻳﺪ ﻧﺮﻓﺖ‬ ‫را ﻛﻠﻴﻚ ﻛﻨﻴﺪ ﺗﺎ >‪</a‬اﻳﻨﺠﺎ>\"‪<a href=\"http://www.yosit.com/destinationpage.htm‬‬ ‫ﺑﻪ ﺻﻮرت دﺳﺘﻲ ﺑﻪ ﺻﻔﺤﻪ ﺟﺪﻳﺪ وارد ﺷﻮﻳﺪ‬ ‫>‪</body‬‬ ‫>‪</html‬‬‫‪Page71 ‬‬ ‫ ﺷﻨﺎﺳﻪ ﻫﺎي ﻣﺨﺘﻠﻒ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﺑﺮاي ﺧﻂ اﻓﻘﻲ‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ از ﻳﻚ ﺧﻂ اﻓﻘﻲ در ﺻﻔﺤﻪ ﺧﻮد اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ ،‬اﻣﺎ ﻣﻲ ﺧـﻮاﻫﻴﻢ ﻃـﻮل آن ﺑﺮاﺑـﺮ ﻳـﻚ ﺗﺼـﻮﻳﺮ ﻳـﺎ‬ ‫ﻗﺴﻤﺘﻲ از ﻳﻚ ﻣﺘﻦ ﺑﺎﺷﺪ‪ .‬ﻳﺎ ﺷﺎﻳﺪ ﺑﻪ ﻳﻚ ﺧﻂ اﻓﻘﻲ ﻛﻮﺗﺎه ﻛﻪ در ﺳﻤﺖ ﭼﭗ ﻳﺎ راﺳﺖ ﺻﻔﺤﻪ ﻗـﺮار ﺑﮕﻴـﺮد‪ ،‬ﻧﻴـﺎز داﺷـﺘﻪ‬ ‫ﺑﺎﺷﻴﻢ‪ .‬اﻳﻨﻬﺎ ﺧﻮاﺻﻲ ﻫﺴﺘﻨﺪ ﻛﻪ ﻣﺎ ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﺮاي ﺗﮓ ‪ HR‬ﻳﻌﻨﻲ ﻫﻤﺎن ﺧﻂ اﻓﻘﻲ اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪:‬‬ ‫‪width‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﻣﻘﺪار ﻋﺮض ﺧﻂ اﻓﻘﻲ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‪ .‬ر اﻳـﻦ ﻓﺮﻣـﺎن ﺷـﻤﺎ ﻣـﻲ ﺗﻮاﻧﻴـﺪ از ﻣﻘﻴـﺎس ﭘﻴﻜﺴـﻞ ﻳـﺎ درﺻـﺪ‬ ‫اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬ﮔﺰﻳﻨﻪ ﭘﻴﺶ ﻓﺮض ﺑﺮاي اﻳﻦ ﻓﺮﻣﺎن ‪ %100‬اﺳﺖ‪.‬‬ ‫\"‪align=\"left‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﺳﻤﺖ ﻗﺮار ﮔﺮﻓﺘﻦ ﺧﻂ اﻓﻘﻲ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‪ .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺧﻂ را ﺑﻪ ﺻﻮرت ﭼﭗ ﭼﻴﻦ‪ ،‬راﺳـﺖ ﭼـﻴﻦ و‬ ‫در ﻣﺮﻛﺰ ﺻﻔﺤﻪ ﻗﺮار دﻫﻴﺪ‪ .‬ﮔﺰﻳﻨﻪ ﭘﻴﺶ ﻓﺮض اﻳﻦ ﻓﺮﻣﺎن ‪ center‬اﺳﺖ ﻛﻪ ﺧﻂ را در ﻣﺮﻛﺰ ﺻﻔﺤﻪ ﻗﺮار ﻣﻲ دﻫـﺪ‪ .‬اﻟﺒﺘـﻪ‬ ‫زﻣﺎﻧﻲ اﻳﻦ وﺿﻌﻴﺖ ﻣﺸﺨﺺ ﻣﻲ ﺷﻮد ﻛﻪ ﻋﺮض ﺧﻂ اﻓﻘﻲ ﻛﻤﺘﺮ از ﻋﺮض ﺻﻔﺤﻪ ﺑﺎﺷﺪ‪.‬‬ ‫\"‪size=\"3‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن اﻧﺪازه ﺧﻂ را ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‪ .‬اﻧﺪازه ﭘﻴﺶ ﻓﺮض ﺑﺮاي ﺧﻂ ‪ 2‬اﺳﺖ‪.‬‬ ‫\"‪noshade=\"noshade‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﺧﻂ را ﺑﻪ ﺻﻮرت ﺗﻮ ﭘﺮ ﻧﺸﺎن ﻣﻲ دﻫﺪ‪.‬‬ ‫>\"‪<hr width=\"250‬‬ ‫در اﻳﻨﺠﺎ ﻫﺮ ﻛﺪام از ﻓﺮﻣﺎﻧﻬﺎي ﺑﺎﻻ را ﺑﺎ ﻳﻚ ﻣﺜﺎل ﺑﻴﺸﺘﺮ ﺗﻮﺿﻴﺢ ﻣﻲ دﻫﻴﻢ‪.‬‬ ‫ﺑﺎ اﻳﻦ ﻓﺮﻣﺎن ﺧﻄﻲ اﻓﻘﻲ ﺧﻮاﻫﻴﺪ داﺷﺖ‪:‬‬ ‫>\"‪<hr width=\"250\" align=\"right‬‬‫‪Page72 ‬‬ ‫ﺑﺎ اﻳﻦ ﺗﮓ ﻳﻚ ﺧﻂ اﻓﻘﻲ ﺑﺎ ﻋﺮض ‪ 250‬ﭘﻴﻜﺴﻞ و در ﺳﻤﺖ راﺳﺖ ﺻﻔﺤﻪ ﺧﻮاﻫﻴﺪ داﺷﺖ‪.‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫>\"‪<hr width=\"250\" size=\"10‬‬ ‫ﺑﺎ اﻳﻦ ﺗﮓ ﻳﻚ ﺧﻂ اﻓﻘﻲ ﺑﺎ ﻋﺮض ‪ 250‬ﭘﻴﻜﺴﻞ و ﭘﻬﻨﺎي ‪ 10‬ﺧﻮاﻫﻴﺪ داﺷﺖ‪.‬‬ ‫ﺣﺎﻻ ﻳﻚ اﻧﺪازه ﺑﺰرگ را ﺑﺮاي ﭘﻬﻨﺎي ﺧﻂ اﻧﺘﺨﺎب ﻣﻲ ﻛﻨﻴﻢ‪ ،‬ﻣﺜﻼً ‪ ، 80‬ﻧﺘﻴﺠﻪ ﺑﻪ اﻳﻦ ﺻﻮرت ﺧﻮاﻫﻴﺪ ﺑﻮد‪:‬‬ ‫ﺣﺎﻻ اﮔﺮ از ﻓﺮﻣﺎن ‪ noshade‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ ،‬ﺧﻂ ﺑﻪ ﺻﻮرت ﺗﻮ ﭘﺮ ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮد‪:‬‬ ‫>\"‪<hr width=\"250\" noshade=\"noshade‬‬ ‫اﻳﻦ ﺑﺎر ﺑﺎ اﻧﺪازه ‪ 80‬اﻳﻦ ﺗﮓ را اﻣﺘﺤﺎن ﻣﻲ ﻛﻨﻴﻢ‪:‬‬ ‫>‪<hr width=\"250\" size=\"80\" noshade‬‬ ‫در ﺑﺮﺧﻲ ﻣﺮورﮔﺮﻫﺎ ﻣﺎﻧﻨﺪ ‪Internet Explorer‬و ‪ Mozilla Firefox‬اﻣﻜﺎن ﺗﻐﻴﻴﺮ رﻧﮓ ﺧﻂ ﻧﻴﺰ وﺟـﻮد دارد‪.‬‬ ‫اﻣﺎ ﻣﻤﻜﻦ اﺳﺖ اﻳﻦ رﻧﮓ در ﻫﻤﻪ ﻣﺮورﮔﺮﻫﺎ ﻣﺜ ًﻼ ‪ Opera‬ﻗﺎﺑﻞ ﻣﺸﺎﻫﺪه ﻧﺒﺎﺷﺪ و ﺧﻂ ﺑﻪ رﻧﮓ ﭘﻴﺶ ﻓﺮض ﻣﺸـﺎﻫﺪه‬ ‫ﺷﻮد‪.‬‬ ‫در اﻳﻦ ﻗﺴﻤﺖ اﮔﺮ ﺑﺎ ﻣﺮورﮔﺮي ﻣﺜﻞ اﻳﻨﺘﺮﻧﺖ اﻛﺴﭙﻠﻮرر ﺻﻔﺤﻪ را ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴـﺪ‪ ،‬ﻣـﻲ ﺗﻮاﻧﻴـﺪ ﺧﻄـﻲ را ﺑـﻪ رﻧـﮓ زرد‬ ‫ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ اﻣﺎ اﮔﺮ ﺑﺎ ﻣﺮورﮔﺮي ﻣﺜﻞ ‪ Opera‬اﻳﻦ ﺻﻔﺤﻪ را ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﻴﺪ‪ ،‬ﺧﻂ زﻳﺮ را ﺑﻪ رﻧﮓ ﺧﺎﻛﺴـﺘﺮي )رﻧـﮓ‬ ‫ﭘﻴﺶ ﻓﺮض( ﺧﻮاﻫﻴﺪ دﻳﺪ‪.‬‬ ‫>‪<hr width=\"250\" size=\"20\" color=\"yellow\" noshade‬‬‫‪Page73 ‬‬ ‫ ﺗﻨﻈﻴﻢ ﻗﻠﻢ ﻣﻮرد اﺳﺘﻔﺎده ﺑﺮاي ﻣﺘﻦ در‪HTML‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫اﮔﺮ ﺗﻤﺎﻳﻞ دارﻳﺪ ﺷﻜﻞ ﻓﻮﻧﺖ ﻣﺘﻦ ﺧﻮد را در ﻳﻚ ﺻﻔﺤﻪ ﺗﻐﻴﻴﺮ دﻫﻴﺪ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﺪ اﻳﻦ ﻛـﺎر را ﺑـﺎ اﺳـﺘﻔﺎده از ﺗـﮓ ‪font‬‬ ‫اﻧﺠﺎم دﻫﻴﺪ‪ ).‬اﻳﻦ روش ﺗﺄﺛﻴﺮي ﺑﺮ ﺗﺼﺎوﻳﺮ ﻣﻮﺟﻮد در ﺻﻔﺤﻪ ﺷﻤﺎ ﻧﺪارد(‪.‬‬ ‫ﺑﺎ اﻓﺰودن اﻳﻦ ﺷﻨﺎﺳﻪ \" \"=‪ face‬ﺑﻪ ﺗﮓ ﻓﻮﻧﺖ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺷﻜﻞ آﻧﺮا ﺗﻐﻴﻴﺮ دﻫﻴﺪ‪ .‬ﺑﻪ ﻳﻚ ﻣﺜﺎل ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬ ‫‪<font face=\"Times New Roman\">This line is Written by Times New‬‬ ‫>‪Roman font face</font‬‬ ‫اﻳﻦ ﻫﻢ ﻣﺘﻦ ﻧﻮﺷﺘﻪ ﺷﺪه ﺑﺎ ﻓﻮﻧﺖ ‪Times New Roman‬‬ ‫‪This line is Writen by Times New Roman font face‬‬ ‫اﻟﺒﺘﻪ ﻧﻜﺎﺗﻲ ﻫﺴﺖ ﻛﻪ ﺑﺎﻳﺪ ﺑﻪ آﻧﻬﺎ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬ ‫‪ .1‬اﻓﺮادي ﻛﻪ ﺻﻔﺤﻪ ﺷﻤﺎ را ﺗﻤﺎﺷﺎ ﻣﻲ ﻛﻨﻨﺪ ﺑﺮاي اﻳﻨﻜﻪ ﺑﺘﻮاﻧﻨﺪ ﺻﻔﺤﻪ را ﺑﺎ ﻓﻮﻧﺘﻲ ﻛﻪ ﺷﻤﺎ ﺑﺮاي آن ﺗﻨﻈﻴﻢ ﻛـﺮده‬ ‫اﻳﺪ ﺑﺒﻴﻨﻨﺪ ﺑﺎﻳﺪ ﺣﺪاﻗﻞ ﻣﺮورﮔﺮ اﻳﻨﺘﺮﻧﺖ اﻛﺴﭙﻠﻮرر ﻳﺎ ﻧﺖ اﺳﻜﻴﭗ داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪).‬زﻳﺎد ﻧﮕﺮان اﻳﻦ ﻗﺴﻤﺖ ﻧﺒﺎﺷﻴﺪ‪،‬‬ ‫اﻛﻨﻮن ﺗﻘﺮﻳﺒﺎً ﺗﻤﺎﻣﻲ ﻛﺎرﺑﺮان ﻣﺮورﮔﺮﻫﺎي ﺟﺪﻳﺪﺗﺮي دارﻧﺪ(‬ ‫‪ .2‬اﻓﺮاد ﺑﻴﻨﻨﺪه ﺻﻔﺤﻪ ﺷﻤﺎ ﺑﺎﻳﺪ ﻓﻮﻧﺖ ﻣﻮرد اﺳﺘﻔﺎده ﺷﻤﺎ را ﻗﺒﻼً ﻧﺼﺐ ﻛﺮده ﺑﺎﺷﻨﺪ ﺗﺎ ﺑﺘﻮاﻧﻨﺪ ﺻﻔﺤﻪ ﺷـﻤﺎ را ﺑـﻪ‬ ‫ﺧﻮﺑﻲ ﻣﺸﺎﻫﺪه ﻛﻨﻨﺪ‪ .‬وﻗﺘﻲ ﺷﻤﺎ در ﺻﻔﺤﻪ ﺧﻮد ﻣﻲ ﺧﻮاﻫﻴﺪ از ﻳﻚ ﻓﻮﻧﺖ ﺧﺎص اﺳﺘﻔﺎده ﻛﻨﻴﺪ ﻣﺮاﻗﺐ ﺑﺎﺷـﻴﺪ و‬ ‫ﻓﻮﻧﺘﻲ را اﺳﺘﻔﺎده ﻛﻨﻴﺪ ﻛﻪ ﺑﻴﺸﺘﺮ اﻓﺮاد ﺑﻪ ﺻﻮرت ﭘﻴﺶ ﻓﺮض داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ .‬ﺑﺮاي ﻣﺜـﺎل وﻗﺘـﻲ وﻳﻨـﺪوز ‪ XP‬را‬ ‫ﻧﺼﺐ ﻣﻲ ﻛﻨﻴﺪ ﭼﻨﺪﻳﻦ ﻓﻮﻧﺖ ﺑﻪ ﺻﻮرت ﺧﻮدﻛﺎر ﺑﺮ روي ﻛﺎﻣﭙﻴﻮﺗﺮ ﺷﻤﺎ ﻧﺼﺐ ﻣﻲ ﺷـﻮﻧﺪ‪ .‬ﻣـﺜ ًﻼ ‪Tahoma,‬‬ ‫‪Arial, Times New Roman‬و ﭼﻨﺪﻳﻦ ﻓﻮﻧﺖ دﻳﮕﺮ‪.‬‬ ‫ﻗﺎﺑﻞ ذﻛﺮ اﺳﺖ ﻛﻪ اﮔﺮ ﺑﻴﻨﻨﺪه ﺷﻤﺎ ﻓﻮﻧﺖ ﻣﻮرد اﺳﺘﻔﺎده ﺷﻤﺎ را ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ ﻣﺮورﮔﺮ ﺑـﻪ ﻃـﻮر ﺧﻮدﻛـﺎر از ﻓﻮﻧـﺖ ﭘـﻴﺶ‬ ‫ﻓﺮض ﺧﻮد ﻛﻪ ﺑﻪ ﻃﻮر ﻣﻌﻤﻮل ‪ Times New Roman‬اﺳﺖ اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﺪ‪.‬‬ ‫اﻟﺒﺘﻪ ﺑﺎﻳﺪ ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ اﮔﺮﭼﻪ ﺗﮓ >‪<font‬ﻫﻨﻮز در ‪ HTML4‬ﻛﺎراﻳﻲ دارد وﻟﻲ اﺳﺘﻔﺎده از اﻳﻦ ﺗﮓ ﺗﻮﺻﻴﻪ‬ ‫ﻧﻤﻲ ﺷﻮد‪ .‬ﺑﻬﺘﺮ اﺳﺖ ﺑﺮاي ﺗﻨﻈﻴﻢ ﻓﻮﻧﺖ ﻣﺘﻦ ﺧﻮد از ‪ CSS‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬‫‪Page74 ‬‬ ‫ ﻣﺸﺎﻫﺪه ﺻﻔﺤﺎت ﻟﻴﻨﻚ ﺷﺪه در ﭘﻨﺠﺮه ﺟﺪﻳﺪ‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺑﺮاي اﻳﻨﻜﻪ ﻳـﻚ ﻟﻴﻨـﻚ را وادار ﻛﻨـﻴﻢ ﻛـﻪ در ﻳـﻚ ﺻـﻔﺤﻪ ﺟﺪﻳـﺪ ﺑـﺎز ﺷـﻮد‪ ،‬ﺑﺎﻳـﺪ اﻳـﻦ ﺷﻨﺎﺳـﻪ را ﺑـﻪ ﺗـﮓ ﻟﻴﻨـﻚ اﺿـﺎﻓﻪ‬ ‫ﻛﻨﻴﻢ \"‪target=\"_blank‬‬ ‫ﺗﮓ ﻟﻴﻨﻚ ﺑﻪ اﻳﻦ ﺻﻮرت ﺑﻪ ﻧﻈﺮ ﻣﻲ رﺳﺪ‪:‬‬ ‫>‪ </a‬وب>\"‪<a href=\"http://www.ad.com/\"target=\"_blank‬‬ ‫ﻣﻲ ﺗﻮاﻧﻴﺪ روي آن ﻛﻠﻴﻚ ﻛﻨﻴﺪ و ﻣﻄﻤﺌﻦ اﻳﻦ ﺻﻔﺤﻪ را از دﺳﺖ ﻧﺨﻮاﻫﻴﺪ داد‪ ،‬ﭼﻮن ﻟﻴﻨﻚ در ﻳﻚ ﭘﻨﺠﺮه ﺟﺪﻳﺪ ﺑـﺎز ﺧﻮاﻫـﺪ‬ ‫ﺷﺪ‪.‬‬ ‫ﺷـــﻤﺎ ﻣـــﻲ ﺗﻮاﻧﻴـــﺪ از اﻳـــﻦ روش ﺑـــﺮاي ﺑـــﺎز ﻛـــﺮدن ﺗﺼـــﺎوﻳﺮ در ﻳـــﻚ ﭘﻨﺠـــﺮه ﺟﺪﻳـــﺪ اﺳـــﺘﻔﺎده ﻛﻨﻴـــﺪ‪.‬‬ ‫ﺑﻪ اﻳﻦ ﻣﻨﻈﻮر ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ ﺻﻮرت زﻳﺮ ﻋﻤﻞ ﻛﻨﻴﺪ‪:‬‬ ‫>\"‪<a href=\"http://learn_html.gif\" target=\"_blank‬‬ ‫>\"‪<img src=\"learn_html.gif‬‬ ‫>‪</a‬‬ ‫در اﻳﻨﺠــﺎ ﻳــﻚ ﺗﺼــﻮﻳﺮ دارﻳــﻢ ﻛــﻪ ﺑــﺎ ﻛﻠﻴــﻚ ﻛــﺮدن ﺑــﺮ روي آن ﺗﺼــﻮﻳﺮ در ﭘﻨﺠــﺮه ﺟﺪﻳــﺪ ﺑــﺎز ﻣــﻲ ﺷــﻮد‪.‬‬‫‪Page75 ‬‬ ‫ﺷﻨﺎﺳﻪ ‪ target‬ﻣﻘﺎدﻳﺮ دﻳﮕﺮي ﻫﻢ ﻣﻲ ﺗﻮاﻧﺪ داﺷﺘﻪ ﺑﺎﺷﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل از ‪ _top‬ﺑﺮاي ﺑﺎز ﻛﺮدن ﻟﻴﻨﻚ در ﺗﻤـﺎم ﭘﻨﺠـﺮه‬ ‫اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد‪ .‬اﻟﺒﺘﻪ در ﺻﻮرﺗﻲ ﻛﻪ ﺻﻔﺤﻪ در ﻓﺮﻳﻢ اﺳﺘﻔﺎده ﻧﺸﺪه ﺑﺎﺷـﺪ اﻳـﻦ ‪ _top‬ﺗـﺄﺛﻴﺮ و ﻛـﺎرﺑﺮدي ﻧـﺪارد ﺑﻴﺸـﺘﺮ‬ ‫ﻛﺎراﻳﻲ آن ﻫﻨﮕﺎﻣﻲ اﺳﺖ ﻛﻪ ﺻﻔﺤﻪ در ﻳﻚ ﻓﺮم ﻗﺮار دارد و ﺷﻤﺎ ﻧﻤﻲ ﺧﻮاﻫﻴﺪ ﻟﻴﻨﻚ در ﻫﻤﺎن ﻓﺮم ﺑﺎز ﺷﻮد‪.‬‬ ‫اﻟﺒﺘﻪ وﻗﺘﻲ ﺻﻔﺤﻪ در ﻓﺮﻳﻢ ﻗﺮار دارد‪ ،‬در ﺻﻮرﺗﻲ ﻛﻪ ﺳﺎﻳﺮ ﻓﺮﻳﻤﻬﺎي ﭘﻨﺠﺮه ﻧﺎم ﮔـﺬاري ﺷـﺪه ﺑﺎﺷـﻨﺪ ﻣـﻲ ﺗـﻮان از ﻧـﺎم آن‬ ‫ﻓﺮﻳﻤﻬﺎ در ﺷﻨﺎﺳﻪ ‪targrt‬اﺳﺘﻔﺎده ﻛﺮد ﺗﺎ ﻟﻴﻨﻚ در آن ﻓﺮﻳﻤﻲ ﻛﻪ ﻧﺎم آﻧﺮا ﺑﻪ ﻛﺎر ﺑﺮده اﻳﺪ ﺑﺎز ﺷـﻮد ﻧـﻪ در ﻓﺮﻳﻤـﻲ ﻛـﻪ‬ ‫ﺧﻮد آن ﻗﺮار دارد‪.‬‬ ‫ اﻳﺠﺎد ﻣﺘﻦ ﻫﺎي ﻣﺘﺤﺮك در ﺻﻔﺤﻪ‪HTML‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺗﮓ >‪ <marquee‬ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﻣﻲ دﻫﺪ ﻛﻪ ﻳﻚ ﻣﺘﻦ را ﺑﻪ دﻟﺨﻮاه ﺧﻮد در ﺻﻔﺤﻪ ﺑﻪ ﺣﺮﻛﺖ در آورﻳﺪ‪ .‬ﺑـﺮاي اﻧﺠـﺎم‬ ‫اﻳﻦ ﻛﺎر ﺑﻪ ﺟﺎوا اﺳﻜﺮﭘﺖ ﻧﻴﺎز ﻧﺪارﻳﺪ‪ .‬ﺗﻨﻬﺎ ﻣﺸﻜﻞ اﻳﻦ اﺳﺖ ﻛﻪ ﻣﺮورﮔﺮﻫﺎﻳﻲ ﻛﻪ ﺑﺮ ﭘﺎﻳـﻪ ‪ Netscape‬ﺳـﺎﺧﺘﻪ ﺷـﺪه‬ ‫اﻧﺪ‪ ،‬ﻧﻤﻲ ﺗﻮاﻧﻨﺪ ﺑﻪ ﻃﻮر ﻛﺎﻣﻞ ﺑﺎ اﻳﻦ ﺗﮓ ﺳﺎزﮔﺎر ﺷﻮﻧﺪ و در ﭘﺎره اي از اوﻗﺎت ﺑﺎ آن ﻣﺸﻜﻞ ﭘﻴﺪا ﻣﻲ ﻛﻨﻨﺪ و ﺗﻨﻬـﺎ ﻣـﺘﻦ‬ ‫ﺑﺪون ﺣﺮﻛﺖ را ﻧﺸﺎن ﻣﻲ دﻫﻨﺪ‪.‬‬ ‫در اﻳﻨﺠﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﺪي را ﻛﻪ ﺑﺮاي ﺳﺎﺧﺖ ﻣﺘﻦ ﻣﺘﺤﺮك ﺳﺘﻔﺎده ﻣﻲ ﺷﻮد ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪:‬‬ ‫>‪</marquee‬ﻣﺘﻦ ﻣﻮرد ﻧﻈﺮ ﺧﻮد را اﻳﻨﺠﺎ ﺑﻨﻮﻳﺴﻴﺪ>\"‪<marquee loop=\"infinite‬‬ ‫ﺷﻨﺎﺳﻪ \"‪ loop=\"infinte‬ﺑﺎﻋﺚ ﻣﻲ ﺷﻮد ﻛﻪ ﻣﺘﻦ ﺗﺎ ﻫﻨﮕﺎﻣﻲ ﻛﻪ ﺻﻔﺤﻪ ﺑﺎز اﺳﺖ ﺑﻪ ﺣﺮﻛﺖ ﺧﻮد اداﻣﻪ دﻫﺪ‪ .‬ﺷﻤﺎ‬ ‫ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ ﺟﺎي اﻳﻦ ﺷﻨﺎﺳﻪ از \"‪ loop=\"-1‬ﻫﻢ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬ ‫ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺗﻐﻴﻴﺮاﺗﻲ را در اﻳﻦ ﺗﮓ اﻳﺠﺎد ﻛﻨﻴﺪ ﺑﻪ ﺟﺎي ‪ infinite‬در ﺷﻨﺎﺳﻪ ‪ loop‬ﻣﻲ ﺗﻮاﻧﻴﺪ از اﻋﺪاد اﺳﺘﻔﺎده‬ ‫ﻛﻨﻴﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل \"‪ loop=\"2‬ﺑﻪ ﻣﺮورﮔﺮ ﻣﻲ ﮔﻮﻳﺪ ﻛﻪ ﺣﺮﻛﺖ ﻣﺘﻦ را ﭘﺲ از دو ﺑﺎر ﭼﺮﺧﺶ ﻣﺘﻮﻗﻒ ﻛﻨﺪ‪.‬‬ ‫ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺎ وارد ﻛﺮدن ﺷﻨﺎﺳﻪ \" \"=‪ bgcolor‬ﺑﻪ ﺷﻤﺎ اﻣﻜﺎن اﻳﻦ را ﻣﻲ دﻫﺪ ﻛﻪ رﻧﮓ زﻣﻴﻨﻪ ﻣﺤﻠﻲ را ﻛﻪ ﻣـﺘﻦ در‬ ‫آن در ﺣﺎل ﭼﺮﺧﺶ اﺳﺖ ﺗﻐﻴﻴﺮ دﻫﻴﺪ‪ .‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮاي ﺗﻐﻴﻴﺮ رﻧـﮓ زﻣﻴﻨـﻪ از ﻧـﺎم رﻧـﮓ ﻳـﺎ ﻣﻌـﺎدل ﻫﮕﺰادﺳـﻴﻤﺎل آﻧﻬـﺎ‬ ‫اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬ﺑﻪ ﻳﻚ ﻣﺜﺎل ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬ ‫>\"‪<marquee loop=\"infinite\" bgcolor=\"yellow‬‬ ‫ﻣﺘﻦ ﻣﻮرد ﻧﻈﺮ ﺧﻮد را اﻳﻨﺠﺎ ﺑﻨﻮﻳﺴﻴﺪ‬ ‫>‪</marquee‬‬ ‫ﺑﺎ اﺿﺎﻓﻪ ﻛﺮدن ﺷﻨﺎﺳﻪ \" \"=‪ width‬ﻣﻲ ﺗﻮاﻧﻴﺪ ﻋﺮض ﻣﺘﻦ ﻣﺘﺤﺮك ﺧﻮد را ﺗﻌﻴﻴﻦ ﻛﻨﻴﺪ‪ .‬در اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﻲ ﺗﻮاﻧﻴـﺪ از‬ ‫ﻣﻘﻴﺎس ﭘﻴﻜﺴﻞ و ﻳﺎ در ﺻﺪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬ ‫>\"‪<marquee loop=\"infinite\" bgcolor=\"yellow\" width=\"400‬‬ ‫ﻣﺘﻦ ﻣﻮرد ﻧﻈﺮ ﺧﻮد را اﻳﻨﺠﺎ ﺑﻨﻮﻳﺴﻴﺪ‬ ‫>‪</marquee‬‬ ‫ﺑﺎ ﺗﮓ ﺑﺎﻻ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻳﻚ ﻣﺘﻦ ﻣﺘﺤﺮك ﺑﺎ ﻋﺮض ‪ 400‬ﭘﻴﻜﺴﻞ و رﻧﮓ زﻣﻴﻨﻪ زرد اﻳﺠﺎد ﻛﻨﻴﺪ ‪.‬‬‫‪Page76 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫>\"‪<marquee loop=\"infinite\" bgcolor=\"yellow\" width =\"50%‬‬ ‫ﻣﺘﻦ ﻣﻮرد ﻧﻈﺮ ﺧﻮد را اﻳﻨﺠﺎ ﺑﻨﻮﻳﺴﻴﺪ‬ ‫>‪</marquee‬‬ ‫ﺑﺎ ﺗﮓ ﺑﺎﻻ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﺘﻨﻲ ﻣﺘﺤﺮك ﺑﺎ ‪ 50‬در ﺻﺪ ﻋﺮض ﭘﻨﺠﺮه ﻣﺮورﮔﺮ و ﺑﺎ رﻧﮓ زﻣﻴﻨﻪ زرد اﻳﺠﺎد ﻛﻨﻴﺪ‪.‬‬‫‪Page77 ‬‬ ‫ ﺳﺎﺧﺘﻦ ﺟﺪول در ﻃﺮاﺣﻲ ﺻﻔﺤﻪ ﺑﺎ‪HTML‬‬ ‫آﻳﺎ ﺷﻤﺎ ﻣﻲ ﺧﻮاﻫﻴﺪ ﻳﻚ ﺟﺪول )‪ (table‬در ﺻﻔﺤﻪ ﺧﻮد اﻳﺠﺎد ﻛﻨﻴﺪ؟ ﺑﺮاي اﻳﺠﺎد ﻳﻚ ﺟﺪول ﺑﺎﻳﺪ از اﻳـﻦ ﺗـﮓ اﺳـﺘﻔﺎده‬ ‫ﻛﻨﻴﺪ‪:‬‬ ‫>‪<table‬‬ ‫‪.......‬ﻣﺤﺘﻮﻳﺎت ﺟﺪول‪........‬‬ ‫>‪</table‬‬ ‫ﺑﺮاي اﻳﺠﺎد ﻳﻚ ﺟﺪول ﺑﺎﻳﺪ ﺗﮓ اﺑﺘﺪاﻳﻲ آن ﻳﻌﻨﻲ >‪<table‬را در ﺟﺎﻳﻲ ﻛﻪ ﻣﻲ ﺧﻮاﻫﻴﺪ ﺟﺪول وارد ﺷﻮد‪ ،‬ﻗـﺮار دﻫﻴـﺪ‪ .‬و‬ ‫در ﭘﺎﻳــــــﺎن ﺟــــــﺪول ﻫــــــﻢ از ﺗــــــﮓ ﭘﺎﻳــــــﺎﻧﻲ آن ﻳﻌﻨــــــﻲ >‪<table/‬اﺳــــــﺘﻔﺎده ﻛﻨﻴــــــﺪ‪.‬‬ ‫ﺑﺮاي اﻓﺰودن ﻣﺤﺘﻮﻳﺎت ﺑﻪ ﺟﺪول ﺑﺎﻳﺪ از ﺗﮓ >‪<td‬اﺳـﺘﻔﺎده ﻛﻨﻴـﺪ‪ .‬ﻧـﺎم اﻳـﻦ ﺗـﮓ ﻣﺨﻔـﻒ ‪ table data‬اﺳـﺖ‪.‬‬ ‫ﻣﺤﺘﻮﻳﺎت ﺟﺪول ﭼﻴﺰﻫﺎﻳﻲ ﻫﺴﺘﻨﺪ ﻛﻪ ﺷﻤﺎ ﺑﻌﺪ از اﻳﻦ ﺗﮓ ﻗﺮار ﻣﻲ دﻫﻴﺪ‪ .‬در ﭘﺎﻳﺎن ﻫﻢ ﺑﺎﻳﺪ ﭘﺲ از ﻣﺤﺘﻮﻳـﺎت ﺟـﺪول از‬ ‫ﺗﮓ ﭘﺎﻳﺎﻧﻲ >‪<td/‬ﻗﺒﻞ از ﺗﮓ ﭘﺎﻳﺎﻧﻲ ﺟﺪول اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬ﻣﺎﻧﻨﺪ زﻳﺮ‪:‬‬ ‫>‪<table‬‬ ‫>‪<td‬‬ ‫‪......‬ﻣﺤﺘﻮﻳﺎت ﺟﺪول‪........‬‬ ‫>‪</td‬‬ ‫>‪</table‬‬ ‫اﻟﺒﺘﻪ اﻳﻦ ﻳﻚ ﺟﺪول ﺳﺎده اﺳﺖ و ﺷﺎﻳﺪ در ﻇﺎﻫﺮ زﻳﺎد ﺗﻔﺎوﺗﻲ ﺑﺎ ﻳﻚ ﻧﻮﺷﺘﻪ ﺳﺎده ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﺮاي ﺟﺪول ﻛﺎدر )‪ (border‬ﻫﻢ ﺗﻌﺮﻳﻒ ﻛﻨﻴﻢ‪ .‬ﺑﺮاي اﻳﻦ ﻛﺎر ﺑﺎﻳﺪ ﺷﻨﺎﺳﻪ ﻣﺮﺑﻮﻃـﻪ را در ﺗـﮓ ﺟـﺪول ﻗـﺮار‬ ‫دﻫﻴﻢ‪ .‬ﻣﺎﻧﻨﺪ زﻳﺮ‪:‬‬ ‫>\"‪<table border=\"3‬‬ ‫>‪<td‬‬ ‫‪......‬ﻣﺤﺘﻮﻳﺎت ﺟﺪول‪........‬‬ ‫>‪</td‬‬ ‫>‪</table‬‬ ‫ﺣﺎﻻ ﺟﺪول ﻣﺎ ﻛﻤﻲ ﻣﺸﺨﺺ ﺗﺮ ﺷﺪ‪ ،‬ﺑﻪ آن ﻧﮕﺎه ﻛﻨﻴﺪ‪:‬‬ ‫‪........‬ﻣﺤﺘﻮﻳﺎت ﺟﺪول‪......‬‬ ‫ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺿﺨﺎﻣﺖ ﻛﺎدر ﺟﺪول را ﺑﻪ دﻟﺨﻮاه ﺧﻮد ﺗﻐﻴﻴﺮ دﻫﻴﺪ‪ .‬ﺑﺮاي اﻳﻦ ﻛﺎر ﻓﻘﻂ ﻛﺎﻓﻲ اﺳـﺖ ﺗـﺎ ﻋـﺪدي را ﻛـﻪ ﺑـﻪ‬ ‫ﻋﻨﻮان ﻣﻘﺪار ﺷﻨﺎﺳﻪ ‪ border‬ﺑﻪ ﻛﺎر ﺑﺮدﻳﻢ‪ ،‬ﺗﻐﻴﻴﺮ دﻫﻴﺪ‪ .‬اﮔﺮ ﻣﻘﺪار اﻳﻦ ﻋﺪد را ﺻﻔﺮ ﻗﺮار دﻫﻴﺪ ﻛﺎدر دﻳﺪه ﻧﺨﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫ﺗﺎ اﻳﻨﺠﺎ ﻫﺮ ﭼﻪ ﮔﻔﺘﻴﻢ درﺑﺎره ﺟﺪوﻟﻲ ﺑﺎ ﻳﻚ ﺳﻠﻮل ﺑﻮد‪ .‬ﺑﺮاي اﻳﻨﻜﻪ ﺟﺪوﻟﻲ ﺑﺎ ﺗﻌﺪاد ﺑﻴﺸﺘﺮي ﺳـﻠﻮل داﺷـﺘﻪ ﺑﺎﺷـﻴﻢ‪ ،‬ﻣـﺜ ًﻼ‬ ‫ﺑﺨﻮاﻫﻴﻢ ﻳﻚ ﺳﻠﻮل دﻳﮕﺮ در ﻫﻤﺎن ﺧﻂ اﻳﺠﺎد ﻛﻨﻴﻢ‪ ،‬ﺑﺎﻳﺪ دوﺑﺎره از ﺗﮓ ‪ td‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬ﻣﺎﻧﻨﺪ زﻳﺮ‪:‬‬ ‫>\"‪<table border=\"3‬‬ ‫>‪<td‬‬ ‫ﺳﻠﻮل اول‬ ‫>‪</td‬‬ ‫>‪<td‬‬ ‫ﺳﻠﻮل دوم‬ ‫>‪</td‬‬ ‫>‪</table‬‬ ‫ﻣﻲ ﺗﻮاﻧﻴﺪ ﺳﻠﻮﻟﻬﺎي اﻳﺠﺎد ﺷﺪه را در اﻳﻨﺠﺎ ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ‪:‬‬ ‫ﺳﻠﻮل دوم ﺳﻠﻮل اول‬‫‪Page78 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺣﺎﻻ ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ ﺑﻪ ﺧﻂ ﺑﻌﺪي ﻳﺎ ﺑﻪ اﺻﻄﻼح ﺑﻪ ردﻳﻒ ﺑﻌﺪي ﺑﺮوﻳﻢ‪ .‬ﺑﺮاي اﻳـﻦ ﻛـﺎر ﺑﺎﻳـﺪ از ﺗـﮓ ‪ tr‬اﺳـﺘﻔﺎده‬ ‫ﻛﻨﻴﻢ‪ .‬اﻳﻦ ﺗﮓ ﺑﺎ >‪<tr‬ﺷﺮوع و ﺑﺎ >‪</tr‬ﭘﺎﻳﺎن ﻣﻲ ﭘﺬﻳﺮد‪ .‬ﻣﺎﻧﻨﺪ زﻳﺮ‪:‬‬ ‫>\"‪<table border=\"3‬‬ ‫>‪<td‬‬ ‫ﺳﻄﺮ اول و ﺳﻠﻮل اول‬ ‫>‪</td‬‬ ‫>‪<td‬‬ ‫ﺳﻄﺮ اول و ﺳﻠﻮل دوم‬ ‫>‪</td‬‬ ‫>‪<tr‬‬ ‫>‪<td‬‬ ‫ﺳﻄﺮ دوم و ﺳﻠﻮل اول‬ ‫>‪</td‬‬ ‫>‪<td‬‬ ‫ﺳﻄﺮ دوم و ﺳﻠﻮل دوم‬ ‫>‪</td‬‬ ‫>‪</tr‬‬ ‫>‪</table‬‬ ‫ﻧﺘﻴﺠﻪ ﺑﻪ اﻳﻦ ﺻﻮرت ﻣﺸﺎﻫﺪه ﻣﻲ ﺷﻮد‪:‬‬ ‫ﺳﻄﺮ اول و ﺳﻠﻮل دوم ﺳﻄﺮ اول و ﺳﻠﻮل اول‬ ‫ﺳﻄﺮ دوم و ﺳﻠﻮل دوم ﺳﻄﺮ دوم و ﺳﻠﻮل اول‬‫‪Page79 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻨﺎ ﺑﻪ ﻧﻴﺎز ﺧﻮد ﻓﺮﻣﺎﻧﻬﺎﻳﻲ را ﺑﻪ ﺗﮓ ﺟﺪول اﺿﺎﻓﻪ ﻛﻨﻴﺪ‪ .‬در اﻳﻨﺠﺎ ﺑﺮﺧﻲ از اﻳﻦ ﻓﺮﻣﺎﻧﻬﺎ آورده ﺷﺪه اﺳﺖ‪:‬‬ ‫‪cellspacing‬‬ ‫ﺑﺮاي اﻳﺠﺎد ﻓﺎﺻﻠﻪ ﺑﻴﻦ ﺳﻠﻮﻟﻬﺎ ﻋﺪد ﻣﻮرد ﻧﻈﺮ ﺧﻮد را در اﻳﻦ ﻓﺮﻣﺎن وارد ﻛﻨﻴﺪ‪.‬‬‫‪Page80 ‬‬ ‫‪cellpadding‬‬ ‫از اﻳﻦ ﻓﺮﻣﺎن ﺑﺮاي اﻓﺰودن ﻓﻀﺎ ﺑﻪ داﺧﻞ ﻳﻚ ﺳﻠﻮل اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ .‬ﻣﻘﺪار ﻓﻀـﺎي ﻣـﻮرد ﻧﻈـﺮ ﺧـﻮد را در اﻳـﻦ ﻓﺮﻣـﺎن وارد‬ ‫ﻛﻨﻴﺪ‪.‬‬ ‫ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ در ﻣﺜﺎل ﻗﺒﻞ ﺑﻴﻦ ﺳﻠﻮﻟﻬﺎ ﻳﻚ ﻓﺎﺻﻠﻪ ﺑﻪ اﻧﺪازه ‪ 10‬اﻳﺠﺎد ﻛﻨﻴﻢ‪ .‬ﺗﮓ ﺟـﺪول را ﻣﻄـﺎﺑﻖ زﻳـﺮ ﺗﻐﻴﻴـﺮ‬ ‫ﻣﻲ دﻫﻴﻢ‪:‬‬ ‫>\"‪<table border=\"3\" cellspacing=\"10‬‬ ‫ﺟﺪول ﺑﻪ دﺳﺖ آﻣﺪه ﺑﻪ ﺷﻜﻞ زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‪:‬‬ ‫ﺳﻄﺮ اول و ﺳﻠﻮل دوم ﺳﻄﺮ اول و ﺳﻠﻮل اول‬ ‫ﺳﻄﺮ دوم و ﺳﻠﻮل دوم ﺳﻄﺮ دوم و ﺳﻠﻮل اول‬ ‫ﺣﺎﻻ ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ ﻳﻚ ﻓﺎﺻﻠﻪ ﺑﻪ اﻧﺪازه ‪ 10‬را ﺑﻪ داﺧﻞ ﺳﻠﻮﻟﻬﺎي ﺟﺪول ﻣﺜﺎل ﻗﺒﻞ اﺿﺎﻓﻪ ﻛﻨﻴﻢ‪ .‬ﺗﮓ ﺟﺪول را ﺑﻪ‬ ‫اﻳﻦ ﺻﻮرت ﺗﻐﻴﻴﺮ ﻣﻲ دﻫﻴﻢ‪:‬‬ ‫>\"‪<table border=\"3\" cellpadding=\"10‬‬ ‫ﺟﺪول ﺑﻪ دﺳﺖ آﻣﺪه ﺑﻪ ﺻﻮرت زﻳﺮ ﺧﻮاﻫﺪ ﺑﻮد‪:‬‬ ‫ﺳﻄﺮ اول و ﺳﻠﻮل دوم ﺳﻄﺮ اول و ﺳﻠﻮل اول‬ ‫ﺳﻄﺮ دوم و ﺳﻠﻮل دوم ﺳﻄﺮ دوم و ﺳﻠﻮل اول‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺣﺎﻻ ﻣﻲ ﺧﻮاﻫﻴﻢ ﻫﺮ دو ﻣﺜﺎل ﻗﺒﻞ را ﺑﺎ ﻫﻢ اﻣﺘﺤﺎن ﻛﻨﻴﻢ‪ ،‬ﻳﻌﻨﻲ ﺗﮓ ﺟﺪول را ﻣﻄﺎﺑﻖ زﻳﺮ ﺗﻐﻴﻴﺮ دﻫﻴﻢ‪:‬‬ ‫>\"‪<table border=\"3\" cellspacing=\"10\" cellpadding=\"10‬‬ ‫ﻧﺘﻴﺠﻪ را ﻣﻼﺣﻈﻪ ﻛﻨﻴﺪ‪:‬‬ ‫ﺳﻄﺮ اول و ﺳﻠﻮل دوم ﺳﻄﺮ اول و ﺳﻠﻮل اول‬ ‫ﺳﻄﺮ دوم و ﺳﻠﻮل دوم ﺳﻄﺮ دوم و ﺳﻠﻮل اول‬ ‫ﺷــﻤﺎ ﻣــﻲ ﺗﻮاﻧﻴــﺪ ﻫــﺮ ﭼﻴــﺰي را ﻛــﻪ ﺑﺨﻮاﻫﻴــﺪ داﺧــﻞ ﺳــﻠﻮﻟﻬﺎ وارد ﻛﻨﻴــﺪ‪ .‬ﻣﺎﻧﻨــﺪ ﻋﻜــﺲ‪ ،‬ﻟﻴﻨــﻚ‪ ،‬ﭘــﺎراﮔﺮاف و‪...‬‬ ‫ﺑﺮاي اﻳﻦ ﻛﺎر ﻓﻘﻂ ﻛﺪ ﻣﻮرد ﻧﻈﺮ ﺧﻮد را ﺑﻴﻦ ﺗﮓ >‪<td‬و >‪<td/‬وارد ﻛﻨﻴﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل ﻓﺮض ﻛﻨﻴﺪ ﻣـﻲ ﺧـﻮاﻫﻴﻢ ﻳـﻚ‬ ‫ﻟﻴﻨﻚ در ﺟﺪول اﻳﺠﺎد ﻛﻨﻴﻢ‪ .‬ﻣﺎﻧﻨﺪ زﻳﺮ ﻋﻤﻞ ﻣﻲ ﻛﻨﻴﻢ‪:‬‬ ‫>\"‪<table border=\"2‬‬ ‫>‪<td‬‬ ‫>‪</a‬آﻣﻮزش ﺟﺎوا اﺳﻜﺮﭘﺖ>\"‪<a href=\"../javascript/index.html‬‬ ‫>‪</td‬‬ ‫>‪</table‬‬ ‫اﻳﻦ ﻫﻢ ﺟﺪوﻟﻲ ﻛﻪ ﺑﻴﻨﻨﺪه ﻧﻬﺎﻳﻲ در ﺻﻔﺤﻪ ﻣﺸﺎﻫﺪه ﻣﻲ ﻛﻨﺪ‪:‬‬ ‫آﻣﻮزش ﺟﺎوا اﺳﻜﺮﭘﺖ‬ ‫ﺑﺮاي وارد ﻛﺮدن ﻋﻜﺲ ﻧﻴﺰ ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﻪ اﻳﻦ ﺻﻮرت ﻋﻤﻞ ﻛﻨﻴﻢ‪:‬‬‫‪Page81 ‬‬ ‫>\"‪<table border=\"2‬‬ ‫>‪<td‬‬ ‫>\"‪<img src=\"learn_html.gif‬‬ ‫>‪</td‬‬ ‫>‪</table‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ ﺟﺪاول ‪ HTML :‬رﻧﮓ زﻣﻴﻨﻪ‪ ،‬ﻧﺤﻮه ﻗﺮارﮔﻴﺮي اﻓﻘﻲ و ﻋﻤﻮدي‪...‬‬ ‫اﮔﺮ ﺑﺨﻮاﻫﻴﻢ ﻋﺮض ﻳﻚ ﺟﺪول را ﺗﻐﻴﻴﺮ دﻫﻴﻢ ﻣﻲ ﺗﻮاﻧﻴﻢ از ﺷﻨﺎﺳﻪ ‪ width‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬ﺑﺎ اﺿﺎﻓﻪ ﻛﺮدن اﻳﻦ ﺷﻨﺎﺳﻪ‬ ‫ﺑﻪ ﺗﮓ ﺟﺪول ﻣﻲ ﺗﻮاﻧﻴﻢ ﻣﻘﺪار ﻋﺮض ﺟﺪول را ﻣﺸﺨﺺ ﻛﻨﻴﻢ‪ .‬اﻳﻦ ﻣﻘﺪار ﻣﻲ ﺗﻮاﻧـﺪ در ﻣﻘﻴـﺎس ﭘﻴﻜﺴـﻞ ﺑﺎﺷـﺪ ﻳـﺎ ﺑـﻪ‬ ‫ﺻﻮرت درﺻﺪ‪ .‬ﺑﺮاي ﺗﻐﻴﻴﺮ دادن ارﺗﻔﺎع ﺟﺪول ﻧﻴﺰ ﻣﻴﺘﻮاﻧﻴﻢ از ﺷﻨﺎﺳﻪ ‪ height‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬ﺑﺮاي ﻣﺜﺎل اﮔﺮ ﺑﺨﻮاﻫﻴﻢ‬ ‫ﻳﻚ ﺟﺪول ﺑﺎ ﻋﺮض ‪ 500‬ﭘﻴﻜﺴﻞ و ارﺗﻔﺎع ‪ 50‬ﭘﻴﻜﺴﻞ داﺷﺘﻪ ﺑﺎﺷﻴﻢ ﻣﻲ ﺗﻮاﻧﻢ ﺑﻪ ﺻﻮرت زﻳﺮ ﻋﻤﻞ ﻛﻨﻴﻢ‪:‬‬ ‫>\"‪<table border=\"3\" width=\"500\" height=\"50‬‬ ‫>‪<td‬‬ ‫ﻣﺤﺘﻮﻳﺎت ﺟﺪول‬ ‫>‪</td‬‬ ‫>‪</table‬‬ ‫در اﻳﻨﺠﺎ ﻣﻲ ﺑﻴﻨﻴﺪ ﻛﻪ ﺑﺮﺧﻼف ﻣﺘﻦ درون ﺟﺪول ﻛﻪ ﻣﺘﻦ ﻛﻮﺗـﺎﻫﻲ اﺳـﺖ ﻋـﺮض ﺟـﺪول ﻧﺴـﺒﺘ ًﺎ زﻳـﺎد اﺳـﺖ )ﻫﻤـﺎن ‪500‬‬ ‫ﭘﻴﻜﺴﻠﻲ ﻛﻪ ﺑﺮاي آن ﺗﻌﺮﻳﻒ ﻛﺮدﻳﻢ(‪:‬‬ ‫ﻣﺤﺘﻮﻳﺎت ﺟﺪول‬ ‫اﮔﺮ ﺑﺨﻮاﻫﻴﻢ ﻧﺤﻮه ﻗﺮار ﮔﺮﻓﺘﻦ ﻣﺤﺘﻮﻳﺎت درون ﺟﺪول را ﺗﻌﻴﻴﻦ ﻛﻨﻴﻢ ﻣﻲ ﺗﻮاﻧﻴﻢ از ﺷﻨﺎﺳﻪ ﻫـﺎي زﻳـﺮ را در ﺗـﮓ >‪<td‬‬ ‫اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪:‬‬ ‫\"‪align=\"left‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﺤﺘﻮﻳﺎت ﺟﺪول ﺷﻤﺎ را در ﺳﻤﺖ ﭼﭗ آن ﻗﺮار ﻣﻲ دﻫﺪ‪.‬‬ ‫\"‪align=\"right‬‬ ‫ﺑﺎ اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﺤﺘﻮﻳﺎت ﺟﺪول را ﺑﻪ ﺻﻮرت راﺳﺖ ﭼﻴﻦ ﻧﻤﺎﻳﺶ دﻫﻴﺪ‪.‬‬‫‪Page82 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫\"‪align=\"center‬‬ ‫ﺑﺎ اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﺤﺘﻮﻳﺎت ﺟﺪول را ﻣﺘﻤﺎﻳﻞ ﺑﻪ ﻣﺮﻛﺰ ﺟﺪول ﻗﺮار دﻫﻴﺪ‪.‬‬ ‫ﺣﺎﻻ اﻳﻦ ﺷﻨﺎﺳﻪ ﻫﺎ را در ﻳﻚ ﺟﺪول ﺑﻪ ﻛﺎر ﻣﻲ ﺑﺮﻳﻢ‪:‬‬ ‫>\"‪<table width=\"600\" border=\"3‬‬ ‫>\"‪<td align=\"left‬‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ ﭼﭗ‬ ‫>‪</td‬‬ ‫>\"‪<td align=\"center‬‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ ﻣﺮﻛﺰ‬ ‫>‪</td‬‬ ‫>\"‪<td align=\"right‬‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ راﺳﺖ‬ ‫>‪</td‬‬ ‫>‪</table‬‬ ‫ﻣﻲ ﺗﻮاﻧﻴﺪ ﻧﺤﻮه ﻗﺮارﮔﻴﺮي ﻣﺤﺘﻮﻳﺎت ﺳﻠﻮﻟﻬﺎ را در ﺟﺪول زﻳﺮ ﻣﻼﺣﻈﻪ ﻛﻨﻴﺪ‪:‬‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ ﭼﭗ‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ ﻣﺮﻛﺰ‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ راﺳﺖ‬ ‫اﮔــﺮ ﺑﺨــﻮاﻫﻴﻢ ﻧﺤــﻮه ﻗﺮارﮔﻴــﺮي ﻣﺤﺘﻮﻳــﺎت ﺳــﻠﻮﻟﻬﺎ را ﺑــﻪ ﺻــﻮرت ﻋﻤــﻮدي ﺗﻨﻈــﻴﻢ ﻛﻨــﻴﻢ‪ ،‬ﻣــﻲ ﺗــﻮاﻧﻴﻢ از‬ ‫ﺷﻨﺎﺳﻪ ‪ valign‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪:‬‬ ‫\"‪valign=\"top‬‬ ‫ﺑﺎ اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﺤﺘﻮﻳﺎت ﺳﻠﻮل در ﺑﺎﻻي آن ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ‪.‬‬‫‪Page83 ‬‬ ‫‪www.IrPDF.com‬‬

‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫‪www.IrPDF.com‬‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫\"‪valign=\"middle‬‬ ‫ﺑﻪ وﺳﻴﻠﻪ اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﺤﺘﻮﻳﺎت ﺳﻠﻮل در وﺳﻂ آن ﺑﻪ ﻧﻤﺎﻳﺶ در ﻣﻲ آﻳﻨﺪ‪.‬‬ ‫\"‪valign=\"bottom‬‬ ‫ﺑﺎ اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﺤﺘﻮﻳﺎت ﺳﻠﻮل در ﭘﺎﻳﻴﻦ آن ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ‪.‬‬ ‫در ﻣﺜﺎل زﻳﺮ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻧﺤﻮه اﺳﺘﻔﺎده از ﺷﻨﺎﺳﻪ ﻫﺎي ﺑﺎﻻ در ﻳﻚ ﺟﺪول را ﺑﺒﻴﻨﻴﺪ‪:‬‬ ‫>\"‪<table width=\"600\" height=\"100\" border=\"3‬‬ ‫>\"‪<td align=\"center\" valign=\"top‬‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ ﺑﺎﻻ‬ ‫>‪</td‬‬ ‫>\"‪<td align=\"center\" valign=\"middle‬‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ وﺳﻂ‬ ‫>‪</td‬‬ ‫>\"‪<td align=\"center\" valign=\"bottom‬‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ ﭘﺎﻳﻴﻦ‬ ‫>‪</td‬‬ ‫>‪</table‬‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ ﺑﺎﻻ‬ ‫اﻳﻦ ﻫﻢ ﺟﺪول ﻧﻬﺎﻳﻲ‪:‬‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ ﭘﺎﻳﻴﻦ‬ ‫ﻣﺘﻤﺎﻳﻞ ﺑﻪ وﺳﻂ‬‫‪Page84 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻧﺤﻮه ﻗﺮارﮔﻴﺮي ﻋﻤﻮدي ﻣﺤﺘﻮﻳﺎت ﺳﻠﻮﻟﻬﺎ زﻣﺎﻧﻲ ﻣﻔﻴﺪ ﺧﻮاﻫﺪ ﺑﻮد ﻛﻪ ﺗﻌﺪاد ﺳﻄﺮﻫﺎي ﻣﺤﺘﻮﻳﺎت ﺳﻠﻮﻟﻬﺎي ﻣﺨﺘﻠﻒ در ﻳﻚ‬ ‫ردﻳﻒ ﺟﺪول ﺑﺎ ﻫﻢ ﺑﺮاﺑﺮ ﻧﺒﺎﺷﻨﺪ‪ .‬در ﺣﻘﻴﻘﺖ زﻣﺎﻧﻲ ﻛﻪ ﻫﻤﻪ ﺳﻠﻮﻟﻬﺎ داراي ﻳـﻚ ﺗﻌـﺪاد ﺳـﻄﺮ ﺑﺎﺷـﻨﺪ و ﻧﺤـﻮه ﻗـﺮار ﮔﻴـﺮي‬ ‫ﻋﻤﻮدي ﻣﺤﺘﻮﻳﺎت آﻧﻬﺎ ﺑﻪ ﻳﻚ ﺻﻮرت اﺳﺖ‪.‬‬ ‫ﺷﻨﺎﺳﻪ ﻫﺎي دﻳﮕﺮي ﻧﻴﺰ وﺟﻮد دارد ﻛﻪ ﻣﻲ ﺗﻮاﻧﻴﻢ در ﺗﮓ ‪ td‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪:‬‬ ‫‪rowspan‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﺸﺨﺺ ﻛﻨﻨﺪه اﻳﻦ اﺳﺖ ﻛﻪ ارﺗﻔﺎع ﺳﻠﻮل ﻣﻌﺎدل ﭼﻨﺪ ﺳﻠﻮل اﺳﺖ‬ ‫‪colspan‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻣﺸﺨﺺ ﻛﻨﻨﺪه اﻧﺪازه اﻓﻘﻲ ﻳﻚ ﺳﻠﻮل ﺑﺮ اﺳﺎس ﺗﻌﺪاد ﺳﻠﻮل اﺳﺖ‪.‬‬ ‫ﺑﻪ ﻳﻚ ﻣﺜﺎل ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬‫‪Page85 ‬‬ ‫>\"‪<table border=\"2‬‬ ‫>\"‪<td align=\"center‬‬ ‫ﺳﻠﻮل اول‬ ‫>‪</td‬‬ ‫>\"‪<td rowspan=\"2\" align=\"center‬‬ ‫>\"‪<img src=\"learn_html.gif‬‬ ‫>‪</td‬‬ ‫>‪<tr‬‬ ‫>\"‪<td align=\"center‬‬ ‫ﺳﻠﻮل دوم‬ ‫>‪</td‬‬ ‫>‪</tr‬‬ ‫>‪</table‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫اﻳﻦ ﻫﻢ ﺟﺪول ﺑﻪ دﺳﺖ آﻣﺪه‪ .‬ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻣﻲ ﺑﻴﻨﻴﺪ ﺳﻠﻮﻟﻲ ﻛﻪ ﻣﺤﺘﻮي ﻋﻜﺲ اﺳﺖ در ﻛﻨﺎر دو ﺳﻠﻮل دﻳﮕﺮ ﻗﺮار ﮔﺮﻓﺘﻪ‬ ‫اﺳﺖ ﻧﻪ در ﻗﺴﻤﺖ ﺑﺎﻻي ﺳﻠﻮل دوم‪:‬‬‫‪Page86 ‬‬ ‫ﺳﻠﻮل اول‬ ‫ﺳﻠﻮل دوم‬ ‫ﺣﺎل ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ ﻳﻚ ﺟﺪول ﻣﺎﻧﻨﺪ زﻳﺮ داﺷﺘﻪ ﺑﺎﺷﻴﻢ‪:‬‬ ‫ﺳﻠﻮل اول‬ ‫ﺳﻠﻮل ﭼﻬﺎرم ﺳﻠﻮل ﺳﻮم ﺳﻠﻮل دوم‬ ‫ﺑﺮاي اﻳﺠﺎد اﻳﻦ ﺟﺪول در ﺗﮓ >‪<td‬در ردﻳﻒ اول از ﺷﻨﺎﺳﻪ \"‪ colspan=\"3‬اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ‪ .‬ﺑﺎ اﻳﻦ ﻛﺎر ﺳـﻠﻮل‬ ‫ﻣﻮﺟــــــﻮد در ردﻳــــــﻒ اول ﺑــــــﻪ اﻧــــــﺪازه ﺳــــــﻪ ﺳــــــﻠﻮل در ﻋــــــﺮض ﻛﺸــــــﻴﺪه ﻣــــــﻲ ﺷــــــﻮد‪.‬‬ ‫در اﻳﻨﺠﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﺪ ﻣﺮﺑﻮط ﺑﻪ اﻳﻦ ﺟﺪول را ﺑﺒﻴﻨﻴﺪ‪:‬‬ ‫>\"‪<table border=\"1‬‬ ‫>‪<tr‬‬ ‫>\"‪<td align=\"center\" colspan=\"3‬‬ ‫>‪</b‬ﺳﻠﻮل اول>‪<b‬‬ ‫>‪</td‬‬ ‫>‪</tr‬‬ ‫>‪<tr‬‬ ‫>\"‪<td align=\"center‬‬ ‫ﺳﻠﻮل دوم‬ ‫>‪</td‬‬ ‫>\"‪<td align=\"center‬‬ ‫ﺳﻠﻮل ﺳﻮم‬ ‫>‪</td‬‬ ‫>\"‪<td align=\"center‬‬ ‫ﺳﻠﻮل ﭼﻬﺎرم‬ ‫>‪</td‬‬ ‫>‪</tr‬‬ ‫>‪</table‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ در ﺻﻮرت ﺗﻤﺎﻳﻞ رﻧﮓ زﻣﻴﻨﻪ ﺟﺪول‪ ،‬ﺳﻄﺮ‪ ،‬ﺳﺘﻮن ﻳﺎ ﻫﺮ ﺳﻠﻮل را در ﺟـﺪول ﻛـﻪ ﺑﺨﻮاﻫﻴـﺪ ﺗﻐﻴﻴـﺮ دﻫﻴـﺪ‪.‬‬ ‫ﺑﺮاي ﺗﻌﻴﻴﻦ ﻛﺮدن رﻧﮓ زﻣﻴﻨﻪ ﺑﺮاي ﺟﺪول ﺑﺎﻳﺪ اﻳﻦ ﺷﻨﺎﺳﻪ ‪ bgcolor‬را در ﺗﮓ ﺟﺪول ﺑﻪ ﻛﺎر ﺑﺒﺮﻳﺪ و رﻧﮓ ﻣـﻮرد ﻧﻈـﺮ‬ ‫ﺧﻮد را در اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﻪ ﻛﺎر ﺑﺒﺮﻳﺪ‪.‬‬ ‫ﺑﺮاي ﻣﺜﺎل اﮔﺮ ﺑﺨﻮاﻫﻴﻢ ﺟﺪوﻟﻲ ﺑﺎ زﻣﻴﻨﻪ زرد اﻳﺠﺎد ﻛﻨﻴﻢ‪ ،‬ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﻪ اﻳﻦ ﺻﻮرت ﻋﻤﻞ ﻛﻨﻴﻢ‪:‬‬ ‫>\"‪<table border=\"3\" bgcolor=\"yellow‬‬ ‫>‪<td‬‬ ‫ﻣﺤﺘﻮﻳﺎت ﺟﺪول‬ ‫>‪</td‬‬ ‫>‪</table‬‬ ‫ﻗﺎﺑﻞ ذﻛﺮ اﺳﺖ ﻛﻪ اﮔﺮ ﺑﻪ ﺟﺎي ﺗﮓ اﺑﺘﺪاﻳﻲ ﺟﺪول از ﺗﮓ زﻳﺮ ﻧﻴﺰ اﺳﺘﻔﺎده ﻛﻨﻴﻢ ﻫﻤﺎن ﻧﺘﻴﺠﻪ را ﺑﻪ دﺳﺖ ﻣﻲ آورﻳﻢ‪:‬‬ ‫>\"‪<table border=\"3\" bgcolor=\"#ffff00‬‬ ‫اﮔﺮ ﺑﺨﻮاﻫﻴﻢ ﻫﺮ ﺳﻠﻮل رﻧﮓ زﻣﻴﻨﻪ ﻣﺮﺑﻮط ﺑﻪ ﺧﻮدش را داﺷﺘﻪ ﺑﺎﺷﺪ ﺑﺎﻳﺪ ﺷﻨﺎﺳﻪ ﻣﺮﺑﻮط ﺑﻪ رﻧﮓ زﻣﻴﻨﻪ را ﺑﻪ ﺗﮓ >‪<td‬‬ ‫اﺿﺎﻓﻪ ﻛﻨﻴﻢ‪.‬‬ ‫>\"‪<table border=\"3‬‬ ‫>\"‪<td bgcolor=\"yellow‬‬ ‫ﻣﺤﺘﻮﻳﺎت ﺳﻠﻮل اول‬ ‫>‪</td‬‬ ‫>\"‪<td bgcolor=\"green‬‬ ‫ﻣﺤﺘﻮﻳﺎت ﺳﻠﻮل دوم‬ ‫>‪</td‬‬ ‫>‪</table‬‬‫‪Page87 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫در آﺧﺮ ﻣﻲ ﺧﻮاﻫﻴﻢ رﻧﮓ زﻣﻴﻨﻪ ﻫﺮ ردﻳﻒ را ﺗﻐﻴﻴﺮ دﻫﻴﻢ‪ .‬ﺑﺮاي اﻳﻦ ﻛﺎر ﺷﻨﺎﺳﻪ ﻣﺮﺑﻮط ﺑﻪ رﻧﮓ زﻣﻴﻨﻪ را در ﺗﮓ >‪<tr‬ﻗﺮار‬ ‫ﻣﻲ دﻫﻴﻢ‪:‬‬ ‫>\"‪<table border=\"3\" width=\"300‬‬ ‫>\"‪<tr bgcolor=\"pink‬‬ ‫>‪</td‬ﺻﻮرﺗﻲ>‪<td‬‬ ‫>‪</td‬اﻳﻦ ردﻳﻒ ﺻﻮرﺗﻲ اﺳﺖ>‪<td‬‬ ‫>\"‪<tr bgcolor=\"gray‬‬ ‫>‪</td‬ﺧﺎﻛﺴﺘﺮي>‪<td‬‬ ‫>‪</td‬اﻳﻦ ردﻳﻒ ﺧﺎﻛﺴﺘﺮي اﺳﺖ>‪<td‬‬ ‫>‪</table‬‬ ‫اﻳﻦ ﻫﻢ ﺟﺪول ﺑﻪ دﺳﺖ آﻣﺪه‪:‬‬ ‫ﺻﻮرﺗﻲ‬ ‫اﻳﻦ ردﻳﻒ ﺻﻮرﺗﻲ اﺳﺖ‬ ‫ﺧﺎﻛﺴﺘﺮي‬ ‫اﻳﻦ ردﻳﻒ ﺧﺎﻛﺴﺘﺮي اﺳﺖ‬‫‪Page88 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ ﻗﺮار دادن دو ﺟﺪول در ﻛﻨﺎر ﻫﻢ ﺑﺎ اﺳﺘﻔﺎده از ﻳﻚ ﺟﺪول ﺑﺰرﮔﺘﺮ‬ ‫ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ دو ﺟﺪول را در ﻳﻚ ﺳﻄﺮ ﻗﺮار دﻫﻴﻢ‪ .‬اﮔﺮ ﺑﺨﻮاﻫﻴﻢ دو ﺗﮓ ﺟﺪول را ﭘﺸﺖ ﺳﺮ ﻫﻢ اﺳﺘﻔﺎده ﻛﻨـﻴﻢ‪،‬‬ ‫ﺟﺪول دوم در ﺳﻄﺮ ﺑﻌﺪي و زﻳﺮ ﺟﺪول اول ﻗﺮار ﻣﻲ ﮔﻴﺮد‪.‬‬ ‫ﺑﺮاي ﺣﻞ اﻳﻦ ﻣﺸﻜﻞ ﻣﻲ ﺗﻮاﻧﻴﺪ دو ﺟﺪول ﻣﻮرد ﻧﻈﺮ را در ﻳﻚ ﺟﺪول ﻛﻪ آﻧﻬﺎ را در ﺑﺮ ﻣﻲ ﮔﻴﺮد ﻗﺮار دﻫﻴﻢ‪ .‬در اﻳﻦ ﺻـﻮرت‬ ‫ﻣﻲ ﺗﻮان دو ﺟﺪول در ﻳﻚ ﺳﻄﺮ اﻳﺠﺎد ﻛﺮد‪.‬‬ ‫در اﻳﻨﺠﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻛﺪي را ﻛﻪ ﻳﻚ ﺟﺪول را درون ﻳﻚ ﺟﺪول دﻳﮕﺮ اﻳﺠﺎد ﻣﻲ ﻛﻨﺪ‪:‬‬ ‫>‪ --‬ﺗﮓ آﻏﺎزي ﺟﺪول ﺑﻴﺮوﻧﻲ ‪<table width=\"500\" border=\"4\"><!--‬‬ ‫>‪ --‬ﺳﻠﻮل اول در ﺟﺪول ﺑﻴﺮوﻧﻲ ‪<td align=\"center\"><!--‬‬ ‫>‪ --‬آﻏﺎز ﺟﺪول دروﻧﻲ ‪<table width=\"400\" border=\"2\"><!--‬‬ ‫>‪ --‬اوﻟﻴﻦ ﺳﻠﻮل ﺟﺪول دروﻧﻲ ‪<td align=\"center\"><!--‬‬ ‫ﻣﺤﺘﻮﻳﺎت ﺟﺪول دروﻧﻲ‬ ‫>‪ --‬ﭘﺎﻳﺎن ﺳﻠﻮل ﺟﺪول دروﻧﻲ ‪</td><!--‬‬ ‫>‪ --‬ﭘﺎﻳﺎن ﺟﺪول دروﻧﻲ ‪</table><!--‬‬ ‫>‪ --‬ﭘﺎﻳﺎن ﺳﻠﻮل ﺟﺪول ﺑﻴﺮوﻧﻲ ‪</td><!--‬‬ ‫>‪ --‬ﭘﺎﻳﺎن ﺟﺪول ﺑﻴﺮوﻧﻲ ‪</table><!--‬‬ ‫اﻳﻦ ﻫﻢ ﺟﺪول ﺑﻪ دﺳﺖ آﻣﺪه‪:‬‬ ‫ﻣﺤﺘﻮﻳﺎت ﺟﺪول دروﻧﻲ‬ ‫ﺑﻪ ﻳﺎد داﺷﺘﻪ ﺑﺎﺷﻴﺪ ﻛﻪ ﺟﺪوﻟﻬﺎي دروﻧﻲ را ﺑﺎﻳﺪ در ﺳﻠﻮﻟﻬﺎي ﺟﺪول ﺑﻴﺮوﻧـﻲ ﻗـﺮار دﻫﻴـﺪ ﻳﻌﻨـﻲ ﺑـﻴﻦ >‪<td‬و >‪</td‬در‬ ‫ﺟﺪول ﺑﻴﺮوﻧﻲ‪.‬‬‫‪Page89 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺣﺎﻻ ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ ﺑﻴﺶ از ﻳﻚ ﺟﺪول درون ﻳﻚ ﺟﺪول اﻳﺠﺎد ﻛﻨﻴﻢ‪ .‬ﺑﺮاي اﻳﻨﻜـﻪ اﻳـﻦ ﺟـﺪوﻟﻬﺎي دروﻧـﻲ‪ ،‬در ﻳـﻚ‬ ‫ﺳﻄﺮ ﻗﺮار ﮔﻴﺮد ﻛﺎﻓﻲ اﺳﺖ ﺑﻪ ﺗﻌﺪاد ﺟﺪوﻟﻬﺎي دروﻧﻲ‪ ،‬در ﺟﺪول ﺑﻴﺮوﻧﻲ ﺳﻠﻮل اﻳﺠﺎد ﻛﻨﻴﻢ و ﺟﺪوﻟﻬﺎ را در ﺳـﻠﻮﻟﻬﺎي ﺟـﺪول‬ ‫ﺑﻴﺮوﻧﻲ ﻗﺮار دﻫﻴﻢ‪.‬‬ ‫ﺑﺮاي ﻣﺜﺎل ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ دو ﺟﺪول را در ﻳﻚ ﺳﻄﺮ داﺷﺘﻪ ﺑﺎﺷﻴﻢ‪ .‬ﻣﻲ ﺗﻮاﻧﻴﻢ ﻣﺎﻧﻨﺪ زﻳﺮ ﻋﻤﻞ ﻛﻨﻴﻢ‪:‬‬ ‫>‪ --‬ﺗﮓ آﻏﺎزي ﺟﺪول ﺑﻴﺮوﻧﻲ ‪<table width=\"600\" border=\"4\"><!--‬‬ ‫>‪ --‬ﺳﻠﻮل اول در ﺟﺪول ﺑﻴﺮوﻧﻲ ‪<td align=\"center\"><!--‬‬ ‫>‪ --‬آﻏﺎز ﺟﺪول دروﻧﻲ ‪<table width=\"250\" border=\"2\"><!--‬‬ ‫>‪ --‬اوﻟﻴﻦ ﺳﻠﻮل ﺟﺪول دروﻧﻲ ‪<td align=\"center\"><!--‬‬ ‫ﻣﺤﺘﻮﻳﺎت اوﻟﻴﻦ ﺟﺪول دروﻧﻲ‬ ‫>‪ --‬ﭘﺎﻳﺎن ﺳﻠﻮل اوﻟﻴﻦ ﺟﺪول دروﻧﻲ ‪</td><!--‬‬ ‫>‪ --‬ﭘﺎﻳﺎن اوﻟﻴﻦ ﺟﺪول دروﻧﻲ ‪</table><!--‬‬ ‫>‪ --‬ﭘﺎﻳﺎن اوﻟﻴﻦ ﺳﻠﻮل ﺟﺪول ﺑﻴﺮوﻧﻲ ‪</td><!--‬‬ ‫>‪ --‬آﻏﺎز دوﻣﻴﻦ ﺳﻠﻮل ﺟﺪول ﺑﻴﺮوﻧﻲ ‪<td align=\"center\"><!--‬‬ ‫>‪ --‬آﻏﺎز دوﻣﻴﻦ ﺟﺪول دروﻧﻲ ‪<table width=\"250\" border=\"2\"><!--‬‬ ‫>‪ --‬آﻏﺎز ﺳﻠﻮل دوﻣﻴﻦ ﺟﺪول دروﻧﻲ ‪<td align=\"center\"><!--‬‬ ‫ﻣﺤﺘﻮﻳﺎت دوﻣﻴﻦ ﺟﺪول دروﻧﻲ‬ ‫>‪ --‬ﭘﺎﻳﺎن ﺳﻠﻮل دوﻣﻴﻦ ﺟﺪول دروﻧﻲ ‪</td><!--‬‬ ‫>‪ --‬ﭘﺎﻳﺎن دوﻣﻴﻦ ﺟﺪول دروﻧﻲ ‪</table><!--‬‬ ‫>‪ --‬ﭘﺎﻳﺎن دوﻣﻴﻦ ﺳﻠﻮل ﺟﺪول ﺑﻴﺮوﻧﻲ ‪</td><!--‬‬ ‫>‪ --‬ﭘﺎﻳﺎن ﺟﺪول ﺑﻴﺮوﻧﻲ ‪</table><!--‬‬ ‫اﻳﻦ ﻫﻢ ﻧﺘﻴﺠﻪ ﺑﻪ دﺳﺖ آﻣﺪه‪:‬‬ ‫ﻣﺤﺘﻮﻳﺎت اوﻟﻴﻦ ﺟﺪول دروﻧﻲ‬ ‫ﻣﺤﺘﻮﻳﺎت دوﻣﻴﻦ ﺟﺪول دروﻧﻲ‬‫‪Page90 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻗﺎﺑﻞ ذﻛﺮ اﺳﺖ ﻛﻪ در اﻳﻦ ﻣﺜﺎﻟﻬﺎ ﺑﺮاي ﺑﻬﺘﺮ ﻣﺸﺨﺺ ﺷﺪن ﻣﺤﻞ ﺟـﺪوﻟﻬﺎ از ﺷﻨﺎﺳـﻪ ‪ border‬اﺳـﺘﻔﺎده ﺷـﺪه اﺳـﺖ‪.‬‬ ‫ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﻪ دﻟﺨﻮاه از آن اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬ ‫ﺑﻬﺘﺮ اﺳﺖ در ﻫﻨﮕﺎم ﻧﻮﺷﺘﻦ ﻛﺪﻫﺎ ﻋﺮض ﺟﺪوﻟﻬﺎ را ﻣﺸﺨﺺ ﻛﻨﻴﺪ ﺗﺎ در ﭘﺎﻳﺎن ﺑﻪ ﻫﻢ رﻳﺨﺘﻪ ﻧﺒﺎﺷﻨﺪ‪.‬‬ ‫ﺑﺎ اﻳﻦ روش ﻣﻲ ﺗﻮاﻧﻴﺪ ﻫﺮ ﺗﻌﺪاد ﺟﺪول ﻛﻪ ﻧﻴﺎز داﺷﺘﻪ ﺑﺎﺷﻴﺪ در ﻛﻨﺎر ﻫﻢ ﻗﺮار دﻫﻴﺪ‪.‬‬‫‪Page91 ‬‬ ‫ اﺻﻮل ﻃﺮاﺣﻲ ﺻﻔﺤﺎت ﺣﺎوي ﻓﺮﻳﻢ‬ ‫ﺑﺮاي اﻳﻨﻜﻪ ﺑﺘﻮاﻧﻴﺪ از ﻓﺮﻳﻤﻬﺎ در ﺻﻔﺤﻪ ﺧﻮد اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ ،‬اﺑﺘﺪا ﺑﺎﻳﺪ ﺑﺪاﻧﻴﺪ اﻳﻦ ﻓﺮﻳﻤﻬﺎ ﭼﮕﻮﻧﻪ ﻛﺎر ﻣﻲ ﻛﻨﻨﺪ‪ .‬ﻳﻚ ﺻﻔﺤﻪ‬ ‫ﻛﻪ در آن از ﻳﻚ ﻓﺮﻳﻢ اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ در ﺣﻘﻴﻘﺖ ﺑﻪ دو ﻳﺎ ﭼﻨﺪ ﻗﺴﻤﺖ ﺗﻘﺴﻴﻢ ﺷﺪه اﺳﺖ ﻛـﻪ ﻫـﺮ ﻗﺴـﻤﺖ ﻣـﺘﻦ‬ ‫‪html‬ﻣﺮﺑﻮط ﺑﻪ ﺧﻮد را دارد‪.‬‬ ‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ در اﻳﻦ ﻣﺜﺎل ﻣﻲ ﺗﻮاﻧﻴﺪ ﻣﻼﺣﻈﻪ ﻛﻨﻴﺪ در واﻗﻊ ﺑﺎ اﺳﺘﻔﺎده از ﻓﺮﻳﻤﻬﺎ‪ ،‬دو ﺻﻔﺤﻪ وب را در ﻗﺎﻟﺐ ﻳـﻚ ﺻـﻔﺤﻪ‬ ‫ﻧﻤﺎﻳﺶ ﻣﻲ دﻫﻴﻢ‪ .‬ﻫﺮ ﻛﺪام از ﺻﻔﺤﺎت در اﻳﻦ ﻣﺠﻤﻮﻋﻪ ) ﻳﻌﻨﻲ ﺻﻔﺤﺎﺗﻲ ﻛﻪ در ﻓﺮﻳﻤﻬﺎ ﻗﺮار ﮔﺮﻓﺘﻪ اﻧﺪ و ﺻـﻔﺤﻪ اي ﻛـﻪ‬ ‫ﻓﺮﻳﻤﻬﺎ در آن ﻗﺮار دارﻧﺪ‪ ،‬ﻛﺪ ‪ html‬ﻣﺮﺑﻮط ﺑﻪ ﺧﻮد را دارﻧﺪ‪.‬‬ ‫ﺑﺮاي اﻳﺠﺎد ﻓﺮﻳﻢ در ﻳﻚ ﺻﻔﺤﻪ ﺑﻪ ﺟﺎي ﺗﮓ ‪ body‬از ﺗﮓ ‪ frameset‬اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﻴﻢ‪ .‬ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﺮاي ﺳـﺎﺧﺖ‬ ‫ﺻﻔﺤﻪ اي ﻛﻪ ﻓﺮﻳﻤﻬﺎ در آن ﻗﺮار ﻣﻲ ﮔﻴﺮﻧﺪ از ﻛﺪ زﻳﺮ اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪:‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪</title‬ﻧﻤﺎﻳﺶ ﻳﻚ ﻓﺮﻳﻢ ﺳﺎده>‪<title‬‬ ‫>‪</head‬‬ ‫>\"‪<frameset cols=\"50%,50%‬‬ ‫>\"‪<frame src=\"page1.htm‬‬ ‫>\"‪<frame src=\"page2.htm‬‬ ‫>‪</frameset‬‬ ‫>‪</html‬‬ ‫در اﻳﻨﺠﺎ ﺑﻪ وﻇﻴﻔﻪ ﺗﮕﻬﺎي ﻣﻮرد اﺳﺘﻔﺎده در اﻳﻨﺠﺎ ﻣﻲ ﭘﺮدازﻳﻢ‪:‬‬ ‫>‪<FRAMESET‬‬ ‫اﻳﻦ ﺗﮓ ﺑﻪ ﻣﺮورﮔﺮ ﻣﻲ ﮔﻮﻳﺪ ﻛﻪ ﺑﻪ ﺟﺎي ﻳﻚ ﺻﻔﺤﻪ ﻣﻌﻤﻮﻟﻲ ﻣﻨﺘﻈﺮ ﻳﻚ دﺳﺘﻪ ﻓﺮم ﺑﺎﺷﺪ‪.‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫\"‪cols=\"50%,50%‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﺑﻪ ﻣﺮورﮔﺮ ﻣﻲ ﮔﻮﻳﺪ ﻛﻪ ﺻﻔﺤﻪ را ﺑﻪ دو ﻗﺴﻤﺖ ﻋﻤﻮدي ﺗﻘﺴﻴﻢ ﻛﻨﺪ و ﭘﻬﻨﺎي ﻫﺮ ﻛﺪام از اﻳﻦ ﻗﺴﻤﺘﻬﺎ ﻧﻴﻤـﻲ‬ ‫از ﭘﻬﻨﺎي ﭘﻨﺠﺮه ﺑﺎﺷﺪ‪ .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ اﻳﻦ ﻧﺴﺒﺖ را ﺗﻐﻴﻴﺮ دﻫﻴﺪ ﻳﺎ ﺑﻪ ﺟﺎي درﺻﺪ از ﻣﻘﻴﺎس ﭘﻴﻜﺴﻞ اﺳﺘﻔﺎده ﻛﻨﻴـﺪ‪ .‬اﻣـﺎ‬ ‫اﮔﺮ ﻣﻲ ﺧﻮاﻫﻴﺪ از ﻣﻘﻴﺎس درﺻﺪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ ﻓﺮاﻣﻮش ﻧﻜﻨﻴﺪ ﻛﻪ از ﻧﺸﺎﻧﻪ درﺻﺪ ﻳﻌﻨـﻲ ‪ %‬در ﺑﻌـﺪ از ﻫـﺮ ﻋـﺪد اﺳـﺘﻔﺎده‬ ‫ﻛﻨﻴﺪ‪ .‬اﮔﺮ ﻓﻘﻂ ﺑﺮاي ﻳﻜﻲ از اﻋﺪاد ﻋﻼﻣﺖ درﺻﺪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ ﻣﺮورﮔﺮ ﻋﺪد دﻳﮕﺮ را در ﻣﻘﻴﺎس ﭘﻴﻜﺴﻞ ﻓﺮض ﻣﻲ ﻛﻨﺪ‪.‬‬ ‫>\"‪<FRAME SRC=\"frame_1.htm‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن آدرس ﺻﻔﺤﻪء اوﻟﻴﻦ ﻓﺮﻳﻢ از ﺳﻤﺖ ﭼﭗ را ﺑﺮاي ﻣﺮورﮔﺮ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‪.‬‬‫‪Page92 ‬‬ ‫>\"‪<FRAME SRC=\"test2.htm‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن آدرس ﺻﻔﺤﻪ ﺑﻌﺪي را ﺑﺮاي ﻓﺮﻳﻢ ﺑﻌﺪي از ﺳﻤﺖ ﭼﭗ ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ‪.‬‬ ‫ﺣﺎﻻ ﻓﺮض ﻛﻨﻴﺪ ﻣﺎ ﺑﻪ ﺳﻪ ﻓﺮﻳﻢ ﻧﻴﺎز داﺷﺘﻪ ﺑﺎﺷﻴﻢ‪ .‬ﻣﻲ ﺗﻮاﻧﻴﻢ ﺑﻪ ﺻﻮرت زﻳﺮ ﻋﻤﻞ ﻛﻨﻴﻢ‪:‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪</title‬ﻧﻤﺎﻳﺶ ﺳﻪ ﻓﺮﻳﻢ در ﻳﻚ ﺻﻔﺤﻪ >‪<title‬‬ ‫>‪</head‬‬ ‫>\"‪<frameset cols=\"33%,33%,33%‬‬ ‫>\"‪<frame src=\"page1.htm‬‬ ‫>\"‪<frame src=\"page2.htm‬‬ ‫>\"‪<frame src=\"page3.htm‬‬ ‫>‪</frameset‬‬ ‫>‪</html‬‬ ‫ﺑﺎ اﻳﻦ ﻛﺪ ﻣﻲ ﺗﻮاﻧﻴﻢ ﺳﻪ ﻓﺮﻳﻢ در ﻳﻚ ﺻﻔﺤﻪ داﺷﺘﻪ ﺑﺎﺷﻴﻢ ﻛﻪ ﻫﺮ ﻛﺪام از آﻧﻬﺎ ‪ 33‬درﺻـﺪ ﭘﻬﻨـﺎي ﺻـﻔﺤﻪ را در ﺑـﺮ ﻣـﻲ‬ ‫ﮔﻴﺮﻧﺪ‪ .‬ﻳﻚ درﺻﺪ ﺑﺎﻗﻴﻤﺎﻧﺪه را ﻫﻢ ﻣﺮورﮔﺮ ﺗﺨﺼﻴﺺ ﻣﻲ دﻫﺪ‪.‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ ﻓﺮﻳﻤﻬﺎ را ﺑﻪ ﺻﻮرت ﻋﻤﻮدي و زﻳﺮ ﻳﻜﺪﻳﮕﺮ در ﺻﻔﺤﻪ ﻗـﺮار دﻫـﻴﻢ‪ .‬در اﻳـﻦ ﺻـﻮرت ﺑﺎﻳـﺪ ﺑـﻪ ﺟـﺎي‬ ‫ﺷﻨﺎﺳﻪ ‪ cols‬در ﺗﮓ ‪ frameset‬از ﺷﻨﺎﺳﻪ ‪ rows‬اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪.‬‬ ‫ﺑﻪ ﻛﺪ زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪</title‬ﻧﻤﺎﻳﺶ ﻓﺮﻳﻤﻬﺎ ﺑﻪ ﺻﻮرت اﻓﻘﻲ و ﻋﻤﻮدي>‪<title‬‬ ‫>‪</head‬‬ ‫>\"‪<frameset cols=\"50%,50%‬‬ ‫>\"‪<frame src=\"page1.htm‬‬ ‫>\"‪<frameset rows=\"50%,50%‬‬ ‫>\"‪<frame src=\"page2.htm‬‬ ‫>\"‪<frame src=\"page3.htm‬‬ ‫>‪</frameset‬‬ ‫>‪</frameset‬‬ ‫>‪</html‬‬ ‫‪ .1‬ﻣﺎ ﺑﺎ اوﻳﻦ ﺗﮓ ‪ frameset‬ﺑﻪ ﻣﺮورﮔﺮ ﻣﻲ ﮔﻮﻳﻴﻢ ﻛﻪ ﺻﻔﺤﻪ را ﺑﻪ دو ﻗﺴﻤﺖ ) دو ﺳﺘﻮن ( ﺗﻘﺴﻴﻢ ﻛﻨﺪ‪.‬‬ ‫‪<FRAME SRC=\"page1.htm\"> .2‬ﺑﻪ ﻣﺮورﮔﺮ ﻣﻲ ﮔﻮﻳـﺪ ﻛـﻪ ﺳـﺘﻮن اول از ﺳـﻤﺖ ﭼـﭗ ﺑﺎﻳـﺪ ﺑـﺎ‬ ‫ﺻﻔﺤﻪ ‪ page1.htm‬ﭘﺮ ﺷﻮد‪.‬‬ ‫‪ .3‬ﺗﮓ ‪ frameset‬دوم درون ﺗﮓ ‪ frameset‬اول ﻗﺮار دارد‪ .‬اﻳﻦ ﺗﮓ ﺑﻪ ﻣﺮورﮔﺮ ﻣﻲ ﮔﻮﻳﺪ ﻛﻪ ﺳـﺘﻮن دوم‬ ‫را ﺑﻪ دو ردﻳﻒ اﻓﻘﻲ ﺗﻘﺴﻴﻢ ﻛﻨﺪ‪ ) .‬ﻓﺮﻳﻢ دوم از ﺳﻤﺖ ﭼﭗ ﺧﻮد ﺑﻪ دو ﻓﺮﻳﻢ ﺗﺒﺪﻳﻞ ﻣﻲ ﺷﻮد(‬ ‫‪ .4‬ﺗﮓ >\"‪ <FRAME SRC=\"page2.htm‬ﺑﻪ ﻣﺮورﮔﺮ ﻣـﻲ ﮔﻮﻳـﺪ ﻛـﻪ ﺑـﺎﻻﺗﺮﻳﻦ ﻓـﺮﻳﻢ ﻗـﺮار ﮔﺮﻓﺘـﻪ در‬ ‫ﺳﺘﻮن دوم ﺻﻔﺤﻪ را ﺑﺎ ﺻﻔﺤﻪ ‪ page2.htm‬ﭘﺮ ﻛﻨﺪ‪.‬‬ ‫‪ .5‬ﺗﮓ >\"‪ <FRAME SRC=\"page3.htm‬ﺑﻪ ﻣﺮورﮔﺮ ﻣﻲ ﮔﻮﻳﺪ ﻛﻪ دوﻣـﻴﻦ ﻓـﺮﻳﻢ از ﺑـﺎﻻ را در ﺳـﺘﻮن‬ ‫دوم ﺻﻔﺤﻪ ﺑﺎ ﺻﻔﺤﻪ ‪ page3.htm‬ﭘﺮ ﻛﻨﺪ‪.‬‬ ‫در ﭘﺎﻳﺎن ﻓﺮاﻣﻮش ﻧﻜﻨﻴﺪ ﻛﻪ ﻫﻤﻪ ﺗﮕﻬﺎي ‪ frameset‬ﺑﺎز ﺷﺪه را در ﭘﺎﻳﺎن ﺑﺒﻨﺪﻳﺪ‪.‬‬‫‪Page93 ‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ ﻓﺮﻳﻤﻬﺎ‪ ،‬ﺑﺎز ﻛﺮدن ﻟﻴﻨﻜﻬﺎ در ﻳﻚ ﻓﺮﻳﻢ ﻣﺸﺨﺺ‬ ‫ﺣﺎﻻ ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻳﻚ ﺻﻔﺤﻪ ﺑﺎ اﺳﺘﻔﺎده از ﻓﺮﻳﻤﻬﺎ ﺑﺴﺎزﻳﺪ‪ .‬اﻣﺎ وﻗﺘﻲ ﻛﻪ ﺷﻤﺎ ﻳﻚ ﻟﻴﻨﻚ را در ﻳﻚ ﻓﺮﻳﻢ ﻗﺮار ﻣﻲ دﻫﻴﺪ‬ ‫ﭘﺲ از ﻛﻠﻴﻚ ﻛﺮدن ﻟﻴﻨﻚ در ﻫﻤﺎن ﻓﺮﻳﻢ ﺑﺎز ﻣﻲ ﺷﻮد‪ .‬اﻳﻦ ﻣﺴﺄﻟﻪ ﺑﻪ اﻳﻦ دﻟﻴﻞ اﺳﺖ ﻛﻪ ﻫﺮ ﻓﺮﻳﻢ ﻳﻚ ﺻﻔﺤﻪ ‪HTML‬‬ ‫اﺳﺖ و ﻣﺎﻧﻨﺪ ﻳﻚ ﺻﻔﺤﻪ ﻋﻤﻞ ﻣﻲ ﻛﻨﺪ‪ .‬ﭘﺲ اﮔﺮ ﺑﺮاي ﻟﻴﻨﻚ ﺷﻨﺎﺳﻪ اي را ﺗﻌﺮﻳﻒ ﻧﻜﻨﻴﻢ در ﻫﻤﺎن ﺻﻔﺤﻪ )در ﺣﻘﻴﻘـﺖ در‬ ‫ﻫﻤﺎن ﻓﺮﻳﻢ( ﺑﺎز ﻣﻲ ﺷﻮد‪ .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺻﻔﺤﻪ را ﻃﻮري ﻃﺮاﺣﻲ ﻛﻨﻴﺪ ﻛﻪ ﻟﻴﻨﻜﻬﺎي ﻳﻚ ﻓﺮﻳﻢ در ﻓﺮﻳﻢ دﻳﮕﺮي ﺑـﺎز ﺷـﻮﻧﺪ‬ ‫ﻳﺎ در ﻳﻚ ﺻﻔﺤﻪ ﺟﺪﻳﺪ ﺑﺎز ﺷﻮﻧﺪ ﻛﻪ ﻓﺮﻳﻤﻲ ﻧﺪارد‪.‬‬‫‪Page94 ‬‬ ‫ﺑﺮاي اﻳﻦ ﻛﺎر ﺑﺎﻳﺪ اﺑﺘﺪا ﻓﺮﻳﻤﻬﺎ را ﻧﺎﻣﮕﺬاري ﻛﻨﻴﻢ و ﺳﭙﺲ از ﺷﻨﺎﺳﻪ ‪ target‬در ﺗﮓ ﻟﻴﻨﻚ اﺳـﺘﻔﺎده ﻛﻨـﻴﻢ‪ .‬ﺑـﻪ ﻳـﻚ‬ ‫ﻣﺜﺎل در اﻳﻦ راﺑﻄﻪ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬ ‫>‪<html‬‬ ‫>‪<head‬‬ ‫>‪</title‬ﺗﻌﻴﻴﻦ ﻓﺮﻳﻢ ﻣﻘﺼﺪ ﺑﺮاي ﻟﻴﻨﻜﻬﺎ>‪<title‬‬ ‫>‪</head‬‬ ‫>\"‪<frameset cols=\"25%,75%‬‬ ‫>\"‪<frame src=\"page4.htm\" name=\"left‬‬ ‫>\"‪<frame src=\"page2.htm\" name=\"right‬‬ ‫>‪</frameset‬‬ ‫>‪</html‬‬ ‫ﻣﺎ در اﻳﻦ ﻣﺜﺎل از دو ﻓﺮﻳﻢ ﺑﺎ ﻧﺎﻣﻬﺎي ‪ left‬و ‪ right‬اﺳﺘﻔﺎده ﻛﺮدﻳﻢ‪ .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻫﺮ ﻧﺎﻣﻲ را ﻛـﻪ ﻣﻨﺎﺳـﺐ ﻣـﻲ‬ ‫داﻧﻴﺪ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪).‬اﻳﻦ ﻧﺎﻣﻲ اﺳﺖ ﻛﻪ در ﺗﮓ ﻟﻴﻨﻚ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﺧﻮاﻫﺪ ﮔﺮﻓﺖ و ﻟﺰوﻣ ًﺎ ﻧﺒﺎﻳﺪ ﻫﻤﺎن ﻧـﺎم ﻓﺎﻳـﻞ‬ ‫‪HTML‬ﻗﺮار ﮔﺮﻓﺘﻪ ﺷﺪه در ﻓﺮﻳﻢ ﺑﺎﺷﺪ‪(.‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫ﺣﺎﻻ ﻛﻪ ﻓﺮﻳﻤﻬﺎ را ﻧﺎﻣﮕﺬاري ﻛﺮدﻳﻢ ﻣﻲ ﺗﻮاﻧﻴﻢ از اﻳﻦ ﻧﺎﻣﻬﺎ ﺑﻪ ﻋﻨﻮان ﻣﻘﺎدﻳﺮي ﺑﺮاي ﺷﻨﺎﺳﻪ ‪ target‬در ﺗـﮓ ﻟﻴﻨﻜﻬـﺎ‬ ‫در ﻫﺮ ﻛﺪام از ﻓﺮﻳﻤﻬﺎ اﺳﺘﻔﺎده ﻛﻨﻴﻢ‪ .‬ﻓﺮض ﻛﻨﻴﺪ ﻣﺎ در ﻓﺮﻳﻢ ﺳﻤﺖ ﭼﭗ ﻟﻴﺴﺘﻲ از ﺻﻔﺤﺎت را دارﻳﻢ ﻛﻪ ﻣﻲ ﺧـﻮاﻫﻴﻢ ﺑـﺎ‬ ‫ﻛﻠﻴﻚ ﻛﺮدن ﺑﺮ روي آﻧﻬﺎ در ﻓﺮﻳﻢ ﺳﻤﺖ راﺳﺖ ﺑﺎز ﺷﻮﻧﺪ‪ .‬در اﻳﻦ ﺣﺎﻟﺖ ﺑﺎﻳﺪ اﻳﻦ ﺷﻨﺎﺳـﻪ را ﺑـﻪ ﺗـﮓ ﻟﻴﻨﻜﻬـﺎي ﻣﻮﺟـﻮد در‬ ‫ﻓﺮﻳﻢ ﺳﻤﺖ ﭼﭗ اﺿﺎﻓﻪ ﻛﻨﻴﺪ ‪:‬‬ ‫\"‪ target=\"right‬ﺑﺮاي ﻣﺜﺎل ﺑﻪ ﻟﻴﻨﻚ زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ‪:‬‬ ‫>‪ HTML </a‬آﻣﻮزش>\"‪<a href=\"../../html/index.htm\" target=\"right‬‬ ‫ﺣﺎﻻ ﭘﺲ از ﻛﻠﻴﻚ ﻛﺮدن ﻟﻴﻨﻚ‪ ،‬ﻓﺮﻳﻢ ﺳﻤﺖ ﭼﭗ دﺳﺖ ﻧﺨﻮرده ﺑﺎﻗﻲ ﻣﻲ ﻣﺎﻧﺪ و ﻟﻴﻨﻚ در ﻓـﺮﻳﻢ ﺳـﻤﺖ راﺳـﺖ ﺑـﺎز ﻣـﻲ‬ ‫ﺷﻮد‪ .‬ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ اﻳﻦ ﻛﺎر را در ﺻﻔﺤﺎﺗﻲ ﻛﻪ ﺑﻴﺶ از ﻳﻚ ﻓﺮﻳﻢ ﻫﻢ دارﻧـﺪ اﻧﺠـﺎم دﻫﻴـﺪ‪ .‬ﻓﻘـﻂ ﻓﺮاﻣـﻮش ﻧﻜﻨﻴـﺪ ﻛـﻪ‬ ‫ﻓﺮﻳﻤﻬﺎ را ﻧﺎﻣﮕﺬاري ﻛﻨﻴﺪ‪.‬‬ ‫ﻣﻴﺘﻮان ﻟﻴﻨﻜﻬﺎ را ﺑﻪ ﺟﺎي اﻳﻨﻜﻪ در ﻳﻚ ﻓﺮﻳﻢ ﺑﺎز ﻛﻨﻴﻢ‪ ،‬ﺗﻤﺎم ﭘﻨﺠﺮه و ﺑﺪون ﻓﺮﻳﻢ ﺑﺎز ﻛﻨﻴﻢ‪ .‬ﺑﺮاي اﻳـﻦ ﻛـﺎر ﺑﺎﻳـﺪ ﺷﻨﺎﺳـﻪ‬ ‫\"‪target=\"_top‬را ﺑﻪ ﺗﮓ ﻟﻴﻨﻚ اﺿﺎﻓﻪ ﻛﻨﻴﻢ‪ .‬ﻣﺜ ًﻼ ﻣﻲ ﺗﻮاﻧﻴﻢ ﺗﮓ ﻟﻴﻨﻜﻲ ﻣﺎﻧﻨﺪ زﻳﺮ ﺑﻨﻮﻳﺴﻴﻢ‪:‬‬ ‫اﻳﻦ >\"‪<a href=\"http://www.neopersia.org/html/index.html\" target=\"_top‬‬ ‫>‪</a‬ﻟﻴﻨﻚ در ﺗﻤﺎم ﺻﻔﺤﻪ ﺑﺎز ﻣﻲ ﺷﻮد‬‫‪Page95 ‬‬ ‫در اﻳﻨﺠﺎ ﺗﻌﺪادي از ﺷﻨﺎﺳﻪ ﻫﺎﻳﻲ را ﻛﻪ ﻣﻲ ﺗﻮان ﺑﻪ ﺗﮓ ‪ frame‬اﺿﺎﻓﻪ ﻛﺮد آورده اﻳﻢ‪ .‬ﺑﺎ اﻳﻦ ﺷﻨﺎﺳﻪ ﻫﺎ ﻣﻲ ﺗـﻮاﻧﻴﻢ‬ ‫رﻓﺘﺎر اﻳﻦ ﻓﺮﻳﻤﻬﺎ را ﺑﻬﺘﺮ ﻛﻨﺘﺮل ﻛﻨﻴﻢ‪:‬‬ ‫\"‪scrolling=\"no‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﻣﻲ دﻫﺪ ﻛﻪ اﺳﻜﺮول ﺑﺎر )‪ (scroll bar‬را از ﺳﻤﺖ راﺳﺖ ﺻﻔﺤﻪ ﺣﺬف ﻛﻨﻴـﺪ‪ ،‬ﺗـﺎ ﻛـﺎرﺑﺮان‬ ‫ﻧﺘﻮاﻧﻨﺪ ﺑﺎ اﺳﺘﻔﺎده از آن ﺑﻪ ﺑﺎﻻ و ﭘﺎﻳﻴﻦ ﺻﻔﺤﻪ ﺑﺮوﻧﺪ‪ .‬اﮔﺮ از اﻳﻦ ﺷﻨﺎﺳﻪ اﺳﺘﻔﺎده ﻧﻜﻨﻴﺪ‪ ،‬ﻣﺮورﮔﺮ ﺗﺼﻤﻴﻢ ﻣﻲ ﮔﻴﺮد ﻛﻪ آﻳﺎ‬ ‫اﺳﻜﺮول ﺑﺎر را در ﺻﻔﺤﻪ اي ﻛﻪ درون ﻓﺮﻳﻢ ﻗﺮار دارد ﻧﺸﺎن دﻫﺪ ﻳﺎ ﻧﻪ ‪ .‬اﮔﺮ ﻣﻘﺪار اﻳﻦ ﺷﻨﺎﺳـﻪ ‪ yes‬ﺑﺎﺷـﺪ‪ ،‬اﺳـﻜﺮول ﺑـﺎر‬ ‫ﻫﻤﻴﺸﻪ ﻧﺸﺎن داده ﺧﻮاﻫﺪ ﺷﺪ‪ .‬اﮔﺮ ‪ no‬ﺑﺎﺷﺪ اﺳﻜﺮول ﺑﺎر ﻫﺮﮔﺰ ﻧﻤﺎﻳﺶ داده ﻧﺨﻮاﻫـﺪ ﺷـﺪ‪ .‬در ﺻـﻮرﺗﻲ ﻛـﻪ ﻧﻴـﺎز داﺷـﺘﻪ‬ ‫ﺑﺎﺷﻴﺪ در اﻳﻦ ﺻﻔﺤﻪ ﺑﻪ ﺑﺎﻻ ﻳﺎ ﭘﺎﻳﻴﻦ و ﭼﭗ و راﺳﺖ ﺑﺮوﻳﺪ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺎ ﻛﻠﻴﺪﻫﺎي ﺟﻬﺘﻲ ﺻـﻔﺤﻪ ﻛﻠﻴـﺪ اﻳـﻦ ﻛـﺎر را اﻧﺠـﺎم‬ ‫دﻫﻴﺪ‪.‬‬ ‫‪www.IrPDF.com‬‬

‫‪www.IrPDF.com‬‬ ‫ﻣﻬﻨﺪس ﺣﻤﻴﺪ رﻳﺎﺿﻲ‬ ‫ﺟﺰوه ﻛﺎرﮔﺎه ﻃﺮاﺣﻲ ﺻﻔﺤﺎت وب‬ ‫\"‪border=\"3‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﻣﻲ دﻫﺪ ﺗﺎ ﻣﻘﺪار ﻛﻠﻔﺘﻲ ﺣﺎﺷﻴﻪ ﻫﺎي ﻓﺮﻳﻢ را ﺗﻌﻴﻴﻦ ﻛﻨﻴﺪ‪.‬‬ ‫\"‪resize=\"no‬‬ ‫اﻳﻦ ﻓﺮﻣﺎن ﺑﻪ ﺷﻤﺎ اﻣﻜﺎن ﻣﻲ دﻫﺪ ﺗﻌﻴﻴﻦ ﻛﻨﻴﺪ ﻛﻪ آﻳﺎ ﻛﺎرﺑﺮ ﻣﻲ ﺗﻮان اﻧﺪازه ﻓﺮﻳﻢ را ﺗﻐﻴﻴﺮ دﻫﺪ ﻳﺎ ﻧﻪ‪ .‬اﮔـﺮ ﻣﻘـﺪار اﻳـﻦ‬ ‫ﺷﻨﺎﺳﻪ ‪ no‬ﺑﺎﺷﺪ ﻛﺎرﺑﺮ ﻧﻤﻲ ﺗﻮاﻧﺪ ﺑﺎ ﻗﺮار دادن ﻧﺸﺎﻧﮕﺮ ﻣﺎوس ﺧﻮد در ﻟﺒﻪء ﻓﺮﻳﻤﻬﺎ‪ ،‬اﻧﺪازه آﻧﻬﺎ را ﺗﻐﻴﻴﺮ دﻫﺪ‪ .‬اﮔﺮ ﻣﻘـﺪار‬ ‫آن ‪ yes‬ﺑﺎﺷﺪ ﻛﺎرﺑﺮ ﻣﻲ ﺗﻮاﻧﺪ اﻧﺪازه ﻓﺮﻳﻤﻬﺎ را ﺗﻐﻴﻴﺮ دﻫﺪ‪ .‬ﮔﺰﻳﻨﻪ ﭘﻴﺶ ﻓﺮض اﻳﻦ ﺷﻨﺎﺳﻪ ‪ yes‬اﺳﺖ‪.‬‬ ‫\"‪noresize=\"no‬‬ ‫ﺷﻤﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ از اﻳﻦ ﺷﻨﺎﺳﻪ ﺑﻪ ﺟﺎي ‪ \"resize=\"no‬اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪ ،‬ﭼﻮن ﻫﻤﻪ ﻣﺮورﮔﺮﻫـﺎ ﺷﻨﺎﺳـﻪ ﻗﺒﻠـﻲ را ﻧﻤـﻲ‬ ‫ﺷﻨﺎﺳﻨﺪ‪ .‬در ﻫﺮ ﺣﺎل ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮاي اﻃﻤﻴﻨﺎن از ﻫﺮ دو ﺷﻨﺎﺳﻪ ﺑﺎ ﻫﻢ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪.‬‬‫‪Page96 ‬‬ ‫\"‪marginwidth=\"2‬و ‪marginheight=\"2\" :‬‬ ‫اﻳﻦ ﺷﻨﺎﺳﻪ ﻫﺎ ﺑﻪ ﺷﻤﺎ اﻣﻜﺎن ﻣﻲ دﻫﺪ ﻣﻴﺰان ﺣﺎﺷﻴﻪ ﻣﺤﺘﻮﻳﺎت ﻓﺮﻳﻢ را از ﻟﺒﻪ ﻓﺮﻳﻢ ﺗﻌﻴﻴﻦ ﻛﻨﻴﺪ‪.‬‬ ‫ﺑﺮﺧﻲ از ﻣﺮورﮔﺮﻫﺎي ﻗﺪﻳﻤﻲ ﻣﻤﻜﻦ اﺳﺖ ﻧﺘﻮاﻧﻨﺪ ﻓﺮﻳﻤﻬﺎ را ﻧﺸﺎن دﻫﻨﺪ‪ .‬ﺷﺎﻳﺪ ﺷﻤﺎ ﺑﺨﻮاﻫﻴﺪ ﺑﺮاي اﻳﻦ دﺳـﺘﻪ از ﻛـﺎرﺑﺮان‬ ‫ﺑﺎ ﻣﺮورﮔﺮﻫﺎي ﻗﺪﻳﻤﻲ ﭘﻴﻐﺎﻣﻲ را ﺑﻨﻮﻳﺴﻴﺪ ﻳﺎ ﻟﻴﻨﻚ ﺻﻔﺤﻪ اي را ﻛﻪ در آن از ﻓﺮﻳﻢ اﺳـﺘﻔﺎده ﻧﻜـﺮده اﻳـﺪ ﺑـﻪ آﻧﻬـﺎ ﻧﺸـﺎن‬ ‫دﻫﻴﺪ‪ .‬ﺑﺮاي اﻳﻦ ﻛﺎر ﻣﻲ ﺗﻮاﻧﻴﺪ از ﻓﺮﻣﺎن زﻳﺮ اﺳﺘﻔﺎده ﻛﻨﻴﺪ‪:‬‬ ‫>‪<noframes‬‬ ‫‪.‬ﻣﺘﻦ ﭘﻴﻐﺎﻣﻲ ﻛﻪ در ﺻﻮرت ﻧﻤﺎﻳﺶ ﻧﺪادن ﻓﺮﻳﻤﻬﺎ ﻣﺸﺎده ﻣﻲ ﺷﻮد‬ ‫>‪</noframes‬‬ ‫ﺣﺎﻻ ﻛﺎرﺑﺮاﻧﻲ ﻛﻪ ﻧﻤﻲ ﺗﻮاﻧﻨﺪ ﻓﺮﻳﻤﻬﺎ را ﻣﺸﺎﻫﺪه ﻛﻨﻨﺪ ﭘﻴﻐﺎم ﺷﻤﺎ را ﺑﻪ ﺟﺎي ﻳﻚ ﺻﻔﺤﻪ ﺧﺎﻟﻲ ﻣﻲ ﺑﻴﻨﻨﺪ‪.‬‬ ‫‪www.IrPDF.com‬‬