Embed Size (px)
Citation preview
Computational Boot CampHTML
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 <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>
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>
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.
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 -->
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
8/23/2002 (MES)
Fonts Tags
Inside the <FONT> 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
<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>
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>
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!">
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>
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:
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.
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
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
![1 Hyper Text Markup Language (HTML) UNIT- 02 Hyper Text Markup Language (HTML) UNIT-02/LECTURE-01 Introduction to Hyper Text Markup Language (HTML) About HTML: [RGPV/Dec 2013(4)] So](https://img.pdfslide.us/doc/110x75/5aae4bc17f8b9a25088c15fa/1-hyper-text-markup-language-html-unit-02-hyper-text-markup-language-html-unit-02lecture-01.jpg)
