Introduction to HTML language Web design.pptx

pment
Slide 2
Objectives
At the end of this module, you will be able to:
 Importance of Web Development
 Web Designer Vs. Web Developer
 Front-end and Back-end Web Development
 HTML, CSS and JavaScript - An Overview
 JavaScript Frameworks - jQuery and AngularJS
 Advanced Web Development Topics

Importance of Web Development
Slide 3
 The Internet is ubiquitous
• Accessible through mobile and desktop
• Customers/users need to find you/your business
• Builds trust in your organization and improves your reputation
• Your website is your first round-the-clock sales person!
 The Website
• Creates first impression of your business
• Create it to suit the needs of your target audience
• Reflects your expertise and reputation
• Can bring business from any part of the world!
• Call to Action – Encourage the users to give you business
 You need Web Development skills to create a Website!

Web Designer Vs. Web Developer
Slide 4
 A Web Designer
• Designs the look and feel of a website (creative side of website)
• Decides the layout, fonts, color, images and overall branding
• Creates the visual mock-up of the website
• Rarely does the development of a website!
• A Right-brained (Creative) Person
 A Web Developer
• Brings the website mock-up to life on the Internet (development side of website)
• Develops the website and hosts on a web server
• Has Web Development Skills: HTML, CSS, JavaScript, PHP, Perl, Python, Java, Ruby
• A Left-brained (Logical) Person
 Gain Web Development skills to become a Web Developer!

Front End and Back End Web Development
Slide 5
 Front End Web Development
• Defined components on the page with HTML
• Make them look pleasing with CSS
• Enable interactivity with JavaScript
• Enhance productivity with use of frameworks
 Back End Web Development
• Create the page components and content dynamically on the web server
• Send the HTML + CSS + JavaScript to web browser (used by a human user)
• Generate pages by programming in Java, JavaScript, PHP, Perl, Python, Ruby
• Aim to achieve fast response times to end users
 Front End Web Development is the focus of this webinar!

HTML, CSS, and JavaScript – An Overview
 HTML
• Hypertext Markup Language
• Structure of Page
 JavaScript
• Interactivity with User
• Dynamic Updates in a Web Page
 CSS
• Cascading Style Sheets
• Presentation/Styling
Slide 6

Hypertext - Origins
 HyperText
• Text with references (hyperlinks) to other text
 “Hyper” - meaning
• Greek Origin: “over”, “beyond”
 First Idea
• Vannevar Bush, USA, in 1945
Slide 7

A Simple HTML5 Page
Slide 8
 Save the following code in a test.html file
<!DOCTYPE html>
<html>
<head>
<title>This is a Web Course</title>
</head>
<body>
<p>Welcome to HTML5, CSS3 and JavaScript!</p>
</body>
</html>

Hosting a Web Site
Slide 9
 A Web Site
• Serves one or more HTML Pages
Default Page: index.html, index.php
 Served / Hosted by a Web Server
• HTTP Web Server
httpd, apache2, Ngnix, inetmgr.exe - Internet Information Server (Microsoft’s)
• Web Application Server
Apache Tomcat (Open Source), IBM WebSphere (Licensed)
 Technologies
• HTML, HTTP, TCP/IP Protocols
• Operating Systems: Linux, Windows, MacOS

HTML Page
Slide 10
 HTML (Web) Page / Document
• User Interface for the Web (site or application)
• A plain text file – human readable
• Transported on HTTP - HyperText Transfer Protocol
 Page Types
• Static – ready-made pages with fixed page content
File Extension: .html, .htm
• Dynamic – generated on the fly with varying page content
Generated on the Web Server
Interspersed with JavaScript, PHP, JSP, ASP
File Extensions: .js, .php, .jsp, .asp, .aspx

CSS - Introduction
 Cascading Style Sheet
• Describes the look and formatting of a page
• Used for Changing Presentation and Styling
• Can apply to a mark-up language
 HTML, XHTML, XML, SVG
 Separates Content from Presentation
 Properties (Attributes) Styled
• Layout, Font (Typography), Color, Background
• Box Properties: Border, Margin, Padding
• Lists, Tables
Slide 11 © Copyright 2015 – Abheri Technologies Pvt. Ltd.

CSS Syntax (Contd./-)
 Style Selector
• The HTML elements to which the Style rule should be applied
• It is a match expression
• Specified as:
 Element’s tag name
 h1, p, label - case insensitive
 Value of Element’s attribute
 id, class - Case Sensitive
 Element’s placement in the Document tree
 Child element is nested within Parent
 A Sibling element is at the same nesting level

