Embarrassed to ask. Petpage Coding Help

[NeoLover854]

So. I'm am the beginner of all beginners at HTML. I can't even read a tutorial right. I've tried Neopets own as well as several other places, but I can't find anything that shows what I want.

 

I was wondering if anyone here knows how to do a basic Petpage. I'm not asking for a premade one (I'd like to do it myself, so I can learn how to do it so I can do the rest of my petpages, and I can use it without feeling guilty that I'm using someone elses hard work). I've got the basics down, but I can't find a tutorial that shows how to do this.

 

Example one.

 

Example two.

 

See how the middle is separated from the background? That's what I want. There's the background, a top picture, then the middle part that's a different color than the background, and holds all the text. I've tried doing it myself, but failed. I even tried picking apart the code to try and figure out what did what, but that didn't work either.

 

Does anyone have any idea how to do that? I'd really appreciate any help here.

[Xepha]

You will want to look into DIVs. <div></div>

 

I can pull a sample code for you, though if you don't understand what it does it's kinda pointless :P

[NeoLover854]

I might understand enough, I've been working with it for a few days (coding) so I'll probably recognize a little. A sample code might help me. :)

 

DIVs... now those I've never heard of, would you mind enlightening the newbie and explaining what they're used for? :whistle:

 

Yeah, that was subtle....

[Emily]

I'll leave the explaining to V because she's a graphics genius, I just wanted to encourage your learning of coding!

 

Neo was where I first started learning HTML as well. It can be confusing, but starting small and building on that knowledge is a great way to go. Good luck! And don't ever feel embarassed to ask for help. I bug people for help all the time. Loudly and obnoxiously sometimes :P

[NeoLover854]

Heh, thanks. :D I know a lot more than I did when I started, it's starting to look like more than a bunch of gibberish this time around! I just can't seem to grasp the coding needed for a petpage. Hopefully I'll get it one day. :) I tried looking up DIVs, but I'm not quite sure how to use them in actual coding...

[Emily]

Divs are essentially a way to format things on a page with CSS with less repetition than with plain HTML.

 

For example, say you want 6 lines of text aligned to the left of your page and bold in blue and 6 alternating lines aligned to the right of your page in pink italics. Normally, you'd have to put all 12 in tags (because they're alternating) that specify alignment, colour and bold/italic.

 

Instead, you can create 2 divs with "names" like "blueleft" or "pinkright." When you create the one div, you write out the font size, colour, alignment and whatever else ONCE for each div(instead of 6 times for each colour). Then, anytime you want your font/images to behave that way, you just need a small line that says

 

<div id="blueleft">

<div>

YOUR TEXT

</div>

<.div>

 

instead of writing out

 

<p align="left"><font color="blue" size=# face="times new roman"><b>YOUR TEXT</b></font></p>

 

every time you want to go back to a certain format.

 

This is a really simple (and kind of not great) example. Divs can be used for a ton of things, including replacing tables. As an example of this, most of TDN guides list prizes using divs instead of tables so things can be added/moved around without having to redo entire tables/rows.

 

I only started using these when I started working on content here. But they changed my life xD

 

(Someone can correct me if I've mucked something up. It's likely >.<)

[Xepha]

okay this one is quite simple I think...

 

From: http://www.neopets.com/~Catheldina

A page I designed during Daily Dare 2 years ago, as I just wanted a place to quickly paste my TDN guide on.

 

I have removed everything that could have confused you.

 

Just ask questions if you have any.

 

<style>
.sf {
display: none;
}
body {
background-color: #d0d0d0;
text-align: center;
}
body, td, p {
color: #000000;
font-family: verdana;
font-size: 11px;
line-height: 16px;
}
a:link, a:visited, a:active {
color: #0038df;
font-size: 10px;
border: 0px;
}
a:hover {
color: #0038df;
font-size: 10px;
text-decoration: underline overline;
border: 0px;
}
b {
color: #602f86;
font-size: 12px;
}
h1 {
color: #018ee2;
font-family: verdana;
font-size: 22px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 800;
text-align: center;
}
#container {
margin: 0px auto 0px auto;
width: 600px;
background-color: #FFFFFF;
border: 1px solid #7c7c7c;
}
#lookup-picture {
left: 0px;
top: 0px;
border-bottom: 0px solid #7c7c7c;
}
#mytextbox {
left: 0px;
bottom: 0px;
padding: 0px 5px 0px 5px;
}
#footer {
margin: 0 auto;
width: 700px;
left: 0px;
bottom: -20px;
}
</style>
<div id="container">
<div id="lookup-picture"><img src="//images.weserv.nl/?url=http://kimibaka.free.fr/usulsguide.png" width="600" height="150"></div>

<div id="mytextbox" align="justify">


YOU WRITE CONTENT INSIDE THIS BOX.

</div>
</div>
<div id="footer">
<p align="center">Layout and content by <a href="http://neopets.com/userlookup.phtml?user=xepha">Xepha</a>.</p>
</div><

[NeoLover854]

Thank you both for your help. I might be starting to understand what these things are used for. :)

 

Okay, so, everything goes in the <style> tags. Or at least, in your example almost everything goes in the style tags. Generally, what goes in style tags, and what doesn't? It looks like that stops when the DIV tag starts.

 

What exactly is all that stuff at the very beginning? When I checked out the code from one of my examples, I noticed it had almost the exact same thing, and the DIV code was all the way down at the bottom. That's the stuff that gets me, all the gibberish on top. And, well, everything below it too.

 

I'm sorry if my questions aren't clear enough, I really don't know much about HTML. None of the tutorials I found went into ANY detail on this stuff. :/

 

Make sure to tell me if I'm asking too much. If I'm not careful I'll end up asking questions all night. :D

[Xepha]

Style is for your stylesheet - how you want things to look. So it usually controls position, font-face, colors, background, etc.

The reason why it's a bit awkward is that usually you do a separate document for your stylesheet and link to it inside your HTML page. But Neopets does not allow us to do that, so instead you have to use inline style (that's putting it before your HTML tags)

 

 

More about CSS here: http://www.w3schools.com/css/default.asp

[NeoLover854]

o_O

 

That is going to be a big help. Thank you! Looks like I know what I'm doing for the next three hours. :) Maybe I'll have this down in the next few days.

 

Or at least, maybe I can start my petpage. :D

[Mouseykins]

I just want to note that the site Xepha linked you to, is amazing. I frequent there a lot when I get stuck on something.

Now that I understand divs a little more I find them easy to use.

[NeoLover854]

Oh I know, I was browsing around and noticed it has all kinds of stuff I need. It's super helpful. :D I also love how they have a "try it yourself" button so you can mess around with the coding. This site is exactly what I needed.