Reading-Notes

Project maintained by eslamakram Hosted on GitHub Pages — Theme by mattgraham

reading notes 201 class 01

There are 3 types of websites:

Small websites are often written just using HTML and CSS.
Larger websites — in particular those that are updated regularly and use a content management system (CMS), blogging tools, or e-commerce software — often make use of more complex technologies on the web server.
Larger, more complex sites like these may use a database to store data, and programming languages such as PHP, ASP.Net, Java, or Ruby on the web server.

HTML

HTML Structure structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document. note : The structure is very similar newspaper but it covert it online to browse it via mobile, laptop ..etc how to strucure ? HTML uses tags (characters that sit inside angled brackets) to give the information they surround special meanings. Tags are often referred to as elements.

Tags usually come in pairs:

The opening tag denotes the start of a piece of content ; can carry attributes, which tell us more about the content of that element
the closing tag denotes the end.
Extra Markup
1. DOCTYPES : declaration to tell a browser which version of HTML
2. Comments in HTML : 
3. ID Attribute : it is used to uniquely identify that element from other elements on the page. Its value should start with a letter or an underscore (not a number or any other character).
4. Class Attribute : it is used to identify several elements as being different from the other elements on the page.
5. Block Elements : elements will always appear to start on a new line in the browser window. Examples of block elements are <h1>, <p>, <ul>, and <li>.
6. Inline Elements : elements will always appear to continue on the same line as their neighbouring elements. Examples of inline elements are <a>, <b>, <em>, and <img>.
7. Grouping Text & Elements In a Block : - <div> element allows you to group a set of elements together in one block-level box - <span> element allows you to group a text. also, it is used to either Contain a section of text where there is no other suitable element to differentiate it from its surrounding text or Contain a number of inline elements.
8. Information About Your Pages : The <meta> element lives inside the <head> element and contains information about that web page.
9. Escape characters are used to include special characters in your pages such as <, >, and ©.
HTML 5 Layout

The new HTML5 elements i XX ndicate the purpose of different parts of a web page and help to describe its structure
The <header> and <footer> elements can be used for: ●● The main header or footer that appears at the top or bottom of every page on the site. ●● A header or footer for an individual <article> or <section> within the page.
The <section> element groups related content together, and typically each section would have its own heading.

Process and design 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.

Site Maps The aim is to create a diagram of the pages that will be used to structure the site. This is known as a site map and it will show how those pages can be grouped.

Tips for a professinal look of your website:
- Wireframes allow you to organize the information that will need to go on each page.
- Design is about communication. Visual hierarchy helps visitors understand what you are trying to tell them.
- You can differentiate between pieces of information using size, color, and style.
- You can use grouping and similarity to help simplify the information you present.

JAVASCRIPT

ABC of programming :

A SCRIPT IS A SERI ES OF INSTRUCTIONS that a computer can follow to achieve a goal.
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.

Start with the big picture of what you want to achieve, and break that down into smaller steps. 1: DEFINE THE GOAL First, you need to define the task you want to achieve. You can think of this as a puzzle for the computer to solve. 2: DESIGN THE SCRIPT 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. 3: CODE EACH STEP Each of the steps needs to be written in a programming language that the computer understands. In our case, this is JavaScript.