P a g e 1 HTML. VISIT for old papers, practical files samples. This file is for reference purpose only.

Size: px

Start display at page:

Download "P a g e 1 HTML. VISIT for old papers, practical files samples. This file is for reference purpose only."

Rosamond Stevens
6 years ago
Views:

1 P a g e 1 HTML

2 HYPERTEXT PREPROCESSOR (PHP) Introducing HTML: P a g e 2 HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. As its name suggests, HTML is a markup language. Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext. Markup Language describes how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display. Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Html File: HTML is a format that tells a computer how to display a web page. The documents themselves are plain text files with special "tags" or codes that a web browser uses to interpret and display information on your computer screen. HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension Creating HTML Document: Creating an HTML document is easy. To begin coding HTML you need only two things: a simple-text editor and a web browser. Notepad is the most basic of simple-text editors. Here are the simple steps to create a basic HTML document: Open Notepad or another text editor. At the top of the page type <html>. On the next line, indent five spaces and now add the opening header tag: <head>. On the next line, indent ten spaces and type <title></title>. Go to the next line, indent five spaces from the margin and insert the closing header tag: </head>. Five spaces in from the margin on the next line, type<body>.

Now drop down another line and type the closing tag right below its mate: </body>. Finally, go to the next line and type </html>. In the File menu, choose Save As.

3 Now drop down another line and type the closing tag right below its mate: </body>. Finally, go to the next line and type </html>. In the File menu, choose Save As. In the Save as Type option box, choose All Files. Name the file template.htm. Click Save. P a g e 3 HTML Code for creating simple HTML page: <html> <head> <title>this is document title</title> </head> <body> <h1>this is a heading</h1> <p>document description goes here...</p> </body> </html> Save the file as simple.html. Start your Internet browser. Select Open (or Open Page) in the File menu of your browser. A dialog box will appear. Select Browse (or Choose File) and locate the html file you just created - simple.html - select it and click Open. Now you should see an address in the Dialog box, for example C:\MyDocuments\simple.html. Click OK, and the browser will display the page.

4 P a g e 4 Here,The DOCTYPE declaration defines the document type to be HTML The text between <html> and </html> describes an HTML document The text between <head> and </head> provides information about the document The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> describes a heading The text between <p> and </p> describes a paragraph. Skeleton of HTML Document: An HTML document starts and ends with <html> and >/html> tags. These tags tell the browser that the entire document is composed in HTML. Inside these two tags, the document is split into two sections: The <head>...</head> elements, which contain information about the document such as title of the document, author of the document etc. Information inside this tag does not display outside. The <body>...</body> elements, which contain the real content of the document that you see on your screen. HTML language is a markup language and we use many tags to markup text. In the above example you have seen <html>, <body> etc. are called HTML tags or HTML elements. Every tag consists of a tag name, sometimes followed by an optional list of tag attributes, all placed between opening and closing brackets (< and >). The simplest tag is nothing more than a name appropriately enclosed in brackets, such as <head> and <i>. More complicated tags contain one or more attributes, which specify or modify the behavior of the tag. According to the HTML standard, tag and attribute names are not case-sensitive. There's no difference in effect between <head>, <Head>, <HEAD>, or even <HEAD>; they are all equivalent. But with XHTML, case is important: all current standard tag and attribute names are in lowercase.

P a g e 5 HTML Tags : HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come

5 P a g e 5 HTML Tags : HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive; <b> means the same as <B> HTML Versions:

6 P a g e 6 HTML Editors HTML can be edited by using a professional HTML editor like: Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML Editor Notepad However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).

7 P a g e 7 HTML TAGS Logical vs. Physical Tags : In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the browser) the enclosed text's meaning. An example of a logical tag is the <strong></strong> tag. By placing text in between these tags you are telling the browser that the text has some greater importance. By default all browsers make the text appear bold when in between the <strong> and </strong> tags. Physical tags on the other hand provide specific instructions on how to display the text they enclose. s of physical tags include: <b>: Makes the text bold. <big>: Makes the text usually one size bigger than what's around it. <i>: Makes text italic. Physical tags were invented to add style to HTML pages because style sheets were not around, though the original intention of HTML was to not have physical tags. Rather than use physical tags to style your HTML pages, you should use style sheets.

8 P a g e 8 HTML Basic Tags : The basic structure for all HTML documents is simple and should include the following minimum elements or tags: <html>- The main container for HTML pages <head>- The container for page header information <title>- The title of the page <body>- The main body of the page Remember that before an opening <html> tag, an XHTML document can contain the optional XML declaration, and it should always contain a DOCTYPE declaration indicating which version of XHTML it uses. The <html> Element: The <html> element is the containing element for the whole HTML document. Each HTML document should have one <html> and each document should end with a closing </html> tag. Following two elements appear as direct children of an <html> element: <head> <body> As such, start and end HTML tags enclose all the other HTML tags you use to describe the Web page. The <head> Element: The <head> element is just a container for all other header elements. It should be the first thing to appear after the opening <html> tag. Each <head> element should contain a <title> element indicating the title of the document, although it may also contain any combination of the following elements, in any order: The <base> tag is used to areate a "base" url for all links on the page. Check HTML Base tag. The <object> tag is designed to include images, JavaScript objects, Flash animations, MP3 files, QuickTime movies and other components of a page. Check HTML Object tag. The <link> tag is used to link to an external file, such as a style sheet or JavaScript file. Check HTML Link tag. The <style> tag is used to include CSS rules inside the document. Check HTML Style tag. The <script> tag is used to include JAVAScript or VBScript inside the document. Check HTML Script tag.

9 The <meta> tag includes information about the document such as keywords and a description, which are particularly helpful for search applications. : Following is the example of head tag. <head> <title>html Basic tags</title> <meta name="keywords" content="html, Web Pages" /> <meta name="description" content="html Basic Tags" /> <base href=" /> <link rel="stylesheet" type="text/css" href="tp.css" /> <script type="text/javascript"> </script> </head> P a g e 9 The <title> Element: You should specify a title for every page that you write inside the <title> element. This element is a child of the <head> element). It is used in several ways: It displays at the very top of a browser window. It is used as the default name for a bookmark in browsers such as IE and Netscape. Its is used by search engines that use its content to help index pages. Therefore it is important to use a title that really describes the content of your site. The <title> element should contain only the text for the title and it may not contain any other elements. : Here is the example of using title tag. <head> <title>html Basic tags</title> </head> The <body> element appears after the <head> element and contains the part of the Web page that you actually see in the main browser window, which is sometimes referred to as body content. A <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables. Most of what you will be learning in this and the following five chapters will be written between the opening <body> tag and closing </body> tag. : Here is the example of using

10 P a g e 10 body tag. <body> <p>this is a paragraph tag.</p> </body> HTML Meta Tags: HTML lets you specify metadata - information about a document rather than document content - in a variety of ways. The META element can be used to include name/value pairs describing properties of the HTML document, such as author, Expiry Date, a list of key words, author etc. The <meta> tag is an empty element and so does not have a closing tag, rather, <meta> tags carry information within attributes, so you need a forward slash character at the end of the element. Metadata provided by using meta tag is a very important part of the web. It can assist search engines in finding the best match when a user performs a search. Search engines will often look at any metadata attached to a page - especially keywords - and rank it higher than another page with less relevant metadata, or with no metadata at all. Adding Meta Tags to Your Documents: You can add metadata to your web pages by placing <meta> tags between the <head> and </head> tags. The can include the following attributes: Attribute Name Description Name for the property. Can be anything. s include, keywords, description, author, revised, generator etc. content Specifies the property's value. Meta Tag s: Let's see few important usages of Meta Tags. Specifying Keywords:

11 We specify keywords which will be used by the search engine to search a web page. So using following tag you can specify important keywords related to your page. <head> <meta name="keywords" content="html, meta tags, metadata"/> </head> Setting Author Name: You can set an author name in a web page using Meta Tag. See an example below: <head> <meta name="author" content="roma Gupta" /> </head> P a g e 11 Document Description: This is again important information and many search engine use this information as well while searching a web page. So you should give an appropriate description of the page. <head> <meta name="description" content="learn about Meta Tags." /> </head> Nested Tags Sometimes the <body> tag also contains other tags, like the <b> tab. When you enclose an element in with multiple tags, the last tag opened should be the first tag closed. : <p><b><em>this is the proper way to close nested tags. </em></b></p> Tag Attributes Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. The <tag> tells the browser to do something, while the attribute tells the browser how to do it. For instance, if we add the bgcolor attribute, we can tell the browser that the background color of your page should be blue, like this: <body bgcolor="blue">. This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">. Attributes always come in

12 P a g e 12 name/value pairs like this: name="value". Attributes are always added to the start tag of an HTML element and the value is surrounded by quotes. Basic HTML Tags for formatting: The most important tags in HTML are tags that define headings, paragraphs and line breaks. Basic HTML Tags Description <html> Defines an HTML document <body> Defines the document's body <h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule <!--> Defines a comment Create Headings - The <hn> Elements: Any document starts with a heading. You use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and after that heading. Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the smallest.

13 P a g e 13 HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is align.

14 P a g e 14 <h5 align="left">i can align headings </h5> <h5 align="center">this is a centered heading </h5> <h5 align="right">this is a heading aligned to the right </h5> Create Paragraph - The <p> Element: The <p> element offers a way to structure your text. Each paragraph of text should go in between an opening <p> and closing </p> tag. Think of a paragraph as a block of text. You can use the align attribute with a paragraph tag as well. <p align="left">this is a paragraph</p> <p align="center">this is another paragraph</p> Create Line Breaks - The <br /> Element: Whenever you use the <br /> element, anything following it starts on the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The <br> tag is used when you want to start a new line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. It is similar to single spacing in a document. This Code Would Display <p>this <br> is a para<br> graph with line breaks</p> The <br> tag has no closing tag. Horizontal Rule The <hr> element is used for horizontal rules that act as dividers between sections. The horizontal rule does not have a closing tag. It takes attributes such as align and width. :

15 P a g e 15 Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can use comments to write notes to yourself, or write a helpful message to someone looking at your source code. This Code Would Display <p> This html comment would  be displayed like this.</p> This HTML comment would be displayed like this. Demo of HTML Tags: Other HTML Tags As mentioned before, there are logical styles that describe what the text should be and physical styles which actually provide physical formatting. It is recommended to use the logical tags and use style sheets to style the text in those tags. Logical Tags <abbr> <acronym> <address> <cite> Description Defines an abbreviation Defines an acronym Defines an address element Defines a citation

