Read on Twitter
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
@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
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't "see" the head
#PATC5
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'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
<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
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'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
<div id="scan"></div>
Div is a node but won'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'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
<ul id="menu">
<li id="partCircle">Part Circle</li>
</ul>
So ul is "unordered list" it'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
