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

HTML Css Basics

Uploaded by

joeariascarranza
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTML Css Basics

Uploaded by

joeariascarranza
Copyright
© © All Rights Reserved
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