HTML CONCEPTS

1 Comment / SHORT NOTES / By

Exploring HTML

In the vast region of web development, understanding HTML (Hypertext Markup Language) is like to laying a strong foundation for constructing a digital masterpiece. HTML forms the back bone of every web page, facilitate the structuring and presentation of content. This article provides an in-depth exploration of HTML concepts, breaking down the details of step by step.

I.  Grasping the Basics

HTML is the language is used to create the structure of web pages. Here’s where you start:
  1. Tags and Elements : HTML uses tags to define the structure of document. Tags are enclosed in angle brackets (<,>), and they came in pairs – an opening tag and a closing tag. Elements are created by using these tags, and they define parts of web page.
  2. Document Structure :  The basic structure of an HTML document includes the <!DOCTYPE>, <html>, <head>, and <body> elements. The <!DOCTYPE> declaration specifies the HTML version, while the <html> element encloses the entire HTML content. The <head> element contains the metadata, and the <body> element holds the visible content.
II.  Text and Formatting
Understanding how to manipulate text is crucial. Let’s dive into formatting
  1. Headings and Paragraphs : Use the <h1> to <h6> tags for headings of different levels. The <p> tag is use for paragraphs.
  2. Text Formatting :  Employ tags like <strong> for bold text, <em> for italic text, and <u> for underlined text. 
  3. Line Breaks :  To insert line break, use the <br> tag.
III.  Creating Lists
Lists helps in structuring content. Let’s explore various types of lists:
  1. Ordered Lists :  Employ the <ol> tag for ordered (numbered) lists. Each item enclosed within <li> tags.
  2. Unordered Lists:  For unordered (bulleted) lists, use the <ul> tag with <li> tag for each list item. 
  3. Definition Lists :  Use the <dl> tag  for definition lists, <dt> for terms, and <dd> for their definitions.
IV.  Working with Links
Links to connect web pages. Here’s how to create and style links:
  1. Anchor tags : Use the <a> to to create links. The href attribute defines the link’s destination.
  2. Link Text :  The text between the opening and closing <a> tags becomes the clickable link text. 
  3. Styling Links : You can style link using CSS (Cascading Style Sheets) to change their appearance when hovered over or clicked.
V.  Embedding Images
Images enhance the visual appeal of web pages. Let’s explore image embedding. 
  1. Image Tags : Utilize the <img> tag to embed images. The src attributes specifies the image file’s source, while the alt attribute provides alternate text for accessibility.
  2. Image Attributes :  Other attributes like width and height can be used to adjust image dimensions.
VI.  Creating Forms
Forms enable user interaction. Here’s how to create basic forms:
  1. Form Tag : The <form> use to create form. The action attribute specifies where the form data should be sent.
  2. Input Fields :  Various input fields type like text, password, email, and more can be created using the <input> tag.
  3. Submit Button :  Use the <input> tag with the type = “submit” attribute to create a submit button.
VII.  Structuring Tables
Tables organize data into rows and columns. Let’s delve into creating tables:
  1.  Table Structure : Use the <table> to crate a table. Within it, use <tr> tag for rows and <td> or <th> tag for cells.
  2.  Header cells :  Use <th> tags for header cells. Which appear bold and centered by default.
VIII.  Adding Style with CSS
CSS enhances the visual presentation of HTML content. Here’s a brief overview:
  1. CSS Linking : Link an external CSS file using the <link> tag within the <head> section.
  2. Inline Styles:  Apply styles directly to HTML elements by using the style attribute.
IX.  Including Comments 
Comments are essential for documentation and collaboration:
  1. Comment Tags: Use <!– to start a comment and –> to end it. Comments are not visible on the rendered page.
Now look at into the basic HTML for your understanding.
Copy Text 
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML within 10 minutes</title>
</head>
<body>
<h1 style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">The is the first heading</h1>
<p style="font-style: italic;">This is the paragraph 1</p>
<h2>This is the second heading</h2>
<h3>This is the third heading</h3>
<img src="html-5.png" width="250" height="200">
</body>
</html>

1 thought on “HTML CONCEPTS”

  1. Pingback: A Website with Login and Signup form in HTML CSS & JavaScript – Coding Jasim

Comments are closed.

Scroll to Top