1. What is the difference between replaced and nonreplaced inline elements?

Replaced inline elements Nonreplaced inline elements

• Replaced inline elements are elements whose • Nonreplaced inline elements are those
content and thus appearance is defined by elements whose content is defined within the
some external resource, such as <img> and document, which includes all the other inline
the various form elements. elements.
• Replaced inline elements have a width and • Nonreplaced inline elements, in contrast,
height that are defined by the external have a constrained box model, because their
resource and thus have the regular CSS box width is defined by their content, the width
model. property is ignored, as are the margin-top,
margin-bottom, and the height.

2. What is micro formats? What is their purpose? What is a form ? What is the purpose of action
attribute .Explain with example.
➢ Microformat is a small pattern of HTML markup and attributes to represent common blocks of
information such as people, events, and news stories so that the information in them can be extracted and
indexed by software agents.

One of the most common microformats is hCard, which is used to semantically mark up contact
information for a person. Google Map search results now make use of the hCard microformat so that if
you used the appropriate browser extension, you could save the information to your computer or phone’s
contact list.
Listing 4.2 illustrates the example markup for a person’s contact informationthat uses the hCard
microformat.
<div class="vcard">
<span class="fn">Randy Connolly</span>
<div class="org">Mount Royal University</div>
<div class="adr">
<div class="street-address">4825 Mount Royal Gate SW</div>
<div>
<span class="locality">Calgary</span>,
<abbr class="region" title="Alberta">AB</abbr>
<span class="postal-code">T3E 6K6</span>
</div>
<div class="country-name">Canada</div>
</div>
<div>Phone: <span class="tel">+1-403-440-6111</span></div>
</div>
➢ Forms provide the user with an alternative way to interact with a web server.
➢ Up to now, clicking hyperlinks was the only mechanism available to the user for communicating with the
server. Forms provide a much richer mechanism.
➢ Using a form, the user can enter text, choose items from lists, and click buttons. Typically, programs
running on the server will take the input from HTML forms and do something with it, such as save it in a
database, interact with an external web service, or customize subsequent HTML based on that input.
➢ Form Structure:
form is constructed in HTML in the same manner as tables or lists: that is, using special HTML
elements. Figure 4.11 illustrates a typical HTML form.
• A form is defined by a <form> element, which is a container for other elements that represent the various
input elements within the form as well as plain text and almost any other HTML element. The meaning of
the various attributes shown in Figure 4.11 is described below

.
• The action attribute specifies the URL of the server-side resource that will process the form data. This
could be a resource on the same server as the form or a completely different server.

3. Describe how block level elements are different from inline elements.Describe the different
types of inline elements
• Block-level elements such as <p>, <div>, <h2>, <ul>, and <table> are each contained on their own line.
Because block-level elements begin with a line break.
• Without styling, two block-level elements can’t exist on the same line, as shown in Figure 5.1.
• Block-level elements use the normal CSS box model, in that they have margins, paddings, background
colors, and borders.

➢ Inline elements do not form their own blocks but instead are displayed within
 lines.
➢ Normal text in an HTML document is inline, as are elements such as <em>,
<a>, <img>, and <span>.
➢ Inline elements line up next to one another horizontally from left to right on the same line; when there
isn’t enough space left on the line, the content moves to a new line, as shown in Figure 5.2.

4. Describe the two ways to construct multi column layouts in CSS

Constructing Multicolumn Layouts:
They are the raw techniques that you can use to create more complex layouts. A typical layout may
very well use both positioning and floats.
➢ Using Floats to Create Columns
• Using floats is perhaps the most common way to create columns of content.
• The first step is to float the content container that will be on the left-hand side. Remember that the
floated container needs to have a width specified.
• As can be seen in the second screen capture in Figure 5.20, the other content will flow around the
floated element.
• Figure 5.21 shows the other key step: changing the left-margin so that it no longer flows back
under the floated content.
• As you can see in Figure 5.21, there are still some potential issues. The background of the floated
element stops when its content ends. If we wanted the background colour to descend down to the
footer, then it is difficult (but not impossible) to achieve this visual effect with floats
 .

➢ Using Positioning to Create Columns

• Positioning can also be used to create a multicolumn layout.
• Typically, the approach will be to absolute position the elements that were floated in the examples
from the previous section.
• Absolute positioning is related to the nearest positioned ancestor, so this approach typically uses
some type of container that establishes the positioning context.
• Figure 5.24 illustrates a typical three-column layout implemented via positioning.
• Notice that with positioning it is easier to construct our source document with content in a more
SEO-friendly manner; in this case, the main <div> can be placed first.
 5. Discuss the advantages and disadvantages of client side scripting?

• Client-side scripting is an important one in web development. It refers to the client machine (i.e., the
browser) running code locally rather than relying on the server to execute code and return the result.
• There are many client-side languages that have come into use over the past decade including Flash,
VBScript, Java, and JavaScript.
• Some of these technologies only work in certain browsers, while others require plug-ins to function. We
will focus on JavaScript due to its browser interoperability (that is, its ability to work/operate on most
browsers).
• Figure 6.1 illustrates how a client machine downloads and executes JavaScript code.

There are many advantages of client-side scripting:

■ Processing can be offloaded from the server to client machines, thereby reducing the load on the server.
■ The browser can respond more rapidly to user events than a request to a remote server ever could, which
improves the user experience.
■ JavaScript can interact with the downloaded HTML in a way that the server cannot, creating a user experience
more like desktop software than simple HTML ever could.

The disadvantages of client-side scripting are mostly related to how programmers use JavaScript in their
applications. Some of these include:
■ There is no guarantee that the client has JavaScript enabled, meaning any required functionality must be
housed on the server, despite the possibility that it could be offloaded.
■ The idiosyncrasies between various browsers and operating systems make it difficult to test for all potential
client configurations. What works in one browser, may generate an error in another.
■ JavaScript-heavy web applications can be complicated to debug and maintain.JavaScript has often been used
through inline HTML hooks that are embedded into the HTML of a web page. Although this technique has been
used for years, it has the distinct disadvantage of blending HTML and JavaScript together, which decreases code
readability, and increases the difficulty of web development.