HTML

Posted on 2/13/2025 9:22:04 AM by Admin

Let's Learn HTML

What is HTML?

As humans, we speak and understand languages like English, Hindi, Urdu, Japanese, etc. Similarly, web browsers—whether it's Chrome, Opera, Mozilla Firefox, or others—understand HTML. It's as simple as that.

But why do they understand only HTML? Because when we browse the internet, we come across multiple websites, and each page within a website is a web page. HTML (HyperText Markup Language) is the standard language used to create these web pages.

Just as English is commonly used as a bridge language when two non-English speakers communicate, the world has agreed upon HTML as the standard for writing web pages. Web browsers are designed to understand, parse, and render HTML on a user's PC or mobile screen.

In short, HTML helps us structure and display content on the internet.

Can You Master HTML Quickly?

Now, if anyone tells you that they can teach you HTML and that you'll become an HTML master after taking their course, believe me, they are lying to you.

Just like English, unless you practice it and start having conversations, you won’t become a fluent English speaker—no matter how many three-month English-speaking courses you complete. Similarly, simply finishing an HTML course won’t make you an HTML expert.

HTML is driven by your imagination—whatever you can think of, you can design. But mastering it depends entirely on practice and more practice.

I can teach you the basics of HTML, but the rest is up to you.

---

Structure of an HTML Page

Every HTML document follows this basic structure. Do you need to memorize it? No, not at all! We are in the 21st century, and we have shortcuts available for everything.

For the basic HTML structure, modern editors like Notepad++, Sublime Text, or VS Code either support built-in shortcuts or allow you to add extensions like Emmet to your editor. For example, to enable HTML shortcuts in Sublime Text:

  • Go to View ? Syntax ? HTML

Now, to generate the basic HTML structure, you just need to type html and press Tab. The basic HTML structure will be automatically generated.

Example of a Basic HTML Page


 <!DOCTYPE html>
 <html>
 <head>
 <title>My First Web Page</title>
 </head>
 <body>
 <h1>Welcome to My Web Page</h1>
 <p>This is my first paragraph in HTML.</p>
 </body>
 </html>
```

Explanation:

  • <!DOCTYPE html> ? Declares that this is an HTML5 document.
  • <html> ? The root element that contains the entire page.
  • <head> ? Contains meta-information like the page title.
  • <title> ? Sets the title of the webpage (shown in the browser tab).
  • <body> ? Contains all the visible content of the webpage.
---

I’m not a magician, but I know you have questions about meta-information, don’t you?

In HTML, meta-information refers to data about a web page that is not visible to users but helps browsers, search engines, and other web services understand the page’s content and behavior. This information is typically provided using the <meta> tag inside the <head> section of an HTML document.

Now, think about this—how does a browser know that when someone searches for "kids' toys," it should display toy-related websites? The browser simply checks the meta-information, such as website keywords, and ranks them based on the most relevant keywords and search terms in search results.

Of course, search rankings also depend on multiple other factors, such as backlinks (how many authoritative and relevant websites link to a particular site) and the webpage’s content. However, meta-information plays a crucial role in improving visibility and relevance in search engine results.

Now let's understand Key Uses of Meta Information in HTML in detail:

1. Character Encoding

Specifies the character set used in the document. In HTML and web development, charset (Character Set) defines the character encoding used to display text on a webpage. It ensures that browsers correctly interpret and render characters, including letters, symbols, and special characters.

For example:

ISO-8859-1 (Latin-1)

<meta charset="ISO-8859-1">

Supports: À, É, Ñ, ç, ö

Does not support: Chinese, Arabic, etc.

UTF-8

UTF-8 is the most commonly used character encoding because it supports almost all languages and special characters.

<meta charset="UTF-8">

2. Viewport Settings

Controls how a webpage is displayed on different devices. For example, it determines how the page should look on mobile screens versus a PC.

Example:


<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. SEO (Search Engine Optimization)

Provides keywords, descriptions, and other information for search engines.

Example:


<meta name="description" content="Learn HTML with easy and simple explanations.">
<meta name="keywords" content="HTML, web development, coding">
<meta name="author" content="John Doe">

4. Refresh or Redirect Page

Automatically refreshes the page or redirects after a specific time.

Example:


<meta http-equiv="refresh" content="5; url=https://example.com">

5. Social Media Integration

Helps control how a page appears when shared on social media.

Example:


<meta property="og:title" content="Learn HTML Easily">
<meta property="og:description" content="A beginner-friendly HTML guide">
<meta property="og:image" content="https://example.com/image.jpg">

Why is Meta Information Important?

  • Helps search engines rank and understand web pages.
  • Enhances user experience on different devices.
  • Controls how content is shared on social media.
  • Helps web services interact with your webpage efficiently.

Basic HTML Tags

1. Headings

In plain English, a heading means a title or label that introduces a section of text, a page, or a topic. It helps organize information and makes it easier to read.

For example, in a book, a heading is the title of a chapter. Similarly, in an HTML document, a heading is a bold line of text that can be used to separate or define sections. Meaning you can first give a heading about a topic (section) and then write more about the topic in a simple paragraph or text.

HTML has 6 heading levels:


<h1>Heading 1 (Biggest)</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 (Smallest)</h6>

2. Paragraphs & Line Breaks

After defining a heading or title, you start writing the content. The content is basically written in paragraphs. After one or two paragraphs, if you want to start the next paragraph after a few lines, then you can use the desired number of line breaks.

For example, to start a new line after three lines, you can use three line breaks:


<br><br><br>

So, <br> is simply a line break.


<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<br>
<p>This is after a line break.</p>
```

