Smogon HTML 101: mari's demystification of confusing code contributions

Status
Not open for further replies.

Lumari

empty spaces
is a Site Content Manageris a Top Social Media Contributoris a Member of Senior Staffis a Community Contributoris a Top Contributoris a Top Smogon Media Contributoris an Administrator Alumnus
TFP Leader
Hi, hello, so if you're reading this post then maybe you already have a good understanding of HTML... or you're like user: Lumari in 2015 and know that HTML is a webpage thing that people can use to contribute to this website but at the same time are scared of code and don't know of any proper resources to learn it therefore end up freaking out when you're randomly put up for the Site Content Manager badge. Thankfully I passed this and also worked my way up to approved HTMLer in the months after in large part thanks to having a wonderful friend (hi ant :D) I could talk code with that made me see there was actually a pretty understandable system behind the confusing mess. All that to say: we can always use more active HTML contributors! And I hope having an actual introductory thread in here makes things just a bit more accessible and gets people over the hump that held me back when I was new.

Writing an HTML 101 is kinda weird because a comprehensive resource gets very unhelpfully encyclopedic very quick and this is the kind of thing that's way better learned by doing than by reading. The approach I'm taking here is basically an introductory reading one that will allow you to get your feet wet after; I am aware this thread may still have gotten pretty long, but you really don't Need to know everything here by heart. The idea is that reading over this once will demystify the system like it did for me and allow you to start writing your own stuff after; once you actually have an idea what you're doing, you can work your way up to an approved HTMLer pretty quick!

Index
HTML Basics
HTML Glossary
CSS Basics & A Note on Javascript
Get Out There!

If you feel like you have a basic understanding of how things work, you are free to post a thread here and request the eval! There's no specific format to follow other than expressing your interest to contribute and outlining your prior history with HTML (if applicable).
 

Lumari

empty spaces
is a Site Content Manageris a Top Social Media Contributoris a Member of Senior Staffis a Community Contributoris a Top Contributoris a Top Smogon Media Contributoris an Administrator Alumnus
TFP Leader
What is HTML?
HTML stands for HyperText Markup Language, and essentially it tells web browsers how to display a certain text. Simply uploading a text leaves a web browser helpless, since it doesn't understand human formatting and needs to be spoonfed what role every little bit of text is actually playing.

How does HTML work?
Essentially, HTML is a system of tags used to convey the necessary semantic value of certain bits of text to the browser. Because this is definitely way more confusing than it should be, let's take an example to clarify:
HTML:
<p>This post is written by Lumari.</p>
The <p> tags in here tell the browser that it should treat and display this line as a paragraph; <p> literally means "paragraph begins here", while </p> means "paragraph ends here", and now our poor browser knows what to do with this line and is no longer left twisting in the wind. "Every opening tag needs a complementary closing tag" is essentially the golden rule of HTML, and the vast majority of HTML tags work this way, from headers to lists to tons more stuff; see the glossary further below for a list of the main Smogon-relevant ones.

However, this doesn't always work. Let's take an image tag for example; while "paragraph begins here" "paragraph ends here" makes perfect sense, "image begins here" "image ends here" is pretty obvious gibberish. An image occupies a fixed "point" on your page, unlike a paragraph, which occupies a "line"; as a result, we'll also need to adjust our tag syntax here. Again, let's take an example:
HTML:
<img src="/forums/media/data/avatars/m/232/232216.jpg" alt="Lumari's forum avatar" />
The thing I'd like to focus on here first is the closing slash at the end of the HTML, which you'll see is absent from the prior paragraph tag example. Naturally, we'll need to go with just a single tag here, but even with just an <img> tag, the browser would still be waiting for a closing </img> tag, because it would have no reason to treat it differently from a <p> tag at this point. This is where the closing slash comes in; this one tells the browser that it should not wait for a closing tag but just move on, and as a result these tags are called self-closing tags. Every "fixed point" element works the same way, including linebreaks and page dividers.

Sticking with the above image tag for a bit, you'll have noticed the src and alt bits and are probably wondering what they're doing. In short, the former indicates the url the tag should pull its image from, and the latter is an alt text that should be included as a failsafe in case the image url is dead. Both these so-called attributes are mandatory, because as you may have guessed an <img /> tag alone isn't actually sufficient for making the proper image show up, and it needs this additional info. You'll be seeing attributes on a lot more tags, sometimes mandatory (e.g. the href attribute that specifies the target url in a hyperlink), sometimes not.
 

