Introduction to web development

INTRODUCTION
TO
WEB
DEVELOPMENT
Alberto Romeu - @alrocar
Jorge Sanz - @xurxosanz

AGENDA
1. HTML (15')
2. CSS (15')
3. JavaScript (60')
4. Lab (30')

WEB
DEVELOPMENT
TOOLS
A text editor
A browser
A web server

INTRO TO HTML
Hyper Text Markup Language
Standard for writing web pages
HTML Tags - 1991
HTML 2.0 - 1995
HTML 4.0 - 1997
HTML 5.0 - ¿2014?

WHAT IS HTML?
WEB PAGES that run in a web browser (client side)
<html>
<head>
<meta charset="utf-8" />
<title>A tiny document</title>
</head>
<body>
<p>My dog ate all the guacamole.</p>
</body>
</html>

TAGS
<tag>content</tag>
<span style="font-family: monospace;"></span>
<span style="font-family: monospace;"><p>This is text within a paragraph.</p></span
<br>

<p>I <strong>really</strong> mean that</p><br>
<br>

<img src="smileyface.jpg" /><br>

ATTRIBUTES
<tag attributeName="attributeValue">content</tag>
<p id="myinput">
<br>
<p class="foo"><br>
<br>
<img src="picture.gif" width="40" height="20" alt="I am a picture" />

HEAD
<head>
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Intro to web dev">
<meta name="author" content="Alberto Romeu">
<meta http-equiv="refresh" content="30">
<title>Title of the document</title>
<br>
</head>

BODY
<body>
Write here the content of your web page
</body>

HEADING
<h1>I'm a very big heading</h1>
<br>
<span style="font-family: monospace; font-size: 19.662282943725586px; font-style: n

PARAGRAPH
<p>
Here’s a paragraph.
</p>
<p>
And here’s a different one.
It’s as simple as that.
</p>

LINE BREAK
I’d like to write some text<br>and then have the next bit on the line below.

span
<p>Here’s a paragraph of text. What I want to happen is to make <span style="font-w

link
<a href="http://www.prodevelop.es" target="blank">This is a link</a>

IMAGE
<img src="picture.jpg" width="104" height="142" />
<br>
<a href="http://www.prodevelop.es" target="blank">
<span style="font-family: monospace;"> <img src="picture.jpg" width="104" height="
</a>

DIV
Here’s some content…
<div>This is a div.</div>
<div>And this is another one. Works pretty much like a new paragraph for now.</div>
Here’s some more content…

TABLE
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

list
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<br>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol><br>

html layouts
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:le
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
I'm the footer</div>
</div>
</body>
</html>

FORM AND INPUT
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<br>
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form><br>

IFRAME
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

LEARNING
RESOURCES
Mozilla Intro to web development
Intro to HTML
W3Schools intro to HTML

INTRO TO CSS
Cascading Style Sheets
Standard for styling HTML elements
CSS 1 1996
CSS 2 1998
CSS3 2012
Browser support!! http://caniuse.com/

INTERNAL
STYLESHEET
<head>
<title><title>
<br>
<style type=”text/css”>
CSS Content Goes Here
</style>
<br>
</head>
<body>

EXTERNAL
STYLESHEET
<head>
<title><title>
<br>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<br>
</head>
<body>

INLINE STYLES
<p style=”color: #ff0000;”>Some red text</p>

CSS SYNTAX
selector { property: value }
body {
background: #eeeeee;
font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

INHERITANCE
body {font-family: Verdana, serif;}
h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}

TAG SELECTOR
<p>this is a paragraph</p>
<span style="font-family: monospace;"> </span><span style="font-family: monospace;"

CLASS SELECTOR
<span> <span class="greentext">I'm green</span></span>
.greentext {
font-size: small;
color: #008080;
}

id selector
<div id="container">
This is a div
</div>
#container {
width: 80%;
margin: auto;
padding: 20px;
background: #ffffff;
border: 1px solid #666;
}

NESTED
SELECTORS
30 css selectors you must memorize

PROPERTIES
CSS 2.1 properties
Comprehensive list of properties

LEARNING
RESOURCES
Intro to CSS
CSS syntax
CSS basics
CSS selectors
CSS specs
Twitter bootstrap

INTRO TO
JAVASCRIPT
Scripting programming language
Client side (also server side)
Interpreted (runtime evaluation)
JavaScript 1.0 - 1996
Javascript 1.8.5 - 2010

JAVASCRIPT IN
HTML
<script type="text/javascript">
</script>
//JavaScript goes here
<script src="whatever.js" type="text/javascript"></script>

JSON
JavaScript Object Notation
Plain Text
Human readable
JSON.parse(), JSON.stringify()
Faster, shorter, easier... than XML

DOM
Document oBJECT MODEL
Access with JavaScript
Better with jQuery

DOM
var element = document.getElementById("theID");
document.getElementByClass('a');
<br>
element.innerHTML = "Write the HTML";
<br>
element.style.color = "blue";

Complete the HTML
Set the title of the web page
Add the link tag to import the profile.css file
Add the script tag to import the profile.js file
Add a VERY BIG header in the div 'container' with the id
'myname'

COMPLETE THE
CSS
Change the body color to #444
Set the container width to 800px
Create a style for h2 tags
Change the weight, size and color of the font

COMPLETE THE
JAVASCRIPT
Open the profile.js
Write the code necessary after the comments

libraries
vs
micro-frameworks
VS
TOOLKITS

JAVASCRIPT
LIBRARIES
A collection of functionality you can call.
Integrated.
Tested
BIG

JAVASCRIPT MICRO-FRAMEWORKS
Solves a single problem
Modular
Not always integrated
Small
http://microjs.com/

javascript toolkits
Several libraries together
Set of components you can use (or not)
Integrated
BIGGER

widgetS
jQuery UI
ExtJS
MochaUI
Dijit

Graphical
D3
Raphael
Kinetic
Three

MAPPING
OpenLayers
LeafletJS (MF)
ModestMaps (MF)
PolyMapS

MAPPING GUI
MapQuery (jQuery)
GeoExt (ExtJS)

LEARNING
RESOURCES
W3Schools JavaScript intro
Mozilla Intro to JS
JavaScript tutorial
List of JavaScript libraries
Mapping libraries comparison
Pros and cons of Micro-frameworks

Introduction to web development

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Introduction to web development (20)

More from Alberto Apellidos (13)

Recently uploaded (20)

Introduction to web development