Scribd
Upload
8 views

DCA1109 & INTRODUCTION TO WEB PROGRAMMING-Bhushan 266

The document provides an overview of HTML and CSS, detailing their features, uses, and syntax. It covers HTML's structure, including its main elements, versions, and the importance of separating content from design using CSS. Additionally, it explains how to create tables, lists, and style text, emphasizing best practices for web development.

Uploaded by

abhaykatre70
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

DCA1109 & INTRODUCTION TO WEB PROGRAMMING-Bhushan 266

The document provides an overview of HTML and CSS, detailing their features, uses, and syntax. It covers HTML's structure, including its main elements, versions, and the importance of separating content from design using CSS. Additionally, it explains how to create tables, lists, and style text, emphasizing best practices for web development.

Uploaded by

abhaykatre70
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

NAME BHAKRE BHUSHAN SHANKAR

ROLL NO 2414514741
PROGRAM BCA
SEMESTER 1
SUBJECT NAME INTRODUCTION TO WEB PROGRAMMING
SUBJECT CODE DCA 1109

SET - I

Answer 1:

HTML which stands for Hypertext Markup Language is used to formularize the web pages and
the applications. It allows us to describe the structure and content of a web page using markup
tags. Here is a brief overview of its main elements, utilities, versions, as well as a short
description of the basic syntax format and its divisions (head and body).

1. Main Features of HTML

 Platform Independent: HTML can runs on all the OS and web browsers; it is highly
portable.

 Simple Learning Curve : It uses a simple tag structure which is quite easier for novice.

 Interconnectivity: HTML is all about linking to other web pages/documents/resources as


well as links within the same page (the hyperlink) in terms of HTML rendering.

 Embed Media: Allows embedding of images, audio, and video within the actual web pages.

 Semantic Elements: The latest versions of HTML, especially HTML5, introduced various
semantic elements including, and to enhance the readability of code and search engine
optimization scores.

2. Uses of HTML

 Creating Web Pages — Every single website on the internet runs off the HTML setup
which helps define things like headers, paragraphs, and media embedding.

1
 Email Templates Most of the email clients use HTML formatting to create some visually
attractive messages.

 Web Applications: HTML along with other techs (CSS, JavaScript) is used to make strong
and interactive web applications.

 Documentation and Prototypes — A lot of times projects need to quickly bootstrap some
layouts, or demonstrate organized content, HTML is great for both.

3. Versions of HTML

 HTML 1.0 (1993): The first version to be released openly, with very basic tags.

 HTML 2.0 (1995) — Set a standard for common features such as forms and other essentials.

 HTML 3.2 (1997): Added presentation elements () and improved browser support.

 HTML 4.01 (1999) : The focus was more on structure than presentation, a lot of semantics
with elements.

 XHTML (2000) — (Smaller, stricter) XHTML revision written in XML, which enforced
well-formedness

 HTML5 (2014): The latest major version, which features additional semantic elements (,, ),
improved multimedia support, and more comprehensive support for mobile and dynamic web
applications.

4. Head and Body Parts: Syntax Form

The DOCTYPE declaration: This is where an HTML document starts.

This tag define a document. It comprises two main limbs which are the limbs of its structure:

1. Head Tag (<head> ... </head>)

What: Holds metadata and information about the document, including the page title, character
encoding, and linked resources (CSS and JavaScript).

Common Elements:
 <title>: Sets the title displayed on the browser tab.
 <meta>: Defines metadata like charset (UTF-8) or description.

2
 <link>: References external stylesheets or icons.
 <script>: Links to external JavaScript or includes inline code.

2. Body Section (<body> ... </body>)


Purpose: Contains the visible content of the web page, including text, images, links, forms, and
any other interactive elements.
Common Elements:
 Headings (<h1> through <h6>), paragraphs (<p>), lists (<ul>, <ol>), tables (<table>),
images (<img>), and more.
 Semantic tags in HTML5 (<header>, <nav>, <main>, <section>, <footer>) for better
structure and readability.

Finally, the document terminates with the closing tag that marks the end of the HTML
document.

HTML is usually a base part of any web content. Its versions have improved at representing
semantic tags, suggest ability to add multimedia and drive the screws of coding standards. The
separation of the head (metadata and references about the document) and the body (content
visible to the user) give HTML a beautiful structure which enhances readability and the overall
productivity of web development.

Answer 2:

