Web Servers
In terms of websites and servers, a website's and server's index file is the default file that is used for a designated homepage. Index.html is one of the most common default names in world web applications. For example, the Apache web server utilizes Index.html for the default name of homepages.
The difference is most obvious when the file is not found. When the resources cannot be found, the Network Tab of the Inspector section will show a status code of 404 for requests from the web server and "(failed)" for requests from the local computer. Moreover, from the local computer, more complicated statuses, such as 401 and 403, might not be possible since authentication is determined by the server. (In order to make authentication possible for local file access, one might consider using localhost or 127.0.0.1 to create a local server inside a computer.)
The request for the favicon.ico file has a status code of 200, indicating a successful request. It might or might not need authentication, yet, even if authentication is needed, then the client is authorized to access the resource. Meanwhile, the requests for main.css and main.js files are not successful due to missing crucial parameters, causing the server unable to execute the requests. Status codes can be checked inside the header request/response data in the Network Tab of the Inspector section.
A scheme is an identifier, which has the capabilities of sending the request, such as HTTP. In my URL, the scheme is either "http" or "https". A subdomain is defined as a part of a domain or server, which is "web.engr" in the URL to my web file. The host domain is a machine or platform that implements some or many programs within a server, which is "oregonstate.edu" in my URL. Moreover, it must form a TCP/IP connection with a web client. Resources are documents located on servers. Web clients are always looking for and requesting these documents, or resources, which are in the forms of HTML, PDF, etc.
Frontend Design
Frontend design is a term that refers to constructive processes of appropriateness for users. It can involve comfort in interactions between users and web pages, such as the graphical user-interface (GUI) and the interactive experience. Structural organizations of font families and sizes, foreground and background colors, tables, illustrations, and navigation schemes all contribute to robust and persistent visual design. Furthermore, there is an important term, which is usability. Usability means differentiations of interactive experiences upon various devices, product, and systems, such as a desktop app, a tablet app, a web app, etc. Below demonstrates the more detailed explanations of how usability should be enforced.
Effective
Users must be able to use the product developed by the creators with accuracies to achieve their goals.
Efficient
Users must be able to use the product with as few complications as possible, such as minimum numbers of steps of procedures with rapidness and swiftness, to achieve their goals.
Easy to navigate
New users must be able to use the product with at least efforts as possible. The least efforts come with reducing the time of new users to learn how to utilize the product.
Error-free
This indicates the preventions pertaining to problems of availability and accessibility. Developers can accomplish this type of usability by surveying and listening to the experiences of issues endured by the users.
Enjoyable to use, or engaging
This represents suitability towards the necessities of users in terms of design structures and contents. This term also means that the users will have desires to return to the product.
HTML has different kinds of page layout tags, which are <header>, <nav>, <main>, <section>, <article>, <aside>, <figure>, <blockquote>, <footer>, <div>. <header> is a tag where it covers the header part of the page, which is typically the upper or beginning part of the page, including various heading tags ranging from h1 to h6. Developers usually create the same headers from one page to another in order to inform the users that they remain on the exact same site. <nav> is a navigation tag for ease of users to navigate back and forth from one page to another. The tag may include links, search, tools, etc. <main> contain pieces of information related to the topic of a page. <section> is utilized to organize subsets of contents based on their themes. <section> is a tag with the purpose of containing a particular topic, starting with a <h2> heading tag. <aside> is for making a content floating either to the left or right of the <article> it is in. Paragraphs and sentences inside <aside> has a different style compared to those outside it in the <article>. <figure> contains media, such as video or image, which are <video> or <image>, respectively. <blockquote> is for extended quotations, which can have more than one sentence. This one usually have different style to make it stand out of the paragraph it is in.
- External content: <a href="[URL outside of current website]">[Some Texts]</a>
- Internal content: <a href="#[an ID attribute inside the current website]">[Some Texts]</a>
- From page-to-page: <a href="[a relative link, like simply putting a name of a document or using "./" or "../" to before a name of a document.]">[Some Texts]</a>