title
HTML 5 Tutorial

description
Get Cheat Sheet Here : http://goo.gl/ifP3Fv Best Book on HTML5 : http://goo.gl/D6zPXE MY UDEMY COURSES ARE 87.5% OFF TIL December 19th ($9.99) ONE IS FREE ➡️ Python Data Science Series for $9.99 : Highest Rated & Largest Python Udemy Course + 56 Hrs + 200 Videos + Data Science https://bit.ly/Master_Python_41 ➡️ C++ Programming Bootcamp Series for $9.99 : Over 23 Hrs + 53 Videos + Quizzes + Graded Assignments + New Videos Every Month https://bit.ly/C_Course_41 ➡️ FREE 15 hour Golang Course!!! : https://bit.ly/go-tutorial3 Everything you can do with HTML 5 and provide numerous examples using CSS, JavaScript and PHP. 00:32 DOCTYPE HTML URL 01:52 HEAD META CHARSET REDIRECT 03:14 DESCRIPTION KEYWORDS ROBOTS 04:45 SCRIPT BASE LINK STYLESHEET 05:45 ICONS TITLE 06:42 VALIDATE HTML5 07:15 BODY ONLOAD DIV WRAPPER 08:16 NOSCRIPT H1 P BR HR 09:23 BLOCKQUOTE CITE Q 10:14 PRE CODE 11:21 JavaScript : onclick getElementsByTagName innerHTML HexCode 13:44 IMG ID SRC ALT WIDTH HEIGHT 14:36 B STRONG EM I 15:10 SMALL INS DEL SAMP 15:30 ABBR TITLE DFN KBD 16:49 Character Entities 17:35 SUP SUB BDO RUBY RT 18:29 LINKS A HREF 19:01 Link Active States CSS 20:06 CSS background IDs margin 21:12 Linking within Page 22:43 mailto 23:04 JavaScript : Execute onclick toggle visibility 24:53 Making Image Maps with GIMP 27:15 OBJECT DATA TYPE PARAM Embedding 28:50 Everything you can embed 29:11 IFRAME 29:32 EMBED Flash Plugins 30:05 AUDIO 30:36 VIDEO 30:55 HEADER 31:42 NAV Navigation 32:02 MAIN SECTION ARTICLE ASIDE 33:55 ORDERED & UNORDERED LISTS OL UL 35:36 CSS : float display padding # text-decoration 38:09 DEFINITION LISTS DL DD DT 39:19 list-style-type for lists 39:56 ORDERED LIST TYPES 40:58 TABLES : caption thead tr td colspan tfoot tbody 43:51 FOOTER ADDRESS SMALL 44:38 FORMS & PHP GET POST 45:10 Processing Forms with PHP 45:44 INPUT TAGS 47:51 TEXTAREA 48:29 FIELDSET LEGEND 48:49 CHECKBOX 49:18 RADIO BUTTONS 49:55 SELECT BOX OPTION OPTGROUP 51:02 HIDDEN 51:20 UPLOAD FILES 51:37 IMAGE BUTTON 51:59 CANVAS & JavaScript 1:05:14 JavaScript : geoLocation & localStorage

