Friday, December 6, 2019

Bootstrap

Bootstrap 4

What is Bootstrap....

  • Bootstrap is a free front-end framework for faster and easier web development
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
  • Bootstrap also gives you the ability to easily create responsive designs

History

  • Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. According to Twitter developer Mark Otto
  • After a few months of development by a small group, many developers at Twitter began to contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter development team. It was renamed from Twitter Blueprint to Bootstrap, and released as an open source project on August 19, 2011. It has continued to be maintained by Mark Otto, Jacob Thornton, and a small group of core developers, as well as a large community of contributors.
  • On January 31, 2012, Bootstrap 2 was released, which added built-in support for Glyphicons, several new components, as well as changes to many of the existing components. This version supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).
  • The next major version, Bootstrap 3, was released on August 19, 2013. It redesigned components to use flat design, and a mobile first approach.

What is Responsive Web Design....

  • Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Why we use bootstrap....


  • Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
  • Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
  • Browser compatibility: Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera)

What Bootstrap Package Includes?


  • Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background. This is is covered in detail in the section Bootstrap Basic Structure
  • CSS: Bootstrap comes with feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section Bootstrap with CSS.
  • Components: Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more. This is covered in detail in the section Layout Components.
  • JavaScript Plugins: Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one. This is covered in details in the section Bootstrap Plugins.
  • Customize: You can customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.

Where to Get Bootstrap 4....

  • You can download the latest version of Bootstrap from http://getbootstrap.com/. When you click on this link
  • There are two ways to start using Bootstrap 4 on your own web site.
    1. You can:Include Bootstrap 4 from a CDN
    2. Download Bootstrap 4 from getbootstrap.com

File structure

Pre-Compiled Bootstrap

  • Once the compiled version Bootstrap is downloaded, extract the ZIP file, and you will see the following file/directory structure



  • As you can see there are compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). Fonts from Glyphicons are included, as is the optional Bootstrap theme. 

Bootstrap Source Code

  • If you downloaded the Bootstrap source code then the file structure would be as follows: 

  • The files under less/, js/, and fonts/ are the source code for Bootstrap CSS, JS, and icon fonts (respectively). 
  • The dist/ folder includes everything listed in the pre-compiled download section above. docs-assets/, examples/, and all *.html files are Bootstrap documentation.
HTML 5 DOCTYPE

  • Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.


Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.




Wednesday, November 20, 2019

HTML

HTML


What is HTML...

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page.
  • HTML used to develop static websites.
  • HTML is 
Reference : W3schools

History of HTML


HTML Milestones infographic


Difference between HTML 5 and their older versions...



Image result for difference between html and html5"


HTML file extension

  1. <filename>.html
  2. <filename>.htm

Basic format of HTML document







HTML text editors..

  • Notepad ++
  • Coffee cup
  • Atom
  • Textmate
  • Ultra edit

What is <!DOCTYPE html>

  • A Document Type Declaration, or DOCTYPE for short, is an instruction to the web browser about the version of markup language in which a web page is written.
  • A DOCTYPE declaration appears at the top of a web page before all other elements. According to the HTML specification or standards, every HTML document requires a valid document type declaration to insure that your web pages are displayed the way they are intended to be displayed.
  • The doctype declaration is usually the very first thing defined in an HTML document (even before the opening <html> tag); however the doctype declaration itself is not an HTML tag.
  • The DOCTYPE for HTML5 is very short, concise, and case-insensitive
Reference  :  tutorialrepublic


HTML Headings


  • There are six type of heading tags are used in html.
  • <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
  • <h1> defines the most important heading. <h6> defines the least important heading



HTML Paragraph




HTML Hyperlink


  • The link's destination is specified in the href attribute. 
  • Attributes are used to provide additional information about HTML elements.
  • You will learn more about attributes in a later chapter.



HTML Images

  • Using <img> tag we can input a image file.
Note:
  • The image extention is must be considered in "src=w3schools.jpeg".

