Introduction

How Web Pages Work

The internet and its world-wide web has had a profound impact on all of our lives. It has put an unimagineably large wealth of [mis]information at our fingertips, connected us to people on the other side of the plannet, and fundamentally changed how day-to-day business is conducted in the 21st century. But have you ever stopped to think about how your browser is able to show you a complex, feature rich, and eye-catching page, seemingly out of the ether?

1. Browser Requests Page

First, the browser looks up and connects to the server you’re trying to access. It then asks the server for the specific page you’re trying to load, using the HyperText Transfer Protocol (HTTP), which is a specification of how the messages between the web-browser and the web-server are structured. We’ll be covering the HTTP protocol in much more detail in a later workshop.

2. Web Server Sends Response

The web-server then responds with instructions on how to build the page. There instructions are written in HTML, CSS, and JavaScript, and these are the three technologies we will be teaching you how to write today.

The Roles of HTML, CSS and JavaScript

HTML: Hypertext Markup Language; Describes the structure and content of the webpage, such as sections, headings, paragraphs, etc.

CSS: Cascading Style Sheets; Provides a means to modify the appearance of the webpage, such as controlling layout, colours, and font styles.

JavaScript: Allows interactivity on webpages by allowing website authors to run code within the user’s browser.

HTML – Describing Structure

Introduction

An essential component of any webpage, HTML allows you to describe the page’s content, and overall structure.

All valid HTML documents have a set structure, shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- information about the document goes here -->
    <meta charset="UTF-8">
    <title>My Awesome Webpage</title>
</head>
<body>
    <!-- visible content goes here -->
</body>
</html>

Syntax

The syntax of HTML is almost identical to that of XML, though modern HTML5 is specified as a separate standard. HTML is composed of:

Comments
Tags
Tag attributes
Static text

Comments

Comments in HTML are started by writing . The browser ignores comments entirely, they’re useful for explaining your code to others, or even yourself. 😛

<!-- This is a comment -->
<!-- comments can span multiple lines,
     like this -->

Attributes

Some tags allow you to specify attributes (additional information used to render the tag). For example, you can specify the URL to navigate to when the user clicks a link:

<a href="https://stirlingcomputer.club">USCC Website</a>

Here, the <a> tag creates an anchor (a link). href is the attribute name, and it has the value https://stirlingcomputer.club. The displayed link text will be USCC Website. This code renders as:

USCC Website

Static Text

Text can be placed anywhere inside the document, but how it’s displayed depends on which tags surround it.

By default, whitespace in text is consolidated into a single space:

<p>This     is a
test</p>

This is a test

If you’d like to break a line early, use the <br> tag. If you’d like to specify the spacing yourself, use the <pre> tag:

<pre>
This is line 1
This        is line     2
</pre>

This is line 1
This        is line     2

Basic Structure

All modern HTML documents have this structure:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- information about the document goes here -->
    <meta charset="UTF-8">
    <title>My Awesome Webpage</title>
</head>
<body>
    <!-- visible content goes here -->
</body>
</html>

<!doctype html>: specifies this is an HTML document
<html lang="en">: The <html> tag is the root tag, it surrounds all of the content. The lang attribute specifies the document language (en = English)
<head>: The <head> contains information about the document, much like a letter head or book’s title page. Most of this content is not directly shown to the user, but is used by the browser to read the document correctly, fetch external resources such as style sheets and / or scripts, etc

<meta charset="UTF-8"> Sets the document’s characterset to Unicode (UTF-8). This allows all unicode characters to be used in the document
<title>My Awesome Webpage</title>: Sets the document title (displayed in the browser’s title bar and / or tab)
<body>: Surrounds all visible content of the document. The majority of your content will go here

Common Head Tags

These tags should be placed in the <head> section of the document, and control how the browser reads and interprets the HTML page:

<title>
- Defines the title of the HTML document. It appears in the browser’s title bar or tab.
<meta charset="UTF-8">
- Specifies the character encoding for the document. UTF-8 is widely used and supports a broad range of characters.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Sets the viewport properties, ensuring proper rendering on various devices by adjusting the initial zoom level.
<meta name="description" content="Brief description of the page">
- Provides a concise description of the page’s content, often displayed in search engine results.

