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
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