Skip to main content

An Intro To Web Dev - Part-1: HTML Markups

 


An Intro To Web Dev Part-1: HTML Markups


Introduction

HTML (Hypertext Markup Language) is a foundational language of web development. It is used to create the structure of web pages and defines the different elements of a web page such as headings, paragraphs, images, and links. In this article, we will dive deep into HTML and explore its different elements and their programmable properties.

HTML Document Structure

An HTML document consists of several sections. Here's a basic structure of an HTML document:

html
<!DOCTYPE html>

  <html>

     <head>
  <title>Page Title</title>

     </head>

     <body>

  
        <!-- Content goes here -->


     </body>

  </html>


The <!DOCTYPE html> declaration at the beginning tells the browser that the document is an HTML5 document. The <html> element contains the entire HTML document, and the <head> element contains meta information about the document, such as the title. The <body> element contains the content of the document.

HTML Elements

HTML elements define the different parts of a web page. Here are some of the most commonly used HTML elements:

1. Headings: Headings are used to define the main headings of a document. HTML has six levels of headings, from <h1> to <h6>. Here's an example:

html
<h1>Main Heading</h1>

2. Paragraphs: Paragraphs are used to define blocks of text. Here's an example:

html
<p>This is a paragraph.</p>

3. Links: Links are used to create clickable links to other pages or resources. Here's an example:

html
<a href="https://www.example.com/">Link</a>

4. Images: Images are used to display images on a web page. Here's an example:

html
<img src="image.jpg" alt="Image">

5. Lists: Lists are used to create ordered or unordered lists of items. Here's an example:

html
<ul>
 <li>Item 1</li> 
 <li>Item 2</li> 
 <li>Item 3</li>
</ul>

6. Forms: Forms are used to collect user input. Here's an example:

html
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">

</form>


HTML Attributes

HTML elements can have attributes that provide additional information about the element. Here are some commonly used attributes:

1. id: The id attribute is used to give an element a unique identifier.

html
<div id="container"></div>

2. class: The class attribute is used to give an element a class name that can be used for styling or JavaScript purposes.

html
<div class="box"></div>

3. src: The src attribute is used to specify the URL of an image or other media.

html
<img src="image.jpg" alt="Image">

4. href: The href attribute is used to specify the URL of a link.

html
<a href="https://www.example.com/">Link</a>

Conclusion

HTML is a foundational language of web development. It defines the different elements of a web page and provides the structure for the content. In this article, we explored some of the most commonly used HTML elements and their programmable properties. Understanding HTML is essential for anyone interested in web development, and it provides a solid foundation for learning other web development languages and technologies.
Labels:

Comments

Post a Comment

Popular posts from this blog

Principles And Best Practices of REST API Design

  Principles & Best Practices of REST API Design   RESTful API Design  the Best Practice This best-practices article intends for developers interested in creating RESTful Web services that provided high reliability and consistency across multiple services suites; following these guidelines; services are positioned for rapid, widespread, public adoption by internal and external clients. Here is the complete diagram to easily understand RES API’s principles, methods and best practices. Now, let’s begin with elaborating on each box by starting with tis principles . The Six Principles / Constraints Client-Server Separation of concerns is the principle behind the client-server constraints. By separating the user interface concerns from the data storage concerns, we improve the portability of the user interface across multiple platforms and improve scalability by simplifying the server components. Stateless Communication must be stateless, as in the client-sta
Post a Comment
Read more

How to retrieve data of current date in Laravel

Are you looking for a way to retrieve today's records from database using Laravel? Well you have just come to the right place. In this tutorial I will explain a simple approach I often use in this kind of problems when am working on a project. So, read carefully! Another way to get the exact record of today's transactions is by using the like operator in conjunction with Carbon for example in Laravel 9+: <?php  $date = Carbon::now(); $todaySales = Sales::query() ->where("created_at", "like", "%{$date->today()->toDateString()}%") ->get();  dd($todaySales); The above will return an array of records for today. Now why do we use this approach? I want you to take a good look at the created_at column field this is how it looks like: 2023-04-14 11:33:23. With this using where statement the result will be an empty array why? Because where statement uses an = operator by default which means the sql statement will attempt to match the r
Post a Comment
Read more