CLASS X Introduction to Web Page Designing Using HTML

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

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.

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>

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

Open a Web Browser:
- Use any modern web browser like Google Chrome, Mozilla Firefox, Microsoft Edge, or Safari.
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.
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

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.
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

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)

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.