Webinar: Front End Web Development - Trendy Web Designs Using HTML5

View Front End Web Development course details at
http://www.edureka.co/front-end-web-development
For Queries:
Post on Twitter @edurekaIN: #askEdureka
Post on Facebook /edurekaIN
For more details please contact us:
US : 1800 275 9730 (toll free)
INDIA : +91 88808 62004
Email Us : sales@edureka.co
Front End Web development

www.edureka.co/front-end-web-development
At the end of this module, you will be able to:
Objectives
 Learn how to add hyperlinks and videos in the webpage
 Understand how google maps are used to locate your location
 Introduction to CSS
 Understand the importance of Background Images, Opacity and Image Sprites
 Introduction to JavaScript
 Develop a code to create a webpage

 HTML stands for Hyper Text Markup language
 HTML has tags which are enclosed in angle brackets like <p>, <div>, <a>,
<img>, <form> etc.,
 Web browsers like Chrome, IE, Opera, Safari, Firefox etc, can read HTML file and
execute them
 A Web site consists of many pages. Each page can be developed in HTML
 Latest version of HTML is HTML-5
HTML

HTML Hyperlinks
Any website today has links linking webpages.
HTML links are hyperlinks. When clicked on the link, the user will be directed from one webpage to another or some
portion in the same page. The hyperlinks can be text or an image
Example
Hyperlink – When clicked on
“Products” hyperlink, the page
linked to it will be opened

HTML Hyperlinks
Now let us write the code to create hyperlinks to link various webpages

HTML Video
When you want to display a video, or a movie clip in the webpage, <video> tag is used
Video tag is used to display the video. The “src” attribute is used to locate the position of the video file that has to
be uploaded
You can also specify the width and height of the video
HTML5 supports uploading video of 3 formats. They are:
 MP4
 WebM
 Ogg

HTML Video
Example Output

Google Maps of Current Location
 A paragraph with the content “Click the button to get your position” will be displayed. This paragraph has the id
“demo”
 A push button is displayed with a caption of “Try It”. When this push button is clicked then getLocation() function
is executed
 GEO Location is finding the location of the user in the world using various techniques like specifying the IP address,
GPS hardware
 Now let us try to find the location of the user in the Google Maps using the HTML5 tags
 Here we use GEO Location API to allow the user share his location only with the trusted websites

In the <script> tag,
 Object of paragraph demo is obtained by using getElementById() function and stored in the variable x
 In the getLocation() function, if the browser supports geolocation then getCurrentPosition() is called. If the
function is successful then it calls success() function else it calls the Error() function.
 The success() function co-ordinates are passed as arguments and here, the longitude and latitude position of the
user is stored in latlon variable.
 An google map image is created with these attributes
 Finally this image is displayed as the content of the paragraph “mapholder”

Example

Google Maps of Current Location (Contd.)
Output

 CSS stands for Cascading Style Sheet
 CSS is used to provide the style for the HTML Elements
 Style for html elements are specified between <style> and </style> tag
 Current version of CSS is CSS-3
 The use of CSS in the HTML script makes the webpage look effective and attractive to the user at the browser end
CSS
CSS

CSS – Background Image
Example
Images are the best way to convey information and attract people to read your webpage. If the images used are
appealing to the user, he will be tempted to read your webpage
Output

 Opacity is used to give the transparency to the image
 Opacity can be given from 0.1 to 1.0
» 0.0 : Image is not displayed
» 0.5 : Image is displayed with 50% transparency
» 1.0 : Image is displayed as the original image
 Opacity is done to make the image or object look elegant. It is an effect which will lets you see what is underneath
CSS – Opacity

CSS – Opacity Code
Example
Image Opacity is 0.4
On hovering, original image is displayed

CSS – Opacity Code
Output

CSS – Image Sprites
Images can also be used as hyperlink. Instead of providing links to individual image and linking it to a webpage,
you can use Image Sprites to reduce the code size and the browser time to buffer that page.
Image Sprites is a combination of multiple images into a single image
In Image Sprites, a single image having multiple partitions is displayed. Each partition is given a hyperlink
When a portion of that image is clicked, the webpage linked with that partition is displayed to the user
Example
On Clicking this, you will be
directed to the next page
directed to the previous page
directed to the home page

CSS – Image Sprites
Example
The code to achieve the output required is as shown below:

JavaScript runs in a single threaded environment. When Java code is executed, the user will not be able to perform any
operation in the web page
To avoid this problem, the Java script is embedded in the HTML script and the Java code runs as a background task so that
foreground web page can be accessed as usual
Web Workers are responsible to run content(Java code) in the background
Java Script – Web Worker

Example
3 buttons

Example(cont..)

 In the code three buttons are displayed
 On clicking the Big Loop button, if the web worker is not created then new Web Worker object is created by giving the
js file to be executed
» Here Internalfile.js is provided. JS file will return the data. On receiving the data from js file, html element is
updated
 On click of Stop Loop button, web worker is destroy
 On click of Say Hello button, msg Hello will be displayed in alert box

Output

Website Development
Now let us use all the concepts learnt to develop a website with six sections mentioned as below:
 Header
 Navigation menu
 Left side menu
 Section middle to display the web page
 Section right for displaying advertisements
 Footer section
When any option on the left side menu or navigation menu is selected, corresponding page should be displayed

Website Development
Right Section -
Advertisements
Middle Section - Webpage
Left Section – Menu
Bar and Navigation
Menu
Header
Footer

DEMO

Questions
Slide 28 www.edureka.co/front-end-web-development

 Module 7
» Java Script
 Module 8
» Java Script
 Module 9
» Jquery
 Module 10
» Jquery & Introduction to Angular JS
 Module 1
» HTML
 Module 2
» HTML 5
 Module 3
» CSS
 Module 4
» CSS
 Module 5
» CSS 3
 Module 6
» Java Script
Course Topics

LIVE Online Class
Class Recording in LMS
24/7 Post Class Support
Module Wise Quiz
Project Work
Verifiable Certificate
Slide 30 www.edureka.co/front-end-web-development
How it Works?

Webinar: Front End Web Development - Trendy Web Designs Using HTML5

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Webinar: Front End Web Development - Trendy Web Designs Using HTML5 (20)

More from Edureka! (20)

Recently uploaded (20)

Webinar: Front End Web Development - Trendy Web Designs Using HTML5