ADVANCED HTML & BASIC JAVASCRIPT

HTML Layout
Everywhere on the web you will find pages that are formatted like newspaper pages using HTML columns
HTML Layout –using Tables
On very common practice with HTML,is to use HTML tables to format the layout of an HTML page.
An HTML <table> is used to divide a part of this web page into two columns
Trick is to use a table without borders,and may be a little extra cell padding

HTML STYLES
With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet.
How to use styles
When a browser reads a style sheet,it will format the document according to it.
There are three ways of inserting a style sheet; 1. EXTERNAL STYLE SHEET
2. INTERNAL STYLE SHEET
3. INLINE STYLE

1.EXTERNAL STYLE SHEET
An external style sheet is ideal when the style is applied to many pages.With an external style sheet,you can change the look of an entire website by changing one file.Each pages must link to the ctyle sheetusing the <link> tag.
• The <link>tag goes inside the head section.
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
</head>

INTERNAL STYLE SHEET
An internal style sheet should be used when a single document has a unique style. You define internal style in the haed section with the <style> tag
<head>
<style type=“text/css”> Body {background-color:red} P {margin-left:20px} </style>
</head>

INLINE STYLES
An inline style should be used when a unique style is to be applied to a single occurrence of an element.
To use inline style you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph
<p style=“color: red; margin-left:20px”> This is a paragraph
</p>

STYLES TAGS
TAG	DESCRIPTION
<style>	Define a style definition
<link>	Define a resource reference
<div>	Define a section in the a document
<span>	Define a section in document
<font>	Deprecated. Use styles instead
<basefont>	Deprecated. Use styles instead
<center>	Deprecated. Use styles instead

The HTML Head Element
The head element contain the general information, also called meta information,about a document .
Meta means “information about”.
You can say that meta –data means information about data, or meta-information means information about information.
Information inside the head elemnt
The element inside the head element should not be displayed by a browser
According to HTML standard only a few tags are legal inside the head section. These are:<base>,<link>,<title>,<style>, and <script>

Head tags
TAGS	DESCRIPTION
<head>	Defines the information about the document
<title>	Defines the document title
<base>	Defines a base URL for all the links on a page
<link>	Defines a resource reference
<meta>	Defines meta information
<!DOCTYPE>	Defines the document type, this tag goes before the <html>tag

HTML Meta Element
The purpose of the meta element is to provide meta- information about the document.
Most often the meta element is used to provide information that is relevant to browsers or search engines like describing the content of your document.
Keywords of the search engines
Some of the search engines on the WWW will use the name and content attributes of the meta tag to index your pages
This meta element defines a description of your page
<meta name=“description”content=“free web tutorials on HTML,CSS,XML”>

HTML Meta Element
The intention of the name and content attributes is to describe the content of a page
UNIFORM RESOURCE LOCATORS
Is used to address a document(or other data)on
the world wide web. A full web address like the following.
http://www.ucc.co.tz/html/lastpage.html
follows these syntax rules: Scheme://host.domain:port/path/filename

http://www.ucc.co.tz/html/lastpage.html
follows these syntax rules: Scheme://host.domain:port/path/filename
-Scheme is defining the type of internet service. The most common is http.
-The domain is defining the internet domain names like ucc.co.tz
-The host is defining the domain host. If omitted, the default host for http is www
-The port is defining the port number at the host. The port number is normally ommitted.The default port number for http is 80
-The path is defining a path(a sub directory)at the server. If the path is omitted, the resource(the document) must be located at the root directory of the websites

Uniform Resource Locators
The filename is defining the name of a document. The default filename might be default.asp,or index.html
Or something else depending on the setting of the web server

HTML Scripts
Add scripts to HTML pages to make them more dynamic and interactive.
Insert a script into HTML Page
A script in HTML is defined with the <script>tag.Note that you will have to use the type attributes to specify the scripting language

HTML Scripts
<html>
<head>
<body>
<script type=“text/javascript”> Document.write(“hello world”) </scrpt>
</body>
</html>
The script above will produce this output hello world

The <noscript> tag
In addition to hiding the sscript inside a comment ,you can also add a <noscript>tag
The <noscript> tag is used to define an altenate text if a script is NOT executed.
This tag is used for browser the recognize the <script> tag, but
Do not support the script inside, so these browsers will display the text inside the <noscript>tag instead
However,if a browser supports the script inside the <script>tag it will ignore the <noscript>tag

SCRIPT TAGS
<script>	Defines a script
<noscript>	Defines an altenate text if the script is not executed
<object>	Defines an embedded object
<param>	Defines run-time setting(parameters)for an object
<applet>	Deprecated.Use<object>instead

HTML 4.0 Standard Attributes
HTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags(with a few exceptions);

Core Attributes Not valid in base,head,html,meta,param,script,style,and title element
Attribute	Value	Description
class	Class_rule or style_rule	The class of the element
id	Id_name	A unique id for the element
style	style_definition	An inline style definition
title	Tooltip_text	A text to display in a tool tip

BASIC JAVASCRIPT
-JavaScript was design to add interactively to html pages
-The JavaScript programming language does not create applets or stand-alone applications. In its most common form today,
-JavaScript resides inside HTML documents, and can provide levels of interactivity to web pages that are not achievable with simple HTML.
-JavaScript is the scripting language

JAVASCRIPT
• The HTML <script>tag is used to insert a JavaScript into a HTML page
• Inside the <script> we use “type=”attribute to define the scriipting language
• <html> <body>
<script type=“text/javascript”> document.write(“hello world”);
</script> </body> </html>
The code will produce the output hello world

