Ensuring Technical Readiness For Copilot in Microsoft 365
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
1. 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
2. Slide 2 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
3. Slide 3 www.edureka.co/front-end-web-development
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
4. Slide 4 www.edureka.co/front-end-web-development
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
6. Slide 6 www.edureka.co/front-end-web-development
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
8. Slide 8 www.edureka.co/front-end-web-development
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
9. Slide 9 www.edureka.co/front-end-web-development
Google Maps of Current Location
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”
13. Slide 13 www.edureka.co/front-end-web-development
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
14. Slide 14 www.edureka.co/front-end-web-development
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
15. Slide 15 www.edureka.co/front-end-web-development
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
18. Slide 18 www.edureka.co/front-end-web-development
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
On Clicking this, you will be
directed to the previous page
On Clicking this, you will be
directed to the home page
20. Slide 20 www.edureka.co/front-end-web-development
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
23. Slide 23 www.edureka.co/front-end-web-development
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
Java Script – Web Worker
25. Slide 25 www.edureka.co/front-end-web-development
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
30. 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?