Static web page

Last updated

A static web page, sometimes called a flat page or a stationary page, is a web page that is delivered to a web browser exactly as stored, [1] in contrast to dynamic web pages which are generated by a web application. [2]

Contents

Consequently, a static web page displays the same information for all users, from all contexts, subject to modern capabilities of a web server to negotiate content-type or language of the document where such versions are available and the server is configured to do so. [3] However, a webpage's JavaScript can introduce dynamic functionality which may make the static web page dynamic.

Overview

Static web pages are often HTML documents, [4] stored as files in the file system and made available by the web server over HTTP (nevertheless URLs ending with ".html" are not always static). However, loose interpretations of the term could include web pages stored in a database, and could even include pages formatted using a template and served through an application server, as long as the page served is unchanging and presented essentially as stored.

The content of static web pages remain stationary irrespective of the number of times it is viewed. Such web pages are suitable for the contents that rarely need to be updated, though modern web template systems are changing this. Maintaining large numbers of static pages as files can be impractical without automated tools, such as static site generators. Any personalization or interactivity has to run client-side, which is restricting. [5]

Advantages

Disadvantages

Static site generators

Static site generators are applications that compile static websites - typically populating HTML templates in a predefined folder and file structure, with content supplied in a format such as Markdown or AsciiDoc.

Examples of static site generators include:

Related Research Articles

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

Server-side scripting is a technique used in web development which involves employing scripts on a web server which produces a response customized for each user's (client's) request to the website. Scripts can be written in any of a number of server-side scripting languages that are available. Server-side scripting is distinguished from client-side scripting where embedded scripts, such as JavaScript, are run client-side in a web browser, but both techniques are often used together. The alternative to either or both types of scripting is for the web server itself to deliver a static web page.

<span class="mw-page-title-main">World Wide Web</span> Linked hypertext system on the Internet

The World Wide Web is an information system that enables content sharing over the Internet through user-friendly ways meant to appeal to users beyond IT specialists and hobbyists. It allows documents and other web resources to be accessed over the Internet according to specific rules of the Hypertext Transfer Protocol (HTTP).

<span class="mw-page-title-main">Web server</span> Computer software that distributes web pages

A web server is computer software and underlying hardware that accepts requests via HTTP or its secure variant HTTPS. A user agent, commonly a web browser or web crawler, initiates communication by making a request for a web page or other resource using HTTP, and the server responds with the content of that resource or an error message. A web server can also accept and store resources sent from the user agent if configured to do so.

<span class="mw-page-title-main">Website</span> Set of related web pages served from a single domain

A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Websites are typically dedicated to a particular topic or purpose, such as news, education, commerce, entertainment or social networking. Hyperlinking between web pages guides the navigation of the site, which often starts with a home page. As of May 2023, the top 5 most visited websites are Google Search, YouTube, Facebook, Twitter, and Instagram.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

Cross-site scripting (XSS) is a type of security vulnerability that can be found in some web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy. During the second half of 2007, XSSed documented 11,253 site-specific cross-site vulnerabilities, compared to 2,134 "traditional" vulnerabilities documented by Symantec. XSS effects vary in range from petty nuisance to significant security risk, depending on the sensitivity of the data handled by the vulnerable site and the nature of any security mitigation implemented by the site's owner network.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

<span class="mw-page-title-main">Dynamic web page</span> Type of web page

A dynamic web page is a web page constructed at runtime, as opposed to a static web page, delivered as it is stored. A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and including the setting up of more client-side processing. A client-side dynamic web page processes the web page using JavaScript running in the browser as it loads. JavaScript can interact with the page via Document Object Model (DOM), to query page state and modify it. Even though a web page can be dynamic on the client-side, it can still be hosted on a static hosting service such as GitHub Pages or Amazon S3 as long as there is not any server-side code included.

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

<span class="mw-page-title-main">Web template system</span> System in web publishing

A web template system in web publishing allows web designers and developers work with web templates to automatically generate custom web pages, such as the results from a search. This reuses static web page elements while defining dynamic elements based on web request parameters. Web templates support static content, providing basic structure and appearance. Developers can implement templates from content management systems, web application frameworks, and HTML editors.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

<span class="mw-page-title-main">Web page</span> Content provided by a website

A web page is a document on the World Wide Web "with its own address". Web pages are delivered by a web server to the user and displayed in a web browser to act as a "retrieval unit" for the information stored within it. A website consists of many web pages linked together under a common domain name. The name "web page" is a metaphor of paper pages bound together into a book.

<span class="mw-page-title-main">Lively Kernel</span> Open-source web programming environment

The Lively Kernel is an open-source web programming environment, developed by Dan Ingalls when he was at SAP Research. It supports desktop-style applications with rich graphics and direct manipulation abilities, but without the installation or upgrade troubles of conventional desktop applications. Development began at Sun Microsystems Laboratories in Menlo Park, California, and later moved to the Hasso Plattner Institute in Potsdam-Babelsberg near Berlin.

<span class="mw-page-title-main">Yesod (web framework)</span>

Yesod is a web framework based on the programming language Haskell for productive development of type-safe, representational state transfer (REST) model based, high performance web applications, developed by Michael Snoyman, et al. It is free and open-source software released under an MIT License.

Static site generators (SSGs) are engines that use text input files to generate static web pages. Static sites generated by static site generators do not require a backend after site generation, making them first-class citizens on content delivery networks (CDNs). Some of the most popular static site generators are Jekyll, Hugo, Next.js (JavaScript). SSGs are typically for rarely-changing, informative content, such as product pages, news websites, (software) documentation, manuals, and blogs.

ASP.NET Web Forms is a web application framework and one of several programming models supported by the Microsoft ASP.NET technology. Web Forms applications can be written in any programming language which supports the Common Language Runtime, such as C# or Visual Basic. The main building blocks of Web Forms pages are server controls, which are reusable components responsible for rendering HTML markup and responding to events. A technique called view state is used to persist the state of server controls between normally stateless HTTP requests.

The following outline is provided as an overview of and topical guide to web design and web development, two very related fields:

In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements. Because the HTML is pre-rendered on a server, this allows for a fast "first contentful paint", but there is a period of time afterward where the page appears to be fully loaded and interactive, but is not until the client-side JavaScript is executed and event handlers have been attached.

References

  1. Melendez, Steven (10 August 2018). "The Difference Between Dynamic & Static Web Pages". Chron. Archived from the original on 20 March 2019. Retrieved 20 March 2019. Static by definition means something that does not change. The first pages on the World Wide Web were largely static and unchanged, delivering the same information about a particular topic to anyone who visited. In some cases, sites may evolve slightly over time but are still largely static, meaning that they only change when manually changed by their creators, not on a regular and automated basis.
  2. "Definition of: dynamic Web page". PC Magazine . Archived from the original on 17 January 2017. Retrieved 20 March 2019. A Web page that provides custom content for the user based on the results of a search or some other request.
  3. "Site statique ou dynamique" [Static or dynamic site]. morphenZero (in French). Archived from the original on 11 September 2016. Retrieved 27 July 2019. Ces pages peuvent présenter toute forme de contenu, animations flash, images, musique, vidéo etc... mais elles sont toujours présentées de la même façon.
  4. "What is a Static Web Page? - Definition from Techopedia". Techopedia.com. Retrieved 2018-11-04.
  5. 1 2 Bouças, Eduardo (20 May 2015). "An Introduction to Static Site Generators". Archived from the original on 26 June 2019. Retrieved 20 March 2019. A dangerous solution: There's an easy exit for whenever you're faced with the challenge of dynamically updating content on a static site: "I can do it with JavaScript". Doing processing on the client-side and appending the results to the page after it's been served can be the right approach for some cases, but must not be seen as the magic solution that turns your static site into a full dynamic one.
  6. "Why use a static site generator?". Jekyll Tips. 2017-02-06. Retrieved 2017-02-17.
  7. "Why Static Website Generators Are The Next Big Thing – Smashing Magazine". Smashing Magazine. 2015-11-02. Retrieved 2017-02-17.
  8. Bouças, Eduardo (20 May 2015). "An Introduction to Static Site Generators". Archived from the original on 21 July 2015. Retrieved 20 March 2019. Less hassle with the server: Installing and maintaining the infrastructure required to run a dynamic site can be quite challenging, especially when multiple servers are involved or when something needs to be migrated. There's packages, libraries, modules and frameworks with different versions and dependencies, there's different web servers and database engines in different operating systems.
  9. Vincet, William (9 October 2018). "Static vs Dynamic Websites: Pros and Cons".