Web page designing with HTML and CSS

SCsharika · March 2020

දැන් අපි ඉන්න මේ 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. ඒ කොහොමද කියලා ඉස්සරහට බලමු.

Naveen Ranasinghe · March 2020

@SCsharika Great

Admin · March 2020

@SCsharika Sublime text ❤️

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/applications/vanilla/controllers/class.discussioncontroller.php(424): DiscussionController->index('36', 'x', 'p1') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->comment('39') #13 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #14 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #15 {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/applications/vanilla/controllers/class.discussioncontroller.php(424): DiscussionController->index('36', 'x', 'p1') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->comment('39') #13 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #14 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #15 {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/applications/vanilla/controllers/class.discussioncontroller.php(424): DiscussionController->index('36', 'x', 'p1') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->comment('39') #13 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #14 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #15 {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/applications/vanilla/controllers/class.discussioncontroller.php(424): DiscussionController->index('36', 'x', 'p1') #12 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->comment('39') #13 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #14 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #15 {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/applications/vanilla/controllers/class.discussioncontroller.php(424): DiscussionController->index('36', 'x', 'p1') #15 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(933): DiscussionController->comment('39') #16 /home/xtreabfi/kuppiya/library/core/class.dispatcher.php(335): Gdn_Dispatcher->dispatchController(Object(Gdn_Request), Array) #17 /home/xtreabfi/kuppiya/index.php(29): Gdn_Dispatcher->dispatch() #18 {main}

Web page designing with HTML and CSS

Comments

Debug Trace