Web servers

Web servers store, process and deliver web pages to clients via typically language/standard called Hypertext Transfer Protocol (HTTP).  When accessing a web-page, the user is called the client who interacts with the server.

7 Security Measures to Protect Your Servers - ASDQWE DEV

While the major function is to serve content, a full implementation of HTTP also includes ways of receiving content from clients. This feature is used for submitting web forms, including uploading of files.

Many generic web servers also support server-side scripting using Active Server Pages (ASP), PHP (Hypertext Preprocessor), Python, or other scripting languages. This means that the behaviour of the web server can be scripted in separate files, while the actual server software remains unchanged. Usually, this function is used to generate HTML documents dynamically (“on-the-fly”) as opposed to returning static documents. The former is primarily used for retrieving or modifying information from databases. The latter is typically much faster and more easily cached but cannot deliver dynamic content.

Web servers can frequently be found embedded in devices such as printers, routers, webcams and serving only a local network. The web server may then be used as a part of a system for monitoring or administering the device in question. This usually means that no additional software has to be installed on the client computer since only a web browser is required (which now is included with most operating systems).

Product Vendor Percent
Apache Apache 44.3%
nginx NGINX, Inc. 41.0%
IIS Microsoft 8.9%

Programming languages

’Programming

Content Management System (CMS)

A content management system (CMS) is a software (or stack of software) for creating, editing, organizing, and publishing content onto the web. WordPress is a CMS and an exammple, that allows you to create and publish your content on the web. Top 10 (2020)

  1. WordPress (27+M)
  2. Wix (3.8+M)
  3. Squarespace (2.2+M)
  4. Joomla! (1.5+M)
  5. Shopify (1.4+M)
  6. Progress Sitefinity (1.4+M)
  7. GoDaddy Website Builder (1.2+M)
  8. Weebly (935+ M)
  9. Drupal (562+ M)

Stacks

A LAMP Stack is a set of open-source software that can be used to create websites and web applications. LAMP is an acronym, and these stacks typically consist of the Linux operating system, the Apache HTTP Server, the MySQL relational database management system, and the PHP programming language. PHP is a general-purpose scripting language that is especially suited to server-side web development, in which case PHP generally runs on a web server. Any PHP code in a requested file is executed by the PHP runtime, usually to create dynamic web page content or dynamic images used on websites or elsewhere.

DNS

The Domain Name System (DNS) is a hierarchical and decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It associates various information with domain names assigned to each of the participating entities. By providing a worldwide, distributed directory service, the Domain Name System has been an essential component of the functionality of the Internet since 1985.  Essentially, it converts IPs to URLs like usc.edu.

IP Addresses

An Internet Protocol address (IP address) is a numerical label assigned to each device connected to a computer network that uses the Internet Protocol for communication.  An IP address serves two main functions: host or network interface identification and location addressing. Internet Protocol version 4 (IPv4) defines an IP address as a 32-bit number.  IPv6 deployment has been ongoing since the mid-2000s. IP addresses are assigned to a host either dynamically as they join the network, or persistently by configuration of the host hardware or software. Persistent configuration is also known as using a static IP address. In contrast, when a computer’s IP address is assigned each time it restarts, this is known as using a dynamic IP address.

A public IP address is a globally routable unicast IP address, meaning that the address is not an address reserved for use in private networks, such as those reserved by RFC 1918, or the various IPv6 address formats of local scope or site-local scope, for example for link-local addressing. Public IP addresses may be used for communication between hosts on the global Internet. Private IPs are those only available in a sub-network, such as within a router setup.

Routers

A route forwards data packets between computer networks. Routers perform the traffic directing functions on the Internet. Data sent through the internet, such as a web page or email, is in the form of data packets. A packet is typically forwarded from one router to another router through the networks that constitute an internetwork (e.g. the Internet) until it reaches its destination node.

A router is connected to two or more data lines from different IP networks. When a data packet comes in on one of the lines, the router reads the network address information in the packet header to determine the ultimate destination. Then, using information in its routing table or routing policy, it directs the packet to the next network on its journey.

The most familiar type of IP routers are home and small office routers that simply forward IP packets between the home computers and the Internet. More sophisticated routers, such as enterprise routers, connect large business or ISP networks up to the powerful core routers that forward data at high speed along the optical fiber lines of the Internet backbone.

Firewalls

For security and privacy considerations, network administrators often desire to restrict public Internet traffic within their private networks. The source and destination IP addresses contained in the headers of each IP packet are a convenient means to discriminate traffic by IP address blocking or by selectively tailoring responses to external requests to internal servers. This is achieved with firewall software running on the network’s gateway router. A database of IP addresses of restricted and permissible traffic may be maintained in blacklists and whitelists, respectively.

VPNs

A virtual private network (VPN) extends a private network across a public network and enables users to send and receive data across shared or public networks as if their computing devices were directly connected to the private network. For security, the private network connection may be established using an encrypted layered tunneling protocol, and users may be required to pass various authentication methods to gain access to the VPN. In other applications, Internet users may secure their connections with a VPN to circumvent geo-blocking and censorship or to connect to proxy servers to protect personal identity and location to stay anonymous on the Internet.VPN technology was developed to provide access to corporate applications and resources to remote or mobile users, and to branch offices.A VPN is created by establishing a virtual point-to-point connection through the use of dedicated circuits or with tunneling protocols over existing networks. A VPN available from the public Internet can provide some of the benefits of a wide area network (WAN). From a user perspective, the resources available within the private network can be accessed remotely.

Ports

In computer networking, a port is a communication endpoint. At the software level, within an operating system, a port is a logical construct that identifies a specific process or a type of network service. A port is identified for each transport protocol and address combination by a 16-bit unsigned number, known as the port number. The most common transport protocols that use port numbers are the Transmission Control Protocol (TCP) and the User Datagram Protocol (UDP).

A port number is always associated with an IP address of a host and the type of transport protocol used for communication. It completes the destination or origination network address of a message. Specific port numbers are reserved to identify specific services so that an arriving packet can be easily forwarded to a running application. For this purpose, the lowest-numbered 1024 port numbers identify the historically most commonly used services and are called the well-known port numbers. Higher-numbered ports are available for general use by applications and are known as ephemeral ports.

Ports provide a multiplexing service for multiple services or multiple communication sessions at one network address. In the client–server model of application architecture, multiple simultaneous communication sessions may be initiated for the same service.

Number Assignment
20 File Transfer Protocol (FTP) Data Transfer
21 File Transfer Protocol (FTP) Command Control
22 Secure Shell (SSH) Secure Login
23 Telnet remote login service, unencrypted text messages
25 Simple Mail Transfer Protocol (SMTP) E-mail routing
53 Domain Name System (DNS) service
67, 68 Dynamic Host Configuration Protocol (DHCP)
80 Hypertext Transfer Protocol (HTTP) used in the World Wide Web
110 Post Office Protocol (POP3)
119 Network News Transfer Protocol (NNTP)
123 Network Time Protocol (NTP)
143 Internet Message Access Protocol (IMAP) Management of digital mail
161 Simple Network Management Protocol (SNMP)
194 Internet Relay Chat (IRC)
443 HTTP Secure (HTTPS) HTTP over TLS/SSL

HTML/CSS/Javascript

HTML stands for HyperText Markup Language. HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and latest major version of HTML that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard and is maintained by a consortium of the major browser vendors (Apple, Google, Mozilla, and Microsoft), the Web Hypertext Application Technology Working Group (WHATWG).”Markup language” means that, rather than using a programming language to perform functions, HTML uses tags to identify different types of content and the purposes they each serve to the webpage.

  • HTML Files with XML format that provide the basic structure of sites, which is enhanced and modified by other technologies like CSS.
  • CSS is used to control presentation, formatting, and layout.
  • JavaScript are scripts that can alter the user experience and change both HTML and CSS.

HTML

Basic HTML Page Structure

A basic HTML page is a document that typically has the file extension .html, though HTML frequently appears in the content of other file types as well. All HTML documents follow the same basic structure so that the browser that renders the file knows what to do. The basic structure on which all webpages are built looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>Homepage Headline</h1>
        <p>This is a paragraph.</p>
    </body>
</html>
HTML Rendering
<h1>My First Heading</h1>
My first paragraph.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<a href=”https://dtg.usc.edu”>This is a link</a>
Try it Yourself »
<button>My button</button>

THIS IS HEADING 1

This is heading 2

This is heading 3

This is a link
Try it Yourself »

 

HTML defines the content of every web page on the Internet. By “marking up” your raw content with HTML tags, you’re able to tell web browsers how you want different parts of your content to be displayed. Creating an HTML document with properly marked up content is the first step of developing a web page. Lets consider one element, where an element consists of a starting and ending tag.

element and tag labeled

<h1>This is heading 1</h1>

Above, H1 is an element.  We can mark it up, or add information in a variety of ways.  One impact way is to give a specific tag an id.  We can change it thus:

<h1 id='my_top_heading'>This is heading 1</h1>

Another important way is to give subtypes or classes:

<h1 id='my_top_heading' class="bigbigheaders">This is heading 1</h1>

Classes are often used for stylings, and used to specify groups that should be formatted together that go beyond the primary element types. Styling is done with the “style” tag:

<h1 id='my_top_heading' class="bigbigheaders" style="60px">This is heading 1</h1>

We can do this in css files.

 

Head Element

The HTML head element is a container that can include a number of HTML elements that are not visible parts of the page rendered by the browser. These elements are either metadata that describe information about the page or are helping pull in external resources like CSS stylesheets or JavaScript files.

The <title> element is the only element that is required to be contained within the <head> tags. The content within this element is displayed as the page title in the tab of the browser and is also what search engines use to identify the title of a page.

All of the HTML elements that can be used inside the <head> element are:

<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>

In the body some examples are:

<!DOCTYPE html> <!-- doctype declaration -->
<html> <!-- opening HTML tag -->
    <head> <!-- opening head tag -->
        <title>Page Title</title> <!-- title tag -->
    </head> <!-- closing head tag -->
    <body>  <!-- opening body tag -->
        <h1>Homepage Headline</h1> <!-- h1 headline -->
        <p>This is a paragraph.</p> <!-- paragraph -->
    </body> <!-- closing body tag -->
</html> <!-- closing HTML tag -->

CSS

CSS stands for Cascading Style Sheets. This programming language dictates how the HTML elements of a website should actually appear on the frontend of the page.

HTML can be markedup.  For example, we could change H1 to appear larger or smaller:

<h1 style="font-size:25px">My First Heading</h1>

This would impact that tag.  However what if we wanted to impact all H1?  Styles that impact everything are described by the <style></style> tag.  Alternatively, all of these together can be put into files, called css files.

h1#my_type_heading.bigbigheaders {
  font-size: 2.6em;
  line-height: 1.5em;
  font-family:  "Open Sans", Verdana, Arial, sans-serif;
  font-weight: 300;
  color: #1c1f2a;
  margin-block-start: 1em;
  margin-block-end: 0.5em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;			
}

As you see above, there is a pandora-boxes of ways to control styling.  A few major things to be aware of is that above the . indicates the class and the # indicates the ID.

A few notes above are that colors can be specified a variety of ways (such as a hexadecimal, or CMYK) as can fonts (em, rem, px).

JavaScript

JavaScript is a programming language that lets web developers design interactive sites. These are typically embedded within the <script></script> tags.

There are many libraries, such as Jquery which help you with this, or D3.js which help in graphing.  These are often sourced in the header, to run first, or run at some point sequentially depending on the location of the script tag.

Images

Images can be displayed, and are beyond the scope of this class. One impact factor is that SVG is a special type of vector based image that is described with lines/angles, and can be scalled so as not to appear ever pixilated. Important factors with images are their size and compression, as they impact download time.

Frameworks

Prepackaged combinations of CSS/JS/HTML that can be modified are called frameworks.  Examples include Bootstrap.These are essentially design templates for typography, forms, buttons, navigation, and other interface components.

Tools:

https://codepen.io/

https://jsfiddle.net/

http://jsfiddle.net/hakim/Ht6Ym/

http://jsfiddle.net/kizu/zfUyN/