RESH >> Writing >> Glitch

Glitch

Glitch is a free of charge HTML editor for publishing content on the web.
You mark up your content with HTML and CSS code and your pages are instantly accessible to the whole world.

- Why do we have to learn and write code? This is an English course!

- In our course, we only need to know the very basics of the two coding languages, with the help of your teacher. Also, as opposed to many other tools, with Glitch, we also get the so called hosting for free, i.e. the web server storage to keep our pages on, so that they are actually published - seen - on the web.


HTML is a so called mark-up language. Use it to decide the structure of your text, i.e. what should be paragraphs, headings, lists, tables, links, headers, footers etc.

CSS is the language to decide the format of your text, i.e. designing your page to decide on colours, sizes, fonts, etc. You can use one single CSS page to decide the format of an unlimited amount of HTML pages. This is extremley powerful and reduces both the amount of time needed and the risk of making mistakes.


In Glitch, there will be some templates where code exists from the beginning. This can be useful for learners, but also somewhat daunting. Your teacher will help you know how to make things easier.

HTML

Content is "marked up" by placing so called HTML elements around it.
An element consists of tags, mostly a start tag and an end tag.

The file extension of HTML documents is .html.
The home page of your website should always be named index.html.
Add new files by clicking the plus (+) symbol next to "Files" in the left column of Glitch. Make sure to name the file correctly. You can then copy the HTML code from an existing HTML file, paste it into your new file and then make the necessary changes.

Here are some basic HTML elements:

<html> The so called root element of the document. This simply tells the computer "this is a web page".
<head> Ignore this part for now. It has some standard code to simply make the document work, e.g. for different alphabets, in connection with the styling (CSS) etc.
<body> This is the part where you put the actual content.
<p> is short for "paragraph", i.e. "normal" text.
<h1> is used for headings. It can be used in different levels, to have main headings, sub heading etc. For sub headings, use <h2>, <h3>, etc.
<header> (not to be confused with <head>!
This is what it says, i.e. the header of your page, where e.g. the name of the company, its logo etc. are usually placed.
<footer> This is also what is says, i.e. the footer at the bottom of the page. Typical content to place here is copyright information, contact details etc.
<main> This is the main part of the page, everything that goes in between the header and footer. 
<article> is used for, well... articles!
Place them inside your <main>.
<a> is the code for a link (hyperlink). Apart from the element itself, it needs a so called "attribute". These are available, and sometimes necessary, for some elements. They specify the meaning of the element. For the <a> element, we need the href attribute to specify the URL (address) of the page to go to when the user clicks on the link. Example:
<a href="http://www.bbc.co.uk">BBC<a>
<img> Maybe you guessed it. This is for images. They need to be uploaded to the server and the element needs the src attribute to specify the file name. Example:
<img src="flower.jpg">
Your teacher can help you.

CSS

The document containing our CSS code is called the style sheet. In Glitch, its file name is styles.css, but you can rename it if you wish.

We declare styles for a HTML element by listing properties and their values.
The first part of the declaration - before the opening curly bracket - is the selector. It selects which part our HTML document we want to style. Example:

h1{
color:darkred;
font-size:36px;
}


Here are some common CSS properties:

background specifies the background color of an element, e.g. the whole page. There are different ways to code which exact colour you want. The most common colours have names, but you can also use an RGB value. Example:
background: yellow;
color specifies the color of text. Example:
color:white;
font-family specifies the typeface (font). It is called family because all fonts have a number of varieties, e.g. normal, bold, italics, etc. It is common practice to list more than one font-family, in case some of your users cannot use the first one. Example:
font-family:Georgia, serif;
font-size specifies the size of text. There are different units of measurement to choose from. For now, you can stick to the px unit. Example:
font-size: 18px;
padding creates some space inside the element (between the text and the edge of the element), which can improve readibility. Example:
padding: 12px;
margin creates space outside the element.
border creates a line around an element.

Three things are needed: thickness, color and type. Example:
border:1px black solid;

If you do not want the line on all four sides, you can use border-top, border-left, border-right or border-bottom instead of border.
columns turns a text into newspaper columns. Example:
columns:2;
Note: not to be confused with display:grid (see below).
In newspaper columns, text can continue in the next newspaper column. That is not the case with display: grid, where each article can only be inside one column.
display If you use display:grid on an element and then also writes
grid-templates-columns:1fr 1fr;
it creates two columns. 

Publishing your site

Your website will have one URL (address) for the pages visible only to you (the editors) and another URL for pages visible to the world. Therefore, you need to publish your website. You only need to do this once and any changes you make after that will have the published version updated automatically.

To publish your site, click the Preview button at the bottom of the windows. You get to choose between seeing the published version either in a separate pane in the same window (Open preview pane), or in separate tab (Preview in a new window).
I recommend always choosing both options. The window pane preview is quick and direct, but you need the separate tab version to see the published URL, so that you can make your visitors aware of it.

Links