Web page designing with HTML and CSS
දැන් අපි ඉන්න මේ page එක වගේ අපිටත් අපේම web page එකක් design කර ගන්න පුළුවන්. ඒ විදිහට අපි හදා ගත්ත web pages එකතු කරලා web site එකක් හදා ගන්නත් පුළුවන්. ඒකට අපි මූලිකවම HTML සහ CSS ඉගෙන ගන්න ඕනේ.
HTML
HTML කියලා කියන්නේ Hyper Text Markup Language කියන එකේ කෙටි යෙදුම. අපිට web page එක පේන විදිහ ඒ කියන්නෙ web page එකේ content එක design කරන්න HTML යොදා ගන්නවා. HTML pages හැදිලා තියෙන්නෙ HTML elements වලින්. HTML elements <> එකක් විදිහට තමයි පෙන්නන්නේ. මේවට කියන්නෙ tags කියලා. අපි දකින paragraphs , titles , images , tables , forms මේ හැම දෙයක්ම html tags පාවිච්චි කරලා හදන්න පුළුවන්.
HTML tags ලියන්න normal text editor එකක් use කරන්න පුළුවන්. Notepad , Notepad++ , Sublime text වගේ. එහෙම නැත්නම් online html codes run කරන්න පුළුවන් Online HTML Editor , w3schools හරහා.
CSS
CSS කියන්නේ Cascading Style Sheets කියන එකේ කෙටි යෙදුම. Web page deign වලදී වැඩිපුරම වැඩ කොටසක් කරන්නේ CSS කිව්වත් වැරදි නෑ. මොකද CSS නිසා තමයි web pages ලස්සනට බලා ගන්න ලැබෙන්නේ. අපිට web pages වල content එක පෙන්නන්න ඕනේ මොන විදිහටද කියලා තීරණය කරන්නේ CSS. ඒ කොහොමද කියලා ඉස්සරහට බලමු.
Debug Trace
Info | Could not find file 'oauth2.css' in folder 'oauth2'. |
Notice |
Trying to access array offset on value of type bool #0 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(45): gdn_ErrorHandler(8, 'Trying to acces...', '/home/xtreabfi/...', 45, Array) #1 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #2 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #3 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #6 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #7 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #8 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #9 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #10 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #11 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('36', 'web-page-design...', '') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #13 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #14 {main} |
Notice |
Trying to access array offset on value of type bool #0 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(125): gdn_ErrorHandler(8, 'Trying to acces...', '/home/xtreabfi/...', 125, Array) #1 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #2 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #3 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #6 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #7 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #8 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #9 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #10 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #11 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('36', 'web-page-design...', '') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #13 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #14 {main} |
Notice |
Trying to access array offset on value of type bool #0 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(219): gdn_ErrorHandler(8, 'Trying to acces...', '/home/xtreabfi/...', 219, Array) #1 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #2 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #3 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #6 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #7 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #8 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #9 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #10 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #11 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('36', 'web-page-design...', '') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #13 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #14 {main} |
Notice |
Trying to access array offset on value of type bool #0 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(235): gdn_ErrorHandler(8, 'Trying to acces...', '/home/xtreabfi/...', 235, Array) #1 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #2 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #3 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #6 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #7 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #8 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #9 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #10 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #11 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('36', 'web-page-design...', '') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #13 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #14 {main} |
Notice |
Undefined index: internal #0 /home/xtreabfi/kuppiya/library/core/class.router.php(70): gdn_ErrorHandler(8, 'Undefined index...', '/home/xtreabfi/...', 70, Array) #1 /home/xtreabfi/kuppiya/library/core/class.theme.php(92): Gdn_Router->getRoute('DefaultControll...') #2 /home/xtreabfi/kuppiya/library/SmartyPlugins/function.breadcrumbs.php(24): Gdn_Theme::breadcrumbs(Array, true, Array) #3 /home/xtreabfi/kuppiya/cache/Smarty/compile/vanilla^8d148c5e1b13e8d27851611d20a380b18401257f_0.file.default.master.tpl.php(332): smarty_function_breadcrumbs(Array, Object(Smarty_Internal_Template)) #4 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_resource_base.php(123): content_6594354daaee31_19788427(Object(Smarty_Internal_Template)) #5 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #6 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #7 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 1) #8 /home/xtreabfi/kuppiya/vendor/smarty/smarty/libs/sysplugins/smarty_internal_templatebase.php(134): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, 'vanilla', NULL, 1) #9 /home/xtreabfi/kuppiya/library/core/class.smarty.php(146): Smarty_Internal_TemplateBase->display('/home/xtreabfi/...', NULL, 'vanilla') #10 /home/xtreabfi/kuppiya/library/core/class.controller.php(2232): Gdn_Smarty->render('/home/xtreabfi/...', Object(DiscussionController)) #11 /home/xtreabfi/kuppiya/library/core/class.controller.php(1595): Gdn_Controller->renderMaster() #12 /home/xtreabfi/kuppiya/library/core/class.pluggable.php(217): Gdn_Controller->xRender() #13 /home/xtreabfi/kuppiya/applications/vanilla/controllers/class.discussioncontroller.php(336): Gdn_Pluggable->__call('render', Array) #14 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->index('36', 'web-page-design...', '') #15 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #16 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #17 {main} |
Comments
@SCsharika Great
@SCsharika Sublime text ❤️
How to start a great discussion
Please Read Before Posting - Guidelines & Tips for using this forum