Javascript
Please Download and go through the PDF File.
HTML Links & Lists
HTML Links
- A link is a connection from one Web resource to another.
- A link has two ends — called anchors — and a direction.
- The link starts at the “source” anchor and points to the “destination” anchor, which may be any Web resource (e.g., an image, an HTML document, an element within an HTML document, etc.).
- The text or an image that provides such linkages is called hypertext, hyperlink, or hotspot.
What is Hyperlink???
- A Hyperlink is a connection between an HTML element such as text, an image, or anything else on a page and other resource.
- That link might be to another web-page, an external image, or an e-mail address.
Difference between Hyperlink and Normal HTML Text:
- Appears in blue color.
The default color setting in a browser for hyperlink text or image.
The color can be set dynamically via HTML program if required.
- The Hyperlink text/image is underlined.
- When the mouse cursor is placed over it, the standard arrow shaped mouse cursor changes to the shape of a hand.
Changing the color of Links:
- To change the link color there are three attributes that can be specified with the <body> tag.
- These are:
LINK
ALINK
VLINK
HTML Lists
- HTML provides three type of lists.
- They are listed below:
- A list of multi-line paragraphs, listed separately and ordered numerically in some way.
- The list items are marked with numbers.
<OL ...>creates an ordered list.- “Ordered” means that the order of the items in the list is important.
- By default, the number starts with 1,2,3…….
- An ordered list starts with the <ol> tag.
- Each list item starts with the <li> tag.
- Example:
- Here is how it looks in a browser:
- Ordered List:
<ol> <li>Coffee</li> <li>Milk</li> </ol>
-
- Coffee
- Milk
- Unordered List:
§A list of multi-line paragraphs, listed separately and usually marked by a bullet or similar symbol (Unordered List)<UL ...>creates an unordered list.- The unordered part means that the items in the list are not in any particular order.
- The list items are marked with bullets (typically small black circles).
- An unordered list starts with the <ul> tag.
- Each list item starts with the <li> tag.
- Example:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- Here is how it looks in a browser:
- Coffee
- Milk
- A definition list is not a list of items.
- This is a list of terms and explanation of the terms.
- A definition list starts with the <dl> tag.
- Each definition-list term starts with the <dt> tag.
- Each definition-list definition starts with the <dd> tag.
- Example:
- Definition List:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
- Here is how it looks in a browser:
Coffee
Black hot drink
Milk
White cold drink
HTML Tags Continues…
| Links | |||
| Link Something | <A HREF=”URL”> </A> | links text or graphic to another URL | |
| Link to Location | <A HREF=”URL#***”> </A> | links text or graphic an anchor in an other document | |
| Link to Location in Current Page | <A HREF=”#***”> </A> | links text or graphic an anchor in current document | |
| Target Window | <A HREF=”URL” TARGET=”***”> </A> | links text or graphic to a URL in a new browser widow | |
| Action on Click | <A HREF=”URL”> </A> | takes effect when user clicks on the item (Javascript) | |
| Mouseover Action | <A HREF=”URL”> </A> | takes effect when user moves pointer over item | |
| Link to Email | <A HREF=”mailto:@”> </A> | creates blank e-mail to indicated address with visitor’s default e-mail client | |
| Graphics and Sound | |||
| Display Image | <IMG SRC=”URL”> | displays image from the indicated URL | |
| Alignment | <IMG SRC=”URL” ALIGN= TOP|BOTTOM|MIDDLE|LEFT|RIGHT> | aligns the image | |
| Dimensions | <IMG SRC=”URL” WIDTH=? HEIGHT=?> | the dimensions, in pixels, of the image | |
| Border | <IMG SRC=”URL” BORDER=?> | border, in pixels, around the image | |
| Dividers | |||
| Paragraph | <P> </P> | paragraph (closing tag often unnecessary) | |
| Align Text | <P ALIGN=LEFT|CENTER|RIGHT> </P> | aligns paragraph | |
| Justify Text | <P ALIGN=JUSTIFY> </P> | justify’s paragraph’s text | |
| Line Break | <BR> | a single carriage return | |
| Horizontal Rule | <HR> | horizontal line | |
| Alignment | <HR ALIGN=LEFT|RIGHT|CENTER> | alignment of horizontal line | |
| Thickness | <HR SIZE=?> | thickness, in pixels, of horizontal line | |
| Width | <HR WIDTH=?> | width, in pixels, of horizontal line | |
| Width Percent | <HR WIDTH=”%”> | width(as a percentage of page width), in pixels, of horizontal line | |
| No Break | <NOBR> </NOBR> | prevents line breaks | |
| Structural Elements | |||
| Heading | <H?> </H?> | Document header, the ? defines 6 levels (#’s 1-6) | |
| Strong Emphasis | <STRONG> </STRONG> | strongly emphasized text, usually displayed as bold | |
| Address | <ADDRESS> </ADDRESS> | author information | |
| Large Font Size | <BIG> </BIG> | uses a large text size | |
| Small Font Size | <SMALL> </SMALL> | use a small text size | |
| Backgrounds | |||
| Tiled Background | <BODY BACKGROUND= “URL”> | causes the image to tile as the background of the page | |
| Watermark | <BODY BGPROPERTIES= “FIXED”> | static image which remains in the same location as visitors scroll | |
| Background Color | <BODY BGCOLOR= “#$$$$$$“> | solid background color of the page | |
| Text Color | <BODY TEXT=”#$$$$$$“> | color of the text throughout the page | |
| Link Color | <BODY LINK=”#$$$$$$“> | color of all links throughout the page | |
| Visited Link | <BODY VLINK=”#$$$$$$“> | color of all links that have already been clicked on by visitor | |
| Active Link | <BODY ALINK=”#$$$$$$“> | color of link while being selected | |
| Lists | |||
| Unordered List | <UL> </UL> | list with bulleted items | |
| List Item | <LI> </LI> | indicates an item on the list | |
| Bullet Type | <UL|CIRCLE|SQUARE> | shape of bullet for the whole list | |
| Bullet Type | <LI|CIRCLE|SQUARE> | shape of bullet for specific list item | |
| Ordered List | <OL> <LI> </OL> | numbered list | |
| Numbering Type | <OL|a|I|i|1> | type of numbering for the whole list | |
| Numbering Type | <LI|a|I|i|1> | type of numbering for specific list item | |
| Starting Number | <OL START=?> | starting number for list | |
| Starting Number | <LI VALUE=?> | starting number for this & subsequent items | |
| Definition List | <DL> </DL> | a list of definitions | |
| Definition Term | <DT> </DT> | definition term | |
| Definition | <DD> </DD> | definition of a term | |
| Menu List | <MENU> </MENU> | display menu type list | |
| Directory List | <DIR> </DIR> | directory link | |
| Tables | |||
| Define Table | <TABLE> </TABLE> | signals the beginning of a table | |
| Table Alignment | <TABLE ALIGN= LEFT|RIGHT|CENTER> | aligns the table within the browser window | |
| Table Border | <TABLE BORDER=?> </TABLE> | border of table, you can set the value (aka width) | |
| Cell Spacing | <TABLE CELLSPACING=?> | places specific amount of space between the individual cells within a table | |
| Cell Padding | <TABLE CELLPADDING=?> | places specific amount of space between the cells border and its contents | |
| Desired Width | <TABLE WIDTH=?> | width of table in pixels | |
| Width Percent | <TABLE WIDTH=%> | width of table in percentage of page | |
| Table Color | <TABLE BGCOLOR=”#$$$$$$“> </TABLE> | overall background color of table | |
| Border Color | <TABLE BORDERCOLOR=”#$$$$$$“> </TABLE> | the color of the table border | |
| Table Row | <TR> </TR> | table row | |
| Alignment | <TR ALIGN= LEFT| RIGHT| CENTER| MIDDLE| BOTTOM> | alignment of the table row | |
| Table Cell | <TD> </TD> | specific table cell, must appear within table rows | |
| Alignment | <TD ALIGN= LEFT|RIGHT|CENTER VALIGN= TOP|MIDDLE|BOTTOM> | alignment of the table cell | |
| Columns to Span | <TD COLSPAN=?> | identifies the the number of columns the cell should span | |
| Rows to Span | <TD ROWSPAN=?> | identifies the the number of rows the cell should span | |
| Desired Width | <TD WIDTH=?> | width of cell in pixels | |
| Width Percent | <TD WIDTH=”%”> | width of cell as percentage of table | |
| Cell Color | <TD BGCOLOR=”#$$$$$$“> | background color of table cell | |
| Header Cell | <TH> </TH> | table cell for header information (bold & centered) | |
| Alignment | <TH ALIGN= LEFT| RIGHT| CENTER| MIDDLE|BOTTOM> | alignment of the header cell | |
| Table Body | <TBODY> | identifies the specific body section of the table | |
| Table Footer | <TFOOT> </TFOOT> | separates group of cells to serve as footer material for the table (must come before <THEAD>) | |
| Table Header | <THEAD> </THEAD> | separates group of cells to serve as header material for the table | |
| Table Caption | <CAPTION> </CAPTION> | caption for a table | |
| Alignment | <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT> | alignment for the caption of a table | |
| Frames | |||
| Frame Document | <FRAMESET> </FRAMESET> | creates layouts of frames (instead of <BODY>) | |
| Row Heights | <FRAMESET ROWS=,,,> </FRAMESET> | comma separated list of size of each row within the frameset (pixels or %) | |
| Column Widths | <FRAMESET COLS=,,,> </FRAMESET> | comma separated list of size of each column within the frameset (pixels or %) | |
| Borders | <FRAMESET FRAMEBORDER= “yes|no”> </FRAMESET> | identifies if a frame has a visible border or not | |
| Border Width | <FRAMESET BORDER=?> </FRAMESET> | width of frame border if visible | |
| Border Color | <FRAMESET BORDERCOLOR=”#$$$$$$“> </FRAMESET> | color of frame border if visible | |
| Frame Spacing | <FRAMESET FRAMESPACING=?> </FRAMESET> | number of pixels of reserved space between frames | |
| Define Frame | <FRAME> | specific contents of an individual frame | |
| Display Document | <FRAME SRC=”URL”> | identifies the initial contents of the frame | |
| Frame Name | <FRAME| _blank| _self| _parent|_top> | assigns a name to the current frame | |
| Margin Width | <FRAME MARGINWIDTH=?> | distance between content and frame’s left and right margins | |
| Margin Height | <FRAME MARGINHEIGHT=?> | distance between content and frame’s top and bottom margins | |
| Scroll bar | <FRAME SCROLLING=”YES|NO|AUTO”> | controls how the window is or isn’t scrolled | |
| Not Re-sizable | <FRAME NORESIZE> | prohibits the document viewer from changing dimensions of the frame | |
| Borders | <FRAME FRAMEBORDER=”yes|no”> | controls wither frame has a border | |
| Border Color | <FRAME BORDERCOLOR=”#$$$$$$“> | color of border of frame | |
HTML Tags
| TITLE | TAG | DESCRIPTION |
| Basic Elements | ||
| Document Type | <HTML> </HTML> | document root element, beginning and end of file |
| Title | <TITLE> </TITLE> | document title, must be in header |
| Header | <HEAD> </HEAD> | descriptive info, such as title |
| Body | <BODY> </BODY> | bulk of the page, notes body of document |
| Formatting | ||
| Bold | <B> </B> or <strong></strong> | bold text style |
| Italic | <I> </I> | italic text style |
| Underline | <U> </U> | underlined text (not widely implemented) |
| Strikeout | <STRIKE> </STRIKE> | strike-through text (not widely implemented) |
| Strikeout | <S> </S> | strike-through text (not widely implemented) |
| Subscript | <SUB> </SUB> | subscript numbers like footnotes |
| Superscript | <SUP> </SUP> | superscript numbers like cross – reference numbers |
| Pre formatted | <PRE> </PRE> | pre formatted text (display text spacing as-is) |
| Center | <CENTER> </CENTER> | centers text and images |
| Blinking | <BLINK> </BLINK> | blinking text, Netscape only |
| Font Size | <FONT SIZE=?> </FONT> | local font size(ranges from 1-7) |
| Change Font Size | <FONT SIZE=”+|-?”> </FONT> | controls font size rendered |
| Font Color | <FONT COLOR=”#$$$$$$”> </FONT> | controls font color rendered |
| Select Font | <FONT FACE=”***”> </FONT> | the style of the text, such as Times New Roman |
| Marquee | <MARQUEE> </MARQUEE> | scrolling text (IE only) |
Simple HTML Document
- HTML, or HyperText Markup Language is designed to specify the logical organization of a document, with important hypertext extensions.
- HTML instructions divide the text of a document into blocks called elements.
- These can be divided into two broad categories:
Those that define how the BODY of the document is to be displayed by the browser, and
Those that define information about the document, such as the title or relationships to other documents.
- The detailed rules for HTML (the names of the tags/elements, how they can be used) are defined using another language known as the SGML (Standard Generalized Markup Language).
- HTML is a set of special codes that can be embedded in text to add formatting and linking information.
- HTML is the language interpreted by a Browser.
- The HTML file must have an extension “.htm” or “.html”.
- Any text editor can be used to create HTML file.
This is a simple (minimal) HTML document:
File Name: ‘first.html’ or ‘first.htm”
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html> |
What is WYSIWYG?
An acronym for “What You See Is What You Get”.
The term is used in computing to describe a system in which content displayed during editing appears very similar to the final output.
HTML is just a Markup Language it do not perform any logical processing. If a=4+4 is written in the code it just display that, it does not perform any logical operations to add those values.
Doctypes Available in the W3C Recommendations
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> |
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> |
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> |
XHTML 1.0 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
XHTML 1.0 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> |
XHTML 1.0 Frameset
This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> |
XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).
| <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> |
HTML 5
| <!DOCTYPE html> |
Rules of Markup Language
- Use All Lowercase Tags All tags must be written in lowercase letters. No longer is it allowable to write <HTML>, from now on it will be written <html>.
- Nest Elements Correctly HTML will forgive you but XHTML will not. Here is a common problem: <b><i>This is wrong.</b></i>. You may notice in this example that the bold and italic elements overlap. Here is the right way to nest these elements: <b><i>This is right.</i></b>.
- Always UseEnd Tags Every tag must have an end tag. When you start a paragraph you use the <p> tag, when you end a paragraph you must use the </p> tag. Same goes for the <li> tag and all other tags.
- End Empty Elements Now you’re wondering what you should do with elements like the <br> tag, yes you need an end tag for this one too. You can either write it as <br></br> or you can use an alternative. Instead you can write <br /;>. This can be used in both HTML and XHTML so start using it now to get used to it. This feature can be used with other empty tags too such as the <hr> tag.
- Use Quotes for Values When you write something like: <table border=1 bgcolor=red>, you’ve left something out. Values must be surrounded by quotation marks. The proper way to write this would be: <table border=”1″ bgcolor=”red”>.
- Give Every Attribute a Value Here’s where things start to get different. In HTML some attributes have no value. One such attribute is disabled. When using such an attribute you should assign the value of the attribute with the same name at the attribute itself. This is how it would look: disabled=”disabled”.
- Use Code for Special Characters XHTML can get confused when you use such symbols as < or & inside attribute values. Instead use code to write them. Try these lists of codes to help you: Common Symbols and Less Common Symbols. Instead of writing: <img src=my_picture.gif alt=”Me & My Son”>; you would write: <img src=my_picture.gif alt=”Me & My Son”>.
- Use id Insead of name The <a>, <frame>, and <img> elements have an attribute called <name> that is used to specity a location within the HTML page. In XML the <id> attribute is used instead. It’s recommended that you start using the <id> attribute now, instead of the <name> attribute. It’s not mandatory for now but it will make it easier for you later.
- Separate Styles and Scripts If you are using CSS, JavaScript or another type of language in your Web pages you need to put them in a separate file. Link to them where you want them to show up on your page but keep them separate.
Day 02 – HTML Basics
Hypertext is text displayed on a computer or other electronic device with references (Hyperlink) to other text that the reader can immediately access, usually by a mouse click or keypress sequence. Apart from running text, hypertext may contain tables, images and other presentational devices. Hypertext is the underlying concept defining the structure of the WWW, making it an easy-to-use and flexible format to share information over the Internet.
Hypertext is text which contains hyperlinks. HyperMedia is a term used for hypertext which is not constrained to be text: it can include graphics, video, sound animations etc.
Hypertext and HyperMedia are concepts, not products.
A markup language is a modern system for representation of text in a way that is syntactically distinguishable from other text or content.
What is HTML?
HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create.
The definition of HTML is Hyper Text Markup Language.
- HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.
- Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).
- HTML is a Language, as it has code-words and syntax like any other language.
How does it work?
HTML consists of a series of short codes typed into a text-file by the site author — these are the tags. The text is then saved as a html (*.htm or *.html) file, and viewed through a browser like Internet Explorer or Mozilla or any other. The browser reads the file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a powerful graphical editor to create HTML pages.
HTML Elements –
- The HTML instructions, along with the text to which the instructions apply, are called HTML elements.
- The HTML instructions are themselves called tags, and look like
<element_name>— that is, they are simply the element name surrounded by left and right angle brackets. - The content in the web-page is written after the starting tag, and closed with the end tag. (also called paired elements)
E.g: <element_name> text to be written HERE </element_name>
- The end tag has slash character in front of it.
- HTML tags are not case sensitive, <b> means same as <B>.
Empty Elements – also called singular element
- Some elements are empty — that is, they do not affect a block of the document in some way.
- These elements do not require an ending tag.
An example is the <HR> element, which draws a horizontal line across the page.
HTML Tag Attributes
- Many elements can have arguments that pass parameters to the interpreter handling the element.
- These arguments are called attributes of the element.
- An attribute is a customizable option for a tag.
- In other words, attributes are used to define the properties of a tag.
Example: <p align = “left”> Trial Example </p>.
In the above example the align attribute allows you to specify how text in a paragraph is arranged on the page.
- Not all tags supports attributes.
- Some tags support multiple attributes, and the attributes are listed one after another in the start tag, seperated by space.
- Attributes are always set to the opening tag.
Day 01: Introduction
Internet Basics
– History of Internet (Assignment 02)
Server: Computer which offer Information.
Client: Computer which read the Offered Information.
When Server and Client work in WWW then those are called Web-Server & Web-Client. Web-Server run special software that allows them to respond the client’s request and accept data.
Mostly Used Web-Server Software:
– Internet Information Server (IIS) (Default in Microsoft Software).
– Apache Web Server … Etc.
Web-client run special software called ‘Browser’ which allows locating the appropriate server and querying the required information.
Mostly Used Web-Client Software:
– Microsoft Internet Explorer (IE) – Default in MS OS
– Mozilla Firefox
– Opera
– Google Chrome
– Apple Safari – Default in MacOS … Etc.
RSS
Script Programming 
Recent Comments