Web_Devp_HTML_CSS__secure_web_development_new.pptx

INTRODUCTION TO WEB DEVELOPMENT

OBJECTIVES Develop front end of any web application/ software using HTML CSS Javascript PHP 8/9/2024 SBT 2

STAND ALONE SOFTWARE DEVELOPMENT USING HTML, CSS AND JAVASCRIPT IN FRONT END AND PYTHON IN BACKEND 8/9/2024 SBT 3

WEB/ SOFTWARE DEVELOPMENT Screen Shot 2022-06-30 at 10.29.28 AM 8/9/2024 SBT 4

LANGUAGES/ TOOLS FOR FRONT END DEVELOPMENT 8/9/2024 SBT 5

ANALOGY WRT A BUILDING 8/9/2024 SBT 6

8/9/2024 SBT 7 ANALOGY WRT A BUILDING

ANALOGY WRT A BUILDING 8/9/2024 SBT 8

WEB PAGE DEVELOPMENT LANGUAGES 8/9/2024 SBT 9 A computer language that consists of easily understood keywords, names, or tags that help format the overall view of a page and the data it contains. Some examples of a markup language are BBC, HTML, SGML, and XML . A style sheet language, or style language , is a computer language that expresses the presentation of structured documents. Styling language deals with beautification, colors, borders, size of images etc. JavaScript often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS . As of 2022, 98% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries.

HOW THE WEB WORKS 8/9/2024 SBT 10

HTTP REQUEST EXAMPLE 8/9/2024 SBT 11

HTTP RESPONSE EXAMPLE 8/9/2024 SBT 12

How the Web Works? WWW use classical client / server architecture HTTP is text-based request-response protocol 13 Page request Client running a Web Browser Server running Web Server Software (IIS, Apache, etc.) Server response HTTP HTTP

HTML

HTML 8/9/2024 SBT 15 HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

Creating HTML Pages An HTML file must have an . htm or .html file extension HTML files can be created with text editors: NotePad, NotePad ++, PSPad Or HTML editors Microsoft FrontPage Macromedia Dreamweaver Netscape Composer Microsoft Word Visual Studio Sublime 16

PAGE SOURCE OF GOOGLE 8/9/2024 SBT 17

PAGE SOURCE OF GOOGLE 8/9/2024 SBT 18

A Simple HTML Document 8/9/2024 SBT 19 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> The <!DOCTYPE html> declaration defines that this document is an HTML5 document The <html> element is the root element of an HTML page. This has to be there. The <head> element contains meta information about the HTML page The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The <h1> element defines a large heading The <p> element defines a paragraph

First HTML Page 20 <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> test.html

<!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> First HTML Page: Tags 21 Opening tag Closing tag An HTML element consists of an opening tag, a closing tag and the content inside.

<!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> First HTML Page: Body 22 HTML body

HTML ELEMENT 8/9/2024 SBT 23 Start tag Element content End tag <h1> My First Heading </h1> <p> My first paragraph. </p> <br> none none An HTML element is defined by a start tag, some content, and an end tag: < tagname > Content goes here... </ tagname > The HTML element is everything from the start tag to the end tag: <h1>My First Heading</h1> <p>My first paragraph.</p> Some HTML elements have no content (like the < br > element). These elements are called empty elements. Empty elements do not have an end tag

Web Browsers 8/9/2024 SBT 24 The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML PAGE STRUCTURE 8/9/2024 SBT 25 Note: The content inside the <body> section (the white area above) will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

Create First HTML Page 8/9/2024 SBT 26 Open Start > Programs > Accessories > Notepad Write or copy the following HTML code into Notepad: <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Save the file on your computer. Select File > Save as in the Notepad menu. Name the file " index.html " and set the encoding to UTF-8 (which is the preferred encoding for HTML files). You can use either . htm or .html as file extension Open the saved HTML file in your favorite browser

Open Page in Browser 8/9/2024 SBT 27

Next Class 8/9/2024 SBT 28 Headings Paragraphs Links Images HTML Attributes

Previous Class Recap 8/9/2024 SBT 29 Overview/ Basic understanding of HTML, CSS & Javascript How websites work What is HTML What is an HTML element Creating 1 st / basic webpage using HTML in notepad

HTML DOCUMENTS 8/9/2024 SBT 30 All HTML documents should ideally start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The <!DOCTYPE> declaration is not case sensitive. The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>

HTML Headings 8/9/2024 SBT 31 HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading: <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> Search engines use the headings to index the structure and content of your web pages.

HTML Paragraphs 8/9/2024 SBT 32 HTML paragraphs are defined with the <p> tag: Example <p>This is a paragraph.</p> <p>This is another paragraph.</p>

HTML Links 8/9/2024 SBT 33 HTML links are defined with the <a> tag: <a href ="https:// www.google.com ">This is a link</a> The link's destination is specified in the href attribute. HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand.

HTML Links - Syntax 8/9/2024 SBT 34 The HTML <a> tag defines a hyperlink. It has the following syntax: <a href =" url "> link text </a> The most important attribute of the <a> element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple

HTML LINKS – THE TARGET ATTRIBUTE By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target attribute specifies where to open the linked document. The target attribute can have one of the following values: _self - Default. Opens the document in the same window/tab as it was clicked _blank - Opens the document in a new window or tab EXAMPLE Use target="_blank" to open the linked document in a new browser window or tab: <a href ="https:// www.google.com /" target="_blank">Visit Google!</a> 8/9/2024 MSA 35

HTML IMAGES 8/9/2024 SBT 36 HTML images are defined with the < img > tag. The source file ( src ), alternative text (alt), width, and height are provided as attributes: < img src =” google_logo.jpg " alt=”google logo to be displayed here" width="104"height="142">

RECAP How many heading tags are there in HTML? Which is the least imp & which is the most imp? Which attribute defines a link’s destination in HTML? What is the use of target attribute in HTML? What is the use of alt attribute in HTML? Practical Use an image as a link to open another image (As soon as user clicks on the image, a new image should open). 8/9/2024 MSA 37

HTML Links - Use an Image as a Link 8/9/2024 SBT 38 To use an image as a link, just put the < img > tag inside the <a> tag: <a href =" default.png "> < img src =" smiley.gif " alt="HTML tutorial"> </a>

LINK TITLES The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. <a href ="https:// www.google.com " title="search on google">Visit Google</a> 8/9/2024 MSA 39

HTML 8/9/2024 SBT 40 HTML is Not Case Sensitive HTML tags are not case sensitive: <P> means the same as <p>. The HTML standard does not require lowercase tags, it is recommended that lowercase tags should be used in HTML.

HTML Attributes 8/9/2024 SBT 41 HTML attributes provide additional information about HTML elements. All HTML elements can have attributes Attributes provide additional information about elements Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value" Example The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to: <a href ="https:// www.google.com ">This is a link</a> The < img > tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: < img src =" img_girl.jpg "> < img src =" img_girl.jpg " width="500" height="600">

LANG ATTRIBUTE 8/9/2024 SBT 42 You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers. The following example specifies English as the language: <!DOCTYPE html> <html lang =" en "> <body> ... </body> </html> Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country. The following example specifies English as the language and United States as the country: <!DOCTYPE html> <html lang =" en -US"> <body> ... </body> </html>

SOME POINTS TO REMEMBER 8/9/2024 SBT 43 All HTML elements can have attributes The href attribute of <a> specifies the URL of the page the link goes to The src attribute of < img > specifies the path to the image to be displayed The width and height attributes of < img > provide size information for images The alt attribute of < img > provides an alternate text for an image The lang attribute of the <html> tag declares the language of the Web page

HTML HORIZONTAL RULES 8/9/2024 SBT 44 The < hr > tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The < hr > element is used to separate content (or define a change) in an HTML page: Example <h1>This is heading 1</h1> <p>This is some text.</p> < hr > <h2>This is heading 2</h2> <p>This is some other text.</p> < hr > The < hr > tag is an empty tag, which means that it has no end tag.

HTML LINE BREAKS 8/9/2024 SBT 45 HTML Line Breaks The HTML < br > element defines a line break. Use < br > if you want a line break (a new line) without starting a new paragraph: Example <p>This is< br >a paragraph< br >with line breaks.</p> The < br > tag is an empty tag, which means that it has no end tag.

