class-01 summary

Introduction to HTML and CSS:

• web browser is a software application for accessing information on the World Wide Web. Popular examples : Firefox, Internet Explorer, Safari, Chrome, and Opera. In order to view a web page, users might type a web address into their browser, follow a link from another site, or use a bookmark.

• 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.

• People are accessing websites on an increasing range of devices including desktop computers, laptops, tablets, and mobile phones.

• 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.

  How websites are created?

  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.

  How the web works?

  1. When you connect to the web, you do so via an Internet Service Provider (ISP). You type a domain name or web address into your browser to visit a site

  2. Your computer contacts a network of servers called Domain Name System (DNS) servers. These act like phone books; they tell your computer the IP address associated with the requested domain name. An IP address is a number of up to 12 digits separated by periods / full stops. Every device connected to the web has a unique IP address; it is like the phone number for that computer.

  3. The unique number that the DNS server returns to your computer allows your browser to contact the web server that hosts the website you requested. A web server is a computer that is constantly connected to the web, and is set up especially to send web pages to users.
  4. The web server then sends the page you requested back to your web browser.

STRUCTURE:

• HTML refer to HyperText Markup Language.
• HTML elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags( Tags act like containers) HTML uses elements to describe the structure of Pages.
• Attributes tell more about elements by providing additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
• < body > : Everything inside this element is shown inside the main browser window.
• < head > Before the < body > element you will often see a this element which contains information about the page and you will usually find a < title > element inside it .
• < title > The contents of it is shown in the top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page .

EXTRA MARKUP:

• Since the web was first created, there have been several different versions of HTML.
  • HTML 4: released 1997 .
  • XHTML 1.0 :released 2000.
  • HTML 5 :released 2000.

• DOCTYPE : Because there have been several versions of HTML, each web page should begin with a DOCTYPE declaration to tell a browser which version of HTML the page is using.

• To add a comment to the code that will not be visible in the user’s browser, you can add the text between these characters: < !– comment goes here – >
• Every HTML element can carry the id attribute. It is used to uniquely identify that element from other elements on the page.
• The id attribute is known as a global attribute because it can be used on any element.
• Every HTML element can also carry a class attribute. It used to identify more than one uniquely element within a document and on any element can share the same value.
• Some elements will always appear to start on a new line in the browser window. These are known as block level elements. Examples of block elements are < h1 >, < p >, < ul >, and < li >.
• Some elements will always appear to continue on the same line as their neighbouring elements. These are known as inline elements. Examples of inline elements are < a >, < b >, < em >, and < img >.
• The < div > element allows you to group a set of elements together in one block-level box.
• The < span > element acts like an inline equivalent of the < div > element. It is used to either:
  1. Contain a section of text where there is no other suitable element to differentiate it from its surrounding text
  2. Contain a number of inline elements

• < iframe > An iframe is like a little window that has been cut into your page — and in that window you can see another page. The term iframe is an abbreviation of inline frame.

• The < meta > element lives inside the < head > element and contains information about that web page.
• The < meta > element is an empty element so it does not have a closing tag. It uses attributes to carry the information.
• Escape characters are used to include special characters in your pages such as <, >, and ©.

HTML5 laytout :

• 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.
• 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 < nav > element is used to contain the major navigational blocks on the site such as the primary site navigation.
• The < article > element acts as a container for any section of a page that could stand alone and potentially be syndicated.
• The < aside > element has two purposes, depending on whether it is inside an < article > element or not. When the < aside > element is used inside an < article > element, it should contain information that is related to the article but not essential to its overall meaning. When the < aside > element is used outside of an < article > element, it acts as a container for content that is related to the entire page.
• The < section > element groups related content together, and typically each section would have its own heading.
• The purpose of the < hgroup > element is to group together a set of one or more < h1 > through < h6 > elements so that they are treated as one single heading.
• < figure > - to add figure(Images, Videos, Graphs, Diagrams, Code samples, Text that supports the main body of an article) inside the < article > .
• < figure > element should also contain a < figcaption > element which provides a text decription for the content of the < figure > element.
• The new elements provide clearer code (compared with using multiple < div > 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.

Process & design :

• Every website should be designed for the target audience. It is very important to understand who your target audience is.why they would come to your site, what information they want to find and when they are likely to return.
• Site maps allow you to plan the structure of a site.
• To decide what information should go on each page, you can use a technique called card sorting.
• 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.

Introuction to JavaScript :

• JavaScript used to make websites more interactive( by accessing and modifying the content, Programing rules or instructions the browser can follow ,responding to what the user does) interesting, and user-friendly.

  jQuery makes writing JavaScript a lot easier.

• A script is a series of instructions that a computer can follow to achieve a goal step-by-step.

• Each time the script runs, it might only use a subset of all the instructions.

• Computers approach tasks in a different way than humans, so your instructions must let the computer solve the task programmatically.

• 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.
  1. DEFINE THE GOAL
  2. DESIGN THE SCRIPT (using flow chart to help )
  3. CODE EACH STEP
• How do computers fit in with the world around them ?
• Computers create models of the world using data .
• in computer programming,each physical thing in the world can be represented as object . And , each object can have its own properties( name and value ) ,events(to trigger methods) and methods(can retrieve the properties).
• Web browsers use HTML markup to create a model of the web page.Each element creates its own node .

• The interpreter(scripting engine) takes the instructions in javascript and translates them so the browser can use them to achieve the tasks.

• separation of concerns:

• JavaScript file is text file with extension (.js) .
• It’s best to keep JavaScript code in its own JavaScript file .
• The HTML< script > element {in the end of < body > after the < footer > } used to tell browser to lead the Javascript file .