<meta name="keywords" content="HTML, web development, beginners">
- Lists keywords relevant to the page’s content, helping search engines understand its context.
<link rel="stylesheet" href="styles.css">
- Links an external CSS stylesheet to the HTML document, allowing for styling and layout adjustments.

<style>
- Contains inline CSS styles for the document, allowing for specific styling without an external stylesheet.
<link rel="icon" href="favicon.ico" type="image/x-icon">
- Specifies the favicon, a small icon displayed in the browser’s address bar or tab.

<link rel="canonical" href="https://example.com/canonical-url">
- Defines the canonical URL, indicating the preferred version of a page to search engines in case of duplicate content.
<script src="script.js"></script>

Links an external JavaScript file to the HTML document, providing dynamic functionality and interactivity. Without the src attribute, you can specify the JavaScript code inline, within the tag itself.

<base href="https://example.com/">
- Sets the base URL for all relative URLs within the document, providing a reference point for resource links.

Body – Defining the Page’s Content

As noted earlier, the <body> contains the document’s visible content.

Inline vs Block Elements

Some elements, like <p>, <section>, and <ul> are considered “block elements”. This means they cause a break in the flow of the text. For example:

This is a <p>test</p> of paragraphs.

This is a

test

of paragraphs.

Other elements, such as <strong>, <em>, and <u> render inline (I.E. they don’t interrupt the flow of text):

I <em>love</em> writing <strong>HTML</strong> code!

I love writing HTML code!

Common Body Tags

These <body> tags contribute to structuring and presenting content within the main body of an HTML document. Customize and combine them as needed for your specific web development projects.

<h1> to <h6>
- Header tags for defining headings. <h1> is the largest and <h6> is the smallest.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<p>
- Defines a paragraph. Used to structure and separate blocks of text.

<p>Paragraph 1</p>
<p>Paragraph 2</p>

Paragraph 1

Paragraph 2

<a href="https://example.com">Link Text</a>
- Creates a hyperlink to another web page or resource.

Here is a <a href="https://stirlingcomputer.club">link to our website</a>.

Here is a link to our website.

<img src="image.jpg" alt="Description">
- Embeds an image in the document, with alternative text for accessibility.

<img src="https://blindcomputing.org/logo/horizontal.png" alt="The Blind Computing logo">

<ul> and <li>
- <ul> defines an unordered list, and <li> represents list items within it.

<p>Shopping list</p>
<ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
</ul>

Shopping list

Milk
Eggs
Bread

<ol> and <li>
- <ol> defines an ordered list, and <li> represents list items with a specific order.

<p>Todo list:</p>
<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Publish website on Github Pages</li>
</ol>

Todo list:

Learn HTML
Learn CSS
Publish website on Github Pages

<div>
- A generic container used for grouping and applying styles to a section of content.

<div style="background-color: red; color: green;">
Some coloured text
</div>

Some coloured text

<span>
- Similar to <div>, but inline. Used for applying styles or scripting to a specific portion of text.

The sky is very <span style="color: blue;">blue</span> today.

The sky is very blue today.

<br>
- Inserts a line break, forcing text or elements following it to appear on a new line.

There should only<br>
be three words<br>
on each line.

There should only
be three words
on each line.

<hr>
- Represents a horizontal rule, creating a visible separation between content sections.

Page 1<hr>Page 2

Page 1

Page 2

<form>
- Defines an HTML form for user input. Commonly used with input elements, such as text fields and buttons.
<input type="text" placeholder="Enter text">
- Creates a text input field within a form.
<button>
- Defines a clickable button, often used within forms to submit or reset data.

<textarea rows="4" cols="50">Default text here</textarea>
- Generates a multiline text input area within a form.

Example

<form action="/update-profile" method="POST">
<label for="username-field">Username:</label>
<input type="text" id="username-field" placeholder="John Doe">

<label for="email-field">Email address:</label>
<input type="email" id="email-field" placeholder="[email protected]">

<label for="bio-field">Bio:</label>
<textarea id="bio-field" rows="5" columns="40"></textarea>

<button type="submit">Update profile</button>
</form>

<iframe src="https://example.com" width="600" height="400"></iframe>
- Embeds an inline frame, allowing the display of another webpage within the current document.

<iframe src="https://www.youtube.com/embed/gyIYQC5zuDQ" width="640" height="400"></iframe>

<table>

Defines the beginning of a table.

