HTML Quick Reference - Buffalo State College

HTML Quick ReferenceHTMLHTML (HyperText Markup Language) allows you to place tags in your web page code that tell the browser how you'd like the layout of that page to look.General HTML Layout<!DOCTYPE html><html> <head> <title>Document Title</title>  </head> <body> … </body></html>Header Styles (1 – 6)<h1>…</h1>Paragraph<p>…</p>Text Formatting Text formatting can be added to a body, header, paragraph, or any tag using the style argument. The general structure is (paragraph as an example):<p style="item: setting; item: setting; … item: setting">Some common item: setting; examples:font: font-family: "times new roman" "Courier New", serif;text color: color: blue;font size: font-size: 200%;background color:background-color: red;An example changing many of these might be:<p style="color: green; font-family: Vedrdana, arial, sans-serif; font-size: 150%;">Bold Text<b> … </b> or <strong> … </strong> (although it's better to use a CSS style).Italic Text<i> … </i> or <em> .. </em> (although it's better to use a CSS style). Centering Text/Images<center> … </center> (the <center> tag has been deprecated in HTML5, so it's better to use a CSS style).Images<image src="cow.jpg" style="width: 250px; height: 150px;" alt="text for screen reader" />This will display the image cow.jpg with a size of 250 by 150 pixels. You may supply arguments for a title (displayed when the picture is pointed at) and alternate text to be displayed is the picture cannot be found or the user is sight-impaired and using a screen reader:title = "title text"alt = "text displayed if picture not found"Playing a soundThis plays the sound mysound.wav starting automatically with no player shown.<embed src="mysound.wav" autostart="true" hidden="true">HyperlinksHyperlink to a local fileTo create a link to browse a file otherPage.htm, for example:<a href="otherPage.htm"> … </a>Whatever replaces … (text or an image) will be the clickable link.Bulleted ListsThere are three (3) types of lists: Ordered, Unordered, and Definition.Ordered List Example<ol> <li>first list item</li> ... <li>last list item</li></ol> Unordered List Example<ul> <li>first list item</li> ... <li>last list item</li></ul> Definition List Example<dl> <dt>first item heading</dt> <dd>item definition</dd> ... <dt>last item heading</dt> <dd>item definition</dd></dl>Page LayoutThe <div> tag is used to layout web page. Here is an example: <div id="main" style="margin: auto; width: 80%;"> <div id="photo" style="display: inline; width: 25%;"> <img src="mypicture.jpg" alt="me" style="width: 320px; height: 240px; margin: 0 2%; vertical-align:top;"> </div>  <div id="content" style="display: inline; float: right; width: 65%;"> <h1>My Web Page</h1> <p>This is a short paragraph about me.<br> Some Links: <ul> <li><a href="form.html">Form Page</li> </ul> <hr> </div>  </div> Hyperlink to a web siteTo create a link to the Buffalo State web site, for example:<a href="">…</a>Whatever replaces … (text or an image) will be the clickable link.TablesTables are generally used to display data. They should not be used for page layout (see the <div> tag).A Table Example<table style="margin: 2px; padding: 2px;"> <thead> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> <th>Column 3 Heading</th> </tr> </thead> <tbody> <tr> <td>Column 1, Line 1 Data Cell</td> <td>Column 2, Line 1 Data Cell</td> <td>Column 3, Line 1 Data Cell</td> </tr> <tr> <td>Column 1, Line 2 Data Cell</td> <td>Column 2, Line 2 Data Cell</td> <td>Column 3, Line 2 Data Cell</td> </tr> ... <tr> <td>Column 1, Line N Data Cell</td> <td>Column 2, Line N Data Cell</td> <td>Column 3, Line N Data Cell</td> </tr> </tbody></table>FormsWeb forms allow you to gather data or perform dynamic operations using JavaScript. If you wish to manipulate or store that data in an external database then you would need to have a web server that allows you to create either a Microsoft back-end (MSSQL/Access), a Linux/Unix back-end (PHP/MySQL), or a Java-based back-end (JSP/database).A Form Example<form id="formName" name="formName" action="mailto: your-email-address" method="POST"> <fieldset> <legend>Contact Me:</legend> <label for="firstName">First Name:</label> <input type="text" id="firstName" name="firstName" size="15"><br> <label for="lastName">Last Name:</label> <input type="text" id="lastName" name="lastName" size="15" required="required"><br> <label for="submit"></label> <input type="submit" id="submit" name="submit" value="OK Send My Data"> </fieldset></form>CSS Quick ReferenceCascading Style Sheets (CSS)Cascading style sheets allow you to set the formatting (style) for any tag or the entire document. This can be done inline, internally (embedded) or as link to an external (.css) file.Inline CSS Example<p style="font-family: Verdana, arial, sans-serif; color: #CCC;">Internal (Embedded) CSS Example<style type="text/css"> p { color: orange; font-family:Verdans, arial, sans-serif; font-size: 200%; } h2 { color: blue; font-size: 300%; }</style>External CSS External CSS is placed in a different file with a .css extension. This allows you to have a consistent style for multiple pages throughout your web site. An example of the contents of this file would be:body { background-color: blue; font-size: 200%;}p { color: yellow; font-family: algerian, broadway, serif;}To use this file to format a web page, include the following command (assume that the CSS file is called format.css in this case)<link rel="stylesheet" type="text/css" href="format.css" />JavaScript Quick ReferencePlacing JavaScript Code in HTMLThe … is the JavaScript code in the following examples)On page entry:<script>…</script>On a link: <a href="" onmouseover="…"> link </a>Output commandsalert - pops up a dialog box containing the given string. The quotes used can be double quote (") or single quote ('): alert ("string");document.write displays the string on the web page. HTML can be used in the string to provide formatting: document.write('<p>string</p>');Input commandThe prompt function displays a string (the prompt) in a dialog box pop up and reads and returns a value entered by the user. prompt takes a second parameter which is a default value that the user can choose with typing. The following command prompts the user for a letter grade, with a default value of A, and places the entered string into the variable answer:answer = prompt ("Enter grade", "A");Concatenation, the + operatorA string for use with the above commands may be built up of smaller strings using the + operator. Strings and variables can be concatenated together: alert ("My grade is " + answer + "!");Simple FunctionsPlacing complicated code within a link can be very confusing. The introduction of user defined functions can simplify the process. A user defined function is a block of code that is executed when referred to (called). There are two parts to the use of the function, the function definition (tells what the function does) and the function call (activates the function). Here is the structure of a function definition:function myfun (){javascript statements}Here is a call to that function:myfun();Assignment statementAn assignment statement gives a variable a value. The syntax for an assignment statement is:variable = expression;We have already seen an example above in the call to prompt. Other examples:myName = "Jim";dogs = 3;weight = 34.54;ArithmeticIn the examples of assignment statements shown above, the expressions were either variables or constant values. The expressions can also be arithmetic expressions using the following operations (JavaScript operators are shown in parentheses):Unary Minus (-), Addition (+), Subtraction (-), Multiplication (*), Division (/), Mod (%) Some examples of expression evaluation are:-3 + 7 412 / 5 2.412 % 5 216 % 8 0When more than one operator is in an expression, the following precedence defines the order of operation:Highest(unary)*, /, %-, +LowestParentheses can be used to change precedence.Relational OperatorsThe following relational operators use numeric operands and return a Boolean result (true or false):==(equal)!=(not equal)< (less than)> (greater than)<=(less than or equal to)>=(greater than or equal to)Conditional StatementAll of the programs that we have seen so far have only contained sequential statements. Sequential statements are executed once and only once, in sequence. Conditional statements allow you to choose between several sets of statements. The conditional statement in JavaScript is an if-else statement. The general structure of the statement is:if (boolean expression) { JavaScript statements (if expression is TRUE)} else { JavaScript statements (if expression is FALSE)}where boolean expression is a JavaScript expression that evaluates to true or false and JavaScript statements are any legal JavaScript statements.If the boolean expression evaluates to true then the first set of JavaScript statements will be executed and not the second set of JavaScript statements. If the boolean expression evaluates to false then the second set of JavaScript statements will be executed and not the first set of Javascript statements.If more than one statement is needed, curly braces, { }, are used around multiple statements to make a single compound statement.For example:if (op == "add") { alert ("Adding 1 to pigs"); pigs = pigs + 1;} else { alert ("Subtracting 1 from pigs"); pigs = pigs – 1;}Looping StructuresThe while StatementThe while statement is a general form of repetition. Using a while statement, code will continue executing as long as a Boolean condition is true. The syntax is:while (Boolean expression) { JavaScript statements;}When the while statement is executed, the Boolean expression is evaluated. If it evaluates to true, the JavaScript statement will execute. The Boolean expression is evaluated again and, if true, the loop continues to run. Once the Boolean expression evaluates to false, the while statement ends.The for StatementThe for statement is used to repeat a section of code a number of times. It is usually used when the number of times that the code is to execute is known at the time the for is entered. The general structure a for statement is:for (initialization ; Boolean test ; increment) { JavaScript statements;}Generally, the initialization is an assignment statement that assigns a value to a loop control variable, the Boolean test tests whether the loop control variable has met a certain condition and the increment changes the value of the loop control variable.The initialization is executed once when the for statement is entered. The JavaScript statement executes as long as the Boolean test evaluates to true. The increment is executed after each execution of the JavaScript statement. After the increment, the test is evaluated again. If it still evaluates to true, the loop continues. Once it evaluates to false, the for statement ends.For example, if we would like the body of the loop to execute 7 times, the following statement would be used:for (count = 1; count <= 7; count++) { JavaScript statements;}In this case, the loop control variable is count. The limit on the loop does not have to be a constant value, like 7. It can be a variable value. For example, if we would like the value to be entered by the user, we might have:number_times = prompt ("How many times?", "");for (count_them = 1; count_them <= number_times; count_them++) { JavaScript statements;} ................
................

In order to avoid copyright disputes, this page is only a partial summary.

To fulfill the demand for quickly locating and searching documents.

It is intelligent file search solution for home and business.

Literature Lottery

HTML Quick Reference - Buffalo State College

To fulfill the demand for quickly locating and searching documents.

Related download

Related searches

HTML Quick Reference - Buffalo State College

Javascript reference type

To fulfill the demand for quickly locating and searching documents.

Related download

Related searches