Go Back   Smogon Community > Contributions & Corrections > Fifth Generation
Register FAQ Social Groups Calendar Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
Old Oct 10th, 2012, 9:28:07 PM   #1
Jellicent*
Walk without rhythm and you won't attract the worm
is a member of the Smogon Site Staffis a Super Moderatoris a Community Contributoris a Contributor to Smogon Mediais a Contributor to Smogon
 
Jellicent's Avatar
 
Super Moderator
Join Date: Sep 2011
Posts: 1,714
If you walk without rhythm, ah, you never learn
Default HTML DOJO

Cheers, all ^.^

Smogon has a somewhat complicated inner workings that relies on both HTML and SCMS. Every article, analysis, Smog article, Competitor announcement, or hub update requires the use of HTML. Some of you C&C writers might not even realize it, but you're using HTML when you wrap those <p> tags around each of your paragraphs! You're also using SCMS tags when you use [SET], [SET COMMENTS], etc. :P

Between C&C articles, Smog articles, and hubs, we're always on the lookout for peeps with HTML knowledge. There also will likely be some new additions coming soon that will require a lot of HTML, which means a lot of contributors willing to help out with it all. HTMLing for Smogon has its perks as well; it can lead to Pre-Contributor , which can grow into Contributor or Contributor to Smogon Media depending on what you HTML! HTML knowledge is also a requirement for Site Staff , although that badge is given on a need basis. If you are already a badged user, you can view the SCMS to get a better idea of how HTML and SCMS works!

If you're looking to learn HTML, this is a fantastic resource. HTML requires precision, as messing up a single tag can throw your results completely out the window. The best way to get this precision is through practice. Trial and error will eventually get you the results you want, but it's not the most effective method. As such, this dojo will offer up various articles for you to practice HTML on. I'll include an answer key in hide tags as well, so you can compare your results and see what you got wrong. The goal here is to help you learn, so simply C/Ping the answer won't do anything for you. Instead, use this as an opportunity to pick up on a useful coding language to know.

Notepad is a great text editor to use for these practices. It allows you to save your document as a .html file, so you can validate it with this. Notepad also handily uses straight quotation marks (") rather than curly ones (“) that break HTML.

Some handy resources for you:
W3School's HTML Tutorial
The W3C's Validator
W3School's TryIt Editor
Notepad++
Chaos's HTML Primer
Desolate's Intro to SCMS

Those last two might be a bit outdated, but they're still useful overall. For now, get out there and start reading up on this stuff. I'll post up a practice article sometime tomorrow. Feel free to ask any questions here, or you can VM/PM Omicron, sandshrewz, and Jellicent for any help that you need ^.^

Happy HTMLing :)
__________________
^.^

Last edited by Jellicent; Oct 11th, 2012 at 11:11:35 AM.
Jellicent is offline   Reply With Quote
Old Oct 10th, 2012, 9:35:13 PM   #2
TrollFreak
(╮°-°)╮┳━┳ (╯°□°)╯ ┻━┻
is a Contributor to Smogon
 
TrollFreak's Avatar
 
Join Date: Dec 2011
Posts: 1,249
New York born, New York proud
Default

Can I do the practice article?
__________________
Ever wanted to contribute to Smogon?
Visit the Contributions and Corrections forum!
~SNOVERS~




TrollFreak is offline   Reply With Quote
Old Oct 11th, 2012, 2:08:42 PM   #3
Jellicent*
Walk without rhythm and you won't attract the worm
is a member of the Smogon Site Staffis a Super Moderatoris a Community Contributoris a Contributor to Smogon Mediais a Contributor to Smogon
 
Jellicent's Avatar
 
Super Moderator
Join Date: Sep 2011
Posts: 1,714
If you walk without rhythm, ah, you never learn
Default

Ok, let's get this first one rolling! We'll be looking at Oglemi's Smog article "Bottom 10 Most Threatening Pokemon IRL". I won't make you guys do the header and footer stuff, as you only need to know that if you're HTMLing for the Smog (where you can find a great guide by Jumpluff :3 )

This article has some very basic but important tags, including <p>, <h2>, <img> and <a>. These tags are used all of the time on Smogon, so you'll definitely want to make yourself familiar with them. The article itself is rather long, so please post your answers in [hide] tags. Also, just a head's up, when centering something in the Smog, you wrap <div style="text-align: center;"></div> around it~

The answer key
__________________
^.^
Jellicent is offline   Reply With Quote
Old Oct 11th, 2012, 3:50:18 PM   #4
Yonko7
Little kids think life is so easy. That's why they go on and on about their dreams. That's why they never give up.
is a Contributor to Smogon
 
Yonko7's Avatar
 
Join Date: Feb 2012
Posts: 603
Default

Here's my version!

Hai


I noticed that I was able to use <h1></h1> for all of them, and all the headers looked the same size. Also, centering the picture at the end was confusing, but with Jellicent's "hint" it was much easier. ^^

EDIT: After looking at the Key they're all <h2></h2> .-.
__________________

✓| Back in Action |VM for a GP Stamp | VM for a RU rate|
Yonko7 is online now   Reply With Quote
Old Oct 11th, 2012, 4:00:53 PM   #5
Jellicent*
Walk without rhythm and you won't attract the worm
is a member of the Smogon Site Staffis a Super Moderatoris a Community Contributoris a Contributor to Smogon Mediais a Contributor to Smogon
 
Jellicent's Avatar
 
Super Moderator
Join Date: Sep 2011
Posts: 1,714
If you walk without rhythm, ah, you never learn
Default

Normally, the <body> tag would be wrapped around the entire body of a page. You don't need to keep using <body> tags for each paragraph, as <p> already indicates that it's a new paragraph. For this one, <p> tags should also be wrapped around the images to give that added space. Finally, we don't use <body> tags at all (that I know of) for Smogon, as we have a SCMS tag for it, [page], which goes where <body> normally would and requires no [/page].

Also, your image tags are all broken >.>

<img src="http://www.smogon.com/download/sprites/bw/113.png"</img>

Should just look like:

<img src="/download/sprites/bw/113.png" alt="" />

There's no need to have a </img> tag, as it doesn't get wrapped around anything. Instead, you can end the tag with /> to make it complete.

Hope that helped ^.^
__________________
^.^
Jellicent is offline   Reply With Quote
Old Oct 11th, 2012, 4:47:22 PM   #6
Redew
This means war.
is a Contributor Alumnus
 
Redew's Avatar
 
Join Date: Mar 2011
Posts: 370
<@Redew> jellicent <@Redew> how hammered are you <&Jellicent> i am a hammer
Default

HTML Code:
<h2>Introduction</h2>

<p>Last issue, I explored the <a href="/smog/issue20/dangerous_irl">top 10 most dangerous Pok&eacute;mon</a> if they were to exist in real life. The world would be squirming with things looking to kill you at all times of the day as I pointed out in that article. However, there would be a select few that would be on the lesser side of dangerous, and maybe even helpful. Theoretically, you could catch even the most dangerous of Pokémon, assuming technology advanced to the point to where that were possible, and use them for your own destructive purposes. However, there would be a few Pokémon left in the world that wouldn't cause you much harm should you encounter them on your travels. These are the Pokémon you'd want to meet one-on-one in a dark forest with nothing on your person but the clothes on your back.</p>

<h2>10. Farfetch'd</h2>

<img src="/download/sprites/bw/83.png" alt="pokemon" />

<p>Farfetch'd is probably the least dangerous bird that would exist if Pokémon were real. The reason for this is two-fold: they're endangered and therefore wouldn't want to come across you in the wild in the first place, and even if you came across one it wouldn't be able to do much to you besides smack you with its leek (or incessantly follow you signing <a href="http://www.youtube.com/watch?v=1wnE4vF9CQ4">leekspin</a>, which come to think of it is probably the worst thing it could do to you). Though, that's not even that threatening since you can just punt it before if even got close enough to bash you. The best part? If you did come across a Farfetch'd in the wild, it's a free meal! They're supposedly quite a delicacy, which drove them to the brink of extinction in the first place. Getting caught eating a Farfetch'd or even messing with one could land you a cushy place in jail though, which is probably the greater threat here. Should you be lucky enough to try one though, let me know how it tastes. Bon app&eacute;tit!</p>

<h29. >Azurill</h2>

<img src="/download/sprites/bw/298.png" alt="pokemon" />

<p>So here we got a flotation device with a face. Assuming its tail isn't made of rock or something, getting hit by the Thick Fat or Sap Sipper variants probably wouldn't hurt much. And should you need to ford a river, all you need to do is grab one of these mouse monikers and be on your way. You can even use it as a sentient bolas in order to catch some other kind of food source, like a tasty Sawsbuck. Of all of the things that would exist ready to kill you as soon as you reach any amount of water, seeing one of these barbells would be a sigh of relief. Unfortunately, it'd probably cry a lot, which if you've spent any time around a baby you'll know just how annoying that can get. Also beware of the Huge Power variants; I've seen some guys mistakenly mess with one of those and they are now paralyzed from the neck down.</p>

<h2>8. Ledyba</h2>

<img src="/download/sprites/bw/165.png" alt="pokemon" />

<p>Cutest Pok&eacute;mon. Hands down. Favoritism aside, Ledyba is the epitome of weak, monster-sized bugs you'll inevitably stumble across on your adventures. The most harmful thing this cutie could hope to do is maybe put you in a coma from d'awwwing too much. If it tried fighting you it would just look even cuter; can you imagine this thing getting angry and trying to punch you with its tiny arms? Adorable. The only downside to encountering a Ledyba is probably its stink. If you've spent any time in the northwoods in fall, you know what I'm talking about when I say that ladybugs are a fowl smelling species; I can only imagine one 100x the size of the average ladybug smells putrid.<p>

<h2>7. Shuckle</h2>

<img src="/download/sprites/bw/213.png" alt="pokemon" />

<p>So Shuckle is a bug, in a rock. Let's soak that in for a second. It's a worm... with a symbiotic relationship with a rock. That has a habit of changing Berries into Berry Juice. Cool. So it's a living, portable juice bar that's basically incapable of harming you. And they're typically located on beaches. All you need now is a beach towel and a parasol and you're set. It's also fun to think about if you let the Berry Juice ferment for an extended period of time. Getting you and your Pokémon drunk off fermented Sitrus Berry juice would be hilarious.</p>

<h2>6. Luvdisc</h2>

<img src="/download/sprites/bw/370.png" alt="pokemon" />

<p>After lounging on the beach with your Shuckle-bar, you can take a swim with your significant other in the warm tropic waters to search for this love-fish. Not only is it not going to harm you, it's going to bring you ever-lasting love. Talk about a sweet deal, and an awesome aphrodisiac. No longer do you have to spring for the Spanish fly; just meet up with a Luvdisc and BAM, you're ready to go. Though this could come with the side effect of seeing a ton of old couples on the beach ditching their Viagra for some Luvdisc love...</p>

<h2>5. Sunkern</h2>

<img src="/download/sprites/bw/191.png" alt="pokemon" />

<p>Here we have a seed. A tiny little seed. That's only form of defense is to shake its leaves at attackers. What it thinks it's doing by shaking its leaves is baffling; it's almost like if a bear were attacking me and I decided to whip out my junk and shake it at it. Ultimately, the effort will be fruitless. About the only time that Sunkern is even moderately threatening is when it falls randomly out of the sky. From whence it is falling is unclear, but if it has built up enough momentum it could be damaging to your cranium.</p>

<h2>4. Klink</h2>

<img src="/download/sprites/bw/629.png" alt="pokemon" />

<p>Klink is not only never going to hurt you, unless you are massively weak to electrical shocks, it's also the solution to the world's energy crisis. It's a self-sustaining, reliable, electrical resource that takes orders! No longer would the world have to rely on coal or natural gas for electricity; all you would need is a plant of these suckers. What happens when they evolve into Klang and Klinklang? Well all you have to do is take the minigear from Klang and it dies, ensuring that humans would always have control over them. Klink is the complete opposite of dangerous, and it's lucrative!</p>

<h2>3. Magikarp / Feebas</h2>

<img src="/download/sprites/bw/129.png" alt="pokemon" /> <img src="/download/sprites/bw/349.png" alt="pokemon" />