HTML Text formatting..

  • Formatting elements were designed to display special types of text:
    • <b> - Bold text
    • <strong> - Important text
    • <i> - Italic text
    • <em> - Emphasized text
    • <mark> - Marked text
    • <small> - Small text
    • <del> - Deleted text
    • <ins> - Inserted text
    • <sub> - Subscript text
    • <sup> - Superscript text


If you want to know more about HTML refer W3schools.

Monday, November 18, 2019

Languages

HTML


  • HTML stands for Hyper Text Markup Language
  • HTML allows the user to create and structure sections, paragraphs, insert images and videos, headings, and links, for web pages and applications.
  • HTML is not a programming language,it's a markup language. meaning it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize and format documents, similarly to Microsoft Word.
  • When working with HTML, we use simple code structures (tags and attributes) to mark up a website page.
  • In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext system.


Reference : Clickhere

Logo of HTML 5



Image result for html5

  • Main things of HTML
    1. Tags
    2. Elements
    3. Attributes or Property and these values

What is Tags..

  • An HTML tag is commonly defined as a set of characters constituting a formatted command for a Web page
    • <html>
    • <body>
    • <h1>
    • <table>
    • <img>

What is Elements..

  • An HTML element usually consists of a start tag and an end tag, with the content inserted in between
    • html
    • img
    • li
    • ol
    • ul

What is Attribute..

  • Attributes provide additional information about HTML elements
    • src,alt
    • width.height,border
    • color="red"
    • align="center"
    • size="10"
    • type





CSS


  • The full form of CSS is Cascading Style Sheet.
  • HTML describe what are the informations are to be displayed on browser.And CSS describe how HTML elements are to be displayed on screen.
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once

    Logo of CSS



Image result for css logo


Simple explanation for CSS





  • There are three ways of inserting a style sheet:
    1. Internal style sheet
    2. External style sheet
    3. Inline style sheet

Internal Style sheet



  • The internal style sheet is used to add a unique style for a single document.
  • It is defined in a head part of HTML
 External Style sheet



  • You can change the look of an entire website by changing just one file
  • It is defined in a extrenal text editor like note pad ,notepad ++.
Inline Style sheet



  • An inline CSS is used to apply a unique style to a single HTML element.
  • It is defined in a that particular HTML document.

PHP


  • PHP is a server side scripting language. that is used to develop Static websites or Dynamic websites or Web applications. PHP stands for Hypertext Pre-processor, that earlier stood for Personal Home Pages.
  • PHP scripts can only be interpreted on a server that has PHP installed.
  • The client computers accessing the PHP scripts require a web browser only.
  • A PHP file contains PHP tags and ends with the extension ".php".

Logo of PHP



Image result for php logo

What is scripting language...


  • A script is a set of programming instructions that is interpreted at runtime.
    A scripting language is a language that interprets scripts at runtime. Scripts are usually embedded into other software environments.
  • The purpose of the scripts is usually to enhance the performance or perform routine tasks for an application.
  • Server side scripts are interpreted on the server while client side scripts are interpreted by the client application.

Programming language VS Scripting language



Basic architecture of a PHP web application and how the server handles the requests.




Why use PHP?

  • PHP is open source and free.
  • Short learning curve compared to other languages such as JSP, ASP etc.
  • Large community document
  • Most web hosting servers support PHP by default unlike other languages such as ASP that need IIS. This makes PHP a cost effective choice.
  • PHP is regular updated to keep abreast with the latest technology trends.
  • Other benefit that you get with PHP is that it’s a server side scripting language; this means you only need to install it on the server and client computers requesting for resources from the server do not need to have PHP installed; only a web browser would be enough.
  • PHP has in built support for working hand in hand with MySQL; this doesn’t mean you can’t use PHP with other database management systems. You can still use PHP with
    • Postgres
    • Oracle
    • MS SQL Server
    • ODBC etc.
  • PHP is cross platform; this means you can deploy your application on a number of different operating systems such as windows, Linux, Mac OS etc.
