Tuesday, June 23, 2015

HTML5

HTML5

HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The Web has changed a lot since then. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.

Some rules for HTML5 were established.

  • New features should be based on HTML, CSS, DOM, and JavaScript.
  • The need for external plugins (like Flash) should be reduced.
  • There should be better error handling.
  • There should be more markup to replace scripting.
  • HTML5 should be device independent.
  • The development process should be visible to the public.

New Features

  • The canvas element for drawing
  • The video and audio elements for media playback
  • Better support for local offline storage
  • New content-specific elements, such as article, footer, header, nav, and section
  • New form controls, such as calendar, date, time, e-mail, URL, and search

New Elements In HTML5

    <article> - This specifies independent, self-contained content; it could be a news article, blog post, forum post, or other article that can be distributed independently from the rest of the site.
    <aside> - This is for content aside from the content it is placed in. The aside content should be related to the surrounding content.
    <summary> - This is a caption, or summary, inside the details element.
    <footer> - This is for a footer of a document or section; it could include the name of the author, the date of the document, contact information, or copyright information.
    <header> - This is for an introduction of a document or section; could include navigation.
    <nav> - This is for a section of navigation.
    <section> - This is for a section in a document, such as chapters, headers, footers, or any other sections of the document.
    <audio> - This is for multimedia content, sounds, music, or other audio streams.
    <video> - This is for video content, such as a movie clip or other video streams.
    <source> - This is for media resources for media elements, defined inside video, or audio elements.
    <canvas> - This is for making graphics with a script.

Posted by at No comments:

Friday, June 19, 2015

Javascript

Javascript

Introduction to Javascript

JavaScript is most commonly used as a client side scripting language. This means that JavaScript code is written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it's up to the browser to do something with it. JavaScript is a full-featured programming language that allows a developer to perform calculations and handle looping, selection and repetitive tasks, arrays, and manipulation of the browser object model and the document object model.JavaScript can be placed in the head or body tags within an HTML document using script tags. This method of adding JavaScript to a Web page is considered inline scripting. For inline scripting, the general standard is to place the scripts within the head tag. JavaScript code also can reside in a separate file with a .js extension; this method is known as external scripting.

JavaScript code can be written using a text editor, such as Windows Notepad++, or an HTML editor, such as Dreamweaver. The script element is used to contain scripts and has a type attribute that specifies the language used to write the script. The browser uses the value ("text/javascript") specified by the type attribute to read the script.External scripting is more modular than inline scripting, allowing several Web pages to use the functions in the external JavaScript file.JavaScript uses the three basic structured programming control structures: sequential, selection, and iteration.

JavaScript can be placed in the <body> and the <head> sections of an HTML page.In HTML, JavaScript code must be inserted between <script> and </script> tags.
When using variables, remember the following:

  • Variable declarations start with var.
  • Variable names can include only letters, numbers, the underscore (_), or a dollar sign ($).
  • Variable names cannot start with a number.
  • Reserved words cannot be used.
  • The assignment operator (=) is used to modify the value of the variable.

jQuery

jQuery is just one among a number of libraries or frameworks available for JavaScript, but it's the most widely used and I've not come across a compelling reason to use another one. There is excellent introductory material at http://www.w3schools.com/jquery/default.asp One of the most difficult things about jQuery is the syntax, even though in reality it's fairly simple: http://www.w3schools.com/jquery/jquery_syntax.asp Note that the "$" character is just the name of a function, but a crucially important one. In particular, it has nothing to do with variables and is not related to the "$" character as used in PHP! It's really useful to get a clear idea of the range of selectors available: http://www.w3schools.com/jquery/jquery_selectors.asp (the "first", "even", "odd" etc. can be especially useful). (The example of how to use the first-child selector, for instance, has a good example of embedded anonymous functions as commonly used in jQuery: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_ullifirstchild) Again, anonymous functions are the usual approach to defining methods that will be called in response to interactive events: http://www.w3schools.com/jquery/jquery_events.asp

Posted by at No comments:

Sunday, June 14, 2015

Forms

Forms

HTML Forms

Forms let us build interactive Web pages that collect information from a user.There are different types of form objects that we can place on our form, including text fields, radio buttons, check boxes, menus (list boxes), and buttons. Basic form elements that are commonly supported by the major Web browsers include the following.

  • <form>
  • <input>
  • <select>
  • <textarea>
