This document provides an overview of HTML including:
- A brief history of HTML from its creation in 1989 to modern standards.
- An explanation of basic HTML tags for formatting text, creating links, inserting images, and organizing content using lists, tables, and frames.
- Descriptions of common HTML attributes for further customizing tags.
- Recommendations for the essential tools and resources needed to get started with HTML.
This power point is introduce a simple CSS animation
in this PPT you can learn a new CSS 3 animation property and how to use that do a simple animation
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
- SVG stands for Scalable Vector Graphics and defines 2D graphics using XML tags
- SVG images can be scaled, searched, indexed, scripted and compressed without loss of quality
- Common SVG shapes that can be created include rectangles, circles, ellipses, lines, polygons and polylines using XML elements
- Attributes like x, y, width, height are used to define the position and dimensions of shapes while styles define colors and properties
This document discusses responsive design with Bootstrap. It introduces Bootstrap as an open-source front-end framework that allows developers to create responsive websites. It highlights new features in Bootstrap 3.1.1 like a mobile-first approach and support for different screen resolutions. The document also explains the Bootstrap grid system which uses rows and columns to layout responsive content. It provides an example of the grid system and discusses other Bootstrap components like glyphs, buttons, and JavaScript plugins.
The document discusses various topics related to HTML, CSS, and client-side coding including: CSS selectors, properties, cascade, media queries, animations. It covers CSS syntax, selectors like type, ID, class, attribute, and pseudo selectors. It describes the box model and properties for text, background, positioning. It also explains cascade, specificity, inheritance in CSS and how media queries allow styling for different devices.
This document summarizes CSS Grid Layout, a new two-dimensional grid system being added to CSS. It discusses some of the limitations of existing CSS layout methods and how Grid Layout addresses them. Key points include: Grid Layout uses line-based placement to position items, grid tracks can be flexible or fixed widths, areas can be explicitly or implicitly named, and the system avoids hacks and limitations of previous methods.
JavaScript is a scripting language used to make web pages interactive. It was originally developed by Netscape under the name Mocha, then renamed LiveScript, and finally JavaScript. JavaScript can access and manipulate HTML elements on a page, add interactivity, and validate form data before submission. It runs in the browser rather than on the server. Common JavaScript statements include if/else, switch, for loops, while loops, and functions. The Document Object Model (DOM) represents HTML documents as objects that JavaScript can manipulate.
This power point is introduce a simple CSS animation
in this PPT you can learn a new CSS 3 animation property and how to use that do a simple animation
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
- SVG stands for Scalable Vector Graphics and defines 2D graphics using XML tags
- SVG images can be scaled, searched, indexed, scripted and compressed without loss of quality
- Common SVG shapes that can be created include rectangles, circles, ellipses, lines, polygons and polylines using XML elements
- Attributes like x, y, width, height are used to define the position and dimensions of shapes while styles define colors and properties
This document discusses responsive design with Bootstrap. It introduces Bootstrap as an open-source front-end framework that allows developers to create responsive websites. It highlights new features in Bootstrap 3.1.1 like a mobile-first approach and support for different screen resolutions. The document also explains the Bootstrap grid system which uses rows and columns to layout responsive content. It provides an example of the grid system and discusses other Bootstrap components like glyphs, buttons, and JavaScript plugins.
The document discusses various topics related to HTML, CSS, and client-side coding including: CSS selectors, properties, cascade, media queries, animations. It covers CSS syntax, selectors like type, ID, class, attribute, and pseudo selectors. It describes the box model and properties for text, background, positioning. It also explains cascade, specificity, inheritance in CSS and how media queries allow styling for different devices.
This document summarizes CSS Grid Layout, a new two-dimensional grid system being added to CSS. It discusses some of the limitations of existing CSS layout methods and how Grid Layout addresses them. Key points include: Grid Layout uses line-based placement to position items, grid tracks can be flexible or fixed widths, areas can be explicitly or implicitly named, and the system avoids hacks and limitations of previous methods.
JavaScript is a scripting language used to make web pages interactive. It was originally developed by Netscape under the name Mocha, then renamed LiveScript, and finally JavaScript. JavaScript can access and manipulate HTML elements on a page, add interactivity, and validate form data before submission. It runs in the browser rather than on the server. Common JavaScript statements include if/else, switch, for loops, while loops, and functions. The Document Object Model (DOM) represents HTML documents as objects that JavaScript can manipulate.
This document provides an overview of various CSS topics including comments, colors, text formatting, positioning, and cross-browser compatibility. It explains concepts like using hexadecimal color codes, text properties like alignment and decoration, positioning elements with static, relative, absolute and fixed positioning, and strategies for aligning elements and dealing with browser inconsistencies.
The document discusses the CSS display property, which controls how elements are displayed on a page. It describes common display types like block and inline, and how to override default display values. It also explains how to hide elements using display: none; without affecting page layout or using visibility: hidden; which hides elements but still takes up space.
This document discusses HTML forms, including:
- HTML forms allow users to enter and submit data through text boxes, buttons, checkboxes, radio buttons, and other controls.
- Forms are defined using <form> tags which specify an action and method for submitting data.
- Common form controls include text fields, passwords, checkboxes, radio buttons, buttons, textareas, and select menus.
- Accessible forms should use <label> tags, <fieldset> and <legend> elements to organize groups of controls.
- CSS can style forms and individual controls using properties like :focus and outline.
- Form layout can be controlled through <br>, tables, or CSS float and clear properties.
The document provides an overview of jQuery including:
- What jQuery is and its main features like DOM manipulation and AJAX
- How to include jQuery in an HTML document and basic usage syntax
- jQuery selectors to find elements and filters to refine selections
- Common jQuery methods for manipulating attributes, events, HTML, CSS, and more
- Examples of using various jQuery functions and concepts
In any web application, typically used to have user interaction. When user interacts the events start functioning like mouse clicks, mouse hover, and change event and so on. Application must handle the event and execute the necessary code. Know more about event handling create functional component file or functional component using snippet like RFCE. Don’t add parenthesis after event handler function like “clickHandler” because it is a function not function call.
https://www.ducatindia.com/javatraining/
Introduction to Cascading Style Sheets (CSS)Chris Poteet
This document provides an introduction to Cascading Style Sheets (CSS) including definitions, why CSS is used, the cascade, inheritance, using style sheets, CSS syntax, selectors, the box model, CSS and the semantic web, browser acceptance, fonts, units, colors, layouts, text formatting, backgrounds, lists, shorthand properties, accessibility, and resources for further information.
HTML & CSS are languages used to structure and style web pages. HTML provides the content structure using elements, tags, and attributes. CSS controls the style and layout using selectors, properties, and values. Some common HTML terms include elements, tags, and attributes. A basic HTML document structure includes DOCTYPE, html, head, title, and body tags. CSS can be used to style HTML elements by selecting them with tags, classes, IDs and applying properties like color, font-size, background, and more.
The document discusses HTML5 semantic and non-semantic elements. It defines semantic elements as those with inherent meaning, like <form> and <table>, while non-semantic elements like <div> and <span> do not convey meaning. New HTML5 semantic elements are introduced, including <section> for sections, <article> for independent content, <header> and <footer> for introductory and footer content, and <nav> for navigation links. Semantic elements are important for search engines and accessibility by clearly defining the meaning of different parts of a web page.
Pseudo-classes are used to define special states of CSS elements. They allow styling elements when a user mouses over, focuses on, visits, or activates them. Common pseudo-classes include :hover, :focus, :visited, and :active. Pseudo-classes can be used with CSS classes and selectors like :first-child to style specific elements, such as styling the first <p> element or changing the color of a link on hover. Pseudo-elements like ::before and ::after allow inserting content before or after elements.
CSS (Cascading Style Sheets) allows separation of HTML structure from presentation by controlling formatting properties like fonts, colors, and layout. CSS declarations can be embedded within HTML, linked via external stylesheets, or applied inline. Selectors target elements by tag name, class, ID, and other attributes to style them.
Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/
How do you know which layout technique you need to apply for your use case?
We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
The document discusses front-end web development frameworks and tools. It covers full stack development, Git, Node.js, npm, and Bootstrap. Bootstrap is described as a free front-end framework that includes HTML, CSS templates for interfaces and optional JavaScript plugins. It also provides responsive designs and a mobile-first approach. The document then explains components of Bootstrap like grids, forms, navigation bars, cards, modals and preprocessors like Less and Sass which can be used to write CSS code.
JavaScript - An Introduction is a beginner's guide to JavaScript. It starts with very basic level and goes to intermediate level. You'll be introduced with every language constructs, Event handling, Form handling and AJAX which is supported by JavaScript with XMLHttpRequest object. This XHR object is discussed in enough detail so that you can understand how the underlying AJAX functionality works in jQuery. At the end it discusses advance concepts and library build on/around JavaScript.
This document provides an overview of an HTML and CSS crash course, including:
- Introductions and goals of learning frontend development concepts
- Explanations of HTML tags, elements, and attributes
- Explanations of CSS selectors, properties, values, and basic layout techniques
- Examples and drills for applying HTML and CSS concepts
- A positioning exercise for further practice with CSS layout
The document guides students through building their first website and provides resources for continuing to learn frontend development on their own.
This document provides tips for best practices when writing CSS code. It recommends avoiding inline styles, header styles, multiple CSS files, and !important. It also recommends using shorthand properties, avoiding universal selectors and IDs when possible, optimizing images, and using CSS3 properties instead of images. In summary, the document outlines techniques for writing efficient, well-structured CSS code to improve performance and maintainability.
The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.
This document provides an overview and explanation of React Hooks. It introduces common Hooks like useState, useEffect, useReducer, and custom hooks. useState is used to add local state to functional components. useEffect is similar to component lifecycle methods and lets you perform side effects. useReducer is an alternative to useState for managing state in a single object. Custom hooks let you extract reusable logic and share it without changing components. The document also includes a FAQ addressing questions about hooks and class components.
CSS is used to style and lay out web pages. There are three types of CSS: external, internal, and inline stylesheets. External stylesheets define styles in CSS files and can be used across many web pages, internal stylesheets are defined within the <style> tags in an HTML page, and inline styles are defined within HTML elements using the style attribute. CSS selectors allow targeting specific elements using IDs, classes, types, and other attributes to style them. Common CSS properties include colors, backgrounds, borders, padding, margins, and styling of links and lists.
The document discusses various aspects of HTML5 including its history, new elements, offline storage capabilities, and responsive web design. It provides information on HTML, CSS, JavaScript and how they make up the three layers of web design. It also summarizes the roles of different standards organizations and differences between HTML5 and the HTML living standard.
The document is a presentation on Dynamic Hypertext Markup Language (DHTML). It defines DHTML as a combination of HTML, CSS, and scripting to make web pages dynamic and interactive. It discusses the need for DHTML, components of DHTML including HTML, CSS, DOM, and JavaScript. It also covers Cascading Style Sheets, the Document Object Model, how to access HTML and scripting, and how to create rollover buttons using DHTML. The presentation was given by Abhishek Meena, a 6th semester B.Sc. student studying computer science.
This document provides an overview of various CSS topics including comments, colors, text formatting, positioning, and cross-browser compatibility. It explains concepts like using hexadecimal color codes, text properties like alignment and decoration, positioning elements with static, relative, absolute and fixed positioning, and strategies for aligning elements and dealing with browser inconsistencies.
The document discusses the CSS display property, which controls how elements are displayed on a page. It describes common display types like block and inline, and how to override default display values. It also explains how to hide elements using display: none; without affecting page layout or using visibility: hidden; which hides elements but still takes up space.
This document discusses HTML forms, including:
- HTML forms allow users to enter and submit data through text boxes, buttons, checkboxes, radio buttons, and other controls.
- Forms are defined using <form> tags which specify an action and method for submitting data.
- Common form controls include text fields, passwords, checkboxes, radio buttons, buttons, textareas, and select menus.
- Accessible forms should use <label> tags, <fieldset> and <legend> elements to organize groups of controls.
- CSS can style forms and individual controls using properties like :focus and outline.
- Form layout can be controlled through <br>, tables, or CSS float and clear properties.
The document provides an overview of jQuery including:
- What jQuery is and its main features like DOM manipulation and AJAX
- How to include jQuery in an HTML document and basic usage syntax
- jQuery selectors to find elements and filters to refine selections
- Common jQuery methods for manipulating attributes, events, HTML, CSS, and more
- Examples of using various jQuery functions and concepts
In any web application, typically used to have user interaction. When user interacts the events start functioning like mouse clicks, mouse hover, and change event and so on. Application must handle the event and execute the necessary code. Know more about event handling create functional component file or functional component using snippet like RFCE. Don’t add parenthesis after event handler function like “clickHandler” because it is a function not function call.
https://www.ducatindia.com/javatraining/
Introduction to Cascading Style Sheets (CSS)Chris Poteet
This document provides an introduction to Cascading Style Sheets (CSS) including definitions, why CSS is used, the cascade, inheritance, using style sheets, CSS syntax, selectors, the box model, CSS and the semantic web, browser acceptance, fonts, units, colors, layouts, text formatting, backgrounds, lists, shorthand properties, accessibility, and resources for further information.
HTML & CSS are languages used to structure and style web pages. HTML provides the content structure using elements, tags, and attributes. CSS controls the style and layout using selectors, properties, and values. Some common HTML terms include elements, tags, and attributes. A basic HTML document structure includes DOCTYPE, html, head, title, and body tags. CSS can be used to style HTML elements by selecting them with tags, classes, IDs and applying properties like color, font-size, background, and more.
The document discusses HTML5 semantic and non-semantic elements. It defines semantic elements as those with inherent meaning, like <form> and <table>, while non-semantic elements like <div> and <span> do not convey meaning. New HTML5 semantic elements are introduced, including <section> for sections, <article> for independent content, <header> and <footer> for introductory and footer content, and <nav> for navigation links. Semantic elements are important for search engines and accessibility by clearly defining the meaning of different parts of a web page.
Pseudo-classes are used to define special states of CSS elements. They allow styling elements when a user mouses over, focuses on, visits, or activates them. Common pseudo-classes include :hover, :focus, :visited, and :active. Pseudo-classes can be used with CSS classes and selectors like :first-child to style specific elements, such as styling the first <p> element or changing the color of a link on hover. Pseudo-elements like ::before and ::after allow inserting content before or after elements.
CSS (Cascading Style Sheets) allows separation of HTML structure from presentation by controlling formatting properties like fonts, colors, and layout. CSS declarations can be embedded within HTML, linked via external stylesheets, or applied inline. Selectors target elements by tag name, class, ID, and other attributes to style them.
Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/
How do you know which layout technique you need to apply for your use case?
We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
The document discusses front-end web development frameworks and tools. It covers full stack development, Git, Node.js, npm, and Bootstrap. Bootstrap is described as a free front-end framework that includes HTML, CSS templates for interfaces and optional JavaScript plugins. It also provides responsive designs and a mobile-first approach. The document then explains components of Bootstrap like grids, forms, navigation bars, cards, modals and preprocessors like Less and Sass which can be used to write CSS code.
JavaScript - An Introduction is a beginner's guide to JavaScript. It starts with very basic level and goes to intermediate level. You'll be introduced with every language constructs, Event handling, Form handling and AJAX which is supported by JavaScript with XMLHttpRequest object. This XHR object is discussed in enough detail so that you can understand how the underlying AJAX functionality works in jQuery. At the end it discusses advance concepts and library build on/around JavaScript.
This document provides an overview of an HTML and CSS crash course, including:
- Introductions and goals of learning frontend development concepts
- Explanations of HTML tags, elements, and attributes
- Explanations of CSS selectors, properties, values, and basic layout techniques
- Examples and drills for applying HTML and CSS concepts
- A positioning exercise for further practice with CSS layout
The document guides students through building their first website and provides resources for continuing to learn frontend development on their own.
This document provides tips for best practices when writing CSS code. It recommends avoiding inline styles, header styles, multiple CSS files, and !important. It also recommends using shorthand properties, avoiding universal selectors and IDs when possible, optimizing images, and using CSS3 properties instead of images. In summary, the document outlines techniques for writing efficient, well-structured CSS code to improve performance and maintainability.
The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.
This document provides an overview and explanation of React Hooks. It introduces common Hooks like useState, useEffect, useReducer, and custom hooks. useState is used to add local state to functional components. useEffect is similar to component lifecycle methods and lets you perform side effects. useReducer is an alternative to useState for managing state in a single object. Custom hooks let you extract reusable logic and share it without changing components. The document also includes a FAQ addressing questions about hooks and class components.
CSS is used to style and lay out web pages. There are three types of CSS: external, internal, and inline stylesheets. External stylesheets define styles in CSS files and can be used across many web pages, internal stylesheets are defined within the <style> tags in an HTML page, and inline styles are defined within HTML elements using the style attribute. CSS selectors allow targeting specific elements using IDs, classes, types, and other attributes to style them. Common CSS properties include colors, backgrounds, borders, padding, margins, and styling of links and lists.
The document discusses various aspects of HTML5 including its history, new elements, offline storage capabilities, and responsive web design. It provides information on HTML, CSS, JavaScript and how they make up the three layers of web design. It also summarizes the roles of different standards organizations and differences between HTML5 and the HTML living standard.
The document is a presentation on Dynamic Hypertext Markup Language (DHTML). It defines DHTML as a combination of HTML, CSS, and scripting to make web pages dynamic and interactive. It discusses the need for DHTML, components of DHTML including HTML, CSS, DOM, and JavaScript. It also covers Cascading Style Sheets, the Document Object Model, how to access HTML and scripting, and how to create rollover buttons using DHTML. The presentation was given by Abhishek Meena, a 6th semester B.Sc. student studying computer science.
This document provides an overview of key concepts for building a user interface with HTML5 including text, graphics, and media elements. It covers choosing HTML5 tags to display text, graphics, and play media as outlined in the exam objectives. The document defines HTML tags and elements, and covers common text tags, required tags, attributes, nesting, entities, doctypes, and provides examples of image, figure, canvas, SVG, video and audio elements.
This document discusses web design workflow and front-end development. It covers the layers of front-end development including HTML, CSS, JavaScript, grids, and frameworks. It also discusses designing static comps versus in the browser, the mobile revolution and responsive design. The document then discusses information architecture, wireframes, and the languages of web design including HTML, CSS, JavaScript. It also discusses grids, frameworks, SASS/LESS, and responsive design.
The document provides an introduction to HTML (Hypertext Markup Language). It discusses that HTML was created to allow for hypertext links within and between web documents, representing a departure from traditional printed books. It then covers the origins of HTML in SGML and its evolution into a presentation language. The rest of the document outlines basic HTML elements and tags for document structure, text formatting, lists, images, and links.
If you are new to PrintCSS, one of the biggest tasks is to decide on the rendering tool. PrintCSS.live tries to help you with that decision by allowing you to try out the most popular rendering tools on the market in the browser.
HTML is used to structure and layout web pages. The basic HTML document has a head and body section. The head contains metadata like the title, while the body contains visible content. Common elements include headings, paragraphs, lists, links, images and tables. Tags like <h1> and <p> define headings and paragraphs. Unordered and ordered lists use <ul> and <ol> tags. Links are created with <a> tags and images with <img> tags. Tables are made up of <table>, <tr>, and <td> tags to define the table, rows, and cells. HTML provides basic building blocks for creating web pages.
This document provides an overview of HTML (Hypertext Markup Language) and how to create basic web pages. It discusses HTML tags like <html>, <head>, <body>, and other common tags. It also covers attributes, headings, paragraphs, line breaks, horizontal rules, text formatting, fonts, the <div> tag, and the <marquee> tag for scrolling text. The goal is to teach the fundamentals of using HTML to structure and style web page content.
This document provides an introduction to HTML (Hypertext Markup Language) and web page programming. It defines HTML as a markup language that uses tags to structure and present content on web pages. It describes some basic HTML tags like <html>, <head>, <title>, and <body> that provide the underlying framework and structure for web pages. It also covers other common tags for formatting text, inserting images, and setting attributes like color, size, and alignment. The document is intended as a classroom resource to teach the fundamentals of HTML and creating simple web pages.
This document discusses Cascading Style Sheets (CSS) and its core concepts. It covers the different ways to insert CSS styles (external, internal, inline stylesheets), CSS selectors (type, class, ID selectors), the cascade and inheritance of styles, and some common text properties like color, decoration, and formatting. CSS is used to separate document structure and presentation to make websites easier to maintain and style consistently.
This chapter discusses the basics of HTML and introduces HTML5. It covers creating web pages with HTML, the history and evolution of HTML, and new features in HTML5 like semantic elements and rich media capabilities. The chapter also discusses choosing an HTML editor and using best practices like validating code and following web standards.
This chapter discusses the basics of HTML and introduces HTML5. It covers creating web pages with HTML, the history and evolution of HTML, and new features in HTML5 like semantic elements and rich media capabilities. The chapter also discusses choosing an HTML editor and using best practices like validating code and writing semantically correct markup.
Cascading Style Sheets (CSS) allow separation of document content from document presentation and formatting. CSS defines how elements should be rendered on screen, paper, or other media. This document discusses CSS syntax, the different ways to insert CSS (external, internal, inline stylesheets), CSS selectors including type, class, ID and descendant selectors, and the cascading order of multiple style sheets. It also covers CSS features such as comments, declarations and properties, and media types for external stylesheets.
This document provides an overview of HTML. It discusses the origins and development of HTML, including its basis in SGML and evolution into a presentation language. Key aspects of HTML covered include document structure, tags, attributes, headings, text formatting, lists, links, tables, backgrounds, and adding multimedia files. The document also provides examples of common HTML elements and tags.
The document discusses web design and the components of websites. It explains that a website is a collection of related web pages that share a common domain name. Each screen of information on a website is called a page, and pages can contain text, images, sound, video and links that allow users to navigate between pages. The document also describes the use of HTML and CSS in building websites, and lists common HTML tags.
9781285852645_CH01 research and analysis of data.pptxclement swarnappa
HTML5 provides new elements and attributes that allow for more semantic and structured markup of web pages. It aims to address shortcomings in previous versions of HTML. Key features of HTML5 include new page layout elements, support for rich media and applications, and a move toward stricter syntax rules based on XML. HTML5 code should include a doctype declaration, meta tag for character encoding, and make use of new semantic elements like header, nav, article, and section to mark up different page regions.
This class covers basic HTML tags and terminology. The instructor introduces common HTML tags like <html>, <head>, <title>, <body>, <p>, <h1-h6>, <strong>, and <a> and explains how they are used. Students learn about HTML elements, self-closing tags, and attributes. The goal is for students to understand basic HTML terms and structure, know common tags, and be able to build a simple HTML page by the end of the class.
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScriptSoumen Santra
This document provides an overview of dynamic HTML (DHTML) and its components. DHTML uses HTML for content, CSS for style and presentation, and JavaScript for dynamic behavior and interactivity. It allows web pages to be dynamically changed after loading by manipulating the DOM tree with scripts. DHTML's advantages include making pages interactive at the client-side without server requests, separating design from content, and maintaining uniformity across a site.
The document outlines an agenda for a session on HTML, CSS, and UI/UX design. It includes a quick revision of HTML and CSS standards and practices. It introduces HTML5 best practices regarding semantic elements. It defines what UI/UX is and why it is important. It discusses some UI principles to follow, such as keeping designs simple, straightforward, and focused on context while guiding users and providing feedback.
The document provides an overview of HTML5 and how to build web applications with it. Some key points covered include:
- HTML5 is the latest version of HTML and supports new elements, tags, and attributes
- HTML5 pages can be built by writing code between angle brackets and saving it as a file with an .html extension
- CSS can be used to style HTML5 pages through selectors, properties, and linking external style sheets
- JavaScript adds interactivity by manipulating the DOM and creating dynamic content
- Features like forms, multimedia, and drag-and-drop are improved in HTML5 for building robust web applications
The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
The document discusses Spring framework concepts including inversion of control (IOC), dependency injection, Spring modules, the IOC container, and configuring beans through XML. It provides examples of injecting properties, constructor arguments, inner beans, and aliases in the Spring XML configuration file. The examples demonstrate how Spring's IOC container instantiates, configures and wires Java objects defined as beans in the configuration.
The document provides information about Hibernate, including:
1) Hibernate is an open-source object-relational mapping tool for Java that simplifies interaction between Java objects and relational databases.
2) It discusses Hibernate's architecture including the Configuration, SessionFactory, Session, Transaction, and Query objects.
3) Examples are provided of configuring Hibernate using annotations and XML files, performing basic CRUD operations, and mapping different relationship types like one-to-one and one-to-many.
The document provides information about Java Server Pages (JSP) technology:
- JSP separates the graphical design from dynamic content and allows Java code to be embedded in HTML pages, helping to develop dynamic web applications.
- It benefits web designers and programmers by allowing each to focus on their specialties without needing to learn the other's language.
- JSP pages are converted to servlets by the JSP container, with the Java code embedded in the servlet's _jspService() method. This process compiles and runs the page each time it is requested.
Introduction to Web Application Technologies
CGI Programs on the Web Server
What is servlet?
Jobs of servlet
Advantages over CGI
Why pages are build dynamically?
Servlet container
Installation & configuration
- Type 1: Integration of Tomcat server and eclipse
- Type 2: Java Servlet
Servlet Sample Example
Servlet Overview And Architecture
- Servlet Life cycle/Single Thread Model
- Interface Servlet
- HttpServlet Class
- HttpServletRequest, HttpServletResponse
Web Application Technologies,What is servlet?
Jobs of servlet
Advantages over CGI
Why pages are build dynamically?
Servlet container
Installation & configuration
- Type 1: Integration of Tomcat server and eclipse
- Type 2: Java Servlet
Servlet Sample Example
Servlet Overview And Architecture
- Servlet Life cycle/Single Thread Model
- Interface Servlet
- HttpServlet Class
- HttpServletRequest, HttpServletResponse
Handling client request :Http request
Generating Server Response : Http status code
Handling Session
- Cookies
- Session Tracking
- URL-re writing
- Hidden Form fields
Data Science applications on logistics. This will give overall data science applicability on various feilds of logistc management. Research and Trends, framework, forward, backward, process, move my goods, my goods, requests, beautiful soap, selenium, tools, arohaka technologies,exploratory data science, feature engineering, model building
This document contains an agenda for an interview preparation session focusing on .NET and C# ASP.NET. The agenda includes introductions, discussing domains and projects, an overview of the Software Development Life Cycle (SDLC) including Scrum and planning poker, version management using Git, problem solving techniques, an overview of common .NET programs and technologies like the .NET Framework and C#, and concluding with manager and HR rounds.
This document provides information about becoming an entrepreneur, including defining what an entrepreneur is, identifying common types of entrepreneurs, listing advantages of entrepreneurship, and outlining typical steps to become an entrepreneur. It discusses permits and registrations required, choosing a legal structure, developing an idea and value proposition, understanding the industry, and conducting market and financial feasibility analyses. A case study of the successful Indian startup RedBus is also included, which began as the founder struggled to book a bus ticket home.
This document provides an overview of the Java programming language. It discusses Java's history and why it was created. It also outlines some of Java's key fundamentals like variables, data types, operators, and control statements. Additionally, it covers object-oriented programming concepts in Java like classes, objects, inheritance and encapsulation. The document is intended to help readers get started with learning Java.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static types, classes, and interfaces to JavaScript to help catch errors. TypeScript supports object-oriented programming concepts like classes, interfaces, inheritance, and modules. It is compatible with JavaScript and can reuse existing JavaScript code and libraries. The TypeScript compiler checks for errors and compiles TypeScript code into JavaScript that can run on any browser, device, or operating system that supports JavaScript.
The document provides an overview of Git and GitHub. It discusses version control systems and the differences between centralized (CVCS) and distributed (DVCS) version control systems. Git is introduced as a DVCS that allows for complex merges and fast collaboration. The document then covers Git concepts, commands, workflows and how to use GitHub for hosting Git repositories and collaborating on projects.
Jenkins is an open source tool that automates the continuous integration process. It monitors source code repositories for changes, automatically builds the code, runs tests, and provides feedback to developers. Before CI tools like Jenkins, software delivery was slow and locating bugs after integration was difficult. With Jenkins, every code change triggers an automatic build and test, improving feedback and release frequency while reducing bug fixing time. Jenkins has over 1000 plugins and alternatives include Travis CI, Buildbot, Bamboo, and JetBrains TeamCity.
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxEduSkills OECD
Iván Bornacelly, Policy Analyst at the OECD Centre for Skills, OECD, presents at the webinar 'Tackling job market gaps with a skills-first approach' on 12 June 2024
THE SACRIFICE HOW PRO-PALESTINE PROTESTS STUDENTS ARE SACRIFICING TO CHANGE T...indexPub
The recent surge in pro-Palestine student activism has prompted significant responses from universities, ranging from negotiations and divestment commitments to increased transparency about investments in companies supporting the war on Gaza. This activism has led to the cessation of student encampments but also highlighted the substantial sacrifices made by students, including academic disruptions and personal risks. The primary drivers of these protests are poor university administration, lack of transparency, and inadequate communication between officials and students. This study examines the profound emotional, psychological, and professional impacts on students engaged in pro-Palestine protests, focusing on Generation Z's (Gen-Z) activism dynamics. This paper explores the significant sacrifices made by these students and even the professors supporting the pro-Palestine movement, with a focus on recent global movements. Through an in-depth analysis of printed and electronic media, the study examines the impacts of these sacrifices on the academic and personal lives of those involved. The paper highlights examples from various universities, demonstrating student activism's long-term and short-term effects, including disciplinary actions, social backlash, and career implications. The researchers also explore the broader implications of student sacrifices. The findings reveal that these sacrifices are driven by a profound commitment to justice and human rights, and are influenced by the increasing availability of information, peer interactions, and personal convictions. The study also discusses the broader implications of this activism, comparing it to historical precedents and assessing its potential to influence policy and public opinion. The emotional and psychological toll on student activists is significant, but their sense of purpose and community support mitigates some of these challenges. However, the researchers call for acknowledging the broader Impact of these sacrifices on the future global movement of FreePalestine.
Temple of Asclepius in Thrace. Excavation resultsKrassimira Luka
The temple and the sanctuary around were dedicated to Asklepios Zmidrenus. This name has been known since 1875 when an inscription dedicated to him was discovered in Rome. The inscription is dated in 227 AD and was left by soldiers originating from the city of Philippopolis (modern Plovdiv).
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...TechSoup
Whether you're new to SEO or looking to refine your existing strategies, this webinar will provide you with actionable insights and practical tips to elevate your nonprofit's online presence.
Chapter wise All Notes of First year Basic Civil Engineering.pptxDenish Jangid
Chapter wise All Notes of First year Basic Civil Engineering
Syllabus
Chapter-1
Introduction to objective, scope and outcome the subject
Chapter 2
Introduction: Scope and Specialization of Civil Engineering, Role of civil Engineer in Society, Impact of infrastructural development on economy of country.
Chapter 3
Surveying: Object Principles & Types of Surveying; Site Plans, Plans & Maps; Scales & Unit of different Measurements.
Linear Measurements: Instruments used. Linear Measurement by Tape, Ranging out Survey Lines and overcoming Obstructions; Measurements on sloping ground; Tape corrections, conventional symbols. Angular Measurements: Instruments used; Introduction to Compass Surveying, Bearings and Longitude & Latitude of a Line, Introduction to total station.
Levelling: Instrument used Object of levelling, Methods of levelling in brief, and Contour maps.
Chapter 4
Buildings: Selection of site for Buildings, Layout of Building Plan, Types of buildings, Plinth area, carpet area, floor space index, Introduction to building byelaws, concept of sun light & ventilation. Components of Buildings & their functions, Basic concept of R.C.C., Introduction to types of foundation
Chapter 5
Transportation: Introduction to Transportation Engineering; Traffic and Road Safety: Types and Characteristics of Various Modes of Transportation; Various Road Traffic Signs, Causes of Accidents and Road Safety Measures.
Chapter 6
Environmental Engineering: Environmental Pollution, Environmental Acts and Regulations, Functional Concepts of Ecology, Basics of Species, Biodiversity, Ecosystem, Hydrological Cycle; Chemical Cycles: Carbon, Nitrogen & Phosphorus; Energy Flow in Ecosystems.
Water Pollution: Water Quality standards, Introduction to Treatment & Disposal of Waste Water. Reuse and Saving of Water, Rain Water Harvesting. Solid Waste Management: Classification of Solid Waste, Collection, Transportation and Disposal of Solid. Recycling of Solid Waste: Energy Recovery, Sanitary Landfill, On-Site Sanitation. Air & Noise Pollution: Primary and Secondary air pollutants, Harmful effects of Air Pollution, Control of Air Pollution. . Noise Pollution Harmful Effects of noise pollution, control of noise pollution, Global warming & Climate Change, Ozone depletion, Greenhouse effect
Text Books:
1. Palancharmy, Basic Civil Engineering, McGraw Hill publishers.
2. Satheesh Gopi, Basic Civil Engineering, Pearson Publishers.
3. Ketki Rangwala Dalal, Essentials of Civil Engineering, Charotar Publishing House.
4. BCP, Surveying volume 1
Gender and Mental Health - Counselling and Family Therapy Applications and In...PsychoTech Services
A proprietary approach developed by bringing together the best of learning theories from Psychology, design principles from the world of visualization, and pedagogical methods from over a decade of training experience, that enables you to: Learn better, faster!
This presentation was provided by Racquel Jemison, Ph.D., Christina MacLaughlin, Ph.D., and Paulomi Majumder. Ph.D., all of the American Chemical Society, for the second session of NISO's 2024 Training Series "DEIA in the Scholarly Landscape." Session Two: 'Expanding Pathways to Publishing Careers,' was held June 13, 2024.
This presentation was provided by Rebecca Benner, Ph.D., of the American Society of Anesthesiologists, for the second session of NISO's 2024 Training Series "DEIA in the Scholarly Landscape." Session Two: 'Expanding Pathways to Publishing Careers,' was held June 13, 2024.
2. June 21, 2017 www.snipe.co.in 2
HYPER TEXT MARK UP
LANGUAGE
3. June 21, 2017 www.snipe.co.in 3
Agenda
• HTML Preface
• History of HTML
• HTML Applications
• HTML Design
• HTML Limitations
• HTML Overview
• HTML Essential Online Resources
4. June 21, 2017 www.snipe.co.in 4
Contents
• Getting Started..
• About HTML
• HTML Advantages and Disadvantages
• How to create and View an HTML document?
• Basic HTML Document Format
• The HTML Basic tags
• The Structure of HTML
• Examples on the same
5. June 21, 2017 www.snipe.co.in 5
About HTML
• Hyper Text Markup Language is used to design web pages.
• Telling the browser what to do, and what props to use.
• Hypertext means that some text in the HTML document carries a link
to a different location.
• Markup means that specific portions of a document are marked up to
indicate how they should be displayed in the browser.
• HTML carries information about the web page though, the display of
the document is solely dependent on the browser you should test
HTML code in the two most used browsers, Internet Explorer and
Netscape Communicator. With HTML we can embed various
objects such as images, video, sound in your pages.
• A series of tags that are integrated into a text document.
6. June 21, 2017 www.snipe.co.in 6
Advantages
• Loose syntax (although, being too flexible will not comply with
standards)
• Easy to use.
• Supported on almost every browser, if not all browsers.
• Widely used; established on almost every website, if not all websites.
• HTNL is increasingly used for data storage.
• Free - You need not buy any software.
• Easy to learn & code even for novice programmers.
7. June 21, 2017 www.snipe.co.in 7
Disadvantages
• It cannot produce dynamic output alone, since it is a static language.
• Sometimes, the structuring of HTML documents is hard to grasp.
• You have to keep up with deprecated tags, and make sure not to use
them.
• Deprecated tags appear because another language that works with
HTML has replaced the original work of the tag; thus the other language
needs to be learned (most of the time, it is CSS)
• Security features offered by HTML are limited.
8. June 21, 2017 www.snipe.co.in 8
What is HTMLBasic Needs
• A text editor.
• A browser.
• Note pad or word pad (A storing device and storing media)
• To open note pad click start, programs,
accessories/office then note pad or word pad like this:
• A DOCTYPE is required to validate the document
9. June 21, 2017 www.snipe.co.in 9
Basic HTML Document Format
<html>
<head><title>SNIPE</title></head>
<body>
<h1>SNIPE IT SOLUTIONS</h>
<p>www.snipe.co.in</p>
</body>
</html>
Result will look like this:
10. June 21, 2017 www.snipe.co.in 10
The Origins of the WWW
• WWW was invented by Tim Bemers-Lee at CERN(1989-1990).
• Hypertext across the internet.
• Three constituents: HTML+URL+HTTP.
• HTML is an SGML language for hypertext.
• URL is an notation for locating files on servers.
• HTTP is a high level protocol for the transfers.
The Design of HTML:
• Simple and pure design principles.
• HTML describes the logical structure of a documents.
• HTML is the lightweight file format.
• Size of the file containing is just 28 bytes.
11. June 21, 2017 www.snipe.co.in 11
The History of HTML
• 1992: HTML 1.0, Tim Bemers-Lee Original proposal.
• 1993: HTML 1.0. Some Physical Layout.
• 1994: THML 2.0, Standard with best features.
• 1995: Non-standard Netscape features.
• 1996: Competing Netscape and Explorer features.
• 1996: HTML 3.2. The browser wars end.
• 1997: HTML 4.0. Style-sheets are introduced.
• 1999: HTML 4.01.Winner version.
• 2000: XHTML 1.0. An XML version of HTML 4.01.
• 2001: XHTML 1.1, Modularization.
• 2002: XHTML 2.0, Simplified and generalized.
12. June 21, 2017 www.snipe.co.in 12
HTML Tags
• The script begins with a <HTML> and ends with </HTML>.
• These are the starting and the ending tags of the HTML document.
• Each HTML file has <HTML> as the first tag and </HTML> as the
last.
• The HTML file has a HEAD and a BODY section. The <HEAD> and
</HEAD> tags encompass the head part while the <BODY> and
</BODY> surround the BODY.
• The <TITLE> and </TITLE> inside the HEAD section, with “…"
between them. Thus, any text between the <TITLE> tags will be
displayed here.
13. June 21, 2017 www.snipe.co.in 13
HTML Tags
• Each document consists of a HEAD section surrounded by <HEAD>
and </HEAD> tags and a BODY section with <BODY> and </BODY>.
HTML tags come in pairs (usually) with the ending tag containing an
additional "/".
• Some Tags can surround other tags. This is called Nesting. In our
case, the <TITLE> tags are nested in the <HEAD>-</HEAD>tags.
Text inside <TITLE> tags is displayed on the browser Title Bar.
The text between the <BODY> tags is displayed inside the browser
window.
14. June 21, 2017 www.snipe.co.in 14
What is HTML(Contd..)
Tags are:
• Surrounded with angle brackets like this : <b> or <i>.
• Most tags come in pairs: <p>,<br>,<li><ol> tags…
• The first tag turns the action on, and the second turns it off.
• The second tag (off switch) starts with a forward slash. <b>SNIPE</B>
• Can embedded, for instance, to do this:
<head><title>Snipe</head></title> Wrong Syntax.
<head><title>Snipe</title></head> Write Syntax.
• Not case sensitivity.
• Many tags have attributes.<p align=“center”> Centers the paragraph.
• Some browsers don’t support the some tag and some attributes.
15. June 21, 2017 www.snipe.co.in 15
(Contd..)
Structure Tags:
<html>…</html> opens and closes all HTML documents.
<head>…</head> Encloses document headers.
<title>…</title> Contains documents title.
<body>…</body> Body of the HTML documents.
Character Formatting:
<b>…</b> Bold Text.
<i>…</i> Italic Text.
<u>…</u> Underlined Text.
<center>…</center> Center Text.
<p>…</P> Page even line break.
<font>…</font> Font Text Size 1- 7.
<ol>…</ol> Ordered List Text.
<ul>…</ul> Unordered list.
16. June 21, 2017 www.snipe.co.in 16
(Contd..)
Self-closing Tags:
Tags that, by definition, contain nothing between the opening and
closing tags must self-close with a space and forward slash:
Images <img src="something.jpg" />
Carriage Return <br />
Horizontal Breaking Line <hr />
More Tags:
<br/> A line break.
<li>…</li> A list items.
17. June 21, 2017 www.snipe.co.in 17
(Contd..)
• Clear =“…” Causes a text to stop flowing around images-possible
values are Left, Right and All.
<nobr>…</nobr> Prevents text from wrapping at the end of the line.
<blockquote>…</blockquote> Used for long quotes or citations.
<center>…</center> Center all between the tags.
<font>…</font> Font Text Size 1- 7.
• Size=“…” Specifies the font size of the text (Attributes).
• Color=“…” Specifies the color of text.
• / Means closing tag.
19. June 21, 2017 www.snipe.co.in 19
Attributes
• TEXT=“…” Sets Text Color.
• BGCOLOR=“…” Sets Background Color.
• VLINK=“…” Sets Color of visited links.
• LINK=“…” Sets Color of unvisited links.
Headings:
<h1>…</h1> to <h6>…</h6> Used to set size of the heading.
Value with 1 is largest and 6 is smallest.
Paragraphs:
<p>…</p> Used to denote plain paragraph.
20. June 21, 2017 www.snipe.co.in 20
Links
• Use <a href=“filename/url”></a> tags.
• <a>…</a> Creates a link to another document or anchor.
• Hreff=“..” The URL of the document which a given document is
linked.
• Name=“…” Denotes an Anchor name.
21. June 21, 2017 www.snipe.co.in 21
(Contd..)
Attribute for <A ...> NAME = "text string“.
• NAME gives the anchor a name. Other links target the anchor using
that name. This allows you to link to specific places within the page.
• For example, suppose you have a long page with a section about
purchasing. You could create a named anchors in the sub-header for
that section like this:
<H2><A NAME="purchasing">Purchasing</A></H2>
• <A HREF="anameexample.html#purchasing">Purchasing</A>
• The named anchor itself doesn't have a hash mark.
<A NAME="purchasing">
• A link to the named anchor always has a hash mark.
<A HREF="#purchasing">
22. June 21, 2017 www.snipe.co.in 22
(Contd..)
Lists:
<ol>…</ol> Ordered list or Numbered list.
<ul>…</ul> Unordered list or Unnumbered list.
<li>…</li> List items.
Comments:
<!...> Comment which is not displayed in browser.
It is found in <body>tag.
<hr>…</hr> Horizontal Rule.
Size=“…” To show thickness of the line in pixels.
• Width=“…” The width of the rule or percent.
• Align=“…” Directs the values Left, Right and Center.
• Noshade=“…” Causes the rule to be drawn as a solid black line.
23. June 21, 2017 www.snipe.co.in 23
Images
<img> Used to place an image into a document. (Attributes)
• src=“…” Information on location of the image.
• alt=“…” Alternate text will be displayed should an image be missing.
• align=“…” Determines horizontal image alignment either left or right.
• valign=“…” Determines vertical image alignment either top, down or
middle.
• width=“…” The width of the pixels of an image.
• height=“…” The height of the pixels of an image.
• border=“…” Creates a border around a linked image.
• bordercolor=“....” For border color specification.
24. June 21, 2017 www.snipe.co.in 24
• Tables are more properly treated as a method for expressing structural
relations.
• Tables can be used to indicate the relationships between input fields
and their explanations within a Form.
• <table>…</table> Creates a tables.
Attributes:
• Border=“..” - Specify table should have border also indicating width.
• Use ROWSPAN & CELLSPAN to join cells.
• BGCOLOR to give background color to tables, rows.
• Cell spacing=“…” - Specifies amount of space between the cells in table.
• width’=“…” - Specifies the width of the table either in pixels or in percent.
• <tr>…</tr> - Shows the table rows.
• <th>…</th> - To use table heads.
• <td>…</td> - Shows the table data cell.
Tables
25. June 21, 2017 www.snipe.co.in 25
Frames
• This display more than one HTML document in the same browser
window.
• Each HTML document is called a frame, and each frame is
independent of the others.
• <frameset>…</frameset> The main container for a frame document.
• cols=‘..” - Specifies a frames columns size either in pixels/percent.
• rows=“…” - Specifies a frames row size either in pixels/percent.
<frame> Contains information about single frame. (Attributes)
• src=“…” - The URL of a document to be displayed in the frame.
• scrolling=“…” - Indicates whether a frame has scroll bars.
• marginheight=“…” - Specifies the frame margin’s height in pixels.
• marginwidth=“…” - Specifies the frame margin’s width in pixels.
<noframe>…</noframe> Used to display the text when viewed with non-frames
capable browser.
26. June 21, 2017 www.snipe.co.in 26
Colors
• Colors can be produced for a number of page elements using the color
names or RGB hexadecimal codes indicated in each of the samples.
• The use of HTML elements and attributes for specifying color is
deprecated.
Color names:
<font color = “blue”>
Changing the Background color:
<body bgcolor=#19378a>
Changing Text color:
<body bgcolor= # 19378a text = # fffff link = fffff66 vlink= # 66ffff>
27. June 21, 2017 www.snipe.co.in 27
HTML Events
HTML added the ability to let events trigger actions in a browser, like
starting a JavaScript when a user clicks on an element.
<body> and <frameset> Events:
Attribute Value Description
onload script The onload event occurs when the user agent finishes
loading a window or all frames within a frameset.
onunload script The onunload event occurs when the user agent removes a
document from a window or frame.
28. June 21, 2017 www.snipe.co.in 28
Form Events:
The onchange event occurs when a control loses the input
focus and its value has been modified since gaining focus.
scriptonchange
The onblur event is triggered when an element loses focus
either by the pointing device or by tabbing navigation.
scriptonblur
DescriptionValueAttribute
The onselect event is triggered when a user selects some text in
a text field.
scriptonselect
The onreset event occurs when a form is reset.scriptonreset
The onfocus event occurs when an element receives focus
either by the pointing device or by tabbing navigation.
scriptonfocus
The onsubmit event is triggered when a form is submitted.scriptonsubmit
(Contd..)
29. June 21, 2017 www.snipe.co.in 29
Image Events:
Attribut
e
Value Description
onabort script Occurs if loading of picture is aborted. This event occurs only
in <img> tag.
Keyboard Events:
The onkeypress event occurs when a key is pressed and
released over an element.
scriptonkeypress
The onkeydown event is triggered when a key is pressed
down over the element.
scriptonkeydow
n
DescriptionValueAttribute
The onkeyup event occurs when a key is released over an
element.
scriptonkeyup
(Contd..)
30. June 21, 2017 www.snipe.co.in 30
Mouse Events:
Attribute Value Description
onclick script The onclick event is triggered when the mouse button is
clicked over the element.
ondblclick script The ondblclick event occurs when the pointing device
button is double clicked over an element.
onmousedown script The onmousedown event is triggered when the mouse
button is pressed over the element.
onmousemove script The onmousemove event occurs when the pointing
device is moved while it is over an element.
onmouseout script The onmouseout event is triggered when the mouse is
moved away from the element.
onmouseover script The onmouseover event is triggered when the mouse is
moved onto the element.
onmouseup script The onmouseup event occurs when the pointing device
button is released over an element.
(Contd..)
31. June 21, 2017 www.snipe.co.in 31
Example for headings and paragraphs
<html>
<head>
<title>Overall Structure of HTML</title>
</head>
<body bgcolor=“lime”>
<h1>2010</h1>
<p>UPA</p>
</body>
</html>
Result:
32. June 21, 2017 www.snipe.co.in 32
Example for DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Result:
33. June 21, 2017 www.snipe.co.in 33
Examples for links and images
<html>
<a href=“http://kpsc.kar.nic.in”> Please visit this link for more </a>
<p>
An image of State Governments Head Office:
<img src=“http://kpsc.kar.nic.in/build1a.jpg” width=“100” Height =“50” />
</p>
<p>
VIDANA SOUDA:
<img src=“http://kpsc.kar.nic.in/build1a.jpg” width=“100” Height =“ 75” />
</p>
</body>
</html>
35. June 21, 2017 www.snipe.co.in 35
Example for Text Formatting
<html>
<body>
<p><b>Govt pushes China model for 'Eastern Green Revolution'</b></p>
<p><strong>Satyam's Rajus siphoned off Rs 2,743 cr: CBI</strong></p>
<p><big>Govt slashes UIDAI budget by over 50 per cent</big></p>
<p><em>Afghanistan sees Pakistan border trade deal in weeks</em></p>
<p><i>Google's Schmidt undaunted by Apple or Facebook</i></p>
<p><small>AIADA seeks 2,923 acres for expansion at three places</small></p>
<p><sub>Rel Life Insurance targets 10% market share in 3 yrs</sub> and
<sup>Auto sector profit growth on track</sup></p>
</body>
</html>
37. June 21, 2017 www.snipe.co.in 37
Example for Line breaks and pre formats
<html>
<body>
<pre>
Germans want 'Paul' to be killed, Spain is ready to adopt him, and now PETA is
demanding the release of the psychic octopus.
</pre>
<P>Germany clinch third in stunning playoff<br/>in 2010 FIFA</P>
<p>Display computer code:</p>
<pre>
H<sub>2</sub>O
E = mc<sup>2</sup>
<SPAN lang="fr">M<sup>lle</sup> Dupont</SPAN>
</pre>
</body>
</html>
39. June 21, 2017 www.snipe.co.in 39
Example for all Text Formatting
<html>
<body>
<p>The <abbr title="Kannada Sahitya Parishattu">KASAPA</abbr>
was founded in <del>1914</del> <ins>1915</ins>!
</p>
<p>May I Know this <acronym title="Kuppalli Venkatappa Puttappa">
KUVEMPU</acronym>?
</p>
<bdo dir="rtl">Kannada Sahitya Sammelana</bdo>
<blockquote>Kannada sahitya Parishattu.</blockquote>
<p><b>Note:</b>73th Kannada Sahithya Sammelana-Shimoga.</p>
A short quotation:<q>Prof. Nissar Ahmed</q>
41. June 21, 2017 www.snipe.co.in 41
Example for all styles
<html>
<body style="background-color:skyblue">
<h1 style="background-color:yellow">
INDIAN SPACE RESEARCH ORGANIZATION </h1>
<p style="text-align:center;font-family:verdana;color:lime">
Dr Vikram Sarabhai considered as the father of Indian Space Programme.</p>
<p style="font-family:times;color:green">
Space science missions for better understanding of solar system and universe</p>
<p style="font-size:30px">
The GSLV-III or Geosynchronous Satellite Launch Vehicle Mark III </p>
</body>
</html>
46. June 21, 2017 www.snipe.co.in 46
Example for all links and images
<html>
<body>
<p>An image:</p>
<img style="float: left; padding: 0px 10px 10px 0px;"
src="http://l.yimg.com/t/i/in/news/news15/images/astrology/Taurus.jpg"
width="50" height="50" border="0" alt="">
<p><p>An image from another folder:</p>
<p><img src="http:// www.search-this.com/ wp-content/ themes/big
blue/images/3logo.gif" align="bottom: alt="company logo" width="175"
height="100" /></p>
<p>An image from another folder:</p>
<p><img src="http://www.search-this.com/wp-content/themes/big-
blue/images/3logo.gif" align="top"
alt="company logo" width="175" height="100" /></p>
<p>An image:</p>
<img src="http://www.search-this.com/wp-content/themes/big-
blue/images/abc.gif"
title="abc" alt="abc" width="106" height="106" />
</body>
</html>
47. June 21, 2017 www.snipe.co.in 47www.snipe.co.in 47
Result:
(Contd..)
48. June 21, 2017 www.snipe.co.in 48
Example for Tables
www.snipe.co.in 48
<html>
<body>
<h4>Example for One column:</h4>
<table border="1"><tr><td>A</td></tr>
</table>
<h4>EX: For One row and three columns:</h4>
<table border="1"><tr><td>A</td><td>B</td><td>C</td></tr>
</table>
<h4>EX: For Two rows and three columns:</h4>
<table border="1">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
</table>
<h4>EX: For Normal border:</h4>
<table border="1">
<tr><td>B</td><td>Row</td></tr>
</table>
49. June 21, 2017 www.snipe.co.in 49www.snipe.co.in 49
<h4>EX: For a thick border:</h4>
<table border="8">
<tr><td>T</td><td>Row</td></tr>
<tr><td>S</td><td>Row</td></tr>
</table>
<h4>EX: For very thick border:</h4>
<table border="15">
<tr><td>M</td><td>Row</td></tr>
<tr><td>N</td><td>Row</td></tr>
</table>
<h4>EX: For no borders:</h4>
<table><tr><td>G</td><td>H</td><td>I</td></tr>
<tr><td>J</td><td>K</td><td>L</td></tr>
</table>
</body>
</html>
(Contd..)
50. June 21, 2017 www.snipe.co.in 50
(Contd..)
www.snipe.co.in 50
Result:
51. June 21, 2017 www.snipe.co.in 51
Example for more Tables
www.snipe.co.in 51
<html>
<body>
<h4>Ex for Table headers:</h4>
<table border="1">
<tr><th>Name</th><th>Age</th><th>Sex</th></tr>
<tr><td>Laxmi Mittal</td><td>50</td><td>Male</td></tr>
</table>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr><th>Name</th><th colspan="2">FORBS Richest men's List</th></tr>
<tr><td>Mukesh Ambani</td><td>No:2(2009)</td><td>No:1(2010)</td></tr>
</table>
<h4>Ex: For Vertical headers:</h4>
<table border="1"><tr><th>Name:</th><td>Serena Williams</td></tr>
<tr><th>Age:</th><td>28</td></tr><tr><th>Region:</th><td>USA</td></tr>
<tr><th>Fame</th><td>No:1 Tennis Player</td></tr>
</table>
52. June 21, 2017 www.snipe.co.in 52www.snipe.co.in 52
<h4>Cell that spans two rows:</h4>
<table border="1"><tr><th>Name:</th><td>Bill Gates</td></tr>
<tr><th rowspan="2">Rankings:</th><td>(2009)No:1</td></tr>
<tr><td>(2010)No:2</td></tr>
</table>
<h4>Tags in side the table:</h4>
<table border="1"><tr><td>WELCOME TO SNIPE IT SOLUTIONS</td>
<td>Cell contains another
table:<tableborder="1"><tr><td>3.14</td><td>48.10</td></tr>
<tr><td>7.90</td><td>9.0</td></tr>
</table>
<tr><td>Cell contains a list<ol><li>SPAIN</li>
<li>NETHERLAND</li><li>GERMANY</li><li>URUGUAE</li></ol></td>
<td><p>FIFA World Cup 2010 - SPAIN crowned world champions</p>
<p>Brazil to Host 2014 FIFA Soccer World Cup</p>
</td></tr>
</body>
</html>
(Contd..)
53. June 21, 2017 www.snipe.co.in 53
(Contd..)
www.snipe.co.in 53
Result:
54. June 21, 2017 www.snipe.co.in 54
Example for more Tables
June 21, 2017 www.snipe.co.in 54
<html>
<body>
<h3>Without cellpadding:</h3>
<tableborder="1"><tr><td>OLYMPIC</td><td>GAME</td></tr>
<tr><td>COMMNWEALTH</td><td>GAME</td></tr>
</table>
<h3>With cellpadding:</h3>
<table border="1" cellpadding="10">
<tr><td>CRICKET</td><td>GAME</td></tr>
<tr><td>TENNIS</td><td>GAME</td></tr>
</table>
<h4>Without cellspacing:</h4>
<table border="1">
<tr><td>First</td><td>Row</td></tr>
<tr><td>Second</td><td>Row</td></tr></table>
<h4>With cellspacing:</h4><table border="1" cellspacing="10">
<tr><td>GOLF</td><td>CLUB</td></tr>
<tr><td>HOCKY</td><td>CLUB</td></tr>
</table>
57. June 21, 2017 www.snipe.co.in 57
(Contd..)
June 21, 2017 www.snipe.co.in 57
Result:
58. June 21, 2017 www.snipe.co.in 58
Example for more Lists
June 21, 2017 www.snipe.co.in 58
<html>
<body>
<h4>Example for an Unordered List:</h4>
<ul><li>C</li><li>C++</li><li>JAVA</li></ul>
<h4>Example for an ordered List:</h4>
<ol><li>C</li><li>C++</li><li>JAVA</li></ol>
<h4>Numbered list:</h4>
<ol><li>Alpa</li><li>Beta</li><li>Gama</li><li>Theta</li></ol>
<h4>Letters list:</h4>
<ol type="A"><li>Bird Flue</li><li>Antrax</li> <li>Dengue</li><li>H1N1</li></ol>
<h4>Lowercase letters list:</h4><ol type="a"><li>Shark</li><li>Elephant</li>
<li>Bull</li><li>Cow</li></ol>
<h4>Roman numbers list:</h4>
<ol type="I"><li>Itai-Itai</li><li>Goiter</li><li>Influenza</li><li>Rabies</li></ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
59. June 21, 2017 www.snipe.co.in 59June 21, 2017 www.snipe.co.in 59
<li>Endoscopy</li><li>Laparoscopy</li><li>Radiotherapy</li><li>Mammography
</li></ol>
<h4>Ex: for Different bullets list:</h4><ul
type="disc"><li>ART</li><li>H1N1</li></ul>
<ul type="circle"><li>Bacteria</li><li>Virus</li></ul>
<ul type="square"><li>Diabetic</li><li>Asthma</li></ul>
<h4>Ex: for nested List:</h4><ul><li>China</li><li>India<ul><li>South India</li>
<ul><li>Karnataka</li><li>Andra Pradesh</li>
<li>Tamil Nadu</li><li>Kerala</li></ul>
<li>North India</li></ul></li><li>Africa</li></ul>
<h4>Ex: for a Definition List:</h4>
<dl><dt>Cricket</dt><dd>Outdoor Game</dd><dt>Chess</dt><dd>Indoor
Game</dd></dl>
</body>
</html>
(Contd..)
60. June 21, 2017 www.snipe.co.in 60
(Contd..)
June 21, 2017 www.snipe.co.in 60
Result:
61. June 21, 2017 www.snipe.co.in 61
Example for more Lists
June 21, 2017 www.snipe.co.in 61
<html>
<body>
<h3>Example for Text fields:</h3>
<form action="">
First name: <input type="text" name="firstname" /><br />
Pet name: <input type="text" name="Petname" /></form>
<h4>Ex: for checkbox:</h4><form action="">
<input type="checkbox" name="Land" value="land" /> I have a Land<br />
<input type="checkbox" name="Complex" value="Complex" /> I have a Complex
</form>
<h4>Ex for Radio buttons:</h4>
<form action="">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female</form>
<h4>Ex: for Dropdown list:</h4>
<form action=""><select name="cars">
62. June 21, 2017 www.snipe.co.in 62June 21, 2017 www.snipe.co.in 62
<option value="Mr.Raghu">Mr.Raghu</option>
<option value="Mr.Mallikarjun">Mr.Mallikarjun</option>
<option value="Mr.Halesh">Mr.Halesh</option></select></form>
<h4>Ex: for Text area:<h4>
<textarea rows="10" cols="30"> The Bangalore Metro Rail finally tookshape with
the Karnataka Government clearing the project in March, 2005 and the Union
Government giving its approval in April, 2006.</textarea>
<h4>Ex: for Text Button<h4>
<form action="">
<input type="button" value="SNIPE!"></form>
<form action=""><fieldset><legend>
Personal data:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" /></fieldset>
</form>
</body>
</html>
(Contd..)
67. June 21, 2017 www.snipe.co.in 67
Example of different framesets
top
bottom
<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset>
75. June 21, 2017 www.snipe.co.in 75
(Contd..)
June 21, 2017 www.snipe.co.in 75
<html>
<head>
<style type="text/css">
h1 { color:red; }
h2 { color:blue; }
p { color:green; }
</style>
</head>
<body>
<h1>'Infosys suffers fall in profits'</h1>
<h2>'Low vitamin D 'Parkinson's link'</h2>
<p>EU agrees fusion shortfall funds</p>
<a href="http://www.incredibleindia.com" style="text-decoration:none">Visit
incredibleindia.com!</a>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body><h1>China web filter hit by problems</h1></body>
</body>
</html>
76. June 21, 2017 www.snipe.co.in 76
(Contd..)
June 21, 2017 www.snipe.co.in 76
Result will look like this:
77. June 21, 2017 www.snipe.co.in 77
Examples for Meta tags
June 21, 2017 www.snipe.co.in 77
<html>
<head>
<meta name="author" content="Karvalo" />
<meta name="revised" content="2010/06/20" /></head>
<meta name="description" content="Free Web tutorials on HTML, CSS, XML">
<meta name="keywords" content="HTML, CSS, XML"></head><body>
<p>The meta elements on this page identifis the author and the revise date.</p>
<meta http-equiv="Refresh" content="5;url=http://www.kasapa.org" />
</head>
<body>
<h1>Have a look!</h1><h2>The new URL is: <a
href="http://www.kasapa.org">http://www.kasapa.org</a></h2>
<p>You will be redirected to the new address in five seconds.</p>
</body>
</html>
78. June 21, 2017 www.snipe.co.in 78June 21, 2017 www.snipe.co.in 78
(Contd..)
Result will look like this:
79. June 21, 2017 www.snipe.co.in 79
Examples for HTML ID
June 21, 2017 www.snipe.co.in 79
<html>
<head>
<script type="text/javascript">
function change_header() {
document.getElementById ("myHeader").innerHTML="Have a
Nice day!";
}
</script>
</head>
<body>
<h1 id="myHeader">Welcome to Snipe!</h1>
<button onclick="change_header()">Change text</button>
</body>
</html>
80. June 21, 2017 www.snipe.co.in 80
Example for Meta tags
June 21, 2017 www.snipe.co.in 80
Result will look like this: