Make A Living Loving It Code Basics

Code

Make A Living Loving It Code Basics

Think code is something reserved for web gurus, and super programmers, that's like thinking you can't have and hobbies or play sports for fun. Sure there are complex areas of code but there are complexities in everything, even changing a light bulb yo have to know what type of light bulb and wattage you need.

Keeping a little knowledge of code is so useful if you want to get online, see below for a few basics that will make people thing you're web savy.

Open your own Online Store and Grow Your Sales! Try it Free Now with Bigcommerce!

 

Code Basics

Two types of code families that are very useful when getting started with the basics is HTML(HyperText Markup Language) and CSS (Cascading Style Sheets). You can thing of HTML as the web site frame, it's creating places for your content. CSS is web styling, you can think of CSS as the wardrobe of your web, it gives colors, style and effects to your content. A term to get familiar with with when starting out with code is a "tag", tags are the names of commands in your code there are two types of codes to keep in mind, an opening tag and a closing tag.

Tag examples using div tag = "<div>"
Opening div tag= <div>
Closing div tag= </div>

There are tons of free simple straight forward places to learn and just get familiar with code, a great free resource is W3 School.

Need some filler text for testing click here(loren ipsum)

HTML

Here are some useful tags to know:
(tags are in blue and bold to be easily identified)
  • For Paragraphs:
    <p> (insert your paragraph text here)Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.</p>
  • For Headers:
    • Main Header
      <h1> (insert your Main Header here)</h1>
    • Sub Header
      <h2> (insert your Sub Header here)</h2>
    • Third Header
      <h3> (insert your Third Header here)</h3>
  • Text Format:
    • Bold
      <b> (insert your Bold Text here)</b>
    • Italic
      <i> (insert your italic text here)</i>
    • Click here for more text formatting tags.
  • For Links:
    <a href="insert your full link address here including http://">
    (insert the text you want to display for the link)
    </a>
  • For Spaces:
    &nbsp;
  • Need HTML for a table layout check out W3 School table Article.
  • Need HTML for displaying lists table layout check out W3 School lists Article (including ordered,simple styled, unordered, numbered lists).
Want to know more HTML check out W3 School HTML Article.
HTML5 is a new version of HTML bringing many new features to the standard HTML want to learn more FREE check out W3 School HTML5 Intro Article.
  code_canyon_728x90  

CSS

There are ways to insert CSS:
  • External style sheet:
    Having your CSS tags on a separate document and linking it in the head

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

  • Internal style sheet:
    Having your CSS tags in the head of your page head


    <head>
    <style>
    body {
    background-color: linen;
    }

    h1 {
    color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>

  • Inline style:
    Having your CSS tags within your tags

    <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

  • Need CSS for styling fonts check out W3 School Font styling Article.
  • Need CSS for padding check out W3 School Padding Article.
  • Need CSS for margins check out W3 School Margins Article.
  • Need CSS for positioning check out W3 School Positioning Article.
More about CSS types click here.

Back to Web Help click here.

   

Make A Living Loving It Email-optin

Your Email (required)