- 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.
- 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
- Browsers
- Web Servers
- Screen readers
- Devices
1- First step: The request is sent.
2- Second step: The server responds.
3- Third Step: The website is displayed.
4- Frequently Asked questions
4.1- What is a URL?
4.2- How does the computer or browser know where to find a particular domain?
4.3- Are there different kinds of requests?
-
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:
Every HTML element has a default display value, depending on what type of element it is.
There are two display values: block and inline.
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>Hello World</div>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 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.
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.
| 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 |
- 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 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.
Numbers : int , long int, double etc .
Strings : “ some thing”
Char : ‘c’
Boolean : T ,F (1,0)
Var …name… and then the value .
String :
<var name= ”Aseel ”>
number:
__
Consol.log (age) .. consol.log (variable name)
Boolean : Var checked = true ;
Consol.log( checked) …. The result will be( true )
Ex. The check box 😊 .
Using <script>
- <Console.log> (‘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 );
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 .
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 ” .
'''
<script> document.write(‘First name: ${fname}’); </script> > ''' ________ ## 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 .
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 .
Function inside it we can add message Prompt(“Whats your name ? ”);
Var fname = Prompt(“Whats your name ? ”);
Console.log (fname);
3- Var fname = Prompt(“Whats your name ? ‘DEfoult’ ”);
A script is a series of instructions that a computer can follow to achieve a goal.
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";
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
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 |
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 }