1 / 21

Computational Boot Camp HTML

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)

agrata
Télécharger la présentation

Computational Boot Camp HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Computational Boot CampHTML Mike Schaffer

  2. 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.

  3. 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>

  4. 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>

  5. 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.

  6. 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:xyz@bu.edu”> Insert an e-mail link • <!-- Comments -->

  7. 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

  8. Fonts Tags • Inside the <FONT> tag, you may use: • SIZE=+/- [1,2] • FACE=“font” • COLOR=“Blue” or COLOR=“#0000FF”

  9. Heading Tags

  10. 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’.

  11. 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 just give your document more impact.</td> </tr> </table>

  12. More Tables <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> <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>

  13. Form Tags Visitor 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!">

  14. 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>

  15. 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.

  16. 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.

  17. 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

  18. 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) HTML Doesn’t Have To Be Static

  19. CGI Diagram

  20. CGI and Database Incorporation

  21. Exercise • Based on what you’ve learned, make a page that looks like this 

More Related