HTML Blocks and Layout


Most HTML elements are defined as block level elements or as inline elements.


 Block level elements normally start (and end) with a new line when displayed in a browser.

 Examples: <h1>, <p>, <ul>, <table> 

 Inline elements are normally displayed without starting a new line.

 Examples: <b>, <td>, <a>, <img>

 The HTML <div> Element

 The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.

  The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.

 When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.

 Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the <table> element. The purpose of the <table> element is to display tabular data.

 The HTML <span> Element

 The HTML <span> element is an inline element that can be used as a container for text.

 The <span> element has no special meaning.

 When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

HTML Layout


Web page layout is very important to make your website look good.Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
          Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

HTML Layouts - Using <div> Elements

The div element is a block level element used for grouping HTML elements.

The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:


<!DOCTYPE html>
<html>
<body>

 <div id="container" style="width:500px">

 <div id="header" style="background-color:#00FFFF;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

 <div id="menu" style="background-color:#0000FF;height:200px;width:100px;float:left;">
<b>Menu</b><br>
JAVA<br>
HTML<br>
Android</div>

 <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

 <div id="footer" style="background-color:#00FFFF;clear:both;text-align:center;">
Copyright © futureX</div>

 </div>

 </body>
</html> 

« Previous Chapter                                                                                                                                          Next Chapter »

0 comments:

HTML Lists


The most common HTML lists are ordered and unordered lists:

 An ordered list:

     1. The first list item
    2. The second list item
    3. The third list item
An unordered list:
HTML Unordered Lists

 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

 The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>


  • Coffee
  • Milk
You can add any style as
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

 The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Other types are
<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i">

HTML Definition Lists

 A definition list is a list of items, with a description of each item.

 The <dl> tag defines a definition list.

 The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

 <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

 Seen as
Nested List

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>


« Previous Chapter                                                                                                                                          Next Chapter »

0 comments:

HTML Tables


Tables are defined with the <table> tag.

 A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

 Table Example

 <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML Tables and the Border Attribute

 If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

 To display a table with borders, specify the border attribute:

 <table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

HTML Table Headers


Header information in a table are defined with the <th> tag.

 All major browsers display the text in the <th> element as bold and centered.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in your browser:

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

« Previous Chapter                                                                                                                                          Next Chapter »

0 comments:

Subscribe to: Posts (Atom)
Copyright © 2013 futureX | Blogger Template by Clairvo