Thursday, March 16, 2017

Material Icons

Google provides a set of 750 icons designed under "material design guidelines" and these are known as Material Design icons. These icons are simple and they support all modern web browsers. Since these icons are vector based, they are scalable as well. To use these icons, we have to load the font (library) material-icons.

Material - Action Icons

This chapter explains the usage of Google's (Material) Action Icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - Alert Icons

This chapter explains the usage of Google's (Material) Alert icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - AV Icons

This chapter explains the usage of Google's (Material) AV icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - Communication Icons

This chapter explains the usage of Google's (Material) Communication icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - Content Icons

This chapter explains the usage of Google's (Material) Content icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - Device Icons

This chapter provides you the usage of Google's (Material) Device Icons. Assume that custom is the CSS class name in which we defined the size and colour as shown below.
<style>
   i.custom {font-size: 2em; color: green;}
</style>

Material - Editor Icons

This chapter explains the usage of Google's (Material) Editor icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - Hardware Icons

This chapter explains the usage of Google's (Material) Hardware icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - Image Icons

This chapter explains the usage of Google's (Material) Image icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>

Material - Maps Icons

This chapter explains the usage of Google's (Material) Maps icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>

Material - Navigation Icons

This chapter explains the usage of Google's (Material) Navigation icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - Notification Icons

This chapter explains the usage of Google's (Material) Notification icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - Social Icons

This chapter explains the usage of Google's (Material) Social icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Material - Toggle Icons

This chapter explains the usage of Google's (Material) Toggle icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!DOCTYPE html>
<html>
   <head>

Bootstrap Glyphicons

This is a library of monochromatic icons available in raster image formats, vector image formats, and as fonts. It provides over 250 glyphs in font format. You can use these fonts in your web projects. These glyphs are not free, however if you don't have to spend anything in case you are using them in Bootstrap based projects.

Bootstrap Components

This chapter explains the usage of Bootstrap Glyphicons (Components). Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<html>
   <head>
      <link rel = "stylesheet" href = <link rel = "stylesheet" 
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      

Web Icons - Useful Resources

The following resources contain additional information on Web Icons. Please use them to get more in-depth knowledge on this.

Discuss Web Icons

We have a number of Icon Fonts (libraries) available that can be used on HTML pages just the way we use normal text fonts. Font Awesome, Bootstrap Glyphicons, and Google's Material Icons are the prominent Icon Fonts used frequently by web developers. This tutorial explains how to use these Icon Fonts in practice.


Web - Basic Concepts

What is Internet?

The Internet is essentially a global network of computing resources. You can think of the Internet as a physical collection of routers and circuits as a set of shared resources.
Some common definitions given in the past include −

Web - How it Works ?

On the simplest level, the Web physically consists of the following components −
  • Your personal computer − This is the PC at which you sit to see the web.
  • A Web browser − A software installed on your PC which helps you to browse the Web.
  • An internet connection − This is provided by an ISP and connects you to the internet to reach to any Website.

Web - Browser Types

Web Browsers are software installed on your PC. To access the Web, you need a web browser, such as Netscape Navigator, Microsoft Internet Explorer or Mozilla Firefox.
Currently you must be using any sort of Web browser while you are navigating through our site tutorialspoint.com.

Web - Server Types

Every Website sits on a computer known as a Web server. This server is always connected to the internet. Every Web server that is connected to the Internet is given a unique address made up of a series of four numbers between 0 and 255 separated by periods. For example, 68.178.157.132 or 68.122.35.127.

Web - Site Advantages

If you are constructing a Website, then we hope you are aware of its advantages as well. Here, in this chapter, we have listed out a few major advantages of keeping a website.

Web - Skills Required

If you are planning to maintain a Website, then you would require a specific set of skills. This skillset can be endless because today, there are numerous technologies available and many are coming everyday. So you have to plan and affirm on any one of the available technologies and go ahead for your project.

Web - Tools Required

As a basic necessity, you need a good internet connection from a reliable service provider which provides decent connectivity and speed. Evaluate vendors based on their services and support before selecting. Here due diligence plays a major part.
The following tools and infrastructure will help you in developing a Website −

Web - Domain Names

