Beginner's guide to HTML

Let's begin with the basics, 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 with 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 than 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. NO WAR, K?! 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:5px black groove">This.</div>
Dashed: Dashed would give
This.
Generated by <div style="border:5px black dashed">This.</div>
Solid: Solid would give
This.
Generated by <div style="border:5px black solid">This.</div>
Dotted: Dotted would give
This.
Generated by <div style="border:5px black dotted">This.</div>
Double: Double would give
This.
Generated by <div style="border:5px black double">This.</div>
Ridge: Ridge would give
This.
Generated by <div style="border:5px 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 boi!

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, HELL 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>

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: <span style="border:2px solid white;border-radius:4pc">This is an example</span>

Box 2

This is an example

Generated by: <span style="background:white;border-radius:4pc;color:black">This is an example</span>

Measurements:

Yeah, we got Math here! Don't walk away though, this one's worth reading!

Every measurement has it's own Unit. Sort of like, scales have Centimeters, Cars have accelerations, wave lengths have....Centimeters too, again. ;D

For computers, small tiny dots joined together to form an image is called Pixels. Pixels can be 1/96th of an inch, properties can inherit inches as in which is 2.54cm, centimeters which is obviously cm. Then we have Element Measurement, 1 em is the current size of the element, 2em = two times the size, making projects easier when resizing.

Note: If a unit is failing, try another to check whether it's your position attribute.

Beginner's guide to CSS using the Inline Style Method.

Contents