<p>I'm sure everybody and their mother saw this one coming, and it should be obvious as to why. They're nothing but ordinary fish! There's hundreds of real animals that are far more dangerous than these stupid fish, like, I don't know, SHARKS. They're so stupid that they can't even naturally learn any dangerous moves, instead vying for the extraordinary ability to Tackle their foes to death, or heaven forbid, Splash and flop at the feet of their attackers. The only onus with these two is, you just can't mess with them in the fear that they could evolve suddenly into Gyarados or Milotic. But that usually only happens if you club them too much with your other death creatures. So, don't club them and everything should be alright!</p>

<h2>2. Togepi / Togetic</h2>

<img src="/download/sprites/bw/175.png" alt="pokemon" /> <img src="/download/sprites/bw/176.png" alt="pokemon" />

<p>With the rare <a href="http://bulbapedia.bulbagarden.net/wiki/DP142">evil Togepi</a> aside, meeting up with a Togepi or Togetic would be one of the best things to ever happen in your life. How long the happiness lasts from meeting up with these creatures is unclear, but it very well could be a lifetime of pure euphoria and joy. Imagine a life where you never feel sadness or grief. You would be as happy as a Canadian at all times. Get shot in the leg? "LOL, good shot bro! I really need to watch my step! Sorry for wasting your time, eh!" Significant other cheats on you? "Well, there are plenty of other fish in the sea, right eh!" World War III happens? "Well, it was only a matter of time if you ask me."</p>

<p>Not to mention that having one of these bundles of joy nearby would be the cure for depression, and along with that significantly less suicides. Though, this could have an unintentional side effect of creating an army of happy-go-lucky suicide bombers ready and willing to die for their country... Yippeeeeee BOOOM!</p>

<h2>1. Chansey / Blissey / Audino</h2>

<img src="/download/sprites/bw/113.png" alt="pokemon" /><img src="/download/sprites/bw/242.png" alt="pokemon" /><img src="/download/sprites/bw/559.png" alt="pokemon" />

<p>These three are the only purely good Pokémon in the world. While they are capable of shooting thunderbolts and flames out of their mouths like many of the other death creatures, they would never harm another creature without the orders of a mean Trainer. They get their high instead from helping and healing others. If you were to throw a rock at Audino, it would just shoot a Heal Pulse right back. You probably couldn't make them angry if you tried; it's like they have an unquenchable thirst of motherly care. It's unclear if they're capable of performing invasive surgery, but if they can, hospitals would never need to hire another doctor again. And these three would never need to be paid; they'd just be happy bringing care to their patients. Free health care at last!</p>

<div-style="text align: center;"><img src="/media/upload/smog/issue21/bottom10threateningmon.png" alt="yilxart"></div>
Redew is offline   Reply With Quote
Old Oct 11th, 2012, 5:02:40 PM   #7
Noxe
 
Noxe's Avatar
 
Join Date: May 2010
Posts: 127
Default

The only thing I noticed wrong with yours is that like was said earlier, you are missing paragraph tags <p></p> to keep the formatting with your pictures consistent. The only other thing i noticed is every now and then just some errors with tags, which is just mistypes and not so much doing things incorrectly. I think the first one was at azurill i was

<h29. > you obviously meant <h2>, just make sure to check it over once you get done with it.
__________________
Autumn Friendly Rank: 21st(1933) 75W-5L
OT:Noxe

Dear Professor Oak,
Nerf Charmander -Bulbasaur
P.S. Squirtle is fine
Noxe is offline   Reply With Quote
Old Oct 11th, 2012, 5:23:05 PM   #8
Redew
This means war.
is a Contributor Alumnus
 
Redew's Avatar
 
Join Date: Mar 2011
Posts: 370
<@Redew> jellicent <@Redew> how hammered are you <&Jellicent> i am a hammer
Default

Huh, thanks! yeah, I usually check things, but today is not a good day. :( My bad!

Wasn't sure why the <p> tag was used around images, but I guess that explains it!

Thanks :)
Redew is offline   Reply With Quote
Old Oct 11th, 2012, 7:18:52 PM   #9
Brutaka
 
Brutaka's Avatar
 
Join Date: Jul 2011
Posts: 23
Default

Hm. Well, my future career *is* web designer, so why not?
I mean, all I've taken is three high school web design classes, but that's more than some people, and more than anyone in my school, so, again, why not?
Now, it has been awhile, so I was rusty as I was writing this.
...