JAVASCRIPT
• The word document.write is standard JavaScript command for writing output to a page
• HTML comment to handle simple browser Browser that do not support javascript will
display javascript as the page content.
To prevent it from doing this ,The html comment tag can be used to hide the javascript
Just add an html comment tag  (end of comment)after the last javascript statement

• <html> <body>

JAVASCRIPT

Where to put the javascript
1.Script in the head section 2.script in the body section
3.Script in both body and the head section
1.Script in the head section-script to be executed when they are called, or when an event is triggered, go in the head section, script is loaded before anyone use it
2.Script in the body section-script to be executed when the page loads go in the body section, it generate the content of the page
3.Script in both body and the head section

External Javascript

Run the same javascript on several
pages ,without having to write the same script on every page
Write javascript in an external file
Save the external javascript file with a .js file
extension
To use the external script ,point to the .js file in the “src”attribute of the <script>tag
<script src=“xxx.js”></script>

Javascript statement
• Javascript Is the sequence of the statement to
be executed by the browser
• Javascript statements is the command to the browser. The purpose of the command is to tell the browser what to do
• Document.write(“hello dolly”);-Tell the browser to write hello dolly to the web page

Javascript code
• Javascript code is the sequence of javascript statement. Executed by browser in sequence of statement executed together
<script type=“text/javascript”>
Document.write(‘<h1>This is the header</ h>”);
Document.write(‘<p>This is the header<p>”); Document.write(‘<p>This is the header<p>”); </script>

Javascript code
• Javascript statement can be grouped together in blocks
• Blocks start with a left curly bracket{,and end with the right curly bracket }
<script type=“text/javascript”>
{
Document.write(‘<h1>This is the header</h>”); Document.write(‘<p>This is the header<p>”); Document.write(‘<p>This is the header<p>”);
} </script>

Javascript Comment
• Can be used to make the code more readable Single line comment start with //
<script type=“text/javascript”>
//This will write header Document.write(‘<h1>This is the header</h>”); //This will write two paragraph Document.write(‘<p>This is the header<p>”); Document.write(‘<p>This is the header<p>”); </script>

Javascript mult-line comment
• Mult-line comments start with /* and end with */
<script type=“text/javascript”>
/*The code below will write one header and two paragraph
*/
Document.write(‘<h1>This is the header</h>”); Document.write(‘<p>This is the header<p>”); Document.write(‘<p>This is the header<p>”); </script>

Javascript Variables

Variables are container for storing information:
X=5; length=66.50;
Javascript variable are used to hold values or expression
Variable names are case sensitive
Variable names must start with a letter or the
underscore character.
Declaring(creating)javascript variables -creating variables in the javascript is most often
referred to as “declaring” variables
• You can declare javascript variable with the var statement

Var x
After declaring the variables have no values,but you can assign values to the variables while you declare them
Var x=5;
Var carname=“volvo”
You assign the value to the javascript variable with assignment statements

JAVASCRIPT ARITHMETIC

Y=x-5; Z=y+5;
JavaScript operators
The operator = is used to assign values
The operator + is used to add values
The assignment operator = is used to assign values to JavaScript variables
The arithmetic operator + is used to add values together

JAVASCRIPT ARITHMETIC OPERATOR
• Are used to preform arithmetic between variables and/or values
• Given that y=5,the table below explains the arithmetic operators

OPERATOR	DESCRIPTION	EXAMPLE	RESULT
+	Addition	X=y+2	X=7
-	Subtraction	X=y-2	X=3
*	Multiplication	X=y*2	X=10
/	Division	x=y/2	X=2.5
%	Modulus(division remainder)	X=y%2	X=1
++	Increment	X=++y	X=6
--	Decrement	X=--y	X=4

JavaScript Assignment Operators
• Assignment operators are used to assign values to JavaScript variables
• Given that x=10 and y=5,the table below explains the assignment operators;

Operator	Example	Same as	Result
=	X=y		X=5
+=	X+=y	X=x+y	X=15
-=	X-=y	X=x-y	X=5
*=	X*=y	X=x*y	X=50
/=	x/=y	X=x/y	X=2
%=	X%=y	X=x%y	X=0

The + operator Used on strings
• The + operator can also used to add string variables or text values together
• Txt1=“What a very”; Txt2=“nice day”; Txt3=txt1+txt2;
• To insert a space into an expression; • Txt1=“What a very”;
Txt2=“nice day”; Txt3=txt1+ “”+txt2;

Adding string and numbers
• X=5+5; document.write(x);
• X=“5”+”5”; document.write(x);
• X=5+”5”; document.write(x);
• If you add a number and a string the result will be a string

Example
<!DOCTYPE html>
<html>
<body>
<p>Click the button to calculate x.</p> <button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
y=5;
z=2;
x=y+z; document.getElementById("demo").innerHTML=x; }
</script>
</body> </html>

Example

<p>Click the button to create and add string variables.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() •{

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
document.getElementById("demo").innerHTML=txt3; •}
• </script>
• </body> • </html>

<!DOCTYPE html>
<html>
<body>

REACT ON EVENT

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>
JavaScript can react to events. Like the click of a button:
</p>
<button type="button" onclick="alert('Welcome!')">Click Me!</ button>
</body>
</html>

This post was written by: Author Name

Your description comes here!

Get Free Email Updates to your Inbox!

Filed Under: technology on Wednesday, February 7, 2018

Featured Posts

ADVANCED HTML & BASIC JAVASCRIPT

This post was written by: Author Name

Post a Comment

Popular Posts

Categories

Featured Posts

Social Icons

ADVANCED HTML & BASIC JAVASCRIPT

This post was written by: Author Name

Post a Comment

Popular Posts

Categories