The <form> element defines an HTML form.HTML forms contain form elements.Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.The <input> element is the most important form element.The <input> element has many variations, depending on the type attribute. <input type="text"> defines a one-line input field for text input.

Form Processing Basics

When deciding which controls to use, consider the information that you want to collect, use the following progression of controls.

  • Start by finding out whether you can collect pieces of information using check boxes and radio buttons, because they are the quickest and easiest methods of input for the user, requiring only a click of the mouse.
  • Look for a place where you can use a list, which is also easy to use. But try to make the list as short as possible.
  • Then use text fields to collect short text input.
  • Finally, include text areas only if visitors need to give longer responses using their own words.
In general, radio buttons, check boxes, and select lists are all better choices for accepting input than text areas are. If you can provide choices and let users choose from them, do so.To process a form, you must include a button for the user to submit the information that was entered into the form. When someone clicks the Submit button, all of the information that he or she has filled in is sent, in a standard format, to an Internet address that you specify in the form itself. You then have a special forms-processing program at that address that was coded to process that information on the server.

Tag/Attribute Description action="..." Specifies the file, usually a program on the HTTP server that will process the output from the form method="..." Tells the browser how to send the data to the server, with either the POST or GET method. The end result is the same, and the distinction is how the information is provided to the server, either through the URL or through a form object. The action = and method = attributes depend on the server-side program that processes the form.The documentation that came with your form - processing script or with your Web server hosting account will tell you what to use whether POST or GET is the value for the method attribute.
The POST method is almost always used because it instructs the browser to send the form entry results as part of the document header, hiding the data being passed. The GET method is the default value for the method attribute, and is the method used if the method attribute is not specified in the form's opening tag. The GET method appends the data to the end of a URL to pass the data to the server. The GET method is much less secure, but using GET does have some advantages.

Form Controls

Controls are the things that we use to collect user data. They consist of text boxes, buttons, check boxes, and radio buttons, and we will use them to collect and display data.

  • Radio buttons give visitors an opportunity to choose one, and only one, item
  • Check boxes allow visitors to select one item, no items, or several items from a list.
  • Select lists are lists from which the visitor can choose one or more items.
  • Text fields are for short text input, such as names, search terms, or e-mail addresses.

Posted by at No comments:

Monday, June 1, 2015

Tables

TABLES

Tables

A table consists of rows and columns; a good visual example is a Microsoft Excel spreadsheet. A cell is an intersection of a row and a column. We can create table structures that contain rows and columns and then merge the rows and columns to create the grid layouts.By default, all major browsers display table headings as bold and centered:

  • Tables are defined with the <table> tag.
  • Tables are divided into table rows with the <tr> tag.
  • Table rows are divided into table data with the <td> tag.
  • A table row can also be divided into table headings with the <th> tag.

Navigation Guidelines

  • Site identification - This includes company name, logo, page title, and page purpose. This will keep customers from getting confused, no matter how they arrived at the page.
  • Home Page link - This is pretty simple. Customers should always be able to return to the home page at a single click of a button.
  • Links to second-level pages - If you consider the home page the first, or top, level of the navigation hierarchy, then there will be a set of second-level pages that are the start pages for the primary use case scenarios. You should provide links to these pages because doing so allows a customer to begin an operation with one click, and it also provides a visual map of the website structure.
  • Contact information - This is a link to a Contact Us page. You will want to provide the appropriate level of contact information, and you should not provide information that you will not support.

Navigation Principles

  • Create Simple, Visible, and Consistent Navigation
  • Leverage The Customers' Experience
  • Keep It Simple
  • Provide Alternatives
  • Provide Active Feedback
  • Make Navigation Easy to Change

Hyperlinks

There are two types of hyperlinks that websites use: text links and graphical links. Both text and graphical links are important in website design. Text-based links have the advantage of taking up less screen space and loading faster. Graphical links have the advantage of adding a nice look and feel to a site.The href attribute specifies the destination address. The link text is the visible part.Clicking on the link text, will send you to the specified address.

Posted by at No comments:

Monday, May 25, 2015

Box Model, and Page Layout

Intermediate CSS, Box Model, and Page Layout

Box Model

The Box Model is an element used to create a box around elements on the page. There are several attributes of the Box Model that allow designers to alter the appearance of the Box Model. Below is a diagram of the CSS Box Model.