Anyways, I've got HTML and CSS down fairly well, I think. I know *some* Javascript, but just amateur stuff.

Last edited by Brutaka; Oct 11th, 2012 at 8:36:11 PM.
Brutaka is offline   Reply With Quote
Old Oct 11th, 2012, 7:31:27 PM   #10
Jellicent*
Walk without rhythm and you won't attract the worm
is a member of the Smogon Site Staffis a Super Moderatoris a Community Contributoris a Contributor to Smogon Mediais a Contributor to Smogon
 
Jellicent's Avatar
 
Super Moderator
Join Date: Sep 2011
Posts: 1,714
If you walk without rhythm, ah, you never learn
Default

Not bad, Brutaka. When linking to anything on Smogon, you can drop the "www.smogon.com" part, but keep the / and everything that follows. So, your first link, which went to issue20/dangerous_irl, should have gone to /smog/issue20/dangerous_irl :3

Also, the same holds true for images, so you should have the / before download/etc. for those sprites~
__________________
^.^
Jellicent is offline   Reply With Quote
Old Oct 11th, 2012, 8:34:25 PM   #11
Brutaka
 
Brutaka's Avatar
 
Join Date: Jul 2011
Posts: 23
Default

Quote:
Originally Posted by Fat Jellicent View Post
Not bad, Brutaka. When linking to anything on Smogon, you can drop the "www.smogon.com" part, but keep the / and everything that follows. So, your first link, which went to issue20/dangerous_irl, should have gone to /smog/issue20/dangerous_irl :3

Also, the same holds true for images, so you should have the / before download/etc. for those sprites~
All right for the images, however, aren't both articles in the same folder, the one titled 'smog'? When I do regular sites, if they are in the same folder, you don't name the folder, since it's looking in the folder it's in already.

I suppose the forum sites work differently then?

Anyways...now what? Do we wait for you to post another challenge or something?
Brutaka is offline   Reply With Quote
Old Oct 12th, 2012, 4:01:03 PM   #12
Furai
echoes in the dead of dawn
is an official Team Rateris a Forum Moderatoris a Community Contributoris a Tiering Contributoris a Contributor to Smogonis a Smogon Media Contributor Alumnusis a Smogon Premier League defending champion
 
Furai's Avatar
 
Moderator
Join Date: May 2010
Posts: 2,211
Default

Le Answer
__________________
#gohard | Wolfpack (Ubers RMT)

Last edited by Furai; Oct 13th, 2012 at 11:03:35 AM.
Furai is offline   Reply With Quote
Old Oct 14th, 2012, 6:06:15 AM   #13
sandshrewz
穿山鼠
is a member of the Smogon Site Staffis an Artistis a Forum Moderatoris a Contributor to Smogon Mediais a Contributor to Smogonis a Battle Server Moderator
 
sandshrewz's Avatar
 
Moderator
Join Date: Oct 2010
Posts: 1,515
ASIA
Default

Quote:
Originally Posted by Fat Yonko7 View Post
Here's my version!

Hai


Jellicent covered the image and body tags well, follow what he said :) good use of <div> tag to center the image. I'll explain why h2 tags are used instead of h1. Go to Oglemi's article and press ctrl+u. Scroll down and you'll see that h1 tags are used for the article title. The [title] tag in the SCMS will wrap the title with h1 tags etc so that's where h1 is already used. h1 tags should never be used for anything :) and use [HTML][/HTML] instead of [CODE][/CODE] tags because the HTML tags will also color HTML elements~ :) another thing is the presentability of the HTML. Though it isn't a requirement, having a neat HTML is good as it makes editing and checking it easier, especially when edits need to be made on-site :p it's good practice to have spaces between <p> tags etc, wherever you deem fit. Oh one more since I spotted it last minute. DON'T USE <i> TAGS or <b> TAGS !_! It's spelt out in chaos's thread. Just use <em> and <strong> tags :)
Quote:
Originally Posted by Fat Redew View Post
...


yea you missed <em> tags too. It isn't compulsory to fill up the alt="" . Also you missed the alt="" /> in your last image tag :O Good job overall~
Quote:
Originally Posted by Fat Brutaka View Post
...