Lumari

empty spaces
is a Site Content Manageris a Top Social Media Contributoris a Member of Senior Staffis a Community Contributoris a Top Contributoris a Top Smogon Media Contributoris an Administrator Alumnus
TFP Leader
Now, with all of that out of the way, we can finally get to a glossary of the main tags that are used in Smogon files:

This list will occasionally refer to block elements vs inline elements; essentially, the distinction is that inline elements can only exist within a block element. Block elements can stand on their own, inline elements cannot. For a full list of tags, check out https://www.w3schools.com/tags/

<p></p> is used to indicate paragraphs. Every paragraph should be wrapped between a pair of these; if you use linebreaks instead, the webpage will assume that these are just for your own readability of the code and still display everything as a single block of text.

<h2></h2> as well as its equivalent tags with incremented numbers is used for headers. The numbers are not font sizes but instead indicate a correlation; essentially, <h3> indicates a section that's a subsection of an <h2> section, whereas two <h2> sections are on the same level. Think of it like a book index or a Wikipedia article. As a result it's impossible to e.g. go directly to <h4> from <h2>. <h2> is the one you'll be seeing most commonly; <h1> still goes above it, but a page can only use a single <h1>, namely the page title.
So, for example, if you want to create sections in order of importance, you should do something like this.
HTML:
<h1>Pokemon</h1>
<h2>Pokemon types</h2>
<h3>The Grass type</h3>
<h4>Grass-type Pokemon</h4>
<h5>Ivysaur</h5>
<h5>Shaymin</h5>
<h4>Grass-type moves</h4>
When you display it, it will look like this

Pokemon
Pokemon types
Grass-type Pokemon
Physical attackers
Slow physical attackers
Fast physical attackers

Special attackers

<a href=""></a> is used to indicate hyperlinks; the href attribute specifies the target link. For external links in articles, it's good practice to additionally add the target="_blank" attribute; this makes sure the link opens in a new tab instead so that readers won't get sidetracked out of the current page.

<strong></strong> and <em></em> are inline tags that are used for extra important or emphasised text, respectively; by default, they display as bold and italicised text. Although <b></b> and <i></i> are commonly used in other places, we will stick with the inline tags approved by HTML strict for consistency's sake.

<ul></ul> and <ol></ol> represent unordered lists and ordered lists, where for the former the order is irrelevant and for the latter it is not. There's a ton of options for how to display them, but by default they show up as bulleted vs numbered lists. Individual list items need to be wrapped in <li></li> tags, which can be used only within <ul>/<ol> tags; for nested lists, put another <ul> or <ol> within a pair of <li> tags.
So if I wanted to rank people on Smogon by coolness order, it'd be:
HTML:
<ol>
    <li>Lily</li>
    <li>ausma</li>
    <li>Lumari</li>
    <li>autumn</li>
</ol>
A nested list
HTML:
<h2>List of communities with the best users</h2>
<ol>
  <li>Let's Go Pikachu &amp; Eevee
    <ul>
      <li>Eve</li>
      <li>Lily</li>
    </ul>
  </li>
  <li>UnderUsed
    <ul>
      <li>Lily</li>
      <li>Band</li>
      <li>autumn</li>
    </ul>
  </li>
</ol>

A third type of list is the definition list, which is represented by <dl></dl> tags; basically, this one lists terms (represented by <dt></dt>) and definitions to go with them (represented by <dd></dd>). This can be used in a somewhat loose sense too; e.g. the credits page is essentially a huge definition list where the "terms" are the users and their "definitions" are their contributions.

<img src="" alt="" /> is used to embed images; the src attribute lists the image url, and the text in the alt attribute is used as a fallback that shows up if no image can be found under the image url. Please always try to add the alt text and make it relevant, in case the source isn't working or in case it's disappeared!

