ITM352

1. ITM352 PHP and Dynamic Web Pages Basic HTML

2. Class Web Server Info • Class web server • Site: itm-vm.shidler.hawaii.edu • SSH user: “itm352student” password: “!student!” port 8615 • SSH • You should have a secure file transfer program, such as SSH for Windows or FileZilla for Mac/Windows, installed on your laptop (information at http://www.hawaii.edu/itsdocs/win/installingssh.pdf) • Choose “sftp” (if there is a choice of protocol) • When you log in you will see “Port_Section1” and “Kazman_Section2”. Use Kazman_Section2. • Create a folder for yourself. Use your last name. You will use this throughout the semester. • For example, I created a folder called “Kazman” for myself. • If you load a file, say “foo.html” to your folder, you will access it as follows: • http://itm-vm.shidler.hawaii.edu/itm352student/Section2/<your_name>/<your_file> • E.g. (in my case), http://itm-vm.shidler.hawaii.edu/itm352student/Kazman_Section2/Kazman/foo.html

3. Today's Class • What is PHP? • Diving in head first! • Finding and playing with PHP and related software • Starting to figure out what the deal is with PHP • Basic HTML • Have confidence that you will get the job done! Just keep at it.

4. What is PHP? • A web-based programming language – "Pre-Hypertext Processor" or “PHP-Hypertext Processor” (although it originally meant “Personal Home Page”) • - All computers are directed by programs • - like very detailed recipes • - written in languages that humans can understand and be processed by computers (unlike English) • PHP is one among many thousands of such languages…

5. What's special about PHP? • Web-based, familiar user interfaces, easy integration with other web-based systems • Current, designed according to the latest understanding of programming language design. • Portable, so it can be run on almost any computer. • Object-oriented, like the most popular languages (Java, C++) used today for the most innovative applications. • Convenient, loaded with powerful and useful features, supports many different programming styles • Used, lots of PHP in use today (incl. the most "popular" dynamic web sites), more all the time, lots of non-trivial examples and free resources • Not Proprietary, and that’s good!

6. PHP Usage Source: http://news.netcraft.com/archives/2013/01/31/php-just-grows-grows.html

7. How Does PHP Work? • PHP is a program that performs dynamic HTML scripting • It is a language interpreter that directly executes commands then ultimately outputs into HTML/HTTP (rather than a compiler which outputs translates commands into machine code for later execution) • The server knows to execute PHP code when the requested file has a .php extension Web Server (e.g. Apache) Client (e.g. IE) Give me page xxx.php HTML + PHP code PHP Scripting Engine output Static HTML Dynamic data (files, database, webserver, data feeds, etc.)

8. Example Dynamic Web Page • Open your favorite text editor and type • <?php • echo '<big><center> Hello </center><BR>'; • echo '1+2='; • echo 1+2; • ?> • Note that PHP code will always be enclosed inside the <? … ?> or <?php … ?> tags. Outside is HTML (but notice that inside there can be HTML too) • Now save the file as text only with name "<your initials>.php" • Upload this to your itm352Student folder, open a browser and type • http://itm-vm.shidler.hawaii.edu/itm352student/Kazman_Section2/<your_name>/<your initials>.php • Questions • Why is this a "dynamic" web page? • Why wouldn't this file work the same if you called it <your initials>.htm? • When you do a "view source" in the browser, where is the PHP code?

9. Tour of a PHP IDE: Simple Output • Several parts to an IDE (for us, EasyEclipse for PHP) • Editor (for writing code) • File manager • Preview (web-server, web-browser) • Tools (documentation, debugger, scripts, etc.) • In the IDE, let’s type and run the following: • <big><center> Hello </center><BR> • 1+2= • <?php • // add 1 and 2 then print out the result • echo 1+2; • ?> • Why is this the same as the previous dynamic web page example?

10. HTML Basics

11. Editing • Creating and editing HTML/HTM can be done with a tool as simple as Notepad or WordPad • or something more complex such as a PHP editor: NetBeans, PHPEdit, Aptana, Eclipse, … • or a WYSIWYG editor: Dreamweaver, SeaMonkey, WIX, …

12. Tags • <B> for bold face • </B> to end bold face • <I> for italics • </I> to end italics • <TT> for quick typewriter font • </TT> to end typewriter font • Combine Tags • <B><I><TT>Text Text</TT></B></I> • Text Text

13. Single Tags • <HR> creates a horizontal line • Specify width <HR width="60%"> • <BR> creates a new line break • <P> creates a new line break and a blank line • (examples on next slide)

14. HTML Tags Example <HTML> <TITLE> The Title </TITLE> <B>This text is bold</B> <P> This text is not Italics, but <I>This text is</I> and <B>This text is Bold</B> <BR> <HR width="60%"> <B><I>This is a combination of Bold and Italics</I></B> <BR> <HR> <TT> typewriter font </TT> </HTML> OUTPUT:

15. Text Manipulation

16. Headings • <H1>This is Heading 1</H1> • <H2>This is Heading 2</H2> • <H3>This is Heading 3</H3> • <H4>This is Heading 4</H4> • <H5>This is Heading 5</H5> • <H6>This is Heading 6</H6> • <H1> is the largest & <H6> is the smallest • Note: In newer browsers, the numbers 7 and 8 have been added, but in terms of size, there isn't a great deal of difference between them and the 6 heading.

17. Font Size • There are twelve (12) font size commands • +6 through +1 and -1 through -6 • Syntax: • <FONT SIZE="+3">This is +3</FONT> • Close the font with </font>

18. Alignment • Centering output: • Use <CENTER> to start the centering of text/images • Use </CENTER> to end the centering of text • <CENTER> • Text will be centered • </CENTER> • Aligning output either left or right (substitute "left" for "right" in the examples to align output to the left): • Syntax: • <P ALIGN="right">Text in here is aligned to the right</P> • Close or end the aligning with </P> • <P ALIGN="right"> • Text in here is pushed to the right • </P>

19. Images

20. Placing Images on a Page • Syntax: • <IMG SRC="image.gif"> • No closing tags needed • Types of images supported • .gif, .jpg, jpeg, .bmp, .png, and more…

21. Linking Pages

22. Hypertext Link • Syntax <A HREF="http://itm-vm.shidler.hawaii.edu/itm352"> Click Here for ITM352</A> • Starts with a • <A HREF=" • Then inside quotes is the link <A HREF="http://itm-vm.shidler.hawaii.edu/itm352"> • Then add the link text • Finally, close the link with </A>

23. Email Link • To create a link that will email using the local email client (must be set up first) • Syntax: • <A HREF="mailto:email@address.com">Click Here To Write an Email</A> • End link with </A>

24. Combining Link+Image • You can also make an image a link • Syntax: • <A HREF="http://www.htmlgoodies.com"><IMG SRC="homepage.gif"></A> • The blue part is the link, and the green text is the image.

25. Image+Link Border • Often times an image with a link is created, but a blue or purple border is created when links are made. • To remove the border… (not necessary) • Syntax: • <IMG BORDER="0" SRC="homepage.gif"> • The black portion (border="0") removes the blue/purple border Do Exercises #3 and #4 in your lab

26. HTML Tables

27. Rows <table border="3" cellpadding="5" cellspacing="5"> <tr> <td>hello</td> <td>hello3</td> <td>hello5</td> </tr> </table> • This puts the words "hello“, "hello3“, and “hello5” into cells on the same row, which looks like this

28. Columns To start a new column, you would start a new <tr> Example: <table border="3" cellpadding="5" cellspacing="5"> <tr><td>hello</td></tr> <tr><td>hello3</td></tr> <tr><td>hello5</td></tr> </table> • This code will produce

29. Recap • So, start the table with <table> (the border="3"...etc. are optional) • a new row is defined by <tr> </tr> • cells are defined by <td> </td>

30. CSS - Adding Some Style to Your HTML

31. What is CSS? • CSS stands for Cascading Style Sheets • Styles define how HTML elements and markup should be displayed by the browser (or user agent) • Styles can be included in the <head> area of an HTML document, or placed in external Style Sheet files. • Multiple style definitions are able to cascade into one…

32. What’s a “Cascade”? • All styles will "cascade" into a new "virtual" style sheet in the following rule order, where number four has the highest priority: • 1. Browser default • 2. External style sheet • 3. Internal style sheet (inside the <head> tag) • 4. Inline style (inside an HTML element) • An inline style (inside an HTML element) with the highest priority will override a style declared inside the <head> tag, in turn overrides an external style sheet, which finally overrides browser default values.

33. Rules in CSS • A CSS Style Sheet is a collection of rules, describing how the browser should display HTML elements. • Each rule contains 2 parts: • A Selector, stating which element in the HTML a rule applies to; • One or more Declarations, which describe how these elements should be displayed.

34. CSS Rules: Selectors and Declarations • h1 { font-family: Times, Georgia, serif; font-size: 24px; text-align: center; • } Rule Selector Declarations

35. CSS Rules: Declaration Parts • h1 { font-family: Times, Georgia, serif; font-size: 24px; text-align: center; • } Properties Values : Each declaration separated with a semi-colon Properties and values separated with a colon Declarations consist of 2 parts: a property and a value. Each declaration ends with a semi-colon ( ; ). Properties and values are separated with a colon ( : ).

36. CSS Rules: Declaration Parts • h1 { font-family: “Trebuchet MS”, serif; font-size: 24px; text-align: center; • } Only values with a space in the name need to be enclosed in quotes Unlike HTML, values do not have to be enclosed in quotation marks, unless the value name includes a space (e.g multi-word name).

37. Simple (Element) Selectors • The most basic form of CSS selector is an HTML element name; • h1, h2, p, ol, ul, table, etc. • This is the simple or element selector. Example: • p { color: #003366; } • This will set every occurrence of content marked up the <p> paragraph tag to be a dark blue color.

38. More Info… • https://www.w3schools.com/css/ • http://www.htmldog.com/guides/css/beginner/