43
PHP Course [Before Start] Medhat Dawoud
| Date post: | 16-May-2015 |
| Category: |
Education |
| Upload: | medhat-dawoud |
| View: | 1,303 times |
| Download: | 3 times |
PHP Course [Before Start]
Medhat Dawoud
Outlines
• WWW• How web works?• Static Vs Dynamic WebPages• What is HTML?• What is CSS?• What is JavaScript?
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.
WWW continue
• The Worldwide Web consists of many clients and servers connected over the internet
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.
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).
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.
Static WebPages
Dynamic WebPages
Dynamic server solutions
• Microsoft Active server Pages.• PHP.• Java-based server(J2EE)– IBM web sphere– Oracle Web Logic– JBoss.
• Microsoft ASP.NET .
Let’s add some basics
• Intro 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 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.
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 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>)
HTML Continue – special characters
For more visit: http://www.degraeve.com/reference/specialcharacters.php
© ©
® ®< <
&rt; >
£ £
¾ ¾
÷ ÷
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 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:– <img src="www.jpg"/>– This tag has a property called src stands for the source
of the image on your PC or on the server.
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
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
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..,
HTML Continue - Forms
HTML Last
DemoTry 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 styles
• There 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 sheet
• This 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 property
• Between each property and the next one there is a semicolon “;” .
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 changeThe back ground color of the body of the page to yellow.
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" />
External CSS
Result
HTML file
CSS file
CSS Last
DemoTry 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, 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
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 Continue
• You 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 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.
Some JavaScript Rules
• Comments: is most like in C#.– // for the single row comment.– /* for the multiline comments
…………………………………………………..…………………………………….. */
• Variables: – Case sensitive.– Defined using var keyword.– Example : var name = “mohamed”;
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).
Some JavaScript Rules
• Example of the for loop usage:
Code Result
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.
Some JavaScript Rules
• There are more than one way for the popup boxes:1. Alert: make sure that the information comes from
the user .2. Confirm: if we want user to verify or accept
something .3. Prompt : when we want user to input some thing
before entering the page . Some examples for each .
JavaScript Last
DemoTry To Make some JS scripts
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
Thanks
