Before start
•Download as PPTX, PDF•
2 likes•1,114 views
before start learning any web scripting language you must know HTML, CSS, JavaScript
![PHP Course [Before Start] Medhat Dawoud](https://image.slidesharecdn.com/beforestart-110402134857-phpapp01/85/before-start-1-320.jpg)
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Before start
Similar to Before start (20)
More from Medhat Dawoud
Recently uploaded
Recently uploaded (20)
Before start
- 1. PHP Course [Before Start] Medhat Dawoud
- 2. Outlines WWW How web works? Static Vs Dynamic WebPages What is HTML? What is CSS? What is JavaScript?
- 3. WWW The World Wide Web, abbreviated as WWW and commonly known as The Web WWW 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 continue The Worldwide Web consists of many clients and servers connected over the internet
- 5. How the web works Computers 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 PUZZLE Each 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 WP There 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 solutions Microsoft Active server Pages. PHP. Java-based server(J2EE) IBM web sphere Oracle Web Logic JBoss. Microsoft ASP.NET .
- 11. Let’s add some basics Intro 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 continue The HTML file is using one of the two extensions .html or .htm HTML 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 rules It 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 characters For 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 Continue Links: 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 Continue Lists: 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. Code Result
- 21. HTML Continue Tables: 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. Code Result
- 22. HTML Continue - Forms Used 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..,
- 23. HTML Continue - Forms
- 24. HTML Last Demo Try 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
- 27. Internal style sheet It’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 change The back ground color of the body of the page to yellow.
- 28. External style sheet This 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" />
- 29. External CSS HTML file CSS file Result
- 30. CSS Last Demo Try 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, VbScript Server 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
- 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 )
- 38. JavaScript Continue You 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 .js The scriptfile.js has the JavaScript codes.
- 39. Some JavaScript Rules Comments: 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 Rules Conditional operator: Syntax variablename=(condition)?value1:value2 Used 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 Rules Example of the for loop usage: Code Result
- 42. Some JavaScript Rules Functions: 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.
- 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.com http://html.net/ http://www.dynamicdrive.com/style/ http://www.google.com http://www.eng-mmf.com http://www.MedhatDawoud.com
- 45. Thanks