-
- 1- Browsers : People access websites using software called a web browser. Popular examples include Firefox, Internet Explorer, Safari, Chrome, and Opera.
- 2- Web Servers : When you ask your browser for a web page, the request is sent across the Internet to a special computer known as a web server which hosts the website.
- 3- Devices : desktop computers, laptops, tablets, and mobile phones.
- 4- Screen readers : are programs that read out the contents of a computer screen to a user. They are commonly used by people with visual impairments.
All websites use HTML and CSS, but content management systems, blogging software, and e-commerce platforms often add a few more technologies into the mix.
-
- web page authors used elements to group together related elements
- Authors used class or id attributes to indicate the role of the element in the structure of the page.
- web page authors used
-
- HTML5 introduces a new set of elements that allow you to divide up the parts of a page. The names of these elements indicate the kind of content you will find in them. They are still subject to change, but that has not stopped many web page authors using them already.
- figre below show html5 layout elements
tag Description Defines a header for a document or a section Defines a set of navigation links Defines a section in a document Defines an independent, self-contained content Defines content aside from the content (like a sidebar) Defines a footer for a document or a section Defines additional details that the user can open and close on demand Defines a heading for the details element - The new HTML5 elements indicate the purpose of different parts of a web page and help to describe its structure.
- The new elements provide clearer code (compared with using multiple elements).
- Older browsers that do not understand HTML5 elements need to be told which elements are block-level elements.
- To make HTML5 elements work in Internet Explorer 8 (and older versions of IE), extra JavaScript is needed, which is available free from Google.
-
The aim is to create a Site Map of the pages that will be used to structure the site. figure1 show the example of Site Map
- figure1 : Example of Site Map
-
A wireframe is a simple sketch of the key information that needs to go on each page of a site. It shows the hierarchy of the information and how much space it might require. Figure2 is show example of WireFrames
- Figure2:Example of WireFrames
-
The primary aim of any kind of visual design is to communicate. Organizing and prioritizing information on a page helps users understand its importance and what order to read it in.The Visual hierarchyand Design NaVigation are Examples of Visual Design
You can use contrast to create a visual hierarchy that gets across your key message and helps users find what they are looking for.
- Visual hierarchy Components 1- Size 2- Color 3- Style
Site navigation not only helps people find where they want to go, but also helps them understand what your site is about and how it is organized.Good navigation tends to follow these principles. 1- Concise 2- Clear 3- Selective
-
- HTML Languege describes the structure of pages
- HTML uses elements to describe the structure of Pages. the elements of HTML called Tags ex .
- Attributes tell more about elements. example
Paragraph in English
- HTML Structure show in figure bellow
- the tools to write html code is text editor or online editor *To learn more about HTML visit W3Schools website
-
A script is a series of instructions that a computer can follow to achieve a goal.
script are made up of instruction a computer can follow step-by-step. A browser may use different parts of the script depending on how the user interacts with the web pages. script can run different sections of the code in response to the situation around them.
To write a script, you need to first state your goal and then list the tasks that need to be completed in order to achieve it.
you need to define the task you want to achieve. You can think of this as a puzzle for the computer to solve.
To design a script you split the goal out into a series of tasks that are going to be involved in solving this puzzle. This can be represented using a flowchart. You can then write down individual steps that the computer needs to perform in order to complete each individual task (and any information it needs to perform the task), rather like writing a recipe that it can follow.
Each of the steps needs to be written in a programming language that the computer understands. In our case, this is JavaScript.
-
-
In computer programming, each physica l thing in the world can be represented as an object. Programmers might say that there is one instance of the object. Each object can have its own: properties , events and methods
-
Programmers call these characteristics the properties of an object. Each property has a name and a value, and each of these name/value pairs tells you something about each individual instance of the object.
-
An event is the computer's way of sticking up its hand to say, "Hey, this just happened!"
-
-
Programmers choose which events they respond to. When a specific event happens, that event can be used to trigger a specific section of the code.
-
Scripts often use different events to trigger different types of functionality.
-
So a script will state which events the programmer wants to respond to, and what part of the script should be run when each of those events occur.
-
-
-
Methods typically represent how people (or other things) interact with an object in the real world.
-
They are like questions and instructions that:
- Tell you something about that object (using information stored in its properties)
- Change the value of one or more of that object's properties
-
What Does a Method Do?
- The code for a method can contain lots of instructions that together represent one task.
- When you use a method, you do not always need to know how it achieves its task; you just need to know how to ask the question and how to interpret any answers it gives you.
-
Computers use data to create models of things in the real world. The events, methods, and properties of an object all relate to each other: Events can trigger methods, and methods can retrieve or update an object's properties
-
- How A browser sees a web pages?
- 1- Receive a page as HTML code
- 2- Create a model of the page and store it in memory
- 3- Use a rendering engine to show the page on screen
- 1- Receive a page as HTML code
- How A browser sees a web pages?
- 1- HTML only 2- HTML + CSS 3- HTML + CSS + JavaScript
-
-
<script src="js/ add-content.js"></ script>
-
A script is a series of instructions that a computer can follow one-by-one. Each individual instruction or step is known as a statement.
-
Statements should end with a semicolon.
-
writting comments to explain what your code does.They help make your code easier to read and understand. This can help you and others who read your code.
- Tow ways to write comment
- 1- // for single line
- 2- / / for multi line
- Tow ways to write comment
-
A script will have to temporarily store the bits of information it needs to do its job. It can store this data in variables.
-
A variable is a good name for this concept because the data stored in a variable can change (or vary) each time a script runs
-
The variable decleration is as this var x;
-
The variable Assigning is as this x=3; -JavaScript distinguishes between numbers,strings, and true or false values known as Booleans.
- 3 is a number
- 'Ahmed' is a strings
- Boolean is a true or false
- A variable name in JavaScript
- 1- must be started with a letter.
- 2- can contain letters,numbers, dollar sign ($), or an underscore (_). Note that you must not use a dash(-) or a period (.) in a variable name.
- 3- should not be keyWord such as if
- 4-is the case sensetive: so score and Score would be different variable names, but it is bad practice to create two variables that have the same name using different cases.