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. 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

4. HTML
Hyper Text Markup Language
4

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

7. ELements and tags
7

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

15. Basic structure of html
15

16. 16

17. CSS (Cascading Style sheet)
2

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

30. 30
.presentation {width: 33.33%;}

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

34. javascript
3

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

37. Wordpress
Code is Poetry
4

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

44. Dashboard
Tour
Time for practical knowledge
44

45. “
45

46. 46

47. “
47
Quiz Time!
https://share.nearpod.com/eHlfnB4D1bb

48. Any questions?
48

49. THANK YOU!