Post on 19-Aug-2014
description
Coding
WorkshopFT.
ROBERTO mANGANO M.Sc
&
[IN]cubes
BASIC HTML &
CSS STYLING
Build a two-
page website:
home &
contact
Create an
interactive
page with php:
save data to
databases
learn the
basics of
Internet | HtmL | Php | SQL
Using coding examples & tutorials
Ip: INTERNET PROTOCOL
54.23.127.255
127.0.0.1 - localhost
HTTP: hypertext transfer protocol
FTP: file transfer protocol
HTML - HYPERTEXT MARKUP LANGUAGE
WHY MARKUP AND NOT PROGRAMMING?
BECAUSE HTML IS
STUP D
<!DOCTYPE html>
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<p>2+2</p>
</body>
</html>
SHOWS 2+2
PHP - SERVER SIDE PROGRAMMING LANGUAGE
PHP IS
SMAR
<!DOCTYPE html>
<html>
<head>
<title>PHP Test</title>
</head>
<body><p>
<?php echo 2+2; ?>
</p></body>
</html>
SHOWS 4
CSS- CASCADING STYLE SHEET
CSS HELPS US MAKE OUR WEBSITES LOOK
THE WAY WE WANT IT TO
<!DOCTYPE html>
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<p>2+2</p>
</body>
</html>
p{
color: red;
}
SHOWS 2+2
This is a domain
www.robertomangano.it
Servers: respond to user requests
Hosting isps: provide plans for renting/housing servers
Hosting plan: disk space + database + etc.
presentation
logic
data
PHP
server
Html
Js
css
browser
compiles
sends
Renders
Sends
information
GOOGLE CHROME
MOZILLA FIREFOX
APPLE SAFARI
INTERNET EXPLORER
INSPECT
ELEMENT
Right click to…
</TEXT EDITORS>
#ftp
software
Browser console
or
cloud ide/box
http://www.w3schools.com/html/
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/php/default.asp
http://lorempixel.com/
<html></html>
<body></body>
<img src=“images/roberto.jpg”/>
<div></div>
<br />
<html>
<head>...</head>
<body>...</body>
</html>
<p><div>
<form>
<button>
<input>
<a>
<strong>
<h2><span> <h1>
<ul>
<title>
<li> <b><img>
<ol><dfn>
<progress>
<summary>
<u>
<section> <sup>
p{
font-size: 14px;
}
.red{
color: red;
}
BUT
WHERE?
CREATE A STYLE.CSS
<HEAD>
…
<LINK REL=“STYLESHEET”HREF=“STYLE.CSS”/>
TAGS
ID
What if
two rules
define different
behaviours?
#ruler{color: red} > .left {color: blue} > p {color: green}
<div class=”ruler”>
<p><span class=”left”>Hey</span>!!!</p>
</div>
class
p{
font-size: 14px;
}
.red{
color: red;
}
#red-button{
background-color:
#44ccff;
}
p .red .lists{
color: blue;
}
#jim, #john{
font-size: 12px;
}
<p>hello</p> hello
<p class=”red”>This is red Hello
<span class=”lists”> span</span> This is red Hello span Hello Again
Hello again
</p>
This is a red Title<h1 class=”red”>This is a red Title</p>
Log into
Open the “www”folder
Right click Create file “example 1.html”
Tryhtml... Live!
<html>
</html>
<head>
</head>
<body>
</body>
<title>
</title>
<h1>
</h1>
<ol>
</ol>
<P>
</p>
<li>
</li>
1. Set page to “my first page”
2.Create welcome text
3.Create a list of your 3 best friends
*YOU ARE AT A CODING WORKSHOP ON A SUNDAY SO THAT LAST ONE MIGHT BE A LITTLE HARD...
WRITE A SHORT BIO with
3 paragraphs
Checklist1. Use a h2 tag with the title before each paragraph
2. Style each h2 tag with a different colour
3. First two paragraphs much have font size 12px
4. Third h2 needs to have a blue border on the bottom
Creating css
from scratch ...
time consuming
Find basic
templates
online
font-size: 10px;
color: #ff0000;
font-weight: bold;
text-transform: uppercase;
border: 1px solid #cccccc;
border-bottom: none;
margin-left: 10px;
background-color: brown;
Native apps Web and responsive apps
Coded for particular device Adapt to particular devices
How?
Media queries
hide
Logical operators to
determine which
rules apply
@media (min-width: 700px), handheld and (orientation:
landscape) { p{font-size:10px;}... }
show
enlarge
move
BOOTSTRAP
COOL
RESPONSIVE
free
flexible
simple
4.
b
5.
o
6.
o
7.
t
8.
s
12.
P
10.
r
11.
A
9.
t
<div class=”col-md-6”></div>
<div class=”col-md-6”></div>
<div class = “row”>
1. 2. 3.
i.
ii.
Insert
columns of 6
Title
text
Title
image
Title
text
Create a webpage using blank_template
Client-side
code that
runs in the
browser
Functions
that respond
to events
(Mouseover)
adds logic
function to
html
Communicate
asynchronously
with server
Link jquery with
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
In the head section, add:
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "Thanks for visiting!" );
event.preventDefault();
});
});
</script>