lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto"
      rel="stylesheet"
    />
  </head>
  <body>
    <div>Basic Element</div>
    <div style="position:fixed; bottom:60px; right:60px;">
      Element fixed relative to the screen
    </div>
  </body>
</html>

# Layout Basics

HTML (HyperText Markup Language) defines the structure and content of web pages, forming the skeleton of a webpage.

The layout refers to the `arrangement` of a page's structure and information.

<br />

## Review of Basic HTML Structure

An HTML document, which makes up a webpage, has the following basic structure:

```html title="Basic HTML Structure"
<!DOCTYPE html>
<html>
  <head>
    
    <title>Page Title</title>
  </head>
  <body>
    
  </body>
</html>
```

The `<head>` contains metadata and styles for the document, while the `<body>` contains the content visible to the user.

<br />

## Block Elements and Inline Elements

HTML elements are broadly divided into Block elements and Inline elements.

1. `Block Elements`: Block elements occupy the full width of the page and each element starts on a new line. Elements such as `<div>`, `<h1>`, and `<p>` are block elements.

```html title="HTML Block Elements"
<div>div is a block element</div>
<p>p is a block element</p>
```

<br />

2. `Inline Elements`: Inline elements take up only the space necessary for their content and display continuously without line breaks. Elements such as `<span>`, `<a>`, and `<img>` are inline elements.

```html title="HTML Inline Elements"
<span>span is</span> <span>an inline element.</span>
```

<br />

## Containers & Items

A container groups several elements into one unit. `<div>` and `<section>` are representative container elements.

```html title="div Container Element"
<div>
  <p>Hello!</p>
  <p>Nice to meet you!</p>
</div>
```

Elements that occupy the full width of the screen are `block elements`.

### An `inline element` occupies the full width of the screen.

Layout Basics

Review of Basic HTML Structure

Block Elements and Inline Elements

Containers & Items

An inline element occupies the full width of the screen.

An `inline element` occupies the full width of the screen.