Section outline

  • Project

    The art of Self Discipline

    Build a website on your computer

    This project is to build a website on your computer using mac text edit, windows notepad or linux kate.

    For mac users will need to check settings in 'text edit'.

    For windows users 'notepad' should save character sets as UTF-8 (default setting)

    Linux users using 'kate' no changes needed as kate will automatically know what you are creating.

    Step One

    A: Create a new folder.

    Name the folder my_web_site

    All images and files must go into this folder.

    B: Change Textedit preferences.

    Setting up 'Textedit' preferences.

    Change settings to plain textChange setting to save as html file

    • Step 2

      The art of Self Discipline

      Change background colour styles

      The body tag is everything you can see when viewing your web page

      Styles can be added to tags.

      A style contains attributes.
      An attribute looks like this:
      color: red;

      If we add a style and attribute to the body tag we can make the colour change.

      A <style=""> can be added to all containers.

      When the attribute is added it looks like this:
      style="color: red;"

      Many attributes can be added to a style.

      The colon (smile and semicolon (;) mark the different attributes.
      For example:

      style="color: red; font-size: 24px; padding: 10px;"




      <body style="background: yellow;">


      some content on your web page



      </body>

      .

    • Step 3

      The art of Self Discipline

      Add attributes to a style Attributes

      Attributes in a style change the colours, sizes, actions of the style

      Attributes change what the style does.


      <div style=" border: 2px solid black;">

      Types of lines:   solid   ridged   dotted   dashed   double   inset   outset     

      </div>

      <div style=" border: 2px solid black; border-radius: 20px;">

      A big radius can be used to create a circle on a square container

      </div>

      style="border: 2px solid black; border-radius: 100px; width: 200px; height: 200px;"

      <div style=" border: 2px solid black; border-radius: 20px; color: red;">

      The color attribute changes the color of all the text

      </div>

      <div style=" border: 2px solid black; border-radius: 20px;  padding: 15px;">

      The padding attribute moves text and images away from the border.

      </div>

      <div style=" border: 2px solid black; border-radius: 20px;  padding: 15px; width: 400px; margin: auto;">

      The width attribute keeps container to a size

      The height attribute keeps container to a size but can chop text so it is not used here.

      The margin attribute keeps container in the middle or centered.

      </div>

      <div style=" border: 2px solid black; border-radius: 20px;  padding: 15px; box-shadow: 13px 13px 2px brown;">


      The first number is shadow to the right.
      The second number is shadow to the bottom.
      The third number is the amount of spread of the shadow.

      The first and second numbers can have negative numbers eg -13px.

      If you add inset before your numbers the shadow will be inside the container.

      </div>

      <div style=" border: 2px solid black; border-radius: 20px;  padding: 15px; box-shadow: 13px 13px 2px brown; background-image: linear-gradient(to right, lightblue, yellow);">


      Change your colours for different affects. Try 'top left to bottom right'

      </div>

      .