Lecture 2: HTML and CSS

BAA1104 - E-Portfolio and Business Analytics Challenges

Damien Dupré

How Websites Work?

Back-end: “SERVER”

A web server handles your Domain Name System (aka DNS) requests for a website, does background processing and retrieval (e.g. from databases), finds .html,.css, .js files, plus images, fonts, audio etc., then serves it all to your browser using http.

Front-end: “CLIENT”

A ‘client’ (i.e., usually a web browser) receives files from the server using using http and displays the pages you requested by rendering the HTML, applying CSS styles to the HTML elements, and reading (parsing) JavaScript code.

Your Turn: Observe your Web Browser

1. Open your web browser (Chrome, Firefox, Edge, …)
2. Go to the URL https://damien-dupre.github.io/
3. In the menu of your web browser, find “Developer Tools” (Chrome), “Web Developer Tools” (Firefox), or equivalent
4. Click Network and Reload/Refresh the page

See, all the documents downloaded to display the page!

03:00

Enter HTML and CSS

HTML and CSS

In order to really fine-tune the appearance of our site, we need to dive a bit into the world of HTML and CSS.

The building blocks of web pages

HTML (Hypertext Markup Language) is a markup language that tells web browsers how to structure web pages. You can think of HTML as the skeleton of a web page. It gives authors the means to create elements like headings, text, tables, lists, add media, etc.

Source: Adapted from Nicolas Karasiak

Note: Markdown is also a markup languages but it is a bit easier for humans to write and read than HTML. HTML is more expressive and allows for customization that is difficult or impossible to do in Markdown.

The building blocks of web pages

CSS (Cascading Style Sheets) is a programming language that allows you to control how HTML elements look on a web page. You can think of CSS as the outfit that is styling the skeleton. It allows authors to control aspects such as the colors, layout, and font style.

Source: Adapted from Nicolas Karasiak

Browser Specific Internal Style Sheet

Your browser will style HTML documents using an internal style sheet, which ensures that headings are larger than normal text, links are highlighted, lists and tables are structured correctly, etc.

CSS adds style to web page renderings

CSS allows website developers to add additional styling to web browser defaults. Otherwise, websites would be pretty boring to look at (and they’d all generally look the same).

Light Intro to HTML

HyperText Markup Language File

An HTML file (HyperText Markup Language file) is a plain text document used to create and structure the content of a web page.

It contains the essential code that browsers interpret to display text, images, links, videos, and other elements on a webpage.

The file typically has a .html or .htm extension.

In essence, an HTML file serves as the backbone of a website, working in tandem with CSS (Cascading Style Sheets) for design and JavaScript for functionality to deliver a complete web experience.

Role of an HTML File

1. Foundation of a Web Page:

HTML provides the basic structure of a webpage, defining elements such as headings, paragraphs, links, lists, and multimedia content.

2. Organisation of Content:

HTML uses tags (e.g., <h1>, <p>, <img>, <a>) to organise and label different sections and types of content, making it clear how they should appear and behave.

3. Linking Resources:

It can link to external resources such as CSS files for styling, JavaScript files for interactivity, and multimedia assets like images or videos.

4. Navigation:

HTML is used to create navigational structures, such as menus and hyperlinks, enabling users to move between pages on the site or to external resources.

5. Semantic Markup:

Modern HTML includes semantic tags (e.g., <header>, <article>, <footer>) that provide additional meaning and improve accessibility and search engine optimisation (SEO).

Open HTML Files and Sources

Method 1: Use your webrowser

Right-click on the webpage in your browser and select “View Page Source” (name may vary by browser). Then, copy the source code displayed, open Notepad/TextEdit, and paste it in to view or edit.

Method 2: Use your most basic text editor

• Notepad: Just open the file
• TextEdit: Choose TextEdit > Settings, then click “Open and Save” tab. Tick “Display HTML files as HTML code instead of formatted text”.

Method 3: Open it with your coding tool

e.g., Spyder, JupyterLab, PyCharm, VS Code, Neovim, …

Why Plain Text?

• Version control (e.g., Git) works well (efficient, differences between versions are easy to understand) with plain text documents, .docx et al. not so much

• Future proof

• Can easily manipulated with external tools

