HTML Introduction Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

12:20:41 Hi! Everybody! Welcome back as we dive further into web browser-based visualization by introducing ourselves to HTML.
12:20:50 So HTML stands for hypertext markup language.
12:20:53 This is a standard markup language for modern web pages.
12:20:58 There are other options like Xml is an example that other people use HTML, or the hypertext markup.
12:21:05 Language is going to allow us to alter the app appearance of a web page as it's displayed when we open it, it combines well with additional software's like Css.
12:21:14 Svg. And Javascript. The current version that people use is called HTML.
12:21:18 5 older web pages, might use. HTML, 4, or Xml.
12:21:23 HTML files end with a dot. HTML file, and with a dot.
12:21:28 HTML file so HTML code has a tree structure.
12:21:32 Here's an example layout from a file that we'll see in just a second.
12:21:36 So you have an HTML element at the very top.
12:21:39 This is a node, and is the the top node within the tree, and then, as it goes down, it branches as to the elements contained within the HTML, so the 2 main elements are the head and the body which will dive into a little bit.
12:21:56 More later. Each of these elements, head and body, also known as nodes, this is the head node.
12:22:03 The body known contain other elements like the head, contains the title.
12:22:07 The botley contains 3 p. Elements which again we'll talk about in a later video.
12:22:12 And so forth. So each node the to the node below.
12:22:16 It is a parent, so head is the parent node of the title, and then the ones that are below our called the children. So title is the child node of head.
12:22:28 So Web's, let's talk about Web page.
12:22:31 Source code and browser by looking at that sample.
12:22:35 HTML. So where are you gonna find this? You go to lectures.
12:22:40 Type, go to Web Browser, and then go to lecture 2, and you can see now that we have this file sample dot.
12:22:48 HTML, which is now opened within Mozilla Firefox.
12:22:51 So this is what it looks like. We've got the.
12:22:53 This is the first paragraph, this is the second paragraph.
12:22:56 It contains 3 links. Wikipedia, Pbs.
12:22:59 And the who websites. This is the final third and final paragraph.
12:23:06 So this is a sample. HTML code.
12:23:08 Why don't we see what it looks like in visual studio?
12:23:12 So this is what the file looks like in visual studio.
12:23:15 So we've got. HTML Doc. Type. HTML, that's the outermost.
12:23:20 This is what you're going to put in all of your HTML files.
12:23:22 You've got the head element. And what's this?
12:23:25 It looks like maybe there's a slight typo here.
12:23:29 Yup, there is, so we'll go ahead and replace this with.
12:23:35 Head.
12:23:37 That's a table. So the head element which contains the title.
12:23:42 Then we've got our body element, which has the 3 P's which has the first P.
12:23:47 As a B within it, and then the second P has 3 as, and the third P has nothing in it.
12:23:52 Okay, so this is our sample. HTML, as code.
12:23:56 This is what HTML code looks like. We're gonna dive more into.
12:23:59 How do you write HTML code in the later notebooks?
12:24:02 And this is what that code now looks like as a webinar.
12:24:06 Let's see, we've got the text here. This is what A's look like.
12:24:10 This is what a B looks like. The word first what's gonna be useful for us is these something called the developer tools.
12:24:20 So the web developer tools allow us to see the HTML code that was used to make it so.
12:24:28 Not only can we see it in visual studio, because we typed it up in this file, but we can also see what it looks like.
12:24:32 So we can see the HTML, the head.
12:24:38 And the body, with its peas. And the nice thing is, as you go over it highlights the element within the webpage.
12:24:46 So we can see that this P element refers to the one that Canains.
12:24:50 This is the third and final paragraphs. So developer tools are going to be really useful for us.
12:24:55 Once we start using things like Javascript, because we'll be able to interact with this counsel and see Const and see what's going wrong.
12:25:04 And what's working and so forth. So let's go back to our Powerpoint.
12:25:10 And that was the last slide. So that's the end of this video.
12:25:14 So now you've been introduced to HTML.
12:25:17 We've seen a little bit of what it looks like as code, what it looks like on a web browser, and we're gonna dive more into.
12:25:24 How do you write? HTML code in the coming videos?
12:25:27 I hope you enjoyed this video. I enjoyed having you here, and I hope to see you next time.