HTML (Hypertext Markup Language) has a lot of elements to help structure and present data
on the web pages effectively. A simple text vertical structure with text typographic tags: tables
and lists basically, which are two basic content organising elements;

Tables in Html — How To Build & Use Them

Tables are used to display a set of data in a format, basically a grid format which contains rows
and columns. These template are particularly useful in presenting data side by side,
comparisons, pricing information, and so on. To create a table in HTML you have to use various
tags.

 <table>: Defines the table structure.

3
 <tr> (Table Row): Represents a row within the table.
 <th> (Table Header): Denotes header cells, typically displayed in bold and centered.
 <td> (Table Data): Contains standard data cells.
Example:
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>$1.00</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.50</td>
<td>100</td>
</tr>
</table>

Explanation:
o The <table> tag creates the table with a border.
o <tr> defines each row.
o <th> specifies header cells for "Product," "Price," and "Quantity."
<td> contains the actual data for each product

Usage Considerations:

o Accessibility: Enhancing Accessibility with scope attribute in tags


o Styling– using CSS we can style the Table by adding padding, borders, background color
etc.

4
o Implement a CSS framework or media queries to ensure that you have responsive tables
on different devices.

2. Text Styling Tags and How Lists Work


Few things display information clearer and more concisely than lists, for example There are
three types of lists in HTML:

a. List Types

 Unordered Lists ()
 Purpose: List items in no particular order, with bullets Weekly sentence paraphrase email list
 Use Case: A listing of features, ingredients or any collection of items where the order
doesn’t matter.

 Example:

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

2. Ordered Lists (<ol>)


 Purpose: Present items in a specific sequence, usually numbered.
 Use Case: Step-by-step instructions, rankings, or processes.
Example:
<ol>
<li>Open the browser.</li>
<li>Navigate to the website.</li>
<li>Enter your credentials.</li>
</ol>

3. Definition Lists (<dl>)


 Purpose: Define terms and their corresponding descriptions.
 Use Case: Glossaries, FAQs, or any scenario requiring term-description pairs.
Example:

5
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language, the standard language for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling HTML documents.</dd>
</dl>

b. Text Styling Tags


HTML provides several tags to style text, enhancing emphasis and readability:
1. Bold Text (<b> and <strong>)
 <b>: Applies bold styling without conveying importance.
<p>This is a <b>bold</b> text.</p>
 <strong>: Semantically indicates strong importance, typically rendered in bold.
<p>This is a <strong>strong</strong> statement.</p>

2. Italic Text (<i> and <em>)


 <i>: Renders text in italics without additional meaning.
<p>This is an <i>italic</i> word.</p>
 <em>: Emphasizes text, usually displayed in italics.
<p>This is an <em>emphasized</em> phrase.</p>

3. Underline Text (<u>)


 Purpose: Underlines text, often used for links or to highlight specific words.
<p>This is an <u>underlined</u> text.</p>

4. Strikethrough Text (<s> and <del>)


 <s>: Displays text with a strikethrough, indicating it is no longer relevant.
<p>This is a <s>strikethrough</s> text.</p>
 <del>: Semantically marks text that has been deleted.
<p>This text has been <del>deleted</del>.</p>

6
5. Superscript and Subscript (<sup> and <sub>)
 <sup>: Raises text above the baseline, useful for footnotes or mathematical exponents.
<p>E = mc<sup>2</sup></p>
 <sub>: Lowers text below the baseline, often used in chemical formulas.
<p>H<sub>2</sub>O</p>

Best Practices:

o Speaking of, prefer semantic tags, to pure style ones, to improve accessibility and SEO.
o Do not use styling tags too much Try to avoid using styles into HTML If its avoided only
then you can use CSS properly and make html content clean.
o Styling with CSS for more precise appearance and consistency throughout the website

Conclusion

Tables and Lists are basic HTML elements that are utilized to construct and present information
in a methodical manner. Tables for structured data, other kinds of lists for other kinds of
information The facility of text styling tags that bolds and helps in differentiating texts further
advances the presentation. These elements have to be understood to create a working and user-
friendly, and good looking, web page.

Answer 3.

Cascading Style Sheets (CSS) is a style sheet language being used to style HTML documents. It
allows to separate the web pages structure (HTML) from the visual design and this makes it
easy to maintain and modify. CSS gives you control over the layout, colour, font, spacing, and
other visual style of a webpage across multiple HTML files.