<tr>

Represents a table row. Should be used within the <table> element.

<th scope="row">

Defines a header cell within a table. Typically used in the first row or column to label the content. The scope attribute specifies whether this is a row or column header for accessibility.

<td>

Represents a data cell within a table. Contains the actual content of the table.

<thead>, <tbody>, <tfoot>

<thead> groups header content in a table.
<tbody> groups the main content of the table.
<tfoot> groups footer content in a table.

<caption>

Adds a title or caption to a table. It should be placed immediately after the opening <table> tag.

Example

<table border="1">
  <caption>Employee Information</caption>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Developer</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>Designer</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Johnson</td>
      <td>Manager</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total Employees</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

Employee Information
ID	Name	Position
1	John Doe	Developer
2	Jane Smith	Designer
3	Bob Johnson	Manager
Total Employees		3

Structural Tags

These structural tags provide a semantic and meaningful way to structure the content of a webpage. By using these tags appropriately, you enhance the readability, accessibility, and search engine optimization (SEO) of your HTML documents.

<main>
- Represents the main content of the document. It should not contain content that is tangential or related to the site navigation.

<header>
- Defines a header section usually containing the introductory content of a page, such as headings, logos, and navigation elements.
<footer>
- Represents the footer of a section or page, typically containing metadata, copyright information, links to related pages, or contact details.

<nav>
- Defines a navigation menu. It usually contains links to different sections or pages of the website.
<article>
- Represents a self-contained piece of content that could be distributed and reused independently, such as a news article, blog post, or forum post.

<aside>
- Represents content that is tangentially related to the content around it, such as a sidebar or a pull quote. It can also be used for content like related links or advertisements.

CSS – Styling and Themeing Elements

Introduction

While HTML describes the content of the document and how it is structureed, CSS tells your browser how to style said content.

Linking a Style Sheet in HTML

Syntax

CSS rules are laid out as follows –

<selector> {
    <directive> ;
    <directive> ;
    ...
    <directive> ;
}

<selector> {
    <directive> ;
    <directive> ;
}

and so on.

CSS Selectors

Each selector tells CSS which elements to apply the directives to. Selectors can be one of three main types - tag selectors, class selectors, and id selectors

tag selectors apply to all elements of a particular type. So we might, for example, have a CSS directive that applies to all img tags or all h1 tags, and so on.

class selectors apply to all elements which have declared themselves to be part of a specific CSS class. So a CSS rule applying to .someclass would apply to all elements that have class=someclass in their HTML attributes

id selectors apply to one and only one element. A CSS rule for #xyz would apply only to the HTML element with id=xyz in its attributes

tag selectors are useful when you are sure that all elements of some type need some common formatting. For example, all h1 elements should be of font xyz and of font-size n, etc.

class selectors are useful if there are multiple elements which need some common formatting, but are not all of the same element type. For example, we could have a rule that emphasises some text with a class selector of .emphasis. This allows us to emphasis text in any tag with a class=emphasis attribute, so this can be applied to h1 or a or p, etc.

id selectors are useful when we want to apply one-off rules. So if we had, for example, a logo image in the header for our webpage which we wanted to show at a small resolution, we could set a id=logoimg in the img tag for that particular image and a CSS rule with a #logoimg selector; this ensures that the CSS rule applies to only that element and that we don’t have to create entire class just for that one element.

The other kinds of CSS selectors are -

Adjacent sibling: h2 + p - Applies to all p elements that are siblings of h2 elements in the HTML tree

Child: li > ul - Applies to all ul elements that are directly a child of an li element

Descendent: ul a - Applies to all a elements that are directly or indirectly the child of a ul element

There are many other CSS selectors covering more specific use cases, but the ones covered are the most used/important. For full details on CSS selectors refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Common Properties

border: - The border property is used to create a border around an element on a webpage. You can specify the border width, style, and color. - border: 2px solid #3498db

fonts: - The font-family property sets the font for text on a webpage. You can specify multiple fonts in case the preferred one isn’t available. - font-family: 'Arial', sans-serif;

background: - The background property sets the background color for an element on a webpage. - background: #f2f2f2;

background-image: - The background-image property sets an image as the background for an element. - background-image: url('background.jpg');

text-align: - The text-align property is used to set the horizontal alignment of text within an element. - text-align: center;