THE POEM PROBLEM 8/9/2024 SBT 46 This poem will display on a single line: Example <p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> Because in HTML, spaces and new lines are ignored. Solution - The HTML <pre> Element

HTML PRE ELEMENT 8/9/2024 SBT 47 The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: <pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre>

HTML TEXT FORMATTING 8/9/2024 SBT 48 HTML Formatting Elements Formatting elements were designed to display special types of text, for example: <b> - Bold text < i > - Italic text <mark> - Marked text <del> - Deleted text <sub> - Subscript text <sup> - Superscript text

HTML TEXT FORMATTING 8/9/2024 SBT 49

HTML MARK ELEMENT 8/9/2024 SBT 50 The HTML <mark> element defines text that should be marked or highlighted: Example <p>Do not forget to buy <mark>milk</mark> today.</p>

HTML DEL ELEMENT 8/9/2024 SBT 51 HTML <del> Element The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text: Example <p>My favorite color is <del>blue</del> red.</p>

HTML COMMENTS 8/9/2024 SBT 52 HTML comments are not displayed in the browser, but they can help document your HTML source code. You can add comments to your HTML source by using the following syntax:  Notice that there is an exclamation point (!) in the start tag, but not in the end tag. Comments can be used to hide content. Which can be helpful if you hide content temporarily: <p>This is a paragraph.</p>  <p>This is a paragraph too.</p>

HTML COMMENTS 8/9/2024 SBT 53 Hide a section of HTML code: <p>This is a paragraph.</p>  <p>This is a paragraph too.</p> Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors

HTML Favicon A favicon is a small image displayed next to the page title in the browser tab. You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc . To add a favicon, just add a <link> element to your " index.html " file, after the <title> element, like shown in example below:- Example <!DOCTYPE html> <html> <head> <title>My Page Title</title> <link rel ="icon" type="image/x-icon" href ="/images/ favicon.ico "> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> 8/9/2024 SBT 54

HTML TABLES HTML tables allow web developers to arrange data into rows and columns. A table in HTML consists of table cells inside rows and columns Example A simple HTML table: <table> < tr > < th >Company</ th > < th >Contact</ th > < th >Country</ th > </ tr > < tr > <td> Alfreds Futterkiste </td> <td>Maria Anders</td> <td>Germany</td> </ tr > < tr > <td>Centro</td> <td>Francisco</td> <td>Mexico</td> </ tr > </table> 8/9/2024 SBT 55

HTML TABLES Each table cell is defined by a <td> and a </td> tag. td stands for table data. Everything between <td> and </td> are the content of the table cell. < table > < tr > < td >Emil</ td > < td >Tobias</ td > < td >Linus</ td > </ tr > </ table > Each table row starts with a < tr > and end with a </ tr > tag. < table > < tr > < td >Emil</ td > < td >Tobias</ td > < td >Linus</ td > </ tr > < tr > < td >16</ td > < td >14</ td > < td >10</ td > </ tr > </ table > tr stands for table row. 8/9/2024 SBT 56

HTML TABLES Sometimes you want your cells to be headers, in those cases use the < th > tag instead of the <td> tag: Example Let the first row be table headers: <table> < tr > < th >Person 1</ th > < th >Person 2</ th > < th >Person 3</ th > </ tr > < tr > <td>Emil</td> <td>Tobias</td> <td>Linus</td> </ tr > < tr > <td>16</td> <td>14</td> <td>10</td> </ tr > </table> By default, the text in < th > elements are bold and centered, but you can change that with CSS. 8/9/2024 SBT 57

HTML TABLE SUMMARY Tag Description <table> Defines a table <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table 8/9/2024 SBT 58

HTML LISTS HTML lists allow web developers to group a set of related items in lists. Unorderd list is with bullets Ordered list is with Ser No An unordered list starts with the < ul > tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default: Example < ul > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ ul > An ordered list starts with the < ol > tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default: Example < ol > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ ol > 8/9/2024 SBT 59

HTML DESCRIPTION LISTS HTML also supports description lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the < dt > tag defines the term (name), and the < dd > tag describes each term: Example <dl> < dt >Coffee</ dt > < dd >- black hot drink</ dd > < dt >Milk</ dt > < dd >- white cold drink</ dd > </dl> 8/9/2024 SBT 60