16 P a g e 16 <code> <blockquote> <del> <dfn> <em> <ins> <kbd> <pre> <q> <samp> <strong> <var> Defines computer code text Defines a long quotation Defines text Defines a definition term Defines emphasized text Defines inserted text Defines keyboard text Defines preformatted text Defines a short quotation Defines sample computer code Defines strong text Defines a variable Physical Tags <b> <big> <i> <small> <sup> <sub> <tt> <u> Description Defines bold text Defines big text Defines italic text Defines small text Defines superscripted text Defines subscripted text Defines teletype text Deprecated. Use styles instead Character tags like <strong> and <em> produce the same physical display as <b> and <i> but are more uniformly supported across different browsers. #HTML Attributes: Attributes are another important part of HTML markup. An attribute is used to define the characteristics of an element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value: The nameis the property you want to set. For example, the <font> element in the example carries an attribute whose name is face, which you can use to indicate which typeface you want the text to appear in. The valueis what you want the value of the property to be. The first example was supposed to use the Arial typeface, so the value of the face attribute is Arial.

17 P a g e 17 The value of the attribute should be put in double quotation marks, and is separated from the name by the equals sign. You can see that a color for the text has been specified as well as the typeface in this <font> element: <font face="arial" color="#cc0000"> Core Attributes: The four core attributes that can be used on the majority of HTML elements (although not all) are: id title class style The id Attribute: The id attribute can be used to uniquely identify any element within a page ( or style sheet ). There are two primary reasons that you might want to use an id attribute on an element: If an element carries an id attribute as a unique identifier it is possible to identify just that element and its content. If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name. The id attribute could be used to distinguish between two paragraph elements, like so: <p id="html">this para explains what is HTML</p> <p id="css">this para explains what is Casecading Style Sheet</p> Note that there are some special rules for the value of the id attribute, it must: Begin with a letter (A.Z or a.z) and can then be followed by any number of letters, digits (0.9), hyphens, underscores, colons, and periods. Remain unique within that document; no two attributes may have the same value within that HTML document. The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute: The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip or while the element is loading. For example: <h4 title="hello HTML!">Titled Heading Tag </h4> Above code will generate following result:

18 P a g e 18 The class Attribute: The class attribute is used to associate an element with a style sheet, and specifies the class of element. The value of the attribute may also be a space-separated list of class names. For example: class="classname1 classname2 classname3" The style Attribute: The style attribute allows you to specify CSS rules within the element. For example: <p style="font-family:arial; color:#ff0000;">some text...</p> Internationalization Attributes: There are three internationalization attributes, which are available to most (although not all) XHTML elements. dir lang xml:lang The dir Attribute: The dir attribute allows you to indicate to the browser the direction in which the text should flow.the dir attribute can take one of two values, as you can see in the table that follows: Value ltr Meaning Left to right (the default value) rtl Right to left (for languages such as Hebrew or Arabic that are read right to left) : <html dir=rtl> <head> <title>display Directions</title> </head> <body> This is how IE 5 renders right-to-left directed text. </body>

19 P a g e 19 </html> When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag. The lang Attribute: The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents. When included within the <html> tag, the lang attribute specifies the language you've generally used within the document. When used within other tags, the lang attribute specifies the language you used within that tag's content. Ideally, the browser will use lang to better render the text for the user. : <html lang=en> <head> <title>english Language Page</title> </head> <body> This page is using English Language </body> </html> #HTML Images: HTML images are defined with the <img> tag. The source file (src), alternative text (alt), and size (width and height) are provided as attributes: <img src="w3schools.jpg" alt="w3schools.com" width="104" height="142"> OUTPUT:

20 P a g e 20 HTML Paragraphs The HTML <p> element defines a paragraph. <p>this is a paragraph</p> <p>this is another paragraph</p> PROGRAM: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body> <p>this is a paragraph</p> <p>this is another paragraph</p> </body>

21 P a g e 21 </html> OUTPUT: HTML Display You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove extra spaces and extra lines when the page is displayed. Any number of spaces, and any number of new lines, count as only one space. <p> This paragraph

22 P a g e 22 contains a lot of lines in the source code, but the browser ignores it. </p> <p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p> PROGRAM: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body> <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> <p> This paragraph contains a lot of spaces

23 P a g e 23 in the source code, but the browser ignores it. </p> </body> </html> OUTPUT: The HTML <pre> Element The HTML <pre> element defines preformatted text.

24 P a g e 24 The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks: <pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre> PROGRAM: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body> <pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre> </body> </html>

25 P a g e 25 OUTPUT: HTML Styling Every HTML element has a default style (background color is white and text color is black). Changing the default style of an HTML element, can be done with the style attribute. This example changes the default background color from white to lightgrey: <body style="background-color:lightgrey"> <h1>this is a heading</h1> <p>this is a paragraph.</p>

26 P a g e 26 </body> PROGRAM: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body style="background-color:lightgrey"> <h1>this is a heading</h1> <p>this is a paragraph.</p> </body> </html> OUTPUT:

27 P a g e 27 HTML Fonts: Font face and color depends entirely on the computer and browser that is being used to view your page. But the <font> tag is used to add style, size, and color to the text on your site. You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your page, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change any or the entire font attributes at the one time, by including all the required changes within the one <font> tag. Font Size: You can set the size of your font with size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3. : <font size="1">font size="1"</font> <font size="2">font size="2"</font>

28 P a g e 28 SPECIFY THE RELATIVE FONT SIZE. <font size="+n"> or <font size="-n">: You can specify how many sizes larger or how many sizes smaller than the preset font size should be. : <font size="-1">font size="-1"</font> <font size="+1">font size="+1"</font> This would Display: Font Face: You can set any font you like using face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead they will default to Times New Roman of your font with size attribute. See below few examples on using different font face : <font face="times New Roman" size="5">times New Roman</font> <font face="verdana" size="5">verdana</font> <font face="comic sans MS" size="5">comic Sans MS</font> <font face="wildwest" size="5">wildwest</font> This will produce following result: Times New Roman Verdana Comic Sans MS WildWest Specify alternate font faces: A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma. : <font face="arial,helvetica"> <font face="lucida Calligraphy,Comic Sans MS,Lucida Console> When your page is loaded, their browser will display the first font face that it has available. If none of your selections are installed...then it will display the default font face Times New Roman. Font Color: You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.

29 P a g e 29 : <font color="#ff00ff">this text is hexcolor #FF00FF</font> <font color="red">this text is red</font> This would display: HTML Text Formatting Elements In the previous chapter, you learned about HTML styling, using the HTML style attribute. HTML also defines special elements, for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text. Formatting elements were designed to display special types of text: Bold text Important text Italic text

30 P a g e 30 Emphasized text Marked text Small text Deleted text Inserted text Subscripts Superscripts HTML Bold and Strong Formatting The HTML <b> element defines bold text, without any extra importance. <p>this text is normal.</p> <p><b>this text is bold</b>.</p> The HTML <strong> element defines strong text, with added semantic "strong" importance. <p>this text is normal.</p> <p><strong>this text is strong</strong>.</p> HTML Italic and Emphasized Formatting The HTML <i> element defines italic text, without any extra importance. <p>this text is normal.</p> <p><i>this text is italic</i>.</p> The HTML <em> element defines emphasized text, with added semantic importance. <p>this text is normal.</p> <p><em>this text is emphasized</em>.</p>

31 P a g e 31 HTML Small Formatting The HTML <small> element defines small text: <h2>html <small>small</small> Formatting</h2> HTML Marked Formatting The HTML <mark> element defines marked or highlighted text: <h2>html <mark>marked</mark> Formatting</h2> HTML Deleted Formatting The HTML <del> element defines deleted (removed) of text. <p>my favorite color is <del>blue</del> red.</p> HTML Inserted Formatting The HTML <ins> element defines inserted (added) text. <p>my favorite <ins>color</ins> is red.</p> HTML Subscript Formatting The HTML <sub> element defines subscripted text. <p>this is <sub>subscripted</sub> text.</p> HTML Superscript Formatting

32 P a g e 32 The HTML <sup> element defines superscripted text. <p>this is <sup>superscripted</sup> text.</p> PRACTISE ON HTML TAGS WITH OUTPUT PROGRAM_1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body> <p>this text is normal.</p> <p><b>this text is bold</b>.</p> <p><strong>this text is strong</strong>.</p> <p><i>this text is italic</i>.</p> <p><em>this text is emphasized</em>.</p> </body> </html>

33 P a g e 33 OUTPUT: PROGRAM_2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body> <h2>html <small>small</small> Formatting</h2> <h2>html <mark>marked</mark> Formatting</h2>

34 P a g e 34 <p>my favorite color is <del>blue</del> red.</p> <p>my favorite <ins>color</ins> is red.</p> <p>this is <sub>subscripted</sub> text.</p> <p>this is <sup>superscripted</sup> text.</p> </body> </html> OUTPUT: HTML LINKS Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML Links - Hyperlinks

35 P a g e 35 HTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump to another document. HTML Links - Syntax In HTML, links are defined with the <a> tag: <a href="url">link text</a> : <a href=" our HTML tutorial</a> When you move the mouse cursor over a link, two things will normally happen: The mouse arrow will turn into a little hand The color of the link element will change By default, links will appear as this in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red HTML Links - Image as Link It is common to use images as links: <a href="default.asp"> <img src="smiley.gif" alt="html tutorial" style="width:42px;height:42px;border:0"> </a> HTML Links - The id Attribute The id attribute can be used to create bookmarks inside HTML documents. Bookmarks are not displayed in any special way. They are invisible to the reader. Add an id attribute to any <a> element:

36 P a g e 36 <a id="tips">useful Tips Section</a> Then create a link to the <a> element (Useful Tips Section): <a href="#tips">visit the Useful Tips Section</a> Or, create a link to the <a> element (Useful Tips Section) from another page: <a href=" the Region of your choice</a> Local Links The example above used an absolute URL (A full web address). A local link (link to the same web site) is specified with a relative URL (without : <a href="html_images.asp">html Images</a> PROGRAM OUTPUT FOR LINKS:

37 P a g e 37

38 P a g e 38

P a g e 39 HTML IMAGES HTML Images Syntax In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

39 P a g e 39 HTML IMAGES HTML Images Syntax In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute defines the url (web address) of the image: <img src="url" alt="some_text"> The alt Attribute The alt attribute specifies an alternate text for the image, if it cannot be displayed. The value of the alt attribute should describe the image in words:

40 P a g e 40 <img src="html5.gif" alt="the official HTML5 Icon"> The alt attribute is required. A web page will not validate correctly without it. HTML Screen Readers Screen readers are software programs that can read what is displayed on a screen. Used on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, or braille output. Screen readers are used by people who are blind, visually impaired, or learning disabled. Image Size - Width and Height You can use the style attribute to specify the width and height of an image. The values are specified in pixels (use px after the value): <img src="html5.gif" alt="html5 Icon" style="width:128px;height:128px"> Alternatively, you can use width and height attributes. The values are specified in pixels (without px after the value): <img src="html5.gif" alt="html5 Icon" width="128" height="128"> Width and Height or Style? Both the width, the height, and the style attributes, are valid in the latest HTML5 standard. We suggest you use the style attribute. It prevents styles sheets from changing the default size of images: <!DOCTYPE html> <html> <head> <style>

41 P a g e 41 img { width:100%; </style> </head> <body> <img src="html5.gif" alt="html5 Icon" style="width:128px;height:128px"> <img src="html5.gif" alt="html5 Icon" width="128" height="128"> </body> </html> Images in Another Folder If not specified, the browser expects to find the image in the same folder as the web page. However, it is common on the web, to store images in a sub-folder, and refer to the folder in the image name: <img src="/images/html5.gif" alt="html5 Icon" style="width:128px;height:128px"> If a browser cannot find an image, it will display a broken link icon: <img src="wrongname.gif" alt="html5 Icon" style="width:128px;height:128px"> Images on Another Server Some web sites store their images on image servers. Actually, you can access images from any web address in the world: <img src="

42 P a g e 42 Animated Images The GIF standard allows animated images: <img src="programming.gif" alt="computer Man" style="width:48px;height:48px"> Note that the syntax of inserting animated images is no different from non-animated images. Using an Image as a Link It is common to use images as links: <a href="default.asp"> <img src="smiley.gif" alt="html tutorial" style="width:42px;height:42px;border:0"> </a> Image Maps For an image, you can create an image map, with clickable areas: <img src="planets.gif" alt="planets" usemap="#planetmap" style="width:145px;height:126px" > <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="venus" href="venus.htm"> </map> Image Floating You can let an image float to the left or right of a paragraph: <p> <img src="smiley.gif" alt="smiley face" style="float:left;width:42px;height:42px">

43 P a g e 43 A paragraph with an image. The image floats to the left of the text. </p> PRACTISE OF IMAGES WITH OUTPUT PROGRAM_1: <!DOCTYPE html> <html> <head> <style> img { width:100%; </style> </head> <body> <img src="india.jpg" alt="html5 Icon" style="width:128px;height:128px"> <img src="t-india.jpg" alt="html5 Icon" style="width:128; height:128"> </body> </html> OUTPUT:

44 P a g e 44

45 PROGRAM_2: <!DOCTYPE html> <html> <head> <style> img { width:100%; </style> </head> <body> <img src="image/india.jpg" alt="html5 Icon" style="width:400px;height:400px"> </body> </html> P a g e 45

46 P a g e 46 OUTPUT: HTML Styling Every HTML element has a default style (background color is white and text color is black). Changing the default style of an HTML element, can be done with the style attribute. This example changes the default background color from white to lightgrey: <body style="background-color:lightgrey"> <h1>this is a heading</h1> <p>this is a paragraph.</p> </body> The HTML Style Attribute The HTML style attribute has the following syntax: style="property:value"

47 P a g e 47 The property is a CSS property. The value is a CSS value. HTML Text Color The color property defines the text color to be used for an HTML element: <h1 style="color:blue">this is a heading</h1> <p style="color:red">this is a paragraph.</p> HTML Fonts The font-family property defines the font to be used for an HTML element: <h1 style="font-family:verdana">this is a heading</h1> <p style="font-family:courier">this is a paragraph.</p> HTML Text Size The font-size property defines the text size to be used for an HTML element: <h1 style="font-size:300%">this is a heading</h1> <p style="font-size:160%">this is a paragraph.</p> HTML Text Alignment The text-align property defines the horizontal text alignment for an HTML element: <h1 style="text-align:center">centered Heading</h1> <p>this is a paragraph.</p>

48 P a g e 48 PRACTISE ON COMMANDS WITH OUTPUT: PROGRAM: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body> <h1 style="color:blue">this is a heading</h1> <p style="color:red">this is a paragraph.</p> <h1 style="font-family:verdana">this is a heading</h1> <p style="font-family:courier">this is a paragraph.</p> <h1 style="font-size:300%">this is a heading</h1> <p style="font-size:160%">this is a paragraph.</p> <h1 style="text-align:center">centered Heading</h1> <p>this is a paragraph.</p> </body> </html>

49 P a g e 49 OUTPUT:

50 P a g e 50 HTML can have Unordered lists, Ordered lists, or Description lists: Unordered List The first item The second item The third item The fourth item Ordered List 1. The first item 2. The second item 3. The third item 4. The fourth item Description List The first item Description of item The second item Description of item Unordered HTML Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles). Unordered List: <ul> <li>coffee</li> <li>tea</li>

51 P a g e 51 <li>milk</li> </ul> Unordered HTML Lists - The Style Attribute A style attribute can be added to an unordered list, to define the style of the marker: Style list-style-type:disc Description The list items will be marked with bullets (default) list-style-type:circle The list items will be marked with circles list-style-type:square The list items will be marked with squares list-style-type:none The list items will not be marked Disc: <ul style="list-style-type:disc"> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> Circle: <ul style="list-style-type:circle"> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> Square: <ul style="list-style-type:square"> <li>coffee</li> <li>tea</li>

52 P a g e 52 <li>milk</li> </ul> None: <ul style="list-style-type:none"> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> Ordered HTML Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers. Ordered List: <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> Ordered HTML Lists - The Type Attribute A type attribute can be added to an ordered list, to define the type of the marker: Type type="1" type="a" type="a" Description The list items will be numbered with numbers (default) The list items will be numbered with uppercase letters The list items will be numbered with lowercase letters

53 P a g e 53 type="i" type="i" The list items will be numbered with uppercase roman numbers The list items will be numbered with lowercase roman numbers Numbers: <ol type="1"> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> Upper Case: <ol type="a"> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> Lower Case: <ol type="a"> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> Roman Upper Case: <ol type="i"> <li>coffee</li> <li>tea</li> <li>milk</li> </ol>

54 P a g e 54 Roman Lower Case: <ol type="i"> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> HTML Description Lists A description list, is a list of terms, with a description of each term. The <dl> tag defines a description list. The <dt> tag defines the term (name), and the <dd> tag defines the data (description). Description List: <dl> <dt>coffee</dt> <dd>- black hot drink</dd> <dt>milk</dt> <dd>- white cold drink</dd> </dl> Nested HTML Lists List can be nested (lists inside lists). Nested Lists: <ul> <li>coffee</li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> </li> <li>milk</li> </ul> PRACTISE ON LISTS WITH OUTPUT: PROGRAM:

55 P a g e 55 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> </head> <body> Circle: <ul style="list-style-type:circle"> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> Square: <ul style="list-style-type:square"> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> None: <ul style="list-style-type:none"> <li>coffee</li> <li>tea</li> <li>milk</li> </ul>

56 P a g e 56 </body> </html> OUTPUT:

57 P a g e 57 HTML Table Number First Name Last Name Points 1 Eve Jackson 94 2 John Doe 80 3 Adam Johnson 67 4 Jill Smith 50 Defining HTML Tables <table style="width:100%"> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td>

58 P a g e 58 <td>jackson</td> <td>94</td> </tr> </table> explained: Tables are defined with the <table> tag. Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. A table row can also be divided into table headings with the <th> tag. An HTML Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute: <table border="1" style="width:100%"> <tr> <td>jill</td> <td>smith</td> <td>50</td> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table> To add borders, use the CSS border property: table, th, td { border: 1px solid black; Remember to define borders for both the table and the table cells.

59 P a g e 59 An HTML Table with Collapsed Borders If you want the borders to collapse into one border, add CSS border-collapse: table, th, td { border: 1px solid black; border-collapse: collapse; An HTML Table with Cell Padding Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property: table, th, td { border: 1px solid black; border-collapse: collapse; th, td { padding: 15px; HTML Table Headings Table headings are defined with the <th> tag. By default, all major browsers display table headings as bold and centered: <table style="width:100%"> <tr> <th>firstname</th> <th>lastname</th>

60 P a g e 60 <th>points</th> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table> To left-align the table headings, use the CSS text-align property: th { text-align: left; An HTML Table with Border Spacing Border spacing specifies the space between the cells. To set the border spacing for a table, use the CSS border-spacing property: table { border-spacing: 5px; Table Cells that Span Many Columns To make a cell span more than one column, use the colspan attribute: <table style="width:100%"> <tr> <th>name</th> <th colspan="2">telephone</th> </tr> <tr> <td>bill Gates</td>

61 P a g e 61 <td> </td> <td> </td> </tr> </table> Table Cells that Span Many Rows To make a cell span more than one row, use the rowspan attribute: <table style="width:100%"> <tr> <th>name:</th> <td>bill Gates</td> </tr> <tr> <th rowspan="2">telephone:</th> <td> </td> </tr> <tr> <td> </td> </tr> </table> An HTML Table With a Caption To add a caption to a table, use the <caption> tag: <table style="width:100%"> <caption>monthly savings</caption> <tr> <th>month</th> <th>savings</th> </tr> <tr> <td>january</td> <td>$100</td> </tr>

62 P a g e 62 <tr> <td>february</td> <td>$50</td> </tr> </table> Different Styles for Different Tables Most of the examples above use a style attribute (width="100%") to define the width of each table. This makes it easy to define different widths for different tables. The styles in the <head> section, however, define a style for all tables in a page. To define a special style for a special table, add an id attribute to the table: <table id="t01"> <tr> <th>firstname</th> <th>lastname</th> <th>points</th> </tr> <tr> <td>eve</td> <td>jackson</td> <td>94</td> </tr> </table> Now you can define a different style for this table: table#t01 { width: 100%; background-color: #f1f1c1; ONE E.G. OF OUTPUT:

63 P a g e 63 HTML Forms The <form> Element HTML forms are used to collect user input. The <form> element defines an HTML form: <form>.

64 P a g e 64 form elements. </form> HTML forms contain form elements. Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more. The <input> Element The <input> element is the most important form element. The <input> element has many variations, depending on the type attribute. Here are the types used in this chapter: Type text radio submit Description Defines normal text input Defines radio button input (for selecting one of many choices) Defines a submit button (for submitting the form) You will learn a lot more about input types later in this tutorial. Text Input <input type="text"> defines a one-line input field for text input: <form> First name:<br> <input type="text" name="firstname"> <br>

65 P a g e 65 Last name:<br> <input type="text" name="lastname"> </form> Radio Button Input <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male" checked>male <br> <input type="radio" name="sex" value="female">female </form> The Submit Button <input type="submit"> defines a button for submitting a form to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="mickey"> <br> Last name:<br> <input type="text" name="lastname" value="mouse"> <br><br> <input type="submit" value="submit"> </form> The Action Attribute The action attribute defines the action to be performed when the form is submitted. The common way to submit a form to a server, is by using a submit button.

66 Normally, the form is submitted to a web page on a web server. In the example above, a server-side script is specified to handle the submitted form: <form action="action_page.php"> If the action attribute is omitted, the action is set to the current page. P a g e 66 The Method Attribute The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms: <form action="action_page.php" method="get"> or: <form action="action_page.php" method="post"> When to Use GET? You can use GET (the default method): If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address: action_page.php?firstname=mickey&lastname=mouse When to Use POST? You should use POST: If the form is updating data, or includes sensitive information (password). POST offers better security because the submitted data is not visible in the page address. The Name Attribute To be submitted correctly, each input field must have a name attribute.

67 P a g e 67 This example will only submit the "Last name" input field: <form action="action_page.php"> First name:<br> <input type="text" value="mickey"> <br> Last name:<br> <input type="text" name="lastname" value="mouse"> <br><br> <input type="submit" value="submit"> </form> Grouping Form Data with <fieldset> The <fieldset> element groups related data in a form. The <legend> element defines a caption for the <fieldset> element. <form action="action_page.php"> <fieldset> <legend>personal information:</legend> First name:<br> <input type="text" name="firstname" value="mickey"> <br> Last name:<br> <input type="text" name="lastname" value="mouse"> <br><br> <input type="submit" value="submit"></fieldset> </form> HTML Form Attributes An HTML <form> element, with all possible attributes set, will look like this: <form action="action_page.php" method="get" target="_blank" accept-charset="utf-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

68 P a g e 68. form elements. </form> Here is the list of <form> attributes: Attribute acceptcharset Description Specifies the charset used in the submitted form (default: the page charset). action autocomplete enctype method name novalidate target Specifies an address (url) where to submit the form (default: the submitting page). Specifies if the browser should autocomplete the form (default: on). Specifies the encoding of the submitted data (default: is url-encoded). Specifies the HTTP method used when submitting the form (default: GET). Specifies a name used to identify the form (for DOM usage: document.forms.name). Specifies that the browser should not validate the form. Specifies the target of the address in the action attribute (default: _self).

69 P a g e 69 PRACTISE ON FORM WITH OUTPUT: PROGRAM: <form id="form1" name="form1" method="post" action="class.php"> <table width="669" border="1"> <tr> <td colspan="2">update RECORD</td> </tr> <tr> <td>name</td> <td><input type="text" name="textfield" value="<?php echo $str[name];?>" /></td> </tr> <tr> <td>class</td> <td><input type="text" name="textfield2" value="<?php echo $str[sclass];?>"/></td> </tr> <tr> <td>age</td> <td><input type="text" name="textfield3" value="<?php echo $str[age];?>"/></td> </tr> <tr> <td colspan="2"><input type="submit" name="update" id="button" value="submit" /> <input type="hidden" name="hf" value="<?php echo $str[sno];?>"/> </td>

70 P a g e 70 </tr> </table> </form> <form id="form1" name="form1" method="post" action="class.php"> <table width="669" border="1"> <tr> <td colspan="2">add NEW RECORD</td> </tr> <tr> <td>name</td> <td><input type="text" name="textfield" id="textfield" /></td> </tr> <tr> <td>class</td> <td><input type="text" name="textfield2" id="textfield2" /></td> </tr> <tr> <td>age</td> <td><input type="text" name="textfield3" id="textfield3" /></td> </tr> <tr> <td colspan="2"><input type="submit" name="button" id="button" value="submit" /></td> </tr> </table> </form>

71 P a g e 71 OUTPUT:

72 P a g e 72 CSS AND CSS 3

73 P a g e 73 CASCADING STYLE SHEET (CSS) What is CSS? CSS stands for Cascading Style Sheets CSS defines how HTML elements are to be displayed Styles were added to HTML 4.0 to solve a problem CSS saves a lot of work External Style Sheets are stored in CSS files CSS Solved a Big Problem HTML was NEVER intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: <h1>this is a heading</h1> <p>this is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML 4.0, all formatting could (and should!) be removed from the HTML document, and stored in a separate CSS file. CSS Saves a Lot of Work! The style definitions are normally saved in external.css files. With an external style sheet file, you can change the look of an entire Web site by changing just one file! CSS Syntax A CSS rule set consists of a selector and a declaration block:

P a g e 74 The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons.

74 P a g e 74 The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon. CSS A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces: p {color:red;text-align:center; To make the CSS code more readable, you can put one declaration on each line. In the following example all <p> elements will be center-aligned, with a red text color: p { color: red; text-align: center; CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */. Comments can also span multiple lines: p { color: red; /* This is a single-line comment */ text-align: center;

75 P a g e 75 /* This is a multi-line comment */ CSS Selectors CSS selectors allow you to select and manipulate HTML elements. CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more. The element Selector The element selector selects elements based on the element name. You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color) p { text-align: center; color: red; The id Selector The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single, unique element. To select an element with a specific id, write a hash character, followed by the id of the element. The style rule below will be applied to the HTML element with id="para1":

76 P a g e 76 #para1 { text-align: center; color: red; The class Selector The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period character, followed by the name of the class: In the example below, all HTML elements with class="center" will be center-aligned:.center { text-align: center; color: red; You can also specify that only specific HTML elements should be affected by a class. In the example below, all <p> elements with class="center" will be center-aligned: p.center { text-align: center; color: red; Grouping Selectors If you have elements with the same style definitions, like this: h1 { text-align: center; color: red; h2 { text-align: center; color: red;

77 P a g e 77 p { text-align: center; color: red; you can group the selectors, to minimize the code. To group selectors, separate each selector with a comma. In the example below we have grouped the selectors from the code above: h1, h2, p { text-align: center; color: red; Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style External Style Sheet With an external style sheet, you can change the look of an entire website by changing just one file!

78 P a g e 78 Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a.css extension. An example of a style sheet file called "mystyle.css", is shown below: body { background-color: lightblue; h1 { color: navy; margin-left: 20px; : CSS : /* CSS Document */ #container { margin:0px auto; width:1000px; border:solid red thin; #header { width:1000px; border-bottom:solid black thin; height:150px;

79 P a g e 79 #nav { width:1000px; border:solid red thin; height:50px; #nav ul { margin-left:100px; #nav li { padding-right:100px; list-style-type:none; display:inline; #contents { width:1000px; border:solid blue thin; height:400px; #footer { width:1000px; border:solid black thin; height:30px;

80 P a g e 80 External CSS - The <link> Element: The <link> element can be used to include an external stylesheet file in your HTML document. An external style sheet is a separate text file with.css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element. Here is the generic syntax of including external CSS file: <head> <link type="text/css" href="..." media="..." /> </head> Attributes: Attributes associated with <style> elements are: Attribute Value Description Type Text/css Specifies the style sheet language as a content-type (MIME type). This attribute is required. Href URL Specifies the style sheet file having Style rules. This attribute is a required. Media Screen Tv Projection Handheld Print All Specifies the device the document will be displayed on. Default value is all. This is optional attribute.

81 Internal Style Sheet An internal style sheet may be used if one single page has a unique style. P a g e 81 Internal styles are defined within the <style> element, inside the head section of an HTML page: <head> <style> body { background-color: linen; h1 { color: maroon; margin-left: 40px; </style> </head> Inline Styles An inline style may be used to apply a unique style for a single element. An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly! To use inline styles, add the style attribute to 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 <h1> element: <h1 style="color:blue;margin-left:30px;">this is a heading.</h1> Multiple Style Sheets If some properties have been defined for the same selector in different style sheets, the value will be inherited from the more specific style sheet. For example, assume that an external style sheet has the following properties for the <h1> element: h1 { color: navy;

82 P a g e 82 margin-left: 20px; then, assume that an internal style sheet also has the following property for the <h1> element: h1 { color: orange; If the page with the internal style sheet also links to the external style sheet the properties for the <h1> element will be: color: orange; margin-left: 20px; The left margin is inherited from the external style sheet and the color is replaced by the internal style sheet. Multiple Styles Will Cascade into One Styles can be specified: in an external CSS file inside the <head> section of an HTML page inside an HTML element Cascading order What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority: 1. Browser default 2. External and internal style sheets (in the head section) 3. Inline style (inside an HTML element) Background Color The background-color property specifies the background color of an element. The background color of a page is set like this:

83 P a g e 83 body { background-color: #b0c4de; Background Image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this: body { background-image: url("paper.gif"); All CSS Background Properties All CSS Text Properties Property Description Property Description background Sets all the background properties in one declaration color Sets the color of text background-attachment Sets whether a background image is fixed or scrolls with the direction Specifies rest the of text the page direction/writing direction background-color letter-spacing background-image line-height Increases Sets or the decreases background the space color between of an element characters in a text Sets the Sets line the height background image for an element background-position text-align Specifies Sets the the horizontal starting position alignment of a of background text image background-repeat text-decoration Specifies Sets the how decoration a background added image to text will be repeated

84 P a g e 84 text-indent Specifies the indentation of the first line in a text-block text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document vertical-align Sets the vertical alignment of an element white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in a text Difference Between Serif and Sans-serif Fonts CSS Font Families In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial")

85 P a g e 85 Generic family Font family Description Serif Times New Roman Georgia Serif fonts have small lines at the ends on some characters Sans-serif Arial Verdana "Sans" means without - these fonts do not have the lines at the ends of characters Monospace Courier New Lucida Console All monospace characters have the same width All CSS Font Properties Property Description font Sets all the font properties in one declaration font-family Specifies the font family for text font-size Specifies the font size of text font-style Specifies the font style for text font-variant Specifies whether or not a text should be displayed in a smallcaps font font-weight Specifies the weight of a font

86 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition, links can be styled differently depending on what state they are in. The four links states are: P a g e 86 a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked /* unvisited link */ a:link { color: #FF0000; /* visited link */ a:visited { color: #00FF00; /* mouse over link */ a:hover { color: #FF00FF; /* selected link */ a:active { color: #0000FF; When setting the style for several link states, there are some order rules:

87 P a g e 87 a:hover MUST come after a:link and a:visited a:active MUST come after a:hover Common Link Styles In the example above the link changes color depending on what state it is in. Lets go through some of the other common ways to style links: Text Decoration The text-decoration property is mostly used to remove underlines from links: program: <!DOCTYPE html> <html> <head> <style> a:link { text-decoration: none; a:visited { text-decoration: none; a:hover { text-decoration: underline; a:active { text-decoration: underline; </style> </head> <body> <p><b><a href="default.asp" target="_blank">this is a link</a></b></p> <p><b>note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

88 P a g e 88 <p><b>note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html> OUTPUT: CSS Table: Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for <table>, <th>, and <td> elements: table, th, td { border: 1px solid black; Notice that the table in the example above has double borders. This is because both the table and the <th>/<td> elements have separate borders. To display a single border for the table, use the border-collapse property. Collapse Borders The border-collapse property sets whether the table borders are collapsed into a single border or separated: table { border-collapse: collapse;

89 P a g e 89 table, th, td { border: 1px solid black; Table Width and Height Width and height of a table is defined by the width and height properties. The example below sets the width of the table to 100%, and the height of the <th> elements to 50px: table { width: 100%; th { height: 50px; Horizontal Text Alignment The text-align property sets the horizontal alignment, like left, right, or center. By default, the text in <th> elements are center-aligned and the text in <td> elements are leftaligned. The following example left-aligns the text in <th> elements: th { text-align: left; Vertical Text Alignment The vertical-align property sets the vertical alignment, like top, bottom, or middle.

90 P a g e 90 By default, the vertical alignment of text in a table is middle (for both <th> and <td> elements). The following example sets the vertical text alignment to bottom for <td> elements: td { height: 50px; vertical-align: bottom; Table Padding To control the space between the border and content in a table, use the padding property on <td> and <th> elements: td { padding: 15px; Table Color The example below specifies the color of the borders, and the text and background color of <th> elements: table, td, th { border: 1px solid green; th { background-color: green; color: white; The look of an HTML table can be greatly improved with CSS: Company Contact Country Alfreds Futterkiste Maria Anders Germany

91 P a g e 91 Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Königlich Essen Philip Cramer Germany Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italy North/South Simon Crowther UK Paris spécialités Marie Bertrand France The Big Cheese Liz Nixon USA Vaffeljernet Palle Ibsen Denmark Css 3 CSS3 Animations CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! CSS3 Animation Browser Support for Animations The numbers in the table specify the first browser version that fully supports the property.

92 P a g e 92 Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix webkit moz- animation webkit moz webkit webkit o webkit webkit o- What are CSS3 Animations? An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. Rule When you specify CSS styles inside rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element. The following example binds the "example" animation to the <div> element. The animation will lasts for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow": /* The animation code example { from {background-color: red;

93 P a g e 93 to {background-color: yellow; /* The element to apply the animation to */ div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; Note: If the animation-duration property is not specified, the animation will have no effect, because the default value is 0. In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)). It is also possible to use percent. By using percent, you can add as many style changes as you like. : <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s; animation-delay: 2s;

94 P a g e 94 /* Chrome, Safari, Opera example { 0% {background-color:red; left:0px; top:0px; 25% {background-color:yellow; left:200px; top:0px; 50% {background-color:blue; left:200px; top:200px; 75% {background-color:green; left:0px; top:200px; 100% {background-color:red; left:0px; top:0px; /* Standard syntax example { 0% {background-color:red; left:0px; top:0px; 25% {background-color:yellow; left:200px; top:0px; 50% {background-color:blue; left:200px; top:200px; 75% {background-color:green; left:0px; top:200px; 100% {background-color:red; left:0px; top:0px; </style> </head> <body> <p><b>note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> </body> </html> Program2: <!DOCTYPE html> <html> <head>

95 P a g e 95 <style> div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s; animation-iteration-count: 3; /* Chrome, Safari, Opera example { 0% {background-color:red; left:0px; top:0px; 25% {background-color:yellow; left:200px; top:0px; 50% {background-color:blue; left:200px; top:200px; 75% {background-color:green; left:0px; top:200px; 100% {background-color:red; left:0px; top:0px;

96 P a g e 96 /* Standard syntax example { 0% {background-color:red; left:0px; top:0px; 25% {background-color:yellow; left:200px; top:0px; 50% {background-color:blue; left:200px; top:200px; 75% {background-color:green; left:0px; top:200px; 100% {background-color:red; left:0px; top:0px; </style> </head> <body> <p><b>note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> </body> </html>

97 P a g e 97 Output:

98 P a g e 98 PHP

99 P a g e 99 PHP INTRO: PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is an acronym for "PHP: Hypertext Preprocessor". PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.PHP files can contain text, HTML, CSS, JavaScript, and PHP code. Its codes are executed on the server, and the result is returned to the browser as plain HTML. It s files have extension ".php". FEATURES OF PHP: 1. PHP can generate dynamic page content 2. PHP can create, open, read, write, delete, and close files on the server 3. PHP can collect form data 4. PHP can send and receive cookies 5. PHP can add, delete, modify data in your database 6. PHP can be used to control user-access 7. PHP can encrypt data ADVANTAGES OF PHP: 1. PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) 2. PHP is compatible with almost all servers used today (Apache, IIS, etc.) 3. PHP supports a wide range of databases 4. PHP is free. Download it from the official PHP resource: 5. PHP is easy to learn and runs efficiently on the server side. PROCESS OF PHP: The process of running a PHP script on a Web server looks like this: 1. A visitor requests a Web page by clicking a link, or typing the page s URL into the browser s address bar. The visitor might also send data to the Web server at the same time,

100 P a g e 100 either using a form embedded in a Web page, or via AJAX (Asynchronous JavaScript And XML). 2. The Web server recognizes that the requested URL is a PHP script, and instructs the PHP engine to process and run the script. 3. The script runs, and when it s finished it usually sends an HTML page to the Web browser, which the visitor then sees on their screen. What Do I Need? To start using PHP, you can: Find a web host with PHP and MySQL support Install a web server on your own PC, and then install PHP and MySQL Starting with PHP Following explains basic PHP Syntax: A PHP script can be placed anywhere in the document. A PHP script starts with <?php and ends with?>: <?php // PHP code goes here?> The default file extension for PHP files is ".php". A PHP file normally contains HTML tags, and some PHP scripting code. Below, we have an example of a simple PHP file, with a PHP script that uses a built-in PHP function "echo" to output the text "Hello World!" on a web page:

101 P a g e 101 <!DOCTYPE html> <html> <body> <h1>my first PHP page</h1> <?php echo "Hello World!";?> </body> </html> Comments in PHP A comment in PHP code is a line that is not read/executed as part of the program. Its only purpose is to be read by someone who is looking at the code. Comments can be used to: Let others understand what you are doing

102 P a g e 102 Remind yourself of what you did - Most programmers have experienced coming back to their own work a year or two later and having to re-figure out what they did. Comments can remind you of what you were thinking when you wrote the code PHP Case Sensitivity In PHP, all keywords (e.g. if, else, while, echo, etc.), classes, functions, and user-defined functions are NOT case-sensitive.however; all variable names are case-sensitive. #PHP Variables A variable can have a short name (like x and y) or a more descriptive name (age, carname, total_volume). Rules for PHP variables: A variable starts with the $ sign, followed by the name of the variable A variable name must start with a letter or the underscore character A variable name cannot start with a number A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ ) Variable names are case-sensitive ($age and $AGE are two different variables) PHP variable names are case-sensitive! PHP Variables Scope In PHP, variables can be declared anywhere in the script. The scope of a variable is the part of the script where the variable can be referenced/used. PHP has three different variable scopes: local global static

103 P a g e 103 Creating (Declaring) PHP Variables In PHP, a variable starts with the $ sign, followed by the name of the variable: <?php $txt = "Hello world!"; $x = 5; $y = 10.5;?> After the execution of the statements above, the variable $txt will hold the value Hello world!, the variable$x will hold the value 5, and the variable $y will hold the value Note: When you assign a text value to a variable, put quotes around the value. Note: Unlike other programming languages, PHP has no command for declaring a variable. It is created the moment you first assign a value to it. Output:

104 P a g e 104 #PHP 5 echo and print Statements The PHP echo Statement: The echo statement can be used with or without parentheses: echo or echo(). Display Text The following example shows how to output text with the echo command (notice that the text can contain HTML markup): <?php echo "Hello world!<br>"; echo "I'm about to learn PHP!<br>";?>

105 P a g e 105 OUTPUT: The PHP print Statement: The print statement can be used with or without parentheses: print or print(). Display Text The following example shows how to output text with the print command (notice that the text can contain HTML markup): <?php print "<h2>php is Fun!</h2>"; print "Hello world!<br>"; print "I'm about to learn PHP!";?>

106 P a g e 106 OUTPUT: DIFFERENCE BETWEEN ECHO and PRINT STATEMENT: ECHO STATEMENT PRINT STATEMENT 1. Echo has no return value 1. Print has a return value of 1 so it can be used in expressions. 2. Echo can take multiple 2. Print can take one argument. parameters (although such usage is rare).

107 P a g e Echo is marginally faster than print. 3. Print is marginally slower thanecho. #PHP 5 Data Types Variables can store data of different types, and different data types can do different things. PHP supports the following data types: String Integer Float (floating point numbers - also called double) Boolean Array Object NULL Resource PHP String A string is a sequence of characters, like "Hello world!". A string can be any text inside quotes. You can use single or double quotes: <?php $x = "Hello world!"; $y = 'Hello world!'; echo $x; echo "<br>"; echo $y;?> OUTPUT:

108 P a g e 108 PHP Integer An integer is a whole number (without decimals). It is a number between -2,147,483,648 and +2,147,483,647. Rules for integers: An integer must have at least one digit (0-9) An integer cannot contain comma or blanks An integer must not have a decimal point An integer can be either positive or negative Integers can be specified in three formats: decimal (10-based), hexadecimal (16-based - prefixed with 0x) or octal (8-based - prefixed with 0) In the following example $x is an integer. The PHP var_dump() function returns the data type and value: <?php $x = 5985;

109 P a g e 109 var_dump($x);?> OUTPUT: PHP Float A float (floating point number) is a number with a decimal point or a number in exponential form. In the following example $x is a float. The PHP var_dump() function returns the data type and value: <?php $x = ; var_dump($x);?>

110 PHP Boolean A Boolean represents two possible states: TRUE or FALSE. $x = true; $y = false; P a g e 110 Booleans are often used in conditional testing. You will learn more about conditional testing in a later chapter of this tutorial. PHP Array An array stores multiple values in one single variable. In the following example $cars is an array. The PHP var_dump() function returns the data type and value: <?php $cars = array("volvo","bmw","toyota"); var_dump($cars);?> PHP Object An object is a data type which stores data and information on how to process that data. In PHP, an object must be explicitly declared. First we must declare a class of object. For this, we use the class keyword. A class is a structure that can contain properties and methods: <?php class Car { function Car() { $this->model = "VW"; // create an object

111 P a g e 111 $herbie = new Car(); // show object properties echo $herbie->model;?> PHP NULL Value Null is a special data type which can have only one value: NULL. A variable of data type NULL is a variable that has no value assigned to it. Tip: If a variable is created without a value, it is automatically assigned a value of NULL. Variables can also be emptied by setting the value to NULL: <?php $x = "Hello world!"; $x = null; var_dump($x);?> OUTPUT:

112 P a g e 112 #PHP Strings A string is a sequence of characters, like "Hello world!". Get The Length of a String The PHP strlen() function returns the length of a string (number of characters). The example below returns the length of the string "Hello world!": <?php echo strlen("hello world!"); // outputs 12?> Count The Number of Words in a String The PHP str_word_count() function counts the number of words in a string: <?php echo str_word_count("hello world!"); // outputs 2?> Reverse a String The PHP strrev() function reverses a string: <?php echo strrev("hello world!"); // outputs!dlrowolleh?> Search For a Specific Text Within a String The PHP strpos() function searches for a specific text within a string.

113 P a g e 113 If a match is found, the function returns the character position of the first match. If no match is found, it will return FALSE. The example below searches for the text "world" in the string "Hello world!": <?php echo strpos("hello world!", "world"); // outputs 6?> Replace Text Within a String The PHP str_replace() function replaces some characters with some other characters in a string. The example below replaces the text "world" with "Dolly": <?php echo str_replace("world", "Dolly", "Hello world!"); // outputs Hello Dolly!?> OUTPUT:

114 P a g e 114 #PHP Constants A constant is an identifier (name) for a simple value. The value cannot be changed during the script. A valid constant name starts with a letter or underscore (no $ sign before the constant name). Note: Unlike variables, constants are automatically global across the entire script. Create a PHP Constant To create a constant, use the define() function. Syntax define(name, value, case-insensitive) Parameters: name: Specifies the name of the constant value: Specifies the value of the constant case-insensitive: Specifies whether the constant name should be case-insensitive. Default is false

115 P a g e 115 The example below creates a constant with a case-sensitive name: <?php define("greeting", "Welcome to W3Schools.com!"); echo GREETING;?> Constants are Global Constants are automatically global and can be used across the entire script. The example below uses a constant inside a function, even if it is defined outside the function: <?php define("greeting", "Welcome to W3Schools.com!"); function mytest() { echo GREETING; mytest();?> OUTPUT:

116 P a g e 116 #PHP 5 Operators Operators are used to perform operations on variables and values. PHP divides the operators in the following groups: Arithmetic operators Assignment operators Comparison operators

117 P a g e 117 Increment/Decrement operators Logical operators String operators Array operators PHP Arithmetic Operators The PHP arithmetic operators are used with numeric values to perform common arithmetical operations, such as addition, subtraction, multiplication etc. PHP Assignment Operators The PHP assignment operators are used with numeric values to write a value to a variable. The basic assignment operator in PHP is "=". It means that the left operand gets set to the value of the assignment expression on the right.

118 P a g e 118 PHP Comparison Operators The PHP comparison operators are used to compare two values (number or string):

119 P a g e 119 PHP Increment / Decrement Operators The PHP increment operators are used to increment a variable's value. The PHP decrement operators are used to decrement a variable's value. PHP Logical Operators The PHP logical operators are used to combine conditional statements. PHP String Operators PHP has two operators that are specially designed for strings.

120 P a g e 120 PHP Array Operators The PHP array operators are used to compare arrays. Practise on operators with output: Program: <?php echo "Hello"; echo "<br>"; print ("hello again");echo "<br>";

121 P a g e 121 $x=10; echo "$x";echo "<br>"; $y=20; echo "$y";echo "<br>"; $z=$x+$y; echo "$z";echo "<br>"; $z=$x*$y; echo "$z";echo "<br>"; /* relational operators */ echo '$x'; echo "<br>"; if($x==$y) echo "yes"; else echo "no"; echo "<br>";

122 P a g e 122 if($x<$y) echo "yes"; else echo "no"; echo "<br>"; if($x===$y) echo "yes"; else echo "no"; echo "<br>"; /* logical operators */ if (($X!=$y) && ($z<$y)) echo "yes"; else echo "no"; echo "<br>"; if (($X==$y) ($z>$y))

123 P a g e 123 echo "yes"; else echo "no"; echo "<br>"; /* Assignment operators */ echo "*****************************";echo "<br>"; $x+=20; $x-=4; $x*=3; $x/=2; echo "$x";echo "<br>"; /* Concatenation */ $r= 100; $p=90; echo "Result is". $r;echo "<br>"; echo "Result is". $r."and percentage is". $p;echo "<br>";

124 P a g e 124 /* Ternary Operator*/ $a=2; $b=3; $c=4; $max= (($a>$b)? (($a>$c)?$a:$c) : (($b>$c)? $b:$c)); echo "$max"; echo "<br>"; /* Unary Operator*/ $d=10; $f=$d++; echo "$f";echo "<br>"; $f=++$d; echo "$f";echo "<br>"; $f=$d $d; echo "$f";echo "<br>"; $f=++$d + $d++; echo "$f";echo "<br>";?>

125 P a g e 125 OUTPUT

126 P a g e 126 #PHP IF-ELSE LOOP PHP Conditional Statements Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this. In PHP we have the following conditional statements: if statement - executes some code only if a specified condition is true if...else statement - executes some code if a condition is true and another code if the condition is false if...elseif...else statement - specifies a new condition to test, if the first condition is false switch statement - selects one of many blocks of code to be executed PHP - The if Statement The if statement is used to execute some code only if a specified condition is true. Syntax if (condition) { code to be executed if condition is true; The example below will output "Have a good day!" if the current time (HOUR) is less than 20: <?php $t = date("h"); if ($t < "20") { echo "Have a good day!";?> PHP - The if...else Statement Use the if...else statement to execute some code if a condition is true and another code if the condition is false.

127 P a g e 127 Syntax if (condition) { code to be executed if condition is true; else { code to be executed if condition is false; The example below will output "Have a good day!" if the current time is less than 20, and "Have a good night!" otherwise: <?php $t = date("h"); if ($t < "20") { echo "Have a good day!"; else { echo "Have a good night!";?> PHP - The if...elseif...else Statement Use the if...elseif...else statement to specify a new condition to test, if the first condition is false. Syntax if (condition) { code to be executed if condition is true; elseif (condition) { code to be executed if condition is true; else { code to be executed if condition is false; The example below will output "Have a good morning!" if the current time is less than 10, and "Have a good day!" if the current time is less than 20. Otherwise it will output "Have a good night!":

128 P a g e 128 <?php $t = date("h"); if ($t < "10") { echo "Have a good morning!"; elseif ($t < "20") { echo "Have a good day!"; else { echo "Have a good night!";?> PRACTISE ON LOOPS WITH OUTPUT: PROGRAM: <?php for ($k=1; $k<=5 ; $k++) { for ($j=$k; $j<=5; $j++) { echo "$j"; echo "<br>"; echo "<br>"; for ($i=5; $i>=1; $i--) {

129 P a g e 129 for($j=$i; $j<=5;$j++) {echo "$i"; echo "<br>"; echo"<br>"; for ($i=1;$i<=5;$i++) { for ($j=1; $j<=$i;$j++) { echo "*"; echo "<br>";?> OUTPUT:

130 P a g e 130 #The PHP switch Statement Use the switch statement to select one of many blocks of code to be executed. Syntax switch (n) { case label1: code to be executed if n=label1; break; case label2: code to be executed if n=label2; break; case label3: code to be executed if n=label3;

131 P a g e 131 break;... default: code to be executed if n is different from all labels; <?php $favcolor = "red"; switch ($favcolor) { case "red": echo "Your favoritecolor is red!"; break; case "blue": echo "Your favoritecolor is blue!"; break; case "green": echo "Your favoritecolor is green!"; break; default: echo "Your favoritecolor is neither red, blue, or green!";?> OUTPUT:

132 P a g e 132 #PHP Loops Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal code-lines in a script, we can use loops to perform a task like this. In PHP, we have the following looping statements: while - loops through a block of code as long as the specified condition is true do...while - loops through a block of code once, and then repeats the loop as long as the specified condition is true for - loops through a block of code a specified number of times foreach - loops through a block of code for each element in an array The PHP while Loop The while loop executes a block of code as long as the specified condition is true.

133 P a g e 133 Syntax while (condition is true) { code to be executed; The example below first sets a variable $x to 1 ($x = 1). Then, the while loop will continue to run as long as $x is less than, or equal to 5 ($x <= 5). $x will increase by 1 each time the loop runs ($x++): <?php $x = 1; while($x <= 5) { echo "The number is: $x <br>"; $x++;?> The PHP do...while Loop The do...while loop will always execute the block of code once, it will then check the condition, and repeat the loop while the specified condition is true. Syntax do { code to be executed; while (condition is true); The example below first sets a variable $x to 1 ($x = 1). Then, the do while loop will write some output, and then increment the variable $x with 1. Then the condition is checked (is $x less than, or equal to 5?), and the loop will continue to run as long as $x is less than, or equal to 5: <?php $x = 1; do { echo "The number is: $x <br>";

134 P a g e 134 $x++; while ($x <= 5);?> Notice that in a do while loop the condition is tested AFTER executing the statements within the loop. This means that the do while loop would execute its statements at least once, even if the condition is false the first time. The example below sets the $x variable to 6, then it runs the loop, and then the condition is checked: <?php $x = 6; do { echo "The number is: $x <br>"; $x++; while ($x<=5);?> PRACTISE ON WHILE LOOP WITH OUTPUT: PROGRAM: <?php /* while loop */ echo "<br>"; $i=1; while ($i<=5) { echo $i;

135 P a g e 135 $i++; /* do while loop */ echo "<br>"; $i=1; do { echo $i; $i++; while ($i<=5); echo "<br>";?> OUTPUT:

136 P a g e 136 #The PHP for Loop The for loop is used when you know in advance how many times the script should run. Syntax for (init counter; test counter; increment counter) { code to be executed; Parameters: init counter: Initialize the loop counter value test counter: Evaluated for each loop iteration. If it evaluates to TRUE, the loop continues. If it evaluates to FALSE, the loop ends. increment counter: Increases the loop counter value The example below displays the numbers from 0 to 10: <?php for ($x = 0; $x <= 10; $x++) { echo "The number is: $x <br>";

137 P a g e 137?> The PHP foreach Loop The foreach loop works only on arrays, and is used to loop through each key/value pair in an array. Syntax foreach ($array as $value) { code to be executed; For every loop iteration, the value of the current array element is assigned to $value and the array pointer is moved by one, until it reaches the last array element. The following example demonstrates a loop that will output the values of the given array ($colors): <?php $colors = array("red", "green", "blue", "yellow"); foreach ($colors as $value) { echo "$value <br>";?> PRACTISE OF FOR LLOOP WITH OUTPUT PROGRAM: <?php /* for loop */

138 P a g e 138 echo "<br>"; for ($i=1;$i<=10;$i++) { if ($i==5) break; echo $i."<br>"; echo "<br>"; for ($i=1;$i<=10;$i++) { if ($i==5) continue; echo $i."<br>";?> OUTPUT:

139 P a g e 139 #PHP FUNCTIONS PHP User Defined Functions Besides the built-in PHP functions, we can create our own functions. A function is a block of statements that can be used repeatedly in a program.

140 P a g e 140 A function will not execute immediately when a page loads. A function will be executed by a call to the function. Create a User Defined Function in PHP A user defined function declaration starts with the word "function": Syntax function functionname() { code to be executed; Note: A function name can start with a letter or underscore (not a number). Tip: Give the function a name that reflects what the function does! Function names are NOT case-sensitive. In the example below, we create a function named "writemsg()". The opening curly brace ( { ) indicates the beginning of the function code and the closing curly brace ( ) indicates the end of the function. The function outputs "Hello world!". To call the function, just write its name: <?php function writemsg() { echo "Hello world!"; writemsg(); // call the function?> PHP Function Arguments Information can be passed to functions through arguments. An argument is just like a variable.

141 P a g e 141 Arguments are specified after the function name, inside the parentheses. You can add as many arguments as you want, just seperate them with a comma. The following example has a function with one argument ($fname). When the familyname() function is called, we also pass along a name (e.g. Jani), and the name is used inside the function, which outputs several different first names, but an equal last name: <?php function familyname($fname) { echo "$fnamerefsnes.<br>"; familyname("jani"); familyname("hege"); familyname("stale"); familyname("kai Jim"); familyname("borge");?> PHP Default Argument Value The following example shows how to use a default parameter. If we call the function setheight() without arguments it takes the default value as argument: <?php function setheight($minheight = 50) { echo "The height is : $minheight<br>"; setheight(350); setheight(); // will use the default value of 50 setheight(135); setheight(80);?> PHP Functions - Returning values

142 P a g e 142 To let a function return a value, use the return statement: <?php function sum($x, $y) { $z = $x + $y; return $z; echo " = ". sum(5, 10). "<br>"; echo " = ". sum(7, 13). "<br>"; echo "2 + 4 = ". sum(2, 4);?> PRACTISE OF FUNCTION WITH OUTPUT PROGRAM: <?php function fun() { echo "This is my first function"; echo "<br>"; fun(); function fun1() { echo "Name"; echo "<br>"; for ($i=1;$i<=10;$i++)

143 P a g e 143 { echo "Cherry"; echo "<br>"; fun1(); function add($x,$y) { $c=$x+$y; echo $c; echo "<br>"; ////////////////////////////////// function add1 ($x,$y) { $c=$x+$y; return $c; echo "<br>"; $a= add1(15,10); echo $a; echo "<br>";

144 P a g e 144 // Default functions: function fun2 ($name,$class=bca) { echo $name,$class; fun2 ("Aman",MCA); fun2 ("Sneha"); // Function to change the style $ size of the text function fun3() { $hello="hello"; $world="world";echo "<br>"; echo $hello; echo $world;echo "<br>"; fun3 (); echo $hello; echo $world; $z="hello There";

145 P a g e 145 function fun4() { global $t; $t="world"; echo $z; echo $t; fun4(); echo $z; echo $t;?> OUTPUT:

146 P a g e 146 #PHP ARRAY An array stores multiple values in one single variable:

147 P a g e 147 <?php $cars = array("volvo", "BMW", "Toyota"); echo "I like ". $cars[0]. ", ". $cars[1]. " and ". $cars[2]. ".";?> What is an Array? An array is a special variable, which can hold more than one value at a time. If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this: $cars1 = "Volvo"; $cars2 = "BMW"; $cars3 = "Toyota"; However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300? The solution is to create an array! An array can hold many values under a single name, and you can access the values by referring to an index number. Create an Array in PHP In PHP, the array() function is used to create an array: array(); In PHP, there are three types of arrays: Indexed arrays - Arrays with a numeric index Associative arrays - Arrays with named keys Multidimensional arrays - Arrays containing one or more arrays PHP Indexed Arrays

148 P a g e 148 There are two ways to create indexed arrays: The index can be assigned automatically (index always starts at 0), like this: $cars = array("volvo", "BMW", "Toyota"); or the index can be assigned manually: $cars[0] = "Volvo"; $cars[1] = "BMW"; $cars[2] = "Toyota"; The following example creates an indexed array named $cars, assigns three elements to it, and then prints a text containing the array values: <?php $cars = array("volvo", "BMW", "Toyota"); echo "I like ". $cars[0]. ", ". $cars[1]. " and ". $cars[2]. ".";?> Get The Length of an Array - The count() Function The count() function is used to return the length (the number of elements) of an array: <?php $cars = array("volvo", "BMW", "Toyota"); echo count($cars);?> Loop Through an Indexed Array To loop through and print all the values of an indexed array, you could use a for loop, like this: <?php $cars = array("volvo", "BMW", "Toyota"); $arrlength = count($cars); for($x = 0; $x < $arrlength; $x++) {

149 P a g e 149 echo $cars[$x]; echo "<br>";?> PHP Associative Arrays Associative arrays are arrays that use named keys that you assign to them. There are two ways to create an associative array: $age = array("peter"=>"35", "Ben"=>"37", "Joe"=>"43"); or: $age['peter'] = "35"; $age['ben'] = "37"; $age['joe'] = "43"; The named keys can then be used in a script: <?php $age = array("peter"=>"35", "Ben"=>"37", "Joe"=>"43"); echo "Peter is ". $age['peter']. " years old.";?> Loop Through an Associative Array To loop through and print all the values of an associative array, you could use a foreach loop, like this: <?php $age = array("peter"=>"35", "Ben"=>"37", "Joe"=>"43"); foreach($age as $x => $x_value) { echo "Key=". $x. ", Value=". $x_value; echo "<br>";?>

150 P a g e 150 PRACTISE OF ARRAYS WITH OUTPUT: PROGRAM <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>arrays</title> </head> <body> <?php $x=array(10,20,30); echo $x[0]; echo "<br>"; echo "<pre>"; print_r($x); echo "</pre>"; echo "<br>"; $y= array(10=>100, 20=>200,30=>300);

151 P a g e 151 $y[]=5; $y[7]=6; $y[]=8; echo $y[20]; echo "<br>"; echo "<pre>"; print_r($y); echo "</pre>"; echo "<br>"; $z=array (10=>100, 20=>array(5,6), 30=>array(7,8)); echo "<pre>"; print_r($z); echo "</pre>"; echo "<br>"; $k=array (15=>5.29, "ABC"=>100, 'A'=>NULL, 5=>TRUE, 50=>array(10,20)); echo "<pre>"; print_r($k); echo "</pre>"; echo "<br>"; $a=range(1,100); print_r($a);

152 P a g e 152 echo "<br>"; if(is_array($a)) { echo "Yes"; else { echo "No"; echo "<br>"; $x1[0]="mango"; $x1[1]="guava"; $x1[2]="apple"; print_r($x1); echo "<br>"; $detail= array("name"=>"aman", "Age"=>23, "Marks"=>75.7); print_r($detail); echo "<br>"; $country=array("india"=> array("hp", "AP"), "Australia"=> array("sydney","melbourne")); foreach($country as $k=>$v)

153 P a g e 153 { echo $k." ".$v; echo "<br>"; foreach ($v as $k1=>$v1) { echo $k1." ".$v1; echo "<br>"; echo "<br>"; $w=array(10=>100, 20=>200, 30=>300); echo count($w); echo "<br>"; if (in_array(600,$w)) { echo "Yes"; else { echo "No"; echo "<br>";

154 P a g e 154 if (isset ($w[20])) { echo "Yes"; else { echo "No";?> </body> </html> OUTPUT:

155 P a g e 155

156 P a g e 156 #PHP - Sort Functions For Arrays PHP array sort functions are: sort() - sort arrays in ascending order rsort() - sort arrays in descending order asort() - sort associative arrays in ascending order, according to the value ksort() - sort associative arrays in ascending order, according to the key arsort() - sort associative arrays in descending order, according to the value krsort() - sort associative arrays in descending order, according to the key Sort Array in Ascending Order - sort() The following example sorts the elements of the $cars array in ascending alphabetical order: <?php $cars = array("volvo", "BMW", "Toyota"); sort($cars);?> Sort Array in Descending Order - rsort() The following example sorts the elements of the $cars array in descending alphabetical order: <?php $cars = array("volvo", "BMW", "Toyota"); rsort($cars);?>

157 P a g e 157 #PHP FORM PHP - A Simple HTML Form The example below displays a simple HTML form with two input fields and a submit button: <html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name"><br> <input type="text" name=" "><br> <input type="submit"> </form> </body> </html> When the user fills out the form above and clicks the submit button, the form data is sent for processing to a PHP file named "welcome.php". The form data is sent with the HTTP POST method. To display the submitted data you could simply echo all the variables. The "welcome.php" looks like this: <html> <body> Welcome <?php echo $_POST["name"];?><br> Your address is: <?php echo $_POST[" "];?> </body> </html> The output could be something like this: Welcome John Your address is john.doe@example.com The same result could also be achieved using the HTTP GET method:

158 P a g e 158 <html> <body> <form action="welcome_get.php" method="get"> Name: <input type="text" name="name"><br> <input type="text" name=" "><br> <input type="submit"> </form> </body> </html> and "welcome_get.php" looks like this: <html> <body> Welcome <?php echo $_GET["name"];?><br> Your address is: <?php echo $_GET[" "];?> </body> </html> The code above is quite simple. However, the most important thing is missing. You need to validate form data to protect your script from malicious code. GET vs. POST Both GET and POST create an array (e.g. array( key => value, key2 => value2, key3 => value3,...)). This array holds key/value pairs, where keys are the names of the form controls and values are the input data from the user.

159 P a g e 159 Both GET and POST are treated as $_GET and $_POST. These are superglobals, which means that they are always accessible, regardless of scope - and you can access them from any function, class or file without having to do anything special. $_GET is an array of variables passed to the current script via the URL parameters. $_POST is an array of variables passed to the current script via the HTTP POST method. When to use GET? Information sent from a form with the GET method is visible to everyone (all variable names and values are displayed in the URL). GET also has limits on the amount of information to send. The limitation is about 2000 characters. However, because the variables are displayed in the URL, it is possible to bookmark the page. This can be useful in some cases. GET may be used for sending non-sensitive data. Note: GET should NEVER be used for sending passwords or other sensitive information! When to use POST? Information sent from a form with the POST method is invisible to others (all names/values are embedded within the body of the HTTP request) and has no limits on the amount of information to send. Moreover POST supports advanced functionality such as support for multi-part binary input while uploading files to server. However, because the variables are not displayed in the URL, it is not possible to bookmark the page. PRACTISE OF FORM WITH OUTPUT: OUTPUT:

160 P a g e 160

161 P a g e 161

162 P a g e 162 DATABASE CONNECTIVITY MySQL is a database system used on the web MySQL is a database system that runs on a server MySQL is ideal for both small and large applications MySQL is very fast, reliable, and easy to use MySQL uses standard SQL MySQL compiles on a number of platforms MySQL is free to download and use MySQL is developed, distributed, and supported by Oracle Corporation MySQL is named after co-founder Monty Widenius's daughter: My The data in a MySQL database are stored in tables. A table is a collection of related data, and it consists of columns and rows. Databases are useful for storing information categorically. A company may have a database with the following tables: Employees Products Customers Orders If you need a short answer, it would be "Whatever you like". Both MySQLi and PDO have their advantages: PDO will work on 12 different database systems, where as MySQLi will only work with MySQL databases. So, if you have to switch your project to use another database, PDO makes the process easy. You only have to change the connection string and a few queries. With MySQLi, you will need to rewrite the entire code - queries included. Both are object-oriented, but MySQLi also offers a procedural API.

163 P a g e 163 Both support Prepared Statements. Prepared Statements protect from SQL injection, and are very important for web application security. MySQL s in Both MySQLi and PDO Syntax In this, and in the following chapters we demonstrate three ways of working with PHP and MySQL: MySQLi (object-oriented) MySQLi (procedural) PDO MySQLi Installation For Linux and Windows: The MySQLi extension is automatically installed in most cases, when php5 mysql package is installed. For installation details, go to: PDO Installation For installation details, go to: Open a Connection to MySQL Before we can access data in the MySQL database, we need to be able to connect to the server : <?php mysql_connect ("localhost","root","root"); mysql_select_db("student");

164 P a g e 164 $user= $_REQUEST[user]; $pass= $_REQUEST[pass]; session_start(); $str=mysql_query ("select * from admin_login where ad_name='$user' and ad_pass='$pass'"); if (mysql_num_rows($str)) { $_SESSION[abc]=$user; header ("location:main.php"); else { header ("location:login.php?msg=wrong password");?>

165 P a g e 165 JAVASCRIPT

166 P a g e 166 JAVASCRIPT JavaScript is one of the 3 languages all web developers must learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages JavaScript is the most popular programming language in the world. 1. JavaScript Can Change HTML Content 2. JavaScript Can Change HTML Attributes 3. JavaScript Can Change HTML Styles (CSS) 4. JavaScript Can Validate Data. #An of Java Script: <!DOCTYPE html> <html> <body> <h1>javascript Can Change Images</h1> <img id="myimage" onclick="changeimage()" src="pic_bulboff.gif" width="100" height="180">

167 P a g e 167 <p>click the light bulb to turn on/off the light.</p> <script> functionchangeimage() { var image = document.getelementbyid('myimage'); if (image.src.match("bulbon")) { image.src = "pic_bulboff.gif"; else { image.src = "pic_bulbon.gif"; </script> </body> </html> OUTPUT:

168 P a g e 168 External JavaScript Advantages Placing JavaScripts in external files has some advantages: It separates HTML and code It makes HTML and JavaScript easier to read and maintain

169 P a g e 169 Cached JavaScript files can speed up page loads JavaScript Functions and Events A JavaScript function is a block of JavaScript code, that can be executed when "asked" for. For example, a function can be executed when an event occurs, like when the user clicks a button. You will learn much more about functions and events in later chapters. JavaScript in <head> or <body> You can place any number of scripts in an HTML document. Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both. JavaScript in <body> In this example, a JavaScript function is placed in the <body> section of an HTML page. The function is invoked (called) when a button is clicked: <!DOCTYPE html> <html> <body> <h1>javascript in Body</h1> <p id="demo">a Paragraph.</p> <button type="button" onclick="myfunction()">try it</button>

170 P a g e 170 <script> functionmyfunction() { document.getelementbyid("demo").innerhtml = "Paragraph changed."; </script> </body> </html> OUTPUT: When button is clicked or invoked then:

171 P a g e 171 JavaScript Display Possibilities JavaScript can "display" data in different ways: Writing into an alert box, using window.alert(). Writing into the HTML output using document.write(). Writing into an HTML element, using innerhtml. Writing into the browser console, using console.log(). Using window.alert() You can use an alert box to display data: <!DOCTYPE html> <html> <body> <h1>my First Web Page</h1> <p>my first paragraph.</p> <script> window.alert(5 + 6); </script>

172 P a g e 172 </body> </html> OUTPUT: Using document.write() For testing purposes, it is convenient to use document.write(): <!DOCTYPE html> <html> <body> <h1>my First Web Page</h1> <p>my first paragraph.</p> <script> document.write(5 + 6); </script>

173 P a g e 173 </body> </html> OUTPUT: Using document.write() after an HTML document is fully loaded, will delete all existing HTML: <!DOCTYPE html> <html> <body> <h1>my First Web Page</h1> <p>my first paragraph.</p> <button type="button" onclick="document.write(5 + 6)">Try it</button> </body> </html> OUTPUT:

174 P a g e 174 #HTML DOM The HTML DOM (Document Object Model) When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects: The HTML DOM Tree of Objects With the object model, JavaScript gets all the power it needs to create dynamic HTML:

175 P a g e 175 JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page What is the DOM? The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The W3C DOM standard is separated into 3 different parts: Core DOM - standard model for all document types XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents What is the HTML DOM? The HTML DOM is a standard object model and programming interface for HTML. It defines: The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements

176 P a g e 176 The HTML DOM Document In the HTML DOM object model, the document object represents your web page. The document object is the owner of all other objects in your web page. If you want to access objects in an HTML page, you always start with accessing the document object. Below are some examples of how you can use the document object to access and manipulate HTML. Finding HTML Elements Method Description document.getelementbyid() Find an element by element id document.getelementsbytagname() Find elements by tag name document.getelementsbyclassname() Find elements by class name Changing HTML Elements Method Description element.innerhtml= Change the inner HTML of an element element.attribute= Change the attribute of an HTML element

177 P a g e 177 element.setattribute(attribute,value) Change the attribute of an HTML element element.style.property= Change the style of an HTML element Adding and Deleting Elements Method Description document.createelement() Create an HTML element document.removechild() Remove an HTML element document.appendchild() Add an HTML element document.replacechild() Replace an HTML element document.write(text) Write into the HTML output stream Adding Events Handlers Method Description document.getelementbyid(id).onclick=function(){code Adding event handler code to an onclic Finding HTML Objects The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5. Later, in HTML DOM Level 3, more objects, collections, and properties were added.

178 P a g e 178 Property Description document.anchors Returns all <a> elements that have a name attribute document.applets Returns all <applet> elements (Deprecated in HTML5) document.baseuri Returns the absolute base URI of the document document.body Returns the <body> element document.cookie Returns the document's cookie document.doctype Returns the document's doctype document.documentelement Returns the <html> element document.documentmode Returns the mode used by the browser document.documenturi Returns the URI of the document document.domain Returns the domain name of the document server document.domconfig Obsolete. Returns the DOM configuration document.embeds Returns all <embed> elements document.forms Returns all <form> elements document.head Returns the <head> element document.images Returns all <img> elements document.implementation Returns the DOM implementation document.inputencoding Returns the document's encoding (character set)

179 P a g e 179 document.lastmodified Returns the date and time the document was updated document.links Returns all <area> and <a> elements that have a href attribute document.readystate Returns the (loading) status of the document document.referrer Returns the URI of the referrer (the linking document) document.scripts Returns all <script> elements document.stricterrorchecking Returns if error checking is enforced document.title Returns the <title> element document.url Returns the complete URL of the document #Changing the Value of an Attribute To change the value of an HTML attribute, use this syntax: document.getelementbyid(id).attribute=new value This example changes the value of the src attribute of an <img> element: <!DOCTYPE html> <html> <body> <img id="image" src="smiley.gif" width="160" height="120">

180 P a g e 180 <script> document.getelementbyid("image").src = "landscape.jpg"; </script> <p>the original image was smiley.gif, but the script changed it to landscape.jpg</p> </body> </html> OUTPUT:

HTML Text Formatting. HTML Session 2 2

HTML Text Formatting. HTML Session 2 2 HTML Session 2 HTML Text Formatting HTML also defines special elements for defining text with a special meaning. - Bold text - Important text - Italic text - Emphasized text