progrramers

HTML for Beginners, Everything You need to know.

at January 22, 2023 0

HTML stands for Hypertext Markup Language. It is the standard language used to create web pages. HTML documents consist of elements and tags, which are used to create the structure and content of a webpage.

HTML consists of a series of tags, which are used to define the structure and content of a web page. The most basic HTML tags include the <html>, <head>, <title>, <body>, and <p> tags.

An HTML element is a block of content, such as a paragraph, heading, or image. Elements are surrounded by tags, which are used to define the type of element and provide additional information about it. For example, the <p> tag is used to create a paragraph element, while the <img> tag is used to create an image element.

The basic structure of an HTML document consists of a head and a body. The head contains information about the document, such as the title and meta data, while the body contains the actual content of the webpage.

The <!DOCTYPE> tag is used to specify the version of HTML that the document is written in. The <html> tag surrounds the entire document, and within it, the <head> and <body> tags are used to define the head and body sections of the document.

The <head> section contains information about the document, such as the title, which is displayed in the browser's title bar or tab, and metadata, which provides information about the document to search engines and other web crawlers. The <title> tag is used to define the title of the document, while the <meta> tag is used to provide additional information such as keywords and a description.

In addition to these basic tags, there are many other tags that can be used to create more complex web pages. These include tags for headings, lists, links, images, and more.

For example, headings are defined using the <h1> to <h6> tags, with <h1> being the highest level heading and <h6> being the lowest. Lists can be created using the <ul> (unordered list) and <ol> (ordered list) tags, along with the <li> tag for each list item.

The <body> section contains the actual content of the webpage. The content is divided into elements, such as HTML headings, HTML paragraphs, and images, which are defined using tags. Common tags used in the body include:

<h1> to <h6>: headings
<p>: paragraphs
<img>: images
<a>: links
<ul>: unordered lists
<ol>: ordered lists
<li>: list items
<div>: divisions or sections of the page, often used for layout and styling purposes
<span>: a small piece of content, often used for styling purposes

Images can be added to a web page using the <img> tag. The "src" attribute is used to specify the URL of the image file, while the "alt" attribute is used to provide a text description of the image for accessibility purposes.

HTML also includes several attributes, which are used to provide additional information about an element. For example, the src the attribute is used to specify the source of an image or script and the href the attribute is used to specify the link of an anchor tag.

HTML also includes tags for creating tables, forms, and other types of content. The <table> tag is used to create tables, with <tr> (table row), <th> (table header), and <td> (table data) tags used to define the rows, headers, and cells of the table, respectively. Forms can be created using the <form> tag, along with various input types such as text fields, checkboxes, and radio buttons, which are defined using the <input> tag.

HTML5 is the latest version of the HTML language and it was published in October 2014. HTML5 introduced new tags and attributes that can be used to create more interactive and multimedia-rich web pages. Some of the new tags in HTML5 include:

<article> – used to represent a self-contained composition in a document, such as a forum post, a magazine or newspaper article, or a blog entry
<aside> – used to represent a section of a page that contains content that is tangentially related to the content around the aside element, and which could be considered separate from that content
<audio> – used to embed audio files, such as music or sound effects, into a web page
<canvas> – used to create graphics and animations on the fly using JavaScript
<figcaption> – used to provide a caption for a <figure> element
<figure> – used to represent a piece of self-contained flow content, typically with a caption, that is typically referenced as a single unit from the main flow of the document
<footer> – used to represent a container for the footer of a document or section

It is used in conjunction with other languages such as JavaScript and CSS to create dynamic, interactive websites.

Cascading Style Sheets (CSS) is a separate language that is used to control the layout and style of an HTML document. CSS can be used to change the font, color, & size, etc. spacing of elements, as well as to control the layout of the page. CSS can be added to an HTML document in several ways, including:

using the style attribute within an HTML element
using a <style> tag in the head of the document
linking to an external CSS file using the link tag

JavaScript is another language that is often used in conjunction with HTML and CSS. JavaScript is a programming language that can be used to add interactivity and dynamic content to a webpage. JavaScript can be added to an HTML document in several ways, including:

using the script tag within the body of the document
linking to an external JavaScript file using the script tag

There are more HTML element that described below:

