SlideShare a Scribd company logo

Web Development basics with WordPress

•Download as PPTX, PDF•
•
Rashna Maharjan
Rashna Maharjan

This document provides an overview of basics in web development including HTML, CSS, JavaScript, and WordPress. It discusses the structure and components of HTML, different HTML elements and tags, CSS syntax and selectors, uses of JavaScript, and an introduction to WordPress including why it is commonly used and the WordPress development process. The document aims to provide foundational knowledge on key web development technologies through explanations, examples, and a quiz.

1 of 49
Basics of WEB DEVELOPMENT
Roadmap 2 1 3 5 6 4 2 HTML JS Collaboration of all 4 components CSS WordPress Quiz
Team Presentation 3 Rashna Maharjan WordPress Developer Umesh Bhatta Hubspot Developer Salina Kansakar Frontend Developer
HTML Hyper Text Markup Language 4
Introduction To HTML ⊹ HTML stands for Hyper Text Markup Language ⊹ Standard markup language for Web page ⊹ Describes the structure of a web page ⊹ Consists of series of elements ⊹ Elements tell browser how to display the content ⊹ HTML 4.01 & HTML 5.0: Widely used successful versions 5
ELements and tags ⊹ HTML tags are used to hold the HTML element ⊹ HTML element holds the content ⊹ HTML tag starts with < and ends with > ⊹ Whatever written within a HTML tag are HTML elements ⊹ Attributes can also be included as per need like id, class, href, etc 6
ELements and tags 7
Block and inline elements ⊹ BLOCK ELEMENT Always starts on a new line Always takes up the full width available Has a top and a bottom margin ⊹ INLINE ELEMENT Does not start on a new line Always takes up as much width as necessary 8
Block elements ⊹ <ol> ⊹ <p> ⊹ <pre> ⊹ <section> ⊹ <table> 9 ⊹ <dl> ⊹ <dt> ⊹ <fieldset> ⊹ <figcaption> ⊹ <figure> ⊹ <footer> ⊹ <form> ⊹ <tfoot> ⊹ <h1>-<h6> ⊹ <header> ⊹ <hr> ⊹ <li> ⊹ <main> ⊹ <nav> ⊹ <noscript> ⊹ <ul> ⊹ <address> ⊹ <article> ⊹ <aside> ⊹ <blockquote> ⊹ <canvas> ⊹ <dd> ⊹ <div> ⊹ <video>
INLINE elements ⊹ <a> ⊹ <abbr> ⊹ <acronym> ⊹ <b> ⊹ <bdo> ⊹ <big> ⊹ <br> 10 ⊹ <button> ⊹ <cite> ⊹ <code> ⊹ <dfn> ⊹ <em> ⊹ <i> ⊹ <img> ⊹ <input> ⊹ <kbd> ⊹ <label> ⊹ <map> ⊹ <object> ⊹ <output> ⊹ <q> ⊹ <samp> ⊹ <script> ⊹ <select> ⊹ <small> ⊹ <span> ⊹ <strong> ⊹ <sub> ⊹ <sup> ⊹ <textarea> ⊹ <time> ⊹ <tt> ⊹ <var>
Types of tags ⊹ Paired Tags ⊹ Unpaired Tags ⊹ Utility-Based Tags 11
Paired tag ⊹ The tag consists of both opening tag and closing tag <p> This text is a paragraph . </p> 12 UnPaired tag(Standalone or singular) ⊹ The tag that does not have closing tag <hr>
utility-based tag ⊹ The basis of the purpose they serve ⊹ Further divided to: 1. Formatting tags 2. Structure tags 3. Control tags 13
Formatting tags ⊹ Formatting of the texts like the size of the text, font styles etc. <b>, <u> 14 Structure tags ⊹ Helps in structuring the HTML document head, html, title, body etc control tags ⊹ Managing content or managing scripts or libraries that are external ⊹ All the form tags, drop-down lists, input text boxes, etc., are used in interacting with the visitor or the user ⊹ https://www.w3schools.com/tags/ref_byfunc.asp
Basic structure of html 15
16
CSS (Cascading Style sheet) 2
Introduction ● CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser. ● CSS defines how HTML elements are to be displayed. ● The purpose of CSS is to provide Web developers with a standard way to define, apply, and manage sets of style characteristics. 18
Syntax of css A CSS rule consist of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and value,separated by a colon. 19
Types of css ⊹ Inline Styles ⊹ Internal Styles ⊹ External Styles 20
Inline style ⊹ Inside styles are placed directly inside an HTML element in the code. ⊹ Example: <h1 style=”color: green;”></h1> 21
Internal style ⊹ Internal styles are placed inside the head section of particular web page via the style tag. Internal styles are also called ‘Embedded’ styles. 22
External style ⊹ The external style sheet is a separate page which is then linked to the web page. 23
CSS selectors CSS selectors allows you to select and manipulate HTML presentations. CSS selectors are used to find or select HTML elements based on their class, type and attribute. The CSS selectors are as follows: 1. Element Selector 2. ID Selector 3. Class Selector 4. Grouping Selector 24
The element selector The element selector selects elements based on the element name. Example: p{text-align: center; color: red} When we use above example, we get all <p> elements will be center- aligned with a red text color. 25
The ID selector The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single, unique element. To select an element with a specific id, write a hash(#) character, followed by the id of the element. Example: #cta {text-align: center; color: red;} 26
Class selector The class selector selects elements with a specific class attribute. To select elements with a specific class, write a dot(.)character, followed by the name of the class. Example: .string {text-align: center; color: red;} 27
Grouping selector Group selectors are used to style multiple elements at once and are very helpful to minimise the code. Example: h1,p,span,a {color: red;} 28
CSS media queries Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport. Media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones. 29
30 .presentation {width: 33.33%;}
31 @media only screen and (max-width: 768px) { .presentation {width: 50%;} }
@media only screen and (max-width: 480px) { .presentation {width: 100%;} } 32
33
javascript 3
Introduction ⊹ JavaScript is a scripting language designed for web pages. ⊹ First web scripting language ⊹ Oftenly confuse with java but is totally different ⊹ JavaScript was invented by Brendan Eich in 1995 35
Advantages of javascript ⊹ Speed : Client-side JavaScript is very fast because it can be run immediately within the client-side browser. ⊹ Gives the ability to create rich interfaces. ⊹ Read/write/modify HTML elements. ⊹ JavaScript enhances Web pages with dynamic and interactive features and can react to events. 36
Wordpress Code is Poetry 4
Glossary ⊹ Dynamic Websites ⊹ Page Templates ⊹ Posts ⊹ Theme ⊹ Plugin 38
Introduction ⊹ Free and open source content management system ⊹ Based on PHP and MySQL ⊹ Released on May 27, 2003 ⊹ Initially popular for blogging ⊹ Established as a framework of php to build any kind of websites (from simple blog to full business) 39
60.8% Market share in the CMS market 500+ sites Built each day using WordPress 14.7% World’s top websites powered by WordPress 40
Why Wordpress?? 41 SEO Friendly Create Permalinks, Manage Metadata Simple Integration compatible with lots third-party tools Plugin and Widget Can be complex or as simple as you want it to be. Flexibility Continuous update, built-in updates management system Reliable
Our process is easy 42 1 2 3
43
Dashboard Tour Time for practical knowledge 44
“ 45
46
“ 47 Quiz Time! https://share.nearpod.com/eHlfnB4D1bb
Any questions? 48
THANK YOU!

More Related Content

Web Development basics with WordPress

  • 1. Basics of WEB DEVELOPMENT
  • 2. Roadmap 2 1 3 5 6 4 2 HTML JS Collaboration of all 4 components CSS WordPress Quiz
  • 3. Team Presentation 3 Rashna Maharjan WordPress Developer Umesh Bhatta Hubspot Developer Salina Kansakar Frontend Developer
  • 5. Introduction To HTML ⊹ HTML stands for Hyper Text Markup Language ⊹ Standard markup language for Web page ⊹ Describes the structure of a web page ⊹ Consists of series of elements ⊹ Elements tell browser how to display the content ⊹ HTML 4.01 & HTML 5.0: Widely used successful versions 5
  • 6. ELements and tags ⊹ HTML tags are used to hold the HTML element ⊹ HTML element holds the content ⊹ HTML tag starts with < and ends with > ⊹ Whatever written within a HTML tag are HTML elements ⊹ Attributes can also be included as per need like id, class, href, etc 6
  • 8. Block and inline elements ⊹ BLOCK ELEMENT Always starts on a new line Always takes up the full width available Has a top and a bottom margin ⊹ INLINE ELEMENT Does not start on a new line Always takes up as much width as necessary 8
  • 9. Block elements ⊹ <ol> ⊹ <p> ⊹ <pre> ⊹ <section> ⊹ <table> 9 ⊹ <dl> ⊹ <dt> ⊹ <fieldset> ⊹ <figcaption> ⊹ <figure> ⊹ <footer> ⊹ <form> ⊹ <tfoot> ⊹ <h1>-<h6> ⊹ <header> ⊹ <hr> ⊹ <li> ⊹ <main> ⊹ <nav> ⊹ <noscript> ⊹ <ul> ⊹ <address> ⊹ <article> ⊹ <aside> ⊹ <blockquote> ⊹ <canvas> ⊹ <dd> ⊹ <div> ⊹ <video>
  • 10. INLINE elements ⊹ <a> ⊹ <abbr> ⊹ <acronym> ⊹ <b> ⊹ <bdo> ⊹ <big> ⊹ <br> 10 ⊹ <button> ⊹ <cite> ⊹ <code> ⊹ <dfn> ⊹ <em> ⊹ <i> ⊹ <img> ⊹ <input> ⊹ <kbd> ⊹ <label> ⊹ <map> ⊹ <object> ⊹ <output> ⊹ <q> ⊹ <samp> ⊹ <script> ⊹ <select> ⊹ <small> ⊹ <span> ⊹ <strong> ⊹ <sub> ⊹ <sup> ⊹ <textarea> ⊹ <time> ⊹ <tt> ⊹ <var>
  • 11. Types of tags ⊹ Paired Tags ⊹ Unpaired Tags ⊹ Utility-Based Tags 11
  • 12. Paired tag ⊹ The tag consists of both opening tag and closing tag <p> This text is a paragraph . </p> 12 UnPaired tag(Standalone or singular) ⊹ The tag that does not have closing tag <hr>
  • 13. utility-based tag ⊹ The basis of the purpose they serve ⊹ Further divided to: 1. Formatting tags 2. Structure tags 3. Control tags 13
  • 14. Formatting tags ⊹ Formatting of the texts like the size of the text, font styles etc. <b>, <u> 14 Structure tags ⊹ Helps in structuring the HTML document head, html, title, body etc control tags ⊹ Managing content or managing scripts or libraries that are external ⊹ All the form tags, drop-down lists, input text boxes, etc., are used in interacting with the visitor or the user ⊹ https://www.w3schools.com/tags/ref_byfunc.asp
  • 16. 16
  • 18. Introduction ● CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser. ● CSS defines how HTML elements are to be displayed. ● The purpose of CSS is to provide Web developers with a standard way to define, apply, and manage sets of style characteristics. 18
  • 19. Syntax of css A CSS rule consist of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and value,separated by a colon. 19
  • 20. Types of css ⊹ Inline Styles ⊹ Internal Styles ⊹ External Styles 20
  • 21. Inline style ⊹ Inside styles are placed directly inside an HTML element in the code. ⊹ Example: <h1 style=”color: green;”></h1> 21
  • 22. Internal style ⊹ Internal styles are placed inside the head section of particular web page via the style tag. Internal styles are also called ‘Embedded’ styles. 22
  • 23. External style ⊹ The external style sheet is a separate page which is then linked to the web page. 23
  • 24. CSS selectors CSS selectors allows you to select and manipulate HTML presentations. CSS selectors are used to find or select HTML elements based on their class, type and attribute. The CSS selectors are as follows: 1. Element Selector 2. ID Selector 3. Class Selector 4. Grouping Selector 24
  • 25. The element selector The element selector selects elements based on the element name. Example: p{text-align: center; color: red} When we use above example, we get all <p> elements will be center- aligned with a red text color. 25
  • 26. The ID selector The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single, unique element. To select an element with a specific id, write a hash(#) character, followed by the id of the element. Example: #cta {text-align: center; color: red;} 26
  • 27. Class selector The class selector selects elements with a specific class attribute. To select elements with a specific class, write a dot(.)character, followed by the name of the class. Example: .string {text-align: center; color: red;} 27
  • 28. Grouping selector Group selectors are used to style multiple elements at once and are very helpful to minimise the code. Example: h1,p,span,a {color: red;} 28
  • 29. CSS media queries Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport. Media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones. 29
  • 31. 31 @media only screen and (max-width: 768px) { .presentation {width: 50%;} }
  • 32. @media only screen and (max-width: 480px) { .presentation {width: 100%;} } 32
  • 33. 33
  • 35. Introduction ⊹ JavaScript is a scripting language designed for web pages. ⊹ First web scripting language ⊹ Oftenly confuse with java but is totally different ⊹ JavaScript was invented by Brendan Eich in 1995 35
  • 36. Advantages of javascript ⊹ Speed : Client-side JavaScript is very fast because it can be run immediately within the client-side browser. ⊹ Gives the ability to create rich interfaces. ⊹ Read/write/modify HTML elements. ⊹ JavaScript enhances Web pages with dynamic and interactive features and can react to events. 36
  • 38. Glossary ⊹ Dynamic Websites ⊹ Page Templates ⊹ Posts ⊹ Theme ⊹ Plugin 38
  • 39. Introduction ⊹ Free and open source content management system ⊹ Based on PHP and MySQL ⊹ Released on May 27, 2003 ⊹ Initially popular for blogging ⊹ Established as a framework of php to build any kind of websites (from simple blog to full business) 39
  • 40. 60.8% Market share in the CMS market 500+ sites Built each day using WordPress 14.7% World’s top websites powered by WordPress 40
  • 41. Why Wordpress?? 41 SEO Friendly Create Permalinks, Manage Metadata Simple Integration compatible with lots third-party tools Plugin and Widget Can be complex or as simple as you want it to be. Flexibility Continuous update, built-in updates management system Reliable
  • 42. Our process is easy 42 1 2 3
  • 43. 43
  • 46. 46