Reference : Clickhere


JAVA

What is JAVA...

  • Java is a programming language that produces software for multiple platforms. When a programmer writes a Java application, the compiled code (known as bytecode) runs on most operating systems (OS), including Windows, Linux and Mac OS. Java derives much of its syntax from the C and C++ programming languages.

Logo of JAVA


Image result for java logo

  • Java has been used in different domains. Some of them are listed below:
    • Banking: To deal with transaction management.
    • Retail: Billing applications that you see in a store/restaurant are completely written in Java.
    • Information Technology: Java is designed to solve implementation dependencies.
    • Android: Applications are either written in Java or use Java API.
    • Financial services: It is used in server-side applications.
    • Stock market: To write algorithms as to which company they should invest in.  
    • Big Data: Hadoop MapReduce framework is written using Java.
    • Scientific and Research Community: To deal with huge amount of data.

Features of JAVA

    • Platform independent language
    • Rich standard library making it easy to code. You can create a whole stand-alone application using Java.
    • Java supports automatic memory allocation and deallocation (called as garbage collection).
    • Offers great performance as Java supports multithreading and concurrency, thus making it a highly interactive and responsive language.
    • Secure and simple

Reference : Clickhere



Javascript

What is JavaScript?

  • JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
  • JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular browser of that time.

Logo of Javascript


Image result for javascript logo



Advantages of JavaScript

Less server interaction − You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.
Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have forgotten to enter something.Increased interactivity − You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript




  • Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.
  • JavaScript cannot be used for networking applications because there is no such support available
  • JavaScript doesn't have any multi-threading or multiprocessor capabilities.


Reference : Clickhere










Flowchart

What is Flowchart


  • A flow chart is a graphical or symbolic representation of a process. Each step in the process is represented by a different symbol and contains a short description of the process step. The flow chart symbols are linked together with arrows showing the process flow direction.


Symbols of Flowchart

Image result for flowchart symbols


Flowchart building Constructs
  1. Sequence
  2. Selectors
  3. Iteration

Sequence




Selection


Iteration




Thursday, November 14, 2019

Pseudocode


Pseudocode


  • Pseudocode is an informal program description that does not contain code syntax or underlying technology considerations. Pseudocode summarizes a program’s steps (or flow) but excludes underlying details.
  • The System designer or Software designer is make pseudocode for a particular problem.
  • Pseudocode cannot be compiled nor executed, and there are no real formatting or syntax rules. It is simply one step - an important one - in producing the final code
  • There are some alternatives to Pseudocode. Some of them are Flowcharts, drakon-charts and Unified Modified Language (UML) charts. They will serve the purpose but they comparatively require more resources

Advantages of Pseudocode


  • Anybody can understand the pseudocode, what will that do.
  • There is no need to know the programming language.
  • It helps to understand the solution of the problem simply.


Programming Constructs

  1. Sequence
  1. Selectors
  1. Iteration
There are some words are use to input data
  • Input
  • Enter
  • Read
  • Get
There are some words are use to output data
  • Output
  • Display
  • Show
  • Print


Condition checking

IF (condition) then
      <statements to do>
else
      <statements to do>
End IF



Iteration in pseudocode

While(condition) then
        <statements to do>
        increment
End While



Simple pseudocode examples...



Example for sequence programme


  • Add 2 numbers and find the average of that numbers
Begin
    Input a number as num1
    Input a number as num2
    total=num1+num2
    average=total/2
    print total
    print average
End



Example for selection programme
  • Fine the user entered number  is odd or even

Begin
    Input a number as num
    if(num/2=0) then
        Display num is a even number
    else
        Display num is a odd number


Example for iteration programme
  • Find all multiples of 5 between 1 and 100


Begin
num=5
While (num <=100) then
Display num
num=num+5
End While
End