<html> - Defines the start and end of an HTML document
<head> - Contains meta information about the document, such as the title
<title> - Defines the title of the document, which is displayed in the browser's title bar
<body> - Contains the main content of the web page
<p> - Defines a paragraph of text
<h1> to <h6> - Defines headings, with <h1> being the highest level and <h6> being the lowest
<ul> and <ol> - Defines unordered and ordered lists, respectively
<li> - Defines a list item
<a> - Defines a hyperlink
<img> - Defines an image
<div> - Defines a section of the document as a block-level element
<span> - Defines a section of the document as an inline element
<header> - Defines a header section of a document or a section
<nav> - Defines navigation links
<main> - Defines the main content of a document
<article> - Defines a self-contained composition in a document
<section> - Defines a section of a document
<aside> - Defines a section of a page that contains content related to the main content
<footer> - Defines a container for the footer of a document or section
<form> - Defines a form for user input
<input> - Defines various types of input fields, such as text, radio buttons, and checkboxes
<select> - Defines a drop-down list
<textarea> - Defines a multiline input field
<label> - Defines a label for an input element
<fieldset> - Groups related elements in a form
<legend> - Defines a caption for a fieldset
<button> - Defines a clickable button
<table> - Defines a table
<tr> - Defines a table row
<th> - Defines a table header cell
<td> - Defines a table data cell
<thead> - Defines a container for the header content in a table
<tbody> - Defines a container for the body content in a table
<tfoot> - Defines a container for the footer content in a table
<colgroup> - Specifies groups of columns in a table for formatting
<col> - Specifies properties for a column in a table
<caption> - Defines a caption for a table
<style> - Defines a section for CSS styles
<script> - Defines a section for JavaScript code
<link> - Defines a link to an external resource
<meta> - Defines metadata about the document
<base> - Defines the base URL for all relative URLs in a document
<audio> - Defines an audio player
<video> - Defines a video player

There are many more which will be explored in upcoming articles. Meanwhile, stay tuned with us on Progrramers. We will see you again soon.

Thank You and Have a nice learning experience.

blog HTML

What is HTML? - Advance Concept of HTML Progrramers Explained

at December 11, 2022 0

Image no. one

Hello, Friends Welcome Back to Progrramers. In this article, we will go to know “What is HTML?” We all, who are interested in computer programming, know very well that HTML is a language known as “Hyper Text Markup Language”. But the actual question is “What is a markup language?”.

So, before we go ahead, we must take a brief look at important points about What is HTML?

First, we will contrast between standard and non-standard HTML webpages.
And we will come to the point of knowing “What is HTML and where it exists?”.
Then we will give a little focus on knowing the requirement of HTML and What does HTML do?
And then, we will take a brief look at HTML Elements.
At last, we will understand what HTML documents and HTML Web-page are.

The contrast between Standard and Non-Standard webpages.

Image no. one

Now you can see in image no. one there is News Paper Image. It has many news articles. If you focus on it, every news article starts with a proper bold heading and subheading. Why it is done? It is done with a purpose. It is a standard format of the article that keeps readers engaged with the content. The heading tells all about the news. By reading the heading reader knows what the entire article is all about.

This is a standard format that is also followed by the Webpages, Blogs, and Articles on World wide web. Now you can see in image no. two there are two web pages side by side. When you observe both pages you will not find any difference except typography. But these two web pages have a big difference.

Image No. Two

The left side web page is formatted with HTML to Heading, Sub Heading, and Paragraphs. On the other side web page is also formatted with HTML but with the obsoleted version of HTML. Currently, the first draft of the HTML 5.3 version is recommended by W3C (Wide Web Consortium) which is already retired in the year 2021. If we remove HTML from this web page, it will look something like shown in image no. three.

Image no. Three

With the beginning of the Search Engine era, a huge change came into the center of the world wide web: searching any content on search engines like Google, Yandex, Bing, Yahoo, etc. If you are looking for something on the internet just open Google and type the main words related to your content and the search engine brings a list of websites ranked by their content quality, popularity, user reaction, and many more things. Search ranking required many more features to be accurate on the web pages and it can be done with HTML. HTML provides scope to format the content of the article and display it on web pages.

