1 / 17

HTML and JavaScript

HTML and JavaScript. How to:. Open and Close Tags. HTML Program - <html> </html> Bold - <B> </b> now use <strong> </strong> Italic - <i> </i> now use <em> </em> Head - <head> </head> Body - <body> </body> Paragraph - <p> </P> Combining tags: <B><I>Text</I></B>. Single Tags.

teagan-stephens
Download Presentation

HTML and JavaScript

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. HTML and JavaScript How to:

  2. Open and Close Tags HTML Program - <html> </html> Bold - <B> </b> now use <strong> </strong> Italic - <i> </i> now use <em> </em> Head - <head> </head> Body - <body> </body> Paragraph - <p> </P> Combining tags: <B><I>Text</I></B>

  3. Single Tags <hr> Horizontal Reference or Rule <br> line break, like a carriage return <p> like break but puts a blank line in

  4. An HTML Page <HTML> <TITLE> This is my HTML Page</TITLE> <B>This is an HTML PAGE</b><p> I can do <em>italic</em> or <strong>bold</strong> <BR> <HR> <strong><em>I can do both</em></strong> </html>

  5. Hyper Links <a href=“http://www.juniata.edu”></a> But you would probably want to associate the link with a certain phrase or image, i.e., <a href=“http://www.htmlgoodies.com””><img src=“home.gif” ALT=“home”></a> OR <a href=“http://www.juniata.edu”>Click here for information on Juniata College</a>

  6. Here's What's Happening • A stands for Anchor. It starts the link to another page. • HREF stands for Hypertext REFerence. That's a way of saying to the browser, "This is where the link is going to go." • http://www.juniata.edu is the FULL ADDRESS of the link. Note that the address has an equal sign in front of it and is enclosed in quotes. The reason is because it's an attribute of the Anchor tag, a command inside of a command. • Where it reads "Click Here for information on Juniata College" is where you write the text you want to appear on the page. What is in that space will appear on the page for the viewer to click. So, write something that denotes the link. • /A ends the link command.

  7. E-mail Links • <a href=“mailto:burkhardt@juniata.edu”>Click here to email me</a>

  8. Tables: Brady Family Table (HTML Goodies) • <TABLE><CAPTION>The Bradys</CAPTION><TR><TD> Marcia </TD><TD> Carol </TD><TD> Greg </TD></TR> <TR><TD> Jan </TD> <TD> Alice </TD><TD> Peter </TD></TR><TR><TD> Cindy </TD><TD> Mike </TD><TD>Bobby </TD></TR></TABLE>

  9. Table Tags (from HTML Goodies) • <TABLE> starts and ends the entire thing. I think that makes perfect sense. This is a table after all. • <CAPTION> and </CAPTION> places a caption over your table. The caption will be bolded and centered. • <TR> is used when you want a new Table Row to begin. Notice that you need to end every table row with an </TR>. See that above? • <TD> denotes Table Data. You put this in front of every piece of information you want in a cell. You need to end every one that you open with an </TD>. See how I have that above? • </TABLE> ends the whole deal.

  10. MORE… <TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1"><CAPTION>The Bradys</CAPTION><TR> <TD ALIGN = "center"> Agnes </TD><TD ALIGN = "center"> Wilma </TD><TD ALIGN = "center"> George </TD></TR> <TR><TD ALIGN = "center"> Gwen </TD> <TD ALIGN = "center"> Skippy </TD><TD ALIGN = "center"> Alvin </TD></TR> <TR><TD ALIGN = "center"> Harry </TD><TD ALIGN = "center"> Melvin </TD><TD ALIGN = "center"> Joe </TD></TR> </TABLE>

  11. Explanation: • BORDER tells the table how large the border should be. This is all relative in terms of pixels. Three is larger than two and two is larger than one, etc. Try different numbers. I happen to like the look of BORDER=3. BORDER=0 gets rid of the borders altogether. • CELLSPACING (all one word) gives the amount of space between cells. I'd keep this kind of small. Large spacing tends to defeat the purpose. • CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings. Sometimes bigger is better.

  12. HTML Tags from HTML Goodies • Ordered Alphabetically • NN: indicates the earliest version of Netscape that supports the tag • IE: indicates the earliest version of Internet Explorer that supports the tag • DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset • <!--...-->Defines a comment3.03.0STF • <!DOCTYPE> Defines the document type  STF • <a>Defines an anchor3.03.0STF

  13. From HTML Goodies: • <body>Defines the body element3.03.0STF • <br>Inserts a single line break3.03.0STF • <button>Defines a push button6.24.0STF<caption>Defines a table caption3.03.0STF • <center>Deprecated. Defines centered text3.03.0TF • <font>Deprecated. Defines text font, size, and color3.03.0TF • <form>Defines a form 3.03.0STF • <h1> to <h6>Defines header 1 to header 63.03.0STF • <head>Defines information about the document3.03.0STF • <hr>Defines a horizontal rule3.03.0STF • <html>Defines an html document3.03.0STF • <i>Defines italic text3.03.0STF • <img>Defines an image3.03.0STF

  14. <li>Defines a list item3.03.0STF • <link>Defines a resource reference 4.03.0STF • <map>Defines an image map 3.03.0STF • <menu>Deprecated. Defines a menu list3.03.0TF • <meta>Defines meta information3.03.0STF • <ol>Defines an ordered list 3.03.0STF • <table>Defines a table3.03.0STF • <tbody>Defines a table body 4.0STF • <td>Defines a table cell3.03.0STF

  15. <textarea>Defines a text area3.03.0STF • <tfoot>Defines a table footer 4.0STF • <th>Defines a table header3.03.0STF • <thead>Defines a table header 4.0STF • <title>Defines the document title3.03.0STF • <tr>Defines a table row3.03.0STF • <tt>Defines teletype text3.03.0STF • <u>Deprecated. Defines underlined text3.03.0TF • <ul>Defines an unordered list3.03.0STF • <var>Defines a variable3.03.0STF

  16. JavaScript <SCRIPT LANGUAGE=“javascript”> document.write (“<FONT COLOR=‘RED’>This is red</FONT>”) </SCRIPT> The word “document” is known as an “object” while the term write that follows it is known as the object’s “method” and the text inside the parentheses is called the method’s “instances”, i.e., what will be done when the method is acted upon.

  17. Script Libraries • http://javascript.internet.com • http://hotscripts.com

More Related