reading-notes

Introductory HTML and JavaScript

HTML

How People Access the Web?

People access websites using software called a web browser. Popular examples include 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.

How the Web Works?

When you visit a website, the web server hosting that site could be anywhere in the world. In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server.

Structure of HTML

HTML pages are text documents.
HTML uses tags.
HTML uses tags.

HTML5

HTML5 is introducing a new set of elements that help define the structure of a page. The new HTML5 elements indicate the purpose of different parts of a web page and help to describe its structure.

Important things in HTML

DOCTYPES tell browsers which version of HTML you are using.
Comment can be added between those

The id and class attributes allow you to identify particular elements.
The <div> and elements allow you to group block-level and inline elements together.
cut windows into your web pages through which other pages can be displayed.

Example

<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta name="description" content="Telephone, email
 and directions for The Art Bookshop, London, UK" />
 <title>Contact The Art Bookshop, London UK</title>
</head>
<body>
 <div id="header">
 <h1>The Art Book Shop</h1>
 <ul>
 <li><a href="index.html">home</a></li>
 <li><a href="index.html">new publications</a>
 </li>
 <li class="current-page">
 <a href="index.html">contact</a></li>
 </ul>
 </div><!-- end header -->
 <div id="content">
 <p>Charing Cross Road, London, WC2, UK</p>
 <p><span class="contact">Telephone</span>
 0207 946 0946</p>
 <p><span class="contact">Email</span>
 <a href="mailto:books@example.com">
 books@example.com</a></p>
 <iframe width="425" height="275" frameborder="0"
 scrolling="no" marginheight="0" marginwidth="0"
 src="http://maps.google.co.uk/maps?f=q&amp;
 source=s_q&amp;hl=en&amp;geocode=&amp;
 q=charing+cross+road+london&amp;output=embed">
 </iframe>
 </div><!-- end content -->
 <p>&copy; The Art Bookshop</p>
</body>
</html>

Who is the Site For?

Every website should be designed for the target audience, not just for yourself or the site owner.

Why People Visit Your Website?

1- The first attempts to discover the underlying motivations for why visitors come to the site. 2- The second examines the specific goals of the visitors. These are the triggers making them come to the site now.

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.
The groups of information are then turned into the diagram that is known as the site map.
A site map will usually begin with the homepage. Additionally, if the site is large and is compartmentalized into sections, each section might require its own section homepage to link to all of the information within it.

WireFrames

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.

JavaScript

How JavaScript makes website more interactive?

Access content.
Modify content.
Program rules.
React to events.

Examples of JavaScript

1- Slideshow. 2- Forms. 3- Reload part of page. 4- Filtering data.

What is a Script?

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