RAMAKAYAL COMPUTER EDUCATION

Category: HTML

  • Lesson 2: Setting Up Your First HTML File

    Objective:

    By the end of this lesson, students will:

    1. Understand how to set up an HTML file.
    2. Learn how to create and save an HTML file.
    3. Learn about basic file management and naming conventions for HTML files.
    4. Explore how to view and edit an HTML file in a web browser.

    2.1 How to Set Up an HTML File

    Setting up an HTML file involves creating a plain text document with the .html extension, which can be opened and viewed in any web browser. Let’s go through the basic steps of creating your first HTML file:

    1. Open a Text Editor:
      • Use any simple text editor to create an HTML file. Some popular text editors are:
        • Notepad (Windows)
        • TextEdit (Mac, in plain text mode)
        • VS Code (Cross-platform)
        • Sublime Text (Cross-platform)
        • Atom (Cross-platform)
    2. Write HTML Code:
      • Begin by writing the HTML code in the text editor. You can start with the basic structure and then add your content.

    Basic HTML Template:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My First HTML Page</h1>
    <p>This is my first webpage, and I am learning HTML!</p>
</body>
</html>

    
In this code:
    • The <!DOCTYPE html> declaration specifies the document type.
    • The <html> tag wraps the entire content.
    • The <head> contains metadata, including the document’s title.
    • The <body> contains the visible content such as headings and paragraphs.

    2.2 Saving the HTML File

    After you’ve written the HTML code, you need to save the file properly so that it can be opened in a web browser.

    1. Save File as .html:
      • Choose Save As in your text editor.
      • In the Save as type dropdown, select All Files (if available).
      • Name your file with the .html extension (e.g., index.html).
    2. Choose the Right Location:
      • Save the file to a folder where you can easily find it, such as the Desktop or Documents folder.

    2.3 Viewing the HTML File in a Browser

    To view your HTML page:

    1. Navigate to the location where you saved the .html file.
    2. Double-click the file. This will open the HTML file in your default web browser.
    3. Your webpage should appear in the browser with the content you wrote in the <body> section.

    If the page doesn’t display correctly, ensure that the file is saved with the .html extension and that your text editor is not adding any extra file extensions (e.g., .txt).

    2.4 File Management and Naming Conventions

    Here are some tips for managing and naming your HTML files effectively:

    1. File Naming:
      • Always use lowercase letters for file names (e.g., myfirstpage.html).
      • Avoid spaces in file names. Use hyphens or underscores to separate words (e.g., my_first_page.html).
      • Keep file names simple and descriptive (e.g., contact.html, about.html).
    2. File Extensions:
      • Always use .html for HTML files.
      • HTML files can be opened in any web browser, but they must be saved with the .html extension.
    3. Folder Organization:
      • Create a dedicated folder for your project (e.g., mywebsite).
      • Keep all related files—HTML, images, CSS, JavaScript—inside the same folder or organized in subfolders.

    2.5 Editing and Updating Your HTML File

    As you work on your HTML page, you may need to make changes to the content or structure. Here’s how to update your HTML file:

    1. Open the file in your text editor.
    2. Make changes to the HTML code as needed.
    3. Save the file again (use Ctrl+S or Cmd+S on Mac).
    4. Refresh the browser to see the changes immediately (press F5 or click the refresh button in the browser).

    2.6 Key Takeaways

    • HTML files are plain text documents with a .html extension.
    • Use a text editor to create and write your HTML code.
    • Always save your HTML file with the .html extension and ensure proper file naming conventions.
    • To view your HTML page, open it in a web browser.
    • Make changes to your HTML file and refresh the browser to see updates.

    Activity 2: Create Your Own HTML File

    Objective: Create an HTML file that includes a title, heading, and a paragraph.

    1. Open a text editor and write the following code:
      • The title of your page should be “My First HTML Page.”
      • Create a heading (<h1>) with the text “Welcome to My First HTML Page.”
      • Create a paragraph (<p>) with the text “This is a simple webpage created as part of my learning.”
    2. Save the file as my_first_page.html.
    3. Open the file in a web browser and check if the content is displayed correctly.

  • Lesson 1: Introduction to HTML

    Objective

    By the end of this lesson, you’ll understand:

    • What HTML is.
    • Why it’s important.
    • How to create a basic HTML document.

    What is HTML?

    HTML (HyperText Markup Language) is the standard language for creating web pages. It structures the content on the web, using elements like text, images, and links.

    Why Learn HTML?

    • It’s the foundation of web development.
    • It’s beginner-friendly and easy to learn.
    • It allows you to build and customize websites.

    Basic HTML Structure

    An HTML document is made up of elements. Here’s the structure:

    <!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

    Explanation

    1. <!DOCTYPE html>: Tells the browser this is an HTML5 document.
    2. <html>: The root element containing all HTML code.
    3. <head>: Contains metadata and the title of the page.
    4. <title>: Sets the page title visible in the browser tab.
    5. <body>: Holds the main content of the page.
    6. <h1>: Represents the main heading.
    7. <p>: Represents a paragraph.

    Activity

    1. Open a text editor (e.g., Notepad on Windows, TextEdit on Mac, or Visual Studio Code).
    2. Copy the example code above and save it as index.html.
    3. Open the file in a browser to see your first web page.

    Quiz

    1. What does <!DOCTYPE html> do?
      • a) Displays the page title.
      • b) Tells the browser the HTML version.
      • c) Adds a paragraph.
      • d) Styles the content.

    Summary

    • HTML is the backbone of web pages.
    • The structure includes elements like <html>, <head>, and <body>.
    • You can create your first web page with just a few lines of code.