Advanced Web Designing
Form controls and attributes
INPUT TYPE DESCRIPTION
color color picker
number field for entering number
url field for entering url
image image as submit button
date date picker with year, month, and
date
email field for entering email
month month and year control in YYYY-MM
format
range range control. Default 0 to 100
datetime-local date picker with year, month, date,
and time
time field for entering time
week week and year control
search text field for site search
file file-select field with BROWSE button
tel input field to enter telephone
number
ATTRIBUTE DESCRIPTION
disabled input field should be disabled
max specifies maximum value for input
min specifies minimum value for input
pattern specifies regular expression to
check input
read only input field can only be read not
changed
placeholder acts as temporary label without
label tag
required input field is required to fill
autocomplete whether a form field should have
autocomplete on or off
autofocus the input field should be focused
automatically once the page loads
height and width for input type image
multiple user is allowed to enter more than
one value. For input type email and
file.
1. Id is used to identify a html element uniquely through
document object model.
2. Class is used to apply CSS style to individual input element.
3. The <meta> tag: describes some aspects of the webpage,
Meta data used by search engine, empty tag,
placed in <head>…</head> tag, not displayed
on webpage.
4. Attributes of meta tag: name, content, charset, http-equiv
5. CSS stands for Cascading Style Sheets: describes how HTML
elements are to be displayed on screen, saves a lot of
work, control the layout of multiple webpages.
6. CSS rule set contains: selector and declaration block
7. Selector indicates the HTML element you want to style.
8. The declaration block can contain one or more declarations
separated by a semicolon.
9. Each declaration contains a property name and value,
separated by a colon.
10. Three types of CSS: Inline, Internal/Embedded, External
11. Inline uses the style attribute in HTML start tag.
12. Internal CSS is used to apply CSS on a single document or
page.
13. Internal CSS is written inside the style tag within head
section of HTML.
14. External stylesheet is generally used when you want to
make changes on multiple pages.
15. External CSS uses <link> tag on every page and should be
put inside the head section.
16. The external CSS file should not contain any HTML tags.
PROPERTY USE VALUE
color change color of text color name
background-color changes bgcolor of page color name
font-weight to bold text bold or 100, 200...900
font-style to italicize text italic, oblique, normal
text-decoration strike, underline, overline, line-through, underline,
remove underline from overline, none
links
text-align to control horizontal left, right, center
alignment
font-family control fonts font name
font-size controls the size of font px, in, mm, cm, pt
letter-spacing spacing between letters px, in, mm, cm, pt
padding adding spaces around an pixel
element
border adds border to webpage solid, double, ridge,
content groove, inset, outset,
dotted, dashed
background-image sets image as background url(X)
background-repeat background image to repeat, no-repeat
repeat or not
margin-left sets margin on left side of px, pt, cm
element
17. Id selector is written with the # character.
18. Class selector is used with a period ‘.’ Character.
19. The class selector is used when you want to change a
group of elements within your HTML page.
20. Class name should not start with number.
21. The universal selector is used as a wildcard character;
selects all the elements of webpage; uses * asterisk.
22. Group selector: used to select all the elements with same
style definitions, minimize the code, commas are used to
separate each selector.
23. In CSS positioning, values of position are: fixed, absolute,
relative, static.
24. Static positioning: default position for HTML elements, not
affected by values of top, bottom, right, left
25. The fixed property forces an element into a fixed position
relative to the browser window.
26. The fixed element will not move even when the page is
scrolled.
27. The relative positioning property is used to set the
element relative to its normal position.
28. Absolute positioning property sets an element in a specific
location and is not affected by the flow of the page.
29. The float property defines the flow of the content.
30. Values of float: left, right, none
31. Display property is used to define the display of different
parts of a web page.
32. Display values : inline, block, inline-block, none
33. The <ol> tag defines an ordered list; it can be numerical or
alphabetical.
ATTRIBUTE VALUES DESCRIPTION
type “1”/”a”/”I”/”i” 1 is default value
reversed - the list items are
specified in reverse
order
start number starting number of
first item
34. An unordered list is defined using <ul> tag and each item
starts with <li> tag.
35. The list items in unordered list are marked with bullets
(small black circles) by default.
36. Values for “list-style-type: disc, circle, square, none”
37. To define a definition list, <dl> tag is used.
38. Items in definition list are created with <dd> and <dt>
tags.
39. <dt> tag is used to define the term whereas the <dd> tag
is used to define the term’s definition.
40. List within another list either ordered or unordered is
called nested list.
41. HTML5 features include native audio and video support
without the need for Flash.
42. Common audio formats: mp3, aac, ogg
43. <audio> tag enables you to embed audio files on
webpages.
44. Autoplay, controls and muted are without any values.
ATTRIBUTE VALUES DESCRIPTION
autoplay - audio starts playing as soon
as page loads
controls - displays audio controls
loop number audio will start over again
muted - audio output should be
muted
src URL specifies URL of audio file
45. Audio controls include: play, pause, volume
46. Multiple sources of audios are specified so that if browser
is unable to play the first source, then it will jump to the second
source.
47. The HTML <video> tag is used to embed video into your
page.
48. Common video formats: mp4, ogg, WebM
ATTRIBUTE VALUES DESCRIPTION
src URL link to video file
height and width pixels sets height and width of
the video player
loop number video will start over again
every time it is finished
poster URL specifies image to be
shown before video plays
preload auto, metadata, how the author thinks the
none video should be loaded
when page loads
autoplay - the video will start playing
as soon as it plays
controls - video controls should be
displayed
muted - audio output of the video
should be muted
49. The <source> tag is used to specify multiple media
resources for video as well as audio media elements.
50. An image with multiple hyperlinks is called an imagemap.
51. Image map is used to connect links to different regions on
the webpage.
52. The clickable regions in imagemap are called hotspots.
53. Tags used to define image map: <img>, <map>, <area>
54. The usemap attribute of <img> tag indicates that image
map in a client side imagemap.
55. To create a client side imagemap, usemap attribute of
<img> is used with value which is preceded with a #symbol.
56. <map> has only one attribute ‘name;’ it specifies the
name of image map for client side.
57. The value of the name attribute is the value specified in
usemap attribute of <img>
58. A given <map> element can contain many <area> tags.
59. <area> is singular whereas <map> is paired tag.
60. <area> defines specific clickable regions.
ATTRIBUTE DESCRIPTION
href defines URL for clickable region
shape values: rect, circle, poly
coords specifies coordinates for the shape.
rect: 4 coordinates
circle: 3 coordinates
poly: requires at least 4 coordinates
default: entire image in selected
alt specifies extra information about clickable
area
61. The <iframe> element creates inline frame which is used
for online advertising.
ATTRIBUTE VALUES DESCRIPTION
src URL specifies address of doc to
embed in <iframe>
height and width pixels specifies height and width
of frame
name text specifies name of iframe
srcdoc HTML code specifies HTML content of
page to show on iframe
62. Web hosting is the service of providing storage space. It
makes website available on the Internet.
63. The companies that provide web hosting services are
called web hosts. They manage and own web servers.
64. Web servers offer uninterrupted Internet connectivity.
65. Types of web hosting: shared, free, dedicated.
66. Shared hosting gives domain name to your website. It is
cost effective.
67. Free hosting websites provide you free hosting of the
website for limited period.
68. Dedicated hosting is paid hosting servers for large
websites.