A domain name is the part of your Internet address that comes after "www". For example, in Tutorialspoint.com the domain name is tutorialspoint.com.
A domain name becomes your Business Address so care should be taken to select a domain name. Your domain name should be easy to remember and easy to type.

Web - Site Construction

Now you are ready for a website construction. Before proceeding further, you have to take many factors into consideration. I cannot list out each and everything but I have described the major factors in this tutorial which will help you to have a better website −

Web - Hosting Concepts

Web hosting deals with putting the contents of your website on a Web server. Hosting your website on your own server could be an option. But this will become very much expensive unless you are hosting a site like yahoo.com or google.com. So this tutorials does not cover how to set up your own hosting server.

Web - Ecommerce Hosting

Ecommerce is a way of doing business through Internet. You are doing ecommerce, especially when you are selling your products or services through Internet. If you planning to put a website which will have transactions such as buying or selling items or services, then it means you are going to setup an ecommerce website.

Web - Site Backup

Your server's hard drive crashed. Your site is hacked and the hacker deleted all your files. Your web host disappeared with your money and your data. Even worse, there was and earth quack and your ISP building is gone down and everything is lost.

Web - Site Statistics

Once your site is up and running, it is important that you track your visitors and analyze what they are using. You should have a detailed information on the following −
  • Who is your visitor? − You should have your site visitor IP address available with you to know the geographical location and identity of that visitor.

Web - Site Popularity

You designed a website and developed it and finally hosted it. Now just think how many site visitors know about this site address and related service.
If you want to make your site a success, then the actual work starts after hosting your website successfully. It includes the following actions, but gaining popularity is certainly not limited to these actions.

Web - Free Graphics

Graphic elements play a crucial role on any website. If you have time and talent to design your web graphics, then it is great. It does not only require time and talent to have web graphics, but you need to spend a good deal of money as well to buy good graphics software like Paint Shop Pro or Adobe Photoshop.

Web - Summary

We do hope that you found this tutorial useful and informative. Here we have covered all the basics of Web and Web Hosting.
Now it is time to move forward and we will encourage you to start developing your website using our HTML Tutorial.

Web - Quick Guide

Web - Basic Concepts

What is Internet?

The Internet is essentially a global network of computing resources. You can think of the Internet as a physical collection of routers and circuits as a set of shared resources.
Some common definitions given in the past include −

Web - Useful Resources

The following resources contain additional information on Web Developers Guide. Please use them to get more in-depth knowledge on this.

Useful Links on Web Development

  • W3C Consortium - Official web site of W3C Consortium. This site should be book marked for easy access.

Discuss Web Development

This tutorial provides a simple and practical way of understanding the essential areas of developing a website. It also provides elementary insights and an overview of the subject that is necessary to understand the world of web technologies. This tutorial covers all that is required to become a good Web Developer.

W3.CSS - Overview

What is W3.CSS?

W3.CSS is a Cascading Style Sheet (CSS) developed by w3schools.com. It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design.
Some of its salient features are as follows:

W3.CSS - Environment Setup

How to Use W3.CSS?

There are two ways to use W3.CSS:
  • Local Installation - You can download the W3.CSS file on your local machine and include it in your HTML code.
  • CDN Based Version - You can include the W3.CSS file into your HTML code directly from the Content Delivery Network (CDN).

W3.CSS - Containers

HTML5 has the following container elements:
  • <div> - Provides a generic container to HTML content.
  • <header> - Represents the header section.
  • <footer> - Represents the footer section.

W3.CSS - Code Coloring

W3.CSS provides excellent support for syntax highlighting of the following languages:
  • HTML - Use classes w3-code htmlHigh on the container having HTML Code.
  • CSS - Use classes w3-code cssHigh on the container having CSS Code.
  • JS - Use classes w3-code jsHigh on the container having CSS Code.

W3.CSS - Cards

W3.CSS has several special classes to display containers as paper-like cards with shadow.
Class NameDescription
w3-cardStyles a container for any HTML content with border
w3-card-2Styles a container for any HTML content with 2px bordered shadow
w3-card-4Styles a container for any HTML content with 4px bordered shadow

W3.CSS - Responsive Design

W3.CSS has several special classes to create a responsive design.
Class NameDescription
w3-halfSets the container to occupy 1/2nd of the window on medium or large screen devices. If a screen is smaller than 601 pixels, then it resizes the container to 100%.

