CLASS X Introduction to Web Page Designing Using HTML

Noteshub 00:16:00

Introduction to Web Page Designing Using HTML

HTML (HyperText Markup Language) is the standard language used to create and design web pages. It provides the structure and content of a webpage, allowing browsers to display text, images, links, and other elements.

1. Basics of HTML

  • HTML Structure: HTML documents are made up of elements and tags that define the content and layout of the webpage.
    • <!DOCTYPE html>: Declares the document type and version of HTML.
    • <html>: The root element that encloses all HTML content.
    • <head>: Contains metadata, such as the title, character set, and links to CSS or JavaScript files.
    • <title>: Specifies the title of the webpage displayed on the browser tab.
    • <body>: Contains the actual content of the webpage, such as text, images, and links.

2. Basic HTML Tags

  • <h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest.
  • <p>: Paragraph tag, used for writing text in paragraphs.
  • <br>: Line break, used to start a new line within the text.
  • <hr>: Horizontal rule, used to create a horizontal line to separate content.

3. Working with Text

  • <b> or <strong>: Makes the text bold.
  • <i> or <em>: Makes the text italicized.
  • <u>: Underlines the text.
  • <blockquote>: Indents a section of text, typically used for quotes.

4. Adding Links

  • <a href="URL">Link Text</a>: Creates a hyperlink to another webpage or resource.
    • href: The attribute that specifies the destination URL.
    • Example: <a href="https://www.example.com">Visit Example</a>

5. Inserting Images

  • <img src="imageURL" alt="description">: Embeds an image into the webpage.
    • src: Specifies the path to the image file.
    • alt: Provides alternative text if the image cannot be displayed.
    • Example: <img src="image.jpg" alt="A beautiful scenery">


Creating and saving an HTML document, and then accessing it using a web browser, is a straightforward process. Here’s a step-by-step guide:

Step 1: Create an HTML Document

  1. Open a Text Editor:

    • You can use any text editor like Notepad (Windows), TextEdit (Mac), or a code editor like Visual Studio Code, Sublime Text, or Atom.

  2. Write the HTML Code:

    • Type the following HTML code into your text editor:
      <!DOCTYPE html>
      <html>
      <head>
          <title>My First Web Page</title>
      </head>
      <body>
          <h1>Welcome to My First Web Page</h1>
          <p>This is a simple HTML document created for learning purposes.</p>
          <p>Here’s an example of a link: <a href="https://smarttricks-tips.blogspot.com/">Visit Example</a></p>
      </body>
      </html>

  3. Save the HTML Document:

    • Save the file with the .html extension.
    • For Example:
      • File Name: my_first_webpage.html
      • Save Location: Choose a folder where you can easily find it later.

Step 2: Access the HTML Document Using a Web Browser

  1. Open a Web Browser:

    • Use any modern web browser like Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari.

  2. Open the HTML File:

    • Method 1:
      • Go to the folder where you saved your HTML file.
      • Double-click on my_first_webpage.html.
    • Method 2:
      • Right-click on the HTML file and select "Open with," then choose your preferred web browser.
    • Method 3:
      • Open your web browser.
      • Press Ctrl+O (Windows/Linux) or Cmd+O (Mac) to open the file directly from the browser.
      • Navigate to the location of your saved HTML file and select it.

  3. View the Web Page:

    • The web browser will render your HTML document, and you should see the web page with the content you wrote in the HTML code.

Step 3: Editing and Refreshing

  1. Edit the HTML Document:

    • If you want to make changes to your HTML document, simply open it again in your text editor, make the desired changes, and save the file.

  2. Refresh the Web Page:

    • After saving your changes, go back to the web browser and refresh the page (usually by pressing F5 or clicking the refresh button).
    • The browser will reload the HTML file and display the updated content.

Step 4: Sharing the Web Page

  1. Share the HTML File:
    • If you want to share the web page with someone, you can send them the .html file.
    • They can open it on their computer using the same steps mentioned above.

Step 5: Uploading the Web Page (Optional)

  1. Host Your Web Page Online:
    • If you want to make your web page accessible on the internet, you’ll need to host it using a web hosting service.
    • You can use free hosting platforms like GitHub Pages, or paid hosting services.

Post a Comment

0 Comments

Please do note create link post in comment section