←

Web Development

HTML Crash Course for Beginners 2024

HTML Crash Course for Beginners 2024

HTML, or HyperText Markup Language, is the standard language used to create and design web pages. It serves as the backbone of every webpage on the internet.

Algogenz logo

9m · 6min read

Section 1: Introduction to HTML

1.1 What is HTML?

HTML, or HyperText Markup Language, is the standard language used to create and design web pages. It serves as the backbone of every webpage on the internet. HTML uses a system of tags to structure content, allowing browsers to interpret and display information.


1.2 Why Learn HTML?

Learning HTML is essential for anyone interested in web development. It provides the foundation for creating web pages and understanding how information is structured on the web. Even if you plan to use more advanced tools and languages later on, a solid grasp of HTML is fundamental.


1.3 Setting Up Your Environment

Before diving into coding, let's set up our coding environment. All you need is a simple text editor like Notepad (Windows) or TextEdit (Mac). Alternatively, you can use more advanced editors such as Visual Studio Code or Atom.


Section 2: Basic HTML Structure

2.1 The Anatomy of an HTML Document

Let's break down the essential components of an HTML document:


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Your Page Title</title>
</head>
<body><!-- Your content goes here -->
</body>
</html>
  • <!DOCTYPE html>: This declaration defines the document type and version of HTML you are using. It helps browsers interpret your code correctly.
  • <html lang="en">: The root element of the HTML document, indicating the language as English.
  • <head>: This section contains meta-information about the HTML document, such as character encoding and viewport settings.
  • <meta charset="UTF-8">: Sets the character encoding to UTF-8, ensuring proper rendering of text in different languages.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Helps with responsive design on various devices.
  • <title>: Sets the title of the webpage, appearing in the browser tab.
  • <body>: Contains the visible content of the webpage.


Section 3: Text and Headings

3.1 Adding Text

In HTML, we use the <p> (paragraph) tag to define paragraphs:


<p>This is a paragraph.</p>
  • <p>: Defines a paragraph, grouping text to make it more readable and structured.


3.2 Headings

HTML provides six levels of headings, from <h1> to <h6>:


<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ... -->
<h6>This is a Heading 6</h6>

Headings help structure the content, with <h1> being the highest level and <h6> the lowest. They are crucial for accessibility and search engine optimization.


Section 4: Lists

4.1 Ordered List

Use the <ol> (ordered list) and <li> (list item) tags to create ordered lists:


<ol><li>First item</li><li>Second item</li><!-- ... -->
</ol>
  • <ol>: Defines an ordered list, where each item is numbered.
  • <li>: Represents a list item, indicating individual elements in the list.


4.2 Unordered List

For unordered lists, use the <ul> (unordered list) tag:


<ul><li>Item 1</li><li>Item 2</li><!-- ... -->
</ul>
  • <ul>: Defines an unordered list, where each item is bulleted.


Section 5: Links and Images

5.1 Creating Links

Hyperlinks are created using the <a> (anchor) tag:


<a href="https://www.example.com" target="_blank">Visit Example.com</a>
  • <a>: Creates a hyperlink, allowing users to navigate to another page or resource.
  • href: Specifies the URL (web address) the link points to.
  • target="_blank": Opens the link in a new browser tab for user convenience.


5.2 Adding Images

To include images, use the <img> tag:


<img src="image.jpg" alt="Description of the image">
  • <img>: Embeds an image on the webpage.
  • src: Specifies the image file, including the file path or URL.
  • alt: Provides alternative text for the image, crucial for accessibility and SEO.


Section 6: Forms

6.1 Basic Form Structure

Forms allow users to interact with your webpage. Here's a simple example:


<form><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>
  • <form>: Creates an HTML form, facilitating user input.
  • <label>: Labels form elements, improving accessibility.
  • <input>: Represents an input field, with various types like text and password.
  • type="text": Creates a text input for users to type information.
  • type="password": Creates a password input for secure data entry.
  • type="submit": Creates a submit button to send the form data.


6.2 Client-side Form Validation

Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation and helps ensure data submitted matches the requirements outlined in the various form controls. The simplest HTML validation feature is the required attribute. To make an input mandatory, add this attribute to the element. When this attribute is set, the form won't submit, displaying an error message on submission when the input is empty 1.


<form><label for="choose">Would you prefer a banana or cherry? (required)</label><input id="choose" name="i-like" required /><button>Submit</button>
</form>
  • <form>: Creates an HTML form.
  • <label for="choose">: Labels the input field "choose".
  • <input id="choose" name="i-like" required />: Creates an input field with id "choose", name "i-like", and sets it as required.


Section 7: Additional HTML Elements

7.1 Tables

Tables are used to organize data in rows and columns:


<table><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr><!-- ... -->
</table>
  • <table>: Defines a table to structure data.
  • <tr>: Represents a table row, containing cells.
  • <th>: Defines a table header cell, typically used in the first row.
  • <td>: Represents a table data cell, containing the actual data.


7.2 Divisions

Divisions (<div>) are used for grouping and styling:


<div> <!-- Content goes here --> </div>
  • <div>: Defines a division or a section, allowing you to group and style content.


Section 8: Best Practices

8.1 Indentation and Readability

While HTML doesn't require indentation, it greatly improves code readability. For example:


<div>
 <p>This is indented for clarity.</p>
</div>

Indentation makes your code more maintainable and easier to understand.


8.2 Comments

Use comments to explain your code:


<!-- This is a comment explaining something -->

Comments are not displayed on the webpage but help you and others understand your code better.


8.3 Semantic HTML

Use semantic HTML tags to add meaning to your content:

  • <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>: These semantic tags provide context to browsers and developers about the structure of your content, improving accessibility and SEO.


Section 9: Advanced Form Validation

Beyond the basics of HTML form validation, you might want to add more complex checks to ensure that the data entered by users meets certain criteria. This can be done either using HTML5 built-in functionality or JavaScript.


9.1 Using HTML5 Built-in Functionality

HTML5 provides several built-in validation attributes that you can use to enforce specific rules on your form fields. For instance, you can use the pattern attribute to enforce a regular expression match, or the min and max attributes to limit numeric input. Here's an example:


<form action="#">
 Email: <input type="email" name="email" pattern=".+@.+\..+" required>
 Age: <input type="number" name="age" min="18" max="99"><input type="submit">
</form>

In this example, the email field requires a valid email address, and the age field requires a number between 18 and 99.


In conclusion, HTML is a fundamental language for creating and designing web pages. Understanding its basic structure, tags, and best practices is key to becoming proficient in web development. This includes knowledge of text and headings, lists, links and images, forms, tables, divisions, and the importance of indentation and comments

Related Tags

HTMLWeb DevelopmentFrontend

Recommended

TypeScript Types vs Interfaces

4m · 5min read

Web Development

TypeScript Types vs Interfaces

Types vs Interfaces: Types in TypeScript are more flexible and can define a wider range of data types, including primitives, unions, intersections, tuples, and more, while interfaces are primarily used to describe the shape of objects and support declaration merging and extending, making them ideal for object-oriented programming and complex data structures

The this Keyword in JavaScript

5m · 3min read

Web Development

The this Keyword in JavaScript

The this keyword in JavaScript is a reference to the object that a function is a property of. It's a fundamental concept in JavaScript, especially in object-oriented programming. Unlike in languages like Java, C#, or PHP, where this typically refers to the current instance of the class, JavaScript's this behaves differently and can be quite versatile.

Next pages:

1

2

3

4