Introduction to Web Development

Introduction to the web development terminologies: * Introduction to the journey of web development, need to create websites, difference between a webpage and a website, how to open a webpage, use of a browser, list of various browsers and HTML as a language of creating the webpages, CSS the style sheet language to help in making the document look presentable and JavaScript as a language to make the HTML pages dynamic. * Basic Structure of HTML document * The HTML document contains two segments i.e. HEAD and BODY. Use of HEAD and BODY in HTML document. * Basic HTML tags * Meaning of tag, HTML uses predefined tags, Paired tags or Container tags, Empty tags

> Images can be inserted at any location in a webpage. > Linking allows users to move from one page to another or from one section of the webpage to another section. Links in HTML is known as hyperlinks. In this topic, you’ll learn how to: * Able to insert an image. * Identify, differentiate and apply various attributes of image tag. * Identify and apply various properties of style attribute in image tag. * Understand and apply anchor tag along with its important attributes to create links. Tags covered with attributes : * IMG - SRC, HEIGHT, WIDTH, BORDER, ALT, TITLE, STYLE * A - HREF, TARGET

> Inline style helps to add the style attribute to any HTML tag to style an element. > PRE tag is used to display the text within the block in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. > Lists are used to present the information or contents in well formed and semantic way. Each type of list in HTML from three different forms has a specific purpose and meaning. Unordered list is used to create a list of related items, in no particular order. Ordered list — Used to create a list of related items, in a specific order. Description list is used to create a list of terms and their descriptions. In this topic, you’ll learn how to : * Add an image as a background to any heading in the webpage * Able to display a story in narrative format * Understand, identify, differentiate and apply the different types of List elements in HTML document and the style attribute properties Tags covered with attributes: * H1 - STYLE (BACKGROUND-IMG) * PRE * OL - TYPE (A/a/I/i/1), START, STYLE * LI * UL -TYPE (DISC, CIRCLE, SQUARE), STYLE * LI * DL * DT * DD

> Table in HTML is used to put the data in the form of rows and columns. The data in the cell can be a simple text, image or any link. In this topic, you’ll learn how to: * Add a table in HTML to display the achievements * Identify, differentiate and apply different style attributes in the table to make the information understandable, more meaningful and change the look of it * Identify, differentiate and apply different types of attributes in table (merging rows/ columns) Tags covered with attributes : * TABLE- Border, cellspacing, cellpadding, bgcolor * TR (Table Row) * TH (Table Heading) - rowspan, colspan, style * TD (Table Data) - rowspan, colspan, style

>An image map is a method to create different clickable areas on an image. In this topic, you'll learn how to: * Identify the coordinates of the images which are to be tagged while writing HTML code * Identify, differentiate and apply the image/ object tagging feature using map and area tags Tags covered with attributes : * IMG - SRC, ALT, USEMAP * MAP - NAME * AREA - HREF, COORDS, SHAPE, TARGET, ALT, TITLE

> Media files are pictures, music, video and documents. DIV tag is helpful to organize different type of information in different sections and is used to group block elements so as to format the sections with CSS . External style sheet defines the styling rules in a separate file saved with the extension .css In this topic, you'll learn how to : * Identify, differentiate and apply different types of media files in the webpage * Understand and apply the div tag in HTML to create different sections for different types of files in a webpage to make it organized Tags covered with attributes: * IMG - SRC, ALT, TITLE * AUDIO - CONTROLS, AUTOPLAY, PRELOAD * SOURCE - SRC, TYPE * VIDEO CONTROLS * SOURCE - SRC, TYPE * IFRAME - SRC, ALLOWFULLSCREEN * DIV - CLASS

> A favicon stands for favorite icon which is used as a website icon, tab icon, URL icon, or bookmark icon. > Web layout is the activity of positioning the various HTML elements that makes various web pages in a well-structured manner and give appealing look to the website. In this topic, you'll learn how to: * Add a favicon – an icon in front of the title of the webpage * Identify, differentiate and apply various sematic tags in HTML document * Create an external style sheet for web layout which can be used as a template for other webpages of the website * Create the blogged theme navigation webpage using CSS and semantic tags Tags covered with attributes: * LINK - REL, HREF, SIZES * DIV - ID * HEADER - CLASS * NAV - CLASS * SECTION - CLASS * ASIDE - CLASS * ARTICLE - CLASS * FOOTER - CLASS * DETAILS * SUMMARY * ADDRESS

* Apply the specific style to one or more webpages * Differentiate, identify and apply the theme template to all the webpages * Able to create the sense of making the website from the webpages after connecting all the webpages using templates and styles

* Able to differentiate between domain name and server space * Able to know about creating GitHub account * Upload the website on the GitHub account

` ``` • Understand the concept of forms in HTML • Able to differentiate, identify and apply various user input fields in forms • Able to create a form in HTML • Able to add button and use action attribute of form tag to send email while clicking on button. ``` `

* Able to understand the purpose of using JavaScript Language * Make use of <script> and </script> tag for writing the JavaScript code in the HTML page. * Identify, differentiate and apply different methods to display using JavaScript * Use of innerHMTL, document.write, alert, console.log() to display messages * Identify, understand and apply document.write() method to display the contents on the webpage.

* Understand the concept of event handling * Identify, understand and apply the use of onload event handling to display a message while loading the object. * Identify, understand and apply the use onclick event handling on button to generate a response. * Apply the use of onclick event handling on button to change the contents of the HTML element * Able to make use of onclick event handling on button to change the attributes of the HTML element

* Identify and use prompt() and confirm() functions to get input from user * Use window.location() to open/redirect webpage from existing webpage * Able to use different types of variables using var keyword * Understand and apply the conditional statements using relational operators for decision making * Able to make use of variables with restricted scope and constant values using let and const keywords. * Identify, differentiate and apply different types of operators (Arithmetic, Relational and logical operators) * Able to make use of conditional statements to compare the variables. * Able to make use of alert() function to give messages while clicking on the links.

* Able to get the value of any element using the value property * Creating new element on webpage from JavaScript using createElement() method and adding the created element in any existing element using appendChild() method * Changing the value of DIV/p or any closed element using innerHTML property * Identify and apply the use of loops (for and while) in JavaScript * Creating an array in JavaScript and accessing an element of an array * Use of random function of Math object to generate random colors or random numbers

* Able to create a canvas using canvas tag for drawing objects on it * Identify, differentiate and apply various functions to draw shapes on canvas * Able to make use of fillStyle() and fill() function to fill colours in the shapes drawn * Able to draw images using image(), drawImage() and onLoad() functions * Make use of strokeText() to draw text on canvas * Use of functions to fill gradient colors to shapes * Use of loops to animate an image (or draw images multiple times) * Make use of some properties to get the viewable width and height of any element * Use of setInterval() function to execute a code for multiple times after specific interval * Use of setTransform() function to animate the canvas in different ways

* Use of pseudo class to add hover effect on links. * Use of pseudo class to add hover effect on div element or any closed element. * Use of display property to hide and show content when hovered. * Use of transform function with scale, rotate, skew, translate properties to add effects on hover. * Use of properties like width, height, content, position and display properties to add effects on hover on various elements like a, h1, li, img etc. * Use of opacity property to change transparency of elements on hover * Use of border-radius property to draw different shapes on hover on div element.

* Adding global variables in CSS and using these variable in JavaScript to style any element with the value of the css variable. * Making the website responsive by setting max-width property for different sections using media queries, viewport property of meta tag and setting font-size with vw value instead of pixels.