<table></table> represents, well, a table; every row then needs to be wrapped inside <tr></tr> tags, after which <th></th> is used for header cells and <td></td> for regular cells. Tables also have inner broad sections called <thead></thead>, <tbody></tbody>, and <tfoot></tfoot> that can come in handy when you want to edit the CSS in for bigger sections instead of individual cells. Funnily enough, when structuring a table, the order is thead>tfoot>tbody (although it'll be displayed in the correct order when you visualise it).
HTML:
<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
<br />is an inline element that represents a break within a text and shows up as a linebreak, pretty much as if you've pressed the return key on your keyboard. Note that this should not be used to mimic paragraph breaks or lists; these have their own tags! If you want to use this tag then odds are significant that there's actually a better option out there, so make sure this is actually the one you need.

<hr /> is a page divider; use this if you need to put a horizontal divider between two sections of your page, potentially with additional spacing attached to it. Don't use this for aesthetic borders, only for functional separators.

<div></div> does not really come with any properties of its own; essentially it "highlights" other block elements and allows you to e.g. use CSS to apply specific styling to them (more on that later!). <span></span> is its inline counterpart; use this one instead if you're only looking at bits of text within a block element.

Lastly, take care that by default HTML only supports alphanumeric characters in text; naturally you'll understand that it's easy for browsers to get confused whether you really want to display a > when these are also used in HTML tags, and something similar goes for e.g. ampersands and letters with diacritics. As a result, all these characters need to be escaped; Google is your friend for what every individual character should look like, but e.g. > is escaped to &gt;, & becomes &amp;, and é turns into &eacute;, and every escaped character is bracketed off by an ampersand and semicolon in the same way.

===================================

You'll have taken note that I've defined every tag in here according to their role in the text, not according to visuals. This is important because web browsers don't have the same human brains as we do. Take the following "list of Pokemon generations in chronological order", for example
HTML:
<p>1. RBY</p>
<p>2. GSC</p>
<p>3. RSE</p>
which human readers might process as a list because it has visual similarity to what we would process as a list, but unfortunately a browser's brain takes things entirely at face value so will just read this as a bunch of paragraphs. For the sake of properly telling the browser what's what, you really should use <ol> and <li> here. I.e.:
HTML:
<ol>
    <li>RBY</li>
    <li>GSC</li>
    <li>ADV</li>
</ol>
Similarly, I intentionally didn't define <strong> as "bold text" even though you may have seen it referred to as such in different guides; it's more than just that, it's "extra important text", and bold text is just the default way of expressing this. For actual bold text with no additional semantic value, there also exists the aforementioned <b> tag that does just that, but... it's essentially deprecated and you shouldn't use it! Like I mentioned before, HTML tags define an element's role in a text, meaning something visuals-only like <b> is not a proper HTML tag. For defining visuals, we instead use a separate language named CSS, or Cascading Style Sheets. Let's get into that one too.
 

Lumari

empty spaces
is a Site Content Manageris a Top Social Media Contributoris a Member of Senior Staffis a Community Contributoris a Top Contributoris a Top Smogon Media Contributoris an Administrator Alumnus
TFP Leader
How do we change an HTML tag's default styling?
Overall, there is an easy enough way to achieve this. Let's say we (for some reason, because this is not actually a good idea usually) want our paragraph text centred rather than the default left aligned. For this, we can use the style attribute, like so:
HTML:
<p style="text-align:center;">Lumari and I don't get along, she always needs to be the center of attention.</p>
And of course there's a million different properties you can apply to tags. Google and w3schools are your friends!

Why CSS?
One obvious shortcoming of the above approach is that it needs to be applied to every tag individually, and given that, for reasons like a consistent layout and stuff, you may want to apply stuff like centred paragraph text universally, this can be very annoying, especially if you need to make universal design changes later on. Furthermore, if you need to apply extensive styling to an element, things are gonna get beyond messy if you do this through a style attribute. This is where CSS comes in, which is a separate language that specifically outlines which styling needs to be used on which HTML element. If we wanted to apply centred paragraph text universally, we'd put the following code in the head section of our HTML:
HTML:
<style type="text/css">
	p {text-align:center;}
</style>
and from this point every paragraph in our document will have centred text. Every property that can be used in the style attribute can be used in CSS and vice versa; the only real difference is the syntax used.

Are there any middle grounds? What do I do if I only want to apply styling to some tags but don't want to bother with using the style attribute on every one of them?
Yes! Classes and IDs would be your go-to approach here; both function similarly, with the main difference being that classes can be reused across a document, while IDs can only be used on a single HTML tag. For the sake of example I'll be sticking with classes here.

Let's say we want to visually mark certain paragraphs in our document as "asides" by centring their text and italicising them while leaving every other paragraph untouched. First, we'd make a class named "aside" and apply it to the affected paragraphs, like so:
HTML:
<p class="aside">Between you and me, I don't dislike Lumari that much; she's actually pretty nice.</p>
and then we'd add the necessary styling to the CSS, like so:
HTML:
<style type="text/css">
	.aside {
		text-align:center;
		font-style:italic;
	}
</style>
and we're done! If we're working with an ID instead, the syntax is for the most part the same; the main differences are that the HTML tag is given an id attribute over a class one, and the head syntax uses a hashtag rather than a period, e.g. #aside {text-align:center;font-style:italic;}. A final comment is that you can also mark the class in the CSS as p.aside rather than simply .aside; the difference is that the former will apply the CSS only to <p> tags using the aside class, whereas the latter will apply it to everything using the class no matter the tag. Use which one you need most!

Another way of finetuning your styling is through combinator selectors. Sometimes you don't need to handpick which tags to apply your custom styling to and are actually capable of describing it through a consistent rule; let's say we have a document that uses pictures as separators between sections, and we want to apply some spacing to make the document easier to read. In a case like this, we're looking to add some margin above image tags while actually sparing the main header image (which is at the top of the page as is) or images directly following header tags (which don't need it). In this case, our CSS would be the following:
HTML:
<style type="text/css">
	p + img {margin-top:5%;}