On your screen’s left side is a standard web page and, on another side, there is also a web page that follows no standard. If want to check, open a website https://www.seobility.net/en/seocheck/ that can check search engine ranking and observe the results. You can in the results there is a big difference. The SEO score of the left side page is 66% but, on another side, the score is only 46%. We will discuss the SEO score in later videos.

What is HTML and where it exists?

Where does HTML exist?

HTML is a client-side markup language program that exists on world wide web clients like “Web browser applications etc.”. HTML Stands for “Hyper Text Markup Language”. HTML is used the create web pages for web applications.

Why is HTML required what does HTML do?

The requirement of HTML can be understood by understanding the working method of data on the world wide web (internet). To understand this let’s assume the example of opening a webpage on a computer. Whenever the user clicks any link or enters a URL in the browser to open a webpage then a request is sent to the server and the server takes this request to process the query and develop the response data and send it to the user, as a result, the user gets the response data on the webpage.

These response data are called “Hyper Text Data” which is encoded and sometimes encrypted with another program and also required a data traveling medium which is called “Transmission Protocol”. This data must be displayed on the user’s screen in a proper readable format, therefore, the response data must be marked with appropriate tags to separate the heading, subheading, paragraph, links, and other kinds of data on web pages. On the user’s side, these marking tags must be parsed by a program which is these days known as HTML.

What are the HTML Tags or Elements?

An HTML web page consists of several HTML tags. Together these tags create a DOM tree which is processed on web browsers to build a web page. HTML tags are used to separate the data display format on web pages like headings, subheadings, paragraphs, lists, tables, links, and other kinds of data as shown in image no. four. Metadata is also a data type that exists on web pages in metaphase. These data cannot be accessed by users but they are accessible with appropriate algorithms like Search Engine Algorithms.

What are HTML documents and HTML Web-page?

Above mentioned lines may confuse you about HTML which elaborates that HTML exists on client-side web browsing applications, not on the serves. This confusion may be cleared by knowing something special about HTML.

The HTML coding which is done on servers and saved is called an HTML document. An HTML document must consist of a declaration of document type which signified the HTML version of the document, metatags, head tags, body tags, and the other required tags to build a web page. It is saved on servers with a proper filename and “.html” extension but it is not necessary to save the document with a “.html” extension. This part will be discussed in the coming articles.

Whenever the user opens the HTML document on a web browser it gives a standard formatted page on your device screen which is called a Web page. Web pages consist of a group or groups of HTML tags which is known as DOM.

DOM stands for Document Object Model that is parsed on webpages, it is an interface that represents the structure of a web page. It also connects web pages with styling, scripting, and programming languages, such as CSS, JavaScript, PHP, etc. We will go to know more about DOM in upcoming articles.

So stay tuned to progrramers on www.progrramers.com and keep learning.

Framework Framework7 laravel

What is Model-View-Controller (MVC) ?

at May 07, 2022 0

Model-View-Controller (MVC) is a software architectural pattern that separates the logic of a programming framework into three modules that are linked in its main program. It allows dividing the software's business logic and user interface.

To understand MVC in the context of web development we need to understand What are the main programming modules of a Web Application. These modules are:

1. Server-Side Program
2. Client-Side Program
3. Database

Server-Side Program

The Server-Side program works on the server. It takes data from the Client-Side program via the GET or POST request method and stores the data in the Database. It also receives data from the database and provides the data to the client-side program to display the response. For Example ASP.Net, Java, Perl, PHP, Python, NodeJS, and Swift are the Server-Side Program.

PHP and NodeJS is very popular Server-Side open-source programing language. Open-source programming languages are available for free to use and build commercial applications. The most popular CMS (Content Management System) WordPress uses PHP as a Server-Side programing language.

Client-Side Program

The client-side program works on the client's (user's) devices, hence the same name. It collects the input data from users via Forms and sends it to Server-Side Programs to store data in Database or Sessions. It also fetches the data from Server and displays the response. For Example : HTML, CSS, JavaScript are Client-Side Programs.

Client-side programs also control the behavior of data display. It decides the color, size, position, and many other things. Lazy load is one of the popular client-side methods that break a large set of data into chunks and loads it with a certain action like on state change or page scroll or button click etc.

JavaScript is the most popular Client-Side programing language worldwide. There is a Framework called Framework7 that is completely built on JavaScript and based on the Model-View-Controller pattern. It allows the creation of web applications as well as Mobile applications at the same time. It can also be integrated with Server-side Frameworks like Laravel.

Learn framework7 - Framework7 Tutorial: What Is Framework7?

Database

A Database is a program that stores data for later use. The database collects data from server-side programs that are presented by clients (users). The database controls the flow of output data and decides what and how the data should be returned to the server-side in order to serve as a response. For Example SQL, MongoDB, Oracle, MariaDB, and SQLite are Database programs.

Learn MongoDB - What Is MongoDB? : Introduction, MongoDB Architecture, NoSQL Concept, and Comparison with SQL Database

So, with the above topic now we have a clear concept of three basic modules of a web application. Now we are moving back to Model-View-Controller which is our main topic. MVC i.e., Model-View-Controller pattern was designed to navigate all these three components in the web application.

Basic Principle of MVC

The basic principle of Model-View-Controller can be understood with the help of the below image.

The Model View Controller (MVC) architecture pattern specifies that an application consists of a data model, presentation information, and control information. The pattern requires that each of these be separated into separate objects. MVC is more of an architectural pattern, but not for a complete application.

The Model can communicate with its data logic to the database. The model receives commands from the controller to pull data from the database or push the data to the database.

The View communicates only with the controller and receives the command from the controller on how to display data. The view is a User Interface it also sends the data to the controller via forms. The view has the responsibility to control the data displayed to the user.

By reading the above two paragraphs it can be easily understood that The Controller is a bridge between The Modal & The View that can control the initiation of The View and send/received the data to The View which was received from or sent to The Modal.

Now it is easy to understand that View can handle the Client-side programs and Controller is a Server-Side program and Modal is also a Server-Side program that directly communicates with the Database.

Why should use MVC Frameworks?

If you are a web developer and fond of writing neat & clean codes then MVC Frameworks can be the best choice for you because the most attractive concept of the MVC pattern is the separation of concerns.

This allows the front-end code to be separated from the back-end code and split into two separate components. So, it becomes much easier to manage the codes and make changes on one side without messing with each other.

Laravel & Mean-Stack are the best examples of Model-View-Controller (MVC). Learning Laravel is very easy because it has large community support and the Laravel framework gives the boosted security also.

Learn Laravel - Laravel Tutorial: What Is Laravel?

I’ll be continuing on my blog with this kind of article if you like my articles please follow me on my Facebook page: https://www.facebook.com/theprogrramers/

Thanks for giving me your precious time here, God bless you & see you later.

laravel laravel-9

Laravel Tutorial : What is Laravel?

at April 30, 2022 0

Hi Web Artisans! I’m back with a brand new article for the Laravel Tutorial Series. When you are talking about web development then what are the things that come to your mind? Well, I guess it is Speed and Efficiency. You can correct me by writing in the comment section if I’m wrong but the chances are minimum.

Speed and Efficiency are two important factors when developing a web application. Here speed is the term which refers to the total time taken in the development of a web application and efficiency can be termed as a smaller number of bugs and errors in the final product.

You may or may not agree with me about the definition of speed and efficiency in the context of web development but the people like Taylor Otwell must agree with me who create Laravel Framework and intended for the development of web applications following the model–view–controller architectural pattern and based on Symfony.

So, in this article, we will see What is Laravel and why it is used?

What is Laravel?

Laravel is an open-source PHP-based framework and it is used to develop Web Applications. Laravel follows the MVC i.e., model–view–controller architectural pattern and it provides the expressive and elegant syntax as a set of tools and resources to build robust PHP applications.

Why Laravel Framework is used?

The above sentences are just a brief introduction to the Laravel Framework but in fact, Laravel is much more. Laravel has the most comprehensive and complete documentation and video tutorial library of all modern web application frameworks, making it easy to get started with the framework.

The best part is the community. If you have skills and ideas for development, you also can be a Laravel contributor. Thousands of talented & skilled developers from around the world have contributed to the framework. This is why Laravel has a great development community.

Laravel makes development fun by easing common tasks used in many web projects, such as:

Simple, fast routing engine.
Powerful dependency injection container.
Authentication Scaffolding.
Multiple back-ends for session and cache storage.
Expressive, intuitive database ORM.
Database agnostic schema migrations.
Robust background job processing.
Real-time event broadcasting.

Laravel is the Progressive Framework

