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.

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...

OBITECH INVENT

Search This Blog