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…

Understanding CSS Essentials: Layouts

Arranging User Interface (UI) Content by Using CSS

Arranging User Interface (UI) Content by Using CSS
User interfaces can be clean and simple or they can be more complex with several sections, buttons, and controls. Designing an interface that renders well on large PC screens and small mobile devices used to require a lot of markup and code. Today, the CSS Flex-box Box model and the Grid Layout model reduce the amount of code required for cross device compatibility. Flex-boxes hold text, images, and other content, and the browser automatically adjusts the size of the box depending on the screen size being used to view the HTML document. The same principle applies to grid layouts, which are simply columns and rows that control the layout of content in an HTML document. Because the CSS specifications are not yet final, you’ll need to use vendor-specific prefixes before CSS property names to make everything work.

A user interface (UI) is the portion of a Web site or application with which a user interacts. The UI has a layout, which can range from ultra simple with just a button or two to highly complex with many parts, and each part can contain one or more buttons, menus, toolbars, forms, and so on. 

With such a wide range of layouts, creating UIs that work well for Web sites and applications viewed on mobile devices is challenging. Positioning and auto-sizing of UI elements has become central to good design. For example, relative positioning of UI elements is appropriate for many Web pages, and Web developers have used the float property for years to achieve flexibility in their designs. (You learned about the float property in Lesson 4.) But relative positioning doesn’t work for most mobile Web applications because it results in inappropriate overlapping of elements or elements appearing in the wrong places. 

A combination of absolute positioning and flexible boxes (containers) works much better for mobile Web applications and parts of Web pages in general. For example, a UI element that should always appear in the same place on the screen, such as a header or footer, should use absolute positioning. For flexibility, the CSS3 Flex-box Box model is ideal for items that should resize or reposition themselves (horizontally or vertically) depending on the size of the screen. Another UI-related model is the CSS3 Grid Layout model, which gives you greater control over complex layouts than the flex-box model. This lesson focuses on the Flex-box Box and Grid Layout models. 

Before we dive into this lesson’s topics, you need to understand a few things about CSS3 and browser compatibility. Like HTML5, the CSS3 specification is still in draft format and undergoing modifications. The names of some properties can change from one version of the CSS3 draft specification to the next, and new property values can be introduced while others are removed. 

To help ensure that CSS3 styles work during this transition phase, many of the major Web browsers offer alternative property names. These workarounds simply add a vendor prefix, which is a keyword surrounded by dashes, to the front of a CSS3 property name. Keep the following in mind as you work with CSS3 properties: 
• Internet Explorer uses the -ms- prefix. 
• Firefox supports the -moz- prefix. 
• Opera supports the -o- prefix. 
• Chrome and Safari support the -webkit- prefix. 

For example, a CSS3 property you’ll learn about in this lesson is the flex-box property. To apply the flex-box style to elements and view them in Firefox, you currently need to use the -moz-flex-box property.

A best practice is to include all four vendor prefixes for CSS3 features that are still emerging. That way, your Web page has the best chance of being viewed properly regardless of which major browser is used. However, including all four vendor prefixes in your code makes your code longer, and it doesn’t guarantee the CSS3 feature will work within all of the browsers. If a browser simply doesn’t support the feature or the vendor prefix property, the feature will not display properly. The “When Can I Use” Web site at caniuse.com helps you determine which browsers support specific CSS3 and HTML5 features.

NOTE Another best practice, especially during the transition to CSS3, is to use generic font families to prevent potential viewing problems across different browsers. A mono-space font family, either serif or sans serif, is the best way to avoid unexpected results. However, CSS3 also offers the ability to use any font you want. The key is to learn when to use mono-space and when it’s OK to use a fancier font. 

Using Flex-box for Simple Layouts and Using Grid for Complex Layouts
Flex-boxes are designed for toolbars, menus, forms, and similar elements in Web pages and applications. Grids are better suited to more complex designs.

Years ago, the W3C created specifications for a simple box model, called the CSS Box model. This model describes the boxes that surround content in an HTML document, whether the document becomes a Web page or a Web application. Think of every part of an HTML document as being in a box. Each box must conform to rules defined by the box model. The CSS Box model is shown in Figure 5-1. The parts of the CSS Box model are margin, border, padding, and content.

The margin is transparent and sits at the outermost edge of a box, providing space between the box and other boxes in the document. The border surrounds the box itself. A border can be transparent, or it can be colored and have a pattern like a dashed line. The padding is the space between the border of the box and its content. Padding generally takes on the same color as the box’s background color. The content is whatever is displayed in the box, such as text and images. You use the border, margin, padding, height, and width CSS properties to modify the various parts of the box model. A major issue with the CSS Box model is that different Web browsers apply the CSS properties differently. For example, although the W3C states that the height and width properties define the height and width of a box’s content, older versions of Internet Explorer apply the same properties to the height and width of the border, which includes the padding and content.

TAKE NOTE
Web page and Web application designers often resort to using hacks (customized CSS property values) to force Internet Explorer to use CSS tags that other browsers will ignore. The concept is similar to the vendor prefixes for CSS properties mentioned in the preceding section.

Two other concepts to understand about the CSS Box model are block-level and inline elements. A block-level element creates boxes that contribute to the layout of the document. Sections, articles, paragraphs, lists, and images are examples of block-level elements. Inline elements are designed for laying out text and don’t disrupt the flow of the document. Applying boldface and the new HTML5 mark element are examples of inline elements. Finally, the parent/child relationship is important to understand when working with the CSS. Essentially, a parent box can contain one or more boxes. The boxes contained within a parent box are referred to as child boxes. Figure 5-2 shows a simple example of a parent box with a nested child box. A child can inherit CSS styles from a parent, which means styles applied to a parent also apply to a child. Not all CSS properties are inheritable; when applying styles, you need to check the CSS specification to determine property inheritance.

What CSS has lacked since its inception is an easy way to arrange elements horizontally and vertically in an HTML document—to use CSS to control layout that renders well in various browsers and when viewed from different screen sizes. The CSS3 Flex-box Box and Grid Layout models address this concern. The CSS Flex-box Box model is a layout mode for using flexible boxes in user interfaces. The model is part of the CSS3 draft specification. A flex-box offers flexible layouts for UI design. You can create Web pages and mobile applications with elements, controls, toolbars, menus, and forms that resize and reposition automatically when the user changes the size of the browser window. The browser takes the available space into account and calculates the dimensions for the user, which enables relative sizes and positioning. For example, Figure 5-3 shows a horizontal toolbar with icons in a flex-box. The parent flex-box is indicated by the shaded background and the icons are the child boxes. When a user increases the size of the screen horizontally, the flex-box expands too, distributing an even amount of space between the children. You can lay out the contents of a flexbox dynamically in any direction, whether left, right, up, or down. You can also swap the order of boxes and flex their sizes and positions to fill the available space. A multi-line flex-box wraps content into multiple lines, much like a word processor handles text in a paragraph.

TAKE NOTE
Flex-box layout is similar to block layout, but flex-box doesn’t use columns or floats. In addition, whereas block layout typically lays out content vertically (and inline layout tends to lay out content horizontally), a flex-box resizes in either direction.

Where the Flex-box Box model is suitable for simple things like buttons, toolbars, and many forms, you can use the CSS Grid Layout model for more complex layouts. The grid layout model lets you control the design of sections or entire HTML-based documents using CSS3. As the name implies, a grid layout uses rows and columns to make the design look cleaner and structured (see Figure 5-4)Grid layout also offers modularity, so you can easily drop elements into a grid, or move parts of a grid to a different area of a document. Grids are much more flexible and easier to work with than using HTML tables or even columns or floats to structure layout. 

The New York Times Web site (www.nytimes.com) is an example of a grid layout, as are most online newspaper sites.

Using a Flexible Box to Establish Content Alignment, Direction, and Orientation

Both a flex-box and its contents can be configured to change size, horizontally and vertically, when the screen on which they’re displayed changes size. You can also reverse the direction and order of flex-boxes with one line of code. 

