An index, as it relates to websites and servers, acts as the name of the path that leads to the homepage of the web application.
This path, seen as index.html, exists in the root directory. In most web servers, /index.html is mapped to whenever a get request is received for the /.
A different path name exists to serve the same purpose as index.html in some web servers. For example, in Microsoft's .NET platform, the use of default.html is allowed as a homepage path name.
There are distinct differences between a file's details when viewed from the web browser versus the local computer. When viewed from the web server, there will be an HTTP request
sent to the server machine from the web client. Due to this, the web server will show the request URL along with Header Request Data and Header Response data within the Network Tab in the browser's Web Dev tools. Within this window
you can also see the request method for the interaction, in this case it is a get request since the HTTP request is being sent to the server machine for the webpage. This communication occurs
using the Transmission Control Protocol/Internet Protocol and is what allows the file to be viewed using the URL. The file details when viewed from the web server, by viewing the Network tab and then entering the browser's Web Dev tools,
also show two additional files, executor.js, and favicon.ico.
Favicon.ico shows a status of 200 on the Inspector Network tab. However, there are two additional files present on the screen, main.css and main.js.
Both main.css and main.js show a status of 404 indicating that the requested resource was not found on the server. In other words, these files do not
exist on this server, while favicon.ico does.
The URL to this webpage has four parts. The first part is the scheme, which is shown at the beginning of the URL as https://. Following
the scheme is the subdomain, web.engr., which is the first part of the server name. The secondary part of the server name is the hostname, oregonstate.edu.
The final part of the URL is the path to the page or, in other words, the resource. This path is indicated with the following, ~fastabek/a1-fastabek/.
Frontend Design
Frontend design devotes itself to the process of creating the most optimized user experience. This entails great attention to the visual design of the page, the graphical user interface
(GUI), and the interactive experience. The visual design must have a font and typography scheme, a consistent color scheme, photography, icon and illustration scheme, and
intuitive navigation systems. Navigation and interaction within the site are so important that a list of Five "E"'s of usability was created to help streamline the process of ensuring a webpage
meets these expectations.
Effective
The website helps users to complete their goals.
Efficient
The website allows users to complete their tasks quickly with the least number of steps.
Enjoyable
The website is enjoyable to use and provides the intended audience the content and design they desire.
Error-Free
The website avoids accessibility and availability issues, providing a smooth user experience devoid of unwanted errors.
Easy to Navigate
The website is easy to use and navigate, even for first-time users.
Page layout tags are block-level elements that act as a device to break up the flow of content. Typically, page layout tags will include
a new line before and after the element. These tags, or elements, help search engines and screen readers to understand which area of the page contains each
component. The header element is used to display the banner or masthead for the app/site and typically includes the name, publisher, and marketing slogan. The main element
signifies the primary block of content and often includes items such as stories, tools, and legal links. A section element is used to group related content that
cannot stand on its own. The first child of a section is generally a headline, <h1>, that describes what is in the section. The article element is typically
seen within a section to denote a single specific topic within a second-level headline, <h2>. In cases where multiple article tags are present,
there are regularly ID selectors (#topic) to differentiate the articles for styling. The aside element is used frequently to create sidebars for
navigation or unrelated content, and includes material that is related to an article. These elements are usually seen floating on the left or right of an article and largely have a different style to help differentiate them.
The figure and figcaption elements are used similarly to the aside elements. However, the figure and figcaption elements typically include media,
e.g., an image or movie, along with the <figcaption> for that media. The blockquote element is utilized for extended quotations that are too long for a paragraph.
This element is visually different from paragraphs and assists in setting them apart from the remaining elements. They can include a citation, <cite>, as well as the quote, <q>.
The footer element typically holds the site's associated legal information, contact information, and links to critical pages. The footer element is placed below the tag and
as a minimum should contain the copyright statement. The div element acts as a placeholder for dynamic content and can be used to divide content when no other
element makes sense in its place. This element does not have any style or dimensions. The nav element, which stands for navigation, is a set of navigation anchors that
take users from the current page to other pages on the site. Anchors are used in many instances to create hyperlinks. This is done by adding a href attribute to specify the path/URL
and using <a> tags to surround the content that describes the link.
Anchors that link to external content link to a URL that is outside the current website.
Anchors that link to internal content use IDs to link from one text item to another text item within the same page.
ID attribute values can be used with a hashtag to define the reference for an anchor.
Anchors that link page-to-page can use a relative URL to point to a location relative to the current file. This can be notated
using the same directory and referring to the file directly, by moving down the child directories, or by moving up the parent directories.
Optimizing Images
There are six major specifications when it comes to images for the web. These specifications include a descriptive file name, small file size, exact dimensions,
correct file format, reduced resolution, and color mode. A descriptive file name improves search engine optimization (SEO) and will help the engine
categorize the image for users looking for related content. Reducing file size as much as possible helps to optimize the experience for users
by decreasing load times. Similarly, keeping exact dimensions for an image will help reduce load times, one should reduce the size of the image to fit
the dimensions of the space in the web page. Having the correct file format for an image ensures the proper clarity and optimal file size are present.
The file formats that work best with photos are .WebP and .JPG. These formats compress down to small file sizes and remain rectangular with good image quality as long as higher compression
isn't used. Meanwhile, .PNG, .SVG and .GIF work well with line art due to their transparency. Older monitors render at a default of 72 pixels per inch (ppi), while new
monitors render between 72 or 300+ ppi. The new standard is to ensure that multiple image sizes are provided to account for reduced resolution in older computers.
One should also seek to optimize the color modes for their images by choosing the appropriate color mode for the file format. Most commonly,
RGB is used for .PNG, .JPG, .SVG, and .WebP, and Indexed for .GIF. This is to ensure the image quality is retained without jeopardizing the file size.
Favicons
Favicons are used to help identify a site in the browser tab by displaying a company logo, or symbol. Also known as favorites
icons, or touch icons, favicons start off as a symbol that is designed to work on multiple devices and in different scenarios. Once a symbol is selected, then the
Favicon is saved in multiple file formats. They are saved as files in .GIF, .PNG, .ICO, and .SVG format depending on the browser or device it will appear on.
The most popular formats used today are .SVG and .PNG. When the webpage is opened, the browser loads the favicon and can even save the icon to use as
an anchor to a bookmark or favorites list if asked. The browser may also pick up the file to use for a search engine results list.
Fastabend