Posted by

Complete HTML Guide

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web site.

Why should you learn HTML?


All web pages are built on the foundation of HTML. You wouldn't be able to arrange text or add photos, or videos to your web pages without HTML. HTML is the start of all you'll need to know about making interesting web pages!

The basic format of a Web page is HTML (HyperText Markup Language).


Let's have a look at some basic tags:

<html></html>

This function produces an HTML document.

<head></head>

Sets the title and any additional information that isn't visible.

<body></body>

It specifies the body document.

<title></title>

It specifies the document's title.

Let's look at an example:

<!DOCTYPE html>

<html>

<head>

<title>

This is our home page

</head>

<body>

<h1>Heading </h1>

<p>paragraph.</p>

</body>

</html>

Output:

What Are HTML Tags and How Do I Use Them?

Tags are used to indicate the beginning of an HTML element and are often enclosed in angle brackets. h1> is an example of a tag.

To work, most tags must be opened <h1> and closed </h1>.

What Is The Best Way To Add Links In HTML?

The internet, as you may have observed, is made up of a lot of links.

Almost everything you click on when surfing the web is a link that sends you to another page on the same website or to a different website.

The <a> tag opens an attribute that contains links. This is the first element we've seen that utilizes an attribute, thus it differs from the tags we've seen so far.

Tables in HTML

These lessons will walk you through the process of generating tables that are tailored to your specific requirements. Tables were previously the most common way of arranging pages.

This is no longer essential with the introduction of CSS. And for good reason: this resulted in pages that were nearly hard to keep up with. HTML, on the other hand, provides all of the tools you'll need to create display tables.

What Is a Table Made Up Of?


When creating a table, we must use the table> opening tag to create an element. We use the table rows, <tr>, and cells, <td>, to organize the table inside this tag.

Fonts

The typeface was once an HTML element, which made maintaining maintainable websites a headache. To set fonts and their properties such as weight, style, and size, we now utilize CSS.

You may also use CSS to set the design of your pages consistently while yet having the power to drastically modify them with only a few lines of code.

Images

You can do pretty much whatever you want using the image element and CSS.

The picture and figure components have been added to HTML5 as well.

What are HTML Attributes and How Do I Use Them?


Attributes are data fields that include supplementary information. Attributes are represented by an opening tag with extra information within.

An attribute may be anything like:

<img src="mypicture.jpg" alt="A photo of my picture.">

The image source (src) and alt text (alt) are properties of the <img> element in this case.

Lists

For showing data in an ordered or unordered list, lists are quite handy. We use <ol> for ordered lists (lists with numbers) and <ul> for unordered lists (lists with bullet points). Each list item is specified by a <li> within one of these components. Here's an illustration:

<ul>
  <li>Unordered item 1</li>
  <li>Unordered item 2</li>
</ul>
<ol>
  <li>Ordered item 1</li>
  <li>Ordered item 2</li>
</ol>

Form in HTML

If you're utilizing a form for a user to submit information (which we're assuming at this point), an action property is required to notify the form where its contents will be routed.

The method property instructs the form on how the data in it will be transferred, and it can have the default value of getting, which latches the form information onto a web URL, or post, which (basically) delivers the form's content silently.

We've introduced a few new items in this section. Let's take a look at them one by one to see.

<form action=”#”>

  1. The form element is used to create an HTML form, which is what you use to log in to Twitter or send a message on Facebook. One or more inputs, buttons, checkboxes, or dropdowns can be found on a form.
  2. A form can be submitted,' which tells the browser that the user has finished filling it out. The action property specifies where data should be delivered when the form is submitted (in our example, '#' because we don't want the data to be sent elsewhere).

<label for="">

  1. An input element's label is marked with a label. It might be text or a symbol adjacent to the input boxes. The enclosed input element's 'id' property is set to the attribute.

<input type="">

  1. An input element is defined by the term input (an element take accepts data from the user). The type property on the input element accepts a variety of values. For example, type="text" will display a text input field, whereas type="submit" will display a button that, when clicked, will submit the form.

<textarea>

  1. As previously stated, the textarea element creates a bigger box in which to input text. Try to figure out what the difference is between
    and in the next part. One of the two permits multi-line text input, as a hint.</p>

Contact form

<div>
  <form action="#">
    <label for="email">
      Email: <input type="email" id="email" placeholder="Enter your email" /> 
    </label>
    <label for="message">
      Message: <textarea id="message">Your Message</textarea>
    </label>
    <input type="submit" valid="Send Message" />
  </form>
</div>

HTML's Applications

HTML, as previously said, is one of the most frequently used languages on the internet. I'll mention a handful of them below:

Web page development - HTML is a markup language that is used to generate web pages. Almost every web page has HTML tags, which are used to render the page's data in a browser.

HTML contains tags that are used to travel from one page to the next, and it is widely used in internet navigation.

Because of the responsive design philosophy, HTML pages now perform effectively on all platforms, including smartphones, tablets, desktops, and laptops.

Offline assistance HTML pages may be made available offline on the system without the need for an internet connection once loaded.

Facts:

The use of a dead link

The anchor() element creates a connection to the material on or off a web page. The anchor element's href property takes the destination URL to link to external content.

Comments

Post a Comment

Popular Posts