What is CSS?

CSS: Cascading Style Sheets — Definition It gives the way in which to provide the HTML
elements in the browser, on the screen, in sometime papers but also in some type of medias.

Purpose:

o Separation of Concerns: Separates design (style) from document structure (content)


making code cleaner and easier to maintain.

7
o Control: You can control the appearance of your pages using a single CSS file that
manages styles across many pages, preserving a consistent look and feel across the entire
site.
o Central point: It works globally across the website as developers can modify all the
pages just by changing a single stylesheet.

Key Features:

o Selectors: Choose HTML tags (h1, p, div) or classes/IDs.


o Property: To define visual properties, such as color, font-size, margin, padding, etc.
o Values: This is used to specify how each property will be styled (e.g. color:blue; font-
size:16px; ).
o Cascading and Inheritance: Style rules are at the top and inherit by default (though
there are exceptions) and specific rules override general ones.

What Is How to Set and Add Basic CSS Styles to Web Pages

Methods to Apply CSS in HTML: Inline, Internal and External. Some examples of both, to set a
simple CSS rule and how to use one.

a. Inline CSS

Internal CSS, which is written in the style attribute of the element. These are for quick, short-
term modifications:

flex-grow: 1; inline styles applied for this paragraph

 Cons: If you only have one of them, they are quick to use.
 Cons: Not suitable for large project; may render your HTML code difficult to read.

b. Internal CSS

Internal CSS rules are declared inside of the tag in the head of an HTML file. You would
typically use this method when you have one single page with very specific needs:

<!DOCTYPE html>
<html>

