Monday, April 20, 2015
Bellow is a sample of a basic skeleton all browser of all vintage instantly recognize. Your operating system cut, copy and paste system is always available you can make a copy pasted to any basic word and word processor. Name the file html table template and save in your system.
Different vintage operating systems and different operating systems have different ways to convert word pads to a html web page document
<html>
<head>
<body>
Text
<table>
<tr>
<td>text</td>
</tr>
</table>
</body>
</head>
</html>
When you open the web page you can view the source code your browser will display exactly whet you see there. It consists of the basic html, head, and body tags. I included the word text in two places one displayed outside and one inside the table arrangement. Elements with no slashes begins new elements and with slashes ends them.
For example browsers read any declarations ( not shown in my basic skeleton ) followed by the html, head and body. No slashes begins new tables: new table rows: new table data's respectively. Slashes end table data's, ends table rows, ends tables, ends the body, ends the head and finally ends the html sequence respectively. When typing by hand think no slashes begins each element and the right leaning slashes end each one.
Any right leaning slash typed in the wrong place such as in a begin element or left out at of an any end element makes a mess of the intended layout. Another important factor to bear in mind is the left and right pointing brackets.
Everything typed between the inward brackets is displayed on screen and correspondingly typed between outward pointing brackets is not displayed. ( or hidden if you like ). Operating on the principle everything that is displayed. ( including image attributes ). This method is a in line system here applied to tables. Today's browsers only recognize Cascade Style Sheet ( CCS ) formatting of text. In line CCS is favourite of bloger site scripts.
Typing html manually operating system cut, copy and past systems allow you can past the template into you operating system word pad. word or any other word processor. Different vintages and operating systems have different ways of converting words into html documents. See manuals on you operating system converting a word to html web page.
Remember to keep all text and image attributes between the inward pointing tags. Anything between the out ward pointing brackets browser treat as layout information only not displayed. Keep the CCS text formatting in line at first word of every sentence.
The sample bellow shows 5 table data cells.
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
However 3 is ideal to represent an on line like a open book. The begin table row tag tells browsers to display the top table data the as the left page the center table data left blank for the spine effect and the bottom table data displaying the right hand page. All that is required is the addition of the typing between the outward pointing tags the table spacing attribute instructions. Set the text cursor and make a space on the right of every table data between the outward pointing tags the table spacing attributes in CCS script .
<table>
<tr>
<td>Left page</td>
<td>blank center for the spine effect</td>
<td>Right page</td>
</tr>
</table>
Filling in the details in word when you convert to an html web page browsers automatically fill in the cell size attributes. HTML editors fill in the specified details as you type,
You can take advantage of the center blank to fill in with your imagination images attributes representing the spine of the open book style. Or the top and bottom table data cells the left and right text of the image image effect in the center. It is a help in laying out professional looking page the top table data the left navigation bar, the bottom table data the main body, or if you choose to go for 3 the bottom table data cell for additional side bars bars. Keeping all text and image attributes between all inward pointing tags and the htmll attribute hidden between the outward pointing tags you should have no trouble with page layout. The begin and end table row tags rearranged as shown here browsers display the table data cells left to right across the screen. The set shows end table row top of every begin table data between every begin and end table data cells <table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tabl> Editing the basic skeletons insert the text cursor between the inward pointing tags of the table data's and start typing
Paragraphs are formed by inserting a pair of inward pointing brackets one without a slash begins a new paragraph and the other a slash ending the paragraph like this <p></p>. The lustration bellow shows the begin table data top of the list end table data at the bottom. Once again your operating system cut copy and past system you can make multiple copies of the table data cells like this
<table>
<tr>
<td>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</td>
<td>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</td>
<td>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</td>
</tr>
</table>
When you hit the enter key in html editors they automatically create paragraph tags. They have settings that you can change the way they create single or double spaces automatically. Doing html manually keeping your text and html attributes Including ( image attributes ) between all the inward pointing tags you will have no trouble with page layout.
Missing a line separating paragraphs manually can be created by using blank paragraph tags. Alternatively the break tags exactly as you would the paragraph tags Incorrectly placed break takes your browser will make a mess of your layout.
You can create a entire table pasted between the inward pointing brackets called nesting as shown here. In other words it is a table inside a table.
<table>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
As you can see at this stage tables have become time consuming and completed specially with the addition of image and table spacing formatting. The trick is to observe the inward and outward pointing of the brackets. Anything typed between the inwards is displayed and anything between the outwards is not.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment