Introduction to WEB PROGRAMMING

Size: px

Start display at page:

Download "Introduction to WEB PROGRAMMING"

Dwayne Roberts
6 years ago
Views:

1 Introduction to WEB PROGRAMMING

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

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

4 Today we ll focus on the front-end

5 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

6 HTML content & structure

7 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

8 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... />

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

10 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

11 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

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

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

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

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

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

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

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

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

20 CSS What s your style?

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

22 CSS syntax selector { attribute: value; }

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

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

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

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

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

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

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

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

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

32 <link rel= stylesheet type= text/css href= /path/to/file.css How to attach CSS to HTML Option 1: Put your CSS between <style> </style> tags in the head Option 2: Put your CSS in a separate file and include this snippet between <head> </head> tags:

33 JavaScript Make it dynamic!

34 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

35 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

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties