Skip to main content

NETWORK BASICS

Network A system of interconnected computers and computerized peripherals such as printers is called computer network. This interconnection among computers facilitates information sharing among them. Computers may connect to each other by either wired or wireless media. A computer network consists of a collection of computers, printers and other equipment that is connected together so that they can communicate with each other.  


Network application
A Network application is any application running on one host and provides a communication to another application running on a different host, the application may use an existing application layer protocols such as: HTTP(e.g. the Browser and web server), SMTP(e.g. the email-client). And may be the application does not use any existing protocols and depends on the socket programming to communicate to another application. So the web application is a type of the network applications. 
There are lots of advantages from build up a network, but the th…

Managing Text Flow by Using CSS

Managing the Flow of Text Content by Using CSS

Content flow has, historically, been a manual procedure in HTML documents. Today, CSS Regions, CSS Exclusions, and multi-column layouts help you flow content dynamically Complex page layout for print publications like magazines, newspapers, and books has been finely tuned by software manufacturers such as Adobe and Microsoft. Adobe In-design, Microsoft Publisher, and even Microsoft Word 2010 handle the flow of content between columns efficiently. In-design and Publisher in particular are adept at flowing content between areas of a document that aren’t contiguous (touching), such as those separated by images, boxes of content, or pages. Desktop publishing software makes it easy to connect content in different areas, so that changes made to one area allows content to re-flow properly to other connected areas. In HTML documents, content flow has been a challenge for Web and application designers for years. Displaying a complex layout in HTML requires the same flexible placement of boxes as desktop publishing software, but the tools to accomplish this type of content flow have only recently become available. Microsoft and Adobe collaborated with the W3C to create the concept of CSS Regions for Web-based content flow. CSS Regions allows developers to dynamically flow content across multiple boxes, or containers, in HTML documents with fluid layouts. The content adjusts and displays properly whether a user views the document on a large computer monitor or on a small tablet screen. Although CSS3 enables you to use multi-column layout to separate content into columns (see Figure 6-1), CSS Regions offer better control of content flow in more complex layouts. You combine CSS Regions with CSS layout techniques, such as columns, flexboxes, and grid layouts.

Hyphenation, which breaks words between syllables at the end of lines, is also important to fluid layouts, enabling full justification of standalone paragraphs and those in columns. Positioned floats, now called CSS Exclusions, enable you to completely wrap text around images, shapes, and containers of text. This lesson covers CSS Regions, CSS3 multiple columns, CSS3 hyphenation, and positioned floats to help you learn how to flow and present content in dynamically adjusting HTML layouts.

Understanding and Using Regions to Flow Text Content between Multiple Sections

CSS Regions lets you flow content between neighboring or distant areas in an HTML document. CSS Regions are defined areas (regions) of an HTML document where content can flow. When there’s too much content to fit in one region, the remaining content automatically flows into the next region. This is similar to how page layout programs work. 

In a typical HTML document, you can display content in different sections or areas, but each area is independent. If you want overflow text to move from one area to another, you generally have to do so manually. This approach doesn’t work well when a user resizes the screen or uses accessibility tools such as a screen magnifier. This method also doesn’t lend itself to automatic switching from portrait to landscape orientation on tablets and smartphones. One solution is CSS Regions. 

CSS Regions are defined areas (regions) of an HTML document where content can flow. Similar to a page layout program, when there’s too much content to fit in one region, the remaining content automatically flows into the next region. (See Figure 6-2.) If a user resizes the screen on which the document is viewed, or views the document on a smaller or larger screen, the content resizes and automatically re-flows through the regions.

The regions don’t have to be next to each other within the document, and you can control the order in which the flowed content appears. Figure 6-3 shows non-contiguous content flow between regions. This type of flow is sometimes called “story threading” and makes it possible to add pull quotes and sidebars to a document without disrupting the flow of the content.