8
<head>
<title>Internal CSS Example</title>
<style>
p{
color: green;
font-family: Arial, sans-serif;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p>This paragraph text is green.</p>
<p class="highlight">This paragraph has a yellow background.</p>
</body>
</html>
 Revalidation Pros: Great for page specific styling.
 Cons: Not the best for bigger sites with many pages.

c. External CSS
External CSS is linking an external. stylesheet (an external css file) to the html document It is
the most popular and effective way for big or multi-page sites:
<!-- style.css -->
p { colour: red; font-size: 16px;}

.highlight {background-colour: #f0f0f0;}

/* index.html */
<!DOCTYPE html>
<html>

9
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>This paragraph is styled via external CSS.</p>
<p class="highlight">This paragraph uses the highlight class.</p>
</body>
</html>

 Cons: Global type styling, no scope, hard to manage with many files high no of styles.
 Cons: Additional HTTP request to download CSS file (small file size most of times and
good maintainability ratio).

Conclusion

But in short, CSS has been such a useful tool to mold and format how a website should appear
and feel. External CSS files prevent duplicate styles and ensure developers write consistent styles
over a site, updating them at once and providing a consistent look and feel of a site. Basic CSS
properties and selectors are the essential foundation for styling online, no matter if the approach
is inline, internal, or external styles.

SET - II

Answer 4.

HTML (Hypertext Markup Language) is designed with various tags and attributes to place texts,
images, and hyperlinks on the page. Here is the detailed explanation of it:

Align TEXT using text-insert create div and align.

a. Inserting Text

Here is something to insert text in an HTML document.

1. Headings: <h1> to <h6> for hierarchical headings, where <h1> is the largest.

10
<h1>Main Heading</h1>
<h2>Subheading</h2>
2. Paragraphs: <p> tag defines a block of text as a paragraph.
<p>This is a paragraph.</p>
3. Line Breaks: <br> inserts a single line break without starting a new paragraph.
Line one.<br>Line two.
4. Preformatted Text: <pre> preserves whitespace and line breaks.
<pre>
Line 1
Line 2 (Indented)
Line 3
</pre>
5. Text Formatting Tags:
o Bold: <b> or <strong> for importance.
o Italic: <i> or <em> for emphasis.
o Underline: <u> for underlined text.

Example:
<p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>

b. Aligning Text
The text-align property in CSS is used to align text inside a block-level element.
1. Inline Method:
<p style="text-align: center;">This text is centered.</p>
2. Internal CSS:
<style>
h1 {
text-align: right;
}
</style>
<h1>Right-aligned heading</h1>

11
Values for Text Alignment:
 left — Aligns text to the left (by default).
 right: Aligns text to the right.
 canter: Centres the text.
 justify: Justifies text to fill the whole width of the container.

Incorporating Images in HTML


Use tag to include images. Key attributes include:
Basic Syntax:
<a href="https://example.com">
<img src="example.jpg" alt="Clickable Image">
</a>
1. Responsive Image:
<img src="example.jpg" style="width: 100%; height: auto;">

It also ensures that the size of the image depends on the width of the screen.

How to Embed Links in HTML

Link means create an anchor, which is It associates your webpage to either a different page or a
section or an external resource.

a. Basic Hyperlink:

<a href="https://www.google.com">Visit Google</a>


 href: Specifies the URL or link destination.
 target="_blank": Opens the link in a new tab or window.
 <a href="https://www.google.com" target="_blank">Open Google in new tab</a>

b. Linking to an Email Address:


<a href="mailto:[email protected]">Send Email</a>

c. Linking to a Phone Number:

12
<a href="tel:+911234567890">Call Us</a>

d. Internal Links (Same Page):


Use IDs to navigate within the same page:
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>

4. Combining Images and Hyperlinks


To make an image a hyperlink, combine <a> and <img>:
<a href="https://example.com">
<img src="logo.png" alt="Website Logo" width="100" height="50">
</a>

Conclusion

Allows insertion and formatting of text, text align and graphics (images and hyperlinks). Text
alignment enhances the reading experience, images makes the website more attractive and
hyperlinks(related and/or different websites) navigation. They play a crucial role in making
websites interactive and engaging, and knowing how to use them is equally vital.

Answer 5:

HTML Forms : Forms are the basic building blocks of web presence (also called as a website).
Their functionality enables the user to engage with web applications; hence, they are pivotal for
logging in, signing up, searching, responding for feedback pack, and much more.

Structure of HTML Forms

The tag defines the HTML form. It contains input fields, buttons, checkboxes, radio buttons,
dropdowns, etc. for users to enter information.

Basic Syntax:
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="username" required>
13
<br><br>
<input type="submit" value="Submit">
</form>
Key Components:

a. Form Elements
1. Text Input (<input>):
o Collects single-line text input.
<input type="text" name="username" placeholder="Enter your name">
2. Password Field (<input>):
o Hides typed characters for security.
<input type="password" name="password">
3. Radio Buttons (<input>):
o Allows the user to select one option from a group.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
4. Checkbox (<input>):
o Enables selection of multiple options.
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="traveling"> Traveling
5. Dropdown (<select>):
o Provides a list of options in a dropdown menu.
<select name="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select>
6. Textarea (<textarea>):
o Allows multi-line text input.
<textarea name="comments" rows="4" cols="50"></textarea>
7. File Upload (<input>):
o Enables users to upload files.

14
<input type="file" name="resume">
8. Submit Button (<input>):
o Submits the form data.
<input type="submit" value="Submit">
9. Reset Button (<input>):
o Clears all form fields.
<input type="reset" value="Reset">
10. Button (<button>):
o Used to trigger custom actions via JavaScript.
<button type="button" onclick="alert('Hello!')">Click Me</button>

b. Input Types
HTML5 introduced several input types to enhance forms:
Input Type Purpose

Text Single-line text input.

email Validates email format.

number Accepts numeric input.

url Validates URLs.

tel Accepts phone numbers.

date Allows date selection.

time Allows time input.

color Provides a color picker.

range Enables input of numbers within a range (slider)

search Styling for s

c. Form Attributes
1. action: Specifies the URL where the form data is sent.

15
<form action="submit.php">
2. method: Defines how data is sent—GET (appends data to URL) or POST (secure, hides
data).
<form method="post">
3. target: Specifies how the response should be displayed (_blank, _self, etc.).
<form target="_blank">
4. autocomplete: Enables or disables browser autofill options.
<form autocomplete="on">
5. novalidate: Disables HTML5 validation when set.
<form novalidate>

Advantages Related to User Engagement via Forms

Here are ways how user interaction has improved using HTML forms:

1. Data Collection:.enqueueReusable("Allows users to fill out information and submit it to be


processed. This could be registrations, surveys, feedback, etc.")
2. For the validation it would be inline with HTML5, input textarea like emails, numbers can
be validated directly.
3. Personalization: Forms can be customized with CSS and Javascript to make them colorful
and attention-grabbing.
4. Answer: Forms allow for dropdowns and sliders, file uploads.
5. Real-time Feedback: Through JavaScript based on the form in which you can show
suggestions, error messages as the user fills the form making it more usable.

Conclusion

In this blog you will learn the elements input types and attributes of HTML FormIntroduction A
web page without an HTML Form is like a dish without salt. They simplify data collection,
validation, and submission processes through improved usability and functionality. Dynamic
responsive UI can be used with new features of HTML5 to create forms for any web app.

Answer 6:

JavaScript is a high-level dynamic and versatile scripting language primarily used for interactive
features on web applications. It is built on top of syntactical structures and data types, having

16
many operators to perform computations. JSON (JavaScript Object Notation), in contrast, is a
commonly used format for data exchange and storage that allows for easy parsing and
generation of data by JavaScript, making it ideally suited for quickly transferring data between
different pieces of code written in this language.

Basic syntax rules in JavaScript

1. Take 1: The JavaScript language is case-sensitive, so var my Var is not the same as var
MyVar.
2. Treat and Semicolons : Every line that you write in a java script code is a statement.
Semicolons you can omit 90% of the time, but they do add a layer of clarity and serve as a
marker to your intent.
3. Code Blocks: { … } ← begin and end blocks for functions, loops, and conditionals Matcher
4. Function Definition : In Function Declaration, the structure of the function is defined, which
may include two types of parameters, which are Variables which are declared with keywords
like var, let or const.
 var: Function scope (deprecated practice).
 let: block scoped variable for variables that must be re-assigned.
 Abstract: Block-scoped, used for constants that cannot be reassigned after being declared.

5. Comments:

 Single line: // This is a comment


 // This is a single line comment /* This is multi line comment */

If you follow these syntax rules then it makes your code cleaner and less prone to bugs.

Data Types in JavaScript

JavaScript has a few built-in data types:

1. Type — Numeric: For Integers and Floating Point Numbers

let age = 25;

let price = 10.99;

2. String — single or double quotes (backticks for template literals)

let message = "Hello, World!";

3. Boolean: True or false value.

17
let isAvailable = true;

4. This seems to me not surprising, depending on how much process it applies.

let data = null;

Undefined : A value that indicates a variable has been declared but has not yet been defined.

let result; // result now is undefined

5. Object − An unordered collection of key-value pair. Both Are Objects. There are special
objects: Arrays and functions
6. cost person = { name: "John", age: 30 }
7. Symbol (ES6+): A value of a new unique, immutable type used as an identifier.
8. BigInt (ES2020): Used for integers larger than what the Number type can accurately
represent

3. Operators in JavaScript
1. Arithmetic Operators (+, -, *, /, %, **): Perform mathematical operations.
let sum = 10 + 5; // sum = 15
2. Assignment Operators (=, +=, -=, *=, /=, %=, **=): Assign or update variable values.
let x = 10;
x += 5; // x = 15
3. Comparison Operators (==, ===, !=, !==, >, <, >=, <=): Compare two values, returning
a Boolean.
5 === '5'; // false (strict equality check)
4. Logical Operators (&&, ||, !): Combine or invert Boolean expressions.
(true && false); // false
5. Ternary Operator (condition ? valueIfTrue : valueIfFalse): A concise way of writing
conditional expressions.
let status = (age >= 18) ? "Adult" : "Minor";
4. JSON for Data Representation
JSON (JavaScript Object Notation) is a lightweight format used to represent structured data.
Its syntax resembles JavaScript objects but excludes functions, and it uses key-value pairs
enclosed in curly braces.
a. JSON Structure

18
{"name": "Alice",
"age": 25,
"skills": ["JavaScript", "HTML", "CSS"]}
b. Using JSON in JavaScript
1. Parsing JSON: Converting a JSON string into a JavaScript object using JSON.parse()
let Json String = '{"name":"Alice","age":25}';
let user Object = JSON. Parse(Json String);
console.log(userObject.name); // "Alice"
2. Stringifying Objects: Converting a JavaScript object into a JSON string using
JSONstringify()
let user = { name: "Bob", age: 30 };
let stringified = JSON.stringify(user);
console.log(stringified); // '{"name":"Bob","age":30}'

Conclusion

Now this may seem a bit like genesis but, with its complex data types and flexible operators all
at JavaScript's disposal, it has all the basic syntax rules that will all serve as building blocks to
writing client-side code. It is a suitable data representation format that enables communication
between the browser and the server. Parsing JSON strings into JavaScript objects and then
stringifying objects into JSON provides application developers with an easy interface to handle
complex data.

19

You might also like