1. Views
2. Controllers
3. Client-model
The view manages the display of information and also facilitates interaction with user. However, it does not act on user interaction that is the job of the controller.
The controller interprets the mouse and keyboard inputs from the user, informing the model and the view to change as appropriate.
The model manages the behavior and data of the application domain, responds to requests for information about its state (usually from the view), and responds to instructions to change state (usually from the controller). It maintains the state and notified observers of change in information.
Different categories of elements in HTML
1. Structural elements
- header
ex:
<header>
<h1>Most important heading here</h1><h3>Less important heading here</h3>
<p>Some additional information here</p>
</header>
- footer
Defines a footer for a document.
ex:
<footer>
<p>Posted by: ABC</p><p>Contact information: <a href="#">abc@gmail.com</a>.</p>
</footer>
- nav
Defines a set of navigation links.
ex:
<nav>
<a href="#">HTML</a> |<a href="#">CSS</a>
</nav>
- aside
Defines some content aside from the content it is placed in.
ex:
<aside>
<h4>Epcot Center</h4><p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
- article
Specifies independent, self-contained content.
ex:
<article>
<h1>Google Chrome</h1>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser</p>
</article>
</article>
2. Text elements
- Headings : <h1> to <h6>
Used to define HTML headings.
ex:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2><h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
- Paragraph : <p>
Defines a paragraph.
ex:
<p>This is a paragraph.</p>
- Line break : <br>
Inserts a single line break.
ex:
Hello<br>World.
3. Images
Defines an image in an HTML page.
ex:
<img src="smiley.jpg" height="42" width="42">
4. Hyperlinks
Defines a hyperlink, which is used to link from one page to another.
ex:
<a href="https://www.w3schools.com">Visit W3Schools</a>
5. Data representational elements
- Lists
Defines a list item.
ex:
<ul>
<li>Coffee</li><li>Tea</li>
</ul>
- Tables
Defines an HTML table.
ex:
<table>
<tr><th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
6. Form elements
- Input
Specifies an input field where the user can enter data.
ex:
<form action="action_page.php">
First name: <input type="text" name="fname"><input type="submit" value="Submit">
</form>
- Radio buttons, check boxes
Define a radio button and a check box..
ex:
<input type="checkbox" name="vehicle1" value="Bike">bike<br>
<input type="radio" name="gender" value="male"> Male
- Buttons
Defines a click-able button.
ex:
<button type="button">Click Me!</button>
Reduce HTML formatting tags
The basic idea behind CSS is to separate the structure of a document from the presentation of the document. HTML is meant for structure. It was never intended for anything else. All those additions though make HTML clumsy and work against it’s main purpose of structuring a document. HTML is there to let a browser know that this block of text is a paragraph and that block of text is a heading for this paragraph.
Easy modification
Without all the extra HTML for styling the structure of document is much more readable making it easier to update with out breaking the document. All of CSS can be moved to a separate file making it easier to update styles as well.
Save lot of work and time and Faster loading
Using cascading style sheets generally leads to less code behind web pages which helps the download times of a page. When browser sees a table in code it needs to read through all code twice. Once to understand the structure of the table and once again to actually display the content within the table. The extra time slows up the page. Using tables in the layout of a web page generally leads to a greater use of images on that page. Images are often the heaviest element of a pages and are usually the major culprit in slowing down pages. Sure the images can be optimized to make them smaller, but they are still larger than a line of code and each image requires another request by the browser to the server.
Cascading Style Sheets (CSS)
Advantages :
The basic idea behind CSS is to separate the structure of a document from the presentation of the document. HTML is meant for structure. It was never intended for anything else. All those additions though make HTML clumsy and work against it’s main purpose of structuring a document. HTML is there to let a browser know that this block of text is a paragraph and that block of text is a heading for this paragraph.
Easy modification
Without all the extra HTML for styling the structure of document is much more readable making it easier to update with out breaking the document. All of CSS can be moved to a separate file making it easier to update styles as well.
Save lot of work and time and Faster loading
Using cascading style sheets generally leads to less code behind web pages which helps the download times of a page. When browser sees a table in code it needs to read through all code twice. Once to understand the structure of the table and once again to actually display the content within the table. The extra time slows up the page. Using tables in the layout of a web page generally leads to a greater use of images on that page. Images are often the heaviest element of a pages and are usually the major culprit in slowing down pages. Sure the images can be optimized to make them smaller, but they are still larger than a line of code and each image requires another request by the browser to the server.
Advanced features
- Web fonts - CSS3 web fonts allow to use custom fonts other than device
fonts (web safe fonts)
- Colors, gradients, backgrounds
- Media
There are 3 main selectors in CSS.
- Element selector
- ID selector
- Class selector
- Web fonts - CSS3 web fonts allow to use custom fonts other than device
fonts (web safe fonts)
- Colors, gradients, backgrounds
- Media
There are 3 main selectors in CSS.
- Element selector
- ID selector
- Class selector
Advanced Selectors in CSS
Attribute Selector:
It selects a particular type of inputs.
input[type="checkbox"]{background:orange;}
Adjacent Sibling Selector:
It select ul tags which immediately follows the h4 tag.
h4+ul{border: 4px solid red;}
Direct Child Selector:
It selects any element matching the second element that is a direct child of an element matching the first element.
p > div {background-color: DodgerBlue;}
3 ways of using CSS
- External stylesheet
This is a standalone .css file that is linked from a web page. The advantage of external stylesheets is that it can be created once and the rules applied to multiple web pages. Should need to make widespread changes to the site design, can make a single change in the stylesheet and it will be applied to all linked pages, saving time and effort.
- Internal stylesheet
This holds CSS rules for the page in the head section of the HTML file. The rules only apply to that page, but can configure CSS classes and IDs that can be used to style multiple elements in the page code. Again, a single change to the CSS rule will apply to all tagged elements on the page.
- Inline styles
This relate to a specific HTML tag, using a style attribute with a CSS rule to style a specific page element. They’re useful for quick, permanent changes, but are less flexible than external and internal stylesheets as each inline style create must be separately edited should decide to make a design change.
Attribute Selector:
It selects a particular type of inputs.
input[type="checkbox"]{background:orange;}
Adjacent Sibling Selector:
It select ul tags which immediately follows the h4 tag.
h4+ul{border: 4px solid red;}
Direct Child Selector:
It selects any element matching the second element that is a direct child of an element matching the first element.
p > div {background-color: DodgerBlue;}
3 ways of using CSS
- External stylesheet
This is a standalone .css file that is linked from a web page. The advantage of external stylesheets is that it can be created once and the rules applied to multiple web pages. Should need to make widespread changes to the site design, can make a single change in the stylesheet and it will be applied to all linked pages, saving time and effort.
- Internal stylesheet
This holds CSS rules for the page in the head section of the HTML file. The rules only apply to that page, but can configure CSS classes and IDs that can be used to style multiple elements in the page code. Again, a single change to the CSS rule will apply to all tagged elements on the page.
- Inline styles
This relate to a specific HTML tag, using a style attribute with a CSS rule to style a specific page element. They’re useful for quick, permanent changes, but are less flexible than external and internal stylesheets as each inline style create must be separately edited should decide to make a design change.
Frameworks
Framework is a collection of libraries, tools, rules, structures, and control, to build software systems.
- At development time,
Create the structure of the application,
Place the code in necessary places,
May use the given libraries to write the code,
Can include additional libraries and plugins.
- At runtime,
Frame will call the code.
Libraries
Libraries provide an API; the coder can use it to develop some features, when writing code.
- At development time,
Add the library to the project (source code files, modules, packages, executable, etc.).
Call the necessary functions/methods using the given packages/module/classes.
- At runtime,
It will called by the code.
Plugins
Plugins provide specific tools for development.
- At development time,
The plugin (source code files, modules, packages, executable, etc.) is placed in the project,
Apply some configurations using code.
- At runtime,
Plug-in will be invoked via the configurations
Main features of client-side component development tools :
- DOM processing (dynamic content generation, change, removal)
- Data processing
- Data persistence
- Session management (cookies)
- Communicating (with server components)
New features in JS version 6
RFERENCES
No comments:
Post a Comment