You define an element as a flex-box using the CSS properties display:flexbox or display:inline-flex-box, which are described as follows: 
• flex-box: Sets the flex-box as a block-level element 
• inline-flex-box: Sets the flex-box as an inline-level element 

A box within a box is a child box, which can be flexible or not. A child box is referred to as a flex-box item.
Flex-box also introduces nine other properties, as listed in Table 5-1. You’ll learn how to use many of these properties and values in the following sections.

Work with Flex-boxes and Flex-box Items

A flex-box can include child boxes that are flexible by height and width. The flex property makes child boxes flexible. The flex-flow property sets the flex-direction and flex-wrap properties of a flex-box (the parent box) at the same time.
Let’s take a look at flex-box in action. Assume a company provides three main types of services, which are displayed and briefly described in three paragraphs on a Web page. The three paragraphs form three containers of information, as shown in Figure 5-5. 

Notice the extra space to the right of the last child box, labeled Child 3. You can modify the CSS that controls the boxes so all three child boxes automatically expand in size uniformly to fill the available space in the flex-box. You could also modify one child box, such as Child3, to make it flexible to fill the space, as shown in Figure 5-6. 

APPLYING PROPORTIONAL SCALING WITHIN A FLEX-BOX 

The W3C specifies the flex property, which controls the height and width of flex-box items. Whereas the display: flex-box property creates a flexible parent box, the flex property is what gives the flexible nature to child boxes. 

The display: flex-box property is used without additional values. 

The flex property can take on a positive and/or negative flex value, a preferred size, and the none keyword, as shown: 

flex: pos-flex neg-flex preferred-size none 

The positive and negative flex values indicate flexibility. Contrary to the use of the word “negative,” both are actually positive numbers, like 1, 2, 3, and so on. (You can also use 1.0, 2.0, 3.0, etc.) 

If space is left over in the flex box when the screen size increases, the flex-box items expand to fill up the space based on the positive flex value. A value of 1 means each flex-box item will take up one equal part of the available space, a value of 2 means each item will take up two equal parts, and so on. If the flex-box items overflow the parent box because they are collectively wider than the parent, the browser uses the negative flex value to determine the height or width of each item. 

If you don’t specify a positive flex value, it defaults to 1. Omission of a negative flex value defaults to 0.

The preferred-size value can be any value that’s valid for the CSS height and width property, such as 100px. If you don’t specify a preferred-size value, the default is 0px. You can also set the preferred-size value to auto, which uses the value of the width or height property as the preferred size. 

The keyword none is equivalent to 0 0 auto.

NOTE The flex property value may need some additional explanation. Let’s say you have a flex-box with three child boxes. The flex value for child1 and child2 is 1 and the value for child3 is 2. A child with a flex of 2 is twice as flexible as a child with a flex of 1. This doesn’t necessarily mean that child3 will be two times as wide as child1 and child2. The flex value is a calculation based on available space for stretching or shrinking; the change is assigned based on the portion of flexibility compared to the other child boxes.

The power of flex-box items is that they can freely scale or dynamically adjust their main size. The items increase or decrease in size based on the available space in the flex-box in which they reside. In the following CSS code and HTML markup, the flex-box contains four flex-box items. Each child has a flex value of 1 and is set to auto. When the user changes the size of the browser window, the child boxes should expand and contract along with the parent box. <!doctype html> <html> <head>  <meta charset="utf-8">  <title>Flexible Child Box Example</title>  <style>   div { display: flex-box;  outline: 2px solid silver     }     p { flex: 1 auto; margin: 1em;   font-family: sans-serif;  color: white;  background: tomato;   font-weight: bold;  text-align: center; }  </style> </head>
<body>  <div>    <p>This is the child1 box.</p>    <p>This is the child2 box.</p>    <p>This is child3.</p>    <p>This is child4.</p>  </div> </body> </html>

CREATE A FLEX-BOX WITH FLEX-BOX ITEMS GET READY. 

