Beginner's guide to HTML

Hi everyone, I haven't done one of these in a loong time. I thought this could help you all out at some point :) Shoutout to Ditto Creeper Bot for letting me use a lot of the stuff he teaches on the SU wiki. Let's begin. :) First, what is HTML? HTML but mainly known as Hyper Text Mark-up Language or in other words, website language is used to create a layout using appropriate tags to form elements to help build a proper well-prepared website to use. One of the main things needed to help coupe with HTML and give it it's flare are:-

CSS
Javascript

What is CSS?

CSS or Cascading Style Sheet is a mark-up language and is a core extension to HTML to help design the visual of the page. CSS is designed to create layout, colors, and fonts etc. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, build an interface to help users move around effectively, and improve visual understanding wherever needed.

Note:An HTML Style Inline is the basis of what I can teach you here in Wikia as of the HTML tag is restricted and CSS via Personal CSS pages is time consuming.

Example:-

Hi!

Generated by the code:-

<div style="
   color:red;
   background:black;
   font-size:10px;
   border:2px dotted blue;
   height:20px;
   width:20px;">Hi!</div>

You'd have already noticed that <div style=""> in the above example with 6 basic attributes a normal user is able to understand.

Let us go further into them:-

<div> Tag: '<div>' or Division tag is used to create an element where all the attributes and properties designated within it are formed and are set for that specific element or sub-element. Sort of like a wallet and the CSS within it is it's coins. The DIV tag can be used with either class="" or a simpler version, id="". Right now I'll be teaching the direct method, the Inline Style method which has the need for style="". The quotation marks are used to place the attributes with their values inside. Though every tag plays it's role, the closing tag that has a front slash or "/" within it's tag parent must be used after preparing an element. Noted that this tag takes it's own line/space.

<span> Tag: '<span>' plays the same role as the div tag but doesn't create a line break and strict designates the attributes while respecting it's position.

If you're a semi-experienced user reading this and wonder why I didn't use HTML in this blog, it's because the Wikia has disabled it within it's forms so that the user can continue his editing without causing any severe damages whatsoever.

Beginning to <div> or <span>

Color text:

In order to change the color of a text (to red for this tutorial), you'd need to use [<span style="color:red">Hello</span>] to generate:- [Hello]. The CSS dictionary can read standard color names, such as:-

Red.
Blue.
Yellow.
Green.

And so on.... but if you're unsure of a color name, you can either use the HEX, RGBA, or HSLA color system that you can find online "here.

These attributes are easy huh? Cm'on, if you think they're not then think of this as a gaming tutorial and in no time you'd rule it at for sure!

Background:

You must be wondering how awesome this is? Look no further than now. You'd literally have to use the background attribute in a form like [<span style="background:white">This</span>] where the value is either the name of the color or a numeric system.

Note: Color attribute is for text color and background is for well, the background.

Nah, it's just simple CSS that's all. The attribute for this text is somewhat different than the other two above. Instead of writing 'one word' like background, we'll be writing 'two', font and size together to form font-size and instead of having a color value, we'll be having a pixel value. Pixels are tiny dots in the screen that determine the resolution of an image or picture. More the pixels, better the resolution.

<span style="font-size:19px">this</span> would generate this.. You can either use [value]px to determine it's size or use em which does a broad difference than compared to px where the default values are 15px or 1em.

Borders:

This is smooth.

Nope, it's solid. This time, the values have 3 slots or 1 if you want to directly go to it. They can be written in any order. We have: [[Value]px/em] [Color] [Unique Attribute]. You'd probably know the first two but the third one is special, it's because it has it's own designs listed as:-

Groove: Groove would give
This.
Generated by <div style="border:2px black groove">This.</div>
Dashed: Dashed would give
This.
Generated by <div style="border:2px black dashed">This.</div>
Solid: Solid would give
This.
Generated by <div style="border:2px black solid">This.</div>
Dotted: Dotted would give
This.
Generated by <div style="border:2px black dotted">This.</div>
Double: Double would give
This.
Generated by <div style="border:2px black double">This.</div>
Ridge: Ridge would give
This.
Generated by <div style="border:2px black ridge">This.</div>

TIPS:

Use Span to designate it within the text itself.
Use Div if you want it to have it's own line or block.
You can set the value to auto so that it'll replicate the parent element.

Last one of the basics, huh? Don't worry, I ain't leaving without a proper ending!

