Alters Dev - Easier and Faster

HTML 101

  • On October 04, 2023
  • By Sam

HTML is the standard language used to create web pages. It provides the basic structure of content on the web, such as text, images, links, forms, and other elements. Here's a basic overview of HTML.

Step 1: HTML Tags

  • HTML documents consist of elements represented by tags enclosed in angle brackets (`< >`)
  • Tags usually come in pairs: opening tag (`<tag>`) and closing tag (`</tag>`)
  • Elements can be nested within other elements
Example:
html
            
<tagname>Content goes here</tagname>

Step 2: Document Structure

  • `<!DOCTYPE html>`: Declaration defining the document type and version (HTML5 in this case)
  • `<html>`: Root element, containing all other HTML elements on the page.
  • `<head>`: Contains meta-information about the HTML document, like title and links to stylesheets
  • `<body>`: Contains the content of the web page, such as text, images, links, etc

Practices

Create a file index.html and copy below code to inside. Double click the file after saved. It will display as Fig 1 - HTML Sample

Example:
html
            
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
HTML Sample
Fig.1 - HTML Sample

Step 3: Common HTML Elements

  • Headings: `<h1>` to `<h6>`: Defines headings of different levels
  • Paragraphs: `<p>`: Defines a paragraph of text
  • Links: `<a href="url">Link Text</a>`: Creates hyperlinks to other web pages
  • Lists:
    `<ul>`: Unordered list
    `<ol>`: Ordered list
    `<li>`: List item
Example:
html
            
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
  • Images: `<img src="image-url" alt="Description">`: Embeds an image in the webpage
  • Forms:
    `<form>`: Creates an HTML form for user input
    `<input>`: Input fields for forms
    `<button>`: Buttons within forms
Example:
html
            
<form>
    <input type="text" placeholder="Enter your name">
    <button type="submit">Submit</button>
</form>
  • Divisions: `<div>`: A generic container for other HTML elements. It's often used for styling purposes

Step 4: Attributes

  • HTML elements can have attributes that provide additional information about the element
  • Attributes are always included in the opening tag and usually come in name/value pairs like `name="value"`
Example:
html
            
<a href="https://alters.dev/convert/timezone" target="_blank">Visit Example</a>

In this example, `href` and `target` are attributes of the `<a>` (anchor) element

Result
Visit Example

Conclusion

HTML is the backbone of web development, and understanding these basics is crucial for creating web pages and applications. As you progress, you'll learn more about CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, allowing you to create dynamic and visually appealing websites.