PDA

View Full Version : I Need Help Making a WebPage


Drag-On14
03-11-2016, 12:46 AM
So I drew a layout for a webpage I'm trying to make, but I'm not the most knowledgeable about HTML. If I showed you my layout, would you help me with the code?
Old Manus
03-11-2016, 08:14 AM
Yes.
Drag-On14
03-11-2016, 12:27 PM
Yes.
67597
Old Manus
03-11-2016, 12:50 PM
Oh wow, you weren't joking when you said you drew it :monster: What's your knowledge of HTML like right now? Some of these things, like the carousel would need Javascript/jQuery to make it work. Stuff like user accounts and search mean it would need some server scripting like PHP or ASP.NET.
Drag-On14
03-11-2016, 12:57 PM
Oh wow, you weren't joking when you said you drew it :monster: What's your knowledge of HTML like right now? Some of these things, like the carousel would need Javascript/jQuery to make it work. Stuff like user accounts and search mean it would need some server scripting like PHP or ASP.NET.

I know the basics, but I'm not sure how to put it together. I'm not working on accounts, carousels, or search engines right now. I just want areas to look like that for now. I'm mostly working with sections and images. Right now, I'm working just the overall structure, but I do want a few links to work, most preferrable the top links.
Old Manus
03-14-2016, 01:50 PM
I think if you're planning on doing the server side code later, you should start small. Forget the login box and carousel for now. The HTML structure shouldn't be too complicated, but you can't move things around the page and align them like that without CSS.

At a fundamental level you'll need a <div> tag for the header, for the horizontal menu, for the main content container, the right hand menu, and the footer (though you can use the <footer> tag for that). Give them all an ID. As far as CSS goes you'd probably need to give the right menu div a float:right property and the main content div a float:left and put them all in a same container div.
Drag-On14
03-14-2016, 03:11 PM
I'm trying the float property, but nothing's happening. here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ShowCase.com</title>
</head>
<body>
<div id="header">
<a href="Home.html">
<img border="0" alt="Home Page" src="logo.png" align="left" width="100">
</a>
<center><h1>SHOWCASE.COM
<img border="1" alt="Login" src="login.jpg" align="right" width="100"></h1>
</div>

<center><div id="mainmenu">
<a href="archives.html">ARCHIVES</a>
<a href="discussionboard.html">DISCUSSION BOARD</a>
<a href="faq.html">FAQ</a>
<a href="contact.html">CONTACT</a>
<a href="about.html">ABOUT</a>
</center>
<center><h1>HOME PAGE</h1></center>
<div id="content">
<table width="800" border=1>
<tr>
<td rowspan="2"><img alt="White Bird by Alma Roa" src="whitebird.jpg" width="100%"></td>
<td><center><h1>White Bird</h1> With such detailed brushwork, eye-catching highlights, and eerie background for its mystical atmoshphere, this proves to be a beautiful work of fantasy.
<p><img alt="avatar" src="avatar.jpg"> Alma Roa</p>
<h2>SEE MORE >>></h2>
</table>
<table width="700" border=1>
<tr>
<td><img alt="Zelda by Bellhenge" src="zelda.jpg" width="100%"></td>
<td><img alt="Landscape by Ween" src="photo.jpg" width="100%"></td>
<td><img alt="Fighting Birds by Sara Mary" src="birds.jpg" width="100%"></td>
<td><img alt="Dragon Gem by Ron White" src="gem.jpg" width="100%"></td>
</tr>
</table>
<h3 align="right">NEXT>>></h3>
<h2>ARTICLES/WRITING</h2>
<table border=1>
<tr>
<td align=center><h3>Deciphering Compact Galaxies in Young Universe</h3>Researchers have discovered about 80 young galaxies in the early universe... <h3>SEE MORE>></h3>
<td align=center><h3>Pretending, Acting, and Lying</h3>Hey there. I'm James. I'm 21 at the time of writing this essay, and I was 20 at the time of realizing essays aren't...<h3>SEE MORE>></h3>
<td align=center><h3>Foldable Material that can Change size, Volume and Shape</h3>A new type of foldable material has been designed that is versatile, tunable and self actuated...<h3>SEE MORE>></h3>
<td align=center><h3>5 Tips for Writing Your Story's Inciting Incident</h3>Once you have completed your Beginning plot-point, in which your establish the beginnings of your plot...<h3>SEE MORE>></h3>
</tr>
</table>
</center>
</div>

<div id="sidebar">
<h3>Browse All</h3>
<h4>Visual Arts</h4>
<ul class=”mainmenu” float="right">
<li>Traditional</li>
<li>Digital</li>
<li>Animation</li>
<li>Photography</li>
<li>Film</li>
<li>Comics</li>
</ul>
<h4>Literature</h4>
<ul class="mainmenu">
<li>Poetry</li>
<li>Novels</li>
<li>Journals</li>
</ul>
<h4>Articles</h4>
<ul class="mainmenu">
<li>Science</li>
<li>History</li>
<li>Philosophy</li>
<li>Reviews</li>
<li>Technology</li>
</ul>
<h4>Browse Newest</h4>
<ul class="mainmenu">
<li>Last 24 Hours</li>
<li>Last 3 Days</li>
<li>Last Week</li>
<li>Last Month</li>
</ul>
</div>

<footer>2016 ShowCase.com ALL RIGHTS RESERVED</footer>
</body>
</html>
Old Manus
03-14-2016, 05:07 PM
You need to apply the float:right property to the whole sidebar div, rather than just the list (as that will just make the list float on the right within the sidebar div which isn't in any specific position. Similarly you should apply float:left to the 'content' div, so that they both float. Then you'll find that the ARTICLES/WRITING table is taking up the full width of the page, so you should also set the width of the 'content' div to something like 85% to give the sidebar some room (width: 85%).

Also, it's bad practice to add styling inline with the HTML. You should put your styling in a CSS file and add it above the <body> tag like so:



<head>

<link rel="stylesheet" href="~your css file here~.css" type="text/css" />
</head>
Drag-On14
03-14-2016, 05:25 PM
You need to apply the float:right property to the whole sidebar div, rather than just the list (as that will just make the list float on the right within the sidebar div which isn't in any specific position. Similarly you should apply float:left to the 'content' div, so that they both float. Then you'll find that the ARTICLES/WRITING table is taking up the full width of the page, so you should also set the width of the 'content' div to something like 85% to give the sidebar some room (width: 85%).

Also, it's bad practice to add styling inline with the HTML. You should put your styling in a CSS file and add it above the <body> tag like so:



<head>

<link rel="stylesheet" href="~your css file here~.css" type="text/css" />
</head>


Does float count as a style? What would it look like in the code? I tried this: #dv id{float:right}, but it didn't work. I've been running the code in the WC3 validator and it told me to remove things like image properties and alignment tags because they're obsolete.
Old Manus
03-14-2016, 06:08 PM
Basically any property in a HTML tag that isn't 'id', 'class' or sometimes 'visible' should go in the CSS.

Try putting the following in your CSS file:


#sidebar
{

float:right;
}

#content
{

float:left;
width:85%;
}


'id' tags in the HTML start with a # in the CSS, while 'class' tags in the HTML start with '.'
Drag-On14
03-21-2016, 04:27 PM
Basically any property in a HTML tag that isn't 'id', 'class' or sometimes 'visible' should go in the CSS.

Try putting the following in your CSS file:


#sidebar
{

float:right;
}

#content
{

float:left;
width:85%;
}


'id' tags in the HTML start with a # in the CSS, while 'class' tags in the HTML start with '.'

I was able to bring it all together. I really appreciate this. Thanks.