HTML BLOCK AND INLINE ELEMENTS Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline. 8/9/2024 SBT 61

HTML BLOCK-LEVEL ELEMENTS A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). Two commonly used block elements are: <p> and <div>. The <p> element defines a paragraph in an HTML document. The <div> element defines a division or a section in an HTML document. Example <p>Hello World</p> <div>Hello World</div> Here are some of the block-level elements in HTML: <h1>-<h6> <p> <form> <table> 8/9/2024 SBT 62

HTML INLINE ELEMENTS An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a <span> element inside a paragraph. Example <span>Hello World</span> Here are some of the inline elements in HTML: <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> 8/9/2024 SBT 63

<div> Element The <div> element is often used as a container for other HTML elements. The <div> element has no required attributes, but style, class and id are common. When used together with CSS, the <div> element can be used to style blocks of content: Example <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> 8/9/2024 SBT 64

<span> Element The <span> element is an inline container used to mark up a part of a text, or a part of a document. The <span> element has no required attributes, but style, class and id are common. When used together with CSS, the <span> element can be used to style parts of the text: Example <p>My mother has <span style=" color:blue;font-weight:bold ">blue</span> eyes and my father has <span style=" color:darkolivegreen;font-weight:bold ">dark green</span>eyes.</p> 8/9/2024 SBT 65

Points To Remember There are two display values: block and inline A block-level element always starts on a new line and takes up the full width available An inline element does not start on a new line and it only takes up as much width as necessary The <div> element is a block-level and is often used as a container for other HTML elements The <span> element is an inline container used to mark up a part of a text, or a part of a document 8/9/2024 SBT 66

HTML class Attribute The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class. The class attribute is often used to point to a class name in a style sheet In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section as will be shown in next slide. 8/9/2024 SBT 67

CLASS ATTRIBUTE EXAMPLE <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html> 8/9/2024 SBT 68

HTML class Attribute In the following example we have two <span> elements with a class attribute with the value of "note". Both <span> elements will be styled equally according to the .note style definition in the head section: Example <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html> The class attribute can be used on any HTML element. The class name is case sensitive! 8/9/2024 SBT 69

HTML class Attribute Syntax To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}: Example Create a class named "city": <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </body> </html> 8/9/2024 SBT 70

MULTIPLE CLASSES HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified. In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes: Example <h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> Different HTML elements can point to the same class name. <h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p> 8/9/2024 SBT 71

MULTIPLE CLASSES HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified. In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes: Example <h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> Different HTML elements can point to the same class name. <h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p> 8/9/2024 SBT 72

HTML ID ATTRIBUTE The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}. 8/9/2024 SBT 73

HTML ID ATTRIBUTE The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}. In the following example we have an <h1> element that points to the id name " myHeader ". This <h1> element will be styled according to the # myHeader style definition in the head section: Example <!DOCTYPE html> <html> <head> <style> # myHeader { background-color: lightblue ; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id=" myHeader ">My Header</h1> </body> </html> Note: The id name is case sensitive! Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.). 8/9/2024 SBT 74

HTML ID ATTRIBUTE AND BOOKMARKS A class name can be used by multiple HTML elements, while an id name must be used by only one HTML element within the page. HTML bookmarks are used to allow readers to jump to specific parts of a webpage. Bookmarks can be useful if your page is very long. To use a bookmark, you must first create it, and then add a link to it. Then, when the link is clicked, the page will scroll to the location with the bookmark. Example First, create a bookmark with the id attribute: <h2 id="C4">Chapter 4</h2> Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page: Example <a href ="#C4">Jump to Chapter 4</a> Or, add a link to the bookmark ("Jump to Chapter 4"), from another page: <a href ="html_demo.html#C4">Jump to Chapter 4</a> 8/9/2024 SBT 75

CSS CSS stands for Cascading Style Sheets CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. CSS saves a lot of work. It can control the layout of multiple web pages all at once CSS Example body { background-color: lightblue ; } h1 { color: white; text-align: center; } p { font-family: verdana ; font-size: 20px; } 8/9/2024 SBT 76

CSS SYNTAX A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. Example In this example all <p> elements will be center-aligned, with a red text color: p { color: red; text-align: center; } In the above example, p is a selector in CSS (it points to the HTML element you want to style: <p>). color is a property, and red is the property value text-align is a property, and center is the property value 8/9/2024 SBT 77

