HTML for Beginners

HTML for beginners
Share it :

I. Introduction to HTML

A. What is HTML?

HTML, short for HyperText Markup Language, is the backbone of the web. It’s a markup language used to structure and present content on websites. Think of HTML as the skeleton of a web page, providing the structure and organization for text, images, links, and more.

B. Setting Up Your Workspace

Before we dive into HTML, let’s set up our workspace. You can use any text editor to write HTML code. Here’s a simple example using Notepad (Windows) or TextEdit (macOS):

  1. Open Notepad/TextEdit: Launch your text editor.
  2. Create a New HTML File: Click “File” > “New” to create a new document.
  3. Write HTML Code: Add your HTML code, for instance:
   <!DOCTYPE html>
   <html>
   <head>
       <title>My First HTML Page</title>
   </head>
   <body>
       <h1>Welcome to My Page</h1>
       <p>This is a simple HTML page.</p>
   </body>
   </html>
  1. Save Your File: Save it as “index.html” (or any name you prefer) with the “.html” extension.
  2. View in a Browser: Open your web browser and drag the HTML file into the browser. You’ll see your first HTML page.

II. HTML Basics

A. Structure of an HTML Document

Every HTML document follows a structure. Here’s what it looks like:

  • <!DOCTYPE html>: Declares the HTML version.
  • <html>: The root element.
  • <head>: Contains metadata about the page.
  • <title>: Sets the page’s title.
  • <body>: Holds the visible content.
Avada theme Review: the best WordPress theme?

B. HTML Elements and Tags

HTML uses elements enclosed in angle brackets (<>). For example, <p> is a paragraph element, and <a> is an anchor element for links.

C. Headings, Paragraphs, and Line Breaks

HTML provides tags for headings (<h1> to <h6>), paragraphs (<p>), and line breaks (<br>) for formatting text.

III. Text Formatting

A. Bold and Italic Text

  • To make text bold, use <strong> or <b> tags.
  <p>This is <strong>bold text</strong>.</p>
  • To make text italic, use <em> or <i> tags.
  <p>This is <em>italicized text</em>.</p>

B. Lists (Ordered and Unordered)

HTML offers ordered lists (<ol>) and unordered lists (<ul>). Here’s how they work:

  • Ordered List:
  <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
  </ol>
  • Unordered List:
  <ul>
      <li>Item A</li>
      <li>Item B</li>
      <li>Item C</li>
  </ul>

Hyperlinks are created using the <a> element. You can link to external websites or create internal links within your page.

  • External Link:
  <a href="https://www.example.com">Visit Example.com</a>
  • Internal Link:
  <a href="#section1">Jump to Section 1</a>
Astra Theme Review: Power of Astra WordPress Theme

IV. Images

A. Adding Images

Adding images to your HTML document is straightforward. Use the <img> tag with the src attribute to specify the image file’s location.

<img src="image.jpg" alt="Image Description">

B. Image Attributes (src, alt)

  • The src attribute defines the image source (file path or URL).
  • The alt attribute provides alternative text for accessibility and displays when the image can’t load.

V. Forms

A. Creating Forms

Forms are essential for user input on websites. Use the <form> element to create a form, and add form controls like text fields, radio buttons, checkboxes, and buttons.

<form action="submit.php" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <br>
    <input type="submit" value="Submit">
</form>

B. Input Fields and Buttons

In the example above, we used <input> elements to create text fields and buttons. The type attribute specifies the type of input.

VI. Tables

A. Building Tables

Tables are used for displaying data in rows and columns. Here’s a basic table structure:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

B. Rows and Cells

  • <tr>: Table row.
  • <th>: Table header cell.
  • <td>: Table data cell.

VIII. Project: Creating a Simple Web Page

For practice, create a simple web page using what you’ve learned. Combine headings, paragraphs, lists, images, and links to build your page.

Beaver Builder vs Divi: A Comprehensive Comparison

IX. Conclusion and Next Steps

In this article, we’ve covered the fundamentals of HTML, including its structure, text formatting, lists, images, forms, tables, and basic CSS. Congratulations it was your first steps in web development!

For further learning, explore advanced HTML topics, CSS for styling, and JavaScript for interactivity.

Share it :