To learn how to create a flex-box with flex-box items that have a fixed height but a flexible width, perform the following steps: 1. In an editing tool or app development tool, create an HTML file that includes the following CSS code and markup:
<!doctype html> <html> <head>  <meta charset="utf-8">  <title>Flexible Child Box Example</title>  <style>    div { display: flex-box;    outline: 2px solid silver }    p { flex: 1 auto; margin: 1em; font-family: sans-serif; color: white; background: lime-green; height: 25px; padding: 1em; font-weight: bold; font-size: xx-large; text-align: center; }  </style> </head>
<body>  <div>    <p>This is the child1 box.</p>    <p>This is the child2 box.</p>    <p>This is child3.</p>  </div> </body> </html> The display: flex-box CSS property creates the parent box—the flex-box. A silver outline is created for the flex-box, which simply helps you see the flex-box in the browser window for purposes of this exercise. The paragraph (p) styles apply to the flex-box items (the child boxes). The flex property applies flexibility to each child box. The items have a preferred width of 75 pixels. If space is left over in the flex-box when the screen size increases, the flex-box items expand horizontally to fill up the space.

The use of an outline around the flex-box (parent box) is to make it easier to identify the borders of the flex-box. You don’t have to include an outline around flex-boxes in your applications or Web pages.

2. Save the file as L5-flex-box-exercise.html and open it in a Web browser. 

3. Resize the browser window, making it narrower and wider, by dragging the right edge of the window toward the center of the screen and then back toward the right. Notice how the flex-box items expand and shrink along with the flex-box. 

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

Alternatively, you can use the CSS flex function with the CSS height or width property to control the height and width of flex-box items. The flex property and flex function behave the same but use slightly different syntax—a function includes values within parentheses. 

The next exercise shows you how to use the flex function and introduces the flex-wrap property. The flex-wrap property determines whether child boxes automatically create a new line and wrap onto it (as shown in Figure 5-9). The flex-wrap property uses the nowrap, wrap, and wrap-reverse values.

As you’ll see, the CSS code uses vendor prefixes (-ms-, -moz-, -o-, and -webkit-), which are required to make the flex-wrap property work. Remember, vendor prefixes are frequently used during the transition to CSS3 to make the code compatible with as many browsers as possible. 

CREATE FLEX-BOX ITEMS WITH THE FLEX FUNCTION GET READY. 

