Html Concepts

Web Servers

In a simple definition, It is software that accepts a request by HTTP(It is a network protocol created to distribute the web content or its secure variant HTTPS) to perform some task or some computation or to transfer the data as per the request by the user or client. That's it, it can do many things as per the request but it has to configures in that way so it can perform, this is the web server.

HTML

What is HTML? Why HTML? .....

HTML (HyperText Markup Language) is used to create a structure of a webpage.

With the help of HTML, we can structure the web page.

HyperText refers to links that connect webpages, either with single websites or between websites. Markup refers to the tags which specified the type of text for ex=> <h1>hello </h1> like these are markup by these <></> are known as markup and something has to be inside it and tell them that what text it would be either it will be heading or some other thing.

HTML CODE

<!DOCTYPE>
<html lang="en>
<head>
     <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Web Page </title>
</head>
<body>
<h1>Heading</h1>
<p> Paragraph </p>
</body>
</html>

For Creating a simple Web Page we have to write this code snippet,

I will explain the whole structure of why we have written these things

<!DOCTYPE/> It is written to tell the browser that this structure is a document type, we can write any type like XML or something, back then without doctype it is difficult for the browser to understand the file type whether is it XML or some other type so doctype tells the browser that we are using doctype or document type.

<html lang=" eng"> It is used to tell that we are using the English language we can change to Chinese, Urdu, etc. but generally in the world, English is popular so that's why we are using eng.

So this is the important part:=>

HTML has two basic elements => 1) HEAD 2) BODY

and the whole scenario revolve around these two, mostly in body

So head contains <title> <meta> tags we can specify the title of the webpage in the head section, and we can also link the CSS files or something in the head section, but what are these meta tags, let's clear it meta tags are generally used for giving the additional information about the webpage when it is written or something that is content-type etc but the catch is the information in meta tag will not show in the web page because it is the information of the webpage, like what is a site about, It helps the google search engine to give result faster and helps in SEO optimization.

and the last is <body> tag is like whatever is appearing on the screen it will come under the body tag, whatever structure we have to create we create under the body tag.

HTML TAGS

Heading tag

Headings are used to give the headings in the page and we have <h1> to <h6> in HTML
<h1>Heading elements</h1>
<h2>Summary</h2>

<h2>Examples</h2>
<h3>Example 1</h3>


<h3>Example 2</h3>

<h2>See also</h2>

2 Paragraph tag

Paragraph Tag is used for writing a paragraph or some sentence in the page and it is denoted by the <p></p> tag
<p> this is my Paragraph</p>

3 Table tag

Table tag is used for display table in the html page , if we want to display table and store some data in table we can make use of this table tag provided by the html
<table>
        <tr>
            <th colspan="2">The table header</th>
        </tr>

    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>
Here <th> is the table heading and <tr> is the table row and <tbody> is the table body whatever we want to write inside table comes under table body and last <td> is used for table data . This is how we create tables in html.

4 Image tag

The <img> HTML element embeds an image into the document.
<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices">
here src is a source from which image is coming or we can say path of the image, and alt is altenative it is neccessery to use alt because it tells about the image , what is the image name or we can define any property so anyone can easily understand which image is this and sometimes if the path of src is incorrect it will show this alternate message and image will not be shown

5 Anchor tag

Anchor tag is used for linking the page from one to another or linking the other sites url , if we want to link some other site to our page we can easily link with anchor tag .
<a href="https://example.com">Website</a>

6 Input Tag

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

   <form>
      Name:<input type="text" placeholder="Name" /> <br />Email:<input
        type="email"
        placeholder="Email"
      />
      <br />
      Passowrd:<input type="password" placeholder="Passowrd" />
      <br />
      <input type="date" />
      Male <input type="radio" name="gender" value="Male" />

      Female <input type="radio" name="gender" value="Female" />

      <br />
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>

7 Iframe tag

The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.

8 Audio tag

Audio tag is used for embedding the audio to the HTML page

9 Video tag

Video tag is used for embedding the audio to the HTML page

Semantic elements

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Thank you for reading this so far. This is a brief introduction of HTML

Hope it's a nice and informative read for you. If you find this article useful, like and share this article. Someone could find it useful too.

If you find anything technically inaccurate, please feel free to reach out to us.

See you in my next Blog article, Take care!!