Introduction To HTML and CSS For Web Development
Uploaded by
Turuczko RobertIntroduction To HTML and CSS For Web Development
Uploaded by
Turuczko RobertGetting Started with HTML
What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It
describes the structure of a webpage using markup.
Basic Structure of an HTML Document
An HTML document is made up of various elements, each represented by tags. Here's a simple
HTML document structure:
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>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my first webpage.</p>
</body>
</html>
Key HTML Elements
<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the document.
<title>: Specifies the title of the webpage (displayed in the browser tab).
<body>: Contains the content of the webpage.
<h1> to <h6>: Header tags, with <h1> being the highest (most important) and <h6> the
lowest (least important).
<p>: Paragraph tag for blocks of text.
Creating Your First Webpage
1. Open a text editor (like Notepad on Windows or TextEdit on Mac) or a code editor like
VS Code.
2. Type the basic HTML structure provided above.
3. Save the file with a .html extension, for example, index.html.
4. Open the saved HTML file in a web browser to view your first webpage.
Styling with CSS
What is CSS?
CSS (Cascading Style Sheets) is a language used to describe the presentation of an HTML
document. It controls the layout of multiple web pages all at once.
Adding CSS to HTML
There are three ways to apply CSS to HTML: inline, internal, and external.
Inline CSS
Inline CSS is used to apply a unique style to a single HTML element. Use the style attribute
inside the HTML tag.
html
Copy code
<p style="color: blue;">This is a blue paragraph.</p>
Internal CSS
Internal CSS is used to define styles for a single HTML document. Use the <style> element
inside the <head> section.
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>Styled Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Website</h1>
<p>This is a blue paragraph of text on my styled webpage.</p>
</body>
</html>
External CSS
External CSS is used to define styles for multiple HTML pages. Create a separate CSS file and
link it to your HTML document using the <link> element.
1. Create a file named styles.css and add the following CSS code:
css
Copy code
body {
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
p {
color: blue;
}
2. Link the CSS file in your HTML document:
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>Styled Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Styled Website</h1>
<p>This is a blue paragraph of text on my styled webpage.</p>
</body>
</html>
Advanced HTML and CSS Concepts
HTML Forms
Forms are used to collect user input. An HTML form can contain various input elements like text
fields, checkboxes, radio buttons, and submit buttons.
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>Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
CSS Layouts
CSS provides several layout techniques to create responsive web designs.
Flexbox
Flexbox is a layout model that allows items to adjust and distribute space within a container.
css
Copy code
.container {
display: flex;
justify-content: space-between;
}
.item {
background-color: lightblue;
padding: 10px;
margin: 5px;
border: 1px solid #ccc;
}
html
Copy code
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
Grid
CSS Grid Layout is a two-dimensional layout system for the web.
css
Copy code
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
html
Copy code
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
Conclusion
You've now learned the basics of HTML and CSS, including how to create a simple webpage,
style it, and add advanced elements like forms and layout techniques. These skills are essential
for building modern, responsive websites. Keep practicing and exploring more advanced features
of HTML and CSS to enhance your web development skills.
Happy coding!