• …

Your Turn: Structure of an HTML file

1. Go to the following URL with your web browser:

https://damien-dupre.github.io/my-first-web-page.html

2. Display the source code

3. List the different HTML tags

05:00

Your Turn: Structure of an HTML File

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body bgcolor="#BBCCFF">
    <h1>Welcome to my first webpage</h1>
    <p>I hope you will like this page.</p>
  </body>
</html>

• All HTML documents must start with a document type declaration: <!DOCTYPE html>.

• The HTML document itself begins with <html> and ends with </html>.

• The visible part of the HTML document is between <body> and </body>.

Your Turn: Modify an HTML File

• Copy the following HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body bgcolor="#BBCCFF">
    <h1>Welcome to my first webpage</h1>
    <p>I hope you will like this page.</p>
  </body>
</html>

• Go to https://jsfiddle.net/, paste it in the HTML box, and Click the RUN button

• Change the text and observe your changes with the RUN button

05:00

Homework Exercise: Prepare your Content

Write a piece of text for each of the following pages:

• About Me (pubic professional description of yourself)
• Project 1 (a first project that you want to describe and present)
• Project 2 (a second project that you want to describe and present)
• Project 3 (a third project that you want to describe and present)

Find pictures of yourself or that represents you to be published online and view by recruiters.

HTML Code

An HTML5 document consists of 4 core elements:
doctype, html, head, and body
All websites have the following fundamental structure!

<!doctype html>
<html>
  <head>
    <!-- some **information** the browser needs -->
  </head>
  <body>
    <!-- what actually **appears** in the browser -->
  </body>
</html>

HTML Code Encoding

Sometimes you will see the term UTF-8 in the HTML code, it is the encoding

See here for more details on (character) encoding?

See also here

My only rule: Use UTF-8

HTML Code

Content is between matching pairs of HTML tags

What you see:

<header>The box at the top</header>

<h2>A heading element</h2>

<p>Some text in a paragraph</p>

<footer>The box at the bottom</footer>

What you get:

The box at the top

A heading element

Some text in a paragraph

The box at the bottom

HTML Code

Some tags don’t need ‘closing’ e.g. the img tag

What you see:

<img src="imgs/my-lovely-horse.png" alt="nice horse">

What you get:

The only other ‘self-closing’ tags you might use are:

<br> <!-- a line break -->

<input type="checkbox" name="horses">
<input type="radio" name="cats"> 

HTML Code

A hyperlink goes to another page, a separate website, or can jump to a specific section on the same page, marked by an HTML id attribute:

<a href="another-page.html">Go to another page</a>

<a href="http://xkcd.com">Go to another website</a>

<a href="#my_section">Jump to an ID on the page</a>

<section id="my_section">
  <p>The link above will jump to this section</p>
</section>

HTML Code

Important

Most HTML tags are nested inside other HTML tags (watch your indentation!)

<header>
  <h1>The main heading</h1>
</header>  

<section>
  <h2>A section heading</h2>
  <p>Some text in a paragraph</p>
</section>

HTML Elements

Elements comprise start tags and end tags that render some form of content in a particular way.

The basic anatomy of an HTML element:

Remember to close out tags from the inside-out to avoid unexpected renderings.

Nested HTML Elements

Tags can be used within tags:

Important

Take extra care to never skip (or incorrectly type) an end tag!

Some elements will still display correctly if you forget an end tag, but you cannot rely on this. Forgotten end tags will cause you headaches as you try troubleshoot unexpected results and errors.

Commonly Used HTML Tags

Browse a complete list of HTML tags.

Tag	What it does
<div></div>	defines a division or section in an HTML document
<h1></h1>	create a first-level heading (largest)
<h6></h6>	create a sixth-level heading (smallest)
<p></p>	begin a new paragraph
<strong></strong>	bold text
<em></em>	italicized text
<img></img>	present an image
<a></a>	define a hyperlink
<br>	add a line break (empty element)
<span></span>	an inline container used to markup part of a text or document

Note: Some HTML elements have no content (e.g. the <br>, or “break” element). These are called empty elements and do not have an end tag.

HTML Comments

You can add HTML comments in your code:

<!-- The figure tag is for image/captions boxes -->