SIMPLE CSS SELECTORS A CSS selector selects the HTML element(s) you want to style. The CSS element Selector The element selector selects HTML elements based on the element name. Example Here, all <p> elements on the page will be center-aligned, with a red text color: p { text-align: center; color: red; } The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. Example The CSS rule below will be applied to the HTML element with id="para1": #para1 { text-align: center; color: red; } 8/9/2024 MSA 78

CSS CLASS SELECTORS The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name. Example In this example all HTML elements with class="center" will be red and center-aligned: .center { text-align: center; color: red; } You can also specify that only specific HTML elements should be affected by a class. Example In this example only <p> elements with class="center" will be red and center-aligned: p.center { text-align: center; color: red; } HTML elements can also refer to more than one class. Example In this example the <p> element will be styled according to class="center" and to class="large": <p class="center large">This paragraph refers to two classes.</p> 8/9/2024 SBT 79

CSS UNIVERSAL SELECTOR The universal selector (*) selects all HTML elements on the page. Example The CSS rule below will affect every HTML element on the page: * { text-align: center; color: blue; } The CSS Grouping Selector The grouping selector selects all the HTML elements with the same style definitions. To group selectors, separate each selector with a comma. In this example we have grouped the selectors: h1, h2, p { text-align: center; color: red; } 8/9/2024 SBT 80

CSS SIMPLE SELECTORS SUMMARY 8/9/2024 SBT 81

WAYS TO INSERT CSS There are three ways of inserting a style sheet External CSS Internal CSS Inline CSS 8/9/2024 SBT 82

EXTERNAL CSS With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section. External styles are defined within the <link> element, inside the <head> section of an HTML page: <!DOCTYPE html> <html> <head> <link rel ="stylesheet" href =" mystyle.css "> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> 8/9/2024 SBT 83

EXTERNAL CSS An external style sheet can be written in any text editor, and must be saved with a . css extension. The external . css file should not contain any HTML tags. Here is how the " mystyle.css " file looks: body { background-color: lightblue ; } h1 { color: navy; margin-left: 20px; } Note: Do not add a space between the property value and the unit: Incorrect (space): margin-left: 20 px ; Correct ( nospace ): margin-left: 20px; 8/9/2024 SBT 84

INTERNAL CSS An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section. <!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> 8/9/2024 SBT 85

INLINE CSS An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. Inline styles are defined within the "style" attribute of the relevant element: <!DOCTYPE html> <html> <body> <h1 style=" color:blue;text-align:center ;">This is a heading</h1> <p style=" color:red ;">This is a paragraph.</p> </body> </html> 8/9/2024 SBT 86

MULTIPLE STYLE SHEETS If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. Assume that an external style sheet has the following style for the <h1> element: h1 { color: navy; } Then, assume that an internal style sheet also has the following style for the <h1> element: h1 { color: orange; } If the internal style is defined after the link to the external style sheet, the <h1> elements will be "orange": <head> <link rel ="stylesheet" type="text/ css " href =" mystyle.css "> <style> h1 { color: orange; } </style> </head> However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be "navy": <head> <style> h1 { color: orange; } </style> <link rel ="stylesheet" type="text/ css " href =" mystyle.css "> </head> 8/9/2024 SBT 87

CASCADING ORDER What style will be used when there is more than one style specified for an HTML element? All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority: Inline style (inside an HTML element) External and internal style sheets (in the head section) Browser default So, an inline style has the highest priority, and will override external and internal styles and browser defaults. 8/9/2024 SBT 88

CSS BORDERS The CSS border properties allow you to specify the style, width, and color of an element's border. The border-style property specifies what kind of border to display. The following values are allowed: dotted - Defines a dotted border dashed - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3D grooved border. The effect depends on the border-color value ridge - Defines a 3D ridged border. The effect depends on the border-color value inset - Defines a 3D inset border. The effect depends on the border-color value outset - Defines a 3D outset border. The effect depends on the border-color value none - Defines no border hidden - Defines a hidden border The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border). 8/9/2024 SBT 89

