Need some help with HTML and CSS

[Diplodocus]

Hey all,

How would you design this particular webpage? Care to explain the steps you go through (for a beginner) and post the codes and whatnot, so I can understand.
Anyone up for helping this poor fella' out?

 

[Rob Whisonant]

How much HTML do you already know?

 

[webdesign]

Hey all,

How would you design this particular webpage? Care to explain the steps you go through (for a beginner) and post the codes and whatnot, so I can understand.
Anyone up for helping this poor fella' out?

Ok, you can follow these tips to make codes and build a same page as your screenshot. If you have that page URl, PM me the link and I can show you in details how to build it.

First two paragraphs, you will use h3, h2, and P html tag.

For examples:

<h3>Webmaster Sun</h3>

<p>Webmaster Sun is a forum where you’ll find in-depth discussions and resources to help you succeed on the web whether you are new or experienced. You’ll find it all here. </p>

<h2>Hello members</h2>

<p>Welcome to the forum</p>

<div style="float:right;color:red;">HTML is fun</div>

for the link below

<a href="https://www.webmastersun.com/forums/36-New-Member-Introductions" title="New Member Introductions">New Member Introductions</a>

<img src="your_image_link" alt="image name">

<h3>Some tags</h3>

For your table

<table width="200" border="1">
  <tr>
    <td>forums</td>
    <td>tags</td>
    <td>posts</td>
  </tr>
  <tr>
    <td>1</td>
    <td>make money online </td>
    <td>500</td>
  </tr>
  <tr>
    <td>2</td>
    <td>SEO</td>
    <td>600</td>
  </tr>
  <tr>
    <td>3</td>
    <td>social media </td>
    <td>700</td>
  </tr>
</table>

<div style="float:right;width:250px;background-color: yellow;">
<h3>Next steps:</h3>
<ul style="display:block;">
<li>HTML</li>
<li>CSS</li>
<li>Web Development</li>
</ul>
</div>

<footer>
  <div style="text-algin:center;background-color:cyan;margin-bottom:15px;"><h3 style="padding:10px 0px;">Web Design</h3></div>
  <div><h2>Webmaster Sun</h2></div>
</footer>

Now you can paste these codes into your HTML file and see how it works!

What things I missed from your image above? let me know if you have any questions.

Besides, you can use Bootstrap CSS framework to make web site layouts faster and more easier!

Hope it helps!

 

[Diplodocus]

It helps a bunch! Thank you very much, I need the green image that shall be placed above the table and see where it went wrong in the screenshot below. It's nearly finished, though.
Many, many thanks for your help; I can understand it, now.

 

[webdesign]

webdesign

You mean you need an image above yellow table on your screenshot?
It is a green block or a green image? make your question clear then I can help you out.

 

[Diplodocus]

Yes, the W3/CSS ilage, located above the table (see original post for screenshot) and the lay-out (in the second screenshot) is a tad muddled up, what happened?

 

[webdesign]

webdesign

Have you read html codes that I mentioned in this post https://www.webmastersun.com/threads/14691-Need-some-help-with-HTML-and-CSS?p=87901#post87901

Using this html code

<img src="your_image_link" alt="image name">

And it should be showed like this



In other words, you can read html tutorials from Mike's link to understand how to build a basic html page with html codes

After that, you can build whatever html templates you want for your websites.

I hope that helped.

 

[Mike001]

One of the important aspects in page layout for a web page is remembering normal document flow. What that means is that the elements (or tags) are added to the page in the order that they fall in the flow. The flow goes from top to bottom.

Normal document flow can impact how items are floated on the page and how they appear in the the browser window. There are a lot complicated ways to change normal document flow but for a beginner I would recommend laying the page structure out, top to bottom, and positioning your items as they appear.

I have some really good videos that you can watch for FREE on how all this works in the HTML tutorial section of my website. Here is a link:

Understanding HTML

Also if you have any question just drop me a contact from the site and I will respond.

There are sections of the site that cover HTML, CSS, PHP, BootStrap and JavaScript.