Lab 01: Getting Started with HTML and CSS¶

This lab will serve as a starting point to learning how to create webpages. You may have come across some of the tags used here in previous encounters, but be aware of deprecated tags! See Getting Started for more information.

Getting Started¶

Naming your Files¶

HTML files typically have the .html extension. One can create a HTML file named index.html where index is the name designated to the page.

Files with the name index are often treated as home pages in websitess. For example, when one visits myTIMeS, the browser would immediately look for a file whose name is index if the name of the file is not specified.

Let's just say myTIMeS has a page called login.html. One may visit that page instead of index.html by specifying the filename after the URL, namely:

https://mytimes.taylors.edu.my/login.html

Naming Files with Space Characters

Going forward, AVOID name any of your project folders or files with space characters. This can inevitably complicate things when referencing files in your project directory.

For example, if a website with domain www.example.com has a file named page 1.html, the address bar in a web browser will have to interpret the link to that page as:

www.example.com/page%201.html

Notice that the URL as stated in the web browser has this extra bit where a space was supposed to be in the filename: %20. Because the name of the file has a space character, its ASCII character code is used in place - you will not be able to see a working URL in your web browser using the formatted space character. The ASCII character code equivalent to the space character is 32 (in decimal), or 20 (in hexadecimal). We see the hexadecimal code equivalent used alongside a percentage symbol % prefixed in front. While benign now, having multiple instances of the space characters (be it on your files, folders, or whatever else you have), this can make reading or remembering the URL very confusing. This can bite you especially if you need to share the URL of your websites with anyone.

The best practice is to clump the words making up the file name together without space characters (i.e., page1.html), or to add a hyphen - or underscore _ to separate each word (i.e., page-1.html, page_1.html).

Basic HTML Document Structure¶

Start your HTML webpages with a structure like this one:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- To contain stylesheets and various webpage information (i.e., Tab Name) -->
  </head>
  <body>
    <!-- Browser viewable content should be placed here -->
  </body>
</html>

The viewable content in a webpage resides in the body section. This is where you ought to have your visible elements be kept in - this includes text, images, media, and the like.

Avoid Deprecated HTML Tags!¶

Web developers are now expected to follow the HTML 5 standard when developing webpages. With this standard comes the fact that some tags/elements/attributes which were prevalently used in prior versions of HTML should no longer be applicable - they are what we call deprecated. In most cases, CSS is strongly recommended to be used as the ultimate alternative.

For instance, rather than using the <u></u> element to denote underlined text, implement CSS like as follows:

<!-- In <head> section: -->
<style type="text/css">
  .underlined {
    text-decoration: underline;
  }
</style>

<!-- In <body> section: -->
<span class="underlined">Underlined text</span>

Using CSS rather than resorting to deprecated tags has its upsides. For one, you can implement one style ruling to be shared across multiple HTML elements in multiple HTML documents. We will delve more into CSS stylings in the next practical.

Refer here for the list of deprecated HTML tags and attributes you SHOULD NOT USE: HTML Deprecated Tags and Attributes

Applying CSS¶

CSS can be applied in three different methods. The encouraged method is having your CSS in an external CSS file (i.e., external style).

External CSS¶

When referencing a CSS file, one ought to use the <link> tag within the head section of the HTML document. For example, to reference styles.css in your HTML document, the placement of your CSS <link> reference should be like as follows:

<!DOCTYPE html>
<html>
  <head>
    <!-- some head content -->

    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <!-- body content here -->
  </body>
</html>

Responsive Web Design¶

Responsive web design typically has to do with making sure that websites can adapt to different screen resolutions from different devices. You can specify how content appears in different resolutions by using the media query tag.

For example, the yellowgreen background color styling only applies to screens that are at least 768px wide:

body {
  background-color: orange;
}

@media only screen and (min-width: 768px) {
  body {
    background-color: yellowgreen;
  }
}

Detailed information is available in Lecture 4: HTML & CSS (Part 3). However, the concept behind it is easy to understand and should be considered if you plan to make your webpage accessible on mobile screens.

Local Custom Fonts¶

