The purpose of this lab is to briefly introduce the View component of the MVC, and particularly to introduce the Hyper-Text Markup Language (HTML). In this tutorial we will explore the building blocks of the front end of the web by discussing the different elements that make up the View, what they do and how they interact. We will then focus especially on HTML, the core building block of all websites.
Lab 2: HTML and CSS
ENSE 374 - Software Engineering Management - Laboratory
University of Regina - Engineering and Applied Science - Software Systems Engineering
Lab Instructor: Adam Tilson
Computer running Windows, MacOS or Linux, with an Intel or AMD-based processor (x86 or x86-64) with administrator privileges.
- A modern web browser, with a strong preference for Firefox or Chrome
- A text editor, preferably VS Code
Over the course of the semester we will be working with the following technologies in the lab:
Over the next four weeks we will focus on different parts of the View. We will then look at the Controller for two weeks, and the Model for two weeks. We’ll come back to this often to remind you how everything works.
Hopefully by continuing to refer to this diagram, it will be clear how the different components of the system are functioning together. (This was a point students struggled with last year.)
Important: While these technologies are the key players in this version MVC, the MVC abstraction is not tied to any technology. That means you could implement an MVC using only HTML + JavaScript as long as you properly separate the view (html) from the model (JavaScript JSON Objects). We’ll disucss the MVC in more depth later!
In Web Development (web dev) there are three types of files used to render the front end which users see: HTML, CSS and JavaScript. Sometimes these are generated by front-end libraries, like Angular, React, Vue, or incorporate useful libraries like BootStrap or jQuery, but fundamentally these are the technologies browsers run on. Your browser requests these files, they are delivered from a server over the internet, and then rendered in the browser.
HTML
In modern web dev, HTML is used only to specify which components will appear on the page, and define order and hierarchy (parent-child relationship, akin to a tree data-structure). If we think of front-end web dev as building a house, HTML is the blueprint and bricks. You can build a web site using only HTML, though it will probably look like a 90’s geocites website, or a professors personal homepage.
CSS
Cascading Style Sheets (CSS) is used to style the website. This makes the elements appear where and how you want them to appear. In our analogy of building a house, CSS are the decorations. A popular library for CSS is BootStrap, which standardizes and speeds up design. We’ll look at CSS in Lab 3.
JavaScript
JavaScript is a programming language which runs in the browser, for adding animations and simple interactions with the website through the Document Object Model (DOM). For security reasons, there are limits to what can be done in JavaScript. In our house analogy, JavaScript is the electricity, it makes things work. We’ll look at JavaScript in Lab 4, and a popular extension, JQuery, in lab 5.
Single Responsibility
In Software Engineering, Single Responsibility principle is the idea that each module should only perform one task. We will broadly follow this concept in this course. In other words, HTML should only handle object instantiation, CSS should only handle styling, etc. However, we will see several way we can violate this, such as:
- styling elements through HTML tags
- adding web elements using the JavaScript through the DOM
- adding styles to elements using JavaScript
As much as possible, we want to avoid using these modules for unintended purposes! It makes code harder to read, understand and change. Imagine a colleague hands you a completed website, and you need to update a style - how will you know where to find that style, if they are changing styles in the html, css and JS?
HTML is The only required element of a website. HTML is made up of XML-like tags which surround the content and further describe what type of content it is.
Markup
The term markup comes from manuscript submission, where the editor would make notes describing how we would like to print text. For example, underline this, emphasize this, etc.
Modern markup languages similarly employs tags to explain how we want the text to be rendered. There is a default rendering style, (which is arguably pretty antiquated) and custom rendering styles, while we will look at later using CSS. For now, the important take away is that we are using HTML to explain the purpose of the enclosed content, regardless of the visual presentation, which we will fine tune later.
Quick Example:
Let’s try an example using a classic text, Bram Stoker’s Dracula:
CHAPTER I
JONATHAN HARKER’S JOURNAL
(Kept in shorthand.)
3 May. Bistritz.—Left Munich at 8:35 P. M., on 1st May, arriving at Vienna early next morning; should have arrived at 6:46, but train was an hour late. Buda-Pesth seems a wonderful place, from the glimpse which I got of it from the train and the little I could walk through the streets. I feared to go very far from the station, as we had arrived late and would start as near the correct time as possible. The impression I had was that we were leaving the West and entering the East; the most western of splendid bridges over the Danube, which is here of noble width and depth, took us among the traditions of Turkish rule.
Without any context, each chunk of text looks exactly the same.
How do we differentiate one from another? Here’s how Project Gutenberg renders the same text.
Can we do this? Let’s start by pasting this into a new file in vs code:
Main entry point: index.html
By default, the main file in html is called index.html
. Let’s create a new file called index.html and paste this in.
We can preview this file in a browser by double-clicking the HTML file in our file browser:
Beautiful - A wall of text! Let’s start annotating it with HTML tags. The chapter section is a title, let’s embed it in a heading tag, h1.
<h1>CHAPTER I</h1>
JONATHAN HARKER’S JOURNAL
(Kept in shorthand.)
3 May. Bistritz.—Left Munich at 8:35 P. M., on 1st May, arriving at Vienna early next morning; should have arrived at 6:46, but train was an hour late. Buda-Pesth seems a wonderful place, from the glimpse which I got of it from the train and the little I could walk through the streets. I feared to go very far from the station, as we had arrived late and would start as near the correct time as possible. The impression I had was that we were leaving the West and entering the East; the most western of splendid bridges over the Danube, which is here of noble width and depth, took us among the traditions of Turkish rule.
What does this look like:
We can see that encapsulating text in a tag changes its appearance, however not exactly the way that we would like. We have achieved our goal of “marking up” the text - we have successfully described that the purpose of this text is to act as a heading, which is being communicated visually by the text being larger. While there are methods for changing the appearance in HTML, we’ll leave this for CSS in a later section. Recall - single responsibility!
Let’s add some more tags:
<hr>
<h1>CHAPTER I</h1>
<h2>JONATHAN HARKER’S JOURNAL</h2>
<em>(Kept in shorthand.)</em>
<p><em>3 May. Bistritz.</em>—Left Munich at 8:35 P. M., on 1st May, arriving at Vienna early next morning; should have arrived at 6:46, but train was an hour late. Buda-Pesth seems a wonderful place, from the glimpse which I got of it from the train and the little I could walk through the streets. I feared to go very far from the station, as we had arrived late and would start as near the correct time as possible. The impression I had was that we were leaving the West and entering the East; the most western of splendid bridges over the Danube, which is here of noble width and depth, took us among the traditions of Turkish rule.</p>
How does the preview look now?
We added a horizontal rule (hr), lower-level heading (h2), the emphasis tag, and the paragraph tag. Note that the paragraph tag encloses the emphasis tag, an example of nested tags (hierarchy).
While our browser is rendering our file correctly, it is not exactly compliant HTML. This is because we are missing some necessary boilerplate tags.
Boilerplate HTML
Boilerplate refers to standard, preprinted text, as might be stamped on a boiler. In programming languages, this is the minimum code needed to make the language run and be compliant. You’ve likely already seen the c++ boilerplate:
#include <iostream>
using namespace std;
int main() {
cout << "Hello World!";
return 0;
}
As you know, this is the bare minumum code to do anything in c++. A similar principle applies to HTML. We can create the boilerplate in VS Code using Emmet and the !
key.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html
But where does our book text go? It needs to go into the body tags of the boilerplate. While we’re at it, let’s change the <title>
tags inner HTML as well:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dracula</title>
</head>
<body>
<hr>
<h1>CHAPTER I</h1>
<h2>JONATHAN HARKER’S JOURNAL</h2>
<em>(Kept in shorthand.)</em>
<p><em>3 May. Bistritz.</em>—Left Munich at 8:35 P. M., on 1st May, arriving at Vienna early next morning; should have arrived at 6:46, but train was an hour late. Buda-Pesth seems a wonderful place, from the glimpse which I got of it from the train and the little I could walk through the streets. I feared to go very far from the station, as we had arrived late and would start as near the correct time as possible. The impression I had was that we were leaving the West and entering the East; the most western of splendid bridges over the Danube, which is here of noble width and depth, took us among the traditions of Turkish rule.</p>
</body>
</html>
The preview doesn’t change, but the document is now HTML5 compliant. Nice! Note that the title is now displayed in the tab at the top.
Boilerplate HTML 5 Tags
- Some of the auto populated tags include:
- The Charset meta tag: Which character set we are using. Older character sets may not have letters for certain languages, or certain emoji.
- UTF-8 has the best compatibility
- The Viewport meta tag: is used for mobile devices to indicate which device sizes the website was designed to run for, and is important in mobile-first design.
- The HTTP-equiv tag is used for supporting legacy Internet Explorer browsers.
- Other meta tags can be used as well. These are typically read by robots and used for things like putting the correct search term on Google. SEO (Search Engine Optimization) is very important in the modern web.
Why we use CSS
CSS is used to apply styles to our elements. This changes the way that they are rendered on the page, so they they no longer take on the default HTML look, which is reminiscent of the 90s internet.
- Before CSS, we could only style elements with HTML attributes
- This is slow and not very flexible
- What if we want to reuse the same styles across elements? Across pages?
- This is slow and not very flexible
Where to add CSS code?
CSS code can be applied inline, internal, external
- If a style conflict arises, these are the places you need to check!
Inline
- Embeds CSS code in an HTML tag using the
style
attribute. - e.g.
<hr style="width:50%;text-align:left;margin-left:0">
- Tedious and repetitive - need to apply style on a per element basis
Internal
- Write CSS code inside of the
<style>
tags in the<head>
of the HTML document. - Applies styles on a page-by-page basis
- this is rarely optimal, we typically want site-wide styles
- e.g.
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
color: red;
text-decoration: none;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#"> Go back to the top!</a>
</body>
</html>
External
- All of your CSS is stored in a separate file called, e.g.
css/style.css
- We add a link to this style sheet in the
<head>
of the HTML:
<link rel="stylesheet" href="css/style.css">
- We can add this link to all pages site-wide
What does a rule look like?
The basic CSS syntax is:
selector { property : value; }
who what how
- who do we want this to apply to, what do we want to change, how do we want to change it
How are rules applied? Cascading
Cascading means styles inherit from other styles, i.e. “cascading down”.
- Often rules will conflict, so we need to determine which style will apply, based on factors:
- Importance: you can specify important tags with
!important
- Specificity: more specific rules (e.g. id’s) overrule less specific (e.g. classes, elements, or inherited)
- Calculated with a complex scoring system.
- generally:
- id > class > tag > inherited
- Source order: rules later in the code will overrule earlier ones
- If you are linking multiple style sheets, more general ones should come first, more specific ones later
- Importance: you can specify important tags with
- It is sometimes tough to compute precedence in our head!
- General heuristic: more specific rules will override less specific rules
- When learning and debugging: Use browser debug tools to see which styles are applying
Here’s a good source for info on cascading
Cascading example
Copy the following code into index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<style>
hr {
color: green;
}
</style>
<title>Welcome</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<hr>
<p>This is my homepage on the world wide web</p>
<p class="paragraphs">I can't figure out these CSS rules!</p>
<p class="paragraphs" id="paragraph3"> Why is this so complicated?!</p>
<p style="color:blue;"> What color will this be?!</p>
</body>
</html>
And the following code into style.css
body {
color: red;
background-color: grey;
}
.paragraphs {
color: yellow;
}
#paragraph3 {
color: magenta;
}
hr {
color: black;
border: solid 10px;
}
h1 {
background-color: black;
}
This shows how rules can be placed in three different places, and how they apply, both through inheritance (body inherits through to paragraph), by order (the internal style sections comes after the linked, so it will overrule it), and specificity (id overrules class overrules inherited). Fire up the debugger (F12), use the inspector, and trace how the CSS rules are overruled!
Debugger
In FireFox, you can open up the debugger with F12
. You can use this to select elements and see which styles are applying:
Default Style Sheet
Every page has styles, unless you specify changes they uses the default style. This is what causes default styled HTML to look like it’s from the 90’s. It can be useful to understand these default styles to know which changes to make:
- Here is a link to descriptions of the default values for a CSS
- Here is a link to the CSS in a style sheet file.
Syntax Checking
VS Code checks your syntax as you type, look for common errors (bottom left)
Organization
It’s best practice to Alphabetize Selectors and Properties - it will make yours or your colleagues life easier at some point Alternately, you may wish to group selectors by type, e.g. Tag, Class, ID
Comments
CSS uses C-style line comments:
h1 {
/* Make h1's red. */
color: red;
}
Where to get help?
This is a great tutorial, which acknowledges how wonky CSS can be sometimes:
Next let’s examine some of the details which make CSS so powerful (and also so tricky!)
Selectors
Elements can be selected by a number of rules. Some rules select individual elements, others select groups. Further, some inheritance rules apply which will propagate through to children elements.
Tag Selectors
Also known as element selectors. Applies style to all tags of that type. Very broad strokes.
h1 {
color: red;
}
This code will apply to all <h1>
tags.
Class Selector
Selects all elements of a given class.
- You can assign elements to a class in the HTML code using the HTML attribute
class="<class_name>"
- Multiple classes may be applied to a single object, separated by a space.
- it’s best practice to only use one custom class, and attach others as needed by frameworks such as Bootstrap, e.g.
class="<custom_class> <bootstrap_class>
- it’s best practice to only use one custom class, and attach others as needed by frameworks such as Bootstrap, e.g.
- target them in CSS with the selector:
.<class_name>
e.g.
...
<h1 class="headers"> Lab 3 </h1>
...
.headers {
color: red;
}
This will apply to all tags that have the headers
class assigned to the class list.
Id Selector
Selects the single element identified with a particular ID.
- You can assign elements an ID in the HTML code using the HTML attribute
id="<name>"
. - ID’s need to be unique, that is, only one element in a page may have a given ID.
- Target this element in CSS with the selector
#<id>
e.g.
...
<h1 id="my-heading"> Lab 3 </h1>
...
only ever one id selector per object
#my-heading {
color: black;
}
Pseudo Classes
Some elements have pseudo-classes that are active only during interaction, e.g. link hover e.g.
a:hover {
color:red;
}
Combining Rules
We can very specifically target an element by combining rules
- If we want to combine multiple selectors to select for a single element or set of elements, combine them without spaces
e.g. apply this style to target all h1’s that have the header class:
h1.header {
color: red;
}
We can also find elements which are descendants of an element:
e.g. select all <p>
elements that are children of a <section>
tag:
section p {
color: yellow;
}
There are other rules, for example selecting a particular child or sibling. Check out this reference for more info.
Simple is better - Before you commit to complicated combinational logic, decide if a custom class or ID would be better! Make your life easier and your code more traceable wherever possible!
Common Properties and Values:
Color:
- the
color
andbackground-color
properties specify the foreground and background colors respectively - color values can be given by keyword, or hex of the style:
#RRGGBB
- e.g. red is
#FF0000
, but will be very hard on the eyes, as we’ve seen! - When starting, it’s strongly recommended not to find colors by experimentation, instead look at a palette app:
- e.g. red is
- If you can’t tell if your styles are applying, start by applying something radical, like
background-color: magenta
.- Thus you know the sheet is linked properly!
Borders:
- the
border
property- generalized properties apply to the whole border
- specialized properties for individual sides,
- A shorthand style that defines many properties and values in one line
- general properties:
border-style: solid;
- Overall style. values are keywords - dotted, dashed, solid, double, groove, ridge, inset, outset, none, hiddenborder-width: 5px;
- values are in px, e.g. 5px, 15px. You can also define the top, right, bottom and left widths in one statement. (clockwise from 12 o’clock)border-color: red;
- values are colorsborder-radius: 10px;
- curves the edges. value in px, e.g. 5px
- specific properties:
border-top-style: dashed;
- changes the style of the top sideborder-left-color: blue;
- changes the color of the left side- Many other combinations are available
- shorthand style
- defines the width, style and color properties in one shot
border: width style color
border: 5px solid black;
- defines the width, style and color properties in one shot
e.g.
/* awful, awful style, but effective for seeing changes! */
p {
border-style: dotted dashed solid double;
border-color: blue;
border-top-width: 10px;
border-radius: 3px;
}
Sizing:
- instead of relying on an objects content to dictate size, set it manually.
- May not always work for all elements depending on Display settings.
width
max-width
height
max-height
- the units can be in px, percent, mm.
0
doesn’t need units. Learn more about the many units here
- the units can be in px, percent, mm.
Text:
font-family
: values are strings, with later values being fallbacksfont-size
: can use many units, rem is probably safest, where one REM is the size of anM
at the root scaling. 1 rem = 16pxfont-weight
: numeric, where thinner to thicker ranges from 100 to 900text-decoration
: underline, line-through, overline, etc. e.g.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
p {
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
font-weight: 300;
}
Div and Span
Div and Span are HTML elements that exists only as a container for containing other elements
- can be used to apply CSS to elements
<div>
a vertical container, blocking<span>
is a horizontal container, non-blocking (inline)
Box Model
The total space that an object takes is more than you might think, based on the CSS Box Model:
- Individual objects have a required size, (implicit or defined
width
andheight
), and as they expand objects around them are pushed out of the way. - But the total sizes of the element add the margin, padding, border and content to give the total dimensions of the element.
- Margin and padding are buffer zones around the border.
Addition example:
-
10px border + 20px padding + 20px margin = 50px * 2 sides = 100px + content
-
When setting margins, padding and border, the same four-sided shorthand can be used as we saw in borders, clockwise from the top:
- top, right, bottom, left
- remember: clockwise from 12 o’clock
- if only 1 value is given, it expands as (top=1, right=1, bottom=1, left=1)
- if 2 values are given, they expand as (top=1, right=2, bottom=1, left=2)
This box model even applies to the body tag, which has a default non-zero margin.
- This is why by default elements aren’t positioned in the upper left of the page
-
you will need to set this to 0 if you need something in the corner, like a header!
- Padding will stretch the background color, whereas margin will add white around it
Flow and the CSS Display Property
The Display property dictates how elements flow around this element:
display: block;
- push the next content to the next line. e.g. the default behaviour of<div>
,<p>
display: inline;
- let info come beside it. e.g. the default behaviour of<a>
,<em>
display:inline-block;
- A hybrid. It’s like inline, but it can block a bit of height too. e.g. the default behaviour of<image>
display:none;
- don’t display it. It’s gone. Not just hidden. Items will not flow around it either, just take up it’s place.visibility: hidden;
will instead allow items to flow around it.
- There’s also a new flexbox model, designed to act as an alternative to this, but I think Bootstrap (which we’ll discuss later) accomplishes this better.
CSS Positioning
Positioning is derived from HTML and CSS
- HTML should govern hierarchy and order
- order means later elements are added to the flow after earlier elements
- Hierarchy means child elements appear “inside” of parents
- Flow still applies
- CSS positioning beings after HTML rules are complete
- Positioning rules exist
- Depending on display properties, sometimes elements overlap
- Z-index refers to the “depth” of objects, with higher numbers appearing on top, and lower or negative numbers behind.
<div> <h1> <span> Hello </span > More text</h1> </div>
Positioning Rules
Positioning can be derived from the HTML, or overridden, using the position
property, with values:
position: static;
- use the HTML rules for positioningposition: relative;
- from the static position, offset the element by a specified x,y coordinate value, eg. (3, 5).- does not disrupt flow
position: absolute;
- position the element by absolute coordinates relative to its parent- does disrupt document flow
position: fixed;
- always in the same place as we scroll, e.g. a fixed header bar
Centering Elements
A common operation which can be harder than you might think!
For non-blocking elements, the following may work:
text-align : center;
For blocking elements:
max-width : 1000 px; /* or whatever is appropriate*/
margin : 0 auto 0 auto; /* automatic centering left and right *
You could also have instead done:
margin: 0 auto;
Which will apply the 0 to both top and bottom, and auto to both left and right.
Centering an image as particularly tricky. The easiest way is to set display to block type, and then center it:
img {
display: block;
margin : 0 auto;
width: 50%;
}
Floating and Clearing
Floating allows images to “float” around text.
- values: none, left, right are common
If something floats by default, you can remove float with the “clear” property. eg:
float: left;
clear: left;
Floating can be overused, easy to abuse. Be careful. Some help with Float
For the lab project, we are going to be making a multi-user to-do list application. The final version of it will look similar to this:
However, this version incorporates the bootstrap library, which we will look at next week.
Without it, we instead have the somewhat more humble:
Your assignment this week is to create this version of the application. With CSS and HTML.
Note: if we take away all of the styling and leave only the HTML, we get:
Recommended approach
- Start by implementing the HTML only version
- How many pages are there? What are their names?
- Look at the pictures and identify potential HTML elements
- Is there one form? Multiple forms?
- Next implement the custom CSS
- Which elements have changed due to custom CSS?
- How might you implement this change?
Submission:
- This lab will be demoed by interview either in the week of 9/14 or 9/21.
Frequently asked questions:
How do I add default text to the text inputs?
- Try the “Placeholder” HTML attribute
Does the form need any functionality?
- Not yet. We just need the layout and basic styling for now.
Where’s the gear icon from?
- Here: Bootstrap gear icon
- Copy and paste the SVG code into your HTML as if it were an element
A. Yu. The Complete Web Development Bootcamp. Udemy.com
-
Adam’s Comments: An excellent overview of the Node Stack we’ll be looking at in this course. (And it regular goes on sale for about 30 bucks!) For this lab, I particularly borrowed the bricks/decoration/electricity analogy, marking up a classic text exercise, mail form, and the following exercise, which you may want to do:
-
Reference Document
- Create a live HTML document which serves as a massive reference sheet that includes an example of all the things you’ve learned to date
- You can refer back to this later on!
- I did this in all of my courses in University, trying to take a one-page reference sheet away from each one. This was especially helpful in courses that built on previous courses,