Module 1:3 HTML - HTML Basic Formatting Tags and Creating Your First Website Using Notepad

Overview

In this section of our HTML course, we delve into HTML's basic formatting tags, which are essential for styling text content on web pages. We will also guide you through creating your very first website using Notepad. This introduction combines understanding text formatting with practical application, enhancing readability and aesthetic appeal while providing a hands-on experience in web development.

What are HTML Basic Formatting Tags?

HTML formatting tags are elements used to format or style text on a webpage. Understanding HTML's inherent formatting capabilities is crucial for any web developer, even as CSS takes over most styling responsibilities.

Heading and Paragraph Elements in HTML

Heading Elements (<h1> to <h6>)

Heading elements in HTML are used to define headings or titles for sections of content on a webpage. There are six levels of heading elements, ranging from <h1> to <h6>, where <h1> is the highest level and <h6> is the lowest level. These elements help structure the content of a webpage hierarchically, with <h1> being the main heading and subsequent levels representing subheadings.

• <h1>: Main heading of the webpage.
• <h2> to <h6>: Subsequent levels of headings, with decreasing importance.

Example:

            <h1>Main Heading</h1>
            <h2>Subheading 1</h2>
            <p>Content...</p>
            <h3>Subheading 1.1</h3>
            <p>Content...</p>
        

Paragraph Element (<p>)

The paragraph element <p> is used to define paragraphs of text on a webpage. It represents a block of text content that is typically separated from adjacent content by vertical spacing. Paragraphs are commonly used to present textual content, such as articles, descriptions, or explanations.

• <p>: Represents a single paragraph of text.
• Can contain text, images, links, and other inline elements.
• Paragraphs are automatically formatted with whitespace (margins) above and below the text within them.

Example:

            <p>This is a paragraph of text.</p>
            <p>This is another paragraph with <a href="#">a link</a>.</p>
        

Importance of Heading and Paragraph Elements

Heading and paragraph elements are essential for structuring and presenting content on web pages:

• Semantic Structure: Heading elements provide semantic meaning to the content, indicating its hierarchy and structure.
• Readability: Proper use of headings and paragraphs improves the readability and organization of content.
• Accessibility: Heading elements assist assistive technologies in navigating and understanding web page structure, enhancing accessibility.
• SEO: Search engines use headings to determine content relevance and importance, impacting search ranking.

Best Practices

Best practices for using heading and paragraph elements:

• Use heading elements (<h1> to <h6>) to organize content hierarchically.
• Use <p> elements to enclose blocks of text content.
• Avoid skipping heading levels to maintain consistency and clarity.
• Limit the use of heading elements for structural purposes rather than solely for styling.

Key HTML Formatting Tags

Here’s a breakdown of commonly used HTML formatting tags:

• Bold ('<b>' and '<strong>'): While '<b>' is purely stylistic, '<strong>' also adds semantic importance.
• Italic ('<i>' and '<em>'): '<i>' is for style, whereas '<em>' adds semantic emphasis.
• Underlined ('<u>'): Typically used for stylistic underlining.
• Marked Text ('<mark>'): Highlights text, useful for indicating relevance within a text block.
• Small Text ('<small>'): Often used for fine print or disclaimers.
• Deleted Text ('<del>'): Shows text removal with a strikethrough.
• Inserted Text ('<ins>'): Indicates additions to the document.
• Subscript ('<sub>') and Superscript ('<sup>'): Used for formulas or stylistic expressions.
• Preformatted Text ('<pre>'): Preserves formatting as written in the HTML code.

Importance of Formatting Tags

Understanding HTML tags is beneficial for quick styling, providing semantic meaning, and ensuring compatibility across all browsers.

Examples and Usage

Here's how to use these tags in HTML:

            <p>This is <strong>important</strong> text.</p>
            <p>This is <em>emphasized</em> text.</p>
            <p>Here is some <mark>highlighted</mark> text.</p>
            <p>Chemical water formula: H<sub>2</sub>O.</p>
            <p>Einstein's famous equation: E=mc<sup>2</sup>.</p>
        

Creating Your First Website Using Notepad

To build your first website using Notepad, follow these steps:

1. Open Notepad: Start Notepad. In Windows, you can find it by searching for "Notepad" in the Start menu.
2. Write Your HTML Code: Enter the following basic HTML structure:

            <!DOCTYPE html>
            <html>
            <head>
                <title>My First Web Page</title>
            </head>
            <body>
                <h1>Welcome to My Website</h1>
                <p>This is a paragraph of text on my very first webpage!</p>
                <p>Here is some <strong>bold</strong>, <em>italic</em>, and <mark>highlighted</mark> text.</p>
            </body>
            </html>
        

3. Save the File: Go to File > Save As. Change the 'Save as type' to "All Files". Name your file index.html. Choose a location that is easy to find, such as your desktop.
4. View Your Website: Open the saved HTML file in any web browser, like Chrome, Firefox, or Edge. You will see your web page displayed.

HTML Tags Semantics

1. <!DOCTYPE html>: Indicates to the browser that the document is of type HTML. This declaration is for HTML5 documents.
2. <html>: The parent tag of the HTML document, enclosing all other tags. It defines the root of the HTML document.
3. <head>: Contains metadata and information about the web page that is not displayed to the user. It includes tags like:
   • <style> – contains CSS styling attributes.
   • <meta> – provides additional information about the document.
   • <script> – contains JavaScript code for dynamic web pages.
   • <link> – links the current document with other web pages or external style sheets.
4. <title>: Resides in the <head> tag and defines the name of the web page. It appears as the title of the browser tab.
5. <body>: Contains the content of the web page that is displayed to the user, such as text, images, links, etc.

Conclusion

Combining HTML formatting knowledge with the creation of your first website using Notepad provides a practical foundation in web development. This exercise not only reinforces your understanding of HTML tags but also introduces you to web page creation from scratch. As you progress, you'll continue to build more complex and interactive websites.