W3.CSS - Grids

W3.CSS provides a 12 column fluid responsive grid.
It uses the w3-row and w3-col style classes to define rows and columns respectively.

W3.CSS - Forms

W3.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used:
Class NameDescription
w3-groupRepresents a bordered container. Can be used to group a label and input.
w3-inputBeautifies an input control.
w3-labelBeautifies a label.
w3-checkbox w3-checkmarkBeautify a checkbox/ radio button.

W3.CSS - Buttons

W3.CSS has a very beautiful and responsive CSS for customizing the look of a button. The following CSS are used:
Class NameDescription
w3-btnRepresents a standard button. Can be used to style a link as button as well.
w3-btn-floatingRepresents a floating button being circular in design.
w3-btn-floating-largeRepresents a large floating button.

W3.CSS - Tooltips

W3.CSS supports a different kind of tooltip using w3-tooltip class. Take a look at the following example. Here we've put a tooltiptext within a div and an image and applied w3-tooltip on the parent div.
<div class="w3-tooltip">
   <div class="w3-text w3-container w3-teal" style="width:255px;">
      <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
   </div>
   <div>

W3.CSS - Modal Dialog

W3.CSS can be used to display a customizable modal dialog box instead of the standard JavaScript alert.
It uses w3-row and w3-col style classes to define rows and columns respectively.
Class NameDescription
modal-dialogRepresents the main parent window to define a dialog box.
w3-modal-dialogRepresents the dialog content container.
w3-modal-contentRepresents dialog contents.

W3.CSS - Tables

W3.CSS can be used to display different types of tables using various styles over w3-table.
Class NameDescription
w3-tableRepresents a basic table without any border.
w3-stripedDisplays a stripped table.
w3-borderedDraws a table with a border across rows.

W3.CSS - Lists

W3.CSS can be used to display different types of lists using various styles over w3-ul.
Class NameDescription
w3-ulRepresents a basic list without any border.
w3-stripedDisplays a stripped list.
w3-borderedDraws a list with border across rows.
w3-borderDraws a list with border.

W3.CSS - Images

W3.CSS provides options to display images in beautiful and interesting ways using w3-image as the main class.
Class NameDescription
w3-imageRepresents a basic styled image without any border.
w3-circleDisplays an image within a circle
w3-titleUsed to put text over an image.
w3-cardDraws an image as a card.

W3.CSS - Icons

W3.CSS supports the following popular icon libraries:
  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

W3.CSS - Colors

W3.CSS supports a rich set of color classes. These color classes are inspired and developed considering the colors used in marketing, road signs, and sticky notes.

W3.CSS - Navigation

W3.CSS has several special classes to display a navigation bar or a menu on a website quickly.
Class NameDescription
w3-topnavStyles a list as a horizontal menu/navigation bar.
w3-sidenavStyles a list as a vertical menu/navigation bar.

W3.CSS - Utilities

W3.CSS has several utility classes which are very useful for day-to-day designing needs.
  • Color utility classes - Examples: w3-red, w3-yellow
  • Padding utility classes - Examples: w3-padding-jumbo, w3-padding-16
  • Margin utility classes - Examples: w3-margin-8, w3-margin-64

W3.CSS - Quick Guide

W3.CSS - Overview

What is W3.CSS?

W3.CSS is a Cascading style sheet, CSS developed by w3schools.com. It helps in creating faster, beautiful and responsive websites. It is inspired from Google Material Design.
Following are its some of the salient features:

W3.CSS - Useful Resources

If you want to list down your website, book or any other resource on this page then please contact at webmaster@tutorialspoint.com

Websites on W3.CSS

  • W3.CSS - W3.CSS official home page

Discuss W3.CSS

W3.CSS is a Cascading Style Sheet (CSS) developed by w3schools.com. It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design.

TypeScript - Classes

TypeScript is object oriented JavaScript. TypeScript supports object-oriented programming features like classes, interfaces, etc. A class in terms of OOP is a blueprint for creating objects. A class encapsulates data for the object. Typescript gives built in support for this concept called class. JavaScript ES5 or earlier didn’t support classes. Typescript gets this feature from ES6.