<figure>
  <!-- The img tag goes here -->
  <!-- The figcaption tag goes here -->
</figure>

Text between <!-- and --> won’t show on screen.

Important

My slides are using a Fira Font type, which makes the ligature between corresponding signs but <!-- and --> are actually < ! - - and - - > without the spaces.

HTML Cheat Sheet

If you spot any errors in this cheat sheet, please contact us – info@websitesetup.org

Your Turn: Modify an HTML File Localy

1. Download the Repository (if not done): https://github.com/damien-dupre/damien-dupre.github.io
2. Find the file about.html in the docs folder
3. Modify this file to:

• Line 148, replace the h1 title with your name
• Line 168 to 170, modify the text with your own description
• Line 167, replace the picture with another image found on the web (your picture or any other)

Then, open this page on your web browser!

Note

• With the Windows OS, after downloading the repository, Click “Extract all” to unzip it.
• Use TextEdit (MacOS) / Notepad (Win) to open and modify the html code.
• In the TextEdit app on your Mac, choose TextEdit > Settings, then click Open and Save. Select “Display HTML files as HTML code instead of formatted text”.

05:00

Light Intro to CSS

CSS Rules

CSS is a rule-based language, meaning that it allows you to define groups of styles that should be applied to particular elements or groups of elements on a web page.

For example, “I want all level one (<h1>) headings to be green text with a bit of extra space between each letter” could be coded as:

CSS Rules

• Selectors select the HTML element(s) you want to style (e.g. level one headings, <h1>)

• Declarations sit inside curly brackets, {}, and are made up of property and value pairs. Each pair specifies the property of the HTML element(s) you’re selecting (e.g. the color property of the element <h1>), and a value you’d like to assign to that property (e.g. green)

• A property and its corresponding value are separated by a colon, :. Declarations end with a semicolon, ;

CSS Rules

A CSS rule inside {} can contain multiple CSS declarations:

main {
  margin: 10px; /* 10 pixels all round */
  width: 80%; /* always 80% of the screen width */
  background: #eee;
  font-family: Tahoma, Helvetica, sans-serif;
}

or be on one line (harder to read when developing):

main { margin: 0 auto; width: 50%; }

main{margin:0 auto;width:50%;}input{background:yellow;width:100px;}

Types of Selectors

There are many different CSS selector types, but the following will get you pretty far (though you can learn more about all the different categories of CSS selectors here).

• Element selectors: selects all HTML elements with the specified element name

• Grouping selectors: selects all HTML elements with the same style definitions

• ID selectors: uses the id attribute of an HTML element to select a specific element; id of an element is unique within a page, so the id selector is used to select one unique element

• Class selectors: selects HTML elements with a specific class attribute

• Universal selector: selects all HTML elements on the page

• Inline styling: (not a selector type, but an alternative way to apply CSS styling)

Element Selectors

Any HTML element can be used as a selector. The declarations specified apply to all HTML elements of that type.

CSS

h1 {
  color: green;
  letter-spacing: 5px;
}

HTML

<h1>My level one header will be styled</h1>
<h2>This level two header will not be styled</h2>
<p>Neither will this paragaph</p>
<h1>But this second level one header will be</h1>

Grouping Selectors

Group multiple element selectors together (separated by commas) if you want them all styled the same way.

CSS

h1, h2, p {
  text-align: center;
  color: purple;
}

HTML

<h1>My level one header will be styled</h1>
<h2>This level two header will be styled</h2>
<h3>This level three header will not be styled</h3>
<p>This paragraph will be styled</p>

Class Selectors

Attributes provide extra information about elements. They are always specified in the start tag and usually come in value/name pairs (e.g. attributeName="attributeValue"). We can use attributes (e.g. the class attribute) to apply targeted styling using class selectors.

Class Selectors

A class selector uses the class attribute of an HTML element to style that specific element. Class selectors are written using a . followed by the selector name, e.g. .selector. HTML elements can have more than one class, e.g. <p class="class1 class2">

CSS

.blue-italicized {color: blue; font-style: italic;}

HTML

<p class="blue-italicized">My first paragraph is styled</p>
<p>But my second paragraph is not</p>
<p>We can use span tags to target <span class="blue-italicized">parts of an element</span> as well</p>

