Lets learn to make a site and so on and so forth

So, where to next? You could learn some more HTML tags to funk up your text further, or jump straight to styling with css, its up to you!

More HTML tags

Text formatting

Just like <strong> and <em> (or <b> and <i>) for bold and italic text, there are a variety of other html element/tags that you can use to style your text. These are a little controversial as many people believe html should just be about the content and css about the style, but like the fact that some content should be displayed different is sometimes like inherent to the content… like all parts of web design there are many different opinions.

These are probably the easiest elements to understand and play around with, so I’ve listed a few more here.

Superscript and Subscript

Wrap <sub> and <sup> around text to make it subscript and superscript.

  1. <sub>Subscript</sub> and <sup>Superscript</sup>. Pretty self explanatory. <br>
  2. [H<sub>2</sub>O]<sup>2</sup>
 Subscript and Superscript. Pretty self explanatory.
[H2O]2

You can, as usual, nest other elements within the sub/superscript.

  1. <i>Always read the <sub><b>small</b>print</sub></i> <br>
  2. log<sub>3<sup>2</sup></sub>(3<sup>2<sup>2</sup></sup>)
 Always read the smallprint
log32(322)

Smaller text

When you just want some text to be smaller, instead of using <sub>, you can use <small>.

  1. Contrast <small>small text</small> with <sub>subscript</sub>
Contrast small text with subscript .

Strikethrough

The <s> element makes things crossed out.

Highlighting

The <mark> element makes things highlighted.

Moving

The <marquee> element is deprecated (not recommended for use, & browsers are free to ignore it), but well loved by neocitians.

  1. <marquee>It makes text do this</marquee>
 It makes text do this

You can make smoother animated text with css animations but marquee text is retro.
You can also change the direction

Text Organisation

We’ve encountered <h1> <h2> etc, <br>, and <hr>. There are a couple of other elements to keep your prose well formatted.

Paragraph

The <p> (paragraph) element contains a paragraph, it’s recommended to use these (and css for alternate margin sizes), and only use <br> when needed.

  1. <p>
  2. The paragraph element doesn't change the style of the inner text, but instead is used to break up the text into sections, and will add spacing around each section, much like the h1 elements do.
  3. </p>
  4. <p>
  5. Elements which add spacing after their content, and don't fall in line with elements to the left and right of them, are called "block" elements. p, h1, h2, h3, etc are examples of block elements, we will explore exactly what a block element means later.
  6. </p>

The paragraph element doesn't change the style of the inner text, but instead is used to break up the text into sections, and will add spacing around each section, much like the h1 elements do.

Elements which add spacing after their content, and don't fall in line with elements to the left and right of them, are called "block" elements. p, h1, h2, h3, etc are examples of block elements, we will explore exactly what a block element means later.

Exact text

You may or may not have noticed by now, that not only will html ignore the line seperations in your text, it will also treat any number of spaces the same as just one. This is super annoying if you’re trying to like do a poem with funky spacing or ascii art or whatever, so theres a <pre> element which will treat all whitespace inside it exactly as it was entered. (You can also do this in css, and also do it in a way where it will still wrap if it reaches the end of the page but anyway)

  1. <p>
  2. <pre>Inside
  3. preformatted element</pre>
  4. </p><p>
  5. Outside
  6. preformatted element
  7. </p>
 

Inside
             preformatted  element

Outside preformatted element


What if you want to write <b>this<b> and not have it show up as this? Like if you were tryna explain html or if for whatever reason you needed to use the <> symbols freely? If you write &lt; (short for less than) then it will appear as >, if you write &gt; then it will appear as <, and if you write &amp; then it will appear as &. (And to make &amp; appear you must write &amp;amp; and so on).

There’s also &quot; which turns into ", which is super useful for when you want an attribute to include a quote.

  1. <img title="Sign which says &quot;NO&quot;" src="https://alltop.com/viral/wp-content/uploads/2013/10/Fotolia_52362988_Subscription_XL-e1382017433756-500x430.jpg" width=50>

