Transcript Basic HTML
ITM352 PHP and Dynamic Web Pages Basic HTML 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 “Section1” and “Section2”. Use Section2. Create a folder for yourself. 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://itmvm.shidler.hawaii.edu/itm352student/Section2/<your_name>/<your_file> E.g. (in my case), http://itmvm.shidler.hawaii.edu/itm352student/Section2/Kazman/foo.html 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. What is PHP? • A web-based programming language – "Pre-Hypertext Processor" or “PHPHypertext 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… 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! PHP Usage Source: http://news.netcraft.com/archives/2013/01/31/php-just-grows-grows.html 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 output Scripting Engine PHP code Dynamic data (files, database, webserver, data feeds, etc.) Static HTML 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 the itm352/phpfiles directory, open a browser and type – http://itm-vm.shidler.hawaii.edu/itm352/phpfiles/<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? 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? HTML Basics 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, Emacs, Eclipse, … • or a WYSIWYG editor: Dreamweaver, SeaMonkey, WIX, … 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 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) 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: Do Exercise #1 in your lab Text Manipulation 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 later-version browsers (3.0 and above), 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. 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> 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> Images 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… Do Exercise #2 in your lab Linking Pages 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> Email Link • To create a link that will email using the local email client (must be set up first) • Syntax: – <A HREF="mailto:[email protected]">Click Here To Write an Email</A> • End link with </A> 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. 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 HTML Tables 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 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 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> Do Exercise #5 in your lab