Other Selector Types

• ID Selectors
• Universal Selector
• Inline Styling

An ID selector uses the id attribute of an HTML element to style that specific element. IDs must be unique within a page and therefore can only be used to select and style one unique element. ID selectors are written using a # followed by the selector name, e.g. #selector.

CSS

#para1 {color: red; text-align: center;}

HTML

#| echo: true
<p id="para1">My first paragraph is styled</p>
<p>But my second paragraph is not</p>

The universal selector selects all HTML elements on the page. It is written using only an asterisk, *.

CSS

* {text-align: center; color: orange;}

HTML

<h1>My level one header will be styled</h1>
<h2>This level two header will be styled</h2>
<p>This paragaph will also be styled</p>

You may define styles directly inline using the style attribute. However, it’s best practice to use these sparingly as it mixes content (HTML) with presentation (CSS) and cannot be reused with other elements like defined CSS rules can.

HTML with inline styling

<p>This is a normal paragraph</p>
<p style="color: red; font-style: italic;">This paragraph has inline styling</p>
<p>Here, only the word <span style="color: red; font-style: italic;">paragraph</span> is styled</p>

Other Selector Types

the selector can combine 2 elements:

main { /* 1 element: targets tag main */
  margin: 0 auto;
}
aside.sidebar { /* 2 elements: targets tag aside with class sidebar */
  width: 50%;
}
form#myForm { /* 2 elements: targets tag form with id myForm */
  background: #666;
}

Other Selector Types

Important

• IDs should always be unique! (CSS #NameOfID)

• IDs are often used to identify things in JavaScript

• classes can be applied to multiple tags (CSS .NameofClass)

• Classes are often used to style similar things in CSS

Conflicting CSS Rules

It is often the case that more than one CSS rule will point to the same element. For example, say you have a style sheet and HTML that look like the following:

CSS

* {color: orange;}
h1 {color: blue;}
.green-text {color: green;}

HTML

<h1>This is my header</h1>
<p>This is my paragraph with <span style="green-text">some green text</span></p>

In this case, we have a universal selector that styles all of our text orange, but we also have an element selector that colors our <h1> elements blue and a class selector that is applied inline to color a subset of text green.

How do you know which style will be declared and applied to each of our HTML elements?

CSS Specificity

Specificity can be complicated (especially when you consider all the other types of selectors we haven’t covered in these slides).

For the purposes of this workshop and getting started on your CSS journeys, a general rule of thumb is as follows: Inline styles are the most specific and will override ID selectors, which will override class selectors, which will override element selectors, etc.

The order that rules are written in your stylesheet matters as well, since rules are read top to bottom, a directly competing rule farther down your stylesheet will take precedent.

CSS Specificity

Inline Styles

IDs

Class Selectors

Element Selectors

Universal Selectors

CSS Stylesheet in HTML Code

the stylesheet needs to be linked in the head section:

<link rel="stylesheet" href="path/to/styles.css">

Technically, it can go between style tags directly in the head section, but it should really go into an external file

<style>
  body {
    background: beige;
  }
</style>

References

• The birth of the Web

• A history of HTML

• A Brief History of CSS

• W3C CSS Syntax Module Level 3

• Learn HTML

• Learn CSS

• Learn how to build websites

• Introduction to JavaScript

• Introduction to HTML

• Introduction to CSS

• JavaScript basics

• W3Schools HTML

• W3Schools CSS

• W3Schools Borders

• W3Schools: Position Property

• MDN: Positioning

References

Huge thanks the following people who have generated and shared most of the content of this lecture:

• Fania Raczinski: Web Design & Development

• Sam Csik: Customizing Quarto Websites

Your Turn: Create your Website

1. Go to https://html5up.net/.

2. Download the template of your choice for free.

3. Fill the template with your informations and observe the changes on your local computer.

Important

This will not be accepted as a submission to the module’s assignment but you will be able to use the content created in your future Quarto website.

However, we will use it next week in our lecture about GitHub.

20:00

Thanks for your attention and don’t hesitate to ask if you have any questions!
@damien_dupre
@damien-dupre
https://damien-dupre.github.io
damien.dupre@dcu.ie