HTML

Introduction

• HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses tags to define what manipulation has to be done on the text. HTML is a markup language used by the browser to manipulate text, images, and other content, in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1999.

HTML structure

• Basic structure of an HTML document:

• The basic structure of an HTML document consists of 5 elements:
  1. The DOCTYPE: The DOCTYPE tells the web browser which version of HTML the page is written in. In this class, we will be using ‘XHTML Transitional’, which allows us a little flexibility.
  2. The < html> Element: The < html> element tells the browser that the page will be formatted in HTML and, optionally, which world language the page content is in.
  3. The < head> and < body> Elements: The < head> element surrounds all the special “behind the scenes” elements of a web document. Most of these elements do not get displayed directly on the web page. The < body> element surrounds all the actual content (text, images, videos, links, etc.) that will be displayed on our web page.
  4. The < meta> Element: This line declares that the document is encoded in the UTF-8 (Unicode) character set. There can be multiple < meta> lines in the same web page. The < meta> element is often used to provide additional information such as page keywords, a page description, and the author(s) of a web document.
  5. The < title> Element: The < title> element defines what text will show in the web browser’s title bar.
• Every web document must include one and only one instance of DOCTYPE, < html>, < head>, < body>, and < title>. for more information please Visit: Structure of an HTML documrnt

How People Access the Web?

• Before we look at the code used to build websites it is important to consider the different ways in which people access the web and clarify some terminology.
• Browsers: People access websites using software called a web browser. Popular examples include Firefox, Internet Explorer, Safari, Chrome, and Opera.
• 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.
• Screen readers: 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.

Extra Markup

• DOCTYPES tell browsers which version of HTML you are using.
• You can add comments to your code between the < !– and –> markers.
• The id and class attributes allow you to identify particular elements.
• The < div> and < span> elements allow you to group block-level and inline elements together.
• < iframes> cut windows into your web pages through which other pages can be displayed.
• The < meta> tag allows you to supply all kinds of information about your web page.
• Escape characters are used to include special characters in your pages such as <, >, and ©.

HTML5 Layout

1. The new HTML5 elements indicate the purpose of different parts of a web page and help to describe its structure.
2. The new elements provide clearer code (compared with using multiple < div> elements).
3. Older browsers that do not understand HTML5 elements need to be told which elements are block-level elements.
4. 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

• Wireframing is a UX design technique that allows designers to establish and arrange the information hierarchy of a website, app, or product. Based on the user research conducted by the UX design team, this approach focuses on how the designer or client wants the user to digest information on a site. For more information please visit wireframe.

• Sumarization:
  1. It’s 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.
  2. Site maps allow you to plan the structure of a site.
  3. Wireframes allow you to organize the information that will need to go on each page.
  4. Design is about communication. Visual hierarchy helps visitors understand what you are trying to tell them.
  5. You can differentiate between pieces of information using size, color, and style.
  6. You can use grouping and similarity to help simplify the information you present.

JavaScript

Introduction

• JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for Web pages, but it’s used in many non-browser environments as well. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles JavaScript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event. JavaScript is an easy to learn and also powerful scripting language, widely used for controlling web page behavior.
• The ABC of Programming: Before you learn how to read and write the JavaScript language itself, you need to become familiar with some key concepts in computer programming. They will be covered in three sections:
• A - What is a script and how do I create one?
• B - How do computers fit in with the world around them?
• C - How do I write a script for a web page?

SUMMARY

• A: What is a script and how do I create one?
  1. A script is a series of instructions that the computer can follow in order to achieve a goal.
  2. Each time the script runs, it might only use a subset of all the instructions.
  3. Computers approach tasks in a different way than humans, so your instructions must let the computer solve the task programmatically.
  4. To approach writing a script, break down your goal into a series of tasks and then work out each step needed to complete that task (a flowchart can help.

please visit THE ABC of programming.