font-size: - The font-size property sets the size of the text within an element. - font-size: 16px;

width: - The width property sets the width of an element. - width: 300px;

height: - The height property sets the height of an element. - height: 200px;

CSS Colour Values

CSS color- properties can be set in multiple ways -

Hexadecimal: - Colors can be represented using a hexadecimal code, a combination of six characters (0-9 and A-F) representing Red, Green, and Blue values. - color: #ff5733;

RGB: - The RGB (Red, Green, Blue) model allows you to specify colors by indicating the intensity of each color component. - color: rgb(255, 87, 51);

Color Names: - CSS provides predefined color names, such as red, blue, or green, making it easy to use without memorizing codes. - color: green;

RGBA: - Similar to RGB, RGBA includes an Alpha channel to control the opacity of the color, ranging from 0 (transparent) to 1 (opaque). - color: rgba(255, 0, 0, 0.5);

Gradients

CSS gradients provide a smooth transition between two or more specified colors. They allow you to create beautiful backgrounds or apply color effects without using images.

There are several types of CSS gradients -

Linear Gradients: - A linear gradient creates a gradient effect along a straight line. You specify the starting and ending points, and the browser generates a smooth transition between the colors.

.linear-gradient {
  background: linear-gradient(to right, #ff5733, #3498db);
}

Radial Gradients: - Radial gradients create a circular gradient effect, radiating from a center point to the outer edges. You can control the shape and size of the gradient.

.radial-gradient {
  background: radial-gradient(circle, #ff5733, #3498db);
}

Color Stops: - Color stops allow you to define specific color points within the gradient. You can create more complex gradients by adding multiple color stops.

.color-stops {
  background: linear-gradient(to right, #ff5733 20%, #3498db 50%, #2ecc71 80%);
}

Directional Gradients: - For linear gradients, you can specify the direction of the gradient using keywords like to right, to left, to bottom, to top, or angles like 45deg.

.directional-gradient {
  background: linear-gradient(45deg, #ff5733, #3498db);
}

Repeating Gradients: - The repeating-linear-gradient and repeating-radial-gradient functions allow you to create a gradient pattern that repeats at regular intervals.

.repeating-gradient {
  background: repeating-linear-gradient(45deg, #ff5733, #3498db 20%);
}

Spacing, Units

Pixels (px): - Pixels are a fixed unit of measurement. They provide a precise size, but they don’t scale well on different devices. - margin: 10px;

Percentage (%): - Percentages are relative to the parent element’s size. Useful for creating responsive designs. - width: 50%;

em: - The em unit is relative to the font-size of the element or its parent. It’s great for maintaining scalability in responsive designs. - padding: 2em;

rem: - Similar to em, but relative to the root element’s font-size. It ensures consistent scaling across the entire page. - margin: 1rem;

Positioning With position/margin/padding

padding: - The padding property adds space inside the boundaries of an element. It helps control the spacing between the content and the border of the element. - padding: 10px;

margin - The margin property adds space outside the boundaries of an element. It controls the spacing between the element and its neighboring elements. - margin: 20px;

position - The position property determines how an element is positioned on a webpage. It can be set to relative, absolute, fixed, or static. - position: relative;

Basic Layout with CSS Flexbox

Flexbox, short for Flexible Box, is a layout model in CSS that allows you to design complex layouts more efficiently and with less code. It provides a way to distribute space and align items within a container, even when their size is unknown or dynamic.

To use Flexbox, you first designate a container as a flex container by applying display: flex; to it. This property turns all direct children of the container into flexible items.

.flex-container {
  display: flex;
}

The flex-direction property defines the direction in which the flex items are placed in the flex container. It can be set to row, column, row-reverse, or column-reverse.

.flex-container {
  display: flex;
  flex-direction: row; /* or column, row-reverse, column-reverse */
}

The align-items property aligns flex items along the cross-axis. It can be set to flex-start, flex-end, center, stretch, or baseline.

.flex-container {
  display: flex;
  align-items: center; /* or flex-start, flex-end, stretch, baseline */
}

The justify-content property aligns flex items along the main axis. It can be set to flex-start, flex-end, center, space-between, space-around, or space-evenly.

.flex-container {
  display: flex;
  justify-content: space-between; /* or flex-start, flex-end, center, space-around, space-evenly */
}

Each child element of a flex container becomes a flex item. You can adjust the size of flex items using properties like flex-grow, flex-shrink, and flex-basis.

.flex-item {
    flex: 1; /* shorthand for flex-grow, flex-shrink, and flex-basis */
}

Publishing Your Website

Github Pages

Creating a Repository

Go to https://github.com, sign in and click “new” followed by “new repository”
Name your repository <username>.github.io, for example, my username is mcb2003, so my repo is called mcb2003.github.io
Choose to create a public repository, and add a README
Click “create repository”

Commit Your Code

On your new repository’s home page, click “creating a new file”
Name your file “index.html” (this is the default name for the homepage of your site
Paste your code into the file, then click “commit changes”
Modify the commit message if you’d like, then click “commit changes” once again

Enable Github Pages

Now we will teach you how to Create a GitHub pages site. This lets you publish your website on the internet using GitHub pages to host it.

To create a GitHub pages site for your website you must have a public repository containing the files you’re website is made from.

GitHub will looks for the index.html (or index.md or README.md) file of your website to use as the entry file for your site. You must include the site entry file at the top of the repository directory or at the top level of the directory which you have set as the source directory.

Right. Now, how to create a GitHub pages site for your website from your GitHub repository for your website?

go to your repo
go to the setting tab
go to the pages section under code and automation in the settings tab
leave source as deploy from branch
select the main branch or whichever branch of your repo you want your website to be built from
click save
wait a few minutes for your website to publish

Introduction

How Web Pages Work

1. Browser Requests Page

2. Web Server Sends Response

The Roles of HTML, CSS and JavaScript

HTML – Describing Structure

Introduction

Syntax

Comments

Tags

Nesting Tags

Attributes

Static Text

Basic Structure

Common Head Tags

<title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Brief description of the page">

<meta name="keywords" content="HTML, web development, beginners">

<link rel="stylesheet" href="styles.css">

<style>

<link rel="icon" href="favicon.ico" type="image/x-icon">

<link rel="canonical" href="https://example.com/canonical-url">

<script src="script.js"></script>

<base href="https://example.com/">

Body – Defining the Page’s Content

Inline vs Block Elements

Common Body Tags

<h1> to <h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<p>

<a href="https://example.com">Link Text</a>

<img src="image.jpg" alt="Description">

<ul> and <li>

<ol> and <li>

<div>

<span>

<br>

<hr>

<form>

<input type="text" placeholder="Enter text">

<button>

<textarea rows="4" cols="50">Default text here</textarea>

Example

<iframe src="https://example.com" width="600" height="400"></iframe>

<table>

<tr>

<th scope="row">

<td>

<thead>, <tbody>, <tfoot>

<caption>

Example

Structural Tags

<main>

<header>

<footer>

<nav>

<article>

<aside>

CSS – Styling and Themeing Elements

Introduction

Linking a Style Sheet in HTML

Syntax

CSS Selectors

Common Properties

CSS Colour Values

Gradients

Spacing, Units

Positioning With position/margin/padding

Basic Layout with CSS Flexbox

Publishing Your Website

Github Pages

Creating a Repository

Commit Your Code

`<title>`

`<meta charset="UTF-8">`

`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

`<meta name="description" content="Brief description of the page">`

`<meta name="keywords" content="HTML, web development, beginners">`

`<link rel="stylesheet" href="styles.css">`

`<style>`

`<link rel="icon" href="favicon.ico" type="image/x-icon">`

`<link rel="canonical" href="https://example.com/canonical-url">`

`<script src="script.js"></script>`

`<base href="https://example.com/">`

`<h1> to <h6>`

`<p>`

`<a href="https://example.com">Link Text</a>`

`<img src="image.jpg" alt="Description">`

`<ul>` and `<li>`

`<ol>` and `<li>`

`<div>`

`<span>`

`<br>`

`<hr>`

`<form>`

`<input type="text" placeholder="Enter text">`

`<button>`

`<textarea rows="4" cols="50">Default text here</textarea>`

`<iframe src="https://example.com" width="600" height="400"></iframe>`

`<table>`

`<tr>`

`<th scope="row">`

`<td>`

`<thead>`, `<tbody>`, `<tfoot>`

`<caption>`

`<main>`

`<header>`

`<footer>`

`<nav>`

`<article>`

`<aside>`