Hello! So I today I'm starting a new an entirely new section of videos about a
topic i really don't know anything about. I have no business making this video but
i'm going to make an attempt at you the internet will I don't know why pointing
and I like aggressive manner. I welcome you with a hug but you the
internet will hopefully leave comments and let me know what I've got wrong and
what I'm missing here. Because honestly this is stuff which has been
some new to me as well so in the topic is ... it probably says it's somewhere on this
webpage that I'm sitting in but HTML. HTML what is that? CSS what is that? Dom
what is that? How do you write JavaScript to control this stuff and making you
know magic happen on a webpage so uh there's a and all of this in the context
of a JavaScript framework known as p5. So in this first video all I want to
talk about is HTML and I want to open a p5 sketch if you've been watching the
previous videos have been we've been writing code in this function set up and
draw and making things happen on the screen and making objects and snow and
particle system and rainbows of all sorts of wonderful things but now i want
to take a step to peel back some layers that was actually happening before the
JavaScript even execute and what's happening is this thing known as HTML so
actually there wasn't oh I can't even see that but that's okay
There was a moment of time in a previous video... here I am... this is my list by the way to
make a whole bunch of these videos there was a moment in time I gotta close the
screen which has me on it
there was a moment in time in a previous video where I went to that Settings icon
and I clicked on the Settings icon and then I clicked on this show sidebar
button and we saw... here look at that! There's this file called index.html and
if you recall
oh that camera shut off. Stop everybody! Back after a moment of technical
difficulties,
What I was referring to here is in this HTML file this gobbledygook there is
this line that refers to the javascript file the javascript file being in our in
our world in the world that we lived in previous to this video this is all that
existed set up and draw but the
only reason setup runs and draw runs. There's two reasons one reason is up
here that p5 Js is a library that's referred to in a script tag and
sketch.js which is our code is referred to in a script tag so this is actually
the file that matters
this HTML files the file that matters what goes in that file
how does that file work and what might you be able to do with that file to make
certain things happen so now we come back over here videos a disaster up and
talk about HTML for a second so HTML stands for hypertext markup language
it's a markup language meaning I don't know what that means somebody somebody
sprayed the comments what that means but the idea here is that it is based on
this concept of a tag so um so if you have some characters in between a less
than and a greater than symbol this is a tag. The HTML tag begins and it ends with a
backslash HTML so i have now created this body this I shouldn't use the word
body because that's going to be something more specific in a moment but i have created
this area where I'm going to start to put some content all in between these
tags now some things that might exist here is going to say another tag maybe a
tag known as body and inside that body I might put some other things I might put
a tag with a p for paragraph this is a paragraph and I might put another tag
like above that H one which is a header like title of page then I might
put another tag which is like image source equals apple . jpg so they're all
these things that can go in HTML page this is the mark-up the source code the
behind-the-scenes information and structure behind what you will actually
see on the page this
renders [that was a bad pen]
this renders to on the page title of page this is a paragraph and then a
picture of an apple assuming i have that file. So the idea here is that you can
create full content and layout by by this sort of system of nested tags i have an
HTML page in that page there's a body in that body there's ... oh and i wrote
something wrong here... that close to actually be a header there's a header a
paragraph an image so one of the things that can go in here also is a canvas and
and p5 inserts the canvas on that page with the function create canvas. So there's
this kind of question here is like well what what what is it ok right here
what's going on with my life and what am I trying to do if you just want to
present some content some content that you want to type you have an essay you
wrote your story wrote it has a title and has some pictures in it and it's
sort of like static or you might say flat just from existing content you can
put that all into an HTML document open that HTML content in a browser and you
will see it there if you want this page to be interactive or dynamic behaviour
change over time change when a user clicks animate whatever strange
experimental thing you can think of that's where you need javascript so this
is the purpose of my set of videos here is to look at but we you know hopefully
you know a little bit about JavaScript down you can program and make these
little animations what's the page behind that better hold which one is the page
where that javascript is acting on how do you put stuff in the page how to put
stuff in the javascript javascript and how do those two things talk to each
other
ok so here's sort of basic idea of HTML
now let's walk home first locally here over to this computer and I'm gonna do
something crazy which is I'm just going to say like nevermind ub5 editor and
whatever HTML you made for me automatically i'm going to take all of
this out i'm going to close this preferences and i'm going to say i'm
going to say i want to have a body
and I want to have a header I and making a video and I want to have a paragraph
this is my essay about how I love to make videos they are hard pocket pay for
it i'm just like lost the train of thought battery i'm steve got just
favorite thing to do
rainbow rainbow rainbow which is my thing that I always just use rainbow
ok so you can see I'm starting to just put content in this HTML page and i'm
going to run it and look at this
I now looks like i wrote a program that made this but I didn't I just manually
added some content of the HTML page what the mp5 actually loads in this window in
this like little browser window is the HTML file and so you could say like well
what's in the javascript file nothing but i could add create canvas 200 200
and I could add a background 0 Phil to 5500 i'm also now lost my train of
thought of programming rectangle 00 you know 100-150 50 I've got some JavaScript
I've got some HTML and now whoops now let me run this again or load this page
again and we can see here huh where is the canvas it doesn't exist so nothing
actually happens on the page unless it's included in the HTML file and when I
wiped the HTML file that the editor made for me automatically i took out all the
references to that javascript file so if i want to have both the HTML content and
the javascript stuff happening at the same time I need to put I need to have
both of those things so let me introduce a little we're just going to make a new
project and we look at HTML file and I'm going to grab this header area i'm going
to grab this close that so what's missing from this document HTML body is
a head tag and a head tag is where i might reference other files like
JavaScript files and other things that you might see later on if I ever get to
making some videos that make any sense
So, I'm going to paste that back in here you can see in this you can see now this
page both and I'm gonna gonna take out this stuff here some extra stuff i'm now
this page and i don't actually i'm not using these libraries well i'll leave it
there
this now you can see this page is referring to the p5 library and some
other libraries that I'll mention a second our JavaScript code and the HTML
stuff that I added and now if I run this or load this page again you can see look
at this
we now have other content around the canvas so this is the first step right
How do you make content written to the HTML file? How do you use
p5js and JavaScript to make a canvas? How do both those things exist in the
same at p5js project and the next step is what's the interplay between those
two things? Wwhat if i want this header text to change when i click the mouse?
What if i want the font to change at when the rectangle moving across the
canvas gets to the other side of the screen?
These are the kinds of questions I hope to answer and make more clear in the
next set of videos. There's a couple things that I missed here so that I
think are important before i finish so one thing i want to mention about this
you know what I could come back to this later you know because I i want to
mention is how this is a tree structure I said I would come back to later but now that I
said I have to talk about it
so this is a tree structure and this is also something that's important to think
about the root node of this tree is HTML inside of HTML there's a body right open
tag close tag inside of the body there's a header a paragraph an image editor a
paragraph and an image is a paragraph could have things inside the paragraph
as we saw in in the HTML file there was actually a head tag which included some
scripts javascript scripts and other things so this is an important also way
of thinking and I think I think nobody's been watching the ad know if you're
still watching this video let me know because I don't know going on for a long
time but I'm this I think is a clue to this idea of something known as
the DOM... document object model this I don't actually know what the DOM is but
I think I have an idea just by talking this through... this is a document these
are objects inside the document the model is this tree structure of how a
page is structured. There's an HTML element but object inside of it there's
a body object inside of it there's a head h1 object a paragraph object and
image object this whole document has a model structure for how to organize of
objects document object model and how do you manipulate that document dom
manipulation means how to use JavaScript to manipulate this on the fly in real
time
this is the subject i hope to continue to cover and make more and more examples
of now one thing I should admit here is this is like two most pathetic or like
tiniest like explanation of HTML ever looked like a few things so I'm really
hoping to get two more about javascript programming and manipulation in real
time if you're interested in HTML
right on anyway we knows of HTML write in the comments of nice some links i
might include but I'm i try to refer you to the other sources like what are all
the possible tags
how are these tags organized how are they different you know what does it
mean to have this source equals Apple jpg this is an attribute will get to
some of these things as i get further along through these videos as well so
for you if you're kind of following along in the sort of like watch a video
to a quick exercise ... what I would say is see if you can make this happen make now
take one of your p5 sketches and add some other stuff around it around the
page we're going to be able to do a lot more than mixing it soon but this is
only been about 10 minutes this video I feel like I'm talking for like 45
minutes and that i think would be a good start. In the next video I i'm going to
look at my list here the next video I'm going to look at making DOM elements
making HTML elements on the fly from JavaScript adding them to the page just
like create canvas and add to the page
okay i'm going to hit stop on recording and
go on to the next video.
Subtitles by the Amara.org community