Need some help with HTML and CSS

Diplodocus

New member
Joined
Sep 22, 2016
Messages
4
Points
0
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?

Opdracht2 - vb3 slides (1).jpg
 

webdesign

New member
Joined
Jul 5, 2012
Messages
229
Points
0
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:

Code:
<h3>Webmaster Sun</h3>
Code:
<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>
Code:
<h2>Hello members</h2>
Code:
<p>Welcome to the forum</p>
Code:
<div style="float:right;color:red;">HTML is fun</div>
for the link below
Code:
<a href="https://www.webmastersun.com/forums/36-New-Member-Introductions" title="New Member Introductions">New Member Introductions</a>
Code:
<img src="your_image_link" alt="image name">
Code:
<h3>Some tags</h3>
For your table

Code:
<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>
Code:
<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>
Code:
<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

New member
Joined
Sep 22, 2016
Messages
4
Points
0
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.

Untitled.png
 

Diplodocus

New member
Joined
Sep 22, 2016
Messages
4
Points
0
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?
 

Mike001

New member
Joined
Apr 27, 2016
Messages
578
Points
0
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.
 
Older threads
Replies
9
Views
5,931
Replies
16
Views
6,324
Replies
23
Views
7,778
Replies
10
Views
4,820

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top