computational boot camp html
DESCRIPTION
Computational Boot Camp HTML. Mike Schaffer. HTML. What is HTML? HTML stands for H yper T ext M arkup L anguage HTML is the language for publishing on the World Wide Web (all web pages use HTML) - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/1.jpg)
Computational Boot CampHTML
Mike Schaffer
![Page 2: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/2.jpg)
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.
![Page 3: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/3.jpg)
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 <B>
tag. All text after the <B> tag will be bold until the tag is
closed with </B> Many, but not all tags need to be “closed” (such as
<HR>). E.g.
<B>mike</B> schaffer<HR>
![Page 4: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/4.jpg)
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 “<BODY>” and “</BODY>” denote sections and elements of a web page.
The minimum tags are: <HTML> <HEAD> <BODY>
<html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>And this is the second paragraph.</P> </body></html>
![Page 5: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/5.jpg)
8/23/2002 (MES)
Browser Output
<html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>And this is the second paragraph.</P> </body></html>
Notice that spacing andlayout are based on theHTML and not how thetext is arranged in theHTML code.
![Page 6: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/6.jpg)
8/23/2002 (MES)
Useful Tags
<P> New paragraph <BR> Line break (similar to <P>, but leaves no space) <HR> Horizontal Rule <B> Bold <I> Italic <CENTER>xxxxxx</CENTER> Center on screen <FONT FACE=“Arial” SIZE=“+1” COLOR=“#006699”> <IMG SRC = “/path_to_image_file”> Insert an image
jpg, gif, png files <A HREF=“http//www.bu.edu”> Insert a hyperlink <A HREF=“mailto:[email protected]”> Insert an e-mail link <!-- Comments -->
![Page 7: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/7.jpg)
8/23/2002 (MES)
List Tags
<UL></UL> Start and stop unordered list <LI> Make a bullet in an unordered list
<OL></OL> Start and stop an ordered list<LI> Number the line
<DL></DL> Start and stop a definition list<DT> Term <DD> Definition
![Page 8: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/8.jpg)
8/23/2002 (MES)
Fonts Tags
Inside the <FONT> tag, you may use: SIZE=+/- [1,2] FACE=“font”
COLOR=“Blue” or COLOR=“#0000FF”
![Page 9: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/9.jpg)
8/23/2002 (MES)
Heading Tags
![Page 10: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/10.jpg)
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’.
![Page 11: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/11.jpg)
8/23/2002 (MES)
Table Tags
<TABLE> Start a table </TABLE> End a table <TR> Start a row </TR> End a row <TD> Start a column </TD> End a column <TH> Column Heading
<table border=4><tr><th>What are tables used for?</th></tr><tr><td>Tables are used to make data easier to interpret or to justgive your document more impact.</td></tr></table>
![Page 12: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/12.jpg)
8/23/2002 (MES)
More Tables
<table border=2><tr> <th>Heading A</th>
<th>Heading B</th><th>Heading C</th>
</tr><tr>
<td rowspan=2>Cell A & D</td><td>Cell B</td><td>Cell C</td>
</tr><tr><td>Cell E</td><td>Cell F</td></tr></table>
<table border=2><tr><th>Heading A</th><th>Heading B</th><th>Heading C</th></tr><tr><td>Cell A</td><td>Cell B</td><td>Cell C</td></tr>
<tr><td>Cell D</td><td>Cell E</td><td>Cell F</td></tr></table>
![Page 13: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/13.jpg)
8/23/2002 (MES)
Form TagsVisitor name: <input type="text" name="visitorname" size="10" maxlength="20"><br><br>
Which fruits do you like?<br><input type="checkbox" name="fruit“ value="apples"> Apples<br><input type="checkbox" name="fruit" value="oranges"> Oranges<br><input type="checkbox" name="fruit" value="bananas"> Bananas<br><br>
Which fruit is your favorite?<br><input type="radio" name="fav" value="apples"> Apples<br><input type="radio" name="fav" value="oranges"> Oranges<br><input type="radio" name="fav" value="bananas"> Bananas<br><br>
<textarea name="body" cols="35" rows="4" wrap="virtual"></textarea><br>
<select name="fav"><option value="apples">apples</option><option value="oranges">oranges</option><option value="bananas">bananas</option>
</select><br><br>
<input type="submit" value="Submit Info!"><br><input type="reset" value="Reset!">
![Page 14: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/14.jpg)
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 <FORM> tag by an “action”
variable.
<form name=signup method=POST action=/cgi-bin/join_list.cgi>
. . .Form Elements Go Here. . .
<input type=submit name=btnG value="Join the List!"></form>
![Page 15: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/15.jpg)
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.
![Page 16: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/16.jpg)
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:
http://www.bu.edu/webcentral/publishing/people/apply.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.
![Page 17: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/17.jpg)
8/23/2002 (MES)
More Info on HTML
For more general HTML information, check out: http://www.davesite.com/webstation/html/
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
Or use “View Source” command in your web browser to view HTML of an actual page.
Browser Tag Support: http://www.ncdesign.org/html/list.htm
![Page 18: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/18.jpg)
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)
![Page 19: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/19.jpg)
8/23/2002 (MES)
CGI Diagram
![Page 20: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/20.jpg)
8/23/2002 (MES)
CGI and Database Incorporation
![Page 21: Computational Boot Camp HTML](https://reader036.vdocument.in/reader036/viewer/2022062519/568151ff550346895dc03f27/html5/thumbnails/21.jpg)
8/23/2002 (MES)
Exercise
Based on what you’ve learned, make a page that looks like this