To create flex-box items with the flex function and use the flex-wrap property, perform the following steps: 1. In an editing tool or app development tool, create an HTML document with the following markup:
<!doctype html> <html> <head>    <meta charset="utf-8" />    <title>Flex Function Example</title> <style>    div {    display: flex-box;    display: -ms-flex-box;    display: -moz-flex-box;
  display: -o-flexbox;    display: -webkit-flexbox;    flex-wrap: wrap;    -ms-flex-wrap: wrap;    -moz-flex-wrap: wrap;    -o-flex-wrap: wrap;    -webkit-flex-wrap: wrap;    height: 200px;    padding: 1em;    color: white;    outline: 2px solid silver;    }
   div>div {    width: 75px;    width: -ms-flex(1 75px);    width: -moz-flex(1 75px);    width: -o-flex(1 75px);    width: -webkit-flex(1 75px);    margin: 1em;    height: 100px;    background-color: #b200ff;    font-family: sans-serif;    text-align: center;    line-height: 100px;    font-size: xx-large;   } </style> </head>
<body>  <div>    <div>Service 1</div>    <div>Service 2</div>    <div>Service 3</div>  </div> </body> </html> 
As in the last exercise, the display: flexbox property creates the parent box. The second set of div styles (div>div, which is simply a shorthand way to apply styles to a group of HTML elements without assigning classes) apply to the flexbox items: the width property along with the flex function control the width of the flexbox items, which have a preferred width of 75 pixels but will fill any available space when the screen size increases. The flex-wrap property with the wrap forces flexbox items to wrap within the flexbox. 

2. Save the file as L5-flex-function-exercise.html and open it in the Web browser. Be sure to maximize the window. 

3. Reduce the width of the browser window slightly by dragging the right edge of the window toward the center of the screen. Notice that as the flexbox (indicated by the silver outline) shrinks, the flexbox items uniformly shrink in size. 

4. Decrease the size of the window further until the flexbox items wrap. 5. Open the file in each of the other major Web browsers to see if the file renders appropriately. 6. Close the file but leave the editing tool and Web browser open if you complete the next exercise in this session.

A good way to determine whether your Web browser can render flexbox properties is to use the controls on the Flexin Web page at http://ie.microsoft.com/testdrive/HTML5/ Flexin/Default.html. Click each control to see if the sample flexbox and flexbox items change. For example, some browsers render horizontal justification correctly and others don’t. The same applies to flexing child items.

A few other properties you might use fairly often with flexboxes are: 

• flex-pack: Justifies the alignment of child boxes within a flexbox and minimizes white-space in the parent box. This property accepts one of four values: start, end, justify, or center. 

• flex-align: Sets the default alignment for child boxes, but with a twist. If the orientation of the parent box is horizontal, flex-align determines the vertical alignment of the child boxes, and vice versa. 

After a flexbox’s children have finished flexing and if space is still available in the flexbox, the children can be aligned with the flex-pack and flex-align (or flex-item-align) properties. The most important thing to remember is that you apply the flex-pack property to the parent flexbox in your CSS code, and apply flex-align to the child items.

CHANGING THE DIRECTION OF CHILD ITEMS IN A FLEX-BOX 

The flex-direction property affects the direction of child boxes in the parent box. It uses the row, row-reverse, column, and column-reverse values. 
The flex-flow property sets the flex-direction and flex-wrap properties at the same time. The following example uses the flex-flow property with the column value. 
<!doctype html> <html> <head>  <meta charset="utf-8">  <title>Flex-flow Example</title>  <style>    div {    display: flexbox;    display: -ms-flexbox;
  display: -moz-flexbox;    display: -o-flexbox;    display: -webkit-flexbox;    flex-flow: column;    -ms-flex-flow: column;    -moz-flex-flow: column;    -o-flex-flow: column;    -webkit-flex-flow: column;    height: 400px;    padding: 1em;    outline: 2px solid silver;    color: white;    font-family: sans-serif;    font-weight:bold;  }
   p {    width: 100px;    margin: 1em;    height: 100px;    background-color: dodgerblue;    text-align: center;    line-height: 100px;   }  </style> </head>
 <body>   <div>     <p>Child1</p>     <p>Child2</p>     <p>Child3</p>   </div> </body> </html> 

To reverse the order of the child boxes, change each of the flex-flow column values to column-reverse, as follows: flex-flow: column-reverse;
-ms-flex-flow: column-reverse;
-moz-flex-flow: column-reverse;
-o-flex-flow: column-reverse;
-webkit-flex-flow: column-reverse;

REVERSE THE ORDER OF FLEX-BOX ITEMS GET READY. 

To create a flexbox that reverses the order of the flexbox items, perform the following steps: 1. In an editing tool or app development tool, create an HTML document with the following markup:
<!doctype html> <html> <head>  <meta charset="utf-8">  <title>Flex-box Items Reverse Order Example</title>  <style>    div { display: flexbox; display: -ms-flexbox; display: -moz-flexbox; display: -o-flexbox; display: -webkit-flexbox; flex-flow: column; -ms-flex-flow: column; -moz-flex-flow: column; -o-flex-flow: column;
-webkit-flex-flow: column; height: 400px; padding: 1em; outline: 2px solid silver; color: white; font-family: sans-serif; font-weight: bold;
    }
    p { width: 300px; margin: 1em; height: 100px; background-color: olive; text-align: center; line-height: 100px;    }  </style>  </head>
  <body>    <div> <p>Rock</p> <p>Paper</p> <p>Scissors</p>    </div>  </body> </html> 2. Save the file as L5-reverse-order-exercise.html and open it in the Web browser. Adjust the size of the Web browser window so the display looks similar to Figure 5-14.

3. Open the file in each of the other major Web browsers to see if the file renders appropriately.

4. In the HTML file, reverse the order of the columns by using the flex-flow: column-reverse value, as follows:
flex-flow: column-reverse; -ms-flex-flow: column-reverse; -moz-flex-flow: column-reverse; -o-flex-flow: column-reverse; -webkit-flex-flow: column-reverse; 

5. Re-save the file and open it in the Web browser. The display should look similar to Figure 5-15.

6. Open the file in each of the other major Web browsers to see if the file renders appropriately. 7. Close the file but leave the editing tool and Web browser open if you complete the next exercise in this session.

ORDERING AND ARRANGING CONTENT 

You can control the order and arrangement of the contents of a flexbox using the flex-order property. This property rearranges child items within a flexbox. To do so, the property assigns child boxes to groups, and then controls the order in which they appear in a layout, beginning with the lowest numbered group. Let’s see how the flex-order property works. The following CSS code and markup creates three child boxes in a flexbox: <!doctype html> <html> <head>  <meta charset="utf-8">  <title>Flexible Order Example</title>  <style media="screen">     div { display: flexbox; display: -ms-flexbox;
display: -moz-flexbox; display: -o-flexbox; display: -webkit-flexbox; flex-flow: row; -ms-flex-flow: row; -moz-flex-flow: row; -o-flex-flow: row; -webkit-flex-flow: row; height: 200px; padding: 1em; background-color: pale-goldenrod; font: bold 100%/1 sans-serif;     }   div>div {     width: 100px;     margin: 1em;     height: 100px;     background-color: dodgerblue;     text-align: center;     color:  white;     font-size:  x-large;     line-height: 100px;     }   </style> </head>
<body>  <div>    <div>Keys</div>    <div>Phone</div>    <div>Wallet</div>  </div> </body> </html> 

The preceding HTML style element includes the media=screen attribute, which is a media query. Media queries enable you to adapt an HTML document to end-user devices. HTML media element types include aural, braille, handheld, print, projection, screen, tty, and tv. The same syntax can also be used with the @media and @import CSS rules. The @media all rule indicates that the CSS should be applied to all output media.

The flex-order property places child boxes into ordered groups. The default group is 0. You declare groups and assign a number to them in CSS using the flex-order property, and any child items not explicitly assigned to a group remain in group 0, and declared groups 

appear before group 0. So, to reorder the child boxes so that the Keys and Wallet boxes appear before the Phone box, add this code to the bottom of the style section: div>div:first-child,   div>div:last-child {     flex-order: 1;     -ms-flex-order: 1;     -moz-flex-order: 1;     -o-flex-order: 1;     -webkit-flex-order: 1;     } 

EXPLORE THE FLEX-ORDER PROPERTY GET READY.

To explore the flex-order property, perform the following steps: 1. In an editing tool or app development tool, create an HTML document based on the code shown previously for Figure 5-16. 2. Save the file as L5-flex-order-exercise.html. 3. Add the following code to the end of the style section: div>div:first-child,   div>div:last-child {     flex-order: 1;     -ms-flex-order: 1;     -moz-flex-order: 1;     -o-flex-order: 1;     -webkit-flex-order: 1;     } 4. Save the file and view it in the Web browser. It should look like Figure 5-17. 5. Open the file in each of the other major Web browsers to see if the file renders appropriately. Note which browsers support the flex-flow and flex-order properties. 6. Close the file but leave the editing tool and Web browser open if you complete the next exercise in this session.

Using Grid Layouts to Establish Content Alignment, Direction, and Orientation
Grid layouts are similar to spreadsheets in that they use columns, rows, and cells, but you can create many different types of layouts that, in the end, don’t look like a spreadsheet at all.THE 
Grid layouts are best suited for more complex layouts than flexbox can easily handle. Game interfaces are good candidates for grids, as are newspaper layouts (see Figure 5-18). A grid layout enables you to position rows and columns for precise control over your layout, with a fraction of the CSS code as would be required using older techniques. Another benefit of grids are their modularity. To move blocks of content from one part of a page or application to another, you simply move some code lines in CSS.

You define a grid element (layout) using the display:grid or display:inline-grid CSS property. This creates the container for the layout. Child elements of a grid are called grid items, which you position and size according to: 
• Grid tracks: The columns and rows of the grid; you define grid tracks using the grid-rows and grid-columns properties 
• Grid lines: The horizontal and vertical lines that divide columns or rows 
• Grid cells: The logical space used to lay out grid items, similar to a cell in a spreadsheet 

With all of the available properties, you might guess that you can specify the structure of the grid element and position and size grid items in multiple ways.

Creating a Grid Using CSS Properties for Rows and Columns

The CSS properties display:grid (or display:inline-grid), grid-columns, and grid-rows are used to create grid structures. The size of columns and rows can be fixed or flexible.
The primary properties that create a grid are display:grid (or display:inline-grid), grid-columns, and grid-rows. You can define columns and rows to have a fixed size, which doesn’t resize when the screen size changes, or a fractional size relative to the grid. Fractional sizes are defined using fr, so a row defined as 2fr will be twice the size of a row defined as 1fr. The value 1fr stands for "one fraction." You can also use the "auto" value to make columns or rows fit their content. The following CSS code and HTML markup provide an example of a grid layout. The -ms- vendor prefix is included at the beginning of all grid-related constructs because, as of this writing, only Microsoft Internet Explorer 10 supports grid layouts

<!doctype html> <html> <head>  <meta charset="utf-8">  <title>Grid Example</title>  <style type="text/css">    #grid { background: palegoldenrod; border: silver; display: -ms-grid; color: white; font-family: sans-serif; font-weight: bold; -ms-grid-columns: 150px auto 2fr; -ms-grid-rows: 50px 6em auto;    }    #logo { background: dodgerblue; -ms-grid-row: 1; -ms-grid-column: 1;    }    #item { background: olive; -ms-grid-row: 2; -ms-grid-column: 2;    }  </style> </head>
<body>  <div>    <div id="grid"> <div id="logo">Logo</div> <div id="item">Item</div>    </div>  </div> </body>
</html> In this example, the grid structure has three columns and three rows. The first column is a fixed width of 150 pixels. The second column adjusts its width to fit the column’s content, as indicated by the auto keyword. The third column is two fraction units of the remaining space in the grid. The first row is 50 pixels tall, the second row is 6 ems tall, and the third row adjusts to fit the content of the row.

CREATE A SIMPLE GRID LAYOUT GET READY. 

To create a simple grid layout, perform the following steps: 
1. In an editing tool or app development tool, create an HTML document based on the code shown previously for Figure 5-19. 

2. Save the file as L5-grid-exercise.html. 

3. Open L5-grid-exercise.html in Internet Explorer 10. Rendering the HTML file in any other browser will produce unexpected results. 

4. Add another item to the grid so a cell appears in the third row and third column. To do so, insert the following at the end of the style section:
#item2 {  background: orange;  -ms-grid-row: 3;  -ms-grid-column: 3;  } 

5. Insert the following after the item div in the body section: <div id="item2">Item2</div>

6. Save the file again and view it in a Web browser. The layout should look like Figure 5-20.

7. Close the editing tool and the Web browser

Understanding Grid Templates

The W3C’s CSS Grid Template Layout Module presents another approach to grid layouts by creating a grid template, which is like an empty table into which data can be flowed. A grid template uses alphabetical characters to represent the position of items in a grid. You use the grid-position property and assign an alphabetical character as a position value. The following examples show the grid-position property defined for four items: news { grid-position: a; } weather { grid-position: b; } sports { grid-position: c; } events { grid-position: d; } After assigning positions, you create a layout using strings of characters. A string equals a row, and each character in the string is a column. For example, to create a grid with one row with four columns that size to fit the content, you would use the following syntax: div { grid-template: "abcd"; grid-rows: auto; grid-columns: auto;}Although this example used the auto keyword, you can use any of the values for grid-rows and grid-colums as listed in Table 5-2. The specification for grid template layouts is very much in draft format and isn’t supported by any Web browsers at the time of this writing. However, you might come across grid templates on the MTA 98-375 exam. Therefore, you should check the latest W3C CSS Grid Template Layout Module specification when preparing to take the exam.


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. <