Web and Programming Basics Guide
Uploaded by
rajkumarpandey51975Web and Programming Basics Guide
Uploaded by
rajkumarpandey51975Web and Programming Basics Guide • WWW stands for World Wide Web.
<head> • Examples include:
1. Define Internet. • It’s a system of interlinked hypertext documents <title>Page Title</title> o <br> (line break)
accessed via the Internet.
• The Internet is a global network of networks </head> o <hr> (horizontal line)
connecting millions of computers and devices. • Uses HTTP and web browsers to view web pages.
<body> o <img> (image)
(Note: The Internet is the network; the Web is the
• It uses standard communication protocols
content on it.) <!-- Content goes here --> o <input> (form input)
(TCP/IP) to share information.
8. What is DNS? <h1>Hello, World!</h1> o <meta> (metadata)
• It allows people worldwide to access websites,
send emails, and use online services. • DNS stands for Domain Name System. <p>This is a paragraph.</p> • These tags perform an action or insert an element
without surrounding content.
2. What is a search engine? • It translates human-readable domain names (like </body>
[Link]) into IP addresses (like 18. What is the use of <marquee> tag?
• A search engine is an online tool that finds </html>
[Link]).
information on the web by keywords. • The <marquee> tag was used to create scrolling
• Acts like an Internet “phonebook” so we use 14. What is text formatting?
text or images.
• It crawls and indexes web pages and ranks results
names instead of numeric addresses. • Text formatting in HTML uses tags to style text.
by relevance. • It is deprecated in HTML5 (not recommended for
9. Name any two types of websites. • Examples: use).
• Examples include Google, Bing, and
DuckDuckGo – users enter a query and get a list • Static Website: Content is fixed in HTML/CSS. o <b> or <strong> for bold text. • Example (obsolete): <marquee>Scrolling
of links. (Example: a portfolio site where pages don’t text</marquee>.
change unless edited.) o <i> or <em> for italic text.
3. What is a web browser? 19. What does the <hr> tag do?
• Dynamic Website: Content is generated on-the- o <u> for underline, <sub> for subscript,
• A web browser is a software application to <sup> for superscript. • The <hr> tag inserts a horizontal rule (a horizontal
fly by code (PHP, JavaScript, etc.). (Example: e-
access and view web pages. line) in the page.
commerce site, social media.) • These tags change how text looks without
• Examples: Chrome, Firefox, Safari, Edge. changing its meaning. • It is used to visually separate sections of content.
10. What is web publishing?
• It requests pages (via HTTP/HTTPS), and renders 15. Write the difference between <ol> and <ul>. • Example: <hr> adds a thin horizontal line across
• Web publishing is making web content publicly
HTML, CSS, and JavaScript into a visual webpage. the page.
accessible on the Internet. • <ol> creates an ordered list (numbered items).
4. What is HTTP? 20. Name any two heading tags in HTML.
• Involves creating HTML/CSS files and uploading • <ul> creates an unordered list (bulleted items).
• HTTP stands for HyperText Transfer Protocol. them to a web server. • Two heading tags are <h1> and <h2>.
Example:
• It is the protocol used to transfer web pages • Can use tools or CMS (like WordPress) to publish • There are six levels: <h1> (largest) through <h6>
between servers and clients (browsers). text, images, and other media online. <ol> (smallest).
• Example: When you type [Link] the 11. Define HTML. <li>First item</li> • Example:
browser uses HTTP to retrieve the page. <li>Second item</li>
• HTML stands for HyperText Markup Language. • <h1>Main Title</h1>
5. What is a URL? </ol>
• It is the standard language for creating and • <h2>Subheading</h2>
• URL stands for Uniform Resource Locator. structuring web pages.
<ul> 21. What is the purpose of the <table> tag?
• It is the address of a resource on the Internet. • Uses tags (like <h1>, <p>, <a>) to define elements
<li>Apple</li> • The <table> tag is used to create tabular data
Example: [Link] (headings, paragraphs, links).
<li>Banana</li> (rows and columns).
• Structure: protocol://domain/path (e.g., https:// is 12. What is the use of the <title> tag?
protocol, [Link] is domain, /[Link] is </ul> • It contains <tr> for table rows, <td> for cells, and
• The <title> tag defines the title of the HTML <th> for header cells.
path).
document. 16. What is an anchor tag?
6. Define web caching. • Example:
• It appears in the browser’s title bar or tab. • The <a> tag defines a hyperlink (anchor).
• Web caching stores copies of web resources • <table>
• Important for SEO: search engines use it as the • It uses the href attribute to link to another URL.
(pages, images) to speed up access. • <tr><th>Name</th><th>Age</th></tr>
page title.
• Example:
• Browsers and servers save files so repeated • <tr><td>Alice</td><td>30</td></tr>
13. Write the structure of a basic HTML document.
requests load faster and use less bandwidth. • <a href="[Link]
A basic HTML document includes a doctype, <html>, Example</a> • </table>
• If a page hasn't changed, the cache can serve the
<head>, and <body> tags: 22. What does <th> represent in a table?
stored copy instead of downloading again. 17. What are empty tags? Give examples.
<!DOCTYPE html> • <th> stands for table header cell.
7. What is WWW? • Empty tags (self-closing) have no closing tag or
<html> content.
• It defines a header cell in a table row. By default, • Radio Button (<input type="radio">): Allows • They break the browser’s back button and make 34. What is the difference between ID and class
its content is bold and centered. selection of one option within a group. Radios with bookmarking difficult. selectors?
the same name are linked.
• Example: • Can cause SEO issues and complicate page • ID Selector (#): Targets an element by its unique
• Checkbox (<input type="checkbox">): Allows layout. id. Each page element can have only one ID.
• <table>
multiple independent selections. Each checkbox
• Modern web design uses CSS and modern layout • Class Selector (.): Targets one or more elements
• <tr><th>Name</th><th>Age</th></tr> is separate.
techniques instead. by a shared class. Multiple elements can share the
• <tr><td>Bob</td><td>25</td></tr> • Example: same class.
30. Write the syntax of <frameset>.
• </table> • <!-- Radio buttons --> • Example:
• <frameset> was used to define a frames-based
23. What is the use of rowspan? • <input type="radio" name="color" value="red"> layout (replacing <body>). • <div id="header">...</div>
Red
• The rowspan attribute on a <td> or <th> makes that • Example: • <div class="menu">...</div>
cell span multiple rows. • <input type="radio" name="color" value="blue">
• <frameset cols="50%,50%"> • #header { background: blue; }
Blue
• Syntax example: <td rowspan="2">.
• <frame src="[Link]"> • .menu { font-size: 16px; }
• <!-- Checkboxes -->
• This merges cells vertically. For example:
• <frame src="[Link]"> 35. Write the syntax of a CSS rule.
• <input type="checkbox" name="subscribe"
• <table> value="news"> News • </frameset> • A CSS rule has the form:
• <tr> • <input type="checkbox" name="subscribe" • (Note: <frameset> and <frame> are obsolete in • selector {
• <td rowspan="2">Name</td> value="offers"> Offers HTML5.)
• property: value;
• <td>Data1</td> 27. What is the <iframe> tag? 31. What is CSS?
• }
• </tr> • The <iframe> tag embeds another HTML page • CSS stands for Cascading Style Sheets.
inside the current page (inline frame). • Example:
• <tr> • It is a stylesheet language used to style HTML
• Uses attributes like src, width, height. • p{
elements (colors, fonts, layout).
• <td>Data2</td>
• Example: • color: blue;
• Example:
• </tr>
• <iframe src="[Link] • font-size: 16px;
• body { background-color: lightblue; }
• </table> width="300" height="200"></iframe> • }
• h1 { color: navy; font-size: 24px; }
24. What is a form in HTML? • Often used to embed videos, maps, or other • Here, p is the selector, and color: blue; is a
websites. 32. List the types of CSS.
• A <form> is a section of a webpage used to collect declaration.
user input. 28. Define nested frames. • Inline CSS: Using the style attribute in HTML tags.
36. What is a pseudo-class in CSS?
Example: <p style="color:red;">.
• It can include inputs like text fields, checkboxes, • Nested frames are framesets placed inside other • A pseudo-class is a way to define a special state
buttons, etc. framesets. • Internal/Embedded CSS: Using a <style> tag in
of an element.
the HTML <head>.
• Example: • Example of nested <frameset>: • Examples: :hover (when mouse is over), :active,
• <style>
• <form action="/submit" method="post"> • <frameset cols="50%,50%"> :visited (link visited).
• h1 { color: green; }
• <input type="text" name="username"> • <frameset rows="30%,70%"> • Example:
• </style>
• <input type="submit" value="Send"> • <frame src="[Link]"> • a:hover { color: red; } /* changes link color on hover
• External CSS: Using a separate .css file linked */
• </form> • <frame src="[Link]"> with <link>.
37. What is a media query?
25. Write the syntax for creating a text field in a form. • </frameset> • <link rel="stylesheet" href="[Link]">
• A media query applies CSS only under certain
• Use the <input> tag with type="text". • <frame src="[Link]"> 33. What is inline CSS? conditions (screen size, device type).
• Example: • </frameset> • Inline CSS applies styles directly in an HTML tag’s • Used for responsive design.
• <input type="text" name="username" style attribute.
• (Note: Framesets are outdated and not supported • Syntax example:
placeholder="Enter your name"> in HTML5.) • Example:
• @media screen and (max-width: 600px) {
• This creates a single-line text field for user input. 29. What are the disadvantages of using frames? • <p style="color: red; font-size: 14px;">This is red
• /* CSS rules for small screens */
26. Difference between radio button and checkbox. text.</p>
• Frames are outdated and not supported in HTML5.
• body { background-color: lightgreen; }
• It only affects that specific element.
• }
38. Define the box model. • Event-Driven: Easily responds to events like clicks • The if statement is used for conditional • A for loop repeats code a specific number of
or keystrokes. execution. times.
• The CSS box model describes layout of elements.
• (Other features: Client-side execution, object- • It runs a block of code only if a given condition is • Syntax:
• It has four parts:
oriented, interpreted language, cross-platform.) true.
• for (let i = 0; i < 5; i++) {
o Content: The actual content (text, images).
43. Name different data types in JavaScript. • Example:
• // code to repeat
o Padding: Space between content and
• Number: e.g., 42, 3.14. • if (score > 50) {
border. • [Link](i);
• String: text, e.g., "Hello". • [Link]("You passed!");
o Border: Edge around padding. • }
• Boolean: true or false. • }
o Margin: Space outside the border. • This runs from i = 0 up to i < 5, incrementing i by 1
• Object: Collections of key/value pairs (includes 48. Write syntax for a for loop. each time.
• Example visualization:
arrays and functions).
49. Define a function in JavaScript.
• [ margin ] -> [ border ] -> [ padding ] -> [ content ]
• Null: represents no value.
• A function is a reusable block of code that performs a task.
39. What is the use of z-index?
• Undefined: variable declared but not assigned.
• Declared with the function keyword (or as an arrow function).
• z-index sets the stacking order of positioned
• Symbol: unique identifier.
elements along the z-axis (depth). • Example:
• BigInt: for very large integers (beyond Number
• Higher z-index means the element is on top of • function greet(name) {
range).
those with lower z-index.
• return "Hello, " + name + "!";
44. How is JavaScript added to HTML?
• It only works on elements with position (e.g.,
• }
relative, absolute). • Use the <script> tag.
• [Link](greet("Alice")); // Outputs: Hello, Alice!
• Example: o Inline: Write JS code inside <script> tags.
50. What is an event in JavaScript?
• .modal { position: absolute; z-index: 10; } o External: Link an external .js file.
• An event is an action or occurrence in the browser
40. Write the difference between relative and absolute • Examples:
positioning. (like a click, key press, or page load).
• <!-- Inline JS -->
• Relative (position: relative): Element is • JavaScript can listen for events and run code
• <script>
positioned relative to its normal position. Other
content is not affected. (event handlers) when they occur.
• [Link]('Hello, World!');
• Absolute (position: absolute): Element is • Example:
• </script>
removed from the normal flow and positioned • <button id="myBtn">Click me</button>
•
relative to the nearest positioned ancestor (or the
viewport if none). • <script>
• <!-- External JS -->
• Example: • [Link]("myBtn").onclick = function() {
• <script src="[Link]"></script>
• .relative { position: relative; top: 10px; left: 20px; } • alert("Button clicked!");
45. Define variable and constant.
• .absolute { position: absolute; top: 50px; left: 50px; • };
• Variable: A named container for data that can
} change. Declared with let or var. • </script>
41. What is JavaScript? Example: let count = 10;
• JavaScript (JS) is a scripting language for the web. • Constant: A named container whose value cannot
be changed once set. Declared with const.
• It runs in the browser (and also on servers with Example: const PI = 3.14;
[Link]) to make web pages interactive and
dynamic. 46. Name any two operators in JavaScript.
• Example use: updating content without reloading, • Arithmetic operators: +, -, *, /, % (used for math).
responding to user actions (clicks, forms). • Comparison operators: ==, ===, !=, >, <, <=, >=
42. List any two features of JavaScript. (used to compare values).
• Dynamic Typing: Variables can hold any type • (Other examples: assignment =, logical &&, ||, etc.)
(string, number, etc.) without declaring a type. 47. What is the use of if statement?