CSS Syntax (Contd./-)
 CSS Declaration Block
• List of Declarations
• Enclosed in curly braces { . . . }
• Declaration
 property : value(s) ;
• property and value(s) are pre-defined
• Property name is unique
• Property value – Specified in multiple formats
 keywords (words) or mnemonics (in combination with some symbols like: #, /)
 numerical, hexadecimal, or a combination
 some values may have units of measure

New CSS3 Selectors
 New CSS3 Structural Pseudo-Class Selectors
• E:first-of-type – Selects the first element of type E for its parent
li:first-of-type { color: red; }
• E:last-of-type - Selects the last element of type E for its parent
li:last-of-type { color: yellow; }
• E:only-child - Selects if E is only the child of its parent
li:only-child { color: blue; }
• E:nth-child(n) - Selects nth child of the element E
li:nth-child(3) { color: yellow; }
• E:nth-last-child(n) - Selects nth last child of the element E
li:nth-last-child(2) { color: red; }

CSS3 – 2D Transforms
 Transformation
• Change of position, shape and size of an element
 CSS3 Transforms
• 2-D: Two Dimensions
• 3-D: Three Dimensions (not covered in this course)
 Transform Operations
• move, scale, spin, stretch and turn elements

CSS3 – 2D Transforms (Contd./-)
 Specified with transform attribute
• Translation – Movement along X-axis and Y-axis
transform: translate( 50px, 100px );
• Rotation – in clock-wise direction
transform: rotate( 5deg );
• Scaling – increase/decrease size along width and height
transform: scale( 2, 2 );
• Skewing – tilting (turning) in X-axis and Y-axis directions
transform: skew( 10deg, 5deg);

CSS3 Transitions
 Changing from one style to another (on an event)
 CSS property on which the transition effect has to take place
 Time Duration over which transition has to take place (smoothly)
 Specified in seconds (s) or milliseconds (ms)
p { width: 100px; }
p:hover { width: 200px; transition: width 2s; }
 Transition starts on events
 Events: hover, active, checked, focus, enabled, disabled
 @media queries, and JavaScript
 Specify multiple transitions sets with a comma
p { width: 200px; height: 100px; }
p:hover {
width: 400px; height: 200px;
transition: width 2s, height 5s; }

JavaScript – An Introduction
 Mocha, later renamed as LiveScript - Developed by Netscape
 Based on ECMAScript 5.1 (Ver. 6.0 is finalized in mid 2015)
 LiveScript  JavaScript (due to Java popularity)
 Scripting Language for Web Browsers
• Dynamically Typed
• Interpreted by JavaScript Engine
 Can not Do (for Security Reasons)
• Unlimited reading/writing of files from client machine’s file system
• Writing to the files on the Server
• Can not close a window that was not opened by it
• Can not read from a web page served by another web server
 Microsoft’s version - JScript

Document Object Model (DOM) (Contd./-)
 Structure and Style of a Page, Access / Update Content
 DOM + JavaScript = Dynamic HTML (on client-side)
 What JavaScript can do with DOM?
 Change an HTML Element
 Change an attribute of an HTML Element
 Change the CSS style of an HTML Element
 Remove an existing HTML element or its attributes
 Add new a HTML Element or a new attribute to an Element
 React to an event associated with an HTML Element
 Create a new event listener and associate with an HTML Element

HTML DOM Methods
 DOM Methods – Finding HTML Elements
• getElementById() Method
 Gets the HTML Element with specified ID
• getElementsByClassName() Method
 Gets the HTML Elements with specified class name
document.getElementsByClassName("middlePara")[0].innerHTML = "Welcome
to Edureka!";
document.getElementsByClassName("middlePara")[1].innerHTML = "This is
HTML5, CSS3 and JavaScript Course!";
• getElementsByTagName() method
 Gets the HTML Elements with specified element tag
document.getElementsByTagName("p")[0].innerHTML = "Welcome to
Edureka!";
document.getElementsByTagName("p")[1].innerHTML = "This is HTML5,
CSS3 and JavaScript Course!";

jQuery - Introduction
 jQuery Core – a Cross-Platform JavaScript Library
• Simplifies client-side JavaScript scripting for a web page
• It is FREE and Open Source
• Used by about 6,000 most visited websites
• It uses the familiar HTML DOM model
 Latest Versions
• Version 1.11.3 - has support for IE 6/7/8
• Version 2.1.4 - has NO support for IE 6/7/8
• Development Version
 For use during development of the website
• Minified Version
 For use in production (live / online) use of website

jQuery - Introduction
 Why use jQuery?
• JavaScript Framework
• Separates HTML and JavaScript in a web page
• Eliminates cross-browser incompatibilities
• Simple/Short, Clean and Easy to read, write and understand
 What jQuery can do?
• Can Select Elements
 Has Selectors are similar to CSS Selectors
• Can Manipulate the Selected Elements
• Can Modify the Style of the Selected Elements
• Supports Events, Effects and Animations
• Supports JSON Parsing and Ajax (Asynchronous JavaScript + XML)

jQuery Basics
 Download the latest version
• From jquery.com website
 Reference it in HTML file
• Host it on your Web Server and Use it with <script> tag
<script src="jquery-2.1.3.js"></script>
• Point to a Public Web Server and Use it with <script> tag
 Google CDN Server (recommended) CDN – Content Delivery Network
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
 Microsoft CDN Server
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js">
</script>
 MaxCDN CDN Server (moved from MediaTemple, before that Amazon)
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
• Do not put the jQuery code in the <script> tag that loads jQuery library

AngularJS - Introduction
 Developed by Google
 Based on MVC Pattern – on Front-End (Browser) side
• Model – Sourcing and Managing Data
• Controller – Application Logic – Decides what/when to display
• View – Presentation of Data – How (Where) to display the data
 In AngularJS
• Model
 Represents current state of the application
 Stored in Object Properties
• View
 Displays the data in the Page’s DOM
• Controller
 Manages the relationship between the Model and the View (JavaScript Code)
• Data Binding Concept
 Map parts of UI to a JavaScript Object’s properties
 Sync between them happens automatically

Web Application
Architecture
.
Basics, Components, Design and Development

Web Application
Types of Software
Desktop Applications
Server Softwares
Plugins
Embedded Software
What is a Web Application?
Is Website a Web Application?

Facebook – the Social Network
Pixlr – Image Creation, Photo Editing & Effects
Zamzar – Online File Conversion
Gmail – Webmail Clients
bit.ly – Short URL Services
WolframAlpha – Computational Knowledge Engine

probable components of a modern
Website

Components of a Website
Logo
Navigation
Search
Content
Images & Multimedia
Gallery & Slideshows
Blog
Contact Form
Registration form
Members only area
Downloadable files
Shopping cart

Lets list all probable components
of a Web App say Facebook

Components of a Web Application
Logo
Sign-up or Log in
Dashboard
Navigation
Notifications
Search features
Activity Log
Statistics
Various Forms
Settings
User Profiles
Reports

In a most simplified language a full fledged Web Applications
consist of three basic components
Architecture of a Web Application

GUI – Client Side
The user interface is always rendered on a browser
Popular browsers
Programming languages
HTML (renders actual content)
CSS (Beautifies the content)
Javascript (Add effects, interaction, alter content)

Web Server
Web servers are computers that deliver Web pages.
Web server has an IP address and most of the times a domain
name
Eg. http://www.webfanzine.com/index.html
Any computer can be turned into Web Server

Web Server
Programming languages
PHP
ASP.NET
JAVA
PERL
Python
Ruby on rails

Data Storage
Server side scripting language can communicate with
database
Common databases
MySQL
SQL (DB2 & Microsoft)
Microsoft Access
Oracle

Basic Web Application - Requirements
Local Web Server
A browser
Basic knowledge of HTML, CSS, Javascript, PHP and MySQL
Online Web Server to deploy the application

Basic Web App – Development
Idea – Decide what is the purpose of your web application
Wireframe – On paper or a rapid prototype
Create a dedicated folder for your app
Create separate folders for css, js, images etc
Create main file – name it index.php

The index.php file will be similar to HTML (.html) file,
difference being you can write PHP code inside that file
Follow basic structure of HTML file
After you write HTML for the content that will be displayed,
add CSS to each element as per the design

All CSS will go in separate file say main.css in CSS folder
Follow PHP syntax to do any kind of computation or server
side validation.
In order to fetch or save data to database
Connect to MySQL database
Fetch the data in PHP variables or save the data
Close the connection
You can display the fetched data by populating the HTML
elements with PHP variables

Save this folder (say firstapp) into proper (www) folder of your
local web server
You can open your application by opening url like
http://localhost/firstapp/ in your browser.
Let us check the actual mini app for the syntax

Introduction to HTML language Web design.pptx

More Related Content

Similar to Introduction to HTML language Web design.pptx (20)

More from lekhacce (19)

Recently uploaded (20)

Introduction to HTML language Web design.pptx