In the realm of web development, the term
index refers to the central hub of a web
application. When the filename index.html is located in the root
directory, it is referred to as the
designated homepage. When a user navigates to a
URL that omits a resource path (path to a specific
page), most servers will default to returning the index.html file.
There are, however, times when this is not the case. Some servers
may look for index.js or index.php as the homepage, while other
servers may allow an alternative, such as default.html for
Microsoft's .NET platform.
Modern web browsers include an Inspector tool that
allows you a user to view details about what is being shown in the
browser window. Within the Inspector, there is a Network tab where
information related to HTTP communication is shown.
This tab can be used to explore exactly what information is being
requested and received between the client and the web server. The
primary information found here is the request URL, the method the
information was requested, the associated
IP address, the status code, and dates of when the
file was last updated and when it expires. When viewing a local file
versus a file on a web server, the primary differences are that the
request URL and the remote IP address will reflect the localhost.
Along with the index.html file, the Inspector shows information for
all other associated or referenced files. For this page, the
favicon.ico file returned a successful status code of 200, because
it is provided by the Oregon State University (OSU) server
automatically. Conversely, the files main.css and main.js have a
status code of 404, meaning they were not found. This is because
these two files do not exist in the root folder with index.html.
The URL for all web pages is made up of several parts. A few common
parts are demonstrated by this web page's address,
https://web.engr.oregonstate.edu/~woodruco/a1-woodruco/. The first portion, https://, is the scheme or
protocol. Next, web. and engr. are the
subdomains. oregonstate.edu is the server name (also
commonly called the domain name). The last part,
/~woodruco/a1-woodruco/, is the path to the resource.
Frontend Design
When talking about a website or app,
frontend design relates to everything that the user
will see and experience. This includes how a user interacts with and
navigates the website, as well as the visual presentation such as
color scheme, font selection, and media. The visual design is not
always created by the developer, rather, the developer is
responsible for ensuring the site or app incorporates an
organization's brand requirements. Successful frontend design
results in a page that delivers what a user expects quickly and is
pleasant to look at. These aspects are summarized in what's known as
the Five "E"s of usability, shown below.
Effective
The website must deliver what the user is expecting to see.
Efficient
The user should be able to find what they're looking for quickly,
without the need to navigate too deep in navigation.
Easy to Navigate
Page navigation and links should be obvious and accessible to the
user. Locating information should not take much effort.
Error-free
The user should not experience any unintended issues. Common
errors that may arise should be tested and fixed prior to being
made public.
Enjoyable
The look, feel, and content should draw the user to return. The
website should be appealing to everyone who interacts with it.
The underlying structure of a webpage's visible content is dictated
by block-level elements called
page layout tags. These tags create space between
different elements with a newline, and also dictate
the location and formatting of the content they wrap. Pages begin
with a header element That represents the banner
shown at the top. This commonly displays the website's name. The
next tag is the nav element. This tag is used to
create a central point for navigation links to other pages. The
main element is the primary block where content is
presented to the user. Within the main element,
section elements are used to organize content
thematically. This organized content is presented using
article elements. These tags often include an
ID selector that can be used as an anchor for
hyperlinks to point to. Several tags provide a location for
accompanying information to the core content being displayed. An
aside element floats along one side of the screen
and typically displays background information or navigation bars.
The Figure element is related to the aside element,
but is meant to wrap media and a
figcaption element, which captions the media. If an
extended quote is being presented, it can be distinguished by being
wrapped in a blockquote element. Similar to the
header element, a footer element is displayed at
the bottom of a page and commonly is used for legal or contact
information. Finally, the div element is used to
wrap dynamic content if no other tag is suitable.
Anchors are a tool used for allowing the user to
navigate to specific information both within the current webpage and
externally.
An anchor element can link wrapped text to
external content by setting the href equal to a valid URL address.
When an article element includes an ID, an anchor element can link
wrapped content directly to it by using that ID as the href
target.
If the targeted content is another webpage, it can be linked by
setting the anchor element href to either the absolute path on the
web server, or preferably using the relative path.
Optimizing Images
When optimizing images to be used in a webpage, there are six major
specifications that should be implemented by a developer. Using a
descriptive file name allows search engine bots to
correctly categorize the photo, so it can be displayed for a
relevant web search. If the image size is large, reducing to a
small file size will improve the webpage's loading
speed. This is done by compressing the file, which can be done in
two ways. Lossy compression removes some image data
and results in a drop in quality, while
lossless compression will retain the quality.
Reducing the physical size of an image (in pixels) to the
exact dimensions needed for the device screen size
will also improve loading speeds because it omits unneeded data.
Depending on the content of the image, and its use, the image
should be saved in the correct file format. Each
file type has pros and cons, and using the incorrect type can
drastically decrease the quality of what's being displayed. High
quality images should be edited to a
reduced resolution that matches the expected device
screen resolution. Any quality beyond what can be displayed to a
user is superfluous. Multiple copies of the image at different
resolutions can be provided to match the device viewing the content.
The final specification is the color mode.
Depending on the range of colors, or if opacity is needed, an
applicable color mode should be used. The options include
names, hexadecimal/hexa,
RGB/RGBa, and HSL/HSLa. Some
options may be too limited in hue or saturation, so a mode with
greater range, such as RGB, is commonly selected.
The correct image file type is dependent on the content of the
image. For photographs, JPG and
WebP are typically used, while
PNG, SVG, and GIF
are most often used for line art. JPG and WebP files allow for
images to include a large amount of colors and high quality, which
are retained well when compressed to small file sizes. SVG files are
mathematically derived, allowing the size to be scaled up or down
without any loss in quality, so they excel when used for text or
simpler graphics. Both PNG and GIF allow transparency for
non-rectangular graphics and use indexed color modes for very small
file sizes.
Favicons
Favicons are simple graphics (commonly a logo) that
allow a user to quickly identify a website. Originally, favicons
were displayed in the browser tab next to the page title. They are
now used in many places, such as in search results, browser
favorites, and even used as an app icon if a website shortcut is
saved to a smartphone home screen.
Cascading Style Sheets
Cascading Style Sheets (CSS) are an important tool
in designing the way that a webpage is displayed. While the content
is controlled by HTML, CSS is responsible for the fonts, colors,
spacing, sizing, layout, and much more. One primary reason for
wanting to control these aspects is to make an app or website
appealing to users, so they enjoy the content they're viewing and
interacting with and are more willing to return. Another reason is
to maintain a uniform look and feel if developing a product for a
company or organization.
Implementation of style can be handled several ways. The most robust
and preferred method is through external .CSS
files. CSS allows for a large amount of control to adjust the look
of every element on the screen. If the required changes are minimal,
such as a simple color change or resizing, a developer may opt for
embedding the style within the HTML or
JavaScript file. In HTML, content may be embedded
by wrapping with <style></style> tags, or
inline within an element. For JavaScript files,
style can be added through template literals in a
JavaScript function, or with the
Document Object Model (DOM). These methods may be
preferred for small projects, or in instances where an app is not
meant to be visually appealing to a consumer.
Woodruff