Ah, fonts. There's something about fonts that make it part of a document's or interface's aesthetic - when used right alongside complementing visual elements, you can produce an outlook that dictates a great efferevescence from how professional it looks or how creative the author's mind is. There are various methods of including different types of fonts, one of which include using one that's locally installed in your computer; another being linking to a font that's available in an online repository (e.g., Google Fonts). With regards to custom fonts stored locally on your computer though, there's something that you really, REALLY NEED to take note of.

You may be tempted to just include the font straight away like how it's plug-and-play with your other applications. For example, just by including the font inside a Fonts folder or installing it enables the font to be instantly recognized by Microsoft Word and be leveraged for use in your documents. However, while this also includes your webpages, it only works because the webpages are inside your computer.

You need to be aware that the custom fonts you may have (perhaps painstakingly or jovially) installed in your computer MAY OR MAY NOT exist in other computers that don't belong to you. This can be extended to external servers where websites are deployed into. You should expect computers to have a handful of fonts that act as the bare minimum for a commonplace interface, like "Times New Roman", "Courier New", "SimSun", and "Arial". Should you want to use custom fonts, you'll need to include it in your project folder.

Also.. NO, the solution is not
"Just ask the other person to install the font into their computer."

The folder structure should be something like this if you wanted to include a custom font (this case, Roboto) locally within your project folder:

project
|-- css
  |-- styles.css
  |-- footer.css
|-- fonts (store your custom fonts in here)
  |-- Roboto.ttf
|-- images
  |-- catdog.png
  |-- icon.svg
|-- js
  |-- main.js
|-- index.html
|-- about.html
|-- error-404.html

From here, you can link your font file using a relative URL easily without needing to resort to digging your C:\ drive or what Home directory you have in your computer just to elicit the font. Of course, if you don't link it, the font may still appear to work in your computer, but this by itself does not solve your problem with it not appearing in another computer. Make sure that in your CSS file (or wherever you're using your embedded CSS, inline CSS does not have this luxury) that's being used, you use @font-face to declare use of the font on top:

@font-face {
  font-family: "Roboto";
  /* in this example, the font is located in a sibling folder,
    so you want to exit from the `css` folder
    before entering the `fonts` folder */
  src: url("../fonts/Roboto.tff");
  /* optional: font-weight */
}

Mini-Tutorial: How to Center Images in HTML¶

In order to center <img> tags in your webpage, you may want to consider placing them into a block container element (e.g., <div>, <section>). Then, set the text-align CSS property of that container element to center. While text-align is seemingly meant to work only with text, it can be used to align any inline elements – this includes <img> elements.

You can view this mini-tutorial demonstration here to see this being applied in action:

Lab Activity¶

Websites are one of many ways one could express themselves with, or even serve as an extension to their professional profile. Think portfolios by artists (like this or that), websites that add on to what they do for work (like this or that, or from yours truly) or those simply for fun (like this or that). While using drag-and-drop options like WordPress, Wix or Squarespace are perfectly fine, there is a charm in creating one from scratch - especially if you find it hard to be content with the limited customizability granted to you.

Note that these tasks can be completed concurrently or in sequence, depending on your own pace.

Task 1: Landing Page¶

Start with a landing page - ideally, you will want to name it index.html for convenience in navigating throughout your website. Your landing page should contain something that describes yourself, which may or may not include the following:

a picture of yourself (or your online avatar/sona, a goat 🐐.. whatever rocks your boat)
a short paragraph about yourself (use paragraph element)
hobbies and interests (unordered list)
favorite subjects in school (or college, you decide) (ordered list)

You may feel free to use this as a starting point, or start going wild with what you like! You can also consider adding extra pages and linking them as appropriate.

Note

What else would you put into a introduction page? Or more specifically, what would you like other people to know about you?

Tip

If you are unsure on how you would like your webpages to look like, or how you want the information shown in your webpage be shown, look up examples online! Soak up as much as you can - often I do this to get inspiration on how to structure my websites' contents.

It may also be helpful to roughly sketch out how you wish your webpages look. Having a wireframe structure often helps especially during the design phase, if we are talking in SDLC terms. This comes in clutch especially with documentation later on.

Task 2: Webpage Styling using CSS¶

While creating your webpage(s), start applying various CSS styles to spruce up their presentation. When applying CSS to your webpages, look up some good aesthetic principles web designers or developers take when designing their websites. Try to apply those principles in your webpages wherever possible. If you would like to hear my two cents on hwo to go about this, refer to Website Design.

Task 3: Nook¶

In another separate webpage called animal-crossing.html, try to replicate the following:

Requirements:

The webpage should contain the contents as given in the figure.
Set the background color to beige.
The top image should
- occupy a maximum width of 400px
- be surrounded by a darkgreen dashed border with 3px thickness
- have a padding of 10px
- display the message "Tom Nook" if the image cannot be displayed
Download the given Tom Nook image to use with this webpage. Feel free to rename the image if desired.
Set the table borders to 1px solid black.
Each table cell should have a 10px padding.
The colored cell should have a lightseagreen background color.
For each list, you are required to follow the list style type as shown in the output.
For the first hyperlink, link it to https://www.google.com that opens in a new window. Do not use a different hyperlink text from what is given in the output.
For the second hyperlink, link it to an email address tom_nook@mail.com. When the hyperlink is clicked, it should either open your computer's preferred mail application or an email website from your browser and open a new email draft. The subject should be pre-filled with: "I Need Miles".

Task 4: Responsive Nook¶

Implement a visual feature that only applies itself to a mobile screen. You may look up a screen resolution for a mobile device of your choice (e.g., iPhones, tablet screens).

Task 5: Website Deployment¶

You have a lot of options, such as DigitalOcean, Vercel, and Hostinger. For websites which do not contain any backend parts, GitHub Pages is a good and free option!

There are numerous sources that can help you to get a head start with GitHub Pages, and it's all free! The simplest method is to use GitHub Desktop.

An official GitHub Docs guide can be found here.

Reflection¶

Website Design¶

Of course, this is completely optional based on what you see fit. This is just my two cents on what can constitute a good website design.

Website front-end design is dependent on aesthetics; HTML and CSS has very rarely got to do with much logic implementation. In the field of human-computer interaction (HCI), you will find that there are a few key design principles one would need to adhere to an interface that is useful and aesthetically pleasing at the same time. While it is crucial to ensure that a website isn't bland, sometimes it's only right to go with simple and minimalistic designs. By default, when designing a website, one has to consider the balance between functionality and aesthetics; whether one should be prioritized solely depends on what the website is to be used for.

Another thing that should be taken note of is the content density. Say, for example, you're working on a design for a website acting as an online manual.

Novice users tend to prefer a lower content density - that is, they will be more likely to prefer an interface that isn't too cluttered with information or options (so as to intimidate them, among many reasons). Such interfaces would warrant little to no effort in learning how to navigate them.
Expert users tend to prefer a higher content density - that is, with knowledge of more advanced/obscure settings and/or information, for instance, they would prefer to have an interface that can leverage as much control as possible. Such interfaces would warrant a comparably greater effort in learning how to navigate them.

In many professional (and actually functional) websites, you may tend to find very consistent design elements in play that constitute a website. This can range from how each element appears, to the terminology used to convey information. By having consistency, you can reduce the amount of effort needed to learn how a website works - this can be a key factor as to whether one would be compelled to explore your website more or not.

While planning the design of a webpage, some find it better to prepare mockups to visualize ideas they have in mind into something tangible and easier to formulate decisions on. In fact, this is considered protocol if this were to be done within a software development standpoint, where web designers can find themselves needing to prepare visual mockups for key stakeholders (i.e., project sponsors, project managers, etc.) to see, and hopefully accept. Press F to pay respects to those working with very picky, indecisive and/or hard-to-please clients. 😅

This is only some advice I can offer from my standpoint, but what I do not possess is the intents you may have in creating your websites. Feel free to use anything I've mentioned from here, or explore a style that you would like to emulate. I think the best thing to do would be to look around and observe other websites online, and try to pick up anything you feel is interesting or vibes well with you. At the end of it, classes on designing a website using HTML and CSS is something like an art class, but with code and computers - you can learn how to use each component based on what guides you have at your disposal, but only you can form a design that speaks to you and your target audience the most.

Reference

Dennis, A., Wixom, B. H. & Tegarden, D. (2020). Systems Analysis and Design: An Object-Oriented Approach with UML (6th Edition). Wiley.