Modern browsers are pretty clever at telling what’s html and what’s text so usually you’ll only need to use these “character entity references” if you’re talking about tags themselves. You can almost always write 3<4, instead of 3&lt;4, and it will show up just fine and make the code look a lot simpler. My motto is only use the character entity references when you tried without and things broke.

Comments

Comments are explanations of code which are visible to people reading & writing the code, but ignored by the computer.
In HTML, anything you write between a <!-- and a --> will not show up in the output page. This is very useful for explaining parts of the code, which only makes sense when you’re reading the source code and shouldn’t show up on the page.

  1. <p>
  2. <!-- TODO: insert some more explanation here as to why I'm awesome -->
  3. So pretty much I'm <u>awesome</u>. <!-- the <u> element underlines text -->
  4. </p>
 So pretty much I'm awesome.

The output is exactly the same as if you deleted all comments from the source code.
Comments are also useful for temporarily removing parts of the file, known as “commenting out”, so that you can easily add the section back in just by removing the comment part.

  1. <!--
  2. <p>
  3. Extra text which I currently deem unnecessary but may in fact change my mind about later.
  4. </p>
  5. -->

Non-textual things

 Websites aren't just collections of text in different fonts and styles, there much more to explore.

Images

We already looked at these, but just to recap, use the <img> element to add images.
This is a special element in that it doesn’t need a closing </img> tag (just like <br>).
We use the src attribute to specify the url the image comes from, the alt attribute to describe the image if it can’t be displayed for whatever reason.
We can use the width and height attributes to control how big it is, but later we will do this with css instead.

  1. Do you ever just <img src="https://c.tenor.com/0CNuLxTwEJYAAAAj/sus.gif" alt="Twerking imposter from Among Us" title="sus" width=25>?
 Do you ever just Twerking imposter from Among Us?

Video & Audio

There are also <video> and <audio> elements for, you guessed it, adding video and audio to a site.
These ones do require closing </video> and </audio> tags, this is a bit confusing but it’s because these elements were added later - Whatever is inside the element will be displayed (only) if the browser doesn’t understand the video/audio element, so back in the day you could safely use these and provide a backup link to download it. These days every browser understands the element so everyone just puts nothing inside. (You can also specify the source url(s) inside the element as their own seperate element(s), but that’s just plain weird tbh)

Similar to the <img> element, we can use attributes src, title, and width for the exact same purpose. You can’t use alt, I think you’re supposed to provide captions / a transcript or just an explanation in text instead.. idk, quite odd.

There are a couple other attributes specific to <video> and <audio>, these are what’s called “boolean” attributes, which means instead of putting an = then the content, you simply either put them between the <>s or you don’t.
There’s controls which lets the user/viewer/listener control the playback & volume, loop which will loop the media to the start once it’s finished, muted which will begin the media with volume set to 0, autoplay which will start the media as soon as the page loads (instead of once clicked). Autoplaying can be quite annoying so many browsers block it by default and will make the viewer have to click to allow it (like requesting location), but it can be really cute to have like ambient music play as you browse a website or some background video or somethn.

  1. <ul>
  2. <li>
  3. Here's a video with all the mentioned attributes <br>
  4. <video controls muted loop autoplay title="custom tooltip :oo" width=200 height=100 src=https://sample-videos.com/video123/mp4/480/big_buck_bunny_480p_2mb.mp4></video>
  5. </li><li>
  6. With no controls or autoplay, a video resembles a static img (until you right click) <br>
  7. <video width=200 src="https://animethemes.moe/video/Clannad-ED1.webm"></video>
  8. </li><li>
  9. Without controls, an audio file is invisible (useless without autoplay)
  10. <audio src="https://megumin.love/sounds/megumin/season-2/nani.mp3"></audio>
  11. </li><li>
  12. Loop does what you'd expect <br>
  13. <audio controls src="https://wanwan.moe/res/wanwan.ogg" loop></audio>
  14. </li><li>
  15. You can link to an audio file in a video element, its a bit silly & oversized but I guess useful for captions? <br>
  16. <video src="https://v6p9d9t4.ssl.hwcdn.net/html/5622815/2%20-%20growing%20pains/media/1%20-%20clown%20crimes.mp3"></video>
  17. </li><li>
  18. You can even link to continous streams (livestreams & radios) (if someone has set it up right): <br>
  19. <audio controls src="https://radio.lainzine.org:8443/music"></audio>
  20. </li>
  21. </ul>
  • Here's a video with all the mentioned attributes
  • With no controls or autoplay, a video resembles a static img (until you right click)
  • Without controls, an audio file is invisible (useless without autoplay)
  • Loop does what you'd expect
  • You can link to an audio file in a video element, its a bit silly & oversized but I guess useful for captions?
  • You can even link to continous streams (livestreams & radios) (if someone has set it up right):

