Movatterモバイル変換

HTML,JAVASCRIPT &CSSWeb is a book outlet and our website is abook

Agenda•••••Basics to Html, CSS, JavaScriptWhere this fits in Website developmentDebuggingExamplesQ/A

Introduction•Core Concept of web development••HTML + CSS + JavaScriptContent + Style + Behavior

HTML• What?• Web server: 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.

HTML••HTML is not a 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

HTML••When you save an 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>

HTML•HTML Attributesoooo•HTML elements can 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)

HTML•Website Layoutso•HTML Different Doctypeso•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.

CSS•••The biggest advantage of 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:

CSS•Class Selectors<H1 CLASS=“warning”>Danger!</H1><P CLASS=“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

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.

JavaScript•••••••••#

JavaScript• Eventso Events are 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">  </script> </head> <body><input type="button" value="Click Me!" onclick="popup()"><br /><a href="#" onmouseover="" onMouseout="popup()"> HoverMe!</a> </body> </html>

JavaScript• EventsEventAttributeDescriptionDOMclickonclickThe event occurs 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

JavaScript• Variableso Variables are 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)

JavaScript• Event Hierarchyo Take the case of a Login Page

JavaScript• JavaScript No'so Global 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);

JavaScript• JavaScript No'so alert("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

Movatterモバイル変換

Change Language

Html,javascript & css

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to Html,javascript & css

Recently uploaded

Html,javascript & css