Introductory HTML and JavaScript

Reading-notes.md

Introductory HTML and JavaScript

What is HTML?

  • HTML stands for Hyper Text Markup Language.
  • HTML is the standard markup language for creating Web pages.

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

Content goes here...

  • Some Important Tag Elements:

    • The <html> element is the root element of an HTML page.
    • The <head> element contains meta information about the HTML page.
    • The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
    • The <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.
    • The <h1> element defines a large heading.
    • The <p> element defines a paragraph.

What is HTML Element Attribute?

HTML attributes provide additional information about HTML elements. - All HTML elements can have attributes. - Attributes provide additional information about elements. - Attributes are always specified in the start tag. - Attributes usually come in name/value pairs like: name=”value”.

What is HTML DOCTYPE?

The HTML DOCTYPE is used to specify the HTML document version used in the web browser. - The <!DOCTYPE html> declaration defines that this document is an HTML5 document.

How to use comments in HTML?

To use comments in HTML We just type

NOTE: It can be very usefull in case of documenting a larg code or when work with ather developer on a project.

How to select HTML element? ID Attribute: It is used to uniquely identify that element from other elements on the page. It is important that no two elements on the same page have the same value for their id attributes. Class Attribute: The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class.

What is Block element and Inline element?

Block Element: 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.

Inline Element:

An inline element does not start on a new line.

Grouping text & elements in block:

The <div> element allows you to group a set of elements together in one block-level box. - i.g: <div id="header"> Anish Kapoor <ul> <li>Home</li> <li>Biography</li> <li>Works</li> <li>Contact</li> </ul> </div>

Grouping text & elements inline:

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

One common use of iframes (that you may have seen on various websites) is to embed a Google Map into a page. The content of the iframe can be any html page (either located on the same server or anywhere else on the web).

meta tags: The tag allows you to supply all kinds of information about your web page.

Escape characters: Escape characters are used to include special characters in your pages such as <, >, and©.

HTML Layouts: Traditional HTML Layouts For a long time, web page authors used <div> elements to group together related elements on the page (such as the elements that form a header, an article, footer or sidebar). Authors used class or id attributes to indicate the role of the <div> element in the structure of the page.

New HTML5 Layout Elements 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.

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.

  • Target Audience:

    • i__ndividuals__:

    You should ask yourself as the designer a few questions:

    • What is the age range of your target audience?
    • Will your site appeal to more women or men? What is the mix?
    • Which country do your visitors live in?
    • Do they live in urban or rural areas?
    • What is the average income of visitors?
    • What level of education do they have?
    • What is their marital or family status?

    • and more …..

    • Companies:

      • What is the size of the company or relevant department?
      • What is the position of people in the company who visit your site?
      • Will visitors be using the site for themselves or for someone else?
      • How large is the budget they control?

What is a Site Maps?

a diagram of the pages that will be used to structure the site.

Why we use WireFrames?

Wireframes allow you to organize the information that will need to go on each page.

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.

Javascript

What is Javascript?

is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else.

What is a Script?

A script is a series of instructions that a computer can follow to achieve a goal.

How to write a script?

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.

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.

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.

CODE EACH STEP:

Each of the steps needs to be written in a programming language that the compu ter understands. In our case, this is JavaScript.

EXAMPLES OF JAVASCRIPT IN THE BROWSER Forms Slideshows Filtering data Reload part of a page OBJECTS & PROPERTIES: Object (things):

In computer programming, each physica l thing in the world can be represented as an object. There are two different types of objects here: a hotel and a car.

PROPERTIES (CHARACTERISTICS):

Both of the cars share common characteristics. In fact, all cars have a make, a color, and engine size. You could even determine their current speed. Programmers call these characteristics the properties of an object.

Each object can have its own:

Properties Events Methods EVENTS: What is Events:

JavaScript’s interaction with HTML is handled through events that occur when the user or the browser manipulates a page.

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.

METHODS:

What is METHODS?

Methods typically represent how people (or other things) interact with an object in the real world.