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.
2. Unit II – Web Designing
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.
3. HTML
• HTML stands for Hyper Text Markup Language.
• Hypertext is simply a piece of text that works as a link.
• Markup Language is language of writing layout within documents.
• HTML is not a case sensitive language.
• The extension of the HTML program should be either html or htm.
Comments in HTML
• <!-- It is a comment statement -->
4. HTML 5.0
• The HTML 5.0 is the fifth revision of HTML standard.
Features of HTML 5.0
• The HTML doctype is just impossible to memorize (!DOCTYPE html
PUBLIC…). Hence new html doctype is <!DOCTYPE html>
• New graphic elements such as <canvas> and <svg>
• Supports multimedia elements such as <audio> and <video>
• Supports <header>, <footer>, <article> and <section>
• Supports new form controls such as number, date, time, calendar and range
• Rich set of API for geolocations, HTML Drag and Drop, Local Storage,
Application cache and so on.
5. HTML Vs. HTML 5.0
HTML HTML 5.0
The DOCTYPE declaration is much longer
such as <!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
1.dtd">
The DOCTYPE declaration is simple
<!DOCTYPE html>
<audio> and <video> tags are not supported
<audio> and <video> tags are supported for
playing audio and video files
Finding out geographic location is
impossible using HTML
The HTML5 supports the API for identifying
the geographic location
It supports the tag such as <applet>, <big>,
<center>, <font>. <frame>, <strike>
The tags that are removed from HTML5 are
<applet>, <big>, <center>, <font>. <frame>,
<strike>
JavaScript runs in same thread as browser
interface.
It allows JavaScript to run in background
There is no support for <canvas> The <canvas> tag is for 2D drawing
It needs external plugins such as flash The need for external plugin is reduced
6. Form Elements
• The HTML <form> element is used to create an HTML form to get user
input.
• The <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.
• <form> Attributes
Attribute Description
action Specifies where to send the form-data when a form is submitted
method Specifies the HTTP method to use when sending form-data
name Specifies the name of the form
target Specifies where to display the response that is received after submitting the form
7. Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
8. Input Types
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
<input type=”hidden"> Used to define the hidden element
<input type=”file"> Defines a file select field and Browse button to upload a file
<input type=“number”> Control for the input of numeric values
<input type=“range”> Control for the input of numeric values
<input type=“color”> Provide a user interface element that lets a user specify a color
<input type=“date”> Creates a general data input control (YYYY-MM-DD)
<input type=“time”> Creates a time input control (HH:MM:SS)
9. Cascading Style Sheets (CSS3)
• CSS is used to control the style of a web document.
• CSS is the acronym for "Cascading Style Sheet".
Syntax
Example
p
{
font-family: verdana;
font-size: 20px;
}
10. CSS3 – Selectors
• CSS selectors are used to "find" (or select) the HTML elements you want to
style.
CSS element selector: The element selector selects HTML elements based on
the element name. Example: p { text-align: center; color: red; }
CSS id selector: The id selector uses the id attribute of an HTML element to
select a specific element. Example: #para1 { text-align: center; color: red;}
CSS class selector: The class selector selects HTML elements with a specific
class attribute. Example: .center {text-align: center; color: red;}
p.center { text-align: center; color: red;}
<p class="center">This paragraph refers to two classes.</p>
11. CSS3 – Selectors
CSS universal selector: The universal selector (*) selects all HTML elements
on the page.
Example:
* {
text-align: center;
color: blue;
}
12. CSS3 – Selectors
CSS grouping selector: The grouping selector selects all the HTML elements
with the same style definitions.
Example:
h1, h2, p {
text-align: center;
color: red;
}
13. CSS3 – Selectors
Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .one Selects all elements with class=”one"
element.class p.one Selects only <p> elements with class=”one"
* * Selects all elements
element p Selects all <p> elements
element,elem
ent,..
div, p Selects all <div> elements and all <p>
elements
14. CSS3 – Box Model
• In CSS, the term "box model" is used when talking about design and
layout.
• It consists of margins, borders, padding, and the actual content.
15. CSS3 – Box Model
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Properties
• padding-top
• padding-right
• padding-bottom
• padding-left
• Values
• length: Specifies a padding in px, pt, cm, etc.
• %: Specifies a padding in % of the width of the containing element
• inherit: Specifies that the padding should be inherited from the parent
element
16. CSS3 – Box Model
• Border - The border-style property specifies what kind of border to
display.
• The border-style property can have from one to four values (top, right,
bottom, and left).
• border-radius property is used to add rounded borders to an element
• Values
• dotted: Defines a dotted border
• dashed: Defines a dashed border
• solid: Defines a solid border
• double: Defines a double border
• groove: Defines a 3D grooved border. The effect depends on the border-color
value
• ridge: Defines a 3D ridged border. The effect depends on the border-color value
• inset: Defines a 3D inset border. The effect depends on the border-color value
• outset: Defines a 3D outset border. The effect depends on the border-color value
• none: Defines no border
• hidden: Defines a hidden border
18. CSS3 – Box Model
• Margin - Clears an area outside the border. The margin is transparent.
• Properties
• margin-top
• margin-right
• margin-bottom
• margin-left
• Values
• auto: The browser calculates the margin
• length: Specifies a margin in px, pt, cm, etc.
• %: Specifies a margin in % of the width of the containing element
• inherit: Specifies that the margin should be inherited from the parent
element
19. CSS3 – Backgrounds
• The CSS background properties are used to add background effects for
elements.
• Properties
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• Opacity/Transparency: The opacity property specifies the
opacity/transparency of an element. It can take a value from 0.0 - 1.0.
div {
background-color: green;
opacity: 0.3;
}
20. CSS3 – Backgrounds
body {
background-image: url("paper.gif");
background-repeat: repeat-x; //no-repeat
background-position: right top;
background-attachment: fixed; //scroll
}
Shorthand Property
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
21. CSS3 – Text Effects
Color Property: Used to set the color of the text. The color is specified by:
• Color name: "red"
• HEX value: "#ff0000"
• RGB value: "rgb(255,0,0)"
Example
body {
color: blue;
}
h1 {
color: green;
}
22. CSS3 – Text Effects
Text Alignment & Direction
Properties
• text-align: Used to set the horizontal alignment of a text
• text-align-last: Specifies how to align the last line of a text
• direction: Used to change the text direction of an element
• unicode-bidi: Used to change the text direction of an element
• vertical-align: Sets the vertical alignment of an element
23. CSS3 – Text Effects
Text Decoration
Properties
• text-decoration-line: To add a decoration line to text
• text-decoration-color: To set the color of the decoration line
• text-decoration-style: To set the style of the decoration line
• text-decoration-thickness: To set the thickness of the decoration line
• text-decoration: Sets all the text-decoration properties in one declaration
24. CSS3 – Text Effects
Text Transformation
Properties
• text-transform: To specify uppercase and lowercase letters in a text. It can
be used to turn everything into uppercase or lowercase letters, or capitalize
the first letter of each word
Example
p.uppercase { text-transform: uppercase; }
p.lowercase { text-transform: lowercase; }
p.capitalize { text-transform: capitalize; }
25. CSS3 – Text Effects
Text Spacing
Property Description
letter-spacing Specifies the space between characters in a text
line-height Specifies the line height
text-indent Specifies the indentation of the first line in a text-block
white-space Specifies how to handle white-space inside an element
word-spacing Specifies the space between words in a text
26. CSS3 – Text Effects
Text Shadow
• The text-shadow property adds shadow to text.
Example
h1 {
text-shadow: 2px 2px 5px red; //horizontal, Vertical, Blur, Color
}
27. CSS3 – Text Effects
Property Description
text-justify
Specifies how justified text should be aligned and
spaced
text-overflow
Specifies how overflowed content that is not displayed
should be signaled to the user
word-break Specifies line breaking rules
word-wrap
Allows long words to be able to be broken and wrap
onto the next line
writing-mode
Specifies whether lines of text are laid out horizontally
or vertically
28. CSS3 – Transformations
CSS 2D Transformation Methods
Function Description
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis
translateY(n) Defines a 2D translation, moving the element along the Y-axis
scale(x,y) Defines a 2D scale transformation, changing the elements width and height
scaleX(n) Defines a 2D scale transformation, changing the element's width
scaleY(n) Defines a 2D scale transformation, changing the element's height
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis
29. CSS3 – Transformations
CSS 2D Transformation Methods – Example
div {
transform: translate(50px, 100px);
transform: rotate(20deg);
transform: rotate(-20deg);
transform: scale(2, 3);
transform: scale(0.5, 0.5); //decreases half of its original width and height
transform: scaleX(2); //Width
transform: skew(20deg, 10deg);
transform: skewX(20deg); //skews along the X-axis by the given angle
transform: matrix(1, -0.3, 0, 1, 0, 0); //matrix(scaleX(), skewY(), skewX(), scaleY(),
translateX(), translateY())
}
30. CSS3 – Animations
CSS allows animation of HTML elements without using JavaScript or Flash
Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction
Specifies whether an animation should be played forwards,
backwards or in alternate cycles
animation-duration
Specifies how long time an animation should take to complete one
cycle
animation-fill-mode
Specifies a style for the element when the animation is not playing
(before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation
31. CSS3 – Animations
• An animation lets an element gradually change from one style to another.
• Keyframes hold what styles the element will have at certain times.
Property: animation-direction
• normal: The animation is played as normal (forwards)
• reverse: The animation is played in reverse direction (backwards)
• alternate: The animation is played forwards first, then backwards
• alternate-reverse: The animation is played backwards first, then forwards
Property: animation-timing-function
• ease: Specifies an animation with a slow start, then fast, then end slowly
• linear: Specifies an animation with the same speed from start to end
• ease-in: Specifies an animation with a slow start
• ease-out: Specifies an animation with a slow end
• ease-in-out: Specifies an animation with a slow start and end
32. CSS3 – Animations
Animation Shorthand Property
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div {
animation: example 5s linear 2s infinite alternate;
}
33. CSS3 – Multiple Column Layout
• Allows easy definition of multiple columns of text - just like in newspapers
34. CSS3 – Multiple Column Layout
Property Description
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies a suggested, optimal width for the columns
columns A shorthand property for setting column-width and column-count
36. CSS3 – User Interface
Property Description
outline-offset Adds space between an outline and the edge or border of an element
resize Specifies whether or not an element is resizable by the user
Example (resize):
div {
resize: vertical;
overflow: auto;
}
Example (outlet-offset):
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
