Introduction to Computer Science Web Development

Size: px

Start display at page:

Download "Introduction to Computer Science Web Development"

Priscilla Hall
5 years ago
Views:

1 Introduction to Computer Science Web Development Flavio Esposito Lecture 3

2 From Last time Introduction to Set Theory implicit and explicit set notation Jaccard index and Venn Diagram Development secure copy (scp) and secure shell (ssh)

3 These slides cover Introduction to HTML and HTML5 document model and simple tags Useful resources on web development stackoverflow.com jsfiddle.net codepen.io

4 Intro to HTML and HTML5 Introduction to HTML and HTML5 document model and simple tags Useful resources on web development stackoverflow.com jsfiddle.net codepen.io

5 What does HTML mean? Hyper-Text Enriched text with links Markup mark something up (annotate) e.g. <title> Language Syntax and semantic (right or wrong way to code)

6 What is HTML?

7 What is HTML?

8 What is HTML?

9 HTML CSS and JavaScript HTML structure (3 bedrooms, one bath) CSS style, and appearance (color, margins ) JavaScript behavior and functionalities events handling (e.g. clicks)

10 HTML tags and elements <p> <p id= myid ></p> Spaces, unique names and closing tags Attribute can only be specified in opening tags Single of double quotes!!! Values may have quotes

11 Basic HTML Document <!doctype html> Version Declaration (HTML5) tell browser doc is compliant What happens if not compliant? <html> </html> HTML tag opens an HTML <head> </head> Contains meta information <body> </body> Actual content of page

12 Nesting HTML Tags for Structure <!doctype html> <html> <head> <meta charset="utf-8"> <title>web development is Cool!</title> </head> <body> I am learning so much! </body> </html> The name is derived from Unicode Transformation Format 8-bit. The Unicode Standard The Unicode Consortium. ISBN

13 Quiz: The core purpose of HTML is to: (hint: something a pure text file with content won't be able to accomplish) 1. Display web page content to the user 2. Communicate the structure of the content 3. Tell the browser how to position and align content in the browser window 4. Tell the browser what should happen once the page is loaded

14 Quiz: The core purpose of HTML is to: (hint: something a pure text file with content won't be able to accomplish) 1. Display web page content to the user 2. Communicate the structure of the content 3. Tell the browser how to position and align content in the browser window 4. Tell the browser what should happen once the page is loaded

15 HTML Content Models

16 HTML Content Models Which elements are allowed to be nested inside which other elements? Block Elements or Inline Elements Before HTML5 Block Elements on new line Inline elements displayed on the same line Cannot have block elements inside

17 HTML5 content model has 7 categories Check the interactive HTML5 content model at

18 <span>*** SPAN 1: Following right after div 2 ***</span> <div> DIV 3: Following right after span 1 <span>span 2: INSIDE div 3 ***</span> Continue content of div 3 *** </div> </body> </html> Comparing block and inline HTML elements <!doctype html> <html> <head> <meta charset="utf-8"> <title>div and span elements</title> </head> <body> <div>*** DIV 1: Some content here ***</div> (division) <div>*** DIV 2: Following right after div 1 ***</div>

19 Heading elements in HTML <!doctype html> <html> <head> <meta charset="utf-8"> <title>heading elements</title> </head> <body> <h1>this is the Main Heading</h1> <h2>subheading 2</h2> <h3>subheading 3</h3> <h6>subheading 6</h6> </body> </html>

20 Semantic elements in HTML5 (could use div) <!doctype html> <html> <head> <meta charset="utf-8"> <title>heading elements</title></head> <body> <header> header element - Some header information goes here. <nav> (short for navigation) element </nav> </header> <h1>main Heading of the Page (hard not to have it)</h1> <section> Section 1 <article> Article 1</article> <article> Article 2</article> </section> <aside> info relates to the main topic, i.e., related posts. </aside> <footer> Copyright info here </footer> </body> </html>

21 Validate your HTML pages

22 HTML Dog Beginner Guide

23 Resources for web developers Introduction to HTML and HTML5 document model and simple tags Useful resources on web development stackoverflow.com jsfiddle.net codepen.io

24 Useful resources on web development stackoverflow.com ask for help on coding jsfiddle.net codepen.io with console and debug features

25 Introduction to Computer Science Web Development Flavio Esposito Lecture 3

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar Review of HTML Chapter 3 Fundamentals of Web Development 2017 Pearson Fundamentals of Web Development http://www.funwebdev.com - 2 nd Ed. What Is HTML and Where Did It Come from? HTML HTML is defined as