Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
11 views

HTML Css Basics

Uploaded by

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

HTML Css Basics

Uploaded by

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

Introduction to HTML and CSS

1. HTML: The Structure of the Web


HTML (HyperText Markup Language) is the standard markup language for
creating web pages. It describes the structure of a web page semantically.

1.1 Basic HTML Structure


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph.</p>
</body>
</html>

1.2 Key HTML Elements


• Headings: <h1> to <h6>
• Paragraphs: <p>
• Links: <a href="url">link text</a>
• Images: <img src="image.jpg" alt="description">
• Lists:
– Unordered: <ul> with <li> items
– Ordered: <ol> with <li> items
• Div: <div> for grouping elements
• Span: <span> for inline styling

1.3 Semantic HTML5 Elements


• <header>: Introductory content or navigational links
• <nav>: Navigation links
• <main>: Main content of the document
• <article>: Self-contained composition
• <section>: Standalone section of a document
• <aside>: Content tangentially related to the content around it
• <footer>: Footer for its nearest sectioning content or sectioning root
element

1
2. CSS: Styling the Web
CSS (Cascading Style Sheets) is used to describe the presentation of a document
written in HTML.

2.1 CSS Syntax


selector {
property: value;
}

2.2 Ways to Include CSS


1. Inline CSS:
<p style="color: blue;">This is blue text.</p>
2. Internal CSS:
<head>
<style>
p { color: blue; }
</style>
</head>
3. External CSS (preferred method):
<head>
<link rel="stylesheet" href="styles.css">
</head>

2.3 CSS Selectors


• Element Selector: p { color: blue; }
• Class Selector: .classname { color: green; }
• ID Selector: #idname { color: red; }
• Attribute Selector: [attribute="value"] { color: purple; }

2.4 Box Model


Every element in web design is a rectangular box. CSS uses the box model to
determine how elements are sized and spaced.
• Content: The actual content of the box
• Padding: Clear area around the content (inside the border)
• Border: Goes around the padding and content
• Margin: Clear area outside the border
div {
width: 300px;
padding: 10px;

2
border: 5px solid black;
margin: 20px;
}

2.5 Flexbox and Grid


Modern CSS layout techniques:
• Flexbox: For one-dimensional layouts (rows or columns)
.container {
display: flex;
justify-content: space-between;
}
• Grid: For two-dimensional layouts (rows and columns)
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}

2.6 Responsive Design


Making web pages look good on all devices:
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}

3. Putting It All Together


Here’s a simple HTML file with embedded CSS to demonstrate these concepts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML and CSS Demo</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;

3
}
header {
background-color: #f4f4f4;
padding: 1rem;
text-align: center;
}
.container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.box {
background-color: #ddd;
border: 1px solid #999;
padding: 10px;
width: 30%;
}
@media screen and (max-width: 600px) {
.container {
flex-direction: column;
}
.box {
width: 100%;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>
<main>
<section class="container">
<div class="box">
<h2>Box 1</h2>
<p>This is the content for box 1.</p>
</div>
<div class="box">
<h2>Box 2</h2>
<p>This is the content for box 2.</p>
</div>
<div class="box">
<h2>Box 3</h2>
<p>This is the content for box 3.</p>
</div>

4
</section>
</main>
</body>
</html>
This example demonstrates a responsive layout using flexbox, with media queries
for mobile devices. It showcases the structure provided by HTML and the styling
capabilities of CSS.

You might also like