</style>
The + selector here means that the styling will be applied only to image tags directly following a paragraph tag, which is exactly what we want! For a few other selectors used on Smogon pages, see the page on w3schools.

That leaves us with one final thing to address: sites obviously have multiple pages with consistent layouts and stylings that by extension also use the same CSS, and thankfully CSS can be saved to external sheets, which can then be imported into multiple webpages. If I have several CSS classes that I want to apply to different pages, I can save these to a separate file mysite.css; then, if I add the following line to my HTML file:
HTML:
<link href="/mysite.css" type="text/css" rel="stylesheet" />
I can use all the CSS in this file in the page I'm working on too!

What about Javascript?
One thing that needs to be emphasised about HTML and CSS is that they handle the static-visual side of a webpage only; any dynamic elements (e.g. buttons) are handled by a third language named Javascript instead. As much as knowledge of this language is 100% mandatory for anything like writing a full website from scratch, it's also definitively more advanced than HTML and CSS and not part of the standard Smogon HTML toolkit, so I won't be covering it in depth here. The main way in which you'll be using it is through importing prewritten scripts, for which we can take a quick look at this article. In order to import a script, you simply need to paste two things into the head section: the actual script in question, plus an external library to make sure it has all the backend scripts it needs to run properly, pretty similarly to an external CSS sheet.
In the linked article, this looks like this:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
	$(function(){
		var current = '';

		$('[data-target]').hide();

		$('[data-show-target]').on('click', function(evt){
			evt.preventDefault();
			evt.stopPropagation();

			var target = $(this).data('show-target');

			if(target !== current){
				var elem = $('[data-target="'+current+'"]');
				var show = function(){
					$('[data-target="'+target+'"]').slideDown(500);
					current = target;
				};
				if(elem.length > 0) {
					elem.slideUp(500, show);
				} else {
					show(500);
				}
			} else {
				$('[data-target="'+current+'"]').slideUp(500);
				current = "";
			}
		});
	});
</script>
and beyond that, it's simply a matter of making sure your HTML is compatible with it. Let's take a look at the first button and its dropdown:
HTML:
<div class="align-center">
	<input type="button" value="Set Details" data-show-target="0" />
</div>

