Download as PDF, PPTX
![CSSPatternMeaning*Universal selector: matches any element.EType selector: matches any E element (i.e., an element of type E; e.g. H1 or P).EFDescendant selector: matches any F element that is a descendant of an E element.E>FChild selector: matches any F element that is a child of an element E.E+FAdjacent siblings selector: Matches any F element immediately preceded by an element E.E[foo]Attribute selector: matches any E element with the "foo" attribute set (whatever the value).E[foo="warning"]Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning".E[foo~="warning"]Attribute selector: matches any E element whose "foo" attribute value is a list of space-separatedvalues, one of which is exactly equal to "warning".E[lang|="en"]Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list ofvalues beginning (from the left) with "en“ (e.g. en-US).DIV.warningHTML only. The same as DIV[class~="warning"].E#myidID selector: matches any E element ID equal to "myid".E:lang(c)Pseudo-class selector: matches element of type E if it is in (human) language c (the documentlanguage specifies how language is determined).E:first-childPseudo-class selector: matches element E when E is the first child of its parent.E:link, E:visitedPseudo-class selector: matches element E if E is the source anchor of a hyperlink of which thetarget is not yet visited (:link) or already visited (:visited).E:active, E:hover, E:focusDynamic Pseudo-class selector: matches E during certain user actions.E:first-line, E:first-letterPseudo-element selector: matches the first formatted line or letter of element E.](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fhtmljavascriptcss-131220030924-phpapp02%2f75%2fHtml-javascript-css-13-2048.jpg&f=jpg&w=240)
Uploaded byPredhin Sapru
PDF, PPTX2,757 views
Html,javascript & css
This document provides an overview of HTML, CSS, and JavaScript for web development. It discusses the basics of each technology, how they work together, and includes the following key points:- HTML is the markup language that defines the structure and content of a web page. CSS is used to style and lay out elements on the page. JavaScript adds interactive functionality.- Events, functions, and variables are important JavaScript concepts. Events trigger actions, functions contain reusable code, and variables store and retrieve data. - CSS selectors allow styling elements by type, class, ID, and other attributes. The box model, positioning, and other properties control layout. - Common debugging tools like Firebug help
Recommended
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fvibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Html,javascript & css
- 1.HTML,JAVASCRIPT &CSSWeb isa book outlet and our website is abook
- 2.Agenda•••••Basics to Html,CSS, JavaScriptWhere this fits in Website developmentDebuggingExamplesQ/A
- 3.Introduction•Core Concept ofweb development••HTML + CSS + JavaScriptContent + Style + Behavior
- 4.HTML• What?• Webserver: a system on the internet contains one or more web site• Web site: a collection of one or more web pages• Web pages: single disk file with a single file name• Home pages: first page in websiteo What for ?• Think about the sort of information(content) you want to put on the Web.• Set the goals for the Web site.• Organize your content into main topics.• Come up with a general structure for pages and topics.
- 5.
- 6.HTML••HTML is nota programming language, it is a markup languageHTML markup tags are usually called HTML tagsoooo•••HTML tags are keywords surrounded by angle brackets like <html>HTML tags normally come in pairs like <b> and </b>The first tag in a pair is the start tag, the second tag is the end tagStart and end tags are also called opening tags and closing tagsHTML documents describe web pagesThe purpose of a web browser (like Internet Explorer or Firefox) is toread HTML documents and display them as web pages. The browserdoes not display the HTML tags, but uses the tags to interpret thecontent of the pageNote:••••The text between <html> and </html> describes the web pageThe text between <body> and </body> is the visible page contentThe text between <h1> and </h1> is displayed as a headingThe text between <p> and </p> is displayed as a paragraph
- 7.HTML••When you savean HTML file, you can use either the .htm or the .htmlfile extensionElements:Start tag *<p><ahref="default.htm" ><br />Element content End tag *This is a</p>paragraphThis is a link</a>
- 8.HTML•HTML Attributesoooo•HTML elementscan have attributesAttributes provide additional information about an elementAttributes are always specified in the start tagAttributes come in name/value pairs like: name="value“Sample Attributes:Attribute ValueDescriptionclassclassname Specifies a classname for anelementididSpecifies a unique id for anelementstylestyle_defin Specifies an inline style for anitionelementtitletooltip_tex Specifies extra informationtabout an element (displayedas a tool tip)
- 9.HTML•Website Layoutso•HTML DifferentDoctypeso•External style sheetInternal style sheetInline stylesHtml head element:o•The doctype declaration is not an HTML tag; it is an instruction to the web browserabout what version of the markup language the page is written in.There are three ways of inserting a style sheet:ooo•Most websites have put their content in multiple columns (formatted like a magazineor newspaper)Head,Script,Base,Style,meta,titleThe HTML noscript ElementoThe <noscript> tag is used to provide an alternate content for users that havedisabled scripts in their browser or have a browser that doesn’t support client-sidescripting.
- 10.
- 11.CSS•••The biggest advantageof using CSS is that, if you place the CSScode in an external style sheet, your site becomes MUCH EASIER tomaintain. You can change the layout of all your pages by editingone fileSeparates design elements from structural logicRule Structure:
- 12.CSS•Class Selectors<H1 CLASS=“warning”>Danger!</H1><PCLASS=“warning”>Be careful…</P>…….In your HTML code H1.warning {color: red;}OR to an entire class….warning {color:red;}• Css are not even• Make sure your CSS properties are supported
- 13.CSSPatternMeaning*Universal selector: matchesany element.EType selector: matches any E element (i.e., an element of type E; e.g. H1 or P).EFDescendant selector: matches any F element that is a descendant of an E element.E>FChild selector: matches any F element that is a child of an element E.E+FAdjacent siblings selector: Matches any F element immediately preceded by an element E.E[foo]Attribute selector: matches any E element with the "foo" attribute set (whatever the value).E[foo="warning"]Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning".E[foo~="warning"]Attribute selector: matches any E element whose "foo" attribute value is a list of space-separatedvalues, one of which is exactly equal to "warning".E[lang|="en"]Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list ofvalues beginning (from the left) with "en“ (e.g. en-US).DIV.warningHTML only. The same as DIV[class~="warning"].E#myidID selector: matches any E element ID equal to "myid".E:lang(c)Pseudo-class selector: matches element of type E if it is in (human) language c (the documentlanguage specifies how language is determined).E:first-childPseudo-class selector: matches element E when E is the first child of its parent.E:link, E:visitedPseudo-class selector: matches element E if E is the source anchor of a hyperlink of which thetarget is not yet visited (:link) or already visited (:visited).E:active, E:hover, E:focusDynamic Pseudo-class selector: matches E during certain user actions.E:first-line, E:first-letterPseudo-element selector: matches the first formatted line or letter of element E.
- 14.JavaScript•••••••••#"https://www.slideshare.net/slideshow/htmljavascript-css/29381671#15">JavaScript• Eventso Eventsare mostly caused by user actions.o We want our JavaScript program to react to certain events. Thiscan be done with the help of event-handlerso example of the event-handler onClick: <form><inputtype="button" value="Click me" onClick="alert(’Yo’)"></form> whynot onClick="alert(“Yo”)“?o Events are normally used in combination with functions, and thefunction will not be executed before the event occurs!o Eg: <html> <head> <script type="text/javascript"> <!-- functionpopup() { alert("Hello World") } //--> </script> </head> <body><input type="button" value="Click Me!" onclick="popup()"><br /><a href="#" onmouseover="" onMouseout="popup()"> HoverMe!</a> </body> </html>
- 16.JavaScript• EventsEventAttributeDescriptionDOMclickonclickThe eventoccurs when the user clicks on an element2dblclickondblclickThe event occurs when the user double-clicks on anelement2mousedownonmousedownThe event occurs when a user presses a mouse buttonover an element2mousemoveonmousemoveThe event occurs when a user moves the mouse pointer 2over an elementmouseoveronmouseoverThe event occurs when a user mouse over an elementmouseoutonmouseoutThe event occurs when a user moves the mouse pointer 2out of an elementmouseuponmouseupThe event occurs when a user releases a mouse buttonover an element22
- 17.JavaScript• Variableso Variablesare used to store data.o A variable is a "container" for information youwant to store. A variable's value can changeduring the script. You can refer to a variable byname to see its value or to change its value.o Rules for variable names:o Variable names are case sensitiveo They must begin with a letter or the underscorecharacter• strname – STRNAME (not same)
- 18.JavaScript• Event HierarchyoTake the case of a Login Page
- 19.JavaScript• JavaScript No'soGlobal variables• var foo = "global"; //Don't do this function(){ var bar = "local"; //This is ok }();• function(){ foo = "global"; //Don't do this var bar = "local"; //This is ok }();o Inline JavaScript• Inline JavaScript is any JavaScript code that is mixed with HTML. There are twoprimary ways in which you can do this:o Eval• Also like most other programming languages, using eval in JavaScript isconsidered.. well, evil. If you find yourself using eval, there’s a big chance yourapproach is wrong.• Eg:var strJSON = '{"result":true,"count":1}';var objJSON = eval("(function(){return " + strJSON + ";})()");alert(objJSON.result);alert(objJSON.count);
- 20.JavaScript• JavaScript No'soalert("In your face")• Most of the time, using the alert method is unnecessary. The most prevalentmisuse of this method is for debugging purposes, but using tools such as Firebugand equivalents for other browsers is a much better and more efficient way todebug JavaScript code.o element.style• You can change an element’s style directly by changing properties on its styleproperty:• el.style.backgroundColor = "#ff0000";el.style.color = "#00ff00"; This is usually not agood idea because you want to keep the styling separate from the behaviourand changing an element’s style directly will override anything you’ve definedin your CSS. Better way here is to add a class to the element
- 21.
- 22.