Skip to content

Home

Jump to bottom
Nickk07 edited this page Jun 16, 2022 · 1 revision

Index

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.

Simple HTML code

  • <!DOCTYPE html>declaration defines that this document is an HTML5 document
  • <html>element is the root element of an HTML page
  • <head>element contains meta information about the HTML page
  • <title>element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
  • <body>element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • <h1>element defines a large heading
  • <p>element defines a paragraph

Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE>

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.

Headings

HTML headings are defined with the <h1> to <h6> tags.

Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

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

CSS Example

p { color: red; text-align: center; }

  • p is a selector in CSS (it points to the HTML element you want to style: <p>)
  • color is a property, and red is the property value
  • text-align is a property, and center is the property value

Syntax

CSS selector

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Background

The background-color property specifies the background color of an element, same with text.

With CSS, a color is most often specified by:

  • a valid color name - like "red"
  • a HEX value - like "#ff0000"

example :

  • body {background-color: red;}
  • body {background-color: #ff0000;}

Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc).

In addition, links can be styled differently depending on what state they are in.

The four links states are:

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked

JavaScript

A computer program is a list of "instructions" to be "executed" by a computer.

In a programming language, these programming instructions are called statements.

JavaScript can "display" data in different ways:

  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write().
  • Writing into an alert box, using window.alert().
  • Writing into the browser console using console.log().

To access an HTML element, JavaScript can use the document.getElementById(id) method.

Statement

  • JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":

example : document.getElementById("demo").innerHTML = "Hello Dolly.";

  • JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.

The purpose of code blocks is to define statements to be executed together.

One place you will find statements grouped together in blocks, is in JavaScript functions:

function myFunction() { document.getElementById("demo1").innerHTML = "Hello Dolly!"; document.getElementById("demo2").innerHTML = "How are you?";}

Keywords

JavaScript statements often start with a keyword to identify the JavaScript action to be performed.

Here is a list of some of the keywords you will learn about in this tutorial:

  • var | Declares a variable
  • let | Declares a block variable
  • const | Declares a block constant
  • if | Marks a block of statements to be executed on a condition
  • switch | Marks a block of statements to be executed in different cases
  • for | Marks a block of statements to be executed in a loop
  • function | Declares a function
  • return | Exits a function
  • try | Implements error handling to a block of statements

Values

The JavaScript syntax defines two types of values:

  • Fixed values
  • Variable values
  • Fixed values are called Literals.

Variable values are called Variables.

Variables

In a programming language, variables are used to store data values.

JavaScript uses the keywords var, let and const to declare variables.

An equal sign is used to assign values to variables.

Comments

Not all JavaScript statements are "executed".

Code after double slashes // or between /* and */ is treated as a comment.

Identifiers / Names

Identifiers are JavaScript names.

Identifiers are used to name variables and keywords, and functions.

The rules for legal names are the same in most programming languages.

A JavaScript name must begin with:

  • A letter (A-Z or a-z)
  • A dollar sign ($)
  • Or an underscore (_)

Subsequent characters may be letters, digits, underscores, or dollar signs.

Case Sensitive

All JavaScript identifiers are case sensitive.

The variables lastName and lastname, are two different variables.

Functions

  • 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

  • A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

  • When JavaScript reaches a return statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.

Functions often compute a return value.

Clone this wiki locally