HTML Tutorial - thehundredways

HTML, or HyperText Markup Language, is a standard markup language used to create web pages. It is a combination of HTML elements, which define the content and structure of a webpage, and HTML attributes, which provide additional information about the elements. Here is a simple example of an HTML page:

<!DOCTYPE html>

<html>


<head>


  <title>My Website</title>

</head>


<body>

  <h1>Welcome to my website!</h1>

<p>Here you will find information about me and my interests.</p>


</body>

</html>

The <!DOCTYPE html> the declaration tells the web browser that this is an HTML5 document. The <html> element is the root element of an HTML page and contains all the other elements. The <head> element contains information about the page, such as the title and links to stylesheets. The <body> element contains the visible content of the page.In this example, there are two HTML elements: an <h1> element for the main heading and a <p> element for the paragraph.

HTML Editors

There are many HTML editors available that can be used to create and modify HTML documents. Some popular options include:

Adobe Dreamweaver: A professional HTML editor developed by Adobe. It includes features such as a visual editor, code completion, and integration with other Adobe tools.
Notepad++: A free, open-source HTML editor for Windows. It has basic features such as syntax highlighting and code folding.
Aptana Studio: A free, open-source HTML editor that includes support for HTML, CSS, and JavaScript. It also has features such as a visual debugger and Git integration.
Sublime Text: A paid HTML editor with a clean interface and advanced features such as code highlighting and autocomplete.
Microsoft Visual Studio: A paid HTML editor with a powerful set of features including a visual designer, code refactoring, and integration with other Microsoft tools.

You can also use a simple text editor such as Notepad on Windows or TextEdit on Mac to create and edit HTML documents.Which HTML editor you choose depends on your needs and preferences. Some people prefer simple, lightweight editors, while others need a more powerful and feature-rich editor. It’s a good idea to try out a few different editors to see which one works best for you.

HTML ELEMENTS:

HTML elements are the building blocks of HTML pages. They define the content and structure of a webpage.There are many different HTML elements, but some of the most common ones include:

<h1> to <h6>: Headings
<p>: Paragraphs
<div>: A container for HTML elements
<span>: A container for inline elements
<a>: Links
<img>: Images
<form>: Forms
<table>: Tables
<ul>: Unordered lists
<ol>: Ordered lists
<li>: List items

HTML elements are usually represented by tags. For example, the <h1> element is represented by the <h1> tag. Most HTML elements have an opening tag and a closing tag. The closing tag has a forward slash before the element name, like this: </h1>. Some elements, like the <img> element, do not have a closing tag.Here is an example of an HTML page using some of these elements:

<!DOCTYPE html>


<html>


<head>

<title>My Website</title>


</head>

<body>

  <h1>Welcome to my website!</h1>

  <p>Here you will find information about me and my interests.</p>

<h2>About Me</h2>


  <p>I am a programmer and avid reader. I enjoy hiking and spending time outdoors.</p>

<h2>Interests</h2>


  <ul>
    <li>Programming</li>

    <li>Reading</li>

    <li>Hiking</li>

  </ul>

</body>


</html>

HTML TAGS:

HTML tags are the elements that define the structure and content of a webpage. Each HTML tag has a specific purpose and is used to format and layout the content of a webpage.Here are some common HTML tags:

<html>: Defines the root element of an HTML page
<head>: Contains information about the page, such as the title and links to stylesheets
<body>: Contains the visible content of the page
<h1> to <h6>: Headings
<p>: Paragraphs
<div>: A container for HTML elements
<span>: A container for inline elements
<a>: Links
<img>: Images
<form>: Forms
<table>: Tables
<ul>: Unordered lists
<ol>: Ordered lists
<li>: List items

HTML tags are usually written in lowercase, but they are not case-sensitive. Most HTML tags have an opening tag and a closing tag. The closing tag has a forward slash before the tag name, like this: </p>. Some tags, like the <img> tag, do not have a closing tag.Here is an example of an HTML page using some of these tags:

<!DOCTYPE html>


<html>

<head>


  <title>My Website</title>

</head>

<body>


  <h1>Welcome to my website!</h1>


  <p>Here you will find information about me and my interests.</p>


  <h2>About Me</h2>

<p>I am a programmer and avid reader. I enjoy hiking and spending time outdoors.</p>


  <h2>Interests</h2>

  <ul>

<li>Programming</li>


    <li>Reading</li>

<li>Hiking</li>

</ul>

</body>

</html>

INLINE ELEMENTS:

Inline elements are HTML elements that are placed inline with the text, rather than on their own line like block-level elements. Inline elements only take up as much width as necessary and do not force a new line after the element.Some common inline elements include:

<a>: Links
<img>: Images
<span>: A container for inline elements
<button>: Buttons
<input>: Form input fields
<label>: Labels for form elements
<select>: Dropdown menus

Here is an example of inline elements being used in an HTML page:

<!DOCTYPE html>

<html>

<body>

  <p>Click <a href="https://www.example.com">here</a> to visit the Example website.</p>

  <p>Here is an image: <img src="image.jpg" alt="A description of the image">.</p>

  <p>This is some <span style="color:red">red</span> text.</p>

<form>


    <label for="email">Email:</label>


    <input type="email" id="email" name="email">


    <button type="submit">Submit</button>


  </form>


</body>

</html>