CSS BORDERS 8/9/2024 SBT 90 p.dotted { border-style : dotted ;} p.dashed { border-style : dashed ;} p.solid { border-style : solid ;} p.double { border-style : double ;} p.groove { border-style : groove ;} p.ridge { border-style : ridge ;} p.inset { border-style : inset ;} p.outset { border-style : outset ;} p.none { border-style : none ;} p.hidden { border-style : hidden ;} p.mix { border-style : dotted dashed solid double ;}

HTML AND CSS PRACTICAL APPLICATION 8/9/2024 SBT 91

TRIBUTE PAGE 8/9/2024 SBT 92

TRIBUTE PAGE(COPY AND PASTE IN NOTEPAD) 8/9/2024 SBT 93 <!DOCTYPE html><html lang =" en "><head> <style> /* Styling the body element like body color and margin */ body { background-color: #00FA9A; margin: 20%; } /* Styling the Title and giving shadow to the title */ #title { text-align: center; text-shadow: 5px 5px 10px white; font-size: 7vh; } /* Setting width and display type of image */ img { display: inline-block; width: 100%; } /* Setting font color and font size of the image-caption */ #caption { font-size: 17px; font-family: Gill Sans; color: black; } /* Styling the content of the page like- padding, font-size, font color etc.*/ div#tribute-data { background-color: rgb (46, 139, 87, 0.25); box-shadow: 20px 20px 20px #98FB98; font-family: Georgia; padding: 25px 25px; margin: 11px; margin-top: 50px; } /* Styling the title of the content */ h1.title-APJ { font-size: 35px; color: white; text-align: center; text-shadow: 5px 5px 10px black; } /* Styling the link provided at the end */ #tribute-link { text-decoration: none; color: black; } </style></head><body> <main id="main">  <h1 id="title"> A. P. J. Abdul Kalam </h1> <div id=" img ">  < img src ="APJ Kalam.png " id="image" alt="Error Loading Image"> <small id="caption"> Great Indian scientist and politician who played a leading role in the development of India’s missile and nuclear weapons programs. </small> </div> <div id="tribute-data">  <h1 class="title-APJ"> About the Legend </h1> <p> ☛ A.P.J. Abdul Kalam , in full Avul Pakir Jainulabdeen Abdul Kalam , was born on October 15, 1931, in Rameswaram , Tamil Nadu, India.< br >< br > ☛ He served as the 11th President of India from 2002 to 2007.< br >< br > ☛ Kalam earned a degree in aeronautical engineering from the Madras Institute of Technology and in 1958 joined the Defence Research and Development Organisation (DRDO).< br >< br > ☛ In 1969, he moved to the Indian Space Research Organisation , where he was project director of the SLV-III, the first satellite launch vehicle that was both designed and produced in India. < br >< br > ☛ Rejoining DRDO in 1982, Kalam planned the program that produced a number of successful missiles, which helped earn him the nickname <strong> “Missile Man.”</strong> < br >< br > ☛ Among those successes was Agni, India’s first intermediate-range ballistic missile, which incorporated aspects of the SLV-III and was launched in 1989. < br >< br > ☛ He also played a pivotal organisational , technical, and political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974. < br >< br > ☛ From 1992 to 1997 Kalam was scientific adviser to the defense minister, and he later served as principal scientific adviser (1999–2001) to the government with the rank of cabinet minister. < br >< br > ☛ His prominent role in the country’s 1998 nuclear weapons tests solidified India as a nuclear power and established Kalam as a national hero, although the tests caused great concern in the international community. < br >< br > ☛ In 1998 Kalam put forward a countrywide plan called Technology Vision 2020, which he described as a road map for transforming India from a less-developed to a developed society in 20 years. The plan called for, among other measures, increasing agricultural productivity, emphasizing technology as a vehicle for economic growth, and widening access to health care and education. < br >< br > ☛ Kalam received <b>7</b> honorary doctorates from <b>40</b> universities. The Government of India honoured him with the <b>Padma Bhushan in 1981</b> and the <b>Padma Vibhushan in 1990</b> for his work with ISRO and DRDO and his role as a scientific advisor to the Government. < br >< br > ☛ In 1997, Kalam received India's highest civilian honour , the Bharat Ratna , for his contribution to the scientific research and modernisation of defence technology in India. < br >< br > ☛ In 2013, he was the recipient of the Von Braun Award from the National Space Society "to recognize excellence in the management and leadership of a space-related project". < br >< br > ☛ While delivering a lecture at the Indian Institute of Management Shillong , Kalam collapsed and died from an apparent cardiac arrest on <b>27 July 2015</b>, aged 83. < br >< br > ☛ Wheeler Island, a national missile test site in Odisha, was renamed <b> Kalam Island</b> in September 2015. < br >< br > ☛ A prominent road in New Delhi was renamed from Aurangzeb Road to <b> Dr APJ Abdul Kalam Road</b> in August 2015. < br >< br > ☛ In February 2018, scientists from the Botanical Survey of India named a newly found plant species as Drypetes kalamii , in his honour . < br >< br >< br > </p> </div> < br > For more information, check out <a id="tribute-link" href ="#"> <b>A.P.J. Abdul Kalam </b> on Wikipedia. [ <small>Developed by @<a href ="#"> Sushant Gaurav.</a></a> </small>] </main></body></html>

ADVANCED HTML AND CSS 8/9/2024 SBT 94

HTML FORMS An HTML form is used to collect user input. The user input is most often sent to a server for processing. The HTML <form> element is used to create an HTML form for user input: <form> . form elements . </form> The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. 8/9/2024 SBT 95

The <input> Element The HTML <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute. The <input type="text"> defines a single-line input field for text input. 8/9/2024 SBT 96

The <label> Element The <label> tag defines a label for many form elements. The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together. 8/9/2024 SBT 97

BASIC HTML FORM 8/9/2024 SBT 98

Checkboxes The <input type="checkbox"> defines a checkbox . Checkboxes let a user select ZERO or MORE options of a limited number of choices. 8/9/2024 SBT 99

The Submit Button The <input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data. The form-handler is specified in the form's action attribute. <form action="/ action_page.php "> <label for=" fname ">First name:</label>< br > <input type="text" id=" fname " name=" fname " value="John">< br > <label for=" lname ">Last name:</label>< br > <input type="text" id=" lname " name=" lname " value="Doe">< br >< br > <input type="submit" value="Submit"> </form> Notice that each input field must have a name attribute to be submitted. If the name attribute is omitted, the value of the input field will not be sent at all. 8/9/2024 SBT 100

8/9/2024 SBT 101

Solution 8/9/2024 SBT 102

Solution 8/9/2024 MSA 103

Solution 8/9/2024 MSA 104

Solution 8/9/2024 MSA 105

HTML Form Input Validations <input type="text" id=" uname " name=" uname " pattern="[a-zA-Z0-9]+" minlength ="4" maxlength ="10"> The pattern above will keep checking that all the usernames only contain characters from a-z, A-Z, or 0-9. For example, monty42 , 42monty , MON42ty , and mon42ty are all valid usernames in this case, but monty_42 is invalid. The minlength and maxlength attributes will make sure that the username is not too small or too big. 8/9/2024 SBT 106

HTML Form Input Validations If you want the username to begin with a particular character like an underscore, you can simply add it to the front of the pattern. <input type="text" id=" uname " name=" uname " pattern="_[a-zA-Z0-9]+" minlength ="4" maxlength ="10"> Now, every username which does not begin with _ and contains any characters besides a-z, A-Z, or 0-9 after that will be considered invalid If you want the emails to end with something specific, you can simply use the pattern attribute for that. Here is an example: <input type="email" id="email" pattern=".+@ tutsplus \.com|.+@ envato \.com"> If the above input element is used in a form, users will only be able to enter an email address that ends with tutsplus.com or envato.com . This means that [email protected] or [email protected] would be invalid 8/9/2024 SBT 107

HTML Form Input Validations You can mark certain input fields as required using the required attribute, while leaving the optional fields untouched. This will let users know the absolute minimum information they have to provide when filling out a form. The input required attribute specifies that an input field must be filled out before submitting the form. <form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form> The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. 8/9/2024 SBT 108

Web_Devp_HTML_CSS__secure_web_development_new.pptx

About This Presentation

Slide Content

Tags

Categories

Download

Quick Actions

Statistics

Related Slideshows

Web_Devp_HTML_CSS__secure_web_development_new.pptx

About This Presentation

Slide Content

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75

Slide 76

Slide 77