1. Web Programming A different world! Three main languages/tools No Java
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JavaScript
Is NOT Java!! (only looks similar)

2. Getting Started We won’t need Eclipse
“Compilation” happens when we open an HTML file in a web browser
HTML data/files are the basis of any webpage
Can be used to import more code such as CSS, JavaScript, images
HTML files end in “.html”
CSS files end in “.css”
JavaScript files end in “.js”

3. Getting Started
To make a basic webpage, open a “.html” file (e.g. “HelloWorld.html”) in any text editor (e.g. Eclipse or Notepad++)
Make some changes to the file, save it.
Open the file with a web browser
Right click -> “Open with” -> [Your web browser of choice]
To see future changes, you need to ”refresh” the page

4. HTML Not a programing language, but is a “markup” language
Think of it as an encoding of shapes, styles, formatting
Used to format a document with complicated pieces, but using only text
Most recognizable feature: the opening and closing “tags”
<div> … </div>
<p> … </p>
<table> … </table>
Many more

5. HTML Similar to blocks of code, HTML tags denote “blocks” of content
Example:
We can enter plain text into an HTML file and it will be displayed in the browser
“Hello, World!”
We can also enclose the text in meaningful tags
Paragraph tags: <p> and </p>
Div tags: <div> and </div>
Bold font tags: <strong> and </strong>
Italics tags: <i> and </i>

6. HTML Notice: the browser rarely complains about bad/wrong/invalid code
If detected, it usually has some default behavior that is up to who ever wrote the browser
E.g. try using the <strong> tag without closing it

7. HTML Layout Certain tags impose structure on the document by default
Paragraph tags will be put on separate lines inside their container
Strong tags will not be put on separate lines
Forced line break: <br>
Makes a single break between the elements on the page
Does not need a closing tag
Lists: <ul></ul> for unorderd (bullets) and <ol></ol> for ordered (numbers)
For each item, nest it inside <li></li> tags (stands for list item)
For the sake of discussion, we generally abbreviate the tag name as just “br”, “ul”, “li”, etc.

8. Tags with attributes Some tags need extra data to function properly
E.g. adding a link to another web page: the “a” (anchor) tag
<a href=“ HERE</a>
The URL above will not be visible, but will be encoded into the link “under” the text
Note the space after the tag name (“a”) and the attribute name (“href”)
Note that the attribute is assigned (“=”) the value in quotes (“
(Any tag can have any attribute, but as we have seen, they’re not always needed)

9. Other Useful Tags Comments: <!-- … --> Head tag: head
Only block-comments
Head tag: head
Used to import other needed files (CSS, JavaScript)
Generally does not contain content
Body tag: body
Used to contain most of the page’s content
Heading tags: h1, h2, h3, h4
Span tags: span
Image tags: img
Needs a “src” attribute to say where to find the image
Table tags: table
A bit more complex, but very useful
Html tag: html
Not usually needed, but is usually included by convention or standard practices

10. Complex Layout Recall, we can nest tags
So you can set up much more interesting layouts than standard “top to bottom”

11. Style Tags Denoted by <style> … </style>
Usually put in the header
Uses “selectors” to style different elements
Can pull the style code into its own files and import the whole files
<link rel=“stylesheet” href=“mystyles.css”>

12. More complex Element Attributes
Id field
id=“someIdName”
Should be something unique
To select by id, use “#someIdName”
Class field
class=“className”
Primarily used to group conceptually similar elements for styling purposes
To select by class, use “.className”

13. Examles .myClass #someID div.anotherClass
Selects all elements with class=“myClass”
#someID
Selects the single element with id=“someID”
div.anotherClass
Selects all divs with class=“anotherClass”

14. Combinator Selectors Child selector A > B
Selects all B elements which are directly contained in A elements
div > p matches
<div>
<p> Text </p>
</div>
But not
<span>
</span>

15. Combinator Selectors Descendant selector: A B
Matches any “B” tag any level descended from an “A” tag
Matches both of the previous examples

16. Event Listeners Simple first example: “onclick”
The value of the attribute needs to be Javascript
But wtf is JavaScript 
“Hello world” of event listeners:
Add to an element:
onclick=“alert(‘here’);”
Try clicking the element

17. JavaScript What is it? How to use it in a webpage Mozilla overview
A programming language
Mainly used to run “on top of” a web page, or other interface
How to use it in a webpage
Write it in <script> tags, similar to syles
Write in a .js file and import it
Mozilla overview
US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

18. JavaScript
Main idea: all your JavaScript “runs” as soon as it is loaded into the page.
To take advantage of this, you will commonly use that time to define functions and objects to use later, during the lifetime of the webpage
Example tasks:
Set up ”handler” functions to process data from a form
Set up handler functions to change the style of some elements

19. JavaScript Similarities with Java Differences from Java
Syntax
Differences from Java
No strong, static, types!
Does not need “classes”
Different modes of standard input/output
First-class functions
Much more of a “script” than a Java program
“Quick and dirty” design

20. JavaSCript
JavaScript has access to the current web page and all of its structure!
We can use it to adjust the UI to be responsive!
This is what distinguishes “static” web pages from “dynamic” ones
Important HTML elements:
<input> for text input
<checkbox> for toggles
<button> and <submit> for buttons