Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Before start

•Download as PPTX, PDF•
•
Medhat Dawoud
Medhat Dawoud

The document provides an introduction and overview of HTML, CSS, JavaScript, and how the web works. It discusses the difference between static and dynamic webpages. Key points include: - The World Wide Web consists of clients and servers connected over the internet that communicate using HTTP. Webpages, images, and files are requested and returned between clients and servers. - HTML is used to define the structure and content of a webpage. CSS is used for presentation and styling. JavaScript adds interactivity. - Static webpages only provide information with no user interaction, while dynamic webpages use server-side scripts like PHP to interact with users. - The document gives examples of HTML tags, CSS stylesheets

1 of 43
PHP Course [Before Start]Medhat Dawoud
OutlinesWWWHow web works?Static Vs Dynamic WebPagesWhat is HTML?What is CSS?What is JavaScript?
WWWThe World Wide Web, abbreviated as WWW and commonly known as The WebWWW is a system of interlinked hypertext documents contained on the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them by using hyperlinks.
WWW continueThe Worldwide Web consists of many clients and servers connected over the internet
How the web worksComputers communicate to each other using hyper text transfer protocol (HTTP).A client sends a request in http format for a web resource.Webpage.Image file.JavaScript or CSS file.Server return response.
The pieces of the PUZZLEEach client has a web browser:Personal Computers(IE, Firefox, Safari, Opera).Cell Phones.Other Devices.Each server runs a software called an HTTP Server:Internet information services(for windows only).Apache server(All operating systems).
Dynamic WP Vs Static WPThere are two types of WebPages:Static WebPages: that is used only for giving information about some thing without any interaction with the used of the page, written in HTML or XHTML.Dynamic WebPages: which has a server side codes and has an interactional way to make sense to the user with the webpage, written usually in ASP, PHP, JSP, or python or any other server side lang.
Static WebPages
Dynamic WebPages
Dynamic server solutionsMicrosoft Active server Pages.PHP.Java-based server(J2EE)IBM web sphereOracle Web LogicJBoss.Microsoft ASP.NET .
Let’s add some basicsIntro to HTML.Intro to CSS.Intro to JavaScript.
What is HTML?HTML stands for Hypertext Markup Language.Not programming language but it is markup lung.HTML depends on elements like <html> element.Note that HTML tags are case insensitive.
HTML continueThe HTML file is using one of the two extensions .html or .htmHTML makes a static Webpage. HTML documents are also called web pages. Web browser doesn't display HTML tags. It uses HTML tags to display HTML document as a web page.
General structure of the HTML file
HTML continue<html></html>: define the web page <head></head>: define the header of the page (info about the page) <body></body>: here you write the content of the page
HTML continue – some rulesIt is preferred to write HTML tags in lowercase. HTML ignores spaces in source code, you can make spaces using this &nbsp; ( Non breakable Space ) HTML elements can be nested ( can contain another elements ) First opened Last Closed (<b><u><i>Text</i></u></b>)
HTML Continue – special charactersFor more visit: http://www.degraeve.com/reference/specialcharacters.php
HTML Continue<marquee> is used to make some data in the webpage move with some characteristics with three types of behavior property:Scroll.Slide.Alternate.<br /> stands for the break line similar to pressing enter in any text editor.<hr /> stands for horizontal row which is used to draw a horizontal row inside the webpage.
HTML ContinueLinks: to make a hyper link in your website you can use the tag:<a href=“http://www.google.com”>Google</a>The a tag has a property named href stand for the hyper reference of the link and inside the element you put the word you want to appear as a link “Google”.Images: is used in HTML with tag:<imgsrc="www.jpg"/>This tag has a property called src stands for the source of the image on your PC or on the server.
HTML ContinueLists: you can make two types of lists:Ordered list: with the tag <ol>Unordered list: with the tag <ul>In both types each contain some items using the tag <li> and you should close it in the end.CodeResult
HTML ContinueTables: the tables are used to represent data not for design as many designers do.Use the tag <table> to create table and make new table row using <tr> and fill them with data using <td> as follow.CodeResult
HTML Continue - FormsUsed to take input from user.It can contain many elements like (text field, textarea, radio, checkbox, dropdown menu, submit button, upload file, reset button, ..etc).We use the tag: <form></form> that contains 3 other tags: <input />, <textarea />, and <select />.To design a login form you write the following codeSee the next slide view the form in a browser..,
HTML Continue - Forms
HTML LastDemoTry To Make a simple HTML page
What is CSS?Stands for Cascading Style Sheets.CSS is in the presentation layer of web page CSS define how HTML elements are displayed CSS Solve HTML problems CSS save time
CSS stylesThere is three ways to use the CSS:Inline style sheet.Internal style sheet.External style sheet.Each of them has the same way to make the style of HTML tags, but they are only different in the way we use the style sheet.inline style sheetThis style is from it’s name inline with any tag you need using a property in the tag called style as in figure:Inline CSS control the style sheet of the inline element.Note that the syntax of CSS is written as:property-name : value of propertyBetween each property and the next one there is a semicolon “;” .
Internal style sheetIt’s more generalized than the inline.It might include the style of a whole webpage.A tag called <style> is added to the header section as in figure:In this example we changeThe back ground color of the body of the page to yellow.
External style sheetThis type is the preferred to be used because it help in styling the whole site at a time.We make a new file with extension .css and write all the styles we want inside that file.Then we connect this file to the pages we want to take this style in the website.To connect it to the web page we write a simple tag:<link rel="stylesheet"type="text/css"href="styles.css" />
External CSSHTML fileCSS fileResult
CSS LastDemoTry To control the style of a simple HTML page
What is Scripting?Client Side Scripting Excuted @ Client browser He can simply view the source code Examples: JavaScript, VbScriptServer Side Scripting Excuted @ the server Return Back Client Side like ( HTML, CSS, JS) that browser understand User can’t see the Source code Use only can view the output ( HTML, CSS, JS ) Examples: PHP, ASP, JSP
What is JavaScript?Most popular Scripting Language
Work in major browsers like Firefox, Opera, Safari, IE.
You should have basics of HTML/XHTML .
It is designed to add interactivity to HTML Page.
It is interpreted language ( there is no compilation )
It free  and client side ;) .JavaScript ContinueYou can write JavaScript in head or body, using the tag <script> with some properties as in the following figure:The result will be printing Hello world! In the webpage
JavaScript ContinueYou can also write JavaScript in an external file and refer to it like the external CSS file but with the tag <script> as follow:The JavaScript file has the extension .jsThe scriptfile.js has the JavaScript codes.
Some JavaScript RulesComments: is most like in C#.// for the single row comment./* for the multiline comments…………………………………………………..…………………………………….. */Variables: Case sensitive.Defined using varkeyword.Example : var name = “mohamed”;
Some JavaScript RulesConditional operator:Syntaxvariablename=(condition)?value1:value2Used to test a condition and make action.Switch case: is most likely in C#.If .. Else: is the same as in C#.For loop and while loop are also the same as in C#.There are break and continue statements like C#.Foreach in C# is here for(var variable in collection).
Some JavaScript RulesExample of the for loop usage:CodeResult 
Some JavaScript RulesFunctions: to make a function you should use the following syntax:function functionname(var1,var2,...,varX) { //some code } Then we can make functions that can be used more times.
Some JavaScript RulesThere are more than one way for the popup boxes:Alert: make sure that the information comes from the user .Confirm: if we want user to verify or accept something .Prompt : when we want user to input some thing before entering the page .Some examples for each .JavaScript LastDemoTry To Make some JS scripts

More Related Content

Before start

  • 1. PHP Course [Before Start]Medhat Dawoud
  • 2. OutlinesWWWHow web works?Static Vs Dynamic WebPagesWhat is HTML?What is CSS?What is JavaScript?
  • 3. WWWThe World Wide Web, abbreviated as WWW and commonly known as The WebWWW is a system of interlinked hypertext documents contained on the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them by using hyperlinks.
  • 4. WWW continueThe Worldwide Web consists of many clients and servers connected over the internet
  • 5. How the web worksComputers communicate to each other using hyper text transfer protocol (HTTP).A client sends a request in http format for a web resource.Webpage.Image file.JavaScript or CSS file.Server return response.
  • 6. The pieces of the PUZZLEEach client has a web browser:Personal Computers(IE, Firefox, Safari, Opera).Cell Phones.Other Devices.Each server runs a software called an HTTP Server:Internet information services(for windows only).Apache server(All operating systems).
  • 7. Dynamic WP Vs Static WPThere are two types of WebPages:Static WebPages: that is used only for giving information about some thing without any interaction with the used of the page, written in HTML or XHTML.Dynamic WebPages: which has a server side codes and has an interactional way to make sense to the user with the webpage, written usually in ASP, PHP, JSP, or python or any other server side lang.
  • 10. Dynamic server solutionsMicrosoft Active server Pages.PHP.Java-based server(J2EE)IBM web sphereOracle Web LogicJBoss.Microsoft ASP.NET .
  • 11. Let’s add some basicsIntro to HTML.Intro to CSS.Intro to JavaScript.
  • 12. What is HTML?HTML stands for Hypertext Markup Language.Not programming language but it is markup lung.HTML depends on elements like <html> element.Note that HTML tags are case insensitive.
  • 13. HTML continueThe HTML file is using one of the two extensions .html or .htmHTML makes a static Webpage. HTML documents are also called web pages. Web browser doesn't display HTML tags. It uses HTML tags to display HTML document as a web page.
  • 14. General structure of the HTML file
  • 15. HTML continue<html></html>: define the web page <head></head>: define the header of the page (info about the page) <body></body>: here you write the content of the page
  • 16. HTML continue – some rulesIt is preferred to write HTML tags in lowercase. HTML ignores spaces in source code, you can make spaces using this &nbsp; ( Non breakable Space ) HTML elements can be nested ( can contain another elements ) First opened Last Closed (<b><u><i>Text</i></u></b>)
  • 17. HTML Continue – special charactersFor more visit: http://www.degraeve.com/reference/specialcharacters.php
  • 18. HTML Continue<marquee> is used to make some data in the webpage move with some characteristics with three types of behavior property:Scroll.Slide.Alternate.<br /> stands for the break line similar to pressing enter in any text editor.<hr /> stands for horizontal row which is used to draw a horizontal row inside the webpage.
  • 19. HTML ContinueLinks: to make a hyper link in your website you can use the tag:<a href=“http://www.google.com”>Google</a>The a tag has a property named href stand for the hyper reference of the link and inside the element you put the word you want to appear as a link “Google”.Images: is used in HTML with tag:<imgsrc="www.jpg"/>This tag has a property called src stands for the source of the image on your PC or on the server.
  • 20. HTML ContinueLists: you can make two types of lists:Ordered list: with the tag <ol>Unordered list: with the tag <ul>In both types each contain some items using the tag <li> and you should close it in the end.CodeResult
  • 21. HTML ContinueTables: the tables are used to represent data not for design as many designers do.Use the tag <table> to create table and make new table row using <tr> and fill them with data using <td> as follow.CodeResult
  • 22. HTML Continue - FormsUsed to take input from user.It can contain many elements like (text field, textarea, radio, checkbox, dropdown menu, submit button, upload file, reset button, ..etc).We use the tag: <form></form> that contains 3 other tags: <input />, <textarea />, and <select />.To design a login form you write the following codeSee the next slide view the form in a browser..,
  • 24. HTML LastDemoTry To Make a simple HTML page
  • 25. What is CSS?Stands for Cascading Style Sheets.CSS is in the presentation layer of web page CSS define how HTML elements are displayed CSS Solve HTML problems CSS save time
  • 26. CSS stylesThere is three ways to use the CSS:Inline style sheet.Internal style sheet.External style sheet.Each of them has the same way to make the style of HTML tags, but they are only different in the way we use the style sheet.inline style sheetThis style is from it’s name inline with any tag you need using a property in the tag called style as in figure:Inline CSS control the style sheet of the inline element.Note that the syntax of CSS is written as:property-name : value of propertyBetween each property and the next one there is a semicolon “;” .
  • 27. Internal style sheetIt’s more generalized than the inline.It might include the style of a whole webpage.A tag called <style> is added to the header section as in figure:In this example we changeThe back ground color of the body of the page to yellow.
  • 28. External style sheetThis type is the preferred to be used because it help in styling the whole site at a time.We make a new file with extension .css and write all the styles we want inside that file.Then we connect this file to the pages we want to take this style in the website.To connect it to the web page we write a simple tag:<link rel="stylesheet"type="text/css"href="styles.css" />
  • 30. CSS LastDemoTry To control the style of a simple HTML page
  • 31. What is Scripting?Client Side Scripting Excuted @ Client browser He can simply view the source code Examples: JavaScript, VbScriptServer Side Scripting Excuted @ the server Return Back Client Side like ( HTML, CSS, JS) that browser understand User can’t see the Source code Use only can view the output ( HTML, CSS, JS ) Examples: PHP, ASP, JSP
  • 32. What is JavaScript?Most popular Scripting Language
  • 33. Work in major browsers like Firefox, Opera, Safari, IE.
  • 34. You should have basics of HTML/XHTML .
  • 35. It is designed to add interactivity to HTML Page.
  • 36. It is interpreted language ( there is no compilation )
  • 37. It free  and client side ;) .JavaScript ContinueYou can write JavaScript in head or body, using the tag <script> with some properties as in the following figure:The result will be printing Hello world! In the webpage
  • 38. JavaScript ContinueYou can also write JavaScript in an external file and refer to it like the external CSS file but with the tag <script> as follow:The JavaScript file has the extension .jsThe scriptfile.js has the JavaScript codes.
  • 39. Some JavaScript RulesComments: is most like in C#.// for the single row comment./* for the multiline comments…………………………………………………..…………………………………….. */Variables: Case sensitive.Defined using varkeyword.Example : var name = “mohamed”;
  • 40. Some JavaScript RulesConditional operator:Syntaxvariablename=(condition)?value1:value2Used to test a condition and make action.Switch case: is most likely in C#.If .. Else: is the same as in C#.For loop and while loop are also the same as in C#.There are break and continue statements like C#.Foreach in C# is here for(var variable in collection).
  • 41. Some JavaScript RulesExample of the for loop usage:CodeResult 
  • 42. Some JavaScript RulesFunctions: to make a function you should use the following syntax:function functionname(var1,var2,...,varX) { //some code } Then we can make functions that can be used more times.
  • 43. Some JavaScript RulesThere are more than one way for the popup boxes:Alert: make sure that the information comes from the user .Confirm: if we want user to verify or accept something .Prompt : when we want user to input some thing before entering the page .Some examples for each .JavaScript LastDemoTry To Make some JS scripts
  • 44. What’s now ??Now we get the standards of web development or design in general, you can study then in more details from some resources such as:http://www.w3schools.comhttp://html.net/http://www.dynamicdrive.com/style/http://www.google.comhttp://www.eng-mmf.comhttp://www.MedhatDawoud.com