In this example, the <a>, <img>, and <span> elements are inline elements because they are placed inline with the text. The <form>, <label>, and <button> elements are also inline elements because they do not force a new line after the element.

SEMANTIC MARKUP:

Semantic markup is the use of HTML tags to provide meaning to the content of a webpage. By using semantic tags, you can describe the purpose and structure of the content on your webpage, which makes it easier for search engines to understand and for users to navigate.Here are some examples of semantic HTML tags:

<header>: A container for the header content of a webpage
<nav>: A container for the navigation links of a webpage
<main>: A container for the main content of a webpage
<article>: A container for a self-contained piece of content, such as a blog post
<section>: A container for a section of content
<aside>: A container for content that is related to the main content, but not essential
<footer>: A container for the footer content of a webpage

Using semantic markup can make your webpage more accessible, search engine friendly, and easier to maintain.Here is an example of an HTML page using semantic tags:

<!DOCTYPE html>


<html>

<head>

  <title>My Website</title>

</head>


<body>


  <header>

    <h1>My Website</h1>

    <nav>

      <ul>

<li><a href="#">Home</a></li>


        <li><a href="#">About</a></li>


        <li><a href="#">Contact</a></li>


      </ul>


    </nav>

  </header>

<main>

<h2>Welcome to my website!</h2>


    <p>Here you will find information about me and my interests.</p>

    <article>
      <h3>About Me</h3>
      <p>I am a programmer and avid reader. I enjoy hiking and spending time outdoors.</p>
    </article>
    <section>


      <h3>Interests</h3>


      <ul>

<li>Programming</li>


        <li>Reading</li>


        <li>Hiking</li>

      </ul>

    </section>

  </main>

  <aside>

<h4>Related Links</h4>


    <ul>


      <li><a href="#">Link 1</a></li>


      <li><a href="#">Link 2</a></li>

<li><a href="#">Link 3</a></li>


    </ul>

  </aside>

  <footer>
    <p>Copyright 2021 My Website</p>
  </footer>


</body>

</html>

HTML ENTITIES:

HTML entities are special characters that can be used in HTML to display symbols or characters that are not part of the standard ASCII character set.For example, the < entity is used to display the < symbol. The > entity is used to display the > symbol. The & entity is used to display the & symbol.Here is an example of using HTML entities in an HTML page:

<!DOCTYPE html>

<html>

<body>

<p>The < symbol is used in HTML to indicate the start of an element. It is written as <</p>

<p>The > symbol is used in HTML to indicate the end of an element. It is written as ></p>

<p>The & symbol is used in HTML to indicate the start of an entity. It is written as &</p>

</body>

</html>

There are many other HTML entities that can be used to display a variety of characters and symbols. You can find a complete list of HTML entities on the W3C website.I hope this helps! Do you have any other questions about HTML entities?

HTML TABLES:

HTML tables are used to display tabular data on a webpage. They consist of rows and columns, and each cell in the table can contain text or other HTML elements.Here is an example of an HTML table:

<table>

  <tr>

<th>Name</th>

<th>Age</th>

<th>City</th>

  </tr>
  <tr>

<td>Alice</td>

    <td>25</td>

    <td>New York</td>

  </tr>
  <tr>

    <td>Bob</td>

<td>30</td>

    <td>Chicago</td>

  </tr>
  <tr>

<td>Eve</td>

    <td>35</td>

<td>San Francisco</td>

</tr>

</table>

In this example, the <table> element defines the table, and the <tr> elements define the rows. The <th> elements define the table headings, and the <td> elements define the cells in the table.You can use CSS styles to control the appearance of your table, such as the color and width of the table borders, the background color of the cells, and the text alignment.Here is an example of using CSS styles to style an HTML table:

<style>

  table {

    border-collapse: collapse;
    width: 100%;

}

th, td {

    text-align: left;
    padding: 8px;

tr:nth-child(even){

background-color: #f2f2f2

th {

    background-color: #4CAF50;
    color: white;

</style>

<table>


  <tr>
    <th>Name</th>


    <th>Age</th>

<th>City</th>


  </tr>


  <tr>
    <td>Alice</td>


    <td>25</td>


    <td>New York</td>

</tr>


  <tr>


    <td>Bob</td>


    <td>30</td>

    <td>Chicago</td>

  </tr>

  <tr>

<td>Eve</td>


    <td>35</td>

<td>San Francisco</td>


  </tr>


</table>

ELEMENTS:

<table>
<td>
<tr>
<th>
<thead>
<tbody>
<tfoot>
<colgroup>
<caption>

HTML Forms:

HTML forms are used to collect user input. They are an essential part of the web, as they allow users to interact with websites in various ways.Here is an example of a simple HTML form:

<form>

<label for="name">Name:</label>

<br>

<input type="text" id="name" name="name"> <br>

  <label for="email">Email:</label><br>

  <input type="email" id="email" name="email"><br>

  <input type="submit" value="Submit">

</form>

This form has two text inputs, one for the user’s name and one for their email address, and a submit button. When the user fills out the form and clicks the submit button, the form’s data is sent to the server for processing.There are many other types of form elements that you can use, such as radio buttons, checkboxes, and dropdown lists. You can also use HTML5 form validation to ensure that users enter the correct type of data.If you have any further questions about HTML forms, just let me know!

CREATING FORMS:

The <form> element itself is a shell or container that doesn’t have any visual impact.
We then fill the form with a collection of input, checkboxes, buttons, etc.