Scribd
Upload
18 views

intro

Uploaded by

Keana Abigayl Quintos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

intro

Uploaded by

Keana Abigayl Quintos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Romel N.

Burlasa
BSCS-1C

Objective: This assignment is designed to encourage you to explore and understand the
basic concepts of HTML and CSS on your own. Answer the following questions based
on your research and interpretation to develop a foundational understanding of web
development basics.

1. What is HTML, and why is it essential in web development?


Explain the purpose of HTML in creating web pages and its role in structuring content.

HTML, or HyperText Markup Language, is the standard language for structuring content on the
web, specifying text, images, and links, among other things. HTML is essential in web
development as it forms the core of what a browser needs to understand and display web pages
What are HTML tags and elements? Give three examples of commonly used tags.
Define what tags and elements are and provide examples like <p>, <a>, and <img>.

HTML tags are the building blocks of an HTML document, used to define and structure content.
An HTML element consists of a start tag, content, and an end tag, with the tag name indicating
the type of content being defined.
Three commonly used tags are:
<h1> - Defines a top-level heading.
<p> - Defines a paragraph of text.
<a> - Defines a hyperlink that links to another page or resource.

2. What is the difference between an inline element and a block-level element?


Provide examples.
Discuss how inline elements like <span> differ from block-level elements like <div>.

The main difference between an inline element and a block-level element is how they behave in
terms of layout:
Block-level elements occupy the full width available, stacking vertically on the page, and start on
a new line. Examples include <div>, <h1>, and <p>.
Inline elements only take up as much width as necessary and do not cause a line break,
meaning they sit next to each other within the same line. Examples include <span>, <a>, and
<strong>.

3. What is the purpose of the <head> and <body> sections in an HTML document?
Explain the roles of the <head> for metadata and the <body> for page content.
The <head> section of an HTML document contains meta-information about the page, such as
the title, character encoding, links to stylesheets, and external resources, but it is not displayed
directly in the browser. The <body> section contains the actual content of the page, including
text, images, and other elements, which is displayed to users in the browser.

4. What is CSS, and how does it complement HTML in web development?


Describe CSS's purpose in styling web pages and its synergy with HTML.
CSS (Cascading Style Sheets) is a stylesheet language used to control the visual presentation
of HTML content, such as layout, colors, fonts, and spacing. It complements HTML by
separating the structure of a web page (HTML) from its design and style, allowing for more
flexible and efficient web development and easier maintenance.

5. What are the three ways to apply CSS to an HTML document? Provide examples
for each.
Discuss inline, internal (within <style> tags), and external (using a .css file) CSS.
There are three ways to apply CSS to an HTML document:
Inline CSS – Applied directly within an HTML element using the style attribute.
Example:
html
Copy code
<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>
Internal CSS – Defined within the <style> tag in the <head> section of the HTML document.
Example:
html
Copy code
<head>
<style>
p{
color: green;
font-size: 18px;
}
</style>
</head>
External CSS – Linked to the HTML document via an external .css file using the <link> tag.
Example:
html
Copy code
<head>
<link rel="stylesheet" href="styles.css">
</head>
In the external styles.css file:
css
Copy code
p{
color: red;
font-size: 20px;
}

6. What is the difference between an ID and a class in CSS? When should each be
used?
Explain the usage of id for unique elements and class for reusable styles.

An ID is unique and should be used to target a single element on a page, while a class can be
applied to multiple elements, making it ideal for styling groups of elements with shared
properties.

7. What are some common CSS properties used for text styling? Provide examples.
Mention properties like color, font-size, and text-align with sample values.
Common CSS properties used for text styling include:
color – Sets the color of the text.
Example:
css
Copy code
p{
color: blue;
}
font-family – Specifies the font type for the text.
Example:
css
Copy code
h1 {
font-family: Arial, sans-serif;
}

8. What is the box model in CSS, and what are its components?
Explain the box model's parts: margin, border, padding, and content.
The box model in CSS describes the rectangular structure of an element on a web page,
including its content and surrounding areas, which are crucial for layout and design. The
components of the box model are:
Content: The actual content of the element, such as text or images.
Padding: The space between the content and the element's border, used to create spacing
within the element.
Border: The area surrounding the padding (if present), defining the boundary of the element.
Margin: The outermost space around the element, creating distance between it and adjacent
elements.

9. Create a simple HTML structure with CSS to style a heading and a paragraph.
Write an example of HTML and CSS code where the heading is styled with a different font color and size, and the
paragraph has a background color and padding.
HTML and CSS Code:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML and CSS Example</title>
<style>
/* CSS to style the heading and paragraph */
h1 {
color: #4CAF50; /* Green color for heading */
text-align: center; /* Center align the heading */
font-family: 'Arial', sans-serif;
}

p{
font-size: 18px; /* Set font size for the paragraph */
color: #333; /* Dark gray color for text */
line-height: 1.6; /* Increase line height for better readability */
text-align: justify; /* Justify the paragraph text */
max-width: 600px; /* Set a maximum width for the paragraph */
margin: 0 auto; /* Center the paragraph */
}
</style>
</head>
<body>

<h1>Welcome to My Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi.</p>

</body>
</html>

You might also like