A web server handles your DNS requests for a website, does background processing and retrieval (e.g. from databases), finds .html,.css, .jsfiles, plus images, fonts, audio etc., then serves it all to your browser using http.
Front-end: “CLIENT”
A ‘client’—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.
In the menu of your web browser, find “Developer Tools” (Chrome), “Web Developer Tools” (Firefox), or equivalent
Click Network and Reload 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 language1 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.
1Markdown is also a lightweight markup languages – 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.
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 file and access to its source
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 File > Open, then select the document. Click Show Options at the bottom of the TextEdit dialogue, then select “Ignore rich text commands”.
Method 3: Open it with your coding tool
e.g., Spyder, JupyterLab, Jupyter Notebook, 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
<!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>.
Exercise 3: Modify of 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>
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 SLIDE !!
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 Code
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.
My slides are using a Fira Font type, which makes the ligature between corresponding signs but <!-- and --> are actually < ! - - and - - > without the spaces.
HTML elements
Elements comprise start tags and end tags that render some form of content in a particular way.
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.
Nested HTML elements
Remember to close out tags from the inside-out to avoid unexpected renderings.
Nested HTML elements:
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.
HTML Cheat Sheet
If you spot any errors in this cheat sheet, please contact us – info@websitesetup.org
Replace the picture with another image found on the web (your picture or any other)
Then open this page on your web browser!
Note: 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
Selectorsselect 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):
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>
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 is the element to be styled:
main { /* targets tag main */margin:0auto;}aside.sidebar { /* targets tag aside with class sidebar */width:50%;}form#myForm { /* targets tag form with id myForm */background:#666;}
Other selector types
⚠️ IMPORTANT SLIDE !!
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:
<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>
Keep Your Code Tidy
TIDY CODE
⚠️ IMPORTANT SLIDE !!
indent all your code as you go, with 2 spaces!
HTML in .html files (<angle brackets>)
CSS in .css files ({curly braces})
KEEPING CODE TIDY WILL HELP YOU A LOT
TIDY FILES
⚠️ IMPORTANT SLIDE !!
YES all file & folder names lower-case!
YES all resized images in an images folder!
NOspaces in filenames (incl. images etc.)!
NO unused, old files in folder (e.g. photoshop files)!
Fill the template with your informations and observe the changes on your local computer.
Notes: 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.
If you spot any errors in this cheat sheet, please contact us – info@websitesetup.org
