reading-notes

           Welcome to Read: 03

Read: 03 “HHTML Lists, CSS Boxes, JS Control Flow”

In this Read: 02, I will talk about those topics:

• Lists.
• Boxes.
• Decisions and Loops.
  

Lists
When you want to go to the mall to buy your monthly stuff for your home, your write down those stuffs on paper as a list of stuffs.

Why you do that? Because lists make the things more organized and ordered. And here in html we have three types of lists.

• Ordered lists: are lists where each item in the list is numbered (there are a characters that indicate order).
  
  • It starts with <ol> tag to open a list, then you use <li> tag to put your items there.

    <ol>
      <li>Fisrt item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>
    

• Unordered lists: are lists that begin with a bullet point.
  
  • It starts with <ul> tag to open a list, then you use <li> tag to put your items there.

    <ul>
      <li>Fisrt item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
    

• Definition lists: are made up of a set of terms along with the definitions for each of those terms.[1]
  
  • It starts with <dl> tag to open a list, then you use <dt>to contain the term being defined (the definition term) and use <dd>to contain the definition.

    <dl>
      <dt>Html</dt>
      <dd> Is the standard markup language for Web pages. </dd>
    </dl>
    

• Nested lists: are made up of a list inside list.
  
  • An example

    <ul>
      <li>Fisrt item</li>
      <li>Second item</li>
      <ul>
          <li>First</li>
          <li>Second</li>
      </ul>
    </ul>
    

    ---

    Boxes
    In the CSS, if you want to do some styling at heading for example, it deals with them as box levels, make a heading as a box. Those boxes we can do some styling and setting for them, here we will have some of them.
    

• Box Dimensions: width, height.
  

        div.box {
        height: 250px;
        width: 250px;
        background-color: #black;}
  

• Border, margin& Padding.
  
  
  
  

  For more information please see the Duckett, J. (2014). JavaScript & jQuery ; HTML & CSS. In JavaScript & jQuery ; HTML & CSS (p.300-329). Indianapolis, IN: John Wiley & Sons.

Decisions and Loops: Switch
A switch statement starts with a variable called the switch value. Each case indicates a possible value for this variable and the code that should run if the variable matches that value.[2]

Here we will have an example from a lab was done by me.

let aeroEng = prompt('The first question: Is Shady Enginner?','yes/no,y/n');

switch (aeroEng.toLowerCase()) {
case 'yes':
  alert('Yes \''+ userName + '\' your answer is correct, Shady is an Aeronautical Engineer.');
  //console.log('Answer for Q1: yes \'',userName,'\' your answer is correct, Shady is an Aeronautical Engineer.');
  break;
case 'y':
  alert('Yes \''+ userName + ' your answer is correct, Shady is an Aeronautical Engineer.');
  //console.log('Answer for Q1: yes \'',userName,'\' your answer is correct, Shady is an Aeronautical Engineer.');
  break;
default:
  alert('What is the wrong \''+ userName + '\' you do not answer with yes/no! Please, stick with the rules');
  break;
}

Here if the user enter ‘yes’, we will enter the switch, and check the cases; case by case, when the first one apply, we enter it and run the statments inside that case.

Read	Title	ToGo
Read: 01	Introductory HTML and JavaScript
Read: 02	HTML Text, CSS Introduction, and Basic JavaScript Instructions
Read: 03	HTML Lists, CSS Boxes, JS Control Flow
Read: 04	HTML Links, CSS Layout, JS Functions
Read: 05	HTML Images; CSS Color & Text
Read: 06	JS Object Literals; The DOM
Read: 07	HTML Tables; JS Constructor Functions
Read: 08	More CSS Layout
Read: 09	Forms and Events
Read: 10	JS Debugging
Read: 11	Assorted Topics
Read: 12	Docs for the HTML canvas Element & Chart.js
Read: 13	Local Storage
Read: 14a	CSS Transforms, Transitions, and Animations
Read: 14b	What Google Learned About Teams