ck
ReviewsPricingJobsBlogRegister
Master AI & Build your First Coding Portfolio with SkillReactor | Sign Up Now

Learn HTML

1.1 What Is HTML

1.2 Basic Structure Of An HTML Document

2.1 Headings

2.2 Paragraphs

2.3 Input Fields

2.4 Buttons

2.5 Links

2.6 Lists

3.1 Adding Images

3.2 Adding Video And Audio

Lesson 4 - Writing Your First HTML Page

4.1 Writing Your First HTML Page

5.1 What Is CSS

5.2 How CSS Works With HTML

5.3 CSS Syntax

6.1 Types Of CSS Selectors

6.2 Common CSS Properties

Lesson 7.1 - Applying CSS To HTML

8.1 Understanding The Box Model

8.2 CSS Box Model Properties

9.1 CSS Positioning

9.2 Float And Clear Properties

10.1 Introduction To Flexbox

10.2 Advance Flexbox Styles

Lesson 4 - Writing Your First HTML Page

4.1 Writing Your First HTML Page

In this lesson, we're going to create a simple webpage that incorporates everything we've learned so far.

Let's follow the example below:

<!DOCTYPE html>
<html>
<head>
  <title>List of Fruits</title>
</head>
<body>
  <h1>List of Fruits Page</h1>
  <p>This page contains a list of fruits.</p>
  <img src="https://www.fruitsmith.com/pub/media/mageplaza/blog/post/o/n/one_seed_fruits.png" alt="Fruits" width="350" height="200">
  <h2>My Favorite Fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
  </ul>
  <button>Click Me!</button>
</body>
</html>

In this example:

  • We start with <!DOCTYPE html>, which specifies the document type and is necessary for browsers to understand the version of HTML being used.
  • Inside <html>, we have <head> and <body> sections. The <head> contains metadata such as the webpage title, set by <title>List of Fruits</title>.
  • Inside <body>, we have structured our content:
    • <h1> and <p> tags provide a heading and a paragraph introducing the page.
    • <img> displays an image of fruits with specified dimensions (width="350" and height="200"), enhancing visual appeal.
    • <h2> and <ul> with <li> items create a list titled "My Favorite Fruits".
    • Finally, a <button> element is included for interactivity.

This basic structure demonstrates how to organise content within HTML tags to create a cohesive webpage. In our next lesson, we'll explore CSS to enhance the design and style of our page.

PreviousNext