RAMAKAYAL COMPUTER EDUCATION

Lesson 2: Setting Up Your First HTML File

Written by

Saravana Kumar

in

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.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts