Web design and development – for your good website

 

Web design and development is a very important topic for a website. The process of creating a website is a web design and the process of making a website more beautiful is development. It is possible to design the web in different ways. The design of the website varies depending on the user and the user. Webpage development is needed to make the designed website more beautifully refined or modified.

Various software is used in web design and development. Differences in web design can be noticed due to differences in software. As a result of using different software, the web site becomes one and the same.

  • Static website.
  • Responsive website.
  • Dynamic website.
  • CMS website.

Again various software is used for web design and development.

  • HTML (HyperText Markup Language)
  • CSS (Cascading Style Sheet)
  • Java and JavaScript
  • Bootstrap 4
  • PHP (Hypertext Preprocessor)

The following is a brief discussion of all the software used.

 

HTML (HyperText Markup Language):

HTML is the lifeblood of web design. It is not possible to design a website without HTML. HTML is in the background regardless of the software used to design the web. The latest version of HTML is HTML5. Add new commands and features to the new version than the previous version.

HTML Elements:

  • Start with the opening tag.  <p>
  • Finish using closing tags.  </p>
  • Other tags or elements or content must be used within the opening and closing tags.
  • Empty element must be closed inside the opening tag. <hr />, <br/>, <img src = “html.jpeg” />.
  • Attributes can be used in almost all elements. Such as:  <body>, <img>, <a> etc.

HTML Main Elements:

  1. <! DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> </title>
  5. </head>
  6. <body>
  7. ….
  8. </body>
  9. </html>

Shown through a program (Program No-1.html)

  • <! DOCTYPE html>
  • <html>
  • <head>
  • <meta charset=”utf-8″>
  • <title> Jenial IT </title>
  • </head>
  • <body>
  • website design near me- Jenial IT
  • </body>
  • </html>

HTML element:

The core of a web site is built on HTML. It is unthinkable to design a website without HTML. The way you design a website is based on HTML. Web designer needs to know HTML for this. Here are some HTML elements:

  • Heading h1-h6
  • Paragraph
  • Element Style
  • &nbsp;
  • br Element
  • Font Element
  • Presentation Element
  • Link Element
  • Image Element
  • Table Element
  • Border attribute
  • Form Element
  • HTML Colors
  • HTML Entities
  • HTML Marquee

All other tags or commands can be found in w3schools HTML.

CSS (Cascading Style Sheet):

CSS stands for Cascading Style Sheet. CSS is used to enhance the beauty of web design. The structure of the website is created with the help of HTML and the beauty of the structure created through CSS is given. For example, HTML is the bone of the human body and CSS is the flesh. The latest version of the current is CSS3. A website can be web design and development very easily and beautifully through HTML CSS.

Type of CSS:

CSS can be mainly divided into two parts.

  1. Internal CSS. (Inline CSS and Internal CSS)
  2. External CSS.

1.1. Inline CSS: Inline CSS is always written with style in the HTML code of the HTML file. E.g.- <body style = “background-color: blue”>.

1.2. Internal CSS: Internal CSS is always written in the head of the HTML file. Start with <style> and end with <style>. You have to say at the beginning that you will work on the tag. Such as- body, h1, p, etc.

  1. External CSS: This is a completely separate file. Two files are required when working with external CSS. The first is the HTML file we use all the time. Whose extension is .html. The second is a CSS (Cascading Style Sheet) file whose extension is .css. It must always be linked to the head.

Shown through a program (Program No-2.html)

  • html document
  • <! doctype html>
  • <html>
  • <head>
  • <meta charset = “utf-8”>
  • <title> Type of CSS </title>
  • <link rel = “stylesheet” href = “style.css” type = “text / css”>
  • <style>
  •  body {background-color: green;
  •  h1 {color: yellow;
  •  p {font-size: 18px; color: cyan;
  • </style>
  • </head>
  • <body style = “background-color: blue”>
  • <h1 style = “color: cyan”> Jenial IT, Dhaka, Bangladesh </h1>
  • <p style = “font-size: 24px; color: green;”> Web development company, Dhaka, Bangladesh. </p>
  • </body>
  • </html>

CSS document

  • body {background-color: red;
  • h1 {color: yellow;
  •  p {font-size: 18px; color: cyan; }

CSS Syntax:

The elements that we use in HTML determine the size, color, and other decoration of all the elements through CSS. To understand how to determine them, you must know CSS Syntax. E.g.

syntax

There are two parts to the method or rules of using CSS. The first part is called Selector and the second part is called Declaration. Multiple Declarations may be used under each Selector. Each declaration has two parts. The first part is called Selector and the second part is called Value of Property. Declarations will always be in the Second Bracket {. Semicolon (;) will be used at the end of each declaration.

Div Id and Class:

Div Id and Div Class are the most important part of CSS. Although these two issues are widely used commands in CSS, there are many differences between them. These two selectors are capable of doing the same thing in CSS when viewed in terms of normality or functionality. In CSS we have a Hash sign (#) in front of Div Id and in front of Div Class. (Dot). Although it is difficult to tell the difference between them, most web developers use Div Id to create tables or houses and Div Class to create writing decorations. However, one thing to note is that the Div Class is located in the middle of the Div Id.

Shown through a program (Program No-3.html)

html document:

  • <! doctype html>
  • <html>
  • <head>
  • <meta charset = “utf-8”>
  • <title> Type of CSS </title>
  • <link rel = “stylesheet” href = “style.css” type = “text / css”>
  • </head>
  • <body>
  • <div id = “banner”> <! – start banner ->
  • <div class = “banner_text”> Textile Engnnering College. </div>
  • </div> <! – end banner ->
  • </body>
  • </html>

CSS document:

  • body {background-color: # A37D7E;
  • }
  • #banner {width: 850px;
  •  height: 100px;
  • background-color: # 003399;
  • margin: 0 auto;
  • }
  • .banner_text
  • font-size: 30px;
  • color: White;
  • font-weight: bold;
  • text-align: left;
  • margin: 0px;
  • padding: 20px; }

CSS element:

Cascading Style Sheet-CSS is very important for the website. After web design and development any web site, CSS is needed to present that site beautifully. CSS can bring back the beauty of the website. It is very important for a web developer to know these. The CSS element is highlighted below.

  • Color
  • Background
  • Border
  • Outline
  • Text Styling
  • Font Style
  • Table
  • Form
  • Link
  • Ol, Ul and LI
  • Margin and Padding
  • Div and Float
  • Float and Clear
  • Position
  • Menu

All other tags or commands can be found in w3schools CSS.

jQuery

What is jQuery?

jQuery is not a language, but it is a well-written JavaScript code.  jQuery is a fast and concise JavaScript Library created by John Resig in 2006. jQuery also simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Why jQuery?

There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.

How to use jQuery?

There are two ways to use jQuery.

  • Local Installation: You can download the jQuery library on your local machine and include it in your HTML code.
  • CDN Based Version: You can include the jQuery library into your HTML code directly from Content Delivery Network (CDN).

 Where is jQuery used?

Slide bar, Calendar, Analog clock, Digital clock, Image gallery, Icon link.

How to set jQuery?

There are three ways to set jQuery.

  1. Copy and Paste:
  • Specify the jQuery.
  • Extract the jQuery folder if zib.
  • Open the jQuery folder.
  • With-jQuery, open the Dreamweaver by right-clicking the mouse pointer.
  • Copy all parts of jQuery.
  • Paste the jQuery into the div you want to put.
  • Create the image folder and place it in the required image folder.
  • Copy the code and paste it in the specified place.
  • Finally, preview the website.
  1. Head and Copy:
  • Collect jQuery online.
  • Paste the jQuery into the root directory.
  • Specify the jQuery link in the HTML head.
  • Paste the jQuery code into a specific HTML location.
  1. CDN system (Content Delivery Network):
  • Specify the jQuery from Online.
  • Specify the jQuery link in the HTML head.
  • Paste the jQuery code into a specific HTML location.

jQuery element:

jQuery is very important for website design and development. In order to set different topics well on the website, it is essential to know how to set the following topics.

  • Sidebar
  • Calendar
  • Analog clock
  • Digital clock
  • Image gallery
  • Icon link

All other tags or commands can be found in w3schools js

 

Bootstrap 4

What is Bootstrap?

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

What are the features of Bootstrap?

Bootstrap is a free front-end framework for faster and easier web development

Bootstrap includes HTML and CSS based design templates for forms, buttons, tables, navigation, and JavaScript Plugin.

Bootstrap also gives you the ability to easily create responsive designs.

Downloading Bootstrap:

If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.

Bootstrap CDN:

If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

  • CSS: <link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/ css/bootstrap.min.css”>
  • jQuery library: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
  • JavaScript: <script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>

 Bootstrap OFF Line:

What to do if you work off line:

  • Download Bootstrap and put it in the root folder.
  • Download jQuery and put it in the root folder.
  • Notes in <head> </head>:
    • <link rel=”stylesheet” href=”bootstrap/css/bootstrap.min.css”>
    • <script src=”js/jquery.min.js”> </script>
    • <script src=”bootstrap/js/bootstrap.min.js”></script>

Bootstrap Grid System:

Bootstrap’s grid system allows up to 12 columns across the page. you can group the columns together to create wider columns:

  • span1| span2| span3| span4| span5| span6| span7| span8| span9| span10| span11| span12
  • span 3 | span 3 | span 3 | span 3
  • span 4 | span 4 | span 4
  • span 3 | span 6 | span 3
  • span 4 | span 8
  • span 6 | span 6
  • span 3 | span 9
  • span 12

Grid Classes:

The Bootstrap grid system has four classes:

  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)

Basic Structure of a Bootstrap Grid:

<div class=”row”>
<div class=”col-*-*”></div>
</div>
<div class=”row”>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
<div class=”col-*-*”></div>
</div>
<div class=”row”>

</div>

Shown through a program (Program No-4.html)

  • <!DOCTYPE html>
  • <html lang=”en”>
  • <head>
  • <title>Jenial IT</title>
  • <meta charset=”utf-8″>
  • <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  • <link rel=”stylesheet” href=”bootstrap/css/bootstrap.min.css”>
  • <script src=”js/jquery.min.js”> </script>
  • <script src=”bootstrap/js/bootstrap.min.js”></script>
  • </head>

 

  • <body>
  • <div class=”jumbotron text-center”>
  •     <h1>Jenial IT</h1>
  •    <p>Digital marketing company</p>
  • </div>

 

  • <div class=”container”>
  •    <div class=”row”>
  •       <div class=”col-sm-4″>
  •          <h3>SEO</h3>
  •          <p>The word SEO means search engine optimization. This is an important…</p>
  •       </div>

 

  •       <div class=”col-sm-4″>
  •       <h3>Graphic Design</h3>
  •          <p>Computer Graphic design is visual communicator, who create visual…</p>
  •       </div>

 

  •       <div class=”col-sm-4″>
  •       <h3>Digital Marketing</h3>
  •          <p>Digital marketing is a marketing tool that uses Internet and online based… </p>
  •       </div>
  •    </div>

 

  • </div>
  • </body>
  • </html>

Result:

bootstrap-4

Bootstrap 4 for Responsive Website

Bootstrap 4 elements:

Bootstrap is one of the ways to create a responsive website. To create a responsive website with Bootstrap, a web designer has to acquire knowledge about various aspects of Bootstrap. Below are the different elements of Bootstrap.

  • Bootstrap Text
  • Bootstrap Ul and Ol
  • Bootstrap Table
  • Bootstrap Images
  • Bootstrap Buttons
  • Bootstrap Glyphicon
  • Bootstrap Progress Bar
  • Bootstrap Pagination
  • Bootstrap Pager
  • Bootstrap List Group
  • Bootstrap Dropdown
  • Bootstrap Tabs
  • Bootstrap Navbar
  • Bootstrap Forms
  • Bootstrap Slider

    All other tags or commands can be found in w3schools bootstrap 4

     

    PHP (Hypertext Preprocessor)

    What is PHP?

    PHP shortcode. The full meaning is Hypertext Preprocessor. PHP is made up of these 2 words. PHP is the most accepted and reputable server-side scripting language in the world today. With this, we can easily develop from a small dynamic web site to CMS (Content Management System) web site. We can design a colorful web using only HTML and CSS, but if you want to add any dynamic feature to the site including comment system, slide show, blogging, you need to use PHP. In addition, the features created in PHP will be more effective or CMS (Content Management System) web site will need the help of MySQL (Structured Query Language).

    • PHP: Hypertext Preprocessor
    • PHP is a widely-used, open-source scripting language
    • PHP scripts are executed on the server
    • PHP is free to download and use

     What is Localhost?

    Localhost is a kind of client site. I can use the localhost to test any web site while it is ready or if I want to see my site only on my computer. For this we must have apache, MySQL and PHP installed on our computer. But now without installing this three software separately, we can easily take advantage of the three software’s using only one software. Xampp is very acceptable among some such free software. xampp can be downloaded from xampp own web site apachefriends.org

    What is a Server Side Scripting Language?

    Scripting is another term in the program. Server-side means handling the script from the server. When someone visits a PHP web page, the webserver will process the PHP codes. That is, show what needs to be shown and hide what needs to be hidden. Convert to HTML and send it to the web browser later.

    What is a Dynamic Website?

    Facebook is a dynamic website. Dynamic websites change according to the needs of the user. These sites are very easy to update.

    Why is PHP used?

    PHP is a free language. No money has to be spent on this. You can download it for free. There are so many famous CMSs that all depend on PHP. E.g. WordPress, Joomla. And the top websites like- Facebook, Yahoo, Wikipedia, Flickr are made with PHP.

    Do I need to start PHP?

    • HTML must be reported.
    • Need to know CSS.

    What is Syntex?

    Like all other scripts, PHP also uses some special syntax which means that it is a .php file. As well as not getting this symbol (.php) this script will not implement the main goal of PHP.

    Example : 01_syntex-1

    • <?php
    • // PHP code goes here
    • ?>

    Example : 01_syntex-2

    • <!DOCTYPE html>
    • <html>
    • <body>
    • <h1>My first PHP page</h1>
    • <?php
    • echo “Hello World!”;
    • ?>
    • </body>
    • </html>

    What is echo or print?

    We do a lot of coding in web development. Not every code of which will be visible in the preview. In addition, we have to display the code, that is, the text that we want to display through echo or print command. There are several rules for using the echo command in PHP. As such, we will see a practical use of the echo command.

    Example : 01_echo_print

    • <?php
    • echo “hi, it’s a nice dress.”
    • //print “hi, it’s a nice dress!”
    • ?>

    PHP element:

    PHP is one of the best ways to build a dynamic website. You need to have a good idea about PHP to do web design and development with PHP. To do this you need to have a good idea about PHP.

    1. PHP Variable:
    2. Variable string:
    3. Data Type :
    4. Embedding:
    5. Operators:
    6. Loop Statement
    7. Function
    8. POST_Method
    9. String Function
    10. cookie and session

    All other tags or commands can be found in w3schools PHP

     

    Finality:

    This task is not very difficult if you have a good idea about web design and development. This is a very difficult task for those who have no idea about it. As mentioned earlier, it is possible to design a website for a variety of reasons. You just have to use HTML CSS to create a simple web site. Bootstrap is required to create a responsive website. Again you create a dynamic website by using PHP. Different types of software are used to present the website more beautifully. WordPress is needed to create a CMS website. It is possible to design a beautiful website by customizing any one of the WordPress themes.