4. Carlos J. Costa (ISEG) - 2018
HTML
Hypertext Markup Language,
Standard language used to access and show
Web Pages
HTML code is interpreted by a browser that
shows results to users
HTML language is composed of tags and text
5. Carlos J. Costa (ISEG) - 2018
How to write...
Start with
<!DOCTYPE html>
Do not forget
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
What Program should I use?
6. Carlos J. Costa (ISEG) - 2018
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
Page Content
</body>
</html>
7. Carlos J. Costa (ISEG) - 2018
Improving
Elements
Hyperlinks
Images
...
8. Carlos J. Costa (ISEG) - 2018
Forms
Example
<form method="post" action="test.php">
<p> ----- Register -----</p>
<p>
<input type"text" name="name" size="15" maxlenght="15">
<input type"text" name="name" size="15" maxlenght="15">
</p>
<p><input type"text" name="name" size="40" maxlenght="40"></p>
<p><input type"text" name="name" size="40" maxlenght="40"></p>
<input type="submit" value="Register">
</form>
9. Carlos J. Costa (ISEG) - 2018
HTML Attribute:
Id - This attribute assigns a name to an
element. This name must be unique in a
document.
Class - This attribute assigns a class name
or set of class names to an element.
Style - This attribute specifies style
information for the current element.
<P id="myparagraph">paragraph.</P>
10. Carlos J. Costa (ISEG) - 2018
CSS
Cascade Style Sheet
Customize webpage presentation
Definition of rules
Rules may be:
− head
− inline
− separated file
If used a separated file, this file may be shared by several
HTML pages
11. Carlos J. Costa (ISEG) - 2018
CSS
Define rule:
element {
atribute1:value1;
atribute2: value2;
...}
Example :
H1{
font-size: 36
}
12. Carlos J. Costa (ISEG) - 2018
CSS
Inline
<p style="color:blue;margin-left:20px;">This paragraph.</p>
13. Carlos J. Costa (ISEG) - 2018
CSS
In the head
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
14. Carlos J. Costa (ISEG) - 2018
CSS
In a separated file:
<head>
<link rel="stylesheet" type="text/css" href="formatos.css">
</head>
15. Carlos J. Costa (ISEG) - 2018
Javascript
JavaScript (often shortened to JS) is a language that has the following characteristics:
− lightweight,
− interpreted,
− object-oriented with first-class functions,
− prototype-based,
− dynamic
− multi-paradigm (and supports object-oriented, imperative, and functional
programming styles).
Most known as the scripting language for Web pages, but used in many non-browser
environments as well such as:
16. Carlos J. Costa (ISEG) - 2018
Javascript
• Create web page
– In the Body
• Execute code <script>...</script>
• Call Function
– In the head
• Functions are declared <script>...</script>
– Separated File
• Functions are declared
17. Carlos J. Costa (ISEG) - 2018
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
function teste(){
alert("Hello!");
}
</script>
</head>
<body>
<button onclick="teste()">show</button>
<img style="position:absolute; top:50px; left:100px;" src="boneco.jpg"/>
</body>
</html>
Javascript
18. Carlos J. Costa (ISEG) - 2018
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
function teste(){
var a=document.getElementById("b1").style.top;
alert(a);
}
</script>
</head>
<body>
<button onclick="teste()">show</button>
<img id="b1"style="position:absolute;top:50px;left:100px;"src="boneco.jpg"/>
</body>
</html>
Javascript
19. Carlos J. Costa (ISEG) - 2018
Javascript
• Print the current date in a div called
“b2”
document.getElementById("b2").innerHTML =
Date();
• Convert the text content into a integer
content.
var a=parseInt(b);
• What is the operator to concatenate?
+
20. Carlos J. Costa (ISEG) - 2018
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
function teste(){
document.getElementById("b2").innerHTML = Date();
}
</script>
</head>
<body>
<button onclick="teste()">print date</button>
<div id="b2">...</div>
</body>
</html>
Javascript
21. Carlos J. Costa (ISEG) - 2018
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
function teste(){
var a=document.getElementById("b1").style.top;
var a=parseInt(a)+10;
if (a>500){a=500};
document.getElementById("b1").style.top=a+"px";
}
</script>
</head>
<body>
<button onclick="teste()">moving</button>
<img id="b1" style="position:absolute; top:50px; left:100px;"
src="boneco.jpg" />
</body>
</html>
Javascript
22. Carlos J. Costa (ISEG) - 2018
Javascript
Stop if reach 300 px from the top
23. Carlos J. Costa (ISEG) - 2018
Javascript
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
function teste(){
var a=document.getElementById("b1").style.top;
var a=parseInt(a)+10;
document.getElementById("b1").style.top=a+"px";
}
</script>
</head>
<body>
<button onclick="teste()">moving</button>
<img id="b1" style="position:absolute; top:50px; left:100px;"
src="boneco.jpg" />
</body>
</html>
31. Carlos J. Costa (ISEG) - 2018
Bibliography
http://www.w3.org/TR/html401/struct/global.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript
http://www.w3schools.com
Costa, C. J. (2007). Desenvolvimento para web. ITML
press