HTML Basic – CrTr4U

HTML(Hypertext Markup Language) is the standard markup language for creating web pages and web applications. It is the backbone of every web page and is used to describe the structure of a web page.

Here’s a simple overview of some common HTML elements and how they are used:

HTML Document Structure: Every HTML document begins with a <!DOCTYPE> declaration that specifies the version of HTML being used, followed by the <html> tag, which contains the entire HTML content.

<!DOCTYPE html>
<html>
    <!-- HTML content goes here -->
</html>

Head Section: The <head> section contains meta-information about the document, such as its title, character set, and links to external resources such as CSS files and JavaScript files.

<head>
    <title>Page Title</title>
    <!-- Other meta-information and links to external resources -->
</head>

Body Section: The <body> section contains the visible content of the web page, including text, images, links, and other elements.

<body>
    <!-- Content of the web page goes here -->
</body>

Text Formatting: You can use various tags to format text within your web page. For example:

<p>This is a paragraph.</p>
<strong>This text is bold.</strong>
<em>This text is italicized.</em>

Headings: HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important).

<h1>This is a heading level 1</h1>
<h2>This is a heading level 2</h2>
 ...
<h6>This is a heading level 6</h6>

Links: You can create hyperlinks using the <a> tag. The href attribute specifies the URL of the page to link to.

<a href="https://www.example.com">Link Text</a>

Images: To display images, use the <img> tag with the src attribute, which specifies the path to the image file.

<img src="image.jpg" alt="Description of the image">

This is just a basic introduction to HTML. There are many other elements and attributes you can use to create more complex web pages. You can explore more advanced features like lists, tables, forms, and multimedia elements as you become more comfortable with the basics. Additionally, understanding CSS (Cascading Style Sheets) alongside HTML will help you style your web pages and make them visually appealing.

Advanced HTML topics that you can explore to enhance your understanding of web development:

Lists: HTML offers ordered lists <ol> and unordered lists <ul> for presenting items in a list format. List items are represented by the <li> tag.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Tables: You can use the <table> element to create tables on your web page. Tables consist of rows <tr>, columns <td>, and headers <th>.

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

Forms: HTML provides form elements like <form>, <input>, <select>, and <textarea> to create interactive forms for user input.

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>
    <input type="submit" value="Submit">
</form>

Semantic HTML: Semantic HTML elements provide meaning to the content, making it easier for search engines and developers to understand the structure of a web page. Examples include <header>, <footer>, <article>, <section>, <nav>, and more.

<header>
    <h1>Website Header</h1>
</header>
<section>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here.</p>
    </article>
</section>
<footer>
    <p>Contact information</p>
</footer>

Multimedia: You can embed multimedia elements like images, audio, and videos using the <img>, <audio>, and <video> tags.

<img src="image.jpg" alt="Description of the image">
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Understanding these advanced topics in HTML will give you a solid foundation for creating more complex and interactive web pages. Additionally, learning CSS (Cascading Style Sheets) and JavaScript will enable you to further enhance the appearance and functionality of your web pages.

here are a few more advanced topics in HTML that you can explore:

HTML Semantics: HTML5 introduced several new semantic elements that provide meaning to the content, making it more descriptive and accessible. Some of these elements include <header>, <footer>, <main>, <article>, <section>, <nav>, <aside>, and <figure>. Using these elements appropriately can enhance the structure and accessibility of your web page.
Embedded Content: Besides images, audio, and video, HTML allows you to embed content from other sources. For example, you can embed interactive maps using the <iframe> tag or include external content using the <object> and <embed> tags.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d429285...." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

<object data="yourdata.pdf" type="application/pdf" width="100%" height="100%">
    <p>Alternative text - include a link <a href="yourdata.pdf">to the PDF!</a></p>
</object>

Meta Information: You can provide metadata about your web page within the <head> section. Meta tags include the document’s character set, keywords, description, author, and viewport for responsive design.

<meta charset="UTF-8">
<meta name="description" content="Description of the web page">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Comments: You can add comments within your HTML code to provide explanations or to temporarily disable part of the code. HTML comments are enclosed within .

<!-- This is a comment -->
<p>This is a paragraph.</p>

Doctype Declaration: The <!DOCTYPE> declaration at the beginning of an HTML document specifies the version of HTML being used. It helps web browsers to render web pages correctly.

<!DOCTYPE html>
<html>
    <!-- HTML content goes here -->
</html>

Understanding these advanced topics in HTML will provide you with a strong foundation for creating well-structured, semantic, and accessible web pages. Additionally, consider learning about accessibility features, best practices, and the latest updates in HTML to stay current with web development standards.

Here’s an example of using localStorage to store and retrieve data:

<!DOCTYPE html>
<html>
  <body>
    <button onclick="saveData()">Save Data</button>
    <button onclick="getData()">Get Data</button>
    <p id="data"></p>

    <script>
      function saveData() {
        localStorage.setItem('myData', 'This is my data');
      }

      function getData() {
        var data = localStorage.getItem('myData');
        document.getElementById('data').innerHTML = data;
      }
    </script>
  </body>
</html>

Happy Learning

Leave a Comment Cancel Reply