Web Technologies Notes

Web Technologies Notes

Web Technologies

  • DECAP472
  • LOVELY PROFESSIONAL UNIVERSITY
  • PUNJAB (INDIA)
  • Edited by Dr. Pawan Kumar

WEB TECHNOLOGIES

  • Edited By: Dr. Pawan Kumar

WEB TECHNOLOGIES

  • Author’s Name: Parminder Kaur, Aseem Khanna
  • Published By: Lovely Professional University
  • Publisher Address: Lovely Professional University, Jalandhar Delhi GT road, Phagwara - 144411
  • Printer Detail: Lovely Professional University
  • Edition Detail: (I) ISBN: 978-93-94068-40-7 Copyrights@ Lovely Professional University

CONTENT

  • Unit 1: Introduction to HTML5 (Aseem Khanna) 1
  • Unit 2: Features of HTML5 17
  • Unit 3: Introduction to CSS3 30
  • Unit 4: CSS Class and ID 43
  • Unit 5: Advanced Topics of CSS3 56
  • Unit 6: Bootstrap 70
  • Unit 7: Introduction to JavaScript 83
  • Unit 8: Variables and Functions 95
  • Unit 9: Introduction to JavaScript Using Objects and Functions 107
  • Unit 10: Using JavaScript to Build Web Applications 124
  • Unit 11: Basics of React 136 (Parminder Kaur)
  • Unit 12: Pure React Prop State and the Component Tree 151
  • Unit 13: React Router and Server 162

Unit 01: Introduction to HTML5

Objectives

  • Discuss introduction regarding HTML5
  • Explain document development environment
  • Known how MacOS environment setup done
  • Describe GitHub and browser Sync.

Introduction

  • HTML 5 is an update of HTML, which is a typical programming language for displaying dynamic content on Web pages.
  • HTML5 was developed to remove the compatibility issue which was affecting the standard HTML4.
  • One of the major differences between HTML5 and its older versions was proprietary plugins and APIs
  • It allows providing an interactive interface for loading all types of elements easily. For example, In HTML5 we need not install Flash plugins it will run by default in the browser.

1.1 HTML AND HTML5

  • HTML abbreviation consists of two words that have a high significance

    • Hypertext: Text (it often has embedded images, videos etc.) that is organized in order to link related items
    • Markup: A style guide for formatting whatsoever to be printed in hardcopy or soft copy format
    • Language: A language that a computer system understands and uses to execute commands.

  • It determines the basic structure of web pages; only basic HTML is not enough to make the webpage look dynamic and interactive.

  • HTML Syntax:

    <!DOCTYPEhtml>
<metacharset="UTF-8">
<scripttype="text/javascript"src="xyz.js"></script>

  • HTML5 supports multimedia on mobile devices.

  • New syntactic features were introduced to support this, such as video, audio and canvas tags.

  • HTML5 also introduces new features which can really change the way users interact with documents including:

    • New parsing rules for boosting flexibility
    • Updated attributes
    • Exclusion of outdated or redundant attributes
    • Drag and drop capabilities from one HTML5 document to another
    • Offline editing
    • Messaging enhancements
    • Detailed rules for parsing
    • MIME and protocol handler registration
    • A common standard for storing data in SQL databases (Web SQL)

  • HTML5 was implemented by the new working group of the World Wide Web Consortium (W3C) in 2007, as this group published the first public draft of HTML 5 in January 2008.

1.2 First HTML5 Document Development Environment Setup

  • HTML5 language has a custom syntax for HTML language which is well-suited with HTML 4 and XHTML1 documents published on the Web, but that has not enough compatibility with some of the hidden SGML features of HTML4.

  • HTML5 is not based on any particular rule or syntax as XHTML in which we use lower case tag names, quotes our attributes, all attribute that have a value and to close all empty elements.

  • HTML5 is more robust, flexible and comes with lot of supporting features:

    • Uppercase tag names.
    • Quotes are optional for attributes.
    • Attribute values are optional.
    • Closing empty elements are optional.

  • The DOCTYPE

    • It is the older version of HTML with longer DOCTYPEs and the HTML language was based on the SGML and mandatory to have a reference to a DTD.
    • Syntax used in HTML5 by authors to specify DOCTYPE and it is case sensitive.

  • Character Encoding

    • HTML5 Developers can use simple syntax for Character Encoding below-

  • Script Tag

    • It is a common tag practiced to adda attribute having value “text/javascript” below is the syntax –

    ```html
    <scripttype=