Flowing Content through Containers Dynamically
To implement CSS Regions, you need to specify a content source and content containers. You accomplish both tasks using the flow-into and flow-from CSS properties.
A content source may be one or more blocks of text in the same or a separate HTML document that holds the content you want to flow through a layout. The content is referred to as a “content stream.” You also need content containers, which are the areas into which content is flowed. An HTML document with content containers acts as a master page, like a template, in which each container is sized and positioned where you want content to appear, but each container is initially empty. Within the content source, the element that contains the content to be flowed is assigned the flow-into CSS property. The value of this property is called a named flow. The following example begins with some CSS code for a content source. The flow-into value is “main,” which is the named flow. Because the content will actually appear in another place (in the content containers), this source element itself will not be displayed on the HTML page. <style> #source {   flow-into: main; }
.region {    flow-from: main;    background: #9ACD32; } </style>
<body> <div id="source">    <p>Lorem ipsum dolor ...</p> </div>  <div id="region1" class="region"></div>  <div id="region2" class="region"></div>  <div id="region3" class="region"></div> </body>

The W3C defines CSS Regions in the CSS Regions specification, which is a work in progress as of this writing. So, like with flexboxes and grids as described in Lesson 5, you should use vendor prefixes with property names. You’ll see use of the vendor prefix in the next step-by-step exercise. 

Continuing in the same sample, the flow-from CSS property creates the content container, which is a CSS Region. The value for the flow-from property must match the named flow value of the flow-into property—this is how the content source and content container  are associated. (The example in this section includes the content source in the same HTML document as the content containers for convenience. In a real-world application, you would most likely use a separate HTML document for source and containers.) When a browser renders the page with the content containers, the content flows into the containers and displays on the screen as shown in Figure 6-4. If you resize the screen, the content re-flows as shown in Figure 6-5.

You can also have multiple sources and assign the flow-into property to multiple elements. The content will be pulled from the source in the order in which it appears in the Document Object Model (DOM). This is referred to as the document order.

The DOM was introduced in Lesson 1 but should be revisited here. The DOM is a W3C specification that describes the structure of dynamic HTML and Extensible Markup Language (XML) documents in a way that allows a Web browser to manipulate. The DOM allows programs and scripts to update content, structure, and styles on the fly— anything in an HTML or XML file can be modified.

OVERFLOWING TEXT 

In order for CSS Regions to work, content flow can’t affect the height of a region—you need to define region heights in your CSS so they are not flexible. A region receives as much content as it can hold and then flows the remaining content into the next region. If there is still content left over after all regions are filled, one of three situations can occur. The overflow content in the last region will: • Be truncated • Continue overflowing and be visible • Continue overflowing but be hidden You can control how the last region handles overflow content using the region-overflow and overflow properties. region-overflow is set to either auto or break. Using the auto value, you can specify the overflow property as visible or hidden. For example, if you want overflow content to continue to flow and be visible, you would use the following syntax: .region {    region-overflow:auto;    overflow:visible; } Figure 6-6 shows visible content flowing past the end of the last region. Using the break value for region-overflow will prevent content from overflowing the last region, truncating the content at that point. The syntax is: .region {   region-overflow:break; 

MICROSOFT’S IMPLEMENTATION OF CSS REGIONS 

Microsoft’s method of implementing CSS Regions varies a bit from the W3C version described previously. Microsoft uses iframes, which are like mini boxes on a Web page that contain external content embedded in an HTML document, as the content source. You must also use the -ms- vendor prefix with the flow-into and flow-from properties.

For example, the following shows an iframe element with a unique ID, which you would add to a master page:
<iframe id="main-data-source" src="source.html" />
Then you would create the named flow using a CSS selector that specifies the data source:
#main-data-source { -ms-flow-into: main; }
To create content containers, assign a class name to the elements you want to use as containers:
<div class="region"></div> <div class="region"></div>

The use of region in both instances is not a mistake! Just like applying any CSS rule, you can identify regions using a shared class-name (as in this example) or list them using individual IDs (as in the first example).

Then create a CSS selector that specifies the data source from which to accept the content flow:
.region { -ms-flow-from: main; }
If you compare this Microsoft-specific code and markup to the general example shown previously, you should be able to see the similarities fairly easily. There are a few more things to be aware of regarding the Microsoft version of CSS Regions, which might appear on the 98-375 exam:
• msRegionUpdate: Allows you to manipulate regions dynamically 

• msRegionOverflow: Handles content overflow, similar to the region-overflow property

• msGetRegionContent: A script method defined by Microsoft as returning “an array of Range instances corresponding to the content from the region flow that is positioned in the region”

It’s possible you’ll see these constructs when researching or developing CSS Regions for use in Windows 8 or Internet Explorer 10.

CREATE CSS REGIONS GET READY. 

To create CSS Regions, perform the following steps: 1. In an editing tool or app development tool, create an HTML document that includes the following content:
<!doctype html> <html> <head>    <meta charset="utf-8" />    <title>CSS Regions Example</title> <style type="text/css">
  body, html { height:100%; width:100%; }
   body{ font-family: serif; color: black; font-size: large; }
   #source{ -webkit-flow-into: main;   }
   .region{ -webkit-flow-from: main; margin: 0 25px 0 0; background: #EEE8AA; padding: 20px;     }
   #region1{ width: 20%; height: 50%; float: left;   }
   #region2{ width: 20%; height: 50%; float: left;   }
   #work-area{ position: relative; padding: 25px;   }
   </style> </head>
<body>
<div id="source">  <p>Lorem ipsum dolor . . . mollis a ipsum.</p> </div>
<div id="workarea">  <div id="region1" class="region"></div>  <div id="region2" class="region"></div> </div>
</body> </html> The ellipsis (. . .) in the Lorem ipsum paragraph means some content has been omitted for presentation purposes. In your HTML document, include a paragraph of dummy text that’s 8 to 10 lines long. 

2. Save the file as L6-regions-exercise.html. 

3. Apply inline boldface on some paragraph text that’s about halfway through the paragraph text. 

4. Save the file again.

5. Notice that the CSS code uses the -webkit- vendor prefix. You must use a
 command-line flag to enable CSS Regions in the browser. To do so, select Start, type the browser name in the search box, right-click the browser name in the results list, and then select Properties. The Properties dialog box opens. In the Target field, cursor to the end of the field, enter a space, and then type --enable-css-regions.

6. Click OK. 7. Open L6-regions-exercise.html in the Web browser. Size the browser window so that content appears in both containers and the bolded content is in the container on the left. The results should look similar to Figure 6-7.

8. Decrease the size of the browser window to see the effect of overflow content. 

9. How can you prevent content from overflowing the second container? Make the necessary changes to the CSS code, save the file again, and view the results in the browser. 

10. Close the file but leave the editing tool and Web browser open if you complete the next exercise in this session.

Using Columns and Hyphenation to Optimize the Readability of Text

CSS3 enables you to create multi-column layouts that work much like the columns feature in Microsoft Word. You can also enable hyphenation to properly break words at the end of lines, which avoids the problem of long words wrapping to the next line and leaving a gap on the previous line.

A few more features that are new to CSS3 are multi-column layouts and hyphenation. You can now create multiple columns—newspaper style—in HTML documents that scale based on the user’s screen size. Hyphenation breaks words between syllables at the end of lines to create a more uniform right margin and eliminate gaps of white-space within paragraphs

CREATING COLUMNS

CSS3 properties for multi-column layout let you create columns by dividing text across multiple columns, specify the amount of space that appears between columns (the gap), make vertical lines (rules) appear between columns, and define where columns break. The main CSS properties you use to create and manipulate multiple columns in an HTML document are: 
• column-count: Sets the number of columns an element should be divided into; can also use the columns property with values to set column-count and column-width properties simultaneously
• column-gap: Specifies the gap between the columns, which is also known as the gutter or alley
 • column-rule: Creates a vertical line in the gap between columns and sets the width, style (single or double line, solid, dashed, 3D, etc.) and color of the rule CSS3 multi-column layout uses the concept of the “column box” to refer to the container that holds content and displays it in columns. The column box is between the content box and the content in the original CSS Box model. (Refer to Lesson 5 if you need a refresher on the box model.) Table 6-1 lists all column properties that work in CSS3.
Now let’s look at how the CSS code works. This code uses the column-count property to c reate three columns using the text in the HTML markup that follows: <head>  <style>     .tricolumn { column-count: 3; }  </style> </head>
<body> <h2>Three Columns</h2> <div class="tricolumn"> Lorem ipsum . . . orci. </div> </body> Because CSS3 columns are still a work in progress, you may need to add vendor prefixes to column-related property names. In this case, we modified the code as follows for all four of the major browsers:  <style>     .tricolumn { -ms-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -webkit-column-count: 3;    }  </style>
You could accomplish multiple columns using the columns property, which is a shorthand way of setting the number of columns and the column width in one declaration. The following code uses the auto value for column width: .tricolumn { columns: 3 auto; } Another way to use the columns property is to assign a number value to column-width and leave column-count set to auto. This example sets column-width to 15em, which means the multi-column element will have a column width of 15 ems (or 15 times the width of the font size of the content in the column): columns: auto 15em; Now let’s add a column rule. This property sets the width, style, and color of the rule between all columns. The syntax for a dashed blue line that’s 3 pixels wide is: column-rule: 3px dashed blue; To control the size of the gutter between columns, use the column-gap property. This property uses an integer value, as shown below, or the keyword normal. column-gap: 3em; The combined effect of three columns with a column rule and a 3em gap is shown in Figure 6-9 (with vendor prefixes applied). Resizing the browser window also resizes the columns and re-flows the content between them, as shown in Figure 6-10.

CREATE A MULTI-COLUMN LAYOUT GET READY.

To create a multi-column layout, perform the following steps: 1. In an editing tool or app development tool, create a proper HTML document that includes the following content: <!doctype html> <html> <head>    <meta charset="utf-8" />    <title>Three Columns</title> <style>     .tricolumn {     -moz-column-count: 3;    }  </style> </head>
<body> <h2>My Three Columns</h2> <div class="tricolumn"> Lorem ipsum . . . orci. </div> </body> </html> The ellipsis (. . .) in the Lorem ipsum paragraph means some content has been omitted for presentation purposes. In your HTML document, include a paragraph of dummy text that’s at least 10 lines long. Also notice the use of the Mozilla vendor prefix (-moz-). We could have included all vendor prefixes, but used only one prefix for simplicity. 2. Save the file as L6-columns-exercise.html. 3. Specify a column gap of 2em and specify a column rule that’s 2px wide and solid green. The syntax for the column-gap and column-rule properties are shown as follows: .tricolumn {    -moz-column-count: 3;    -moz-column-gap: 2em;    -moz-column-rule: 2px solid green;    } 4. Save the file again and view it in the Firefox Web browser. The results should look similar to Figure 6-11.
5. Resize the browser window to see the effect on the columns. 6. (Optional) Replace “My Three Columns” with a longer heading. Try spanning the heading over all three columns. 7. Close the file but leave the editing tool and Web browser open if you complete the next exercise in this session.
USING HYPHENATION Hyphenation is the process of connecting two words with a hyphen mark (-) or breaking words between syllables at the end of a line. Hyphenation is highly useful for multi-column layouts to eliminate whitespace within columns left by long words that automatically wrap to the next line, making text appear more professional. Generally, automatic hyphenation attempts to justify text at the right margin. CSS3 introduces the hyphens property, which controls hyphenation. The property uses the values none, manual, and auto: 
• auto: Enables automatic hyphenation of words based on line-break opportunities within words or by a “language-appropriate hyphenation resource” 
• manual: Enables hyphenation of words based only on line-break opportunities within words 
• none: Prevents hyphenation
The W3C points out that you must declare a language using the HTML lang or XML xml:lang attributes for correct automatic hyphenation to occur. That means if your entire HTML document is in the same language (English, for example) and you want to enable a utomatic hyphenation, add the attribute to your HTML element or doctype declaration, such as: <!doctype html> <html lang="en-us"> or <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> You need to include vendor prefixes with the hyphens property, such as -ms-hyphens for Internet Explorer 10, -moz-hyphens for Firefox, and so on. Microsoft provides additional hyphenation properties that are specific to Microsoft environments, as follows: 
• -ms-hyphenate-limit-zone: Specifies the width of the trailing whitespace (called the hyphenation zone, illustrated in Figure 6-12) that can be left in a line before hyphenation occurs; the property’s value is a length in pixels or a percentage
 • -ms-hyphenate-limit-chars: Specifies the minimum number of characters in a word that may be hyphenated; if the character count is lower than the minimum, the word is not hyphenated
• -ms-hyphenate-limit-lines: Specifies the maximum number of consecutive hyphenated lines that may contain hyphenated words

The following markup with inline CSS uses the -ms-hyphens property, which is set to auto: <!doctype html> <html lang="en-us"> <body>  <div style="width: 200px;   border: 2px solid orange;">
  <p style="-ms-hyphens: auto;   text-align: justify;    font-size: 14pt;">   Hyphenation is the process of connecting . . .   more professional.</p>  </div> </body> </html>

Although Microsoft has enabled several hyphenation properties in Internet Explorer 10 and Windows 8 applications, the W3C specification for hyphenation is still evolving. The W3C is working on the hyphenate-character, hyphenate-limit-zone, hyphenate-limit-word, hyphenate-limit-lines, and hyphenate-limit-last properties as of this writing.

ENABLE AUTOMATIC HYPHENATION GET READY. 

To enable automatic hyphenation, perform the following steps: 1. In an editing tool or app development tool, create an HTML document that includes the following content. Notice that we’re using the Mozilla vendor prefix as an example in this exercise. Replace the paragraph text that begins with “Hyphenation is” with a four-line biography about yourself, your instructor, a classmate, or a celebrity:
<!doctype html> <html lang="en-us"> <head>    <meta charset="utf-8" />    <title>Hyphenation Example</title> </head> <body>  <div style="width: 200px;   border: 2px solid orange;">
  <p style="-moz-hyphens: auto;   text-align: justify;    font-size: 14pt;">   Hyphenation is . . . professional.</p> </body> </html> 2. Save the file as L6-hyphen-exercise.html and view it in the Firefox Web browser. 3. Close the file but leave the editing tool and Web browser open if you complete the next exercise in this session.

Using CSS Exclusions to Create Text Flow around a Floating Object

A positioned float is a CSS construct that enables you to position images, text, and boxes anywhere in an HTML document and then wrap text completely around these elements. Positioned floats are called CSS Exclusions in the latest W3C specification.

You might have noticed that floats were used in the exercise on regions earlier in the lesson. Both floats were assigned the left value, which made them appear side by side when rendered. The placement was relative to the rest of the document. In addition, if you don’t specify a height or width for a float, the element automatically resizes to fit its contents. With CSS Exclusions, you can control the position of a float precisely, at a specified distance from the top, bottom, left, or right sides of a container. You can also create a float in any shape: rectangular, circular, triangular, and just about anything in between. The other parts of the document simply flow around the exclusion. The CSS Exclusions example shown in Figure 6-14 uses a multi-column layout with an exclusion (referred to as positioned float on the Web site) in the middle. You can move the box anywhere in the example layout and see that the surrounding text automatically flows around the blue box.

To create a simple CSS exclusion, use the wrap-flow: both property to display content on all sides of the exclusion. Another option is to use wrap-flow: clear, which displays content above and below the exclusion but leaves the sides blank. You declare an exclusion shape using the shape-inside and shape-outside properties, which define the content and the general shape of an exclusion, respectively. Currently, CSS Exclusions do not work reliably in any of the major browsers. If you want to experiment with CSS Exclusions, try Internet Explorer 10. To use any CSS Exclusions properties for rendering in Internet Explorer 10, add the -ms- vendor prefix. Microsoft also uses the -ms-wrap-side and -ms-flow-wrap properties, which aren’t part of the W3C specification.

EXPLORE CSS EXCLUSIONS PROPERTIES GET READY. 

To explore CSS Exclusions properties, perform the following steps: 1. Using a Web browser, go to the W3C “CSS Exclusions and Shapes Module Level 3” Web page at http://dev.w3.org/csswg/css3-exclusions/. 2. Browse the examples of CSS Exclusions. 3. In Internet Explorer 10, copy the code from an example that interests you, create a proper HTML document, and test the file in Internet Explorer 10.
4. Visit the Microsoft Positioned Floats test drive at http://bit.ly/lQulDB. Access the page using each of the major browsers. Select each setting one at a time to see the effects. 5. Close any open files and programs.

Comments

Popular posts from this blog

What if Analysis

What-If Analysis What-If Analysis in Excel allows you to try out different values (scenarios) for formulas. The following example helps you master what-if analysis quickly and easily.  Use scenarios to consider many different variables  A scenario is a set of values that Excel saves and can substitute automatically in cells on a worksheet. You can create and save different groups of values on a worksheet and then switch to any of these new scenarios to view different results. 
Create Different Scenarios 
Note: You can simply type in a different revenue and Cost into cell B2 and B3 respectively to see the corresponding result of a scenario in cell B4. However, what-if analysis enables you to easily compare the results of different scenarios.  
I. On the Data tab, click What-If Analysis and select Scenario Manager from the list. The Scenario Manager Dialog box appears  II. Add a scenario by clicking on Add.  III. Type a name (e.g. “First Case”), select cell B2 and B3 (represents “Revenue” and “…

PROFESSIONAL ENGLISH

Asking For and Giving Opinions on Likes and Dislikes

Words Meaning Sample Sentence Opinion A statement or judgment formed about some matter. Bhoomika gave her final opinion on the company’s matter. Dialogue A conversation between two or more people. Her dialogue stated her opinion about the company’s matter. Expression The action of making known one’s thought or feelings. Her expression was sad at the meeting. Frank An open, honest, and direct speech or writing Bhoomika is very frank with her friends. Recover Return to normal state of health, mind or strength. The company’s economic crisis will be recovered soon. Turmoil A state of great disturbance. The company is facing financial turmoil. Economics The branch of knowledge concerned with the production, consumption, and transfer of wealth. Bhoomika studied Economics at the State University. Betrayed Expose to danger by treacherously giving information to an enemy.

DAILY LIFE VOCABULARY

Apology Etiquette and Office Vocabulary 

Chapter Vocabulary

Word Meaning Sample Sentence Stressed A state of any mental or emotional tension. Ram seems much stressed after his poor exam. Launch An act of instance of starting something. The government launched a new scheme for the poor people. Error A mistake Ravi found a grammatical error in his new grammar book. Scold Blaming someone for any wrong doing Bhuvan scolded his employees for their poor performance. Accuse Claiming that someone has done something wrong. Bharati accuses her friend Chaya for stealing her necklace. Fair Good and honest Ravi got promoted for doing a fair job. Ashamed Embarrassed or guilty because of one’s action. <