Height/Width:

Height and Width's attributes are obvious, they determine what they're called but provide a strict value once applied. Let's say I got <span style="border:2px white dashed">this</span> to generate [this], you can see how close the border is with the text. You can change that by applying the Width/Height attribute. Let's try to make

this

You'll need:-

Seperate line thus we're gonna use the <div> tag.
Height value set to height:auto; and Width value set to width:150px;
Border's value set to Border:2px white dashed
Enclose it and viola! You made something awesome!

It's nearly over isn't it?

PFFT NO! It's merely the beginning of a better beginning.

Text Align:

The text-align property specifies the alignment of text in an element.

Left Aligns the text to the left.
Right Aligns the text to the right.
Center Centers the text.
Justify Stretches the lines so that each line has equal width (like in newspapers and magazines).
Initial Sets this property to its default value. Read about initial
Inherit Inherits this property from its parent element. Read about inherit

Example:- <div style="border:white dashed 2px;text-align:center">This is my center BOI!</div> would generate:-

This is my center BOI!

Padding:

The Padding property can help set the box's attribute to either really cramped or really spacey. The value can have 4 sets of values following a pattern. Padding property also has divisions, such as: padding-top, padding-bottom, padding-left, and padding-right.

Example:- <div style="border:white dashed 2px;padding: 1cm 8cm;">HELP ME NOW!</div> would generate:-

HELP ME NOW!

Note:

In a singular 4 valued padding property like padding:10px 5px 15px 20px;
- Top padding is 10px
- Right padding is 5px
- Bottom padding is 15px
- Left padding is 20px
If it's a 3 value property, the pattern would be Top, Left & Right, and Bottom.
If it's a 2 value property, the pattern is Top & Bottom and Left & Right.
If it's 1 value, all the sides are counted as the same.

This applies the same for Margin

Margin:

The Margin property helps create blank space outside the element, either for spacing or making the page look more appealing. Margin also has the same value pattern properties as well as divisions of it's own. We can use <div style="margin:90px;border:white solid 2px;text-align:center">ALL THE SPACE IN THE WORLD!</div> to generate:-

ALL THE SPACE IN THE WORLD!

Position:

The position property is one of the most commonly used properties.

We have:-

Static -- An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.
Relative -- An element with position: relative; would act as a normal element.
Fixed -- An element with position: fixed; would act as a scroll buddy. [Something that scrolls while you scroll.]
Absolute -- An element with position: absolute; would act as it's own element, forcing all parent changes to cease.

This div element has position: relative;

This div element has position: absolute;

Generated by:-

<div style=" position: relative; width: 400px; height: 200px; border: 3px solid #73AD21;">This div element has position: relative;
  <div style=" position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21;">This div element has position: absolute;</div>

Direction Properties:

Left, Right, Top, and Bottom. All these are directions that can be used to manually adjust the position of an object but will only work if the object's position is either set to absolute, static, or Fixed. Example:

Hola

generated by:-

<div style="position:absolute;border:2px groove gray;width:60px;height:60px;bottom: 319px;right:200px">Hola</div>

CSS for intermediate learners.

Text Shadows:

What's fun about typing letters? Making em glow in the dark that's what! Text shadows are fun and all, how to really use em is what matters. Let's begin!

Text shadows function with it's values placed as "[Horizontal]px [Verticle]px [Blur]px [Color]".
FUN PART! You can continue the chain by adding a comma after every values set.

Example:- This for example!

Generated by: <span style="text-shadow:3px 4px 2px white"> This for example!</span>

In no time you'd be able to match awesomeness like This art :3

PSST! Here

<span stype="text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;">This art :3</span>

Text shadows are few fun ways to add beauty to text, either it's for setting it to glow like the heavens or to make it look like light's being shed upon it. Example: This for instance Made using: <span style="text-shadow:2px 5px 3px black">This for instance</span>

Text-shadows' values are not like the others:

First value is based upon the 'y-axis'. [Up and down]
Second value is based on the 'x-axis'. [Left and right]
Third value is based on hardness. 1 = Solid, 3 = Blur.
Forth value is the color, either hex or rgba.

How to make a smooth round box?

In order to make a smooth round box, apply "border-radius" attribute with the value 4pc or something less to make it more sharper.

Note: Radius property cannot be applied unless there's a "border" attribute or the "background" attribute.

Box 1

This is an example

Generated by: This is an example

Box 2