HTML LINKS AND CSS LAYOUT & JS FUNCTIONS

HTML LINKS AND CSS LAYOUT & JS FUNCTIONS

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

When we want to make an option for the user to go to another page with a click, we add a link, it appears like a text that you can click on it to change the path to another page, link are very simple:

<a src="#">Homepage<a> this is the syntax for a the link tag, you can replace the # with the page link you want and replace the word home by any word you want it to appear on the page so the user can click on it.
You can make a link so the user can go to another page on the same website.
Also, you can have a link that sends an email for a certain mail by this
<a href="mailto:jon@example.org">Email Jon</a>.
You can make the link open a page as a new tab by using Target,
<a href="#" target="_blank">Homepage</a>

LAYOUT

CSS is made from blocks and it allows you to place the content inside those blocks 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.
There are two types of elements, one that take a whole block and start a new line and ones who just take a small space that surrounds them. the first type called block-level elements and the other called inline element.

  • Normal flow Every block-level element appears on a new line, causing each item to appear lower down the page than the previous one.

  • Relative Positioning This moves an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.
  • Absolute positioning This positions the element in relation to its containing element. It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements.
  • z-index If you want to control which element are on top, you can use the z-index. Its value is a number, and the higher the number the closer tha element to the front.

 

As you know, there a lot of devices to view the web these days, every device have different dimensions and developers need to adjust their codes to suit each screen, one way is to make the page responsive meaning that it changes its style depending on the screen dimensions, so developers are making digffrent commands for different screens.

 

JAVASCRIPT FUNCTIONS

Functions

A JavaScript function is a container of set of code we call at specific time or for a particular task. and it can be called anywhere in the code by its assigned name or by trigging it with a button maybe.

A function element are:

function name(parameter) {  return //task//;}

then you just call it by its name! yeah its that simple

 

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