Laravel's first beta release was made available on June 9, 2011, followed by the Laravel 1 release later in the same month and since then several updates was released. This is why Laravel is called a progressive framework. The current official version of Laravel is 9.x.

What kind of Framework is Laravel?

In terms of web application development, there are two types of Frameworks.

Back End or Server-Side Frameworks
Front End or Client-Side Frameworks

Laravel is a Back End Framework

Laravel is a Back End or Server-Side Framework. Unlike Front-End Framework Laravel can easily be used to develop business logic for very robust web applications. Laravel allows to enables the creation of simple pages, landings, and different forms. Apart from delivering output data, it boosts security during web attacks.

This is a much-needed reason why experts rate it as one of the best web frameworks for backend development. Laravel provides app maintenance and deployment services as well as several ways to use relational databases.

It offers very important key features like

Security
Template Engine
Eloquent Object Relational Mapping
MVC Architecture
Dynamic Routing System

Front-End Frameworks integration with Laravel

Front End is used to design web pages, develop complex user interfaces, associate data with DOM elements, style your components and make AJAX requests. It has nothing to do with business logic. For Front-End Development Laravel provides the mechanism to integrate Bootstrap and Vue JS Frameworks. For web & mobile application development simultaneously Framework7 also can be used which is a totally JavaScript-based Front End Framework.

Progrramers Laravel Tutorials

programmers.com is determined to bring the most comprehensive and accurate tutorials for beginners and advanced business development concepts to professionals.

JavaScript

JavaScript Tutorial: Target HTML Elements with CSS Selectors & Combinators

at March 25, 2022 0

Hello programmers! Welcome back to Progrramers – Web Development Tutorials. In this JavaScript tutorial, we will explore the methods to target the HTML Elements with CSS Selectors & Combinators using JavaScript. But before we step forward, allow me to inform you that you must know about the CSS Selectors & Combinators. If you’ve no idea about CSS Selectors & Combinators then please write it up in the comment section, I’ll post a separate article for that.

So, Let’s Start! We all know the fact that these days every single website is developed using multiple programming & scripting languages like PHP, JavaScript, CSS, etc. JavaScript is the most popular scripting language used on websites across the globe, therefore, it become essential to know the advanced uses of JavaScript.

We always become terrified of the target HTML Elements using JavaScript. Therefore, here we will try to present every content in a very simple way so that everything become crystal clear.

What is the CSS Selector?

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

CSS Syntax

Code Copied


selector{property:value}

Code Copied


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{color:#ff0000;}
    </style>
</head>

<body>
    <h1>This is heading</h1>
    <p>This is an example paragraph.</p>
</body>

</html>

MEAN STACK

Server-Side Program

Client-Side Program

Database

Basic Principle of MVC

Why should use MVC Frameworks?

What is Laravel?

Why Laravel Framework is used?

Laravel is the Progressive Framework

Laravel is a Back End Framework

Front-End Frameworks integration with Laravel

Progrramers Laravel Tutorials

What is the CSS Selector?

CSS Syntax

What is the CSS Combinator?

How CSS Selectors and Combinators can be used in JavaScript?

What is the difference between qureySelector() and qureySelectorAll() ?

How to target HTML element with querySelector() method?

How to use ID & Class Attributes

Using innerHTML property

Using innerText property

Using textContent property

Using document.write() method

Using alert()

Using console.log()

Using print()

What is the difference between innerHTML, innerText, and textContent?

How to target HTML elements using ‘id’?

How to target HTML Elements using ‘class’?

How to target HTML Elements using ‘tag name’?

How to target HTML Elements using the ‘name’ attribute?

How to target HTML Elements using the ‘querySelector’ method?

How to target HTML Elements using ‘querySelectorAll’ method?

How to apply loop on a NodeList?

How to Find ID, Class & Name Attribute Values?

How to use JavaScript on HTML Documents?

Why & when use type attribute within <script> tags?

JavaScript codes with a type attribute in script tags

JavaScript codes without type attribute in script tags

Where to use JavaScript on HTML Documents?

What are the types of placement of JavaScript on an HTML Document?

What is Internal JavaScript?

What is External JavaScript?

What are the advantages of external JavaScript?

Using absolute and relative path reference for external JavaScript

Diagram

Work Flow