Box Model Attributes

Margin: the space between the element and other content
Border: the border of the actual box
Padding: the space between the element’s content and the box’s border
Content: the content of the element

Sizing and Spacing

box height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin
box width = left margin + left border + left padding + width + right padding + right border + right margin

Page Layout

A webpage layout is very important to give better look to the website. It takes considerable time to design a website's layout with great look and feel. Now a days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but we can create a good layout using simple HTML tables or division tags in combination with other formatting tags

Posted by at No comments:

Sunday, May 17, 2015

CSS

Planning the Site and its Navigation

Planning the Site

Here are some techniques that many experienced Web developers use when planning a site.

  • Create a site specification - A site specification identifies the site and its purpose.
  • Identify the goal of the content - What type of things will go into the site?
  • Analyze the audience - Who will be visiting my site? How do I design the site with them in mind?
  • Build a Web development team - Given my site, do the people working on the site have the correct skill set? Do I need to outsource? What about training?
  • Create standards for filenames and paths.
  • Establish a directory structure and make sure that everyone on the team understands and follows it.
  • Create a site storyboard.

    • Introduction to CSS

    CSS stands for Cascading Style Sheets
    CSS defines how HTML elements are to be displayed. CSS is a language of its own, with syntax requirements and keywords
    that are different than what we've seen in HTML and any other Web programming language.

    There are three ways to apply CSS style rules in the Web pages.

  • The style attribute of an HTML tag (inline)
  • The <style> element (embedded)
  • A linked CSS file (external), also called an external style sheet

    • Style Attribute

    CSS is applied by creating style rules. These rules consist of two parts: the selector (HTML tag; the part of your document to
    which you want to apply the formatting) and the declaration (the formatting you want applied). In the CSS rule here, text designated
    as h1 in the HTML code will be formatted with the color red.

    h1 {color: red;}

    In this example, color is the property of the h1 tag, and red is the value of that property. The declaration is always enclosed in curly
    braces unless it's the value for a style attribute, as in the example below. The CSS property is connected to its value by a colon.
    To specify multiple properties and values in a single CSS declaration, each pair is separated by a semicolon following each value, as shown below.

    h1 {color: red; font-size: 12px;}

    To use this basic concept within the style attribute of an HTML tag, you would need to add the property and value to the style attribute of
    the tag as follows.

    <h1 style="color: red;">Heading Text</h1>

    With external style sheets, the specifications and declarations are contained in a separate file. As such, they can be applied to all
    of the pages in the website. External style sheet rules are sometimes referred to as being global in scope. External style sheets usually
    have the file extension .css.

    It is a good idea to add comments in the external style sheets to help you figure out what you did and why. If you haven't looked at the page
    for a while, you might forget. Comments in a CSS file are formed with a slash asterisk (/*) to start the comment and the reverse (*/) to end the comment.

    Types of Selectors

    There are three types of style declarations to which you can add properties and values.

  • Tag selectors: These are the tag abbreviations (p, h1, h3, div, ul, ol, li).
  • ID selectors: These are tag IDs preceded by a pound/hash sign (#).
  • Class selectors: These are named CSS classes that are preceded by a dot (.).

    • Posted by at No comments:

    Wednesday, May 13, 2015

    DeVry
    Click on the image to visit DeVry University

    Joseph Thacharayil
    CIS-363A
    Week1

    Welcome to my first html class

    What is HTML?

    HTML is a markup language for describing web documents (web pages).
    HTML stands for Hyper Text Markup Language
    A markup language is a set of markup tags
    HTML documents are described by HTML tags
    Each HTML tag describes different document content


    HTML Documents

    All HTML documents must start with a type declaration: <!DOCTYPE html>.
    The HTML document itself begins with <html> and ends with </html>.
    The visible part of the HTML document is between <body> and </body>.

    HTML Headings

    HTML headings are defined with the <h1> to <h6> tags:

    HTML Paragraphs

    HTML paragraphs are defined with the <p> tag:

    HTML links are defined with the <a> tag. The link address is specified in the href attribute:
    Example:<a href="http://www.devry.com">This is a link</a>
    to view page:file:///C:/Users/joseph/Documents/CIS/CIS363A/week1/htmlweek1.html
    Posted by at No comments:
    Subscribe to: Posts (Atom)