HTML LISTS AND BOXES & JS

HTML LISTS AND BOXES & JS

This a summary of what I have learned reading Jon Duckett’s material.

LISTS

When we structure a page, sometimes we need to use lists. maybe for the van bar or you may just want to line some items as list.

We have two types of list that you can add to your HTML:

  1. The ordered list <ol> that orders every item with numbers
  2. the unordered list <ul> that show the items with bullets

This is an ordered list: ////////////// <ol>This is an ordered list:

  1. item /////////////////////////////<li>item</li>
  2. item /////////////////////////////<li>item</li>
  3. item /////////////////////////////<li>item</li></ol>

this is an unordered list: ////////////// <ul>This is an unordered list:

  • item /////////////////////////////<li>item</li>
  • item /////////////////////////////<li>item</li>
  • item /////////////////////////////<li>item</li></ul>

BOXES

Html allows you to place the content inside boxes and control their properties, like width and height maybe the box shadow or the border.

box

you can use those dimension to control the box size and shape using HTML or CSS.

  • Border the outer place of the box called a border, The border separates the edge of one box from another. If you changed a width for a box, then the borders, margin, and padding are all changed same as the border.
  • Margin Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes.
  • Padding Padding is the space between the border of a box and any content contained within it.

You can change a lot within a box, you can set a visible border and control its thickness, adding that you can round the corner to any degree you want, you can set a shadow beneath it and control how it spread, also, you can control the content inside the box by changing the dimensions for the margin and the padding, you can control a group of boxes and line them aside each other or as a column.

 

JAVASCRIPT

ARRAYS

An array is a special type of variable. It doesn’t just store one value; it stores a list of values.   Jon Duckett

As told, an array can hold multiple values for one variable, its useful and saves time.

var colors; colors= ['white ' , 'black ' , ' green']; The values are assigned to the array inside a pair of square brackets, and each value is separated by a comma.

 

LOOPS

Loops make it easier to repeat a function, for now, we will mention 2 types of loops. they are:

  1. FOR loop we use when we want to perform a task for a known number of times for ([initialExpression]; [conditionExpression]; [incrementExpression]) statement

  2. WHILE loop we use this when we want to repeat the action for an unknown number of times while (condition) statement

 

SWITCH statement

 

SWITCH statement given a “switch value” and a number of “cases”, a number of codes is ready to be executed if any of those cases values matched the input.

switch  

 

Get back to EMAM’S HOMEPAGE

I have created this page as a part of my project using Github, Please visit my profile, I will be more than happy to hear from you all.                       © Emam Shararah 2021