3. Bold, Italic, Underline

As the name suggests, these tags are used to make a character or a word bold, italic, and underlined, respectively.

Sometimes, we need to emphasize certain words, and these tags help achieve that.


<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text</u>

4. Links

Obviously, we wouldn't describe everything on a single webpage. For example, on the SharpEncode website, there is a separate About Us page and a separate Contact Us page. If we wish, we can link both pages, meaning we can provide a link on the About Us page to go to the Contact Us page and vice versa.

Similarly, if you want to link any of your website's webpages to your Instagram page, you can insert the link to your Instagram profile in your website’s webpage.

For example, if I want to link Google to my webpage, I will use the following code: 


<a href="https://www.google.com" target="_blank">Click here to visit Google</a>

Explanation:

- href is the URL of the page you want to link to. - target decides the behavior:

  • If you want to open the linked page in a new tab, use _blank.
  • If you want to open the link in the same tab (overriding the current page), you can ignore the target attribute.
```

5. Images

Obviously, you can't explain everything to someone without proper diagrams or images. For example, if you are writing about fruits and you want to explain mango to a kid, then obviously, you would need a picture. In a webpage, to display a picture, we use the <img> tag.

Similar to the <a> (anchor) tag, where we use the href attribute to provide the URL or path of the page we want to link to, the <img> tag uses the src attribute to specify the URL or path of the image we want to display.

Example:


<img src="image.jpg" alt="A sample image" width="200" height="150">

Explanation:

  • src: Specifies the source (URL or file path) of the image.
  • alt: Provides alternative text for the image (useful for accessibility and when the image fails to load).
  • width: Sets the width of the image in pixels.
  • height: Sets the height of the image in pixels.

6. Lists

Sometimes we need to write something in a list in an ordered way (like 1,2,3) or in bulleted lists to explain something in a better way. For example, you create a list of your desires that you want to achieve.

In HTML, we use the <ul> or <ol> tags to achieve the same.

  • <ul> stands for unordered list (bulleted list).
  • <ol> stands for ordered list (numbered list).

Within both, we use the <li> tag to specify list items.

Unordered List (Bullets)


<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

Ordered List (Numbers)


<ol>
    <li>Wake up</li>
    <li>Brush teeth</li>
    <li>Eat breakfast</li>
</ol>

7. Tables

If you have ever used MS Excel or Word, you must have used tables. Tables help in organizing information in rows and columns.

For example, if you want to display information about students in your school, you would definitely need to show details like Roll No, Name, Age, etc. Tables are the best structure to define and display such information.

In an HTML document, to define a table we use the <table> tag, along with <tr> (table row), <th> (table header), and <td> (table data). 


<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>12</td>
    </tr>
    <tr>
        <td>Emma</td>
        <td>11</td>
    </tr>
</table>

8. Forms

Sometimes, we need to take user inputs. For example, when you want to use Facebook, you first need to sign up by providing details. Later, when you log in, you need to enter your username and password.

So, whenever we need user input in a webpage, we use forms. 


<form>
    Enter Name: <input type="text" name="name"><br>
    Enter Email: <input type="email" name="email"><br>
    <input type="submit" value="Submit">
</form>

When a user finally clicks on the Submit button, the data can be stored in a file or a database. But that is a completely different topic that you will learn in jQuery.

9. Video Tags

Similar to images, sometimes we may need to embed a video in our webpage. To insert a video, we use the <video> tag, where we provide the video URL or file path in the src attribute and specify the video type in the type attribute. 


<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

The controls attribute allows the user to play, pause, and control the video. If the browser does not support the video format, the message inside the tag will be displayed.


Like0
unlike0