Introduction to WEB PROGRAMMING

Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication

Full-Stack Web Frameworks For more complex applications that fetch and store data, try one of these +

Today we ll focus on the front-end

Separating content from style Makes it easy to use the same style for multiple elements good for generating themes Styles don t clutter content easy to edit and reorder

HTML content & structure

HTML HyperText Markup Language HyperText supports links between pages Markup take a document and mark it up to tell the browser how to interpret the page Responsible for structured content

HTML Syntax Tree structure of tags, enclosed by brackets <> 2 main types: Container tags e.g. <div>. </div> content goes here Entity tag e.g. <img... />

Structure of an HTML document <html> <head> <title>my Website</title> </head> <body> [website] </body>

Structure of an HTML document <html> <head> <title>my Website</title> </head> <body> [website] </body> These tell the browser that this is an HTML document

Structure of an HTML document <html> <head> <title>my Website</title> </head> <body> [website] </body> The head includes information for rendering, including links to CSS/JS files

Structure of an HTML document <html> <head> <title>my Website</title> </head> <body> [website] </body> The body is where you put what gets displayed

Purposes for container tags Organization sectioning off text Design can be given shape and size (via CSS)

Basic container tags Tag <div> </div> Function block elements <span> </span> inline elements

<div> s are design elements <div> header </div> <div> social bar </div> <div> <div> left column </div> <div> right column </div> </div> <div> Can be given height and width

<span> s are for sectioning off text This is useless text for a paragraph whose <span>middle is to be red</span> in order to contrast the otherwise black text.

Other structural tags Tag <h1> </h1> <h2> </h2> <h3> </h3> <p> </p> Function headings paragraphs

<a href = /index.html > <img src= /path/to/img.png /> Images HTML Tag Attributes <img src= /path/to/img.png /> Links

For more tags Check out W3Schools Or other resources via Google search Even more in HTML5! <article> <header> <nav> <section> <canvas> <video>

CSS What s your style?

CSS Cascading Style Sheets Cascading can apply more than one rule to a part of your site. The one with the highest importance overrules others Style sheet provides style for your site!

CSS syntax selector { attribute: value; }

Universal Style Attributes Attribute color font-family font-weight Sample value blue Sans-Serif bold font-size 12px background-color #00000

Block Element Style Attributes width height border margin padding **measured in px (pixels), %, or em

Selectors link HTML to CSS Method HTML Selector 1. By tag <tag> tag 2. By ID <tag id= 472 > #472 3. By class <tag class= banana >.banana

img { border: 1px solid black; width: 100px; } Example: by tag

#logo { margin: 10px; padding: 5px 12px; } Example: by ID

.class-name { font-weight: bold; } Example: by class

div.small { width: 100px; height: 100px; } Example: tag + class

selectora selectorb { attribute: value; } Nested selectors **will only apply to elements matched by selectorb nested within element matched by

Example: nested selectors Sample HTML CSS that applies to it <div class= awesome > <p> Web programming is fun! </p> </div>.awesome p { color: #E4FD33; }

JavaScript Make it dynamic!

JavaScript Allows: User interaction via client-side scripts Browser control Asynchronous communication with the server Alteration of document Prototype-based scripting Supports object-oriented and functional

Create your own web page! 1. Create a file called index.html with basic HTML structure (<html>, <head>, and <body> tags) 2. Add content include a few other types of elements (<div>, <p>, <h1>, etc.) 3. Add classes and IDs to your elements 4. Create a file called style.css with style rules using your selectors