Scribd
Upload
3 views2 pages

Basic Introduction To HTML and CSS

The document provides an introduction to HTML and CSS, explaining their roles in web development. It outlines the basic structure of an HTML document, including elements like headings, paragraphs, links, and images, as well as how to style them using CSS. Key examples and explanations are provided for each HTML element and CSS styling technique.

Uploaded by

baryvatonomena.esa
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
3 views2 pages

Basic Introduction To HTML and CSS

The document provides an introduction to HTML and CSS, explaining their roles in web development. It outlines the basic structure of an HTML document, including elements like headings, paragraphs, links, and images, as well as how to style them using CSS. Key examples and explanations are provided for each HTML element and CSS styling technique.

Uploaded by

baryvatonomena.esa
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/ 2

🌐 Introduction to HTML and CSS

HTML (HyperText Markup Language) is the standard language for creating web pages. It
structures content using various elements such as headings, paragraphs, links, images, and more.
CSS (Cascading Style Sheets) is used to style HTML elements, making them visually appealing.

🏠 Basic Structure of an HTML Document

Every HTML page follows a basic structure. Here’s a simple HTML document:

<!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 Website</h1>
<p>This is my first web page using HTML.</p>
</body>
</html>

Explanation:

 <!DOCTYPE html> – Declares the document as HTML5.


 <html> – The root element that contains all HTML code.
 <head> – Contains meta-information (not displayed on the webpage).
 <meta charset="UTF-8"> – Defines character encoding.
 <title> – Sets the title of the webpage.
 <body> – Contains the visible content of the page.

📝 Paragraphs in HTML

A paragraph is created using the <p> tag. Example:

<p>This is a paragraph in HTML.</p>

🗀 Headings in HTML

Headings range from <h1> (largest) to <h6> (smallest):

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>

Headings help structure content and improve SEO (Search Engine Optimization).

🔗 Links in HTML
Links are created using the <a> tag:

<a href="https://www.example.com">Visit Example</a>

Explanation:

 href="URL" – Specifies the link destination.


 The clickable text is placed between <a> and </a>.

🎮 Images in HTML

To display an image, use the <img> tag:

<img src="image.jpg" alt="A description of the image">

Explanation:

 src="image.jpg" – Defines the image file path.


 alt="description" – Provides alternative text (for accessibility and SEO).

🎨 Introduction to CSS

CSS (Cascading Style Sheets) is used to style HTML elements, you can write the following code
inside of the body or the head. Example:

<style>
body {
background-color: lightblue;
}
h1 {
color: red;
font-size: 30px;
}
p{
color: green;
font-family: Arial, sans-serif;
}
</style>

This CSS:

 Changes the background color of the page.


 Styles the heading (h1) with red color and larger text.
 Changes the paragraph (p) text color to green and applies a specific font.

You might also like