HTML
HTML, or HyperText Markup Language, is one of the three basic building blocks of all webpages.
Where Javascript handles fancy interactive elements and CSS handles styling, HTML handles how the page content is organized. It can take the place of CSS for many general features, but this is not considered good web page design in modern day since CSS is much more efficient. Note that HTML is not a programming language, rather, it is simply a markup language, designed to create websites. You can incorporate Javascript into HTML via the use of the <script> tags, but if you do that, you're writing in Javascript, not HTML. You cannot 'hack NASA' using only HTML! It's designed so you can quickly and easily make the basic layout for a website, which you can build upon using other web technologies.
HTML is designed to be really simple to use and pick up, and you won't have much trouble picking it up. To get started, to go your favourite text editor (notepad is fine!) and start a new file. Save it as a file with the extension .html (add .html to the end of the file name). For the Save as Type option, select the entry that says All Files (.), which ensures that your file will be recognised as being an HTML file instead of a regular text file. One good way to check that you've done this properly is to turn on display of file name extensions and checking that your file ends in .html. Another good test is to just double click and open the file; a proper HTML file should open in your web browser by default.
There, you'll be able to start writing HTML. We'll gloss over some essential boilerplate that you should always include like a <!DOCTYPE html> tag and a <body> tag (you're here to have fun and read about tropes, not learn about the basic principles of web development). You can just write text into the document and they'll be rendered in the browser, but it's good practice to include the text between <p> and </p> tags (p for paragraph). The <p> tag opens the set, and tells the rendering engine that everything starting from that tag should be considered as a paragraph. The slash (/) in front of the </p> that the paragraph tags have finished, and that any text beyond that point should no longer be considered as a paragraph. Thus, the only text considered to be paragraphs are between the <p> and </p> tags. The <em> tag is used for italics (em for emphasis), and can be nested in <p> tags. For example,
<p>This is a paragraph! This is <em>italics</em>.</p>
will produce:
This is a paragraph! This is italics.
The paragraph tags span across the entire text, so the entire text is to be considered as a paragraph. The emphasis tag only spans across the word italics, opening before the word, and closing after the word, therefore it is the only thing put in italics. You can also use the <b> tags to put words in bold.
Headings are denoted with <h1> through <h6> tags, opening and closing in the same way as the above paragraph and emphasis tags. <h1> denotes the largest page heading, and should be used for the title of your page. <h2> can be denoted for the subsections in a page. For example, if you head over to the page for any trope, the trope name and title should be put in a <h1> tag. The headings for the medium of examples, like Anime and Manga or Video Games should be in an <h2> tag. The smaller the number by the 'h', the smaller (and less important) the tag.
You can make bullet points with <ul> tags (ul for unordered list). List elements are denoted with <li> (list item), and regular opening and closing rules still apply. For example,
<ul>
<li>This is a list element.</li>
<li>This is another element.</li>
<li>Why is there an entry about HTML on a <b>trope website</b>.</li>
<li>I expected to learn about tropes, not markup languages.</li>
</ul>
Will produce:
- This is a list element.
- This is another element.
- Why is there an entry about HTML on a trope website.
- I expected to learn about tropes, not markup languages.
Additional HTML tags include:
<s>for strikethrough, which actually works on This Very Wiki,see?<code>to denote code, which also works onthis wiki.<button>and you can probably figure out what this does. This tag isn't very useful until you bring in Javascript.<br>used to create a line break. This is a self closing tag, meaning that you only need to type<br>, and you don't have to close the tag. Also works on this wiki.<a>tags for an anchor, which is used for hyperlinks to either an external site, another article (path) on the same domain, or a different part of the same page the tag is on. In the latter, the browser scrolls to wherever the linked to element is.
So, how is HTML relevant to tropes? Well, without HTML, All the Tropes probably won't be a thing. We actually use PHP, which isn't HTML but incorporates some elements of HTML. HTML tags are used, but the tags can be broken to run code and logic. The point is that HTML is a fundamental aspect of any website — including this one. Also, if you're a page editor, the source editor recognises heading tags (remember <h1> and <h2>?) in addition to the ones described above. Lastly, you can make up your own and use them as Faux HTML Tags. To view the site's HTML, press F12 or Ctrl + Shift + I to open developer tools. The 'Inspector' tab should be open by default, if not, click on it.