The HTML Tag

#Basic Html (1).png

Learning to code can and will be equated to learning to do your makeup because there are a lot of components to both, and if you make it messy, you’re screwed.

And it can be overwhelming to start – Wtf is foundation or concealer?! PRIMER??!

Javascript, tokens, loops?!

WHERE DOES IT ALL GO?!

WHERE DO I START?!

If there’s one thing I’ve learned after years of attempting both, it’s that

less is more – for both makeup AND coding.

#facts

Picking a code editor, saving your file as index.html and adding <!DOCTYP

E html> are great places to start – just like putting on a little moisturizer before your makeup.

Screen Shot 2018-09-12 at 2.56.05 PM.png
The beginnings of your amazing webpage!

But then comes the fun part, foundation coding! To get started with typing your actual code, you must indicate to your code editor that everything you type from here on out is in fact, HTML – and that you are gonna slayyyy it.

Whaa?! How do you do that? Well let me show ya!

Le example:Screen Shot 2018-09-14 at 11.04.21 AM.png

You’ll notice a few things here:

  1. Angle Brackets – ‘<‘ and ‘>’ are called angle brackets and they enclose something called a tag.
    images.jpegNo, not this type of tag.

2. Html ‘Tag’ –  HTML is just one of many tags you will be learning about. A tag is a label that indicates how stuff within that tag will be formatted or better yet, how it will look. Think about a tag or label you see on your foundation, it could be dewy, full coverage, matte, etc. Those tags indicate how the contents inside will function and look on your skin.

  1. Blank space – This is where you will be typing all of the things you want to have in your webpage! You can add text, images, videos, etc.
    Note: All of these things will be formatted by preset <html> tag formatting.
  2. HTML Element – Everything within the HTML tag <html> and </html> (ie. text, images, videos, etc.) is now a part of something we will call your HTML element.

    TL;DR:

<html> +  Text, images, videos, etc. + </html> = HTML element

There are two types of tags that surround your element:

Opening Tag: < > – which indicates the start of your element.

Closing Tag: </ > –  which indicates the end of your element.

I like to think of the ‘/’ as my tag saying BYE FELICIA
Again these two tags surround the beginning and the end of your HTML element – giving it a nice big hug and saying ‘you are my squishy and you shall be mine!!!‘ ‘this is how we will look!’

Your code editor is all ‘dang someones ready to make a boss ass webpage!’

And you’re all ‘damn, straight!’

Or something like that.

To reiterate:

  1. A tag is a label that indicates how anything within that tag is formatted or better yet, how it will look.
  2. An element is everything within an opening ‘< >’ tag and closing ‘</ >’ tag (ie. text, images, videos, etc.).
    TL;DR:
  3. <html> +  Text, images, videos, etc. + </html> = HTML element

 

And don’t worry – I’ll teach ya how to take your webpage from nay to slay, basic to boss simple to packed full of images, videos and all the content your heart desires. You’ll have more tools than Jersey Shore! You can thank me later.

Leave a Comment!