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" />
    <title>Website Title</title>
    <meta name="description" content="Website Description" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans"
      rel="stylesheet"
    />
    
    <link rel="stylesheet" href="sample_styles.css" />

    
    <style>
      h2 {
        color: green;
      }
      button {
        background-color: blue;
        border: none;
        color: white;
        padding: 10px 15px;
        cursor: pointer;
      }
    </style>

    <script>
      function greet() {
        alert('Hello');
      }
    </script>
  </head>

  <body>
    <h2>Welcome to Your First Step in Web Coding!</h2>
    <p>This is the body of the website.</p>
    <button onclick="greet();">Click the Button 😀</button>
  </body>
</html>

# head Tag

An HTML document defining a web page is divided into the following two parts:

1. `<head>`: Provides information (metadata) about the webpage to search engines and browsers

2. `<body>`: Defines the content to be displayed on the webpage

Content defined by the `<head>` tag is not visible on the web browser screen but includes meta information such as the title, description, keywords, and styles of a webpage.

<br />

## Key Elements within the head Tag

### 1. title Element

Defines the title of the webpage. This title is displayed on the browser's tab.

```html title="Defining a Webpage Title"
<head>
  <title>My First Webpage</title>
</head>
```

<br />

### 2. meta Element

Defines metadata about the webpage for search engines.

For example, the meta tag can be used to set the webpage's character encoding (converting characters into a form that computers can use), viewport (the visible area of the webpage), description, and more.

```html title="Defining Metadata"
<head>
  
  <meta charset="UTF-8" />

  
  <meta name="description" content="Website Description" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
```

<br />

### 3. link Tag

Used to link an external resource to the webpage. Commonly used to import fonts or link stylesheets (CSS files defining the style of the webpage).

```html title="Linking External Resources"
<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans"
  rel="stylesheet"
/>
```

<br />

### 4. script Tag

Used to load JavaScript files or code, acting as the brain of the website.

JavaScript controls the behavior of the page (e.g., actions on button clicks).

```html title="Loading a JavaScript File"
<head>
  <script src="script.js"></script>
</head>
```