1 / 35

Understanding CSS, HTML, and JS: A Comprehensive Guide

Learn the syntax, terminology, and relationships between HTML, CSS, and JS. Explore the structure, styling, and behavior of web documents. Master the cascade effect and document loading sequence. Enhance your UI skills now!

ananda
Télécharger la présentation

Understanding CSS, HTML, and JS: A Comprehensive Guide

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lab 3: Language Structures User Interface Lab: GUI Lab Sep. 9th, 2014

  2. Project 1a • Due now!

  3. Project 2 • TBA, will be posted this week. • Uses CSS and Bootstrap • Due by 10:30am, 9/23 (in two weeks)

  4. Lab 3 goals • Actually cover the languages! • The relationships between HTML, CSS, and JS • HTML syntax and terminology • CSS syntax and terminology • JS syntax and terminology

  5. Relationship Between the Languages • HTML defines the structure of the document • CSS defines the way it should be displayed • JS defines how the document should change once its loaded

  6. Some general rules • Document is read by the browser in order: HTML > CSS > JS • Nothing changes after load without JS

  7. HTML • HyperText Mark-up Language (HTML) • Uses a Document Object Model (DOM) • Consists of a series of hierarchical elements

  8. HTML syntax <div> </div>

  9. HTML syntax Element <div> </div>

  10. HTML syntax <div> </div> Opening tag Closing tag

  11. HTML syntax inner HTML <div> </div> Opening tag Closing tag

  12. HTMLsyntax <div class=“container”> </div> Opening tag Attribute name Attribute value Closing tag

  13. HTMLsyntax <div class=“container” id=“target”> </div> Opening tag Attribute Attribute Closing tag

  14. HTMLsyntax Opening tag Attribute Attribute <div class=“container” id=“target”> <div class=“row”> </div> </div> Child Element Closing tag

  15. CSS • Cascading Style Sheets (CSS) • Introduced to make styling HTML easier • Uses a series of selectors that declare different styling properties for HTML elements • Styles will cascade on each other to produce the most complete style

  16. CSSsyntax Declaration .target { color: #ff0000 } Value Selector Property

  17. CSS Selectors • Element Selector • Class Selector • Id Selector

  18. Element Selector p { color:red; } <div> <p> Text that is red. </p> </div> <div> Text that is not red. </div>

  19. .Class Selector .redText { color:red; } .blackText{ color:black; } <div class=“redText”> Text that is red. </div> <div class=“blackText”> Text that is black. </div> <div class=“redText”> Text that is red. </div>

  20. #id Selector #theRedOne { color:red; } <div> Text that is black. </div> <div id=“theRedOne”> Text that is red. </div> <div> Text that is black. </div>

  21. Combined Selectors .redText { color:red; } p.redText { font-size: 50%; } <div class=“redText”> 100% Red Text. </div> <p class=“redText”> 50% Red Text </p> <p> 100% Normal Text. </p>

  22. Defining CSS • External Styles • Internal Styles • Inline Styles cascade in this order

  23. External Styles <head> <link href=“main.css”rel=“stylesheet”type=“text/css/”> </head> child of HTML <head> element CSS file location CSS parsing information

  24. Internal styles <head> <style> .myClass{ background-color: #cccccc; } </style> </head> child of HTML <head> element everything in here is interpreted as CSS

  25. Inline styles everything between “ ” interpreted as CSS can be defined for any element <div id=“mySpecialCase”style=“color: #ffcc99;”> style attribute

  26. JS Syntax varmyNumber = 5; varmyString = “hi”; this is a number this is a string Value Name variabledeclaration

  27. JS Syntax functiondeclaration parameter(s) name function showInput1 (form) { alert(form.input1.value); return false; } function body function call return statement

  28. JS Syntax “has a” relationship varform1 =document.forms[“form1”]; varalsoForm1 = document.forms.form1; form1 == alsoForm1; //results in true.

  29. JS Scoping varmyInt = 5; function doSomething(myString) { alert(myInt + myString); } function doSomethingElse() { varmyOtherInt = 7; alert(myOtherInt+ myString); } global variable parameter valid local variable error

  30. JS-DOM interaction <button id=“target” onclick=“doSomething()”> function doSomething() { alert(“clicked”); } event event handler

  31. JS-DOM interaction <button id=“target” onclick=“doSomething()”> function doSomething() { document.getElementById(“target”); } DOM reference

  32. Defining JS • External Script • Internal Script

  33. External Script <body> <script src=“main.js”type=“text/javascript”></script> </body> child of HTML <body> or <head> element(s) JS file location JS parsing information

  34. External Script • <body> • <script> • function doSomething() { • alert(“reached”); • } • </script> • </body> child of HTML <body> or <head> element(s) everything in here is interpreted as JS

  35. Project 1 grades will be back by next class • Assignment will be posted later this week

More Related