Computational Boot Camp HTML Mike Schaffer

8/23/2002 (MES) HTML What is HTML? HTML stands for HyperText Markup Language HTML is the language for publishing on the World Wide Web (all web pages use HTML) HTML files are simply text files that are saved in a special folder on the server, sent to users upon request, and interpreted by a user’s web browser. Programs such as Word, Dreamweaver, and GoLive automatically generate HTML based on a drag-and- drop GUI.

8/23/2002 (MES) Tags Tags tell the browser what you are trying to do and where to start and stop: For example, if I want text to be bold, I use the tag. All text after the tag will be bold until the tag is closed with Many, but not all tags need to be “closed” (such as ). E.g. mike schaffer

8/23/2002 (MES) Minimal Tags HTML documents consist of code which tells web browsers how to display a web page. HTML tags, such as “ ” and “ ” denote sections and elements of a web page. The minimum tags are: A Simple HTML Example HTML is Easy To Learn Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph! And this is the second paragraph.

8/23/2002 (MES) Browser Output A Simple HTML Example HTML is Easy To Learn Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph! And this is the second paragraph. Notice that spacing and layout are based on the HTML and not how the text is arranged in the HTML code.

8/23/2002 (MES) Useful Tags New paragraph Line break (similar to, but leaves no space) Horizontal Rule Bold Italic xxxxxx Center on screen Insert an image  jpg, gif, png files Insert a hyperlink Insert an link

8/23/2002 (MES) List Tags Start and stop unordered list Make a bullet in an unordered list Start and stop an ordered list Number the line Start and stop a definition list Term Definition

8/23/2002 (MES) Fonts Tags Inside the tag, you may use: SIZE=+/- [1,2] FACE=“font” COLOR=“Blue” or COLOR=“#0000FF”

8/23/2002 (MES) Heading Tags

8/23/2002 (MES) Colors “Web-safe” colors are composed of a palette of 216 colors. Colors are coded by using assigning an RGB code. Two hexadecimal codes for R (red), two for green (G) and two for blue (B). For example: Red is FF0000. In this example, FF means ‘on’ and 0 means ‘off’. Blue is 0000FF. Note ‘0’ means zero, not ‘O’.

8/23/2002 (MES) Table Tags Start a table End a table Start a row End a row Start a column End a column Column Heading What are tables used for? Tables are used to make data easier to interpret or to just give your document more impact.

8/23/2002 (MES) More Tables Heading A Heading B Heading C Cell A & D Cell B Cell C Cell E Cell F Heading A Heading B Heading C Cell A Cell B Cell C Cell D Cell E Cell F

8/23/2002 (MES) Form Tags Visitor name: Which fruits do you like? Apples Oranges Bananas Which fruit is your favorite? Apples Oranges Bananas apples oranges bananas

8/23/2002 (MES) Form Actions Forms can be connected to a script on the server. When the submit button is pressed, all the form elements may be passed to the script. The script is defined in the tag by an “action” variable....Form Elements Go Here...

8/23/2002 (MES) Page Hosting Details Tags are not case-sensitive File names and directory paths are case sensitive. Each directory should have a file called ‘index.html’. Hyperlink paths may be represented a couple ways: mike/test.html  Without a forward slash, the web server starts in the current directory and moves down. /mike/test.html  Because this link starts with a ‘/’, this link will go to the first directory in the web folder, finds the ‘mike’ directory and looks for the ‘test.html’ file.  Note that the ‘/’ doesn’t mean move to the top of the Unix directory hierarchy.

8/23/2002 (MES) Hosting Details For security, use SCP (not FTP) when transferring files to the server. All students can maintain a web page on BU’s servers: See: people.bu.edu To apply: y.html All copies of Linux have a built-in webserver (Apache) that can serve web pages. Files and directories must be world-readable (chmod command) to be seen on the web.

8/23/2002 (MES) More Info on HTML For more general HTML information, check out: HTMLPrimerAll.html HTMLPrimerAll.html Or use “View Source” command in your web browser to view HTML of an actual page. Browser Tag Support:

8/23/2002 (MES) HTML Doesn’t Have To Be Static HTML Static Code is static Can’t react to user input Interpreted by browser only Saved in “/www/html/” directory Common Gateway Interface (CGI) Perl / PHP / SSI / ASP / Shell Script Dynamic HTML generated dynamically Interactive Interpreted by server, then by browser Saved in “/www/cgi-bin/” directory* * - files must be executable (i.e. chmod +x filename)

8/23/2002 (MES) CGI Diagram

8/23/2002 (MES) CGI and Database Incorporation

8/23/2002 (MES) Exercise Based on what you’ve learned, make a page that looks like this 