Web Page Development - An Overview
•
1 like•119 views
Web Page Development - An Overview - HTML - CSS - Javascript
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Web Page Development - An Overview
Similar to Web Page Development - An Overview (20)
More from Carlos J. Costa
More from Carlos J. Costa (20)
Recently uploaded
Recently uploaded (20)
Web Page Development - An Overview
- 1. Carlos J. Costa (2017) Web Page Development An Overview Carlos J. Costa, Ph.D.
- 2. Carlos J. Costa (2017)
- 3. Carlos J. Costa (2017) HTML Hypertext Markup Language, Standard language used to acess and show Web Pages HTML code is interpreted by a browser that shows results to users HTML language is composed of tags and text
- 4. Carlos J. Costa (2017) How to write... Start with <!DOCTYPE html> Do not forget <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
- 5. Carlos J. Costa (2017) Improving Elements Links Images ...
- 6. Carlos J. Costa (2017) Forms Example <form method="post" action="test.php"> <input type="text" name="city" value=”Lisbon” size="15" maxlenght="15"> <input type="submit" value="enviar"> </form>
- 7. Carlos J. Costa (2017) 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>
- 8. Carlos J. Costa (2017) 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
- 9. Carlos J. Costa (2017) CSS Define rule: element { atribute1:value1; atribute2: value2; ...} Example : H1{ font-size: 36 }
- 10. Carlos J. Costa (2017) CSS Inline <p style="color:blue;margin-left:20px;">This paragraph.</p>
- 11. Carlos J. Costa (2017) CSS In the head <head> <style> body {background-color:yellow;} p {color:blue;} </style> </head>
- 12. Carlos J. Costa (2017) CSS In a separated file: <head> <link rel="stylesheet" type="text/css" href="formatos.css"> </head>
- 13. Carlos J. Costa (2017) 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:
- 14. Carlos J. Costa (2017) Javascript Create web page • In the head: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> • In the Body <form method="post"> <input type="button" onclick="teste()"> </form>
- 15. Carlos J. Costa (2017) <!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script> function teste(){ alert("olá"); } </script> </head> <form method="post"> <input type="button" value="Ola" onclick="teste();"> </form> <img style="position:absolute; top:50px; left:100px;" src="boneco.jpg"/> </html> Javascript
- 16. Carlos J. Costa (2017) <!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> <form method="post"> <input type="button" value="Ola" onclick="teste();"> </form> <img id="b1"style="position:absolute;top:50px;left:100px;"src="boneco.jpg"/> </html> Javascript
- 17. Carlos J. Costa (2017) document.getElementById("demo").innerH TML = Date(); var a=parseInt(a); + concatenate Javascript
- 18. Carlos J. Costa (2017) <!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; //alert(a); document.getElementById("b1").style.top=a+"px"; } </script> </head> <form method="post"> <input type="button" value="Ola" onclick="teste();"> </form> <img id="b1" style="position:absolute; top:50px; left:100px;" src="boneco.jpg" /> </html> Javascript
- 19. Carlos J. Costa (2017) 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 Previous versions of those slides, since 2004