detail
{'title': 'HTML 5 Tutorial', 'heatmap': [{'end': 219.763, 'start': 127.109, 'weight': 0.944}, {'end': 351.356, 'start': 260.579, 'weight': 0.709}, {'end': 480.198, 'start': 388.103, 'weight': 0.743}, {'end': 703.396, 'start': 605.755, 'weight': 0.736}, {'end': 829.849, 'start': 780.885, 'weight': 0.78}, {'end': 1139.05, 'start': 1083.228, 'weight': 0.749}, {'end': 1398.25, 'start': 1303.087, 'weight': 0.905}, {'end': 1790.334, 'start': 1695.706, 'weight': 1}, {'end': 2699.425, 'start': 2655.15, 'weight': 0.737}, {'end': 3139.293, 'start': 3047.22, 'weight': 0.713}], 'summary': 'This html5 tutorial covers comprehensive basics, including php, javascript, and styling, with practical demonstrations and explanations. it encompasses search engine indexing, linking, text formatting, hyperlinks, javascript functions, media embedding, table styling, form processing, canvas drawing, gradients, and data storage, providing detailed instructions and code examples.', 'chapters': [{'end': 238.09, 'segs': [{'end': 27.375, 'src': 'embed', 'start': 0.134, 'weight': 0, 'content': [{'end': 3.036, 'text': 'well, hello internet and welcome to my html5 tutorial.', 'start': 0.134, 'duration': 2.902}, {'end': 7.158, 'text': "in this one tutorial i'm going to cover pretty much everything there is to know about html5 plus.", 'start': 3.036, 'duration': 4.122}, {'end': 11.401, 'text': "i'm also going to cover a little bit on php, javascript and stylesheet.", 'start': 7.158, 'duration': 4.243}, {'end': 13.742, 'text': "so it's a true complete tutorial.", 'start': 11.401, 'duration': 2.341}, {'end': 20.106, 'text': "it's going to be a really long video, so i provide links to all the individual parts covered in this tutorial in the description underneath the video,", 'start': 13.742, 'duration': 6.364}, {'end': 21.046, 'text': 'and i have a lot to do.', 'start': 20.106, 'duration': 0.94}, {'end': 21.927, 'text': "so let's get into it.", 'start': 21.046, 'duration': 0.881}, {'end': 25.154, 'text': 'Okay, so I have a really simple layout here.', 'start': 22.833, 'duration': 2.321}, {'end': 27.375, 'text': 'On the left side of the screen, I have a text editor.', 'start': 25.234, 'duration': 2.141}], 'summary': 'Comprehensive html5 tutorial covering php, javascript, and css, with links to individual parts in video description.', 'duration': 27.241, 'max_score': 0.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA134.jpg'}, {'end': 70.811, 'src': 'embed', 'start': 44.743, 'weight': 3, 'content': [{'end': 48.885, 'text': 'And this just tells the browser to render the page using the HTML5 specification.', 'start': 44.743, 'duration': 4.142}, {'end': 54.807, 'text': 'If you ever want to use comments you just put another bracket like that and type in your comment and then close that off.', 'start': 49.025, 'duration': 5.782}, {'end': 60.788, 'text': 'Now HTML stands for hypertext markup language and it just uses tags to tell the browser how to lay out your web page.', 'start': 55.027, 'duration': 5.761}, {'end': 65.43, 'text': 'Then you have the uniform resource locator, which is just HTTP,', 'start': 60.968, 'duration': 4.462}, {'end': 70.811, 'text': "and this is just saying that you're going to be transferring the data using the hypertext transfer protocol,", 'start': 65.43, 'duration': 5.381}], 'summary': 'Html5 specifies page rendering, urls use http for data transfer.', 'duration': 26.068, 'max_score': 44.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA44743.jpg'}, {'end': 111.699, 'src': 'embed', 'start': 82.278, 'weight': 4, 'content': [{'end': 86.422, 'text': 'And then, of course, the URL is going to end with the path to the data that you want to show.', 'start': 82.278, 'duration': 4.144}, {'end': 92.127, 'text': "So let's just say it's in an HTML directory and the name of it is HTML5.html.", 'start': 86.502, 'duration': 5.625}, {'end': 96.831, 'text': 'And the extensions for your HTML documents is going to end either with HTML or HTML.', 'start': 92.327, 'duration': 4.504}, {'end': 104.416, 'text': "then you're going to want to define the documents primary language and surround the entire document with an HTML tag.", 'start': 97.512, 'duration': 6.904}, {'end': 111.699, 'text': "so let's say I'm going to be using English in this situation and of course this is going to end with a closing HTML tag.", 'start': 104.416, 'duration': 7.283}], 'summary': 'Url path for displaying data in html documents should end with html or html5.html and be enclosed in html tags with defined language.', 'duration': 29.421, 'max_score': 82.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA82278.jpg'}, {'end': 219.763, 'src': 'heatmap', 'start': 127.109, 'weight': 0.944, 'content': [{'end': 131.472, 'text': 'more than likely because it contains pretty much every character you could ever want to use,', 'start': 127.109, 'duration': 4.363}, {'end': 137.638, 'text': 'and you can even close off these meta tags with just this regular closing bracket, or you could put a forward slash right like that.', 'start': 131.472, 'duration': 6.166}, {'end': 143.183, 'text': "then let's say that you would want to redirect if somebody would go to your page to another page.", 'start': 137.638, 'duration': 5.545}, {'end': 145.284, 'text': 'to do that, you would just type in meta.', 'start': 143.183, 'duration': 2.101}, {'end': 152.891, 'text': "http-eqiv is equal to, and you're performing a refresh, jumping to another page.", 'start': 145.284, 'duration': 7.607}, {'end': 154.253, 'text': "you're going to follow this up with.", 'start': 152.891, 'duration': 1.362}, {'end': 158.297, 'text': "content is equal to, and then let's say that you want to redirect.", 'start': 154.253, 'duration': 4.044}, {'end': 164.003, 'text': 'after three seconds you would type in three semicolon and then the url that you would want to redirect them to.', 'start': 158.297, 'duration': 5.706}, {'end': 172.015, 'text': "so let's say that i have an html document named redirect doesn't have to be named redirect, of course, and then we could close that off.", 'start': 164.003, 'duration': 8.012}, {'end': 175.416, 'text': 'and if you just want to see, I went and created that ahead of time and here it is.', 'start': 172.015, 'duration': 3.401}, {'end': 180.218, 'text': "so it's going to show inside of h3 tags redirected here after three seconds.", 'start': 175.416, 'duration': 4.802}, {'end': 183.479, 'text': "so let's jump over here and I'm just reloading my browser.", 'start': 180.218, 'duration': 3.261}, {'end': 189.541, 'text': "you're going to see one, two, three, and it's going to redirect and there is redirected here just to show that that works.", 'start': 183.479, 'duration': 6.062}, {'end': 195.324, 'text': 'Another thing we can do is provide a description for your page and everything inside of it.', 'start': 189.98, 'duration': 5.344}, {'end': 202.59, 'text': "You're going to just type in name is equal to, and description, and that's going to be followed by content and again double quotes,", 'start': 195.344, 'duration': 7.246}, {'end': 204.291, 'text': 'and this is just for web browsers.', 'start': 202.59, 'duration': 1.701}, {'end': 208.554, 'text': "It's going to basically provide a description about everything you're going to cover and you can see right there.", 'start': 204.411, 'duration': 4.143}, {'end': 212.878, 'text': "I did that and of course you could end this with a forward slash like that if you'd like.", 'start': 208.554, 'duration': 4.324}, {'end': 219.763, 'text': "Next thing you're going to do is you're also going to provide keywords and again you're going to type in content,", 'start': 213.078, 'duration': 6.685}], 'summary': 'The transcript covers using meta tags for redirection and providing descriptions and keywords for web pages.', 'duration': 92.654, 'max_score': 127.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA127109.jpg'}, {'end': 189.541, 'src': 'embed', 'start': 164.003, 'weight': 5, 'content': [{'end': 172.015, 'text': "so let's say that i have an html document named redirect doesn't have to be named redirect, of course, and then we could close that off.", 'start': 164.003, 'duration': 8.012}, {'end': 175.416, 'text': 'and if you just want to see, I went and created that ahead of time and here it is.', 'start': 172.015, 'duration': 3.401}, {'end': 180.218, 'text': "so it's going to show inside of h3 tags redirected here after three seconds.", 'start': 175.416, 'duration': 4.802}, {'end': 183.479, 'text': "so let's jump over here and I'm just reloading my browser.", 'start': 180.218, 'duration': 3.261}, {'end': 189.541, 'text': "you're going to see one, two, three, and it's going to redirect and there is redirected here just to show that that works.", 'start': 183.479, 'duration': 6.062}], 'summary': 'Html document redirects to new page after three seconds.', 'duration': 25.538, 'max_score': 164.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA164003.jpg'}, {'end': 247.836, 'src': 'embed', 'start': 220.151, 'weight': 6, 'content': [{'end': 225.537, 'text': 'And again this is going to help search engines describe exactly the type of data that is on your web page.', 'start': 220.151, 'duration': 5.386}, {'end': 232.324, 'text': 'And in your description, you should only use 200 characters, and your keywords should only use 1,000 maximum characters.', 'start': 225.837, 'duration': 6.487}, {'end': 234.186, 'text': "And you can see I didn't use anywhere near that much.", 'start': 232.384, 'duration': 1.802}, {'end': 238.09, 'text': "And there, of course, you're going to separate your keywords with commas.", 'start': 234.426, 'duration': 3.664}, {'end': 242.954, 'text': 'Then you could also come in here and define how search engines should index your content.', 'start': 238.493, 'duration': 4.461}, {'end': 247.836, 'text': "And I'm first going to provide an example and then I'll provide an example of all the different options.", 'start': 243.094, 'duration': 4.742}], 'summary': 'Optimize web page with 200 character description and 1,000 character keywords.', 'duration': 27.685, 'max_score': 220.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA220151.jpg'}], 'start': 0.134, 'title': 'Html5 tutorial and basics', 'summary': 'Covers a comprehensive html5 tutorial along with php, javascript, and stylesheet, providing links to individual parts in the video description and demonstrating a simple layout. it also covers the basics of html5, including document structure, use of tags, defining language and encoding, redirecting, providing descriptions and keywords, with practical demonstrations.', 'chapters': [{'end': 27.375, 'start': 0.134, 'title': 'Html5 tutorial overview', 'summary': 'Covers a comprehensive html5 tutorial along with php, javascript, and stylesheet, providing links to individual parts in the video description and demonstrating a simple layout.', 'duration': 27.241, 'highlights': ['The chapter covers a comprehensive HTML5 tutorial along with PHP, JavaScript, and stylesheet.', 'The tutorial provides links to all the individual parts covered in the video description.', 'The tutorial demonstrates a simple layout with a text editor on the left side of the screen.']}, {'end': 238.09, 'start': 27.495, 'title': 'Html5 basics and document structure', 'summary': 'Covers the basics of html5, including document structure, use of tags, defining language and encoding, redirecting, providing descriptions and keywords, with practical demonstrations.', 'duration': 210.595, 'highlights': ['The HTML5 document structure is introduced, including the use of tags to lay out web pages and the definition of the uniform resource locator (URL) for data transfer.', "The process of defining the document's primary language, surrounding the document with an HTML tag, and closing the HTML tag is explained.", 'The demonstration of redirecting a page after a specified time delay is presented.', 'The method of providing descriptions and keywords for web pages to assist web browsers and search engines is detailed.']}], 'duration': 237.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA134.jpg', 'highlights': ['The chapter covers a comprehensive HTML5 tutorial along with PHP, JavaScript, and stylesheet.', 'The tutorial provides links to all the individual parts covered in the video description.', 'The tutorial demonstrates a simple layout with a text editor on the left side of the screen.', 'The HTML5 document structure is introduced, including the use of tags to lay out web pages and the definition of the uniform resource locator (URL) for data transfer.', "The process of defining the document's primary language, surrounding the document with an HTML tag, and closing the HTML tag is explained.", 'The demonstration of redirecting a page after a specified time delay is presented.', 'The method of providing descriptions and keywords for web pages to assist web browsers and search engines is detailed.']}, {'end': 472.414, 'segs': [{'end': 289.16, 'src': 'embed', 'start': 260.579, 'weight': 0, 'content': [{'end': 263.46, 'text': "If you type in index, it's going to actually go in and read the data.", 'start': 260.579, 'duration': 2.881}, {'end': 266.381, 'text': 'If you type in no index, it is not and follow.', 'start': 263.52, 'duration': 2.861}, {'end': 271.211, 'text': 'is going to tell the search engine or the robots, or whatever you want to refer to them as that.', 'start': 266.886, 'duration': 4.325}, {'end': 277.637, 'text': 'all the hyperlinks on your page should also be followed and indexed, and then you could also type in either archive or no archive,', 'start': 271.211, 'duration': 6.426}, {'end': 283.964, 'text': 'and this is going to indicate whether the page should be archived and, of course, if you do not want them to follow hyperlinks, you type in nofollow,', 'start': 277.637, 'duration': 6.327}, {'end': 286.046, 'text': "but normally you're going to use index and follow.", 'start': 283.964, 'duration': 2.082}, {'end': 289.16, 'text': "After that you're probably going to be using some JavaScript.", 'start': 286.357, 'duration': 2.803}], 'summary': 'Using index, no index, archive, no archive, and nofollow for search engine optimization, and considering javascript use.', 'duration': 28.581, 'max_score': 260.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA260579.jpg'}, {'end': 321.915, 'src': 'embed', 'start': 294.365, 'weight': 1, 'content': [{'end': 297.028, 'text': "And let's say that I type in random color change.", 'start': 294.365, 'duration': 2.663}, {'end': 302.191, 'text': ".js and then you're going to use a closing script tag right after that.", 'start': 297.629, 'duration': 4.562}, {'end': 305.672, 'text': "That's going to allow us to jump out and grab ourselves some JavaScript data.", 'start': 302.311, 'duration': 3.361}, {'end': 311.815, 'text': 'Another thing that is very useful to do is to define the default location for all the links on your page,', 'start': 305.692, 'duration': 6.123}, {'end': 321.915, 'text': "and to do that you would type in base hreference is equal to, and I'll put http, localhost forward, slash, html5 or html,", 'start': 311.815, 'duration': 10.1}], 'summary': 'Using script tags to grab javascript data and setting default link location on page.', 'duration': 27.55, 'max_score': 294.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA294365.jpg'}, {'end': 358.798, 'src': 'heatmap', 'start': 260.579, 'weight': 3, 'content': [{'end': 263.46, 'text': "If you type in index, it's going to actually go in and read the data.", 'start': 260.579, 'duration': 2.881}, {'end': 266.381, 'text': 'If you type in no index, it is not and follow.', 'start': 263.52, 'duration': 2.861}, {'end': 271.211, 'text': 'is going to tell the search engine or the robots, or whatever you want to refer to them as that.', 'start': 266.886, 'duration': 4.325}, {'end': 277.637, 'text': 'all the hyperlinks on your page should also be followed and indexed, and then you could also type in either archive or no archive,', 'start': 271.211, 'duration': 6.426}, {'end': 283.964, 'text': 'and this is going to indicate whether the page should be archived and, of course, if you do not want them to follow hyperlinks, you type in nofollow,', 'start': 277.637, 'duration': 6.327}, {'end': 286.046, 'text': "but normally you're going to use index and follow.", 'start': 283.964, 'duration': 2.082}, {'end': 289.16, 'text': "After that you're probably going to be using some JavaScript.", 'start': 286.357, 'duration': 2.803}, {'end': 293.985, 'text': 'And if you want to link out to a script, you just type in script and source is equal to.', 'start': 289.48, 'duration': 4.505}, {'end': 297.028, 'text': "And let's say that I type in random color change.", 'start': 294.365, 'duration': 2.663}, {'end': 302.191, 'text': ".js and then you're going to use a closing script tag right after that.", 'start': 297.629, 'duration': 4.562}, {'end': 305.672, 'text': "That's going to allow us to jump out and grab ourselves some JavaScript data.", 'start': 302.311, 'duration': 3.361}, {'end': 311.815, 'text': 'Another thing that is very useful to do is to define the default location for all the links on your page,', 'start': 305.692, 'duration': 6.123}, {'end': 321.915, 'text': "and to do that you would type in base hreference is equal to, and I'll put http, localhost forward, slash, html5 or html,", 'start': 311.815, 'duration': 10.1}, {'end': 328.003, 'text': 'and you just want to make sure that you define this information before you provide any other link tags,', 'start': 321.915, 'duration': 6.088}, {'end': 330.466, 'text': "which we're going to be getting into link tags right now.", 'start': 328.003, 'duration': 2.463}, {'end': 336.013, 'text': "whenever we define our style sheet and we're going to go, link Relative is equal to style sheet.", 'start': 330.466, 'duration': 5.547}, {'end': 342.734, 'text': 'And the style sheet just provides the styling while the HTML is providing the structure for all of your data.', 'start': 336.333, 'duration': 6.401}, {'end': 345.335, 'text': "And let's just say I call this styles.css.", 'start': 342.894, 'duration': 2.441}, {'end': 351.356, 'text': 'Another thing you might want to do is link to a reference for an icon that you want to use on your page.', 'start': 345.615, 'duration': 5.741}, {'end': 354.237, 'text': "As you can see right there, there's a little icon that shows up.", 'start': 351.736, 'duration': 2.501}, {'end': 357.218, 'text': "It's kind of blurry, but shows up inside of the tab.", 'start': 354.437, 'duration': 2.781}, {'end': 358.798, 'text': "If you want to do that, we're going to go link.", 'start': 357.398, 'duration': 1.4}], 'summary': 'The transcript covers html meta tags such as index, no index, follow, nofollow, archive, noarchive, script, base, link, and style sheet.', 'duration': 98.219, 'max_score': 260.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA260579.jpg'}, {'end': 444.337, 'src': 'embed', 'start': 417.8, 'weight': 2, 'content': [{'end': 422.764, 'text': 'and you can see right here it actually found a little error that i made a little typing error inside of here.', 'start': 417.8, 'duration': 4.964}, {'end': 425.205, 'text': 'i need to type in keywords, not keyword.', 'start': 422.764, 'duration': 2.441}, {'end': 426.026, 'text': 'sorry about that.', 'start': 425.205, 'duration': 0.821}, {'end': 430.785, 'text': 'if i copy that Step over here, paste it in validate and now you can see that it passed.', 'start': 426.026, 'duration': 4.759}, {'end': 435.289, 'text': "So that's just a really easy way to make sure that you're using ValidHTML5.", 'start': 431.526, 'duration': 3.763}, {'end': 442.575, 'text': "Now down here, we're going to create our body section, and this is just going to contain the data that's actually going to show in the browser.", 'start': 435.569, 'duration': 7.006}, {'end': 444.337, 'text': "Let's come in here, go body.", 'start': 442.716, 'duration': 1.621}], 'summary': 'Demonstrating error correction and html validation with sample code.', 'duration': 26.537, 'max_score': 417.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA417800.jpg'}, {'end': 486.501, 'src': 'embed', 'start': 455.046, 'weight': 4, 'content': [{'end': 459.188, 'text': 'you can use on unload, which occurs whenever the person tries to leave your page.', 'start': 455.046, 'duration': 4.142}, {'end': 463.851, 'text': "but that only works with Internet Explorer, and we're also going to come up here and get rid of the redirect,", 'start': 459.188, 'duration': 4.663}, {'end': 465.412, 'text': "otherwise that's going to cause problems.", 'start': 463.851, 'duration': 1.561}, {'end': 469.272, 'text': "that and, of course, don't forget your little equal sign there.", 'start': 466.531, 'duration': 2.741}, {'end': 472.414, 'text': 'sorry about that reload, and you can see hello pops up right there.', 'start': 469.272, 'duration': 3.142}, {'end': 480.198, 'text': "another thing you're going to do here is it's very common to create a div which is going to be a wrapper for your whole entire web page,", 'start': 472.414, 'duration': 7.784}, {'end': 486.501, 'text': 'and this is normally used to define the size and position of the web page overall,', 'start': 480.198, 'duration': 6.303}], 'summary': "Using 'on unload' for internet explorer, removing redirects, creating a wrapper div for web page.", 'duration': 31.455, 'max_score': 455.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA455046.jpg'}], 'start': 238.493, 'title': 'Search engine indexing and html5 linking', 'summary': "Covers defining search engine indexing options, including 'index' and 'follow', as well as using 'archive' and 'nofollow'. it also discusses linking style sheets and icons in html5, emphasizing the importance of validating html5 and utilizing attributes like on load and on unload.", 'chapters': [{'end': 311.815, 'start': 238.493, 'title': 'Search engine indexing and linking', 'summary': "Discusses how to define search engine indexing options for content, including using 'index' and 'follow' to allow search engine indexing and following hyperlinks, and using 'archive' and 'nofollow' to indicate page archiving and not following hyperlinks, as well as linking to javascript files and defining default link locations.", 'duration': 73.322, 'highlights': ["Defining search engine indexing options, such as 'index' and 'follow', to allow search engine indexing and following hyperlinks, and using 'archive' and 'nofollow' to indicate page archiving and not following hyperlinks.", "Linking to JavaScript files by using the 'script' tag and defining the default location for all links on the page."]}, {'end': 472.414, 'start': 311.815, 'title': 'Html5 linking and validating', 'summary': 'Discusses the process of linking style sheets, icons, and creating a title in html5, while emphasizing the importance of validating html5 using validator.w3.org to ensure error-free coding and utilizing attributes such as on load and on unload for enhancing the user experience.', 'duration': 160.599, 'highlights': ['The importance of validating HTML5 using validator.w3.org The speaker emphasizes the significance of validating HTML5 using validator.w3.org to ensure error-free coding.', 'Linking style sheets and icons in HTML5 The chapter explains the process of linking style sheets and icons in HTML5, including specifying the icon size and ensuring its visibility on different web browsers.', 'Utilizing attributes for enhancing user experience The usage of attributes like on load and on unload is highlighted, with a specific mention of their compatibility with Internet Explorer and their impact on user interaction.']}], 'duration': 233.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA238493.jpg', 'highlights': ["Defining search engine indexing options, such as 'index' and 'follow', to allow search engine indexing and following hyperlinks, and using 'archive' and 'nofollow' to indicate page archiving and not following hyperlinks.", "Linking to JavaScript files by using the 'script' tag and defining the default location for all links on the page.", 'The importance of validating HTML5 using validator.w3.org The speaker emphasizes the significance of validating HTML5 using validator.w3.org to ensure error-free coding.', 'Linking style sheets and icons in HTML5 The chapter explains the process of linking style sheets and icons in HTML5, including specifying the icon size and ensuring its visibility on different web browsers.', 'Utilizing attributes for enhancing user experience The usage of attributes like on load and on unload is highlighted, with a specific mention of their compatibility with Internet Explorer and their impact on user interaction.']}, {'end': 1052.177, 'segs': [{'end': 516.144, 'src': 'embed', 'start': 472.414, 'weight': 0, 'content': [{'end': 480.198, 'text': "another thing you're going to do here is it's very common to create a div which is going to be a wrapper for your whole entire web page,", 'start': 472.414, 'duration': 7.784}, {'end': 486.501, 'text': 'and this is normally used to define the size and position of the web page overall,', 'start': 480.198, 'duration': 6.303}, {'end': 494.325, 'text': 'and it is now preferred with html5 that divs as well as spans should be used only for styling and not for structural reasons,', 'start': 486.501, 'duration': 7.824}, {'end': 496.747, 'text': "and we'll get more into styling here in a minute.", 'start': 494.625, 'duration': 2.122}, {'end': 502.592, 'text': 'if you wanted to provide a message to the user, if they have JavaScript disabled,', 'start': 496.747, 'duration': 5.845}, {'end': 508.677, 'text': 'you can type in no script and then say something like please enable JavaScript right like this,', 'start': 502.592, 'duration': 6.085}, {'end': 516.144, 'text': "and then you're also able to define the importance of elements on your page, and it's very important to do this by using h tags.", 'start': 508.677, 'duration': 7.467}], 'summary': 'Html5 prefers divs and spans only for styling, not structural reasons; use h tags for defining element importance.', 'duration': 43.73, 'max_score': 472.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA472414.jpg'}, {'end': 703.396, 'src': 'heatmap', 'start': 605.755, 'weight': 0.736, 'content': [{'end': 611.098, 'text': 'And of course all of this information is going to show up if you would come in here and say something like view page source.', 'start': 605.755, 'duration': 5.343}, {'end': 614.36, 'text': "There you can see everything and it's exactly just like you typed it out.", 'start': 611.418, 'duration': 2.942}, {'end': 622.193, 'text': "Now let's say that you would want to come in here and paste information and at the same time keep all of the white space inside of it.", 'start': 614.571, 'duration': 7.622}, {'end': 628.454, 'text': 'Well, in that situation, you would use the pre tag and then you could paste some ASCII art inside of here, which is quite pretty,', 'start': 622.313, 'duration': 6.141}, {'end': 630.295, 'text': "and it's going to show up here real nice in the screen.", 'start': 628.454, 'duration': 1.841}, {'end': 634.916, 'text': "One thing that's important to know however is these are referred to as character entities.", 'start': 630.575, 'duration': 4.341}, {'end': 636.837, 'text': 'Like there and right there.', 'start': 635.396, 'duration': 1.441}, {'end': 641.099, 'text': 'And the reason why is because you have them inside of your tags for HTML.', 'start': 637.077, 'duration': 4.022}, {'end': 650.283, 'text': 'And you could also come in here and do something like and and then less than with a semicolon and greater than with a semicolon.', 'start': 641.299, 'duration': 8.984}, {'end': 654.325, 'text': 'And when you reload the page, you can see that they still same exactly the same.', 'start': 650.523, 'duration': 3.802}, {'end': 657.167, 'text': 'So get more into character entities here in a second.', 'start': 654.725, 'duration': 2.442}, {'end': 664.194, 'text': "Another thing we could do inside of pre-tags is let's say that we wanted to put some code inside of here.", 'start': 657.187, 'duration': 7.007}, {'end': 666.216, 'text': "I'll put some code tags inside of it.", 'start': 664.494, 'duration': 1.722}, {'end': 670.499, 'text': 'And this is going to preserve the white space as well as the code on our screen.', 'start': 666.476, 'duration': 4.023}, {'end': 671.801, 'text': "So there's our code right there.", 'start': 670.66, 'duration': 1.141}, {'end': 673.262, 'text': 'And you can see it printed it out.', 'start': 672.001, 'duration': 1.261}, {'end': 681.927, 'text': "kept all the white space and also didn't try to execute this code in any way or didn't cause any other errors that would come normally whenever you would do something like that.", 'start': 673.564, 'duration': 8.363}, {'end': 685.869, 'text': "now let's jump over and, just to break things up, let's do a little bit with JavaScript.", 'start': 681.927, 'duration': 3.942}, {'end': 692.171, 'text': 'so I have a JavaScript file over here that I referenced above and I called it random color change,', 'start': 685.869, 'duration': 6.302}, {'end': 698.834, 'text': "and inside of here what I'm going to do is I'm going to have the color for that change with a click that I have right here.", 'start': 692.171, 'duration': 6.663}, {'end': 703.396, 'text': 'this guy right here is going to change based off of if the link is actually clicked on.', 'start': 698.834, 'duration': 4.562}], 'summary': 'Using pre tags in html to preserve formatting and display ascii art, as well as implementing javascript for color change on click.', 'duration': 97.641, 'max_score': 605.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA605755.jpg'}, {'end': 681.927, 'src': 'embed', 'start': 650.523, 'weight': 2, 'content': [{'end': 654.325, 'text': 'And when you reload the page, you can see that they still same exactly the same.', 'start': 650.523, 'duration': 3.802}, {'end': 657.167, 'text': 'So get more into character entities here in a second.', 'start': 654.725, 'duration': 2.442}, {'end': 664.194, 'text': "Another thing we could do inside of pre-tags is let's say that we wanted to put some code inside of here.", 'start': 657.187, 'duration': 7.007}, {'end': 666.216, 'text': "I'll put some code tags inside of it.", 'start': 664.494, 'duration': 1.722}, {'end': 670.499, 'text': 'And this is going to preserve the white space as well as the code on our screen.', 'start': 666.476, 'duration': 4.023}, {'end': 671.801, 'text': "So there's our code right there.", 'start': 670.66, 'duration': 1.141}, {'end': 673.262, 'text': 'And you can see it printed it out.', 'start': 672.001, 'duration': 1.261}, {'end': 681.927, 'text': "kept all the white space and also didn't try to execute this code in any way or didn't cause any other errors that would come normally whenever you would do something like that.", 'start': 673.564, 'duration': 8.363}], 'summary': 'Demonstrates preserving white space in code tags, avoiding code execution, and retaining character entities.', 'duration': 31.404, 'max_score': 650.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA650523.jpg'}, {'end': 730.261, 'src': 'embed', 'start': 703.576, 'weight': 5, 'content': [{'end': 709.677, 'text': 'Now, inside of JavaScript, if you want a certain function to execute whenever the page is loaded,', 'start': 703.576, 'duration': 6.101}, {'end': 715.498, 'text': "you're just going to go onload init and then you're going to define a function called init like this", 'start': 709.677, 'duration': 5.821}, {'end': 718.279, 'text': 'Now that is an h1 tag that we want to reference.', 'start': 715.878, 'duration': 2.401}, {'end': 721.719, 'text': 'So to get a reference to it so that we can perform changes on it.', 'start': 718.559, 'duration': 3.16}, {'end': 730.261, 'text': "we're going to create a variable h1 tags and then, to actually get it, you're going to type in document, get element by tag name,", 'start': 721.719, 'duration': 8.542}], 'summary': 'In javascript, use onload init to execute a function when the page loads, and get an h1 tag reference using document.getelementbytagname.', 'duration': 26.685, 'max_score': 703.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA703576.jpg'}, {'end': 770.875, 'src': 'embed', 'start': 743.19, 'weight': 3, 'content': [{'end': 750.096, 'text': "And in this situation, I'm going to say when it is clicked on, I want the function called change color to execute.", 'start': 743.19, 'duration': 6.906}, {'end': 752.918, 'text': 'So I have to, of course, create the function change color.', 'start': 750.376, 'duration': 2.542}, {'end': 759.444, 'text': "If I want to refer to the item that was clicked on, and once again, the item I'm referring to is this guy right here.", 'start': 753.179, 'duration': 6.265}, {'end': 762.547, 'text': "see h1 tag and that's the first h1 tag.", 'start': 759.824, 'duration': 2.723}, {'end': 770.875, 'text': "I can say this, which is going to be a reference to the h1 tag, and then enter HTML and let's say that I want to change its text.", 'start': 762.547, 'duration': 8.328}], 'summary': 'Function change color called on click, referencing h1 tag to change its text.', 'duration': 27.685, 'max_score': 743.19, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA743190.jpg'}, {'end': 842.033, 'src': 'heatmap', 'start': 780.885, 'weight': 4, 'content': [{'end': 786.671, 'text': 'if you go to wikipedia, wiki list of colors, all right like this, these guys right here are hex codes.', 'start': 780.885, 'duration': 5.786}, {'end': 789.213, 'text': 'so this hex code represents this color right here.', 'start': 786.671, 'duration': 2.542}, {'end': 793.677, 'text': "so if i want to generate a random hex code, i'm going to use some finagling here.", 'start': 789.213, 'duration': 4.464}, {'end': 795.86, 'text': 'you do not need to memorize this by any means.', 'start': 793.677, 'duration': 2.183}, {'end': 796.24, 'text': 'there we go.', 'start': 795.86, 'duration': 0.38}, {'end': 797.418, 'text': "that's what this does.", 'start': 796.598, 'duration': 0.82}, {'end': 801.58, 'text': 'generates a random hex code and then, if I want to change the color for that,', 'start': 797.418, 'duration': 4.162}, {'end': 812.163, 'text': 'I would just type in this style dot color and type in random color like that and then make sure we come up here and type in, get elements by tag name,', 'start': 801.58, 'duration': 10.583}, {'end': 815.684, 'text': 'save that and reload it, and you can see here whenever I click on this.', 'start': 812.163, 'duration': 3.521}, {'end': 819.585, 'text': "it's going to first off it, change the text and it's also going to change the color.", 'start': 815.684, 'duration': 3.901}, {'end': 821.086, 'text': "here I'll zoom in so you can see it a lot better.", 'start': 819.585, 'duration': 1.501}, {'end': 825.107, 'text': 'So just one of the many, numerous things you can do with JavaScript, with HTML.', 'start': 821.246, 'duration': 3.861}, {'end': 829.849, 'text': "Now let's jump back over into our HTML file here and talk a minute about images.", 'start': 825.267, 'duration': 4.582}, {'end': 831.93, 'text': 'If you want to add an image to your page,', 'start': 829.869, 'duration': 2.061}, {'end': 839.832, 'text': 'just type in img and we can give it an ID so we can reference it with both our style sheets as well as with JavaScript.', 'start': 831.93, 'duration': 7.902}, {'end': 842.033, 'text': "And let's just say I want this to be dance image.", 'start': 839.992, 'duration': 2.041}], 'summary': 'Using javascript to generate random hex codes and change colors, and adding an image to an html page.', 'duration': 61.148, 'max_score': 780.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA780885.jpg'}, {'end': 1036.361, 'src': 'embed', 'start': 1009.347, 'weight': 6, 'content': [{'end': 1013.509, 'text': 'and that brings us to character entities, which I talked about previously,', 'start': 1009.347, 'duration': 4.162}, {'end': 1018.59, 'text': 'and you can find a whole bunch of character entities if you go to this web page right here.', 'start': 1013.509, 'duration': 5.081}, {'end': 1019.631, 'text': "but I'll just show you a couple.", 'start': 1018.59, 'duration': 1.041}, {'end': 1023.153, 'text': 'if you want to use sent, Just put the and sign and cent like that.', 'start': 1019.631, 'duration': 3.522}, {'end': 1025.694, 'text': 'Pound, another common one like that.', 'start': 1023.373, 'duration': 2.321}, {'end': 1027.756, 'text': 'Yen, the copyright symbol.', 'start': 1025.935, 'duration': 1.821}, {'end': 1029.958, 'text': 'And a couple other ones.', 'start': 1028.416, 'duration': 1.542}, {'end': 1032.959, 'text': 'Degree Fraction for 1 fourth.', 'start': 1030.578, 'duration': 2.381}, {'end': 1034.28, 'text': 'Fraction 1 fourth.', 'start': 1033.179, 'duration': 1.101}, {'end': 1036.361, 'text': 'Fraction for 1 half.', 'start': 1034.54, 'duration': 1.821}], 'summary': 'Character entities include ¢, £, ¥ symbols and fractions like 1/4 and 1/2.', 'duration': 27.014, 'max_score': 1009.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1009347.jpg'}], 'start': 472.414, 'title': 'Html, javascript, and text formatting', 'summary': 'Covers using divs, h tags, paragraph tags, block quotes, q tag, pre tags, and code tags in html, creating a javascript function for color change, and formatting text and adding images with html. it also highlights the use of onload and onclick events and character entities.', 'chapters': [{'end': 685.869, 'start': 472.414, 'title': 'Html tags and structure', 'summary': 'Covers the importance of using divs for sizing and positioning, providing messages for javascript disabled users, defining element importance using h tags, structuring data with paragraph tags, indenting text with block quotes, placing quotes around content using the q tag, using pre tags to preserve whitespace and code tags to display code, and finally, a brief introduction to javascript.', 'duration': 213.455, 'highlights': ['Using divs for overall web page size and position is recommended with HTML5, while divs and spans should be used only for styling and not for structural reasons.', 'Defining the importance of elements on the page using h tags is crucial for accessibility and SEO.', 'Preserving whitespace and code on the screen can be achieved using pre tags, which prevents execution errors that may occur with regular code display.', 'Providing messages for JavaScript-disabled users can be done using the noscript tag, enhancing user experience and accessibility.', 'Structuring data with paragraph tags is essential for organizing content and adding line breaks, with paragraph tags adding two line breaks after the closing tag.', 'Indenting text on the page can be achieved using block quotes, and providing a source link for the quote enhances content credibility.', 'Placing quotes around content can be done using the Q tag, providing a way to define the source of the quote and enhancing content credibility.']}, {'end': 819.585, 'start': 685.869, 'title': 'Javascript color change', 'summary': "Explains how to create a javascript function to change the color and text of an h1 tag when clicked, using 'onload' and 'onclick' events and generating random hex codes, enhancing interactivity on the web page.", 'duration': 133.716, 'highlights': ["Creating a function to change color and text of an h1 tag when clicked The function 'change color' is created to change the text and color of the h1 tag when it is clicked, enhancing interactivity.", "Using 'onload' event to execute a function when the page is loaded The 'onload init' event is utilized to execute the 'init' function when the page is loaded, enhancing the user experience.", 'Generating random hex code for color values A function is created to generate a random hex code for color values, enhancing the dynamic nature of the color change.']}, {'end': 1052.177, 'start': 819.585, 'title': 'Html image and text formatting', 'summary': "Covers adding images with html using 'img' tags with attributes like id, source, width, height, and alt, and formatting text using bold, strong, emphasis, small, insert, delete, sample programming output, abbreviation, definition, and keyboard input tags, as well as character entities like cent, pound, yen, copyright symbol, degree, fraction, and powers.", 'duration': 232.592, 'highlights': ["Adding images with 'img' tags with attributes like ID, source, width, height, and alt. The chapter covers adding images with HTML using 'img' tags with attributes like ID, source, width, height, and alt.", 'Formatting text using bold, strong, emphasis, small, insert, delete, sample programming output, abbreviation, definition, and keyboard input tags. The chapter covers formatting text using bold, strong, emphasis, small, insert, delete, sample programming output, abbreviation, definition, and keyboard input tags.', 'Using character entities like cent, pound, yen, copyright symbol, degree, fraction, and powers. The chapter covers using character entities like cent, pound, yen, copyright symbol, degree, fraction, and powers.']}], 'duration': 579.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA472414.jpg', 'highlights': ['Using divs for overall web page size and position is recommended with HTML5, while divs and spans should be used only for styling and not for structural reasons.', 'Defining the importance of elements on the page using h tags is crucial for accessibility and SEO.', 'Preserving whitespace and code on the screen can be achieved using pre tags, which prevents execution errors that may occur with regular code display.', "Creating a function to change color and text of an h1 tag when clicked The function 'change color' is created to change the text and color of the h1 tag when it is clicked, enhancing interactivity.", "Adding images with 'img' tags with attributes like ID, source, width, height, and alt. The chapter covers adding images with HTML using 'img' tags with attributes like ID, source, width, height, and alt.", "Using 'onload' event to execute a function when the page is loaded The 'onload init' event is utilized to execute the 'init' function when the page is loaded, enhancing the user experience.", 'Using character entities like cent, pound, yen, copyright symbol, degree, fraction, and powers. The chapter covers using character entities like cent, pound, yen, copyright symbol, degree, fraction, and powers.']}, {'end': 1383.765, 'segs': [{'end': 1139.05, 'src': 'heatmap', 'start': 1073.882, 'weight': 2, 'content': [{'end': 1075.303, 'text': 'And you can see CO2 shows up there.', 'start': 1073.882, 'duration': 1.421}, {'end': 1082.908, 'text': 'You can also define the direction for your characters by typing in BDO and DIR, RTL.', 'start': 1075.323, 'duration': 7.585}, {'end': 1088.512, 'text': "And let's say you wanted to type in Arabic so that this will go from right to left instead of left to right.", 'start': 1083.228, 'duration': 5.284}, {'end': 1089.733, 'text': 'Video Boom.', 'start': 1088.732, 'duration': 1.001}, {'end': 1090.714, 'text': 'You can see that showed up.', 'start': 1089.773, 'duration': 0.941}, {'end': 1096.739, 'text': "Another thing that's really neat is you can provide what is called Ruby annotation for pronunciation.", 'start': 1091.114, 'duration': 5.625}, {'end': 1100.962, 'text': "Let's say we have Japanese here and we want to provide pronunciation for it.", 'start': 1096.899, 'duration': 4.063}, {'end': 1101.963, 'text': 'This is kind of cool.', 'start': 1100.982, 'duration': 0.981}, {'end': 1103.124, 'text': 'Just type in RT.', 'start': 1101.983, 'duration': 1.141}, {'end': 1104.465, 'text': '10 RT.', 'start': 1103.705, 'duration': 0.76}, {'end': 1105.326, 'text': 'Close that off.', 'start': 1104.525, 'duration': 0.801}, {'end': 1107.608, 'text': 'And then close off our Ruby like that.', 'start': 1105.666, 'duration': 1.942}, {'end': 1110.285, 'text': 'you can see how that popped up right there kind of neat.', 'start': 1108.044, 'duration': 2.241}, {'end': 1117.607, 'text': "and that brings us to hyperlinks which, surprisingly, it's taken us a while to get to, and a hyperlink is just going to reference another link,", 'start': 1110.285, 'duration': 7.322}, {'end': 1122.268, 'text': "that if we click on it, we're going to go there and it has an optional title that you can define.", 'start': 1117.607, 'duration': 4.661}, {'end': 1129.931, 'text': "so let's go and type in ah, reference and youtube, for example, there's your hyperlink and i always use a title.", 'start': 1122.268, 'duration': 7.663}, {'end': 1131.051, 'text': "let's say youtube.", 'start': 1129.931, 'duration': 1.12}, {'end': 1139.05, 'text': "close that off and then you're going to type in youtube and close off that link itself and each hyperlink is going to have three interactive states,", 'start': 1131.051, 'duration': 7.999}], 'summary': 'Transcript covers co2, character direction, pronunciation annotation, and hyperlinks.', 'duration': 43.725, 'max_score': 1073.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1073882.jpg'}, {'end': 1168.913, 'src': 'embed', 'start': 1139.05, 'weight': 1, 'content': [{'end': 1143.734, 'text': "which I'm going to actually show you over here in our styles.css file.", 'start': 1139.05, 'duration': 4.684}, {'end': 1145.556, 'text': "let's just make this real simple here.", 'start': 1143.734, 'duration': 1.822}, {'end': 1149.499, 'text': "let's say that we just want to change our h1 tag to a different color.", 'start': 1145.556, 'duration': 3.943}, {'end': 1154.304, 'text': 'all we would do inside of the style sheet is type in h1 the tag that we want to change,', 'start': 1149.499, 'duration': 4.805}, {'end': 1158.747, 'text': "and then inside of here there's tons of different things we can do, but it to change the color of the text.", 'start': 1154.304, 'duration': 4.443}, {'end': 1162.469, 'text': 'we just type in color and purple and that would allow us to change that.', 'start': 1158.747, 'duration': 3.722}, {'end': 1168.913, 'text': 'now, if we wanted to change the hover active and visited state for our link, all we do is type in a,', 'start': 1162.469, 'duration': 6.444}], 'summary': 'Demonstrating how to change h1 tag color in styles.css.', 'duration': 29.863, 'max_score': 1139.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1139050.jpg'}, {'end': 1349.507, 'src': 'embed', 'start': 1324.281, 'weight': 0, 'content': [{'end': 1330.963, 'text': 'which we just created top of page and then put a link to the bottom as well by using ID page bottom.', 'start': 1324.281, 'duration': 6.682}, {'end': 1338.884, 'text': "so you can see up here I'm using name to define this location, which again is kind of frowned upon, while down here I'm using ID,", 'start': 1330.963, 'duration': 7.921}, {'end': 1342.845, 'text': 'which is more of the preferred way, but I wanted to cover both, just so you can see what they look like.', 'start': 1338.884, 'duration': 3.961}, {'end': 1344.066, 'text': 'bottom of page.', 'start': 1342.845, 'duration': 1.221}, {'end': 1349.507, 'text': 'now throw a couple paragraph tags in here so you can actually see reload and there you can see top of page.', 'start': 1344.066, 'duration': 5.441}], 'summary': 'Created page with top and bottom links using name and id, demonstrating both methods.', 'duration': 25.226, 'max_score': 1324.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1324281.jpg'}, {'end': 1396.129, 'src': 'embed', 'start': 1362.25, 'weight': 4, 'content': [{'end': 1364.211, 'text': 'there is the preferred way to do that.', 'start': 1362.25, 'duration': 1.961}, {'end': 1368.452, 'text': "if you would want to provide a link, that's going to automatically open up email.", 'start': 1364.211, 'duration': 4.241}, {'end': 1370.24, 'text': "I'm sure many people have seen this.", 'start': 1368.939, 'duration': 1.301}, {'end': 1374.821, 'text': "You're going to go mail to, and then I could type in whatever AOL.com.", 'start': 1370.26, 'duration': 4.561}, {'end': 1378.823, 'text': "No, that's not my real email address and send an email.", 'start': 1375.061, 'duration': 3.762}, {'end': 1383.765, 'text': "And whenever this link is clicked on, it's going to open up the email application to find on the desktop.", 'start': 1379.143, 'duration': 4.622}, {'end': 1385.405, 'text': "And you're going to be able to send them an email.", 'start': 1383.965, 'duration': 1.44}, {'end': 1390.047, 'text': "Another thing that's kind of neat is you can also dynamically call for a JavaScript function to execute.", 'start': 1385.605, 'duration': 4.442}, {'end': 1396.129, 'text': "So in this situation, we're going to play around with this image again and jump over into this guy, create a new function.", 'start': 1390.287, 'duration': 5.842}], 'summary': 'Preferred method for creating links to open email, and dynamically calling javascript functions.', 'duration': 33.879, 'max_score': 1362.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1362250.jpg'}], 'start': 1052.217, 'title': 'Text formatting, hyperlinks and styling in html', 'summary': 'Covers various text formatting techniques in html such as superscript, subscript, bdo, dir, and ruby annotation, and also discusses creating hyperlinks, styling with css, using ids and names for page navigation, creating email links, changing text color, background color, and hyperlink states in css.', 'chapters': [{'end': 1096.739, 'start': 1052.217, 'title': 'Text formatting in html', 'summary': 'Discusses various text formatting techniques in html, including superscript, subscript, direction definition with bdo and dir, and ruby annotation for pronunciation.', 'duration': 44.522, 'highlights': ['The chapter explains the usage of superscript and subscript, such as for sup2 and CO2, as well as the method to define the direction for characters using BDO and DIR, RTL.', 'It also mentions the provision of Ruby annotation for pronunciation in HTML.']}, {'end': 1383.765, 'start': 1096.899, 'title': 'Html hyperlinks and styling', 'summary': 'Covers creating hyperlinks, styling with css, and using ids and names for page navigation in html. it also demonstrates how to create an email link, with examples of changing text color, background color, and hyperlink states in css.', 'duration': 286.866, 'highlights': ['The chapter covers creating hyperlinks, styling with CSS, and using IDs and names for page navigation in HTML. This is the main focus of the chapter, showcasing the key topics covered in the transcript.', 'Examples of changing text color, background color, and hyperlink states in CSS are provided. Demonstrates practical application of CSS for styling elements with specific examples.', "Demonstrates how to create an email link using 'mailto' Provides a specific example of creating an email link in HTML."]}], 'duration': 331.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1052217.jpg', 'highlights': ['The chapter covers creating hyperlinks, styling with CSS, and using IDs and names for page navigation in HTML. This is the main focus of the chapter, showcasing the key topics covered in the transcript.', 'Examples of changing text color, background color, and hyperlink states in CSS are provided. Demonstrates practical application of CSS for styling elements with specific examples.', 'The chapter explains the usage of superscript and subscript, such as for sup2 and CO2, as well as the method to define the direction for characters using BDO and DIR, RTL.', 'It also mentions the provision of Ruby annotation for pronunciation in HTML.', "Demonstrates how to create an email link using 'mailto' Provides a specific example of creating an email link in HTML."]}, {'end': 2011.224, 'segs': [{'end': 1484.817, 'src': 'embed', 'start': 1457.575, 'weight': 0, 'content': [{'end': 1464.82, 'text': 'now that I have the toggle image function created over here, I can jump over here and create a link, hreference equal to,', 'start': 1457.575, 'duration': 7.245}, {'end': 1474.626, 'text': 'and I can type in JavaScript and call that specific function that I just created toggle image and each time this is clicked on,', 'start': 1464.82, 'duration': 9.806}, {'end': 1475.947, 'text': "it's going to execute that.", 'start': 1474.626, 'duration': 1.321}, {'end': 1478.048, 'text': 'there you go over here reload.', 'start': 1475.947, 'duration': 2.101}, {'end': 1484.817, 'text': "you can see right there there is the image and if I click on toggle image it's going to disappear if I click on it again to reappear.", 'start': 1478.048, 'duration': 6.769}], 'summary': 'Created toggle image function to show/hide image on click.', 'duration': 27.242, 'max_score': 1457.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1457575.jpg'}, {'end': 1524.302, 'src': 'embed', 'start': 1493.584, 'weight': 1, 'content': [{'end': 1501.09, 'text': "another thing that's kind of neat is you're also going to be able to define hotspot links in images using something called image maps.", 'start': 1493.584, 'duration': 7.506}, {'end': 1503.392, 'text': "now you're going to have to go get yourself an image.", 'start': 1501.09, 'duration': 2.302}, {'end': 1508.196, 'text': "so i'm going to go image source is equal to there, that is, provide an alt for this.", 'start': 1503.392, 'duration': 4.804}, {'end': 1516.02, 'text': "let's just say image map example, and I'm going to define its width as well 600 as well as its height, which is going to be 125,", 'start': 1508.196, 'duration': 7.824}, {'end': 1524.302, 'text': "and then I'm going to type in use map, which is going to reference an image map, which I'm going to show you here in a second what that looks like.", 'start': 1516.02, 'duration': 8.282}], 'summary': 'Introduction to defining hotspot links in images using image maps.', 'duration': 30.718, 'max_score': 1493.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1493584.jpg'}, {'end': 1755.284, 'src': 'embed', 'start': 1719.267, 'weight': 2, 'content': [{'end': 1721.828, 'text': "It's even loading itself inside of here.", 'start': 1719.267, 'duration': 2.561}, {'end': 1725.229, 'text': 'Right like that, as you can see, change with a click and the PDF file.', 'start': 1722.088, 'duration': 3.141}, {'end': 1729.79, 'text': 'And then it also has the WAV file down here, but you might have to come in here and say run this plugin.', 'start': 1725.449, 'duration': 4.341}, {'end': 1734.251, 'text': 'Now there are numerous different things you can embed within object tags.', 'start': 1729.93, 'duration': 4.321}, {'end': 1735.532, 'text': 'Here are some of the other formats.', 'start': 1734.291, 'duration': 1.241}, {'end': 1739.573, 'text': 'You have Microsoft doc files, Java applets, MP3s, pings, JPEGs, GIFs.', 'start': 1735.572, 'duration': 4.001}, {'end': 1745.717, 'text': 'SVG vector images, text, MP4s, AVIs, WMVs, and QuickTime movies.', 'start': 1740.053, 'duration': 5.664}, {'end': 1751.321, 'text': "That's just a rundown of all those different things, and you embed them in exactly the same way that I just showed you.", 'start': 1746.057, 'duration': 5.264}, {'end': 1755.284, 'text': 'Another thing you can do is embed external resources in an iframe.', 'start': 1751.481, 'duration': 3.803}], 'summary': 'Various file formats can be embedded using object tags, including microsoft doc files, java applets, mp3s, pings, jpegs, gifs, svg vector images, text, mp4s, avis, wmvs, and quicktime movies.', 'duration': 36.017, 'max_score': 1719.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1719267.jpg'}, {'end': 1801.65, 'src': 'heatmap', 'start': 1695.706, 'weight': 5, 'content': [{'end': 1701.112, 'text': 'I could go param name is equal to autoplay and value is equal to true.', 'start': 1695.706, 'duration': 5.406}, {'end': 1704.536, 'text': "So as soon as this page loads, it's going to autoplay this wave file.", 'start': 1701.412, 'duration': 3.124}, {'end': 1708.44, 'text': 'I could also say that I wanted to use a controller for this wave file.', 'start': 1704.776, 'duration': 3.664}, {'end': 1712.365, 'text': "And there's just tons and tons of different things you can use parameter wise.", 'start': 1708.661, 'duration': 3.704}, {'end': 1714.025, 'text': "I'll leave that to you to look up.", 'start': 1712.785, 'duration': 1.24}, {'end': 1719.027, 'text': "And you can see right here that if I reload it, it's going to automatically load that PDF file inside of there.", 'start': 1714.225, 'duration': 4.802}, {'end': 1721.828, 'text': "It's even loading itself inside of here.", 'start': 1719.267, 'duration': 2.561}, {'end': 1725.229, 'text': 'Right like that, as you can see, change with a click and the PDF file.', 'start': 1722.088, 'duration': 3.141}, {'end': 1729.79, 'text': 'And then it also has the WAV file down here, but you might have to come in here and say run this plugin.', 'start': 1725.449, 'duration': 4.341}, {'end': 1734.251, 'text': 'Now there are numerous different things you can embed within object tags.', 'start': 1729.93, 'duration': 4.321}, {'end': 1735.532, 'text': 'Here are some of the other formats.', 'start': 1734.291, 'duration': 1.241}, {'end': 1739.573, 'text': 'You have Microsoft doc files, Java applets, MP3s, pings, JPEGs, GIFs.', 'start': 1735.572, 'duration': 4.001}, {'end': 1745.717, 'text': 'SVG vector images, text, MP4s, AVIs, WMVs, and QuickTime movies.', 'start': 1740.053, 'duration': 5.664}, {'end': 1751.321, 'text': "That's just a rundown of all those different things, and you embed them in exactly the same way that I just showed you.", 'start': 1746.057, 'duration': 5.264}, {'end': 1755.284, 'text': 'Another thing you can do is embed external resources in an iframe.', 'start': 1751.481, 'duration': 3.803}, {'end': 1759.825, 'text': "Just go iframe and you're going to define the width of whatever you want to put inside of here.", 'start': 1755.584, 'duration': 4.241}, {'end': 1761.426, 'text': 'Say 560.', 'start': 1760.146, 'duration': 1.28}, {'end': 1762.286, 'text': 'Your height again.', 'start': 1761.426, 'duration': 0.86}, {'end': 1763.607, 'text': 'And then source of course.', 'start': 1762.426, 'duration': 1.181}, {'end': 1765.407, 'text': "And I'll just embed a YouTube video.", 'start': 1763.967, 'duration': 1.44}, {'end': 1767.668, 'text': 'You could also say allow full screen.', 'start': 1765.427, 'duration': 2.241}, {'end': 1770.549, 'text': 'And then close that off and then close off your iframe.', 'start': 1767.908, 'duration': 2.641}, {'end': 1773.19, 'text': 'And there you can see it loaded that in there right in your screen.', 'start': 1770.689, 'duration': 2.501}, {'end': 1778.938, 'text': "You're also going to be able to embed interactive files like flash files with embed.", 'start': 1773.39, 'duration': 5.548}, {'end': 1781.402, 'text': "Again, you're going to type in source and then location.", 'start': 1779.078, 'duration': 2.324}, {'end': 1783.064, 'text': "Here's a random flash file.", 'start': 1781.662, 'duration': 1.402}, {'end': 1788.532, 'text': 'You might also want to actually reference the plugins by typing in plugins page.', 'start': 1783.284, 'duration': 5.248}, {'end': 1790.334, 'text': 'And then put that in there, write that.', 'start': 1788.792, 'duration': 1.542}, {'end': 1796.683, 'text': 'In this situation, the type is going to be application forward slash x shockwave flash.', 'start': 1790.515, 'duration': 6.168}, {'end': 1801.65, 'text': 'And then I went ahead and defined the width, the height loop, whether I want it to loop or not, over and over again,', 'start': 1796.904, 'duration': 4.746}], 'summary': 'The transcript discusses embedding various file formats and external resources using different html tags, such as object, iframe, and embed, including examples and parameters for autoplay, controllers, and dimensions.', 'duration': 105.944, 'max_score': 1695.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1695706.jpg'}, {'end': 1855.875, 'src': 'embed', 'start': 1829.035, 'weight': 6, 'content': [{'end': 1835.68, 'text': "we define that it's a WAV file and then we could also put a message inside of here if the browser doesn't support the audio tag and reload,", 'start': 1829.035, 'duration': 6.645}, {'end': 1837.041, 'text': 'and there you can see it plays.', 'start': 1835.68, 'duration': 1.361}, {'end': 1841.785, 'text': 'and then the final thing you can do is you can actually embed mp4s using the video tag.', 'start': 1837.041, 'duration': 4.744}, {'end': 1843.306, 'text': 'just type in video once again.', 'start': 1841.785, 'duration': 1.521}, {'end': 1846.088, 'text': 'you can define if you want controls, autoplay, loop, preload.', 'start': 1843.306, 'duration': 2.782}, {'end': 1851.712, 'text': 'you just provide the source right there and the type that you want to actually play on the screen, And there you can see it.', 'start': 1846.088, 'duration': 5.624}, {'end': 1855.875, 'text': "All right? So that's pretty much everything you can embed using HTML5.", 'start': 1852.032, 'duration': 3.843}], 'summary': 'Html5 allows embedding wav and mp4 files with various options for playback.', 'duration': 26.84, 'max_score': 1829.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1829035.jpg'}, {'end': 1887.988, 'src': 'embed', 'start': 1864.303, 'weight': 8, 'content': [{'end': 1870.628, 'text': 'Okay, with HTML5, we can now structure our data the way that it should be structured, like headers and footers,', 'start': 1864.303, 'duration': 6.325}, {'end': 1873.651, 'text': 'and sections and articles and all kinds of other cool things.', 'start': 1870.628, 'duration': 3.023}, {'end': 1875.973, 'text': "So let's first take a look at the header.", 'start': 1874.011, 'duration': 1.962}, {'end': 1877.474, 'text': 'It is just called header.', 'start': 1876.253, 'duration': 1.221}, {'end': 1882.223, 'text': 'just like that and of course it has a closing tag, like everything now inside of the header section.', 'start': 1877.659, 'duration': 4.564}, {'end': 1887.988, 'text': 'we could do something that makes sense, like putting in an image for our logo or whatever we want to put inside of there,', 'start': 1882.223, 'duration': 5.765}], 'summary': 'Html5 allows structuring data with headers, footers, sections, and articles, enabling easy organization and inclusion of elements like images.', 'duration': 23.685, 'max_score': 1864.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1864303.jpg'}], 'start': 1383.965, 'title': 'Javascript functions and html5 media embedding', 'summary': 'Covers creating dynamic javascript functions for image visibility, using image maps for hotspot links, embedding external file formats, and embedding audio, video, flash, and external resources in html5. it also includes structuring data with header, nav, main, section, and article tags.', 'chapters': [{'end': 1679.843, 'start': 1383.965, 'title': 'Javascript functions and image mapping', 'summary': 'Explains the creation of a dynamic javascript function for toggling image visibility, the use of image maps for defining hotspot links, and embedding external file formats using the object tag.', 'duration': 295.878, 'highlights': ['Creation of a dynamic JavaScript function for toggling image visibility The tutorial explains the creation of a JavaScript function to dynamically toggle image visibility, allowing users to make the image visible or hidden by clicking on a specific link.', 'Use of image maps for defining hotspot links The tutorial demonstrates the use of image maps to define hotspot links within images, allowing users to click on different areas of an image to navigate to different URLs.', 'Embedding external file formats using the object tag The tutorial showcases how to embed external file formats, such as PDF and HTML files, within a web page using the object tag, providing examples of defining the type, width, and height for each format.']}, {'end': 2011.224, 'start': 1680.023, 'title': 'Embedding media and structuring data in html5', 'summary': 'Explains how to embed various media formats and structure data in html5, including embedding audio, video, flash, and external resources, as well as structuring data with header, nav, main, section, and article tags.', 'duration': 331.201, 'highlights': ['You can embed various media formats such as wave files, PDFs, Microsoft doc files, Java applets, MP3s, pings, JPEGs, GIFs, SVG vector images, text, MP4s, AVIs, WMVs, and QuickTime movies using object tags. The chapter demonstrates how to embed various media formats using object tags, including wave files, PDFs, Microsoft doc files, Java applets, MP3s, pings, JPEGs, GIFs, SVG vector images, text, MP4s, AVIs, WMVs, and QuickTime movies.', 'You can embed external resources like YouTube videos using iframe tags and specify parameters such as width, height, and allowfullscreen. The chapter explains how to embed external resources like YouTube videos using iframe tags and how to specify parameters such as width, height, and allowfullscreen.', 'Flash files can be embedded using the embed tag by defining the source, type, width, height, loop, and quality. The chapter demonstrates how to embed Flash files using the embed tag and how to define the source, type, width, height, loop, and quality.', 'You can embed MP3 files using the audio tag and specify parameters such as controls, autoplay, loop, preload, and a fallback message for unsupported browsers. The chapter explains how to embed MP3 files using the audio tag and how to specify parameters such as controls, autoplay, loop, preload, and a fallback message for unsupported browsers.', 'MP4s can be embedded using the video tag with options to define controls, autoplay, loop, preload, source, and type. The chapter demonstrates how to embed MP4s using the video tag and the options to define controls, autoplay, loop, preload, source, and type.', 'HTML5 introduces new tags such as header, nav, main, section, and article for structuring data, allowing for the creation of headers, navigation sections, main content, blocks of content, and self-contained articles. The chapter introduces new tags in HTML5 for structuring data, including header, nav, main, section, and article, and explains their usage for creating headers, navigation sections, main content, blocks of content, and self-contained articles.']}], 'duration': 627.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA1383965.jpg', 'highlights': ['Demonstrates creation of dynamic JavaScript function for toggling image visibility', 'Explains use of image maps to define hotspot links within images', 'Showcases embedding external file formats using the object tag', 'Demonstrates embedding various media formats using object tags', 'Explains embedding external resources like YouTube videos using iframe tags', 'Demonstrates embedding Flash files using the embed tag', 'Explains embedding MP3 files using the audio tag', 'Demonstrates embedding MP4s using the video tag', 'Introduces new HTML5 tags for structuring data such as header, nav, main, section, and article']}, {'end': 2584.093, 'segs': [{'end': 2094.806, 'src': 'embed', 'start': 2062.63, 'weight': 0, 'content': [{'end': 2064.911, 'text': 'And ordered is another list type.', 'start': 2062.63, 'duration': 2.281}, {'end': 2066.393, 'text': 'And then we have definition.', 'start': 2065.072, 'duration': 1.321}, {'end': 2068.514, 'text': "and I'll show you all of these here in a second.", 'start': 2066.652, 'duration': 1.862}, {'end': 2073.137, 'text': "and then, of course, you're going to close off your unordered list with a forward slash and unordered.", 'start': 2068.514, 'duration': 4.623}, {'end': 2080.341, 'text': 'now, if you have ordered lists, those are going to start off with ol and then put an id inside of here like this,', 'start': 2073.137, 'duration': 7.204}, {'end': 2083.342, 'text': "and then let's say we want to do like a list of all.", 'start': 2080.341, 'duration': 3.001}, {'end': 2086.224, 'text': 'you can see li tags, just like with the unordered list.', 'start': 2083.342, 'duration': 2.882}, {'end': 2094.806, 'text': "say we want to do a list of popular children's books and then on top of that let's say we want to indent, so we'll have a list inside of a list.", 'start': 2086.224, 'duration': 8.582}], 'summary': 'The transcript explains the usage of ordered and unordered lists in html.', 'duration': 32.176, 'max_score': 2062.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2062630.jpg'}, {'end': 2279.806, 'src': 'embed', 'start': 2244.512, 'weight': 3, 'content': [{'end': 2250.375, 'text': "And let's also say that we want to have our color for each of our links in our navigation section to be white.", 'start': 2244.512, 'duration': 5.863}, {'end': 2254.173, 'text': 'Jump over here, reload this, and you can see it looks a little bit nicer.', 'start': 2250.871, 'duration': 3.302}, {'end': 2255.594, 'text': 'Now this is float left.', 'start': 2254.433, 'duration': 1.161}, {'end': 2256.974, 'text': 'You can see all that lines up.', 'start': 2255.754, 'duration': 1.22}, {'end': 2258.335, 'text': "There's the navigation section.", 'start': 2257.014, 'duration': 1.321}, {'end': 2261.637, 'text': 'You can see I changed that with the background black, and I changed the text to white.', 'start': 2258.355, 'duration': 3.282}, {'end': 2263.258, 'text': 'Just playing around a little bit.', 'start': 2262.117, 'duration': 1.141}, {'end': 2268.26, 'text': "If I wanted to do anything specific with the main tag, and I'm just referring to this guy, so here we are.", 'start': 2263.278, 'duration': 4.982}, {'end': 2271.182, 'text': 'Remember, main is going to surround everything for us here.', 'start': 2268.28, 'duration': 2.902}, {'end': 2273.043, 'text': 'Our main content area, this guy.', 'start': 2271.322, 'duration': 1.721}, {'end': 2274.544, 'text': 'Jump back over into styles.', 'start': 2273.223, 'duration': 1.321}, {'end': 2276.885, 'text': 'I can reference main just by going main.', 'start': 2274.804, 'duration': 2.081}, {'end': 2279.806, 'text': "and let's say i wanted to do some padding for that as well.", 'start': 2277.325, 'duration': 2.481}], 'summary': 'Changed navigation background to black and text to white, also applied padding to main tag.', 'duration': 35.294, 'max_score': 2244.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2244512.jpg'}, {'end': 2352.606, 'src': 'embed', 'start': 2320.909, 'weight': 2, 'content': [{'end': 2321.97, 'text': 'Close the DD tag.', 'start': 2320.909, 'duration': 1.061}, {'end': 2323.851, 'text': 'Close the DL tag also.', 'start': 2322.03, 'duration': 1.821}, {'end': 2329.056, 'text': "Actually, we'll need this inside of here, and if we reload it, you can see exactly how that definition works.", 'start': 2324.232, 'duration': 4.824}, {'end': 2334.36, 'text': "Basically, the DFN is going to put this in italic, and it's going to indent the definition itself right there.", 'start': 2329.136, 'duration': 5.224}, {'end': 2336.901, 'text': 'We could also put asides inside of here.', 'start': 2334.62, 'duration': 2.281}, {'end': 2340.142, 'text': 'Aside like that, just some basic information.', 'start': 2336.921, 'duration': 3.221}, {'end': 2342.563, 'text': 'And then, of course, close off our article altogether.', 'start': 2340.482, 'duration': 2.081}, {'end': 2344.103, 'text': 'Make this a little bit interesting.', 'start': 2342.803, 'duration': 1.3}, {'end': 2348.345, 'text': 'We can go into the style section and reference the aside right here.', 'start': 2344.123, 'duration': 4.222}, {'end': 2352.606, 'text': "And let's say that we want all of our asides to have a different background color.", 'start': 2348.645, 'duration': 3.961}], 'summary': 'Html tags are used to create specific styles and formatting, including italicizing, indenting, and adding background color.', 'duration': 31.697, 'max_score': 2320.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2320909.jpg'}, {'end': 2429.895, 'src': 'embed', 'start': 2397.406, 'weight': 5, 'content': [{'end': 2400.669, 'text': 'Now our unordered lists can have many different types.', 'start': 2397.406, 'duration': 3.263}, {'end': 2405.794, 'text': "So we'll just reference our unordered list again just by putting its ID that we assigned to it.", 'start': 2401.049, 'duration': 4.745}, {'end': 2407.075, 'text': 'Unordered list types.', 'start': 2406.114, 'duration': 0.961}, {'end': 2411.038, 'text': "And let's say that I want to, let's actually, I'll just show you all of them.", 'start': 2407.535, 'duration': 3.503}, {'end': 2415.422, 'text': "There's all the different unordered list types, decimals, all these different things.", 'start': 2411.318, 'duration': 4.104}, {'end': 2419.165, 'text': "Those are all the different ones you're going to use or you can use in an ordered list.", 'start': 2415.442, 'duration': 3.723}, {'end': 2422.048, 'text': "In this situation, I'm just going to go list style type.", 'start': 2419.426, 'duration': 2.622}, {'end': 2429.895, 'text': "like this and i'm going to have upper roman for the regular ordered list type and then for my indent,", 'start': 2422.268, 'duration': 7.627}], 'summary': 'Exploring different types of unordered lists and list style types in web development.', 'duration': 32.489, 'max_score': 2397.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2397406.jpg'}, {'end': 2499.236, 'src': 'embed', 'start': 2472.811, 'weight': 7, 'content': [{'end': 2478.056, 'text': 'We could come in here and put a caption to define the table title or whatever you want to call it.', 'start': 2472.811, 'duration': 5.245}, {'end': 2479.217, 'text': "So let's say baseball.", 'start': 2478.196, 'duration': 1.021}, {'end': 2481.439, 'text': "You'll see here in a second exactly what that looks like.", 'start': 2479.457, 'duration': 1.982}, {'end': 2486.523, 'text': "If we want to put a header inside of here for all of the data we're going to be showing,", 'start': 2481.459, 'duration': 5.064}, {'end': 2492.549, 'text': 'we could just go THead and then we could define how much or how many rows are going to be defined inside here.', 'start': 2486.523, 'duration': 6.026}, {'end': 2499.236, 'text': "so just go tr, so that's table row, and then we can define the number of columns with column span.", 'start': 2492.549, 'duration': 6.687}], 'summary': 'Demonstration of defining table structure with captions and headers.', 'duration': 26.425, 'max_score': 2472.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2472811.jpg'}, {'end': 2539.742, 'src': 'embed', 'start': 2515.323, 'weight': 6, 'content': [{'end': 2520.926, 'text': 'if you want to put a footer on your table, you want to put this next, right after you define the heading section,', 'start': 2515.323, 'duration': 5.603}, {'end': 2526.889, 'text': "and again you're gonna put table row, what you're defining here, and then we could come in and do the number of columns.", 'start': 2520.926, 'duration': 5.963}, {'end': 2530.633, 'text': 'so how many columns is the footer going to Take up?', 'start': 2526.889, 'duration': 3.744}, {'end': 2531.917, 'text': "say that's also going to be four.", 'start': 2530.633, 'duration': 1.284}, {'end': 2539.742, 'text': "And then let's say that we're going to be referencing Hall of Fame based off of whether there's a star next to the player's name or something like that.", 'start': 2532.158, 'duration': 7.584}], 'summary': 'The footer of the table will occupy four columns and reference the hall of fame based on certain player attributes.', 'duration': 24.419, 'max_score': 2515.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2515323.jpg'}], 'start': 2011.545, 'title': 'Html structure, styling, lists, and tables', 'summary': 'Covers the structure of html elements, styling using css, unordered and ordered lists, definition lists, navigation styling, different list types, and creating tables in html, with specific css properties and values demonstrated.', 'chapters': [{'end': 2397.138, 'start': 2011.545, 'title': 'Html structure and styling', 'summary': 'Covers the structure of html elements like lists, navigation, headers, and styling using css, including examples of unordered and ordered lists, definition lists, navigation styling, and using different bullet types, with specific css properties and values demonstrated.', 'duration': 385.593, 'highlights': ['Demonstrating the structure of unordered and ordered lists with specific HTML tags and attributes. The transcript covers creating unordered and ordered lists in HTML, demonstrating the use of ul and ol tags, assigning IDs, and using li tags to represent list items, providing a practical example for creating different types of lists.', "Styling the navigation section using CSS properties like display, padding, and background color. It includes examples of using CSS to style the navigation section, modifying display properties to 'block,' setting padding values, changing background color to black, and altering text color to white for improved styling.", 'Applying CSS to style the main content area, including padding and other design elements. The transcript demonstrates applying CSS to style the main content area, using padding properties, and specifying pixel values for different design elements to enhance the visual appearance of the content.', 'Explaining the usage of definition lists and styling them using HTML and CSS. It explains the usage of definition lists in HTML, demonstrating the structure with dl, dt, and dd tags, and showcases the styling of definition lists with italics and indentation, providing a comprehensive understanding of creating and styling definition lists.']}, {'end': 2584.093, 'start': 2397.406, 'title': 'Html lists and tables', 'summary': 'Covers different types of unordered lists and creating a table in html, including defining list style types and creating table sections with headers, footers, and body.', 'duration': 186.687, 'highlights': ['Defining different types of unordered lists, such as decimals and upper roman, and changing list indent Covers the different types of unordered lists and the ability to change list indentation.', 'Creating a table with sections for header, footer, and body, and defining the number of rows and columns Explains the process of creating a table in HTML, including defining sections and the number of rows and columns.', 'Adding a caption to define the table title and populating the table with data Describes the steps to add a caption to the table and populate it with data.']}], 'duration': 572.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2011545.jpg', 'highlights': ['Covers the structure of html elements, styling using css, unordered and ordered lists, definition lists, navigation styling, different list types, and creating tables in html, with specific css properties and values demonstrated.', 'Demonstrating the structure of unordered and ordered lists with specific HTML tags and attributes. The transcript covers creating unordered and ordered lists in HTML, demonstrating the use of ul and ol tags, assigning IDs, and using li tags to represent list items, providing a practical example for creating different types of lists.', 'Explaining the usage of definition lists and styling them using HTML and CSS. It explains the usage of definition lists in HTML, demonstrating the structure with dl, dt, and dd tags, and showcases the styling of definition lists with italics and indentation, providing a comprehensive understanding of creating and styling definition lists.', "Styling the navigation section using CSS properties like display, padding, and background color. It includes examples of using CSS to style the navigation section, modifying display properties to 'block,' setting padding values, changing background color to black, and altering text color to white for improved styling.", 'Applying CSS to style the main content area, including padding and other design elements. The transcript demonstrates applying CSS to style the main content area, using padding properties, and specifying pixel values for different design elements to enhance the visual appearance of the content.', 'Defining different types of unordered lists, such as decimals and upper roman, and changing list indent Covers the different types of unordered lists and the ability to change list indentation.', 'Creating a table with sections for header, footer, and body, and defining the number of rows and columns Explains the process of creating a table in HTML, including defining sections and the number of rows and columns.', 'Adding a caption to define the table title and populating the table with data Describes the steps to add a caption to the table and populate it with data.']}, {'end': 3058.724, 'segs': [{'end': 2614.228, 'src': 'embed', 'start': 2584.433, 'weight': 0, 'content': [{'end': 2585.534, 'text': "Here's the main header.", 'start': 2584.433, 'duration': 1.101}, {'end': 2587.876, 'text': "This is where we're defining our table body.", 'start': 2585.814, 'duration': 2.062}, {'end': 2589.617, 'text': 'And then here is the footer section.', 'start': 2588.116, 'duration': 1.501}, {'end': 2592.499, 'text': 'Then we can jump over into the style sheet again, clean that up.', 'start': 2589.777, 'duration': 2.722}, {'end': 2593.66, 'text': 'So it looks a little bit nicer.', 'start': 2592.54, 'duration': 1.12}, {'end': 2596.703, 'text': "So let's just refer to table data with that ID.", 'start': 2593.861, 'duration': 2.842}, {'end': 2602.155, 'text': "And let's define its width and let's also throw on a border if you'd want to do that.", 'start': 2597.39, 'duration': 4.765}, {'end': 2606.8, 'text': "Let's say it's a three pixel border and it's going to be solid and it's going to be black.", 'start': 2602.235, 'duration': 4.565}, {'end': 2614.228, 'text': 'Then what we can do is also target in on the table columns and the headers and so forth just by going table data.', 'start': 2607.02, 'duration': 7.208}], 'summary': 'Defining table body, adjusting style for cleaner look, setting 3px solid black border.', 'duration': 29.795, 'max_score': 2584.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2584433.jpg'}, {'end': 2709.669, 'src': 'heatmap', 'start': 2655.15, 'weight': 1, 'content': [{'end': 2657.552, 'text': 'So if we want to do copyright, in there you can do that.', 'start': 2655.15, 'duration': 2.402}, {'end': 2662.016, 'text': 'And then we can jump into the style section and reference the footer just by typing in footer.', 'start': 2657.732, 'duration': 4.284}, {'end': 2665.418, 'text': 'And then we can come in and find the background color.', 'start': 2662.376, 'duration': 3.042}, {'end': 2667.38, 'text': "The text color, let's make that white.", 'start': 2665.578, 'duration': 1.802}, {'end': 2669.081, 'text': 'Again, just so it sticks out.', 'start': 2667.6, 'duration': 1.481}, {'end': 2672.265, 'text': 'and just give it a padding of 10 everywhere.', 'start': 2669.481, 'duration': 2.784}, {'end': 2673.586, 'text': "And there you can see it's a footer.", 'start': 2672.505, 'duration': 1.081}, {'end': 2677.831, 'text': "So it's a nice way to structure all of your data inside of HTML5.", 'start': 2673.726, 'duration': 4.105}, {'end': 2684.88, 'text': "Okay, so now I'll get into forms and how to send data to servers and all the different types of inputs you can get.", 'start': 2678.292, 'duration': 6.588}, {'end': 2691.402, 'text': "So, of course, we're going to type in form and I'm going to use the get method in this situation.", 'start': 2685.24, 'duration': 6.162}, {'end': 2699.425, 'text': "And what that means is that the data that's going to be passed is going to be embedded into the URL that we're going to be using here.", 'start': 2691.762, 'duration': 7.663}, {'end': 2708.028, 'text': "And then what I need to do is point out to a PHP script in this situation that all this data is going to be sent to and then it's going to be processed.", 'start': 2699.705, 'duration': 8.323}, {'end': 2709.669, 'text': 'Of course, put our closing tags.', 'start': 2708.088, 'duration': 1.581}], 'summary': 'Demonstration of coding html5 including copyright and form usage.', 'duration': 54.519, 'max_score': 2655.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2655150.jpg'}, {'end': 2764.444, 'src': 'embed', 'start': 2739.195, 'weight': 7, 'content': [{'end': 2744.017, 'text': 'Okay, So, just to see what that looks like, we could put something like your name like this,', 'start': 2739.195, 'duration': 4.822}, {'end': 2749.259, 'text': "and that's going to show up in the HTML and then go input, just for a basic input text box.", 'start': 2744.017, 'duration': 5.242}, {'end': 2755.781, 'text': 'We could then go text name, which is what I was referring to over inside of my PHP code.', 'start': 2749.619, 'duration': 6.162}, {'end': 2758.282, 'text': 'I can define the size that this is going to be.', 'start': 2756.081, 'duration': 2.201}, {'end': 2764.444, 'text': "So let's say that we want room for 50 characters, and I could also come in and define a max length.", 'start': 2758.302, 'duration': 6.142}], 'summary': 'Demonstrating html input with 50 characters limit and max length.', 'duration': 25.249, 'max_score': 2739.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2739195.jpg'}, {'end': 2853.324, 'src': 'embed', 'start': 2814.283, 'weight': 2, 'content': [{'end': 2816.804, 'text': "and then we're going to put a break statement or something like that.", 'start': 2814.283, 'duration': 2.521}, {'end': 2817.645, 'text': 'We can do that.', 'start': 2817.045, 'duration': 0.6}, {'end': 2823.605, 'text': "And then we could also go, that is a great password or something, and print the user's password.", 'start': 2818.001, 'duration': 5.604}, {'end': 2825.246, 'text': "And that's all we need for the PHP.", 'start': 2823.865, 'duration': 1.381}, {'end': 2827.848, 'text': 'So we have to go over into the HTML again.', 'start': 2825.486, 'duration': 2.362}, {'end': 2833.972, 'text': 'If we want to provide a way for them to submit data, go input, type, equal to, submit.', 'start': 2828.148, 'duration': 5.824}, {'end': 2837.054, 'text': "Name is equal to submit, or that's what I'm going to make it anyway.", 'start': 2834.252, 'duration': 2.802}, {'end': 2839.296, 'text': "And value, I'm going to also make that submit.", 'start': 2837.394, 'duration': 1.902}, {'end': 2843.679, 'text': "Well, value is what's going to show up inside the button, so let's make that uppercase.", 'start': 2839.596, 'duration': 4.083}, {'end': 2852.324, 'text': 'Another thing just to know, if you wanted to provide a way for them to reset everything that has been entered inside of here, this is another button.', 'start': 2844.036, 'duration': 8.288}, {'end': 2853.324, 'text': 'This is the reset button.', 'start': 2852.344, 'duration': 0.98}], 'summary': 'Adding php password validation and html input for submission and reset.', 'duration': 39.041, 'max_score': 2814.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2814283.jpg'}, {'end': 2899.742, 'src': 'embed', 'start': 2870.663, 'weight': 3, 'content': [{'end': 2877.548, 'text': 'All right, if you would like them to be able to enter a ton of information, so say something like your history or something like that.', 'start': 2870.663, 'duration': 6.885}, {'end': 2878.268, 'text': "that's going to be long.", 'start': 2877.548, 'duration': 0.72}, {'end': 2880.329, 'text': "you're going to use what's called a text area.", 'start': 2878.268, 'duration': 2.061}, {'end': 2884.132, 'text': 'And here you just type in text area, give it a name of history.', 'start': 2880.65, 'duration': 3.482}, {'end': 2887.174, 'text': "You're going to be able to get all this exactly the same way you got everything else.", 'start': 2884.152, 'duration': 3.022}, {'end': 2893.578, 'text': 'You can define the number of rows that are used, number of columns that are used, and then, inside of here,', 'start': 2887.514, 'duration': 6.064}, {'end': 2899.742, 'text': 'you could also put the text that shows up just random words and then close off the text area.', 'start': 2893.578, 'duration': 6.164}], 'summary': 'Using a text area, users can enter a large amount of information, with options to define rows and columns.', 'duration': 29.079, 'max_score': 2870.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2870663.jpg'}, {'end': 2954.702, 'src': 'embed', 'start': 2926.509, 'weight': 5, 'content': [{'end': 2929.45, 'text': 'So type legend, hobbies, like that.', 'start': 2926.509, 'duration': 2.941}, {'end': 2935.413, 'text': 'We could create a checkbox with programming and then input type is equal to checkbox.', 'start': 2929.69, 'duration': 5.723}, {'end': 2939.974, 'text': 'Give it a name, checkbox, programming, value, programming.', 'start': 2935.853, 'duration': 4.121}, {'end': 2942.636, 'text': 'And then you could put another one inside of here.', 'start': 2940.335, 'duration': 2.301}, {'end': 2949.138, 'text': "Checkbox, of course, you're going to be able to select multiple checkboxes, but not multiple radio buttons, which we're going to see here in a second.", 'start': 2942.936, 'duration': 6.202}, {'end': 2950.539, 'text': 'And just change this to running.', 'start': 2949.418, 'duration': 1.121}, {'end': 2954.702, 'text': "and value running and you can see there that's the field set.", 'start': 2951.219, 'duration': 3.483}], 'summary': 'Creating checkboxes for programming and running hobbies.', 'duration': 28.193, 'max_score': 2926.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2926509.jpg'}, {'end': 3022.781, 'src': 'embed', 'start': 2984.473, 'weight': 4, 'content': [{'end': 2986.573, 'text': 'you want to make sure that the name is equal,', 'start': 2984.473, 'duration': 2.1}, {'end': 2992.155, 'text': 'and another thing you can do is have one of them checked by default by just coming in here and typing in checked,', 'start': 2986.573, 'duration': 5.582}, {'end': 2995.787, 'text': 'and now you can see I can only check one at a time, but this was checked by default.', 'start': 2992.155, 'duration': 3.632}, {'end': 3002.471, 'text': 'If you want to provide the users multiple different options, like you could do favorite number, use the select box,', 'start': 2995.847, 'duration': 6.624}, {'end': 3005.952, 'text': "select and we're going to give it the name of favorite num.", 'start': 3002.471, 'duration': 3.481}, {'end': 3013.296, 'text': 'close off the select and then you just provide all the different options you want available with option and then just type in a value, say pi,', 'start': 3005.952, 'duration': 7.344}, {'end': 3017.518, 'text': 'and then what actually shows up will be this and then close off your option.', 'start': 3013.296, 'duration': 4.222}, {'end': 3022.781, 'text': 'And put in a couple more options, reload it, and now you can see it has a little drop-down box we can use to select.', 'start': 3017.758, 'duration': 5.023}], 'summary': 'Demonstrating form input options for users, such as checkboxes and select boxes with multiple options.', 'duration': 38.308, 'max_score': 2984.473, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2984473.jpg'}], 'start': 2584.433, 'title': 'Html5 table styling, form processing, user input collection, and input field creation', 'summary': 'Covers html5 table styling, including defining table body, footer, and applying style changes. it discusses form processing using the get method and php script for data processing. it also explains how to collect user input using php and html, defining input fields for name and password. additionally, it covers creating input fields like text area, checkboxes, radio buttons, and select boxes, providing details about their usage and options available for user input.', 'chapters': [{'end': 2722.432, 'start': 2584.433, 'title': 'Html5 table styling and form processing', 'summary': 'Covers html5 table styling by defining table body, footer, and applying style changes, resulting in a visually improved table, and then moves on to discussing form processing using the get method and php script for data processing.', 'duration': 137.999, 'highlights': ['HTML5 table styling Explains the process of defining table body, footer, and applying style changes, resulting in a visually improved table.', 'Form processing using the get method Demonstrates the use of the get method for passing data embedded in the URL and pointing out to a PHP script for data processing.']}, {'end': 2870.34, 'start': 2722.692, 'title': 'Collecting user input with php and html', 'summary': 'Explains how to collect user input using php and html, including defining input fields for name and password, handling user input in php, and providing options to submit and reset the form.', 'duration': 147.648, 'highlights': ['Defining input fields for name and password Explains the process of defining input fields for name and password in HTML, including setting the size and maximum length for the input fields.', 'Handling user input in PHP Demonstrates how to handle user input in PHP by accessing the input data and printing it out on the screen, including concatenating strings and using the echo statement.', 'Providing options to submit and reset the form Explains how to provide options for users to submit and reset the form in HTML by creating input buttons with appropriate values and names.']}, {'end': 3058.724, 'start': 2870.663, 'title': 'Creating input fields and selection boxes', 'summary': 'Explains how to create input fields like text area, checkboxes, radio buttons, and select boxes, providing the details about their usage and options available for user input.', 'duration': 188.061, 'highlights': ['Explaining the usage of text area for entering a ton of information and specifying the number of rows and columns used The text area allows entering a large amount of information, and the number of rows and columns can be defined for user input.', 'Demonstrating the creation of checkboxes and the ability to select multiple options The process of creating checkboxes is explained, highlighting the capability to select multiple options for user input.', 'Describing the usage of radio buttons and ensuring that only one option can be selected at a time The usage of radio buttons is detailed, emphasizing that only one option can be selected at a time and how to set a default selection.', 'Illustrating the creation of a select box to provide users with multiple options using a drop-down selection The process of creating a select box is illustrated, demonstrating how to offer users multiple options through a drop-down selection.']}], 'duration': 474.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA2584433.jpg', 'highlights': ['HTML5 table styling Explains the process of defining table body, footer, and applying style changes, resulting in a visually improved table.', 'Form processing using the get method Demonstrates the use of the get method for passing data embedded in the URL and pointing out to a PHP script for data processing.', 'Handling user input in PHP Demonstrates how to handle user input in PHP by accessing the input data and printing it out on the screen, including concatenating strings and using the echo statement.', 'Explaining the usage of text area for entering a ton of information and specifying the number of rows and columns used The text area allows entering a large amount of information, and the number of rows and columns can be defined for user input.', 'Describing the usage of radio buttons and ensuring that only one option can be selected at a time The usage of radio buttons is detailed, emphasizing that only one option can be selected at a time and how to set a default selection.', 'Demonstrating the creation of checkboxes and the ability to select multiple options The process of creating checkboxes is explained, highlighting the capability to select multiple options for user input.', 'Illustrating the creation of a select box to provide users with multiple options using a drop-down selection The process of creating a select box is illustrated, demonstrating how to offer users multiple options through a drop-down selection.', 'Defining input fields for name and password Explains the process of defining input fields for name and password in HTML, including setting the size and maximum length for the input fields.', 'Providing options to submit and reset the form Explains how to provide options for users to submit and reset the form in HTML by creating input buttons with appropriate values and names.']}, {'end': 3897.277, 'segs': [{'end': 3148.139, 'src': 'embed', 'start': 3119.755, 'weight': 0, 'content': [{'end': 3123.318, 'text': "And now let's take a look at Canvas, which is quite cool.", 'start': 3119.755, 'duration': 3.563}, {'end': 3130.024, 'text': "Inside of a little Canvas area or inside of a defined shape, you're going to be able to paint shapes and text and do all kinds of other cool things.", 'start': 3123.598, 'duration': 6.426}, {'end': 3135.649, 'text': "And to provide for that option, you just type in Canvas ID, and you're going to be referring to that.", 'start': 3130.204, 'duration': 5.445}, {'end': 3139.293, 'text': "So we'll go Canvas, and we can define what size it's going to be.", 'start': 3135.749, 'duration': 3.544}, {'end': 3144.157, 'text': "And with the CSS code, you'll be able to come in here and define where it's placed and everything else.", 'start': 3139.333, 'duration': 4.824}, {'end': 3145.358, 'text': "But let's just keep this simple.", 'start': 3144.197, 'duration': 1.161}, {'end': 3148.139, 'text': "And then you'll have a closing canvas tag.", 'start': 3145.638, 'duration': 2.501}], 'summary': 'Canvas allows painting shapes and text in defined areas using canvas id and css code.', 'duration': 28.384, 'max_score': 3119.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3119755.jpg'}, {'end': 3376.665, 'src': 'embed', 'start': 3351.085, 'weight': 1, 'content': [{'end': 3355.989, 'text': 'If we want to now draw polygons or draw just oddly shaped things.', 'start': 3351.085, 'duration': 4.904}, {'end': 3359.013, 'text': "Again, we're changing the color again just because I want to.", 'start': 3356.391, 'duration': 2.622}, {'end': 3362.897, 'text': "You don't have to change the color every single time you do this unless you want the color to change.", 'start': 3359.273, 'duration': 3.624}, {'end': 3367, 'text': "Again, we're going to be drawing a new thing, so we have to go Begin Path.", 'start': 3363.117, 'duration': 3.883}, {'end': 3368.682, 'text': 'And then to draw your polygons.', 'start': 3367.16, 'duration': 1.522}, {'end': 3376.665, 'text': "what you have to do is first off, move to the first XY position where you want to start drawing like that and then you're going to draw lines.", 'start': 3368.682, 'duration': 7.983}], 'summary': 'Drawing polygons involves moving to the first position and drawing lines.', 'duration': 25.58, 'max_score': 3351.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3351085.jpg'}, {'end': 3523.222, 'src': 'embed', 'start': 3499.204, 'weight': 3, 'content': [{'end': 3505.589, 'text': "Another thing that might be worth mentioning is we can also come in and let's change this fill style right here, because it doesn't really matter.", 'start': 3499.204, 'duration': 6.385}, {'end': 3513.495, 'text': 'We could also go RGBA and this is going to allow us to define the amount of red, green, and blue.', 'start': 3505.829, 'duration': 7.666}, {'end': 3518.338, 'text': "And also we'll be able to come in and define the opacity so you can actually see through it.", 'start': 3513.835, 'duration': 4.503}, {'end': 3519.839, 'text': "Another thing that's kind of neat.", 'start': 3518.578, 'duration': 1.261}, {'end': 3523.222, 'text': "And now you can say, see, it's opaque so you can see what's underneath of it.", 'start': 3520.12, 'duration': 3.102}], 'summary': 'Demonstrating rgba fill style for defining color and opacity.', 'duration': 24.018, 'max_score': 3499.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3499204.jpg'}, {'end': 3559.614, 'src': 'embed', 'start': 3537.083, 'weight': 2, 'content': [{'end': 3546.148, 'text': 'Again, the starting x position, the starting y position for this gradient, our radius in this situation, and then the ending circle xy.', 'start': 3537.083, 'duration': 9.065}, {'end': 3549.849, 'text': 'So this is going to be like 290, 260, 100.', 'start': 3546.328, 'duration': 3.521}, {'end': 3550.991, 'text': "And that's going to be the radius.", 'start': 3549.85, 'duration': 1.141}, {'end': 3553.672, 'text': "And then you're going to come in and again do color stops.", 'start': 3551.311, 'duration': 2.361}, {'end': 3559.614, 'text': "So radial gradient, add color stop, and we'll start it off at zero and make this red.", 'start': 3553.732, 'duration': 5.882}], 'summary': 'Setting a radial gradient with a radius of 100 at position (290, 260) and adding a red color stop at zero.', 'duration': 22.531, 'max_score': 3537.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3537083.jpg'}, {'end': 3623.99, 'src': 'embed', 'start': 3597.296, 'weight': 4, 'content': [{'end': 3605.32, 'text': "So let's say I want to go and create a font that is bold and 40 pixels and is Arial.", 'start': 3597.296, 'duration': 8.024}, {'end': 3606.14, 'text': 'I can do that.', 'start': 3605.6, 'duration': 0.54}, {'end': 3610.522, 'text': 'CTX, fill styles, going to define the color, this.', 'start': 3606.38, 'duration': 4.142}, {'end': 3613.184, 'text': 'And then we just go fill text.', 'start': 3610.542, 'duration': 2.642}, {'end': 3615.305, 'text': "And let's say I want to type in hello.", 'start': 3613.524, 'duration': 1.781}, {'end': 3616.906, 'text': 'And 100, 100.', 'start': 3615.645, 'duration': 1.261}, {'end': 3617.946, 'text': "And there's hello.", 'start': 3616.906, 'duration': 1.04}, {'end': 3620.748, 'text': 'We could also stroke the text as well, CTX.', 'start': 3618.147, 'duration': 2.601}, {'end': 3623.99, 'text': "And here we'll do stroke style, which is the stroke color.", 'start': 3621.228, 'duration': 2.762}], 'summary': "Creating a bold 40-pixel arial font and typing 'hello' at coordinates 100,100 using ctx fill and stroke styles.", 'duration': 26.694, 'max_score': 3597.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3597296.jpg'}, {'end': 3824.741, 'src': 'embed', 'start': 3795.949, 'weight': 5, 'content': [{'end': 3797.95, 'text': 'move to where you want to draw, to 300, 150.', 'start': 3795.949, 'duration': 2.001}, {'end': 3803.473, 'text': "there you go, and then we'll use the quadratic curved tool.", 'start': 3797.95, 'duration': 5.523}, {'end': 3811.398, 'text': "here two, there we are and we'll just define where we're starting at x, y position and where we are ending at x, y position,", 'start': 3803.473, 'duration': 7.925}, {'end': 3816.498, 'text': "and it just draws that right in there for us, ctx, stroke, And stroke means that it's going to be drawing a stroke.", 'start': 3811.398, 'duration': 5.1}, {'end': 3818.899, 'text': 'And you can see it went and drew that curve inside of there.', 'start': 3816.718, 'duration': 2.181}, {'end': 3821.299, 'text': 'You can also come in here and draw Bezier curves.', 'start': 3818.919, 'duration': 2.38}, {'end': 3824.741, 'text': "CTX Again, we're just going to change the style.", 'start': 3821.64, 'duration': 3.101}], 'summary': 'Demonstrating drawing techniques using quadratic and bezier curves in a 300x150 canvas.', 'duration': 28.792, 'max_score': 3795.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3795949.jpg'}], 'start': 3058.964, 'title': 'Html forms, canvas drawing, and gradients', 'summary': "Covers html form elements, canvas for painting shapes and text, and drawing polygons, gradients, text, and lines using javascript's canvas api. it includes demonstrations of painting shapes, changing colors, creating gradient fills, and drawing lines and curves.", 'chapters': [{'end': 3350.965, 'start': 3058.964, 'title': 'Html forms and canvas drawing', 'summary': 'Covers html form elements including hidden data, file uploads, and image submissions as well as the usage of canvas for painting shapes and text using javascript, with a demonstration of drawing rectangles, changing colors and stroke widths, and drawing a circle.', 'duration': 292.001, 'highlights': ['The chapter covers HTML form elements including hidden data, file uploads, and image submissions as well as the usage of Canvas for painting shapes and text using JavaScript. Covers the various elements of HTML forms and the Canvas element for drawing shapes and text using JavaScript.', 'Demonstration of painting shapes and text in Canvas including drawing rectangles, changing colors and stroke widths, and drawing a circle. Provides a demonstration of various functionalities of Canvas, including drawing shapes, changing colors and stroke widths, and drawing a circle.']}, {'end': 3897.277, 'start': 3351.085, 'title': 'Drawing shapes and gradients', 'summary': "Covers drawing polygons, applying strokes, creating gradient fills, defining colors with rgba, creating radial gradients, drawing text, adding drop shadows, and drawing lines, curves, and bezier curves using javascript's canvas api.", 'duration': 546.192, 'highlights': ['Drawing polygons and strokes It explains how to draw polygons, apply strokes, and create shapes using the beginPath, moveTo, lineTo, closePath, and strokeStyle methods, enabling users to create custom shapes and apply different stroke styles.', 'Creating gradient fills The tutorial demonstrates how to create linear and radial gradient fills with multiple color stops, allowing for the creation of visually appealing gradients on the canvas.', 'Defining colors with RGBA and applying drop shadows The tutorial covers defining colors with RGBA to control opacity and applying drop shadows to text, providing users with options to customize the visual appearance of elements on the canvas.', 'Drawing text and manipulating text styles It explains how to draw and style text on the canvas, including filling and stroking text, setting font styles, and adjusting line width, offering users the ability to incorporate text elements into their canvas projects.', 'Drawing lines, curves, and Bezier curves The tutorial illustrates how to draw lines, curves, quadratic curves, and Bezier curves using the canvas API, demonstrating the versatility of creating different shapes and paths.']}], 'duration': 838.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3058964.jpg', 'highlights': ['Demonstration of painting shapes and text in Canvas including drawing rectangles, changing colors and stroke widths, and drawing a circle.', 'Drawing polygons and applying strokes using beginPath, moveTo, lineTo, closePath, and strokeStyle methods for creating custom shapes and applying different stroke styles.', 'Creating linear and radial gradient fills with multiple color stops for visually appealing gradients on the canvas.', 'Defining colors with RGBA to control opacity and applying drop shadows to text for customizing visual appearance on the canvas.', 'Drawing and styling text on the canvas, including filling and stroking text, setting font styles, and adjusting line width for incorporating text elements into canvas projects.', 'Illustration of drawing lines, curves, quadratic curves, and Bezier curves using the canvas API, showcasing the versatility of creating different shapes and paths.']}, {'end': 4351.432, 'segs': [{'end': 3953.774, 'src': 'embed', 'start': 3914.92, 'weight': 0, 'content': [{'end': 3921.702, 'text': "now I'm going to show you how to be able to store data using HTML5 and we're gonna be using JavaScript here again.", 'start': 3914.92, 'duration': 6.782}, {'end': 3927.283, 'text': "I'm gonna create a new JavaScript file called web store, and this is going to allow us to store data like we did with cookies.", 'start': 3921.702, 'duration': 5.581}, {'end': 3928.804, 'text': "So we're going to do some neat things here.", 'start': 3927.603, 'duration': 1.201}, {'end': 3935.246, 'text': "Let's create a paragraph tag and let's give it the ID equal to notify.", 'start': 3928.924, 'duration': 6.322}, {'end': 3935.727, 'text': 'Close that.', 'start': 3935.426, 'duration': 0.301}, {'end': 3938.568, 'text': "I'm also going to show you geolocation, which is also kind of cool.", 'start': 3935.747, 'duration': 2.821}, {'end': 3947.872, 'text': "And then we're going to go input type and text D, have this be your name, show you how to store data and delete data also.", 'start': 3938.768, 'duration': 9.104}, {'end': 3950.593, 'text': "And we'll just create a couple of buttons here on click.", 'start': 3948.172, 'duration': 2.421}, {'end': 3953.774, 'text': "It's going to call JavaScript function called set name.", 'start': 3950.833, 'duration': 2.941}], 'summary': 'Storing data using html5 and javascript, including geolocation and data manipulation.', 'duration': 38.854, 'max_score': 3914.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3914920.jpg'}, {'end': 4003.283, 'src': 'embed', 'start': 3974.583, 'weight': 2, 'content': [{'end': 3977.765, 'text': "that's gonna make sure that the init function is fired.", 'start': 3974.583, 'duration': 3.182}, {'end': 3986.432, 'text': "and why don't we do some geolocation types of things here first, so you can look and find out where your users are, as long as they allow you.", 'start': 3977.765, 'duration': 8.667}, {'end': 3996.258, 'text': 'of course, first we want to check if we can get their location, and to do that we go navigator geolocation And if we can get their location,', 'start': 3986.432, 'duration': 9.826}, {'end': 3999.16, 'text': "we want to notify the user that we're trying to find out where they are.", 'start': 3996.258, 'duration': 2.902}, {'end': 4003.283, 'text': "And I'm going to go document, get element by ID.", 'start': 3999.18, 'duration': 4.103}], 'summary': "Init function fires and checks user's geolocation using navigator geolocation.", 'duration': 28.7, 'max_score': 3974.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3974583.jpg'}, {'end': 4204.077, 'src': 'embed', 'start': 4175.755, 'weight': 5, 'content': [{'end': 4178.837, 'text': 'We can get the value they entered into that little text field.', 'start': 4175.755, 'duration': 3.082}, {'end': 4183.162, 'text': 'We want to check to make sure that they actually entered something like this.', 'start': 4179.018, 'duration': 4.144}, {'end': 4185.004, 'text': "Just make sure that it's not empty.", 'start': 4183.523, 'duration': 1.481}, {'end': 4190.209, 'text': "And if they didn't enter something, we can just return false and jump out of here and not waste our time anymore.", 'start': 4185.323, 'duration': 4.886}, {'end': 4191.89, 'text': 'And this is local storage.', 'start': 4190.59, 'duration': 1.3}, {'end': 4196.633, 'text': 'This is going to allow us to store data just like we did with cookies before.', 'start': 4192.191, 'duration': 4.442}, {'end': 4197.594, 'text': 'Set item.', 'start': 4196.973, 'duration': 0.621}, {'end': 4198.694, 'text': 'We just give it a name.', 'start': 4197.794, 'duration': 0.9}, {'end': 4200.355, 'text': "So here we'll give it name.", 'start': 4199.134, 'duration': 1.221}, {'end': 4204.077, 'text': 'And then username is the data that we want to store inside of there.', 'start': 4200.655, 'duration': 3.422}], 'summary': 'Validating user input to ensure it is not empty, using local storage to store data.', 'duration': 28.322, 'max_score': 4175.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA4175755.jpg'}, {'end': 4252.223, 'src': 'embed', 'start': 4218.304, 'weight': 4, 'content': [{'end': 4219.204, 'text': "and that's set name.", 'start': 4218.304, 'duration': 0.9}, {'end': 4222.146, 'text': "so that's how we would set and store this data.", 'start': 4219.204, 'duration': 2.942}, {'end': 4227.008, 'text': "if we then want to get the name that has been stored, i'll get name there.", 'start': 4222.146, 'duration': 4.862}, {'end': 4231.95, 'text': 'that is, we could check if a value has been stored in local storage,', 'start': 4227.008, 'duration': 4.942}, {'end': 4238.315, 'text': 'and this is how we do that local storage get item and check that there is a value for names stored locally.', 'start': 4231.95, 'duration': 6.365}, {'end': 4240.657, 'text': "Make sure that it doesn't have a null value.", 'start': 4238.596, 'duration': 2.061}, {'end': 4242.337, 'text': 'That basically means it has no value.', 'start': 4240.697, 'duration': 1.64}, {'end': 4244.699, 'text': "In that situation, we'll return false.", 'start': 4242.658, 'duration': 2.041}, {'end': 4252.223, 'text': "Otherwise we'll go into document, get element, buy ID, specifically your name,", 'start': 4245.039, 'duration': 7.184}], 'summary': 'Set and store data using local storage, check for stored value, and retrieve element by id.', 'duration': 33.919, 'max_score': 4218.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA4218304.jpg'}, {'end': 4342.105, 'src': 'embed', 'start': 4314.193, 'weight': 3, 'content': [{'end': 4317.756, 'text': 'You can see, trying to find you, found my latitude and longitude information.', 'start': 4314.193, 'duration': 3.563}, {'end': 4322.841, 'text': 'I could come in here, type in Derek, store, store, and you can see name saved is in there.', 'start': 4317.796, 'duration': 5.045}, {'end': 4325.703, 'text': "If I want to get the value stored, you can see it's right there.", 'start': 4323.081, 'duration': 2.622}, {'end': 4327.705, 'text': "If I want to remove it, it's going to be removed.", 'start': 4325.723, 'duration': 1.982}, {'end': 4331.168, 'text': "You can see now it's removed, and then if I go get, it's going to come back with null.", 'start': 4327.865, 'duration': 3.303}, {'end': 4332.298, 'text': 'So there you go, guys.', 'start': 4331.397, 'duration': 0.901}, {'end': 4339.983, 'text': 'That is just about everything there is to know about HTML5, as well as working with HTML5 with style sheets and PHP and JavaScript.', 'start': 4332.338, 'duration': 7.645}, {'end': 4342.105, 'text': 'I hope somebody actually watches this video.', 'start': 4340.224, 'duration': 1.881}], 'summary': 'Demonstrates storing, retrieving, and removing data using html5. no. of operations: 4.', 'duration': 27.912, 'max_score': 4314.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA4314193.jpg'}], 'start': 3897.277, 'title': 'Html5 data storage & geolocation', 'summary': 'Delves into the implementation of storing and retrieving data using html5 and javascript, demonstrating data storage, deletion, geolocation usage, and user location notification, complemented by code examples and explanations.', 'chapters': [{'end': 4134.179, 'start': 3897.277, 'title': 'Html5 data storage & geolocation', 'summary': 'Covers storing data using html5 and javascript, demonstrating how to store and delete data, utilize geolocation, and notify users about their location, including code examples and explanations.', 'duration': 236.902, 'highlights': ['Demonstrating HTML5 data storage and geolocation The chapter covers storing data using HTML5 and JavaScript, demonstrating how to store and delete data, utilize geolocation, and notify users about their location, including code examples and explanations.', 'Using JavaScript to store and delete data The chapter explains creating a new JavaScript file for web storage, allowing the storage and deletion of data using JavaScript functions like set name and remove.', "Implementing geolocation to find users' location The chapter demonstrates using the navigator.geolocation to find users' location, including notifying the user about the location and defining success and error functions to handle the geolocation data."]}, {'end': 4351.432, 'start': 4134.738, 'title': 'Html5 data storage and retrieval', 'summary': 'Covers the implementation of storing and retrieving data using html5, including functions for setting, getting, and removing data, as well as local storage and error handling.', 'duration': 216.694, 'highlights': ['Functions for setting, getting, and removing data The chapter introduces functions such as set name, get name, and remove name, allowing for the setting, getting, and removal of stored data.', 'Usage of local storage for data storage The transcript emphasizes the use of local storage, demonstrating the usage of set item and get item to store and retrieve data, as well as error handling for null values.', 'Error handling for empty or null values The chapter provides error handling for empty or null values, ensuring that data is not stored if the input is empty and returning false if the value is null.']}], 'duration': 454.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kDyJN7qQETA/pics/kDyJN7qQETA3897277.jpg', 'highlights': ['Demonstrating HTML5 data storage and geolocation', 'Using JavaScript to store and delete data', "Implementing geolocation to find users' location", 'Functions for setting, getting, and removing data', 'Usage of local storage for data storage', 'Error handling for empty or null values']}], 'highlights': ['The tutorial provides links to all the individual parts covered in the video description.', 'The chapter covers a comprehensive HTML5 tutorial along with PHP, JavaScript, and stylesheet.', 'The HTML5 document structure is introduced, including the use of tags to lay out web pages and the definition of the uniform resource locator (URL) for data transfer.', "The process of defining the document's primary language, surrounding the document with an HTML tag, and closing the HTML tag is explained.", "Defining search engine indexing options, such as 'index' and 'follow', to allow search engine indexing and following hyperlinks, and using 'archive' and 'nofollow' to indicate page archiving and not following hyperlinks.", "Linking to JavaScript files by using the 'script' tag and defining the default location for all links on the page.", 'The importance of validating HTML5 using validator.w3.org The speaker emphasizes the significance of validating HTML5 using validator.w3.org to ensure error-free coding.', 'Using divs for overall web page size and position is recommended with HTML5, while divs and spans should be used only for styling and not for structural reasons.', 'Defining the importance of elements on the page using h tags is crucial for accessibility and SEO.', "Creating a function to change color and text of an h1 tag when clicked The function 'change color' is created to change the text and color of the h1 tag when it is clicked, enhancing interactivity.", "Adding images with 'img' tags with attributes like ID, source, width, height, and alt. The chapter covers adding images with HTML using 'img' tags with attributes like ID, source, width, height, and alt.", 'The chapter covers creating hyperlinks, styling with CSS, and using IDs and names for page navigation in HTML. This is the main focus of the chapter, showcasing the key topics covered in the transcript.', 'Demonstrates creation of dynamic JavaScript function for toggling image visibility', 'Explains use of image maps to define hotspot links within images', 'Showcases embedding external file formats using the object tag', 'Covers the structure of html elements, styling using css, unordered and ordered lists, definition lists, navigation styling, different list types, and creating tables in html, with specific css properties and values demonstrated.', 'HTML5 table styling Explains the process of defining table body, footer, and applying style changes, resulting in a visually improved table.', 'Demonstration of painting shapes and text in Canvas including drawing rectangles, changing colors and stroke widths, and drawing a circle.', 'Demonstrating HTML5 data storage and geolocation', 'Using JavaScript to store and delete data']}