Member Avatar for rajesanthu
rajesanthu -8 Light Poster

NB:EXCUSE ME EXPERTS....,,,,THESE TIPS ARE ONLY FOR BEGINNERS...

1.TRY TO FRAGMENT YOUR WHOLE PAGE SIZE INORDER TO ARRANGE DATAS BEAUTIFULLY
We can use the <span> tag for this fragmentation
for Eg-:
Main Banner-At Top Center

 <span style='position:absolute;left:120px;top;5px;width:990px;height:69px;'>
 <img src="mainbanner.gif"/>/*To Add The Animated Banner*/
 </span>

Left Side Column For Links

  <span style='position:absolute;left:0px;top:69px;width:340px;height:640px;'>
  <table width="340" height="640">
  <tr>
  <td valign="top">
  <a href="link1.html">Link1</a> 
              .
              .                    /*Link to Other Pages*/
              .
   <a href="link2.html">Link2</a>
   </td>
   </tr>
   </table>
   </span>

The Body-Central Area Below Top-Center Banner And Above Copyright Area

   <span style='position:absolute;left:340px;top:69px;width:650px;height:580px;'>
   <table width:650" height="580">
   <tr>
   <td valign="top">
   <img src="bodyofpage.jpg"/>
   </td>
   </tr>
   </span>

Copyrght Area-Bottom most part of the page...

   <span style='position:absolute;left:120px;top:640px;width:990px;height:100px;'>
   <center>
    <a href="link1.html">Link3</a> 
              .
              .                    /*Link to Other Pages*/
              .
   <a href="link2.html">Link4</a>
   &copy;Copyright@yourwebsie.com
   </center>
   </span>

1.TRY TO APPLY STYLES TO TEXTS & HEADINGS

Using Class Method
Below the <title> tag and inside the <head> and </head> the styles can be defined.
or you can just make another CSS file.
For defining styles with in the page do as follows

<html>
<head>
<title>
 <style>
   .class1
    {
     font-family:Comic Sans Ms;
     font-size:20pt;
     text-align="center";
     color:black;
     }
</style>
</head>
<body> 
<p class="class1"> /*applies style of class1 for the texts inside*/
Using Styles by class method
</p>
</body>
</html>

Inline Styles
This is much simple

 <h1 style="font-family:Comic Sans Ms;color:white">
  Content text
 </h1>

Make Use of These Tips..........
This is your friend,,,,
Rajeesh.N.Santhu

Edited by mike_2000_17 because: Fixed formatting
  • 1 Contributor
  • 0 Replies
  • 130 Views

Dani AI

Generated

Good starter effort from — breaking a page into regions is exactly what layout is about. A quick modern refinement: avoid brittle absolute positioning and table-layouts for whole-page structure. Those work for fixed-size mockups but cause maintenance, accessibility, and mobile problems. Prefer semantic HTML (header, nav, main, aside, footer), an external stylesheet, and CSS Grid/Flexbox so the page adapts to different screen sizes and assistive tech.

A minimal, maintainable pattern (HTML + external CSS) keeps structure clear and makes responsive tuning simple:

<!-- index.html -->
<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>Site banner</header>
    <nav>Primary links</nav>
    <aside>Sidebar links</aside>
    <main>Main content</main>
    <footer>Copyright info</footer>
  </div>
</body>
</html>
/* styles.css */
:root{--max:1100px;--gap:1rem}
*{box-sizing:border-box}
.container{max-width:var(--max);margin:0 auto;padding:var(--gap);display:grid;gap:var(--gap);
  grid-template-columns:250px 1fr;
  grid-template-areas:
    "header header"
    "nav nav"
    "aside main"
    "footer footer";}
header{grid-area:header}nav{grid-area:nav}aside{grid-area:aside}main{grid-area:main}footer{grid-area:footer}
@media (max-width:700px){.container{grid-template-columns:1fr;grid-template-areas:"header" "nav" "main" "aside" "footer"}}

Troubleshooting and next steps: set box-sizing: border-box, make images responsive with max-width:100%, add meaningful alt text, test with browser DevTools and real devices, and validate HTML/CSS to catch errors. For learning and reference, see the MDN guides on Flexbox and Grid (Flexbox, Grid) and validate at the W3C validator.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.