|
|||||||
![]() |
|
|
Thread Tools |
|
|
#1 |
|
is 60% water
![]() ![]() ![]() ![]()
|
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. |
|
|
|
|
|
#2 |
|
(╮°-°)╮┳━┳ (╯°□°)╯ ┻━┻
Join Date: Dec 2011
Posts: 1,249
New York born, New York proud
|
Can I do the practice article?
__________________
Ever wanted to contribute to Smogon?
|
|
|
|
|
|
#3 |
|
is 60% water
![]() ![]() ![]() ![]()
|
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
__________________
^.^
|
|
|
|
|
|
#4 |
|
You don’t have to forgive me. No matter what you decide from now on, I will love you forever.
|
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| |
|
|
|
|
|
#5 |
|
is 60% water
![]() ![]() ![]() ![]()
|
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 ^.^
__________________
^.^
|
|
|
|
|
|
#6 |
|
The higher I get the lower I'll sink.
Join Date: Mar 2011
Posts: 360
<@Redew> jellicent <@Redew> how hammered are you <&Jellicent> i am a hammer
|
HTML Code:
<h2>Introduction</h2> <p>Last issue, I explored the <a href="/smog/issue20/dangerous_irl">top 10 most dangerous Poké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é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é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>
__________________
![]() |
|
|
|
|
|
#7 |
|
Join Date: May 2010
Posts: 127
|
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 |
|
|
|
|
|
#8 |
|
The higher I get the lower I'll sink.
Join Date: Mar 2011
Posts: 360
<@Redew> jellicent <@Redew> how hammered are you <&Jellicent> i am a hammer
|
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 :)
__________________
![]() |
|
|
|
|
|
#9 |
|
Join Date: Jul 2011
Posts: 23
|
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. |
|
|
|
|
|
#10 |
|
is 60% water
![]() ![]() ![]() ![]()
|
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~
__________________
^.^
|
|
|
|
|
|
#11 | |
|
Join Date: Jul 2011
Posts: 23
|
Quote:
I suppose the forum sites work differently then? Anyways...now what? Do we wait for you to post another challenge or something?
__________________
|
|
|
|
|
|
|
#12 |
|
standing in the eye of the hurricane
![]() ![]() ![]() ![]() ![]() ![]()
Moderator
Join Date: May 2010
Posts: 2,096
|
Le Answer
Last edited by Furai; Oct 13th, 2012 at 11:03:35 AM. |
|
|
|
|
|
#13 | ||||
|
南Potest 华Qui 人Vult
![]() ![]() ![]() ![]() ![]()
|
Quote:
Quote:
Quote:
Quote:
__________________
Thanks for voting for The Smog Awards! ^_^ ![]() Member of the GP Team- VM for a check / stamp! |
||||
|
|
|
|
|
#14 | |
|
Join Date: Jul 2011
Posts: 23
|
Quote:
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.
__________________
|
|
|
|
|
|
|
#15 |
|
rip numeros
![]()
|
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. |
|
|
|
|
|
#16 |
|
Join Date: Aug 2011
Posts: 1
|
I'm a self-professed HTML pro (giggle). How can I help out?
I mean, I'll try after my public exams. |
|
|
|
|
|
#17 |
|
I love mafe
![]() ![]() Join Date: Oct 2010
Posts: 1,374
|
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. |
|
|
|
|
|
#18 |
|
is 60% water
![]() ![]() ![]() ![]()
|
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 |
|
|
|
|
|
#19 |
|
rip numeros
![]()
|
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
|
|
|
|
|
|
#20 |
|
Join Date: Mar 2010
Posts: 314
|
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. |
|
|
|
|
|
#21 |
|
I'm a leaf on the wind; watch how i soar
![]() ![]() ![]()
|
...
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 :) |
|
|
|
|
|
#22 |
|
rip numeros
![]()
|
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
|
|
|
|
|
|
#23 | ||||
|
南Potest 华Qui 人Vult
![]() ![]() ![]() ![]() ![]()
|
Quote:
Quote:
Quote:
Quote:
__________________
Thanks for voting for The Smog Awards! ^_^ ![]() Member of the GP Team- VM for a check / stamp! |
||||
|
|
|
|
|
#24 |
|
rip numeros
![]()
|
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
|
|
|
|
|
|
#25 |
|
hear me roar
![]()
|
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 |
|
|
|
![]() |
| Thread Tools | |
|
|