this was pretty well done. However you missed the italics used in the Introduction :x also the italics in the Togepi paragraph, you can just use <em> tags :) image tags should be <img src="/download/sprites/bw/113.png" alt="" /> instead of <img src="/download/sprites/bw/113.png" alt=""/>. Space needed after alt="" . And there's no need to use <br /> tags in this case. <p> tags will do as they're another paragraph. One thing to note though, that it's <br /> instead of <br/>. <div> tags can be used instead of <p style="...">. You used <p> probably to add an addditional space between the image and the last paragraph I guess? Doesn't really matter haha. Not much problems overall :)

Quote:
Originally Posted by Fat Furry View Post
Le Answer


You missed <em> tags as well too :O and don't put the image tags in new lines when they're on the same line :O title="" is not needed in this case. :p and yea spaces between <p> tags are good to have to :o you already have smog access so you should know what's the HTML standards~~ :p
Just a heads up. If Pokemon already has the accent in the article, you can leave it as Pokémon instead of Poke&eacute;mon :) good job everyone~ we'll see if Jellicent or Omicron has anything to add on :)
__________________
Member of the GP Team- VM for a check / stamp!
sandshrewz is offline   Reply With Quote
Old Oct 14th, 2012, 12:30:24 PM   #14
Brutaka
 
Brutaka's Avatar
 
Join Date: Jul 2011
Posts: 23
Default

Quote:
Originally Posted by Fat sandshrewz View Post
this was pretty well done. However you missed the italics used in the Introduction :x also the italics in the Togepi paragraph, you can just use <em> tags :) image tags should be <img src="/download/sprites/bw/113.png" alt="" /> instead of <img src="/download/sprites/bw/113.png" alt=""/>. Space needed after alt="" . And there's no need to use <br /> tags in this case. <p> tags will do as they're another paragraph. One thing to note though, that it's <br /> instead of <br/>. <div> tags can be used instead of <p style="...">. You used <p> probably to add an addditional space between the image and the last paragraph I guess? Doesn't really matter haha. Not much problems overall :)
Ah, I didn't even see those italics in the beginning X)

I know I could use <em> or even <i> for italics, but from all I've read, eventually tags like those will be deprecated and they encourage people to style with CSS instead of HTML. So I've been using <span style=""> for styling inline words, because it doesn't send it to a new line like <p> and I use <div> for certain reasons personally. I use <div>'s for organization of layout construction for the most part.

Is the space after the alt="" really 100% necessary? I've never seen any rules about it, and it works. Then again, just because it works doesn't mean it's right, that's something I've learned somewhat the hard way. Same thing for the <br/> and <br />

Yeah, I think I did use the <p> for that extra space, the space was bigger than a single space from the looks of it.
Brutaka is offline   Reply With Quote
Old Oct 14th, 2012, 6:48:13 PM   #15
Jukain
rip numeros
is a Contributor to Smogon Mediais a Contributor to Smogon
 
Jukain's Avatar
 
Join Date: Feb 2011
Posts: 1,793
somewhere could be anywhere
Default

alrighty this is what i've got. i did the w3schools html tutorial up to where i needed to know about because i'm not creating a website.

html


EDIT: now that i've looked at the key:

i used <i></i> instead of <em></em>. i don't think it matters though, i mean, they're the same thing.

i used for the image at the bottom:
<img src="/media/upload/smog/issue21/bottom10threateningmon.png alt="" align="center" /> instead of
<div-style="text align: center;"><img src="/media/upload/smog/issue21/bottom10threateningmon.png" alt="yilxart"></div>

remembering for the future

EDIT2: oh and when will the next article be ready?
__________________
C&C Work | 1k RMT | Contribute! | VM for an OU Rate! | gp member: vm/pm for a check | previously pokemon0078 / aka jew-cane

Last edited by Jukain; Oct 14th, 2012 at 7:36:27 PM.
Jukain is offline   Reply With Quote
Old Oct 17th, 2012, 10:18:58 AM   #16
AmadeusClowergen
 
Join Date: Aug 2011
Posts: 1
Default

I'm a self-professed HTML pro (giggle). How can I help out?
I mean, I'll try after my public exams.
AmadeusClowergen is offline   Reply With Quote
Old Oct 17th, 2012, 11:20:33 AM   #17
V0x
I love mafe
is an Artist Alumnusis a Forum Moderator Alumnusis a Contributor Alumnus
 
V0x's Avatar
 
Join Date: Oct 2010
Posts: 1,381
Default

Jut a note I would use [html] [/ etc. not [code] for hiding HTML because it colors the tags and looks prettier :)

I think div sections are better in case you ever want to put center aligned text captions or whatever, so yeah. It's also easier to notice in the code since align="" at the end is easy to miss.
V0x is offline   Reply With Quote
Old Oct 18th, 2012, 12:14:15 PM   #18
Jellicent*
Walk without rhythm and you won't attract the worm
is a member of the Smogon Site Staffis a Super Moderatoris a Community Contributoris a Contributor to Smogon Mediais a Contributor to Smogon
 
Jellicent's Avatar
 
Super Moderator
Join Date: Sep 2011
Posts: 1,714
If you walk without rhythm, ah, you never learn
Default

Alright, this time we'll take a look at "Trivia" by Zystral from Issue 21 of the Smog. You can expect <p>, <a>, and <img> tags to make a comeback, but we'll also be checking out a few new ones this time. Lists, paragraph breaks, and strong text will all be utilized. Once again, you won't need to do do the Smog header and footer stuff. Just focus on the text from "Hello again Smogonites!" to "Good luck, one and all!"

Answer Key
__________________
^.^

Last edited by Omicron; Oct 19th, 2012 at 6:48:59 PM. Reason: making it pretty :3
Jellicent is offline   Reply With Quote
Old Oct 18th, 2012, 8:13:21 PM   #19
Jukain
rip numeros
is a Contributor to Smogon Mediais a Contributor to Smogon
 
Jukain's Avatar
 
Join Date: Feb 2011
Posts: 1,793
somewhere could be anywhere
Default

I did it I did, I had some trouble aligning the image on the bottom but eventually found what I needed to do on w3.

html


EDIT: after looking at answer key argh I was so close gdi... I had the div tags right but I tried to paragraph align it and didn't have the pixel height/width. btw how would I go about finding those?
__________________
C&C Work | 1k RMT | Contribute! | VM for an OU Rate! | gp member: vm/pm for a check | previously pokemon0078 / aka jew-cane
Jukain is offline   Reply With Quote
Old Oct 19th, 2012, 6:47:29 PM   #20
mzenken
 
mzenken's Avatar
 
Join Date: Mar 2010
Posts: 315
Default

I'm kind of rusty with HTML, but I'll give it a try.

HTML
__________________
<+andrea> when i told him to make his mons level 50
<+andrea> HE WAS LIKE ITS NOT IN THE RULES
<@Huy> i got yelled at for 50s
<@Huy> he asked me if i did real vgc

Last edited by mzenken; Oct 19th, 2012 at 7:03:04 PM.
mzenken is offline   Reply With Quote
Old Oct 20th, 2012, 7:48:36 PM   #21
Raseri
I'm a leaf on the wind; watch how i soar
is a member of the Smogon Site Staffis a Forum Moderatoris a Tiering Contributoris a Contributor to Smogon
 
Raseri's Avatar
 
Moderator
Join Date: Aug 2007
Posts: 1,811
Default

...



I only started learning HTML a few days ago, and this is my first time trying to apply it. I want to help out with the site one day, but hopefully this can help me learn a bit first :)
Raseri is online now   Reply With Quote
Old Oct 20th, 2012, 9:46:56 PM   #22
Jukain
rip numeros
is a Contributor to Smogon Mediais a Contributor to Smogon
 
Jukain's Avatar
 
Join Date: Feb 2011
Posts: 1,793
somewhere could be anywhere
Default

Raseri, you're missing alt="" in the image tag.
__________________
C&C Work | 1k RMT | Contribute! | VM for an OU Rate! | gp member: vm/pm for a check | previously pokemon0078 / aka jew-cane
Jukain is offline   Reply With Quote
Old Oct 31st, 2012, 10:17:11 AM   #23
sandshrewz
穿山鼠
is a member of the Smogon Site Staffis an Artistis a Forum Moderatoris a Contributor to Smogon Mediais a Contributor to Smogonis a Battle Server Moderator
 
sandshrewz's Avatar
 
Moderator
Join Date: Oct 2010
Posts: 1,515
ASIA
Default

Quote:
Originally Posted by Fat Brutaka View Post
Ah, I didn't even see those italics in the beginning X)

I know I could use <em> or even <i> for italics, but from all I've read, eventually tags like those will be deprecated and they encourage people to style with CSS instead of HTML. So I've been using <span style=""> for styling inline words, because it doesn't send it to a new line like <p> and I use <div> for certain reasons personally. I use <div>'s for organization of layout construction for the most part.

Is the space after the alt="" really 100% necessary? I've never seen any rules about it, and it works. Then again, just because it works doesn't mean it's right, that's something I've learned somewhat the hard way. Same thing for the <br/> and <br />

I just checked. The space isn't necessary but it's always good to have standardization :) same thing for <br /> Standardization is helpful when you're trying to replace all the tags with find+replace or something etc, so if possible just follow the standardized one ^_^

Yeah, I think I did use the <p> for that extra space, the space was bigger than a single space from the looks of it.
Quote:
Originally Posted by Fat pokemon0078 View Post
I did it I did, I had some trouble aligning the image on the bottom but eventually found what I needed to do on w3.

html


EDIT: after looking at answer key argh I was so close gdi... I had the div tags right but I tried to paragraph align it and didn't have the pixel height/width. btw how would I go about finding those?

You can get the height and width by right clicking the image and view image info. You'll get the dimensions there. It's not necessary to have the height and width thing, but it's good for large images so that the page layout doesn't constantly shift as it loads the images which may take a longer time. Also, sorry if this might sound rude but could you explain to me how you arrived at <div class="float-right">? It's only used with CSS and it doesn't work without the CSS being declared and you said you found it on w3. Oh and use [html] tags in future, thanks :)

Quote:
Originally Posted by Fat mzenken View Post
I'm kind of rusty with HTML, but I'll give it a try.

HTML


yep you can like the alt tags empty, it doesn't matter as long as they're there! The <html> <head> <title> <body> tags are not needed for this practice though! Good job! :)

Quote:
Originally Posted by Fat Raseri View Post
...



I only started learning HTML a few days ago, and this is my first time trying to apply it. I want to help out with the site one day, but hopefully this can help me learn a bit first :)

<div class="float:right"><img src="/media/smog/16/trivia_porygon.png" width="251" height="350"/></div> it's style, not class lol! div style is used to style the things within the div tag, class doesn't. A space is normally put before the / in the image tag for standardization etc refer to above but not really important. And use [HTML] tags too!
__________________
Member of the GP Team- VM for a check / stamp!
sandshrewz is offline   Reply With Quote
Old Nov 3rd, 2012, 10:59:02 PM   #24
Jukain
rip numeros
is a Contributor to Smogon Mediais a Contributor to Smogon
 
Jukain's Avatar
 
Join Date: Feb 2011
Posts: 1,793
somewhere could be anywhere
Default

Thanks for the feedback sandz, I honestly don't remember where I found <div class="float-right">, sorry. I'll dig through but I honestly completely forget.
__________________
C&C Work | 1k RMT | Contribute! | VM for an OU Rate! | gp member: vm/pm for a check | previously pokemon0078 / aka jew-cane
Jukain is offline   Reply With Quote
Old Nov 7th, 2012, 2:35:28 AM   #25
mikel
hear me roar
is a Battle Server Administratoris a Forum Moderator
 
mikel's Avatar
 
Moderator
Join Date: Jun 2011
Posts: 665
~gocn~
Default

HTMLed Version


Here's to hoping it's ok :)
__________________
pokemon showdown | contributions and corrections | little cup | pm/vm for a gp check

[2013-02-13T17:59:26.637Z] (lobby) Blue Kirby was banned by Joim. (Smog Nominee Award Joim invites you to kindly take a time off of his website, banned user: BlueKirby)
[3:33:40 PM] <~bmelts> inasmuch as this is the crux of the aforementioned set

Last edited by mikel; Nov 7th, 2012 at 4:51:05 AM. Reason: REMOVING INDENTS HAPPY NOW SANDZ :P
mikel is online now   Reply With Quote
Reply Smogon Community > Contributions & Corrections > Fifth Generation

« Previous Thread | Next Thread »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off



All times are GMT -4. The time now is 12:19:41 AM.