Lesson-1-Basic-Structure-and-Run-the-Code

The basic structure of an HTML document is fundamental to understanding how to create web pages.

1.1. Essential Components

Here’s a concise outline of the essential components of an HTML document. section contains the visible content that users will see when they visit your web page.

<!DOCTYPE> Declaration:
- The <!DOCTYPE> declaration is the first line of an HTML document. It specifies the HTML version being used. For modern web development, you should use the HTML5 declaration: <!DOCTYPE html>.
<html> Element:
- The <html> element serves as the root element of the HTML document. All other elements are enclosed within it.
<head> Element:
- Inside the <html> element, the <head> element contains metadata and information about the document. This includes the title of the page, character encoding, and links to external resources like stylesheets and scripts.
<title> Element:
- Inside the <head> section, the <title> element defines the title of the web page, which appears in the browser’s title bar or tab.
<body> Element:
- The <body> element contains the main content of the web page, including text, images, links, and other elements that are visible to the user.

Here’s a basic HTML template that puts these elements together.

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <!-- Your web page content goes here -->
    <h1>Welcome to My Web Page</h1>
    <p>This is a sample paragraph of text.</p>
    <a href="https://www.w3schools.com">Visit www.w3schools.com</a>
    <!-- Add more content as needed -->
</body>
</html>

1.2. Run the Code

Do following steps in sequence.

Open any text editor
Paste above code
Save the file by setting some name and with extension “.html”
Open the file with any browser

1.3. Introduction about Inline CSS

Inline CSS, also known as “inline styles,” is a way to apply CSS (Cascading Style Sheets) directly to individual HTML elements within an HTML document. Unlike external and internal/embedded stylesheets, which apply styles globally to multiple elements, inline CSS is specific to a single element. It’s defined within the HTML tag itself, using the style attribute.

Here’s an example of how inline CSS is used:

<p style="color: blue;">This is a paragraph with inline CSS.</p>

Inline CSS involves using CSS properties and values directly within the HTML tags. Here are some common CSS properties that can be applied inline to HTML elements using the style attribute.

1. background-color

<div style="background-color: #FFCC00;">This has a yellow background.</div>

2. font-size

<h2 style="font-size: 24px;">This is a larger heading.</h2>

3. font-family

<p style="font-family: Arial, sans-serif;">This text uses the Arial font.</p>

4. text-align: Values may be either left, right or center.

<div style="text-align: center;">Centered text</div>

5. border

<div style="border: 1px solid #000;">This has a 1px solid black border.</div>

6. padding and margin

<div style="padding: 10px; margin: 5px;">Content with padding and margin.</div>

7. text-decoration

<p style="text-decoration: underline;">This text is underlined.</p>

8. line-height

<p style="line-height: 1.5;">This text has increased line spacing.</p>

9. text-transform: Its value may be either uppercase, lowercase, or capitalized.

<p style="text-transform: uppercase;">This text is in all uppercase letters.</p>

Next Lesson

1.1. Essential Components

1.2. Run the Code

1.3. Introduction about Inline CSS

Share this: