8.1: What is HTML? – p5.js Tutorial

8.1: What is HTML? – p5.js Tutorial

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

100 thoughts on “8.1: What is HTML? – p5.js Tutorial

  1. Still watching!! That was one of the clearest, most understandable explanation of the DOM I have heard, and I was struggling a bit with that concept. Thank you for that!

  2. Still watching and having fun with the rainbows.. rainbows everywhere !!
    By the way I'm a robot from the future.
    (thanks for your videos)

  3. what basics stuffs i need to learn before getting started? I already downloaded p5.js etc. But i am confused where to start! ! It will be great if you help sir!

  4. your amazing , don't discouraged because you have such little views. I really appreciate you teaching us this stuff. I really do.
    Thank you so much ! 🙂 Please don't stop. There are a lot of people that count on your videos but you just don't know it. xD!!

  5. Started watching your videos from 1.1 up loving the content. I'm still very new to programming and it has been easy to follow you and understand the content.

  6. Please help me. Where am I doing mistake. So it's not working. I am using notepade and chrome
    <!DOCTYPE html>
    <meta charset=utf-8>
    <script src="libraries/p5.js" type="text"></script>
    <script src="libraries/p5.dom.js"type"text"></script>
    <script src="libraries/p5.sound.js" type="text"></script>
    <h3>Hi This is Pradeep Kumar</h3>
    function setup(){
    createCanvas(400, 300);
    function draw(){

  7. Is it possible to add js libraries from external source such as http://? Or do I have to download the library and reference it locally?

  8. I was wondering myself if i can make an entire website with only javascript and the p5.js framework. Oh, and i found the Atom package for p5 autocompletion -> Awesome !

  9. If I was a girl or gay I would be in loved in with you, but I'm not, so I'm inloved in to your videos and in to your teachings. Thank you very much .

  10. HTML – hyper text markup language
    Dom – document object model
    Css – cascading style sjeets
    Js – JavaScript
    Need more go to Ws3 schools

    A markup language is a customizable something language… I think

  11. i made counter a but after page reload my values are overriding how to retain recent values

    here is my code —->>>>

    <p style="font-family: poppinsbold;" id="demo" class="prefooter-content-head"></p>
    <p style="font-family: poppinsbold;" id="demo2" class="prefooter-content-head"></p>
    var sd = new Date("Mar 1,2017 00:00:00").getTime()/ 100000;
    var get_count = Math.ceil(sd/5);

    function startTime() {
    var rand = Math.floor(Math.random() * (40 – 3 + 1) + 3);
    var last = localStorage.getItem('last');
    var res = get_count+rand;
    get_count = res;
    res= get_count.toString();
    var minus_one = res.substring(0,1);
    var m_s = res.substring(1,4);
    var minus_four = res.substring(4);
    var csv = minus_one+","+m_s+","+minus_four;
    document.getElementById("demo").innerHTML = csv;
    document.getElementById("demo2").innerHTML = csv;

    var pause = Math.floor(Math.random() * (6 – 2 + 1) + 2);
    setTimeout(function() {
    }, pause * 1000);


  12. Still watcing from Turkey,

    You make the tutorial videos about exactly what I am curious about. Universe and Internet are great miracles. I am thankful to those miracles for letting you happen.

    Please keep up the good quality work. There are so many thing to learn.
    Thanks :).

  13. I am still watching the vid. absolutely love it. awesome. I am absolute beginner but I enjoy it so much. appreciate you.

  14. Thank you for this video! But where can i get the whole code to link p5 to my html page in the heading? On your video it shows only part of it.

  15. Thank You Daniel, that was short, specific without being too technical. I like the way you tied in the explanation of the DOM.
    Thanks to user ndstephens for the deeper explanation of how the DOM changes.

  16. You are one of the most wonderful programmers I've ever seen! Watched till thr end just like all the other videos I've been watching for the last couple of months <3

  17. I started learning html a month ago, I swear you're the only person I've seen on youtube who makes me happy about learning lol

  18. dude. i like how most teachers make it seem like you're going to learn a lot on a course but you learn nothing, but then you make it seem like we're going to learn a little in these videos but we actually learn a lot.

  19. My guy you are so happy and it's perplexing. This is the first video of yours I've watched, and I really like your style. Keep it up my guy.

  20. How does his HTML code completes itself? For example: If he writey <body> there directly comes a <body> and he doesnt need to typd it. Please answer I would love to have this too!!

  21. So the question is, "Why am I here? What is going on in my life?"

    You're narrating my inner monologue and it makes me smile every time!

Leave a Reply

Your email address will not be published. Required fields are marked *