HTML For Bug Hunters With Examples


INTRODUCTION

The most often used markup language for constructing web pages is HTML (Hypertext Markup Language). It consists of a set of tags and attributes used to define the structure and content of a web page.

HTML documents are plain text files with the.html or.htm extension that can be opened and edited with any text editor. When you open an HTML file in a web browser, the file is read and the contents are displayed as a web page.


What is HTML

HTML (Hypertext Markup Language) is a web page creation programming language. It is made up of a collection of tags and elements that are used to structure the content on a web page.

Here is a basic HTML document example:

Boiler plate.png

The HTML document in this example begins with a <!DOCTYPE> declaration, which tells the browser what type of document it is.

This HTML document starts with  <!DOCTYPE> declaration, which specifies the HTML version used. The <html> tag encloses the entire page, whereas the <head> and <body> tags divide it into two sections. The title of the page is specified by the <title> tag in the head section.

The <h1> element is used to generate a main heading, and the <p> tag is used to construct paragraphs. There are also tags for adding photos, links, lists, tables, and other elements. HTML allows you to generate structured material that can be styled and formatted with CSS and made interactive with JavaScript.

What are HTML Attributes

HTML attributes (Hypertext Markup Language) provide additional information about HTML elements. They are inserted into an element's opening tag and consist of a name and a value.

An example of an HTML element containing attributes is as follows:

element with attributes.png

The <img> tag in this example displays an image on the web page. The src attribute specifies the image file's URL, but the alt attribute specifies the alternative text that will be displayed if the picture cannot be loaded or for accessibility reasons.

Here are some more common HTML elements and their applications:.

  • href: specifies a link's URL.
  • class: gives an element a class for styling purposes
  • id: gives an element a unique identifier for usage with CSS or JavaScript
  • style: an element's inline styles are applied.
  • title: When a user hovers their cursor over an element, it displays additional information about it.

Attributes can also be applied to other HTML elements, such as the <input> tag, which has attributes such as type, name, and value and is used to construct input fields on a web page.

Common HTML elements

HTML (Hypertext Markup Language) offers many elements that can be used to organize material on a web page. Here are some of the most frequent HTML elements for beginners, along with usage examples:
  •  <h1> to <h6>: used to make different-sized heads.
  • <p>: used to make text paragraphs.
  • <a>: used to generate hyperlinks to other websites or resources.
  • <img>: used to show photos on a website.
  • <ul> and <ol>: used in the creation of unordered and ordered lists.
  • <table>: used to generate data tables.

These are only a few of the numerous HTML elements accessible. HTML also includes components for constructing forms, input fields, buttons, videos, audio, and other types of media.

Block-level vs inline HTML elements

Based on their usual display behavior, HTML (Hypertext Markup Language) elements are classed as either block-level or inline.

Block-level items begin on a new line and take up the entire available width, pushing any subsequent content down to the next line. They are commonly used to form larger web page layouts and divisions such as paragraphs, headings, lists, and dividers.

Here are some examples of block-level elements:

Inline elements, on the other hand, do not begin on a new line and merely take up the space required to display their information. They are frequently used to apply formatting and styling to tiny chunks of information within a block-level element.

Here are a few instances of inline elements:

Some elements, like the <image> and <input> elements, can be block-level or inline depending on how they are used.

Understanding the distinction between block-level and inline elements is critical for controlling the layout and structure of a web page using CSS (Cascading Style Sheets) and ensuring that the material is displayed in a suitable manner for its intended purpose.

How to use HTML entities


HTML (Hypertext Markup Language) entities are special codes that can be used to represent characters and symbols that are not part of the conventional ASCII character set. Entities, for example, can be used to show special characters like or — on a web page.

Here's an example of how to use HTML entities:




The "&copy;" entity in this example displays the copyright symbol. The entity is initiated by the "&" symbol and terminated by the ";" symbol.

Here are some more often-used HTML entities and their corresponding codes:

  • “&amp;”: & (ampersand)
  • “&lt;”: < (less than)
  • “&gt;”: > (greater than)
  • “&nbsp;”: non-breaking space

Entities are especially useful for showing characters that are difficult to enter or that may not be supported by all web browsers. However, it is critical to employ entities effectively and carefully in order to ensure that web pages are accessible and easy to read for all users.


Common beginner mistakes in HTML

Here are some instances of common beginning HTML (Hypertext Markup Language) errors.

  • Forgetting to  close the tag


In this example, the second paragraph is missing the closing </p> tag, which can cause unexpected behavior in the layout of the page.

  • Improperly nesting tags:


The "ul" tag for the sub-item should be closed before the "li" tag for the parent item in this example. Improper tag nesting can lead to layout and functionality concerns.

  • Using outdated or non-standard markup:

The "center" tag is non-standard and out of date in this example, and should not be used. CSS (Cascading Style Sheets) should be used to apply styles instead.

  • In-correcting using attributes:

The "alt" attribute is utilized wrongly with the "a" tag in this example. The "alt" attribute is intended to offer alternate text for images, but it should not be used for links.

By avoiding these common errors and adhering to HTML best practices, you may design web pages that are accessible, well-structured, and compatible with many devices and browsers.

How to create an HTML document

A few easy steps are required to create an HTML (Hypertext Markup Language) document. Here is an example of how to make a simple HTML document:

  • Launch a plain text editor, such as Notepad or Sublime Text.
  • Begin the document with the HTML doctype declaration, which informs the web browser that this is an HTML document:
  • Next, create the HTML document structure by adding the <html> tags, which enclose the entire document:

  • Within the <html> tags, add the <head> section, which contains metadata about the document, such as the title
  • Within the <html> tags, add the <body> section, which contains the main content of the document
  • Add content to the document within the <body> tags, such as headings, paragraphs, and images
  • Save the file with a .html extension, such as index.html

Following these steps will allow you to generate a simple HTML document that can be read in a web browser. You may then build on this base by adding more HTML tags, formatting with CSS (Cascading Style Sheets), and adding functionality with JavaScript.

Thank You For Reading

by at
Tags:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)