Thread by @Pgogy, 1) Hello, my name is Pat, and yes, that is a penguin [...]

Pgogy WebStuff

Pgogy

1) Hello, my name is Pat, and yes, that is a penguin on a pogo stick. I am a self-employed computer wrangler (at the last #PATC I billed myself as "a good ideas typhoid mary").

@CleoHanaway rebranded me as an "academic computery thing" do-er, largely due to this video

#PATC5

2) So today my aim is to talk you through making a simple #DigiHums #Teaching tool.

I am starting at the very beginning, so hopefully I can take you along with me

This is a basic HTML document

<html>
<head>
</head>
<body>
</body>
</html>

#PATC5

3) Each item (html, etc) is a node, and each node opens and closes (</html> is where HTML closes).

The body node contains all of the stuff you see on screen

The head node contains things which help to make the stuff you see prettier, but you don& #39;t "see" the head

#PATC5

4) Our head has link, script + style nodes

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

Here a link node loads a stylesheet, which make the webpage have colours etc.

<script src="jquery.js"></script>
A script node loads javascript which allows us to modify the body

#PATC5

5) The src attribute of the script node is where we specify the file to load

The href of the link node is where we specific the file to load

Or instead / as well as using the link node, we can use a style node, and include the style instructions directly in the head

#PATC5

6) The tool makes geophys scans. We need a node for the scan

<div id="scan"></div>

Div is a node but won& #39;t look like a scan, we need style

#scan in style means "applied to" id="scan"

Background:url - #scan will have an image background
width and height are the size

#PATC5

7) This tool needs a menu

<ul id="menu">
<li id="partCircle">Part Circle</li>
</ul>

So ul is "unordered list" it& #39;s basically a bullet pointed list, with the <li> node being a "list item"

ID + class attributes allow us to apply styles or reference with javascript

#PATC5

You can follow @Pgogy.

Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: