2. objectives Learning WEB TECHNOLOGIES. Understanding Salient features of WEB TECHNOLOGIES. Designing of WEB PAGES on your own. Development of WEB APPLICATIONS (WEB SITES & PROJECTS) on your own.

3.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it is a markup language  A markup language is a set of markup tags  HTML uses markup tags to describe web pages

4. Webpage A webpage is a document or information resource on the World Wide Web.documentresourceWorld Wide Web It can be accessed through a web browser and displayed on a monitor or mobile device.web browsermonitormobile device Web pages frequently used other resources such as style sheets, scripts and images into their final presentation. style sheetsscriptsimages Web pages may consist of files of static text and other content stored within the web server's file system. contentweb server

6. HTML Documents or Files HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages. html file consists of two sections Header section Body section.

7. Structure of html file Root tag ------ Header section ------ ------ Body section

8. HTML Element Syntax An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes

9. Welcome to html page first page welcome to html page

10. HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags

11. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value" Eg: ------- attribute Attrubute value

12. HTML Headings HTML headings are defined with the to tags. This is a heading

13. HTML Paragraphs HTML paragraphs are defined with the tag. Example This is a paragraph. Each Java application runs inside a runtime instance of some concrete implementation of the abstract specification of the Java virtual machine. In this book, the term "Java virtual machine" is used in all three of these senses. Where the intended sense is not clear from the context, one of the terms "specification," "implementation," or "instance" is added to the term "Java virtual machine".

14. HTML Links HTML links are defined with the tag. Example This is a link

15.  HTML images are defined with the tag.  Example 

16.  Use the tag if you want a line break (a new line) without starting a new paragraph:  Example  This is a para graph with line breaks  The element is an empty HTML element. It has no end tag.  or  Even if works in all browsers, writing instead works better in XHTML and XML applications

17. HTML FONTS The HTML Tag This paragraph is in Arial, size 5, and in red text color. This paragraph is in Verdana, size 3, and in blue text color.

18. * HTML forms are used to pass data to a server. * A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, text area, field set, legend, and label elements. * The tag is used to create an HTML form: *. input elements.

19. The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below.

20. defines a one-line input field that a user can enter text into: First name: Last name: How the HTML code above looks in a browser: First name: Last name: Text Fields

21.  The tag defines a push button.  Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.  Tip: Always specify the type attribute for a element. Different browsers may use different default types for the element.  If you use the element in an HTML form, different browsers may submit different values  Click Me!

22. PASSWORD FIELD  defines a password field:  Password:  How the HTML code above looks in a browser:  Password:

23. defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: Male Female How the HTML code above looks in a browser: Male Female

24. Checkboxes  defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.  I have a bike I have a car  How the HTML code above looks in a browser: I have a bike I have a car

25. Submit Button defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: Username:

26. html Frames The tag defines one particular window (frame) within a frameset. The tag defines a frameset. HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. A simple three-framed page: The frameset element holds one or more frame elements. Each frame element can hold a separate document.

27. html Table tag Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands for "table data," and holds the content of a data cell. A tag can contain text, links, images, lists, forms, other tables, etc. Table Example row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

28. html program to create UnOrderedList UnorderedList Hydrogen Oxygen Calcium Nitrogen

29.  Hydrogen  Oxygen  Calcium  Nitrogen

30. OrderedList Mumbai Hyderabad Chennai Delhi

31. OUTPUT 1.Mumbai 2.Hyderabad 3.Chennai 4.Delhi

32. HTML program to create DefinitionList. DefinitionList HTML HyperTextMarkupLanguage XML ExtensiableMarkupLanguage

33. OUTPUT  HTML HyperTextMarkupLanguage  XML ExtensiableMarkupLanguage

34. html program for displaying an Image Image

35. OUTPUT

36. html program for Login page LoginPage Login Form Username Password

37. OUTPUT Login Form User Name Password LOGIN CLEAR

38. CASCADING STYLE SHEETS CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector The style sheet information can be stored separate from your HTML document, and shared among many HTML files. Change one style sheet file, and the appearance of the entire site is updated. Easier site maintenance

39. TYPES OF CSS 1. INLINE STYLE SHEET. 2. EMBEDDED STYLE SHEET 3. EXTERNAL STYLE SHEET

40. INLINE STYLE SHEET Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.

41. 2. Inline Styles Inline Styles cannot be reused at all, period. Inline styles are placed directly inside an HTML element in the code. We cannot use the Style Builder to make an Inline Style. Instead, to purposely create an inline style requires you to go into the HTML code and type the style yourself.

42. Quite frankly, Inline styles defeat the purpose of using CSS and negates most, if not all of CSS's advantages, like the separation of content from presentation. Therefore, the use of Inline Styles should be kept to an absolute minimum. Use Inline Styles only as a last resort.

43.   The style is embedded inside the HTML element using the style attribute. The above style cannot be reused at at all. It will only target that one paragraph.  In order to style more paragraphs with an inline style, you'd have to make one inline style per paragraph. That's not efficient at all. And makes a mess of your code and certainly adds to the amount of mark-up in your page. Example of an Inline Style:

44. Inline Style Sheet Program. InlineStyleSheet This Paragraph is under the influence of Cascading style sheet This Paragraph is not under the influence of Cascading style sheet This is header1 with Cascading Styles

45. OUTPUT  This Paragraph is under the influence of Cascading style sheet  This Paragraph is not under the influence of Cascading style sheet  This is header1 with Cascading Styles

46. EMBEDDED STYLE SHEET Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in. p { color: #00f; }

47. 1. Internal / Embedded Styles Internal Styles are placed inside the section of a particular web page. ( we use the style builder to accomplish this.) These Styles can be re-used only for the web page in which they are embedded. Therefore, you would need to create these styles over and over again for each web page you wish to style. When using the style builder, Define the style in the Current Page. This will create an Internal Style. But, Internal Styles are not ideal. An External Style Sheet would be a better choice. Advanced Use of Internal Styles -taking advantage of the cascade may require the use of internal styles. however, the main styles are best if placed on an external style sheets

48. The tag is used to write an Internal Style. Here's an Example: Title Goes Here #left-col p { color: #222; font-weight:bold; }

49. Embedded Style Sheet Embeded body { background-color:yellow; margin-left:100px; margin-right=100px } p { font-family:impact; font-size:24pt; color:green } h2 { font-family:verdana; font-size:22pt; color:blue } This text is not having any styles This Paragragraph is under the influence of Cascading style sheet This is header2 with Cascading Styles This is second paragraph under the influence of Cascading style sheet Second Occurence of header2 with Cascading Styles

50. OUTPUT  This text is not having any styles  This Paragragraph is under the influence of Cascading style sheet  This is header2 with Cascading Styles  This is second paragraph under the influence of Cascading style sheet  Second Occurence of header2 with Cascading Styles 

51.  external styles External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to.

52. External Style Sheet For the most part, we will want to place the majority of our Style Rules on an External Style Sheet. This will allow us to reuse the styles as many times as we would like simply by linking the External Style Sheet to other web pages. It also means we only have to create the Styles one time! An External Style Sheet is a separate page which is then linked to the web page. Therefore, the styles are External to, or outside of, the Web Page

53. External Style Sheet style.css body { background-color:yellow; margin-left:100px; margin-right=100px } p { font-family:impact; font-size:24pt; color:green } h2 { font-family:verdana; font-size:22pt; color:blue }

54. external.html External This is External StyleSheet Normal Text This is header2

55. OUTPUT  This is External StyleSheet  This is header2  Normal Text

56. .  Presented by U.LOVARAJU Assoc.Professor IT Dept.