CSC103 Web Technologies: HTML, CSS, JS
- 1. S Unit 7- Web Dev Topics HTML, CSS, JavaScript CSC 103
- 2. HTML HTML - Structure & Content Layer HTML should be structured in a logical and hierarchal system of importance. Content should be easily accessible at the lowest level of technology
- 3. HTML Hypertext Markup Language HTML Code The elements (tags and markup) of HTML code are interpreted by browsers and displayed as a web page with text, images and hyperlinks.. <html> </html>
- 4. HTML Basic Structure DTD (DOCTYPE Declaration HTML Element (Opening tag) Closing HTML tag Head Element Closing Head Tag Page Title Meta Element Visual Part of Page
- 8. CSS – Cascading Style Sheets CSS – Presentation Layer CSS provides properties for formatting, layout and design of HTML elements. CSS is more efficient when modified independently of the HTML code
- 9. CSS – Cascading Style Sheets Syntax Source: w3chools.com
- 10. CSS – Cascading Style Sheets Declaration Blocks
- 11. CSS – Cascading Style Sheets CSS – Can be applied 3 ways… As a separate .css file (similar to CodePen) Inline (inside HTML tags) Inside <style> tags within the html <head> element
- 12. CSS – Cascading Style Sheets Using CodePen CSS Panel… which is similar to using an external CSS file Affects all elements in body Affects only the h1 element Affects all paragraphs
- 13. CSS – Cascading Style Sheets Using CodePen CSS Panel… More examples… - Resizes image - Floats to the right - Adds a border CSS comment Changes line-spacing of list
- 14. JavaScript JavaScript – Behavioral Layer ECMA Script - Not related to Java, but similar in syntax at times Client Side – events occur locally in the browser, server not required Can communicate with HTML elements through the their ID names
- 15. JavaScript Syntax Case Matters… getElementById("pic”).innerHTML tipcalc( ) is not the same as tipCalc( ) Punctuation Matters… " " ' ' ; : . { } ( ) Semi-colons ; are used to terminate or end statements
- 16. Code Comments Comments are used in order to… Identify/highlight areas or sections of code Provide notes to self or team members Temporarily deactivate or hide code Examples… <!--html comment--> /*css or js comment*/ //javascript single line comment