Section outline

  • HTML coding


    The art of Self Discipline

    HTML

    Hyper Text Markup Language.

    The basic coding language that supports all websites

    CSS

    Cascading Style Sheets.

    These are how the themes for each part of your website are stored.

    Page

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    </body>
    </html>

    Doctype, HTML and body are added by blogger automatically in these activities.

    Tags, Attributes and Elements

    A tag has two parts, Opening and Closing

    Inside the tag are attributes that tell the computer to change things like color border fonts etc.

    Some tags are empty tags or self closing. They do not have a seperate closing tag

    Closing tags and self-closing tags

    Normal tags are opening tags and must have a finishing point at a closing tag
    eg. <div> --- </div>

    A closing tag has a forward slash before the letters
    eg. </div>

    Self closing tags are now called empty tags.

    Self closing tags used to be written <br /> with the forward slash at the end of the containing brackets.

    The new version called empty tags are written <br> with no / (forward slash)

    The above example is a line break tag. another example is an image tag
      <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

    Containers

    An example of a div container in use

    <div style="background: yellow;">aaaaaaaaaa</div>

    Another example of a container is <body> (not needed for blogger)

    Examples of containers for use in blogger are
    <section></section>   
    <div></div>   
    <p></p>
    <span></span>

    Borders

    border: 2px solid yellow;  

    border: 2px dotted yellow;  

    border: 2px dashed yellow;  

    border: 2px double yellow;  

    border: 2px groove yellow;  

    border: 2px ridge yellow;  

    border: 2px inset yellow;  

    border: 2px outset yellow;  

    border: 2px outset yellow;   border-radius: 10px;

    Backgrounds

    Using R,G,B colors lets you have a see through color background.

    The 'R' is for the amount of red. The 'G' is for the amount of green. The 'B' is for the amount of blue.

    RGB are all '0' the colour is black.
    RGB are all 255 the color is white.
    The last number in the position of 'A' is alpha, (a measurement of opacity) .0 is no color. 1 is full color. .5 is half colour see-through.

    background: rgba(255,255,0,1);


    background: rgba(255,255,0,.5);


    Box Shadows, inside and out.

    box-shadow: 10px 10px 2px white;  


    box-shadow: 3px 3px 5px white, -3px -3px 5px yellow;  


    box-shadow: inset 3px 3px 5px white, inset -3px -3px 5px yellow;  

    Images background in boxes

    bbbbb

    cccc

    Lines

    <hr>

    The
    <hr> tag
    will place a line across the page

    Line breaks

    <br /> this is the correct form. A self closing tag

    <br> abbreviated form but the website code closes the tag for you. It is still a self closing tag

    http://brettwilkin.blogspot.com/

    Use this site to copy css code to your blogs css code file and the html code to your page

    .

    .

    https://www.w3schools.com/colors/colors_picker.asp

    .

    .

    .