But these are mainly useful for when you have an mp3 or mp4 or whatever, which takes space to store and uses a bunch of data to send (if you were hosting the server, which you’re not but) so most people (& non-massive corporations) just use youtube etc.

Webpages

You can just insert other webpages onto your page. Yes, this is as magic as it sounds. Some websites won’t let you embed them (for security or whatever), but many will. The element you need is called <iframe> and it has attributes similar to <img> (as well as a bunch of its own unique ones many of which are deprecated or experimental, and confusing / i dont rlly understand them i’ve never used iframes).

  1. <iframe
  2. width=500
  3. height=500
  4. src="https://angel99.neocities.org/">
  5. </iframe>

snazzy, hey?
Youtube, and many other sites, have special versions of pages which are designed to be embedded as an iframe. If you click the share icon then embed on a youtube video you will get the following code (except with whatever video link):

  1. <iframe width="560" height="315" src="https://www.youtube.com/embed/YWze2r3s9bg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Which displays as

Awesome!
Okay I’ll briefly explain the other attributes in the youtube code, frameborder is deprecated but controls whether or not there is a border around the iframe (its recommended to instead use css for the border). If the frameborder attribute isn’t specified, it defaults to “1” which means draw a border, while “0” means don’t. The allow & allowfullscreen attributes grant the inner webpage certain permissions, there are times where you wouldn’t want an iframe to be allowed to take over the whole screen or clipboard or whatever, so you have to explicitly specify that it can. Try remove some of the permissions to see what happens.

You can also use an iframe to embed like pdf files and stuff, anything that the web browser can open in a tab can be put in an iframe.

Dropdowns

Using the <details> element, you can easily create expandable content, as I have done on this page.
The content inside a <details> element will be hidden until clicked.

  1. I then coded up my new website using a basic tech stack, I'll spare you the details of how.
  2. <details>
  3. I used pure willpower to code it. Nothing but my brain and desire. I manifested myself a website.
  4. </details>
 I then coded up my new website using a basic tech stack, I’ll spare you the details of how.
I used pure willpower to code it. Nothing but my brain and desire. I manifested myself a website.

If you want to change the title thingie of the details, what appears before you click, use a <summary> element within the <details>.

  1. <details>
  2. <summary><em>Spoilers for BunnyRabbitSaga Episode 273</em></summary>
  3. lili bunni kisses tobi bunni and they live happili :>
  4. <br><img src="https://images.memes.com/meme/fbthumb/1143869" alt="a pretty epic celebratory picture">
  5. </details>
Spoilers for BunnyRabbitSaga lili bunni kisses tobi bunni and they live happili :>
a pretty epic celebratory picture

Other

Back in the day you used to be able to embed flash player apps/games, java applets, and all sorts of other “plugins”. These don’t really exist any more. There is an <embed> element (which you can use in place of img, video, audio, iframe, etc) and an <object> element (which does the same thing but you use data instead of src, and can also provide a type?). I do not really understand these or their use.

There’s also a <canvas> element which is super cool but useless for us for now because it just lets you draw things with javascript.

There’s <meter> and <progress> bars, which are a bit niche, but kinda cool and look like this: , ,

There are a lot more html elements, many of which are very handy (but usually for niche cases). We will go over some more later but I use a website called MDN which lists and explains every one of them. They have pages explaining even more text formatting elements, other HTML guides, and individual element pages which go into much more detail than I did here, for example you can learn more attributes of the marquee element. It also has explanations for all things CSS & JS too. Pretty handy. I’m doubtless that there are better tutorials out there than MDN, but it’s invaluable as reference material for when you forget the minutia or want to learn more advanced stuff.

