Webpages Desing Parts

Text in HTMl

-html offers many heading tags in order to arrange the content and makes it easier to follow.
-The heading are arranged from the biggest which is h1 to the smallest h2.

-In order to have a long text or an article there is the p tag which stands for paragraph.
for text styling html has two tags related to this, b tag the makes the content within bold, and the i tag that makes it italic.
for mathematics and chemistry html has two special tags for these subjects.

sub tag is used to have text sub text for example: H₂O.
sup tag is used to have text super text for example: X³ + 2X² + 4x + 1

white spaces is being ignored in html by the browser, new line is supported by using br tag. also there is horizontal break line like the line below:

Html has many other tags to manipulate text and modify it.

s tag to put a line over text which means the items is ~~no longer accurate or relevant~~ like a price of something.
ins tag to that the piece of text that was inserted inside a text.

CSS Style

css stands for cascading style sheets.
css used to add styles to html tags. and this could be done by adding inline style for example.

<h1 style="font-family:cursive;">This is h1 has different font from default</h1>

and there is internal style for html pages by adding style tag inside the head tag in order to changes have effects. There is also another way, which is having css folder and the css files come inside it.

there are three main types of changing style in css by using selector and description method.

selection by tag name, for example.

p{
    font-family: cursive;
    font-size: 22px;
    color: black;
}

it can also be more than on tag to style, and this is done by adding the desired tags separated by commas. For example

h1, h2, h3{
    color:red;
    font-family: fantasy;
}

selection by class name, the requires to have the attribute class inside the tags that need to be modified. for example.

<p class = "main-paragraph"> This is the main paragraph in the page</p>

and the css for it.

.main-paragraph{
    font-family: cursive;
    font-size: 22px;
    color: black;
}

in this method the same style can be applied to many tags as desired.

selection by id, this is can be applied for only one tag, since tags must be unique across the website. and this method also requires to have additional attribute inside the tag which is id attribute. for example

    <h5 id="h5-footer">contact us on email shown below.<h5>

css code will be

#h5-footer{
    font-family: monospace;;
    color: black;
}

in order to have the effect of the external css code, it is a must to have the code path in html page.
where need to add link to the head tag as follow:

<link href="css/example.css" type="text/css"
rel="stylesheet" />

where the href holds the path of the css file.

Instructions in JavaScript

Variables in JavaScript

javascript is dynamically typed language, which means there is NO need to specify what the variable datatype is string, booleans, or even numbers. since the interpreter will make the decision of the variable type as its value.
but what is the variable?
variable is just place in a memory that holds data, and it is being names to refer to this place in memory later in code and use or update its value.
to declare a variable in javascript the word var is being used in the front of the variable name to specify that this is a variable. for example.

var pi;

to assign a value to a variable equal sign (=) is being used, for example.

var pi = 3.14;

Every programming language has its own rules of naming variables.
for example variables in javascript must only start with letter, $ sign or underscore _ .
no spaces allowed in the variable name not dots.
reserved words like var, for, if can not be used as a variable name.
but do variables allowed to have more than one value at the same time?
for normal variable this is impossible, but programming languages have their ways to do this.
Arrays in java scripts allow to have many values inside them for example:

var days = ['Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

to get a certain value inside an array, it needs to mention its index, for example Monday has the index 1 while Sunday has index 0.

var days = ['Sunday', 'Monday', 'Thursday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
console.log(days[6]); // this line will logs Saturday.

but what if iterating over all the elements is required, for or while loops can used for this job, where must have the iterator variable starts from 0 to the end of the array.
expression can be done when declaring a variable:

var pi = 22/7 ;

String concatenation can be done by simply adds the + sign for example

var greeting = "Hello";
var name = "AbdalQader";
var result = greeting + name;
console.log(result); // this will log Hello AbdalQader

Conditions in JavaScript

what if a specific line of codes need to be executed only when a condition met?
javascript is great language and it offers the if statement, to do this job.
Simply if statement has a punch of lines (at least on line) inside it, and those won’t be execute unless the condition will meet.
double equal signs == are used to compare between to variables to test the condition.
For example:

var mark = prompt("enter a number");
if(mark >= 50 && mark<=100>){
    alert("Passed!");
}

In the above example if the user enters a mark more than or equals 50, the browser will show him that he passed.
but what if the user entered a mark less than 50, what will happen?
Absolutely no thing, since the condition did not meet, the code after the closing curly bracket } will be executed.
What if wanted to show fail if the user enters a number less than 50?
this can be done by adding another if statement to check the mark is less than 50 and show fail in the browser.
also adding else statement will work, where else statement code will be executed if the condition if statements evolves to false.
For example

var mark = prompt("enter a number");
if(mark >= 50 && mark<=100>){
    alert("Passed!");
}else{
    alert("failed");
}