Downloaded 34 times
![PHP Course [Before Start]Medhat Dawoud](https://image.slidesharecdn.com/beforestart-110402134857-phpapp01/85/Before-start-1-320.jpg)
![PHP Course [Before Start]Medhat Dawoud](https://image.slidesharecdn.com/beforestart-110402134857-phpapp01/75/Before-start-1-2048.jpg)
Uploaded byMedhat Dawoud
Before start
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
More Related Content
Before start
- 1. PHP Course [BeforeStart]Medhat Dawoud
- 2. OutlinesWWWHow web works?StaticVs Dynamic WebPagesWhat is HTML?What is CSS?What is JavaScript?
- 3. WWWThe World WideWeb, 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 WorldwideWeb consists of many clients and servers connected over the internet
- 5. How the webworksComputers 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 ofthe 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 VsStatic 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.
- 8.
- 9.
- 10. Dynamic server solutionsMicrosoftActive server Pages.PHP.Java-based server(J2EE)IBM web sphereOracle Web LogicJBoss.Microsoft ASP.NET .
- 11. Let’s add somebasicsIntro to HTML.Intro to CSS.Intro to JavaScript.
- 12. What is HTML?HTMLstands 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 HTMLfile 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 ofthe HTML file
- 15. HTML continue<html></html>: definethe 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 ( 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> isused 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: tomake 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: youcan 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: thetables 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 codeSee the next slide view the form in a browser..,
- 23. HTML Continue -Forms
- 24. HTML LastDemoTry ToMake a simple HTML page
- 25. What is CSS?Standsfor 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 isthree 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’smore 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 sheetThistype 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" />
- 29. External CSSHTML fileCSSfileResult
- 30. CSS LastDemoTry Tocontrol the style of a simple HTML page
- 31. What is Scripting?ClientSide 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?Mostpopular Scripting Language
- 33. Work in majorbrowsers like Firefox, Opera, Safari, IE.
- 34. You should havebasics of HTML/XHTML .
- 35. It is designedto add interactivity to HTML Page.
- 36. It is interpretedlanguage ( 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 canalso 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 RulesConditionaloperator: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 RulesExampleof 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 RulesThereare 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