Intro to CSS

We talked about changing the font, another very basic use of CSS is to change the colour of text.

The css to make text red is color: red;, pretty wild stuff!. A CSS 'property' is made up of a name (color), a colon, a value (;) part is the property name, and a semicolon.
You can use most basic colour names, or a variety of other ways to enter colours, such as hex codes (like #ff0000), rgb triplets rgb(255, 0, 0) hsl values hsl(0deg, 100%, 50%), and much more... they're all kinda confusing you can google explanations of them or just google a colour picker and usually it'll give you a code you can copy as a css colour value.

You can style things using css in 3 ways.

  1. Inline styles

    All HTML elements have an optional attribute style which you can put css properties.

    That's <b style="color: red">super cool</b>!
     That's super cool!

    This is called "inline styling" because you put the style text in the html lines.

  2. Internal stylesheets

    But what if you want to say, make every link on a page red? Having to go through every single <a> tag and add in a style attribute would be tedious, and if you later wanted to change the links to say green you'd have to do it all over again. Because inline styling buries style information deep in the html and is difficult to keep consistent across a page or update, it's recommended to only use inline styling only in very rare occasions - temporary changes via inspect element and javascript, very small test pages, and possibly some one-off element styling.

    Enter: stylesheets. Stylesheets enable you to apply CSS attributes to a range of elements automatically. These stylesheets are a list of rules, which are composed of a selector, a {, a list of properties, and }. The simplest selector is simply the name of a tag, so the simplest rule would be a { color: red }. This will make all the <a> elements on the pages' text red, the equivalent of adding a style="color: red" attribute to each. To use stylesheets, add a <style> element into your html with the stylesheet written within. 

    <p>
       Do you use <a href="https://google.com/">google</a>, <a href="https://duckduckgo.com/">duckduckgo</a>, or <a href="https://yahoo.com/">something else</a> to search the web?
    </p>
    <style>
       a { color: red }
    </style>
     Do you use google, duckduckgo, or something else to search the web?

    You can have as many <style> elements as you want, they will all effect the entire page and won't show up as text (unless you style them to).

  3. External stylesheets

    Internal stylesheets are pretty snazzy, and there's lots more we can do with them that we'll encounter very soon, but as you build out a website you'll probably want most of your pages to be styled the same way. Consistent themeing can rlly tie a website together into a cohesive whole.

    Also, some people are really quite adamant about seperation of concerns and think using <style> elements is still mixing together content and style, and it can become hard to keep track of if you use lots of different style elements all over the place.

    External stylesheets are the solution. They are pretty much the same as internal stylesheets except instead of putting the css inside a <style> element, you put it in a different file altogether.

    You can call this file whatever you want, you should probably end it with .css but, and this is true of html (& js) too, browsers will understand css text no matter what you label the file, call it password.txt, page.png, file, index.html, it will work fine! The sensible filenames though are either style.css or [name of html file].css

    To apply a css file (external stylesheet) to an html page, add a <link> element (not to be confused with <a> which displays a hyperlink, <link> is just an invisible element which tells the browser that another file is linked to the page). A little confusingly, you use a href attribute to specify the filename / url of the external stylesheet, and a rel attribute (short for 'relation') with value stylesheet to tell the browser that this is a stylesheet.

    index.html
    <p>
    Do you use <a href="https://google.com/">google</a>, <a href="https://duckduckgo.com/">duckduckgo</a>, or <a href="https://yahoo.com/">something else</a> to search the web?
    </p>
    <link rel=stylesheet href=style.css>
    style.css
    a { color: red }
     Do you use google, duckduckgo, or something else to search the web?

Document structure

Under construction

CSS Fundamentals

This page is under construction

Properties

Selectors

One element

Specific elements

Elements by location

Multiple selectors

Generic elements

span

div

Backgrounds & borders

 More to come... check out some cool images to add to your site in the meantime.