<div data-target="0">
	<h3>Team Suizorus (Jumpman16)</h3>
	<div class="team">
		<ul class="set">
			<li><img src="/dex/media/sprites/xyicons/haxorus.png" alt="Haxorus" /> Battle Hax (Haxorus) @ Lum Berry</li>
			<li>Ability: Mold Breaker</li>
			<li>EVs: 108 HP / 252 Atk / 148 Spe</li>
			<li>Adamant Nature</li>
			<li>- Dragon Dance</li>
			<li>- Outrage</li>
			<li>- Earthquake</li>
			<li>- Substitute</li>
		</ul>

		<ul class="set">
			<li><img src="/dex/media/sprites/xyicons/suicune.png" alt="Suicune" /> Holy Water (Suicune) @ Leftovers</li>
			<li>Ability: Pressure</li>
			<li>Bold Nature</li>
			<li>EVs: 196 HP / 252 Def / 60 Spe</li>
			<li>- Calm Mind</li>
			<li>- Scald</li>
			<li>- Icy Wind</li>
			<li>- Rest</li>
		</ul>

		<ul class="set">
			<li><img src="/dex/media/sprites/xyicons/scizor-mega.png" alt="Mega Scizor" /> Scizor @ Scizorite</li>
			<li>Ability: Technician</li>
			<li>Adamant Nature</li>
			<li>EVs: 244 HP / 252 Atk / 12 Spe</li>
			<li>- Swords Dance</li>
			<li>- Bullet Punch</li>
			<li>- Bug Bite</li>
			<li>- Roost</li>
		</ul>
	</div>
</div>
You can see in the script that a data-target attribute specifies what needs to be shown/hidden and a data-show-target attribute specifies the actual content affected. Beyond that, it's simply a matter of making sure that the right data-target selects the right data-show-target, which you'll see is covered by both these attributed saying 0. Of course other values like "suizorus" would have worked too, as long as they're a) matching, b) unique across the article; I am just lazy and found this was the easiest way for me to do this on autopilot without risking accidental repeats with the many other buttons.

The other stuff isn't worth getting into, but thankfully since other articles have provided you with working versions of this script, you don't actually need to understand how it works in-depth; as long as you're capable of troubleshooting!
 

Lumari

empty spaces
is a Site Content Manageris a Top Social Media Contributoris a Member of Senior Staffis a Community Contributoris a Top Contributoris a Top Smogon Media Contributoris an Administrator Alumnus
TFP Leader
So now that you've been given a rough overview of the overall systems, you may want to take a stab at actually writing a page of your own. Thankfully, anyone can do this; all you need is an internet browser (which you should be set on if you're reading this thread), and a basic text editor (for Windows, you can use Notepad++; for MAC, Sublime or Coda 2; for Linux, Emacs. Visual Studio Code also exists as a cross-platform option). Do not use Office tools or Google Docs, they handle a bunch of tiny things in a different way like quotes / apostrophes that actually mess with your code. If you save your work as an HTML file and try to open it after, your browser will load it, with all the HTML and styling you've applied to it.

First things first: you are probably gonna need a template to work in, since you'll need some additional code to make sure the browser understands it's working with an HTML doc at all, as well as some other fun stuff. I'm gonna pass on explaining how everything works here since it's not any knowledge you're gonna need per se and I'm sure I may have driven you dizzy at times as is, but in short you're gonna be working off this:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>

</body>
</html>
where any CSS goes into the <head> section and any content HTML in the <body> section. If you're writing something from scratch as an HTML file that you're opening in your browser, then the above one is what you need; however, Smogon files use a simplified template, which I'm pasting here.
HTML:
[title]

[head]

[page]
Overall it works similarly to the complicated one; [head] and [page] are for the most part equivalent to <head> and <body>, and [title] takes the actual page title, thankfully though we can get away with a massively simplified template because every page uses the same basic layout to work off. [title], [head], and [page] are simply hardcoded tags that are auto-converted to the site's basic source code, meaning you can focus on just the unique stuff.

Make sure your code is readable and properly presented too! The main way of making sure this is the case is by using proper indentation.
How do I use indentation?
As unbelievable as it may sound, indentation is a key to coding. Cleaner and organized codes are easier to read and to keep track of.

For HTML
Everytime a new block element is open and not closed before another tag gets open, you start a new level of indentation. Confusing? Look at the example below:

Code:
<tag0>
    <tag1></tag1>
    <tag2>
        <tag3 />
    </tag2>
    <tag4>
        <tag5>
            <tag6>
                <tag7>
                    <tag8 />
                </tag7>
            </tag6>
        </tag5>
    </tag4>
</tag0>
It's also important to know that tags that were open last, are closed first; tags that were open first, are closed last. Check this example:

Code:
<tag0><tag1><tag2><tag3>Hello!</tag3></tag2></tag1></tag0>

For CSS
The attributes need to be at the same level of the opening {, and the closing } needs to be on the same level of the element name. If your element only has one or two attributes, don't press enter, keep it in one line.

