The document discusses various topics related to the Document Object Model (DOM) including:
- The DOM defines the logical structure of documents and allows programs to access and manipulate HTML/XML documents.
- It represents documents as trees of nodes that can be traversed and manipulated.
- The history of the DOM is intertwined with the "browser wars" and development of JavaScript.
- There are different levels of the DOM specification with Level 1 providing core/HTML interfaces and later levels adding functionality.
IT2255 Web Essentials - Unit II Web Designingpkaviya
HTML - Form Elements - Input types and Media elements - HTML 5 - CSS3 - Selectors, Box Model, Backgrounds and Borders, Text Effects, Animations, Multiple Column Layout, User Interface.
This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
Most designers and front-end developers know how to use CSS 3 features on their DotNetNuke websites. From rounded corners to media queries, CSS 3 is now widely used, but there are many additional useful CSS features you may not be aware of. We will discuss some lesser-known CSS properties—both decorative and functional—and demonstrate how to best integrate them into your skins, containers, and modules.
IT2255 Web Essentials - Unit II Web Designingpkaviya
HTML - Form Elements - Input types and Media elements - HTML 5 - CSS3 - Selectors, Box Model, Backgrounds and Borders, Text Effects, Animations, Multiple Column Layout, User Interface.
This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
Most designers and front-end developers know how to use CSS 3 features on their DotNetNuke websites. From rounded corners to media queries, CSS 3 is now widely used, but there are many additional useful CSS features you may not be aware of. We will discuss some lesser-known CSS properties—both decorative and functional—and demonstrate how to best integrate them into your skins, containers, and modules.
Sharpen existing tools or get a new toolbox? Contemporary cluster initiatives...Orkestra
UIIN Conference, Madrid, 27-29 May 2024
James Wilson, Orkestra and Deusto Business School
Emily Wise, Lund University
Madeline Smith, The Glasgow School of Art
Acorn Recovery: Restore IT infra within minutesIP ServerOne
Introducing Acorn Recovery as a Service, a simple, fast, and secure managed disaster recovery (DRaaS) by IP ServerOne. A DR solution that helps restore your IT infra within minutes.
Have you ever wondered how search works while visiting an e-commerce site, internal website, or searching through other types of online resources? Look no further than this informative session on the ways that taxonomies help end-users navigate the internet! Hear from taxonomists and other information professionals who have first-hand experience creating and working with taxonomies that aid in navigation, search, and discovery across a range of disciplines.
This presentation by Morris Kleiner (University of Minnesota), was made during the discussion “Competition and Regulation in Professions and Occupations” held at the Working Party No. 2 on Competition and Regulation on 10 June 2024. More papers and presentations on the topic can be found out at oe.cd/crps.
This presentation was uploaded with the author’s consent.
0x01 - Newton's Third Law: Static vs. Dynamic AbusersOWASP Beja
f you offer a service on the web, odds are that someone will abuse it. Be it an API, a SaaS, a PaaS, or even a static website, someone somewhere will try to figure out a way to use it to their own needs. In this talk we'll compare measures that are effective against static attackers and how to battle a dynamic attacker who adapts to your counter-measures.
About the Speaker
===============
Diogo Sousa, Engineering Manager @ Canonical
An opinionated individual with an interest in cryptography and its intersection with secure software development.
This presentation, created by Syed Faiz ul Hassan, explores the profound influence of media on public perception and behavior. It delves into the evolution of media from oral traditions to modern digital and social media platforms. Key topics include the role of media in information propagation, socialization, crisis awareness, globalization, and education. The presentation also examines media influence through agenda setting, propaganda, and manipulative techniques used by advertisers and marketers. Furthermore, it highlights the impact of surveillance enabled by media technologies on personal behavior and preferences. Through this comprehensive overview, the presentation aims to shed light on how media shapes collective consciousness and public opinion.
3. Rounded Corners:
Rounded corners are used to add special colored corner
to body or text by using the border-radius property.
Rounded corners are used to add special colored corner
to body or text by using the border-radius property.
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
4. Value & Description:
Border-radius
Use this element for setting four boarder radius property
Border-top-left-radius
Use this element for setting the boarder of top left corner
Border-top-right-radius
Use this element for setting the boarder of top right corner
Border-bottom-right-radius
Use this element for setting the boarder of bottom right
corner
Border-bottom-left-radius
Use this element for setting the boarder of bottom left
corner
7. <p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners2">Rounded corners!</p>
</body>
</html>
Result:
Rounded Corners!
8. Each Corner Property:
The border-radius property can have from one to four
values. Here are the rules:
Four values - border-radius: 15px 50px 30px 5px;
First value applies to top-left corner.
Second value applies to top-right corner.
Third value applies to bottom-right corner.
Fourth value applies to bottom-left corner.
13. CSS Colors:
Colors are specified using predefined color names, or RGB,
HEX, HSL, RGBA, HSLA values.
Color Names:
In HTML, a color can be specified by using a color name:
14. Background Color:
You can set the background color for HTML elements:
Example:
<h1 style="background-color : Dodger Blue ;">
Hello World</h1>
15. Text Color:
You can set the color of text:
Hello World
Example:
<h1 style="color:Tomato;">Hello World</h1>
Border color:
You can set the color of borders:
16. Example:
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
Color Values:
In HTML, colors can also be specified using RGB values, HEX
values, HSL values, RGBA values, and HSLA values.
RGB Value:
In HTML, a color can be specified as an RGB value, using
this formula.
Each parameter (red, green, and blue) defines the intensity
of the color between 0 and 255.
17. For example, rgb (255, 0, 0) is displayed as red,
because red is set to its highest value (255) and the
others are set to 0.
18. HEX Value:
In HTML, a color can be specified using a
hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are
hexadecimal values between 00 and ff (same as
decimal 0-255).
For example, #ff0000 is displayed as red, because red
is set to its highest value (ff) and the others are set to
the lowest value (00).
19. HSL Value:
In HTML, a color can be specified using hue, saturation,
and lightness (HSL) in the form:
HSL(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red,
120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of
gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither
light or dark, 100% is white
20. RGBA Value:
RGBA color values are an extension of RGB color values with an
alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba (red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (not transparent at all).
21. HSLA Value:
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (not transparent at all).
22. BOX SHADOW:
#box-shadow defines the shadow of the element.
default box-shadow: none;
Removes any box-shadow that was applied to the element.
box-shadow: 2px 6px;
You need at least two values:
the first is the horizontal offset
the second is the vertical offset
HELLO WORLD
23. The shadow color will be inherited from the text color.
box-shadow: 2px 6px red;
You can define a color as the last value.
As with colors, you can use color names, hexadecimal, rgb,
hsl...
box-shadow: 2px 4px 10px red;
24. The optional third value defines the blur of the shadow.
The color will be diffused across 10px in this example, from
opaque to transparent.
box-shadow: 2px 4px 10px 4px red;
The optional fourth value defines the spread of the shadow.
The spread defines how much the shadow should grow: it
enhances the shadow.
25. INTRODUCTION TO THE DOCUMENT
OBJECT MODEL
The Document Object Model (DOM) is a programming
interface for HTML and XML(Extensible markup language)
documents. It defines the logical structure of documents and
the way a document is accessed and manipulated.
DOM is a way to represent the webpage in the structured
hierarchical way so that it will become easier for
programmers and users to glide through the document.
With DOM, we can easily access and manipulate tags, IDs,
classes, Attributes or Elements using commands or methods
provided by Document object.
26. Structure of DOM:
DOM can be thought of as Tree or Forest(more than
one tree). The term structure model is sometimes used to
describe the tree-like representation of a document. One
important property of DOM structure models is structural
isomorphism: if any two DOM implementations are used
to create a representation of the same document, they will
create the same structure model, with precisely the same
objects and relationships.
27. Properties of DOM:
Window Object: Window Object is at always at top of
hierarchy.
Document object: When HTML document is loaded into a
window, it becomes a document object.
Form Object: It is represented by form tags.
Link Objects: It is represented by link tags.
Anchor Objects: It is represented by a href tags.
Form Control Elements:: Form can have many control
elements such as text fields, buttons, radio buttons, and
checkboxes, etc.
28. Methods of Document Object:
write(“string”): writes the given string on the document.
getElementById(): returns the element having the given
id value.
getElementsByName(): returns all the elements having
the given name value.
getElementsByTagName(): returns all the elements
having the given tag name.
getElementsByClassName(): returns all the elements
having the given class name.
29. History of DOM:
The history of the Document Object Model is
intertwined with the history of the “browser wars" of the
late 1990s between Netscape Navigator and Microsoft
Internet Explorer as well as with that of JavaScript and
Jscript, the first scripting languages to be widely
implemented in the JavaScript engines of web browsers.
30. Levels of DOM:
Level 0: Provides low-level set of interfaces.
Level 1: DOM level 1 can be described in two parts: CORE
and HTML.
CORE provides a low-level interfaces that can be used to
represent any structured document.
HTML provides high-level interfaces that can be used to
represent HTML document.
Level 2 : consists of six specifications: CORE2, VIEWS,
EVENTS, STYLE, TRAVERSAL and RANGE.
CORE2: extends functionality of CORE specified by DOM
level 1.
31. VIEWS: views allows programs to dynamically access
and manipulate content of document.
EVENTS: Events are scripts that is either executed by
browser when user reacts to web page.
STYLE: allows programs to dynamically access and
manipulate content of style sheets.
TRAVERSAL: allows programs to dynamically traverse
the document.
RANGE: allows programs to dynamically identify a range
of content in document.
32. Level 3: consists of five different specifications: CORE3,
LOAD and SAVE, VALIDATION, EVENTS, and XPATH.
CORE3: extends functionality of CORE specified by DOM
level 2.
LOAD and SAVE: allows program to dynamically load the
content of XML document into DOM document and save the
DOM Document into XML document by serialization.
VALIDATION: allows program to dynamically update the
content and structure of document while ensuring document
remains valid.
EVENTS: extends functionality of Events specified by DOM
Level 2.
XPATH: XPATH is a path language that can be used to access
DOM tree.