Web Development Concepts
A URL's server name or domain can be used to designate the intended homepage as the default. The server searches for an index file (like index.html) containing the content for a specific webpage that needs to be displayed when the given domain is entered. This outputs the homepage and its contents after that. This procedure makes sure that the particular web page is produced and displays appropriately and automatically when the user enters the URL. Web servers such as OSU Engineering's Apache server utilize index.html as the default name for the homepage file. It's vital to remember that default homepage file names can differ between servers. One example of a platform that permits the usage of default.html as the homepage is Microsoft.NET. The file index.html in the root directory is regarded as the typical homepage for the majority of practical web applications in the larger context of web development.
Comparing viewing file details from your local computer to a web server- the URL is completely highlighted on the local computer, but it is only partially highlighted on the web server. The web server contains a remote address, whereas the other does not. Things like detailed dates, the last modified date, Etags, server name, and so on are listed under the response headers for the web server version. Only the content type and latest changed date are stored on the local computer.
The status code for favicon.ico is 200 OK, which indicates that the content loaded correctly. To inform the user that the webpage and all of its contents have been produced correctly, it was delivered as a GET request response code. Between these requests, a client error was reported by the file status 400 bad request, which is shown in the main.css and main.js files. The request has been invalidated because the server was unable to process it. This could indicate the absence of a parameter, illegal or unauthorized access, or other issues.
The scheme in the link is https://, which identifies the protocol. The subdomain is the engr and web in oregonstate.edu, this is added in front of the host. Host domain is oregonstate.edu, this is where the resource is located. The path to the resource is /~sancaliy/, this identifies the resource on the server.
Frontend Design
Frontend design entails visual design, GUI or graphical user interface, and interactive experiences. Visuals require consistency in color scheme, font, photos, icons, illustrations, and navigation systems. Features of frontend design tend to change very often, so it is important to keep up to date.
- Effective
- This speaks to the website's efficiency and its capacity to fulfill user goals. In order to meet this expectation, accuracy is also crucial.
- Efficient
- How effective is a website if it allows users to complete tasks in the fewest possible steps? Check if it accomplishes this goal by asking yourself this question.
- Easy to navigate
- This determines if a website is easy for a user to navigate through, even if they have never visited this site.
- Error-free
- Ensure that one is made aware of any problems with the user's availability or accessibility.
- Enjoyable
- Check to see if the user experience is satisfying overall and meets the needs of the target audience, as well as if the other four E's have been satisfied.
The banner for a website is indicated by the header tag. Name, publisher, and tagline are frequently included. For the user to recognize that they are on the same website, this header typically remains constant across the page. Currently, information is grouped together using the section tag. This is for related stuff that cannot exist on its own. The element or article tag appears inside a section tag and displays a single topic along with the second level header (also known as the h2 headline). Links to important sites and a list of legal and contact details are typically found within the footer element. There may also be copyright marks and notices in the footer. The block that contains material like tutorials and stories is identified by its main tag. A document's body, which includes headings and tables, is defined by the body tag.
- To link to external content , HTML anchors use the “a” tag with the href property. The external content's URL can be found in the href attribute. Consider a URL that generates a link, for example. The user is taken to that particular website when clicking it. The anchor's external URL is specified via the href property, making it easier to navigate to the referenced content.
- To link to internal content, anchors use the “a” tag with the href property holding a relative URL to link to internal content in HTML. As an example, “Go to Internal” generates a URL pointing to the "internal.html" page on the same domain. When users click the anchor, the relative URL provides the path to the internal content, allowing for smooth movement around the website.
- In HTML, anchors make it easier to link from page to page by utilizing the "a" tag in conjunction with relative URLs. "Go to Page 4" on Page 3, for example, generates a link to "page4.html." Page 4 of the same website is accessed by clicking the link on Page 3. By specifying the route from the current page to the destination page, relative URLs allow for efficient inter-page browsing using the anchor element.
Optimizing images
There are six major specifications of images for the web. First, there are descriptive file names; files must contain who what, when, and where- to improve search engine optimization (SEO) . Next, we have small file size - this ensures that files are reduced as small as possible for faster loading. Exact dimensions crops the sizes of images to fit within the space of a specific webpage. As for correct file format, certain photos such as online photos are usually written as a .JPG, whereas line-art images are in .GIF. These are just some examples of using the correct file format. Reduced resolution describes how images render on a monitor, with the standard being 72 or 300+ pixels per inch. Lastly, color mode are settings used to show color in images - for example RGB is used for .PNG, .JPG, etc. while indexed is used for .GIF.
Photos can be in PNG or JPEG, which keeps the image quality, renders good compression, and transparency. Line art can be in SVG, PNG, or GIF. SVG format can be easily edited, which allows more control over different elements. WebP supports transparent images, animation, and lossy and lossless compression which is useful for line art and photos. Transparency, smaller file sizes, and multiple layers are why these are more suitable for line art.
Browsers and devices use favicons to identify the webpages (apps included) and/or launch these said webpages. Favicons can be saved in several file formats, such as .GIF and .ICO, but browsers usually use .ICO. Other common formats include .SVG and .PNG, along with the others. The process for favicons starts with a unique symbol that is fitted for different devices, which it is then saved in a certain file format depending on the device. Browsers recognize the files and then if prompted will save this icon and anchor it to device screens, search engines, or bookmarks.