1. No category

Lecture 3 slides - Department of Computer Science

Introduction to Computer Science Web Development
Flavio Esposito
http://cs.slu.edu/~esposito/teaching/1080/
Lecture 3
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)
These slides cover
Introduction to HTML and HTML5
document model and simple tags
Useful resources on web development
stackoverflow.com
jsfiddle.net
codepen.io
Git and GitHub.com
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
Git and GitHub.com
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) 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)
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
Basic HTML Document
<!doctype html>
Version Declaration (HTML5) tell browser doc is compliant
<html> </html>
HTML tag opens an HTML
<head> </head>
Contains meta information
<body> </body> Actual content of page
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>
https://en.wikipedia.org/wiki/UTF-­‐8
HTML Content Models
Which elements are allowed to be nested inside which other elemens?
Block Elements or Inline Elements
Before HTML5
Block Elements on new line
Inline elements displayed on the same line
Cannot have block elements inside
HTML5 content model has 7 categories
Check the interactive HTML5 content model at
https://www.w3.org/TR/2011/WD-­‐html5-­‐20110525/content-­‐models.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> <div>*** DIV 2: Following right after div 1 ***</div> <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>
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>
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>
Validate your HTML pages
http://validator.w3.org/
HTML Dog Beginner Guide
http://htmldog.com/guides/html/
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
Git and GitHub.com
Useful resources on web development
stackoverflow.com
ask for help on coding
jsfiddle.net
https://jsfiddle.net/q1nzfvhv/
codepen.io
with console and debug features
Git and Github.com
Introduction to HTML and HTML5
document model and simple tags
Useful resources on web development
stackoverflow.com
jsfiddle.net
codepen.io
Git and GitHub.com
Intro to Git
git clone https://github.com/user/reponame.git
Copy the content of the repository locally
git status Check the files that have changed after the clone
git commit –m “message to describe what this is”
Commit your change into your local copy
git push and git pull
Upload and download your local version to the server
Learn git at: https://try.github.io/
How to install git on your MAC or PC
http://cs.slu.edu/~espositof/teaching/1080/webdevelopment/
development_enviroinment.html
Class Website -­‐> Web Development -­‐> Enviroinment Setup
Introduction to Computer Science Web Development
Flavio Esposito
http://cs.slu.edu/~esposito/teaching/1080/
Lecture 3

 Download  Report

Paperzz.com

Your Paperzz

© Copyright 2026 Paperzz