CSC103 Web Technologies: HTML, CSS, JS

S
Unit 7- Web Dev Topics
HTML, CSS, JavaScript
CSC 103

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

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>

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

HTML Elements
Source: w3chools.com

HTML Attributes

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

Syntax

Declaration Blocks

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

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

Using CodePen CSS Panel…
More examples…
- Resizes image
- Floats to the right
- Adds a border
CSS comment
Changes line-spacing of list

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

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

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…
 
 /*css or js comment*/
 //javascript single line comment

CSC103 Web Technologies: HTML, CSS, JS

More Related Content

What's hot

Similar to CSC103 Web Technologies: HTML, CSS, JS

More from Richard Homa

Recently uploaded

CSC103 Web Technologies: HTML, CSS, JS