tute 9
client-side application components of distributed systems
Client–server model is a distributed application structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.[1] Often clients and servers communicate over a computer network on separate hardware, but both client and server may reside in the same system. A server host runs one or more server programs which share their resources with clients. A client does not share any of its resources, but requests a server's content or service function. Clients therefore initiate communication sessions with servers which await incoming requests. Examples of computer applications that use the client–server model are Email, network printing, and the World Wide Web.
Client and server role
The client-server characteristic describes the relationship of cooperating programs in an application. The server component provides a function or service to one or many clients, which initiate requests for such services. Servers are classified by the services they provide. For example, a web server serves web pages and a file server serves computer files. A shared resource may be any of the server computer's software and electronic components, from programs and data to processors and storage devices. The sharing of resources of a server constitutes a service.
Whether a computer is a client, a server, or both, is determined by the nature of the application that requires the service functions. For example, a single computer can run web server and file server software at the same time to serve different data to clients making different kinds of requests. Client software can also communicate with server software within the same computer.[2] Communication between servers, such as to synchronize data, is sometimes called inter-server or server-to-server communication.
Client and server communication
In general, a service is an abstraction of computer resources and a client does not have to be concerned with how the server performs while fulfilling the request and delivering the response. The client only has to understand the response based on the well-known application protocol, i.e. the content and the formatting of the data for the requested service.
Clients and servers exchange messages in a request–response messaging pattern. The client sends a request, and the server returns a response. This exchange of messages is an example of inter-process communication. To communicate, the computers must have a common language, and they must follow rules so that both the client and the server know what to expect. The language and rules of communication are defined in a communications protocol. All client-server protocols operate in the application layer. The application layer protocol defines the basic patterns of the dialogue. To formalize the data exchange even further, the server may implement an application programming interface (API).[3] The API is an abstraction layer for accessing a service. By restricting communication to a specific content format, it facilitates parsing. By abstracting access, it facilitates cross-platform data exchange.[4]
A server may receive requests from many distinct clients in a short period of time. A computer can only perform a limited number of tasks at any moment, and relies on a schedulingsystem to prioritize incoming requests from clients to accommodate them. To prevent abuse and maximize availability, server software may limit the availability to clients. Denial of service attacks are designed to exploit a server's obligation to process requests by overloading it with excessive request rates.
Example
When a bank customer accesses online banking services with a web browser (the client), the client initiates a request to the bank's web server. The customer's login credentials may be stored in a database, and the web server accesses the database server as a client. An application server interprets the returned data by applying the bank's business logic, and provides the output to the web server. Finally, the web server returns the result to the client web browser for display.
In each step of this sequence of client–server message exchanges, a computer processes a request and returns data. This is the request-response messaging pattern. When all the requests are met, the sequence is complete and the web browser presents the data to the customer.
This example illustrates a design pattern applicable to the client–server model: separation of concerns.
Web applications
In computing, a web application or web app is a client–server computer program which the client (including the user interface and client-side logic) runs in a web browser. Common web applications include webmail, online retail sales, and online auction
Definition and similar terms
The general distinction between a dynamic web page of any kind and a "web application" is unclear. Web sites most likely to be referred to as "web applications" are those which have similar functionality to a desktop software application, or to a mobile app. HTML5 introduced explicit language support for making applications that are loaded as web pages, but can store data locally and continue to function while offline.
Single-page applications are more application-like because they reject the more typical web paradigm of moving between distinct pages with different URLs. Single-page frameworks like Sencha Touch and AngularJS might be used to speed development of such a web app for a mobile platform.
Mobile web application
· Responsive web design can be used to make a web application - whether a conventional website or a single-page application viewable on small screens and work well with touchscreens.
· Progressive Web Apps are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.
· Native apps or "mobile apps" run directly on a mobile device, just as a conventional software application runs directly on a desktop computer, without a web browser (and potentially without the need for Internet connectivity); these are typically written in Java (for Android devices) or Objective-C or Swift (for iOS devices). Recently, frameworks like React Native, Flutter, Xamarin, and FuseTools allow the development of native apps for all platforms using languages other than each standard native language.
· Hybrid apps embed a mobile web site inside a native app, possibly using a hybrid framework like Apache Cordova and Ionic or Appcelerator Titanium. This allows development using web technologies (and possibly directly copying code from an existing mobile web site) while also retaining certain advantages of native apps (e.g. direct access to device hardware, offline operation, app store visibility).
Interface
Through Java, JavaScript, DHTML, Flash, Silverlight and other technologies, application-specific methods such as drawing on the screen, playing audio, and access to the keyboard and mouse are all possible. Many services have worked to combine all of these into a more familiar interface that adopts the appearance of an operating system. General purpose techniques such as drag and drop are also supported by these technologies. Web developers often use client-side scripting to add functionality, especially to create an interactive experience that does not require page reloading. Recently, technologies have been developed to coordinate client-side scripting with server-side technologies such as ASP.NET, J2EE, Perl/Plack and PHP.
Ajax, a web development technique using a combination of various technologies, is an example of technology which creates a more interactive experience.
Structure
Applications are usually broken into logical chunks called "tiers", where every tier is assigned a role.[4] Traditional applications consist only of 1 tier, which resides on the client machine, but web applications lend themselves to an n-tiered approach by nature.[4] Though many variations are possible, the most common structure is the three-tieredapplication.[4] In its most common form, the three tiers are called presentation, application and storage, in this order. A web browser is the first tier (presentation), an engine using some dynamic Web content technology (such as ASP, CGI, ColdFusion, Dart, JSP/Java, Node.js, PHP, Python or Ruby on Rails) is the middle tier (application logic), and a database is the third tier (storage).[4] The web browser sends requests to the middle tier, which services them by making queries and updates against the database and generates a user interface.
For more complex applications, a 3-tier solution may fall short, and it may be beneficial to use an n-tiered approach, where the greatest benefit is breaking the business logic, which resides on the application tier, into a more fine-grained model.[4] Another benefit may be adding an integration tier that separates the data tier from the rest of tiers by providing an easy-to-use interface to access the data.[4] For example, the client data would be accessed by calling a "list_clients()" function instead of making an SQL query directly against the client table on the database. This allows the underlying database to be replaced without making any change to the other tiers.[4]
There are some who view a web application as a two-tier architecture. This can be a "smart" client that performs all the work and queries a "dumb" server, or a "dumb" client that relies on a "smart" server.[4] The client would handle the presentation tier, the server would have the database (storage tier), and the business logic (application tier) would be on one of them or on both.[4] While this increases the scalability of the applications and separates the display and the database, it still doesn't allow for true specialization of layers, so most applications will outgrow this model.[4]
Business use
An emerging strategy for application software companies is to provide web access to software previously distributed as local applications. Depending on the type of application, it may require the development of an entirely different browser-based interface, or merely adapting an existing application to use different presentation technology. These programs allow the user to pay a monthly or yearly fee for use of a software application without having to install it on a local hard drive. A company which follows this strategy is known as an application service provider (ASP), and ASPs are currently receiving much attention in the software industry.
Security breaches on these kinds of applications are a major concern because it can involve both enterprise information and private customer data. Protecting these assets is an important part of any web application and there are some key operational areas that must be included in the development process.[5] This includes processes for authentication, authorization, asset handling, input, and logging and auditing. Building security into the applications from the beginning can be more effective and less disruptive in the long run.
Cloud Computing model web applications are software as a service (SaaS). There are business applications provided as SaaS for enterprises for fixed or usage dependent fee. Other web applications are offered free of charge, often generating income from advertisements shown in web application interface.
Development
Writing web applications is often simplified by the use of web application frameworks such as Django, Ruby on Rails, and Symfony. These frameworks facilitate rapid application development by allowing a development team to focus on the parts of their application which are unique to their goals without having to resolve common development issues such as user management.[6] Many of the frameworks in use are open-source software.
The use of web application frameworks can often reduce the number of errors in a program, both by making the code simpler, and by allowing one team to concentrate on the framework while another focuses on a specified use case. In applications which are exposed to constant hacking attempts on the Internet, security-related problems can be caused by errors in the program. Frameworks can also promote the use of best practices[7] such as GET after POST.
In addition, there is potential for the development of applications on Internet operating systems, although currently there are not many viable platforms that fit this model.
Applications
Examples of browser applications are simple office software (word processors, online spreadsheets, and presentation tools), but can also include more advanced applications such as project management, computer-aided design, video editing, and point-of-sale.
Basic elements in HTML
An HTML element is an individual component of an HTML (Hypertext Markup Language) document or web page.[vague] HTML is composed of a tree of HTML nodes, such as text nodes. Each node can have HTML attributes specified. Nodes can also have content, including other nodes and text. Many HTML nodes represent semantics, or meaning. For example, the
<title> node represents the title of the document.Document vs. DOM
HTML documents are delivered as "documents".[note 1] These are then parsed, which turns them into the Document Object Model (DOM) internal representation, within the web browser.[note 2][note 3] Presentation by the web browser (such as screen rendering or access by JavaScript) is then performed on this internal DOM, not the original document.
Early HTML documents (and to a lesser extent today's HTML documents) were largely invalid HTML and riddled with syntax errors. The parsing process was also required to "fix" these errors as best it could. The result was often not correct (i.e., it did not represent what a careless coder had originally intended) but was at least valid according to the HTML standard. Only in the rarest cases would the parser abandon parsing altogether.
Elements vs. tags
As is generally understood, the position of an element is indicated as spanning from a start tag, possibly including some child content, and is terminated by an end tag.[3] This is the case for many, but not all, elements within an HTML document.
As HTML (before HTML5) is based on SGML,[4] its parsing also depends on the DTD, specifically an HTML DTD (e.g. HTML 4.01[5][note 4]). The DTD specifies which element types are possible (i.e. it defines the set of element types) and also the valid combinations in which they may appear in a document. It is part of general SGML behavior that, where only one valid structure is possible (per the DTD), its explicit statement in any given document is not generally required. As a simple example, the <p> tag indicating the start of a paragraph element should be complemented by a </p> tag indicating its end. But since the DTD states that paragraph elements cannot be nested, an HTML document fragment <p>
Para 1 <p>Para 2 <p>Para 3is thus be inferred to be equivalent to <p>Para 1 </p><p>Para 2 </p><p>Para 3. (If one paragraph element cannot contain another, any currently open paragraph must be closed before starting another.) Because this implication is based on the combination of the DTD and the individual document, it is not usually possible to infer elements from document tags alone but only by using an SGML—or HTML—aware parser with knowledge of the DTD. HTML5 creates a similar result by defining what tags can be omitted.[6]SGML vs. XML
SGML is complex, which has limited its widespread understanding and adoption. XML was developed as a simpler alternative. Although both can use the DTD to specify the supported elements and their permitted combinations as document structure, XML parsing is simpler. The relation from tags to elements is always that of parsing the actual tags included in the document, without the implied closures that are part of SGML.[note 5]
HTML as used on the current web is likely to be either treated as XML, by being XHTML, or as HTML5; in either case the parsing of document tags into DOM elements is simplified compared to legacy HTML systems. Once the DOM of elements is obtained, behavior at higher levels of interface (example: screen rendering) is identical or nearly so.[note 6]
%block; vs. box
Part of this CSS presentation behavior is the notion of the "box model". This is applied to those elements that CSS considers to be "block" elements, set through the CSS display:block; declaration.
HTML also has a similar concept, although different, and the two are very frequently confused.
%block; and %inline; are groups within the HTML DTD that group elements as being either "block-level" or "inline".[8] This is used to define their nesting behavior: block-level elements cannot be placed into an inline context.[note 7] This behavior cannot be changed; it is fixed in the DTD. Block and inline elements have the appropriate and different CSS behaviors attached to them by default,[8] including the relevance of the box model for particular element types.
Note though that this CSS behavior can, and frequently is, changed from the default. Lists with <ul><li>
... are %block; elements and are presented as block elements by default. However, it is quite common to set these with CSS to display as an inline list.[9]Overview
Syntax
Parts of an HTML container element
In the HTML syntax, most elements are written with a start tag and an end tag, with the content in between. An HTML tag is composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag. For example, a paragraph, which is represented by the
<p> element, would be written as:<p>In the HTML syntax, most elements are written ...</p>
However, not all of these elements require the end tag, or even the start tag, to be present.[6] Some elements, the so-called void elements, do not have an end tag. A typical example is the
<br> (hard line-break) element. A void element's behavior is predefined, and it cannot contain any content or other elements. For example, an address would be written as:<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>
When using XHTML, it is required to open and close all elements, including void elements. This can be done by placing an end tag immediately after the start tag, but this is not legal in HTML 5 and will lead to two elements being created. An alternative way to specify that it is a void element, which is compatible with both XHTML and HTML 5, is to put a
/ at the end of the tag (not to be confused with the / at the beginning of a closing tag).<p>P. Sherman<br />42 Wallaby Way<br />Sydney</p>
HTML attributes are specified inside the start tag. For example, the
<abbr> element, which represents an abbreviation, expects a title attribute within its opening tag. This would be written as:<abbr title="abbreviation">abbr.</abbr>
Void elements (also sometimes called empty elements, single elements or stand-alone elements) only have a start tag (in the form
<tag>), which contains any HTML attributes. They may not contain any children, such as text or other elements. For compatibility with XHTML, the HTML specification allows an optional space and slash (<tag /> is permissible). The space and slash are required in XHTML and other XML applications. Two common void elements are <br /> (for a hard line-break, such as in a poem or an address) and <hr /> (for a thematic break). Other such elements are often place-holders which reference external files, such as the image (<img />) element. The attributes included in the element will then point to the external file in question. Another example of a void element is <link />, for which the syntax is:<link rel="stylesheet" href="fancy.css" type="text/css">
This
<link /> element points the browser at a style sheet to use when presenting the HTML document to the user. Note that in the HTML syntax attributes don't have to be quoted if they are composed only of certain characters: letters, digits, the hyphen-minus and the full stop. When using the XML syntax (XHTML), on the other hand, all attributes must be quoted, and a spaced trailing slash is required before the last angle bracket:<link rel="stylesheet" href="fancy.css" type="text/css" />
Raw text elements (also known as text or text-only elements) are constructed with:
· a start tag (in the form
<tag>) marking the beginning of an element, which may incorporate any number of HTML attributes;
· some amount of text content, but no elements (all tags, apart from the applicable end tag, will be interpreted as content);
· an end tag, in which the element name is prefixed with a slash:
</tag>. In some versions of HTML, the end tag is optional for some elements. The end tag is required in XHTML.
An example is the
<title> element must not contain other elements (including markup of text), only plain text.
Normal elements usually have both a start tag and an end tag, although for some elements the end tag, or both tags, can be omitted. It is constructed in a similar way:
· a start tag (
<tag>) marking the beginning of an element, which may incorporate any number of HTML attributes;
· some amount of content, including text and other elements;
HTML attributes define desired behavior or indicate additional element properties. Most attributes require a value. In HTML, the value can be left unquoted if it does not include spaces (attribute
=value), or it can be quoted with single or double quotes (attribute='value' or attribute="value"). In XML, those quotes are required.
Boolean attributes, on the other hand, don't require a value to be specified. An example is the
checked for checkboxes:<input type=checkbox checked>
<input type="checkbox" checked="checked" />
Informally, HTML elements are sometimes referred to as "tags" (an example of synecdoche), though many prefer the term tag strictly in reference to the markup delimiting the start and end of an element.
Element (and attribute) names may be written in any combination of upper or lower case in HTML, but must be in lower case in XHTML.[10] The canonical form was upper-case until HTML 4, and was used in HTML specifications, but in recent years, lower-case has become more common.
Element standards
HTML elements are defined in a series of freely available open standards issued since 1995, initially by the IETF and subsequently by the W3C.
During the browser wars of the 1990s, developers of user agents (e.g. web browsers) often developed their own elements, some of which have been adopted in later standards. Other user agents may not recognize non-standard elements, and they will be ignored, possibly causing the page to be displayed improperly.
In 1998, XML (a simplified form of SGML) introduced mechanisms to allow anyone to develop their own elements and incorporate them in XHTML documents, for use with XML-aware user agents.[11]
Subsequently, HTML 4.01 was rewritten in an XML-compatible form, XHTML 1.0 (eXtensible HTML). The elements in each are identical, and in most cases valid XHTML 1.0 documents will be valid or nearly valid HTML 4.01 documents. This article mainly focuses on real HTML, unless noted otherwise; however, it remains applicable to XHTML. See HTML for a discussion of the minor differences between the two.
Element status
Since the first version of HTML, several elements have become outmoded, and are deprecated in later standards, or do not appear at all, in which case they are invalid (and will be found invalid, and perhaps not displayed, by validating user agents).[12]
In HTML 4.01 / XHTML 1.0, the status of elements is complicated by the existence of three types of DTD:
· Transitional, which contain deprecated elements, but which were intended to provide a transitional period during which authors could update their practices;
· Frameset, which are versions of the Transitional DTDs which also allow authors to write frameset documents;
· Strict, which is the up-to-date (as at 1999) form of HTML.
HTML5 instead provides a listing of obsolete features to go along with the standarized normative content. They are broken down into "obsolete but conforming" for which implementation instructions exist and "non-conforming" ones that should be replaced.[13]
The first Standard (HTML 2.0) contained four deprecated elements, one of which was invalid in HTML 3.2. All four are invalid in HTML 4.01 Transitional, which also deprecated a further ten elements. All of these, plus two others, are invalid in HTML 4.01 Strict. While the frame elements are still current in the sense of being present in the Transitional and Frameset DTDs, there are no plans to preserve them in future standards, as their function has been largely replaced, and they are highly problematic for user accessibility.
(Strictly speaking, the most recent XHTML standard, XHTML 1.1 (2001), does not include frames at all; it is approximately equivalent to XHTML 1.0 Strict, but also includes the Ruby markup module.)[14]
A common source of confusion is the loose use of deprecated to refer to both deprecated and invalid status, and to elements which are expected to be formally deprecated in future.
Content vs. presentation and behavior
Since HTML 4, HTML has increasingly focused on the separation of content (the visible text and images) from presentation (like color, font size, and layout).[15] This is often referred to as a separation of concerns. HTML is used to represent the structure or content of a document, its presentation remains the sole responsibility of CSS style sheets. A default style sheet is suggested as part of the CSS standard, giving a default rendering for HTML.[16]
Behavior (interactivity) is also kept separate from content, and is handled by scripts. Images are contained in separate graphics files, separate from text, though they can also be considered part of the content of a page.
Separation of concerns allows the document to be presented by different user agents according to their purposes and abilities. For example, a user agent can select an appropriate style sheet to present a document by displaying on a monitor, printing on paper, or to determine speech characteristics in an audio-only user agent. The structural and semantic functions of the markup remain identical in each case.
Historically, user agents did not always support these features. In the 1990s, as a stop-gap, presentational elements (like
<b> and <i>) were added to HTML, at the cost of creating problems for interoperability and user accessibility. This is now regarded as outmoded and has been superseded by style sheet-based design; most presentational elements are now deprecated.[17]
External image files are incorporated with the
<img /> or <object /> elements. (With XHTML, the SVG language can also be used to write graphics within the document, though linking to external SVG files is generally simpler.)[18] Where an image is not purely decorative, HTML allows replacement content with similar semantic value to be provided for non-visual user agents.
An HTML document can also be extended through the use of scripts to provide additional behaviors beyond the abilities of HTML hyperlinks and forms.
· In the document head,
<style /> and <script /> may link to shared external documents, or <style>...</style> and <script>...</script> may contain embedded instructions. (The <link> element can also be used to link style sheets.)
·
<script /> or <script>...</script> can occur at any point in the document (head or body).
· The
style attribute is valid in most document body elements (e.g. <div style="...">) for inclusion of inline style instructions.
· Event-handling attributes, which provide links to scripts, are optional in most elements.
· For user agents which do not operate scripts, the
<noscript>...</noscript> element provides embedded alternative content where appropriate; however, it can only be used in the document head and in the body as a block-level element.
importance of CSS
Cascading Style Sheets, commonly known as CSS, is an integral part of the modern web development process. It is a highly effective HTML tool that provides easy control over layout and presentation of website pages by separating content from design.
Although CSS was introduced in 1996, it gained mainstream popularity by the early 2000s when popular browsers started supporting its advanced features. The latest version, CSS3, has been available since 1998 and was last updated in September 2008.
Although CSS was introduced in 1996, it gained mainstream popularity by the early 2000s when popular browsers started supporting its advanced features. The latest version, CSS3, has been available since 1998 and was last updated in September 2008.
Benefits of CSS in Web Development
Improves Website Presentation
The standout advantage of CSS is the added design flexibility and interactivity it brings to web development. Developers have greater control over the layout allowing them to make precise section-wise changes.
As customization through CSS is much easier than plain HTML, web developers are able to create different looks for each page. Complex websites with uniquely presented pages are feasible thanks to CSS.
Makes Updates Easier and Smoother
CSS works by creating rules. These rules are simultaneously applied to multiple elements within the site. Eliminating the repetitive coding style of HTML makes development work faster and less monotonous. Errors are also reduced considerably.
Since the content is completely separated from the design, changes across the website can be implemented all at once. This reduces delivery times and costs of future edits.
Helps Web Pages Load Faster
Improved website loading is an underrated yet important benefit of CSS. Browsers download the CSS rules once and cache them for loading all the pages of a website. It makes browsing the website faster and enhances the overall user experience.
This feature comes in handy in making websites work smoothly at lower internet speeds. Accessibility on low end devices also improves with better loading speeds.
Limitations of CSS Technology
Browser Dependent
The only major limitation of CSS is that its performance depends largely on browser support. Besides compatibility, all browsers (and their many versions) function differently. So your CSS needs to account for all these variations.
However, in case your CSS styling isn’t fully supported by a browser, people will still be able to experience the HTML functionalities. Therefore, you should always have a well structured HTML along with good CSS.
Difficult to retrofit in old websites
The instinctive reaction after learning the many advantages of CSS is to integrate it into your existing website. Sadly, this isn’t a simple process. CSS style sheets, especially the latest versions, have to be integrated into the HTML code at the ground level and must also be compatible with HTML versions. Retrofitting CSS into older websites is a slow tedious process.
There is also the risk of breaking the old HTML code altogether and thus making the site dead. It’s best to wait till you redesign your website from scratch.
As you can see from above points, the advantages of CSS development outweigh its limitations. It is a very useful web development tool that every programmer must master along with basic HTML.
CSS selectors
Types of Selectors
So far, you’ve only seen one kind of selector: the HTML selector. This allows you to specify how any HTML tag on the page should be styled. If all you could do was style HTML tags and all of the paragraphs looked the same, and all of the level 2 headers looked the same, and all of the lists looked the same, and so forth, your designs would look pretty boring. You need ways to selectively style HTML tags with CSS.
For example, you might have your level 2 headers look one way when in the main text of an article, another in the sidebar, and yet a third when used as the caption for a photo.
CSS provides three distinct selector types that enable you to tailor your design to appear exactly the way you want.
HTML Selector
To define how a particular HTML tag should be styled indiscriminately across your Web page, use its HTML selector. For example, if you say that all header level 2 tags should be red:
The level 2 header’s text color is red.
h2 { color: red; }
The styles will be applied to any content tagged with:
<h2>...</h2>
All header level 2 tags on the page will be red, unless you override its declarations with other declarations. More about that later.
Class Selector
If you don’t want all of your tags to appear exactly the same, you need a “free agent” selector that can be applied to any HTML tag. This is the class selector. When defining a class rule, you place a period immediately before the class name to let the browser know, “Hey, this is a class selector, not an HTML or ID selector”:
.hilight { background-color: yellow;}
This says:
The hilight class text background color is yellow.
To apply this class (and thus its styles) to an HTML tag, add the class attribute to a tag with the class name in quotes. You can apply the same class to any HTML tag you choose, as many times as you want:
<h2 class=“hilight”>Chapter I...</h2>
Notice though that you do not add the period with the class name when it’s in the HTML tag. The period is only included when you are setting up the class rule.
Class Selector: Dependent Class
A dependent class allows you to specify the styles a class should have if the class is applied to a particular HTML tag. This allows you to create a general style for a class, but then specify more styles for a specific HTML tag within that class. For example, you might set up a general class to make the background color yellow, and then set up a dependent class so that when that class is applied to a particular tag, the background color is green instead:
If the hilight class is used with a level 2 header, then its background color is green.
h2.hilight { background-color: green; }
Class Selector: Mix and Match Classes
As if being able to add a single class to an HTML tag wasn’t enough, you can also add multiple classes to a single HTML tag, mixing and matching styles as needed. Simply list all of the classes you want applied to a particular HTML tag in the class attribute, separated by spaces:
<p class=“hilight smallprint”>'I should...</p>
When applied to an HTML tag, that tag picks up the styles of all of the classes applied to it.
Naming Your Classes and IDs
You can call your classes or IDs anything you want as long as you follow these basic rules:
· It can start with a letter or a number.
· It can contain any letter, number, hyphen (“-”), or underscore (“_”).
· Both classes and IDs are case sensitive. So, “myClassName” is different from “myclassname”.
Class or ID names could be “bob”, “3423_jyt”, or “9-8-2009”, but you should always try to name them something meaningful according to what the class or ID is for, rather than what styles it applies. For example, I might call a class “redText” to hilight certain text. But what happens if later I want to make the hilighted text yellow? The yellow text is now created using a class called redText. A better choice would be to call the class something like “hilight” or “smallprint,” which describes what it is for and allows for different versions.
ID Selector
The first thing to know about the ID selector is that, on the surface at least, it looks and acts exactly like the class selector. The only obvious difference is that you use a hash mark at the beginning, to declare it, rather than a period:
#title01 { color: green; }
To apply the ID (and thus its styles) to an HTML tag, add the ID attribute to the tag with the name of the ID you want to apply:
<div id=“title01”>Chapter I...</div>
Similar to the class selector, you do not add the hash mark with the ID name when it’s in the HTML tag. The hash mark is only included when you are setting up the ID rule.
What ID’s Are Good For
So what’s the difference between a class and an ID? It isn’t so much in how these selectors work, but in what you use them for:
· Identifying major page sections (for example, header, content, footer)
· Identifying unique content or modules (for example, search, navigation, ad)
· Identifying an element to be used with Javascript
· Specificity, which we will talk about more in the next chapter
CSS media queries
he @media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (mediatype: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
3 ways of using CSS (inline, internal, external)
Styling HTML with CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
- Inline - by using the style attribute in HTML elements
- Internal - by using a
<style>element in the<head>section - External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the
<h1> element to blue:
Example
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the
<head> section of an HTML page, within a <style> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site, by changing one file!
To use an external style sheet, add a link to it in the
<head> section of the HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
The CSS
color property defines the text color to be used.
The CSS
font-family property defines the font to be used.
The CSS
font-size property defines the text size to be used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
The CSS
border property defines a border around an HTML element:
Example
p {
border: 1px solid powderblue;
}
border: 1px solid powderblue;
}
CSS Padding
The CSS
padding property defines a padding (space) between the text and the border:
Example
p {
border: 1px solid powderblue;
padding: 30px;
}
border: 1px solid powderblue;
padding: 30px;
}
CSS Margin
The CSS
margin property defines a margin (space) outside the border:
Example
p {
border: 1px solid powderblue;
margin: 50px;
}
border: 1px solid powderblue;
margin: 50px;
}
The id Attribute
To define a specific style for one special element, add an
id attribute to the element:
<p id="p01">I am different</p>
then define a style for the element with the specific id:
Example
#p01 {
color: blue;
}
color: blue;
}
Note: The id of an element should be unique within a page, so the id selector is used to select one unique element!
The class Attribute
To define a style for special types of elements, add a
class attribute to the element:
<p class="error">I am different</p>
then define a style for the elements with the specific class:
Example
p.error {
color: red;
}
color: red;
}
External References
External style sheets can be referenced with a full URL or with a path relative to the current web page.
This example uses a full URL to link to a style sheet:
Example
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
This example links to a style sheet located in the html folder on the current web site:
Frameworks for web pages
Responsive design frameworks have become essentially important for the websites. There has already been too much buzz about the ongoing practice of using responsive framework while initiating web designing. Because of the effectivity of these frameworks, they are becoming more popular among the developers. Responsive frameworks are far better than the non-responsive ones. Additionally, they are effective and help in the development of user-centric applications.
Responsive frameworks include CSS and HTML5 tags and thus they are the best choice to create exceptional website designs. There are a number of best front-end frameworks available to use in order to create exceptional websites. Here at TemplateToaster web design software is a brief on some of the most renowned frameworks used popularly by developers. you may also read list of web design softwares.
1. Bootstrap
Being one of the most popular front-end development frameworks, Bootstrap is now available with the latest Bootstrap 3 version. Bootstrap has got unmatched features, a structured grid system, navigational element and much more to this. Having such a framework at their disposal, developers can easily be built any kind of website without getting much technical . This framework is great to work with as it has got a start-up guide that new users can refer to while initiating the web development task. There is the option of creating fixed as well as fluid width layout. It has also got strong mobile support and thus a website having Bootstrap as its framework can easily be viewed on any mobile device.
2. Foundation
Foundation is also counted among exceptional front-end frameworks. It is an ultra responsive framework that is used to create seamless designs to create websites, applications for the web and mobile and email templates. Foundation is the easiest framework to learn and thus it can easily be used by a new user. This exceptional framework has got a number of components including layouts, navigation, media, library containers and much more. Foundation has also got an exceptional list of plugins that offers extended choice to the developers to choose one accordingly.
3. Pure
Pure is an overwhelming choice to use for accomplishing web projects. Being a small set of CSS modules, Pure has tiny footprints. This outstanding framework has been developing with mobile in mind and additionally including minimal style. This helps developers to write various styles on the application depending upon the requirement. An extensive range of CSS components has also been made available with Pure. This outstanding framework has also got an impressive customizer and thus developer has the choice of creating CSS framework of their choice and requirement.
4. Skeleton
Although Skeleton is a small responsive framework design, it aids in the rapid web development of websites irrespective of their sizes. It has a lightweight 960 grid base that helps in creating websites for mobiles, desktops, tablets and other such devices without compromising on the quality. Additionally, it has got basic UI elements, foundation design, forms buttons, tabs, as well as organized file structure. All these elements contribute towards decreasing the web development time. Skeleton, with tons of other web development features, is a framework for the future. It is an exceptional framework to utilize in order to built aesthetically beautiful websites.
5. Montage
Being an HTML5 framework, Montage is great to kick start modern web page development. Montage has got the elements that help in the creation of scalable websites that are feature rich. These exceptional elements also help to maintain the HTML5 applications for a range of devices whether a desktop or a smartphone. Montage is amazing in its own ways. It has got reusable components along with HTML templates in addition to the declarative component model, declarative data binding and much more than it.
6. Simple
Flexible, aesthetically built and a concise front-end CSS framework to accomplish clean web pages. Siimple is beautiful and mostly used for building web pages that are flat and clean. Working on these simple things sometimes prove to be exceptionally well for the development of user-centric websites. This framework is certainly minimal having a few lines of codes that can also be zipped down to 6KB in total size. This framework is one suitable for newbies who are just starting with their website designing and require a framework to experiment freely. Siimple helps such developers to create minimal and clear web designs.
7. Gumby
Gumby has got a plethora of features including flexible grid, toggles, and switches responsive images, well defined UI kit, fancy tiles that make it one of the best flexible responsive CSS frameworks. All these features make it an outstanding framework to consider for your web development requirements. It has also got the goodness of SASS that aids in speeding up the Gumby development. This outstanding framework has also got powerful customizer with the use of which it gets easy to create your own grid system, typography and a lot more to this.
8. Semantic UI
As a framework, Semantic has gone popular within a few years. The fact that semantic design approach can be incorporated in other frameworks easily allows the use of third-party style guides. Semantic has got a number of elements including buttons, loaders, divers and collections such as forms and breadcrumbs and more. There are sophisticated modules that range from popups to dropdowns and to sticky bones. All these features make Semantic an extremely feature-rich framework to use for the web development requirements. This framework is easy to use and that is why one popular among the developers.
9. Cascade
Cascade is a great relief to the developers as it offers both semantic and non-semantic grid layouts along with base templates navigational elements, table designs. Cascade has got a universal approach and thus it is easy for designers to include a number of elements in their designing. With Cascade in use, designers, as well as developers, have got the option of creating high-performance web pages for a variety of browsers right from the older ones to the new browsers. Cascade can be used by developers to choose and work on the components most important for a particular project.
Conclusion
Frameworks are the basic elements that are required to accomplish the website development. Right from having HTML5 goodness to the basic cascade styles, all the frameworks that have been listed above are just great to be utilized for initiating web development. Moreover, before choosing any of the frameworks make sure to opt for the one that suits perfectly to your projects’ requirement.
Plugins for webpages
Are you wondering what the best free WordPress plugins for your website are this year? Arming yourself with the best plugins is the key to building a bigger following, having a beautiful looking website, and delivering the best user experience.
In this article, we’ll share with you the top free plugins for WordPress websites for 2019.
1. WPForms Lite
WPForms Lite is the most beginner friendly contact form plugin on the market today. It comes with a drag & drop WordPress form builder so you can easily create contact forms for your website.
In addition, it has pre-built form templates, complete with the form fields you need, so you can customize your form as you see fit. Plus, it’s 100% responsive, mobile friendly, and is optimized for SEO. Not to mention, it’s one of the fastest contact form plugins around.
If you’re looking for a more powerful solution, that’s just as easy to use, check out the pro version of WPForms. Collect payments from customers, conduct surveys, hire for a new position with a job application form, and even enable smart conditional logic with the feature packed pro version of WPForms.
2. MonsterInsights Lite
MonsterInsights Lite gives you a simple way to connect your WordPress website to your Google Analytics account. With it, you can see just how site visitors find your website and what they do while there. With this data, you’re able to capitalize on what site visitors like to keep them coming back for more.
See real-time stats in an easy to read report found right in the dashboard of your WordPress site. Plus, know that your stats are never skewed thanks to the universal tracking system that’s in place. In other words, if your site visitors switch from a mobile device to a desktop, you’ll still get accurate data counts.
If you want to get even more data about your site visitors and their behavior on your site, consider upgrading from the free version to MonsterInsights Pro. You’ll be able to track eCommerce stats, traffic sources, advertisements efforts, and more in separate dashboard reports. Plus, you’ll have access to the Google Optimize addon, which lets you create A/B tests for your website hassle free so you can make improvements and build your business.
3. Google XML Sitemaps
Google XML Sitemaps gives you an easy way to create an XML sitemap for popular search engines like Google, Bing, Yahoo, and Ask.com to crawl and index. After all, the only way your website will show up in search results is if search engines knows it exists.
By making it easier for crawlers to see how your content is organized and update search rankings when you update content on your site, this free WordPress plugin boosts your site’s SEO significantly.
4. Jetpack
Jetpack is one of those free WordPress plugins that does a little bit of everything for everyone. To start, it helps you design your site by giving you access to tons of WordPress themes, an unlimited image and video CDN, and even lazy loading functionality so your site renders fast on mobile devices.
Next, it helps your marketing efforts with features like automated social media posting, site stat and analytics reporting, and even simple PayPal buttons for collecting money. Lastly, it offers security features related to brute force attacks, spam, and downtime monitoring, all helping you protect your website’s data and reputation. And that really is just the beginning.
5. Lazy Load by WP Rocket
The speed of your website is crucial to the user experience and your Google search rankings. With Lazy Load by WP Rocket, your site’s images will only load when they become visible to site visitors. This reduces the number of HTTP requests that are made and improves your page loading time.
This free plugin works on thumbnails, post content, avatars, and iFrame images. And the plugin itself is super lightweight so it doesn’t affect your site’s speed and performance either.
6. W3 Total Cache
Another one of the best free WordPress plugins for 2018 is W3 Total Cache. Since site speed is one of the most important SEO ranking factors, you need to focus on improving your site speed in any way you can to boost rankings, site traffic, and conversions.
With this caching solution, you can serve compressed and cached files to site visitors, reducing the load time on your server and improving overall site speed. Not to mention, it saves you bandwidth and minifies HTML, JavaScript, CSS, and feeds.
7. Yoast SEO
Yoast SEO is one of the most popular SEO plugins on the market today. It helps you create an automatically updated XML sitemap for your website, preview your content’s search snippet so you can see what site visitors see, and even gives you the green light when your content is SEO optimized.
In addition, you can add meta tags, set canonical URLs to avoid duplicate content and Google penalties, and integrate with Google Search Console so you can see how search engines are indexing your site and fix any crawl errors that exist.
8. UpdraftPlus
There’s nothing worse than losing all your site’s content to a hacker, server crash, or other website malfunction. That’s why using a free backup solution like UpdraftPlus is so important.
Not only can you schedule automatic backups of your website’s files and database, and store your backups in a cloud service such as Dropbox, Google Drive, or Amazon S3, you can restore your website instantly using its one-click restore button.
9. Sucuri Security
Sucuri is an industry leader when it comes to all matters related to website security. So, it makes sense that they would create a free WordPress plugin for site owners to use to protect their websites. Enjoy features like activity audits, remote malware scanning, blacklist monitoring, security notifications, and post-hack security actions so it doesn’t happen again.
And the great things is, Sucuri Security does its best to keep its feature packed security plugin lightweight so it doesn’t weigh your site’s resources, and loading time, down.
If you’re looking for more robust security features, be sure to check out Sucuri’s paid security services. You’ll get monitoring and protection from DDoS attacks, malware threats, brute force attacks, and even XXS attacks so you can rest assured your site’s data is safe.
10. Shared Counts
Shared Counts is an advanced social sharing button that lets you use a simple shortcode to insert share buttons either before or after post content. Not to mention, as you make the switch from HTTP to HTTPS to avoid being flagged by Google as “Not Secure,” Social Counts preserves your social share counts so you never lose your stats. Lastly, unlike other social sharing tools, Social Counts doesn’t use cookies, tracking scripts, or store user data.
Tools for webpages
Just like in most other professions, a web designer’s set of tools is what brings a concept into fruition. There are many applications available to our disposal, but there are some that juststand out from the crowd. The tools in this article are what’s regarded as the most popular tools used for web design.
5. Fireworks
Adobe Fireworks is a commercial raster and vector graphics editor hybrid from Adobe that’s available for the Mac and Windows operating systems. Designed specifically for web designers (unlike Photoshop), Fireworks brings you a plethora of tools and options that make full web layout prototyping a breeze.
Among its notable features are: “slices” for slicing and dicing a design mockup into HTML/CSS for rapidly creating prototypes (though you should avoid using auto-generated source code for the end-build), the ability to package an entire site design as a PDF with clickable components for interactive and impressive site prototypes, and optimization tools for making your web graphics as lightweight as possible.
4. Dreamweaver
Adobe Dreamweaver is a commercial application for web development that’s available for the Mac and Windows operating systems. Its featured-packed suite of tools and options include: syntax highlighting and very smart Code Hinting, a built-in FTP client, project management and workflow options that make team work effortless, and Live View – which shows you a preview of your source code. Dreamweaver tightly integrates with other popular Adobe products such as Photoshop, allowing you to share Smart Objects for quick and easy updating and editing of graphics components.
3. Panic Coda
Panic Coda is a shareware web development application for the Mac OS X operating system. It seeks to reduce the amount of applications (such as an FTP client, CSS editor, a version control system, etc.) you need to develop websites and to improve your team’s workflow. Coda’s one-window web development philosophy uses a tabbed interface for text editing, file transfers, SVN, CSS, and even “Books” which embeds web books that are searchable (it comes with The Web Programmer’s Desk Reference but you can add your own).
It’s simple and intuitive interface allowed Coda to garner the Apple Design Awards Best Mac OS X User Experience in 2007.
2. Photoshop
Adobe Photoshop is a very popular commercial graphics editor available for the Mac and Windows operating system. Created for professional photographers and designers, it is the ideal application for manipulating images and creating web graphics. Photoshop has all the necessary tools and options you need such as: Filters – which automatically adds effects to your image or a selected section of your image, extensibility and automation with Brushes, Actions and Scripting, and workflow enhancement features like Layer Comps and the Revert option.
1. Firefox Developer
Firefox Developer Edition is a version of Firefox specifically for web developers. As a developer, you have access to all their DevTools. It’s many features include: analyzing and debugging, building and designing with CSS Grid, HTML inspector, style editor among many other tools to provide the greatest assistance with your web development needs.
Notable mentions
Here are other tools that were voted on that are worth a quick mention.
· paper and pen/pencil (for paper prototyping/sketching).
JS version 6
ECMAScript 6 is also known as ES6 and ECMAScript 2015.
Some people call it JavaScript 6.
This chapter will introduce some of the new features in ES6.
- JavaScript
let - JavaScript
const - Exponentiation (
**) (EcmaScript 2016) - Default parameter values
Array.find()Array.findIndex()
Browser Support for ES6 (ECMAScript 2015)
Safari 10 and Edge 14 were the first browsers to fully support ES6:
Chrome 58
|
Edge 14
|
Firefox 54
|
Safari 10
|
Opera 55
|
Jan 2017
|
Aug 2016
|
Mar 2017
|
Jul 2016
|
Aug 2018
|
JavaScript let
The
let statement allows you to declare a variable with block scope.
Example
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
JavaScript const
The
const statement allows you to declare a constant (a JavaScript variable with a constant value).
Constants are similar to let variables, except that the value cannot be changed.
Example
var x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
Exponentiation Operator
The exponentiation operator (
**) raises the first operand to the power of the second operand.
Example
var x = 5;
var z = x ** 2; // result is 25
var z = x ** 2; // result is 25
x ** y produces the same result as Math.pow(x,y):
Example
var x = 5;
var z = Math.pow(x,2); // result is 25
var z = Math.pow(x,2); // result is 25
Default Parameter Values
ES6 allows function parameters to have default values.
Example
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
// y is 10 if not passed or undefined
return x + y;
}
myFunction(5); // will return 15
Array.find()
The
find() method returns the value of the first array element that passes a test function.
This example finds (returns the value of ) the first element that is larger than 18:
Example
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
Array.findIndex()
The
findIndex() method returns the index of the first array element that passes a test function.
This example finds the index of the first element that is larger than 18:
Example
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
New Number Properties
ES6 added the following properties to the Number object:
EPSILONMIN_SAFE_INTEGERMAX_SAFE_INTEGER
Example
var x = Number.EPSILON;
Example
var x = Number.MAX_SAFE_INTEGER;
New Number Methods
ES6 added 2 new methods to the Number object:
Number.isInteger()Number.isSafeInteger()
The Number.isInteger() Method
The
Number.isInteger() method returns true if the argument is an integer.
Example
Number.isInteger(10); // returns true
Number.isInteger(10.5); // returns false
Number.isInteger(10.5); // returns false
The Number.isSafeInteger() Method
A safe integer is an integer that can be exactly represented as a double precision number.
The
Number.isSafeInteger() method returns true if the argument is a safe integer.
Example
Number.isSafeInteger(10); // returns true
Number.isSafeInteger(12345678901234567890); // returns false
Number.isSafeInteger(12345678901234567890); // returns false
Safe integers are all integers from -(253 - 1) to +(253 - 1).
This is safe: 9007199254740991. This is not safe: 9007199254740992.
This is safe: 9007199254740991. This is not safe: 9007199254740992.
New Global Methods
ES6 also added 2 new global number methods:
isFinite()isNaN()
The isFinite() Method
The global
isFinite() method returns false if the argument is Infinity or NaN.
Otherwise it returns
true:
Example
isFinite(10/0); // returns false
isFinite(10/1); // returns true
isFinite(10/1); // returns true
The isNaN() Method
The global
isNaN() method returns true if the argument is NaN. Otherwise it returns false:
Example
isNaN("Hello"); // returns true
Arrow Functions
Arrow functions allows a short syntax for writing function expressions.
You don't need the
function keyword, the return keyword, and the curly brackets.
Example
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Arrow functions do not have their own
this. They are not well suited for defining object methods.
Arrow functions are not hoisted. They must be defined before they are used.
Using
const is safer than using var, because a function expression is always constant value.
You can only omit the
return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them:
Example
const x = (x, y) => { return x * y };
Comments
Post a Comment