View on GitHub

reading-notes

Reading Notes about Markdown-Html-Css-JavaScript

HTML && CSS :

code _ __

What is HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.

What is CSS?

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files ___
How People Access the Web
Browsers
Web Servers
Screen readers
Devices

How The Web Works

1- First step: The request is sent.

2- Second step: The server responds.

3- Third Step: The website is displayed.

4- Frequently Asked questions

1- What is a URL?
2- How does the computer or browser know where to find a particular domain?
3- Are there different kinds of requests?

Extra Markup

HTML Versions :

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.

-The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.

Block-level Elements

A block-level element always starts on a new line.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline element does not.

The <div> element is a block-level element. Example

<div>Hello World</div>

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a element inside a paragraph.

Example

”“Hello World””

HTML5 Layout

HTML5 is an upgrade from HTML 4.01 version, that has many new features, advanced functional features, better page views, and many other improvements to match the growing technological needs. The most used and desired elements of HTML5 are

figure, figcaption, article, header, main,mark,footer, nav, aside,hggroup, section and summary

. These tags/ elements of HTML 5 enables far more user friendly interfaces, with higher performance rates, efficient outcomes, easier to code and implement, and it helps in improvising the layout as a whole. ___

Using New HTML5 Elements In Old Browsers

HTML 5 is a great update for HTML it comes with so many new elements to use in web design but unfortunately with advances in technology comes problems when those advances need to work with older technologies such as older browser versions like internet explorer 6, this means if someone is using your website on IE then it will be completely broken because IE doesn’t recognize the HTML5 element code. This does mean you shouldn’t use it though, there are some work abounds to fix it, for example there is a tool called ‘The HTML5 Shiv’ this tool allows the designer to style a HTML5 element that wont work on older browsers thus making it work now. The way HTML5 Shiv does this is through Java script It simply involves calling document.createElement() for every new, unrecognized element. ___

HTML TAGS

Tag	Description
”!–…–”	Defines a comment
“!DOCTYPE”	Defines the document type
“a”	Defines a hyperlink
“article>	Defines an article
“aside>	Defines content aside from the page content
“div>	Defines a section in a document
“figcaption>	Defines a caption for a element
“figure>	Specifies self-contained content
“head>	Contains metadata/information for the document
“header>	Defines a header for a document or section
“hr>	Defines a thematic change in the content
“html>	Defines the root of an HTML document
“i>	Defines a part of text in an alternate voice or mood
“iframe>	Defines an inline frame
“img>	Defines an image
“meta>	Defines metadata about an HTML document
“p>	Defines a paragraph
“span>	Defines a section in a document
“strong>	Defines important text
“style>	Defines styles information for the document
“nav>	Defines navigation links
“h1> to ‘h6>	Defines HTML headings
head>	Contains metadata/information for the document
header>	Defines a header for a document or section
footer>	Defines a footer for a document or section

PROCESS & DESIGN

How to approach building a site
Understanding your audience and their needs
How to present information visitors want to see

This section discusses a process that you can use when you are creating a new website.

It looks at who might be visiting your site and how to ensure the pages feature the information those visitors need. It also covers some key aspects of design theory to help you create professional looking sites. In this chapter, we will look at:

How to understand the audience your site may attract and what information they will expect to find on it
How to organize information so that visitors can find what they are looking for
Design theory for presenting information in a way that helps visitors achieve their goals
Design tips to help you create more attractive and professional sites

WHO IS THE SITE FOR? Every website should be designed for the target audience—not just for yourself or the site owner. It is therefore very important to understand who your target audience is.

It can be helpful to ask some questions about the people you would expect to be interested in the subject of your site.

If you ask a client who a site is for, it is not uncommon for them to answer “the entire world.”

Realistically, it is unlikely to be relevant to everyone. If your site sells light bulbs, even though most people using a computer probably use light bulbs, they are …

JAVASCRIPT

___

Why we use java script :?

JavaScript a light weight and very fast programming language can be used in browsers to make websites more interactive, interesting, and user-friendly.

1- ACCESS CONTENT We can use JavaScript to select any element, attribute, or text from an Html page

2- MODIFY CONTENT You can use JavaScript to add elements, attributes, and text to the page, or remove them.

3- PROGRAM RULES You can specify a set of steps for the browser to follow (like a recipe), which allows it to access or change the content of a page.

4-REACT TO EVENTS You can specify that a script should run when a specific event has occurred.

Data types :

Numbers : int , long int, double etc .

Strings : “ some thing”

Char : ‘c’

Boolean : T ,F (1,0) __

The variables :

Var …name… and then the value .

Ex .

String :

number:

__

how can I show the value of a variable ?

Consol.log (age) .. consol.log (variable name)

Boolean : Var checked = true ;

Consol.log( checked) …. The result will be( true )

Ex. The check box 😊 . ___

How can we start our js .

Using

**** (‘Class 04’) ;

Examples

 * console.log (‘Class 04’) ;

 * Var fname = ‘Aseel ’ we can use single quotation in Js ;
 Console.log (fname)

 * Var age = 22 ;
 Console.log (age)

 * Console.log(‘first name :’ + fname);
  (the result will be first name : Aseel)

 * Var Female = true ;
Console.log (Female)

* Console.log(‘first name :’ + fname + ’ age ’+ age +’is Female’+ Female );

Note :

Console.log (‘5’+5+5) the result will be 555 . as a String because the first parameter was a string .. if it was an integer for example the result will integer . ____

Comments :

Single line comments start with //. Multi-line comments start with /* and end with */.

Ps : “WE can do it using CTRL and forward slash on the keyboard ” . __

How can we print it directly in html not in th consol ?

’’’

’’’ ____

Another type to show a message to the user is Alert

Why the content will not shown untel we exit the alert ? ,

Bacouse , the execution is sequinntly line by line .

Note

If I have the result in the console and not shown in the html pages the I should know there’s a false in ordering code . Tf the result didn’t shown in both then I have error in my code .

So console is very important for developers to fix problems ,bugs And to check the outputs .
___

Prompt()

Function inside it we can add message Prompt(“Whats your name ? ”);

How can we use it ??

Var fname = Prompt(“Whats your name ? ”);

Console.log (fname);

3- Var fname = Prompt(“Whats your name ? ‘DEfoult’ ”); _____

SCRIPT

A script is a series of instructions that a computer can follow to achieve a goal.

JavaScript Arrays

JavaScript arrays are used to store multiple

1- values in a single variable.

Example

var cars = [“Saab”, “Volvo”, “BMW”];

2- Using the JavaScript Keyword new The following example also creates an Array, and assigns values to it:

Example

var cars = new Array(“Saab”, “Volvo”, “BMW”);

3- Access the Elements of an Array

You access an array element by referring to the index number.

This statement accesses the value of the first element in cars:

var name = cars[0];

4- Changing an Array Element

This statement changes the value of the first element in cars:

cars[0] = “Opel”; ___

Expressions :

An expression evaluates into (results in) a single value. Broadly speaking there are two types of expressions.

1- ASSIGN A VALUE TO A VARIABLE

2- USE TWO OR MORE VALUES TO RETURN A SINGLE VALUE ___

OPERATORS :

1- Arithmetic Operators :

Operator	Description
<+>	Addition
<->	Subtraction
<*>	Multiplication
**	Exponentiation (ES2016)
/	Division
%	Modulus (Division Remainder)
++	Increment
–	Decrement

/////////

2- Assignment Operators

Assignment operators assign values to JavaScript variables.

Operator	Example	Same As
=	x = y	x = y
+=	x += y	x = x + y
-= 1	x -= y	x = x - y
*=	x *= y	x = x * y
/= x	/= y	x = x / y
%=	x %= y	x = x % y
**=	x **= y	x = x ** y

///////

3- Logical Operators

Operator	Description
&&	logical and
II	logical or
!	logical not

Functions

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when “something” invokes it (calls it).

Example

function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 } __

HTML && CSS :

What is HTML?

What is CSS?

How People Access the Web

How The Web Works

Extra Markup

HTML Versions :

The <!DOCTYPE> Declaration

HTML Block and Inline Elements

Block-level Elements

Inline Elements

HTML5 Layout

Using New HTML5 Elements In Old Browsers

HTML TAGS

PROCESS & DESIGN

JAVASCRIPT

Why we use java script :?

Data types :

The variables :

Ex .

how can I show the value of a variable ?

How can we start our js .

Note :

Comments :

How can we print it directly in html not in th consol ?

Another type to show a message to the user is Alert

Note

Prompt()

How can we use it ??

SCRIPT

JavaScript Arrays

Expressions :

OPERATORS :

Functions