Code:
element{
    attribute:value;
    attribute:value;
    attribute:value;
}
element{attribute:value;}
If you want to see some HTML and CSS in action, then we can also take a look at a practical example, such as this article, which is based off this HTML file.
I am sure the [title]/[head]/[page] skeleton and the simple tags like <p> need no explanation at this point; rather, I'm going to comment on a few design choices and point towards the HTML providing for those.

The main distinctive thing I tried to do on this article was use CSS to essentially mimic type icons so that I didn't have to embed them all as inline images. If you've read the HTML tag glossary, you'll remember that if we want to manually "highlight" certain bits of text to apply styling to them, <span> is the tag we need, with a CSS class or two to specify the styling in question; and you'll notice that I'm using e.g. <span class="type water">water</span> for the Water type icon, where I am using two classes at once, namely "type" and "water". If you look back at the CSS, you'll see that the former does a lot of things; without going in complete detail, I'm essentially putting a background behind the highlighted text, slightly expanding this one so that the icons have a proper canvas for lack of a better word, and modifying the actual text to mimic the font and shading we know from classic type icons. The "water" class then simply changes the background to the appropriate colour. Naturally since all typing icons have different colours we're gonna have to give them their own class at least for that, but all the other styling is consistent; so, in the interest of efficiency, I am spinning all of that off to a class of its own.

This causes an additional issue, though, when the increased line height means that the icons overlap in "Adeleine's ranking" lists. As a result, I need to add some additional padding to the list items in those so that all the icons show up properly without colliding; for this I added the line ol.pr>li {padding-top:3px;padding-bottom:3px;} to my CSS. I didn't go into the > selector prior, but tl;dr it denotes direct child items; so, this selector means that this CSS applies to <li> tags that go directly into an <ol> tag that also has the class "pr". This more surgical phrasing means I'm applying the styling only to what I need, without accidentally targeting list items outside of "Adeleine's ranking" lists. Not that those actually exist in this article... but having good practice in your muscle memory saves lots of frustration with (even) more involved articles!

A lot of the CSS is now either obvious (i.e. the header styling) or accounted for; however, as it stands the article still looks pretty cramped, since I'm using the Pokemon sprites as pseudo-headers, which the spacing I've added to the actual header tags naturally won't apply to. I did use <div> tags with the "align-center" class (from the imported global articles CSS sheet) to centre the sprites, which means I can apply any additional styling to these as well, rather than directly to the images... but we still have a problem, since if I blanket apply spacing to these, then it'll also affect any images directly after headers (where we don't need it) as well as the main article artwork. Sound familiar? I want to apply additional spacing ONLY to align-center classes directly after paragraphs or ordered lists with the "pr" class, so the aforementioned + selector is exactly what we need, and I'm sure you can guess where we're going from here.

There is obviously a lot more going in this article, including in the standard HTML template that we use for the article nav bars etc, but I hope this shed some light on how a general vision for a design gets converted into code.

At this point, well.... go nuts, honestly. It sounds cheesy, but coding is the kind of thing that's best learned by actually doing it, and the first two posts in this thread should have given you enough of a basic understanding of how the languages work to continue building off of yourself. Naturally this thread doesn't come remotely close to covering everything; for tags that I haven't explained, Google and w3schools are your friend. The main tip I have for you is to keep your eyes open; after all, if there's something specific you want to do and you know of a site that has actually done it, then you're free to just follow their lead! You can view any page's source code through right click -> view source code, and right click -> inspect element also allows you to look through the styling applied to certain elements.

The last thing you need to know is how to make sure your code actually checks out. For this you can use a validator such as this one; simply paste your HTML and it'll mark out any errors you may have.

Additional Resources
https://www.w3schools.com/ - Linking this as often as I can, major resource on all sorts of different tags and how they work. Every tag also has its own page that gives it an in-depth explanation, as well as providing some example code for you to try out.
https://codepen.io/pen/ - An online environment where you can mess around with basic HTML and CSS to see what things look like without having to commit to downloading your own text editor (yet).
https://www.sololearn.com/ - Quick introductory courses on all sorts of coding languages, including the three languages covered here, for those who prefer learning things in this way.
 
Status
Not open for further replies.

Users Who Are Viewing This Thread (Users: 1, Guests: 0)

Top