title
HTML Crash Course For Absolute Beginners

description
In this crash course I will cram as much about HTML that I can. This is meant for absolute beginners. If you are interested in learning HTML but know nothing, then you are in the right place. We will be creating a cheat sheet with all of the common HTML5 tags, attributes, semantic markup, etc. We will not be focusing on CSS in this video. The CSS crash course will be released shortly after 21 Hour HTML & CSS Course: https://www.udemy.com/course/modern-html-css-from-the-beginning/?referralCode=EB0470C43F3C3E9AA306 CODE: Code for this video http://www.traversymedia.com/downloads/htmlcheatsheet.zip NEXT: CSS CRASH COURSE FOR BEGINNERS https://www.youtube.com/watch?v=yfoY53QXEnI&lc=z121x5ozxpiiwddee23tffergoyxxngi504 CHECK OUT MY FULL STACK COURSE: http://www.traversymedia.com/course/the-full-stack-web-development/ BECOME A PATRON: Support me directly for even $1 per month http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia

detail
{'title': 'HTML Crash Course For Absolute Beginners', 'heatmap': [{'end': 583.916, 'start': 508.179, 'weight': 0.899}], 'summary': 'This web development series for absolute beginners focuses on html5 with no prerequisites, emphasizing patient learning. it covers html fundamentals, sublime text 3 installation, html basics, css styling, lists, tables, forms, image attributes, and html5 semantic tags, including practical examples of creating a blog page.', 'chapters': [{'end': 168.611, 'segs': [{'end': 36.777, 'src': 'embed', 'start': 7.591, 'weight': 0, 'content': [{'end': 11.853, 'text': 'Hey guys, welcome to the first video of my web development for absolute beginner series.', 'start': 7.591, 'duration': 4.262}, {'end': 18.816, 'text': "This entire series is meant for anyone wanting to learn basic web design and web development, and there's absolutely no prerequisites.", 'start': 12.193, 'duration': 6.623}, {'end': 23.698, 'text': "I'm teaching this course as if I'm talking to someone that's never written a line of HTML before,", 'start': 19.016, 'duration': 4.682}, {'end': 26.879, 'text': "so don't worry about having any kind of prior web development knowledge.", 'start': 23.698, 'duration': 3.181}, {'end': 32.795, 'text': 'This will be an ongoing course or ongoing series, and each video will focus on a different topic.', 'start': 27.332, 'duration': 5.463}, {'end': 36.777, 'text': "So in this particular video, we're going to be focusing on HTML only.", 'start': 32.855, 'duration': 3.922}], 'summary': 'Web dev series for beginners, no prerequisites, ongoing with focus on html.', 'duration': 29.186, 'max_score': 7.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE7591.jpg'}, {'end': 160.544, 'src': 'embed', 'start': 129.36, 'weight': 1, 'content': [{'end': 136.605, 'text': "i've actually seen videos called you know, learn html in five minutes, and and that's just absolute if you're going to be a web developer,", 'start': 129.36, 'duration': 7.245}, {'end': 139.027, 'text': 'you have to be patient and you have to.', 'start': 136.605, 'duration': 2.422}, {'end': 143.43, 'text': "you have to really enjoy learning because you're going to be learning even when you land a good job.", 'start': 139.027, 'duration': 4.403}, {'end': 145.211, 'text': "you're going to be learning every single day.", 'start': 143.43, 'duration': 1.781}, {'end': 147.593, 'text': 'so try and be patient, try to follow along.', 'start': 145.211, 'duration': 2.382}, {'end': 151.835, 'text': 'i know people can can get a little aggravated with videos that are over, like you know, 25 minutes.', 'start': 147.593, 'duration': 4.242}, {'end': 160.544, 'text': "But if you're that impatient, where you can't watch an hour-long course, then you're probably in the wrong profession.", 'start': 152.956, 'duration': 7.588}], 'summary': 'Patience is crucial in learning web development. continuous learning is essential even after landing a job. impatience may not be suitable for this profession.', 'duration': 31.184, 'max_score': 129.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE129360.jpg'}], 'start': 7.591, 'title': 'Web development for beginners', 'summary': 'Introduces an ongoing web development series for absolute beginners with a focus on html5, emphasizing no prerequisites and patient learning, and warning against impatience in the learning process.', 'chapters': [{'end': 168.611, 'start': 7.591, 'title': 'Web development for beginners', 'summary': 'Introduces an ongoing web development series for absolute beginners with a focus on html5, emphasizing no prerequisites and patient learning, and warning against impatience in the learning process.', 'duration': 161.02, 'highlights': ['The series is aimed at absolute beginners with no prior web development knowledge, focusing on HTML5 and possibly CSS and JavaScript.', 'Emphasizes the importance of patience and enjoyment in learning web development, discouraging impatience and noting the ongoing learning process in the field.', 'Warns against impatience in the learning process, suggesting that impatience might not be suitable for the web development profession.']}], 'duration': 161.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE7591.jpg', 'highlights': ['The series is aimed at absolute beginners with no prior web development knowledge, focusing on HTML5 and possibly CSS and JavaScript.', 'Emphasizes the importance of patience and enjoyment in learning web development, discouraging impatience and noting the ongoing learning process in the field.', 'Warns against impatience in the learning process, suggesting that impatience might not be suitable for the web development profession.']}, {'end': 391.726, 'segs': [{'end': 200.605, 'src': 'embed', 'start': 168.611, 'weight': 0, 'content': [{'end': 169.752, 'text': 'so enough with the preference.', 'start': 168.611, 'duration': 1.141}, {'end': 171.173, 'text': "let's go ahead and get started.", 'start': 169.752, 'duration': 1.421}, {'end': 172.993, 'text': 'so what is html?', 'start': 171.173, 'duration': 1.82}, {'end': 181.298, 'text': "it stands for hypertext markup language, and a lot of people just starting out don't realize that html is not a programming language at any level.", 'start': 172.993, 'duration': 8.305}, {'end': 184.819, 'text': "it's a markup language for creating web pages and documents.", 'start': 181.298, 'duration': 3.521}, {'end': 189.641, 'text': 'okay, html documents, One of the key elements of a programming language is logic.', 'start': 184.819, 'duration': 4.822}, {'end': 194.203, 'text': 'So you can have things like conditionals where you can say, if this is true, then do this.', 'start': 189.841, 'duration': 4.362}, {'end': 196.744, 'text': "HTML, however, doesn't have any of that.", 'start': 194.823, 'duration': 1.921}, {'end': 200.605, 'text': 'HTML is used to just display and format elements of a web page.', 'start': 196.944, 'duration': 3.661}], 'summary': 'Html is a markup language for web pages, not a programming language with logic or conditionals.', 'duration': 31.994, 'max_score': 168.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE168611.jpg'}, {'end': 257.577, 'src': 'embed', 'start': 234.349, 'weight': 2, 'content': [{'end': 242.252, 'text': "In fact, if you're getting into web development, HTML, at least in my opinion, is much more important because HTML is the building block of the web.", 'start': 234.349, 'duration': 7.903}, {'end': 249.975, 'text': 'Every single site that you see outputs HTML to the browser no matter what kind of advanced programming it uses on the back end.', 'start': 242.632, 'duration': 7.343}, {'end': 253.696, 'text': 'You can build a website using just HTML and CSS.', 'start': 250.715, 'duration': 2.981}, {'end': 257.577, 'text': "CSS, of course, is a styling language, and we'll get into that in another video.", 'start': 254.097, 'duration': 3.48}], 'summary': 'Html is crucial for web development, as every website outputs html, and a website can be built using just html and css.', 'duration': 23.228, 'max_score': 234.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE234349.jpg'}, {'end': 322.437, 'src': 'embed', 'start': 295.268, 'weight': 3, 'content': [{'end': 299.81, 'text': 'You need a browser to view the HTML, and you need a text editor to write the HTML.', 'start': 295.268, 'duration': 4.542}, {'end': 302.13, 'text': "Now, don't worry about what kind of computer you have.", 'start': 300.19, 'duration': 1.94}, {'end': 306.311, 'text': "If you're on Windows, Mac, or Linux, it doesn't matter as long as you have these two things.", 'start': 302.19, 'duration': 4.121}, {'end': 310.873, 'text': "Everything that I'm doing in this series and in this video is completely cross platform.", 'start': 306.532, 'duration': 4.341}, {'end': 313.333, 'text': 'So for a browser, it can be whatever you want.', 'start': 311.453, 'duration': 1.88}, {'end': 314.854, 'text': "I'd highly suggest Google Chrome.", 'start': 313.374, 'duration': 1.48}, {'end': 318.435, 'text': "It's the fastest, and in my opinion, it's the best for any web developer.", 'start': 315.214, 'duration': 3.221}, {'end': 322.437, 'text': 'But of course, you can use Firefox or Safari, even Edge.', 'start': 318.715, 'duration': 3.722}], 'summary': 'Html can be viewed on any platform using a browser like google chrome, firefox, safari, or edge.', 'duration': 27.169, 'max_score': 295.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE295268.jpg'}, {'end': 385.521, 'src': 'embed', 'start': 354.089, 'weight': 4, 'content': [{'end': 355.31, 'text': "it's very light.", 'start': 354.089, 'duration': 1.221}, {'end': 360.892, 'text': "when i'm working with other technologies and languages, i usually use something called atom or visual studio code,", 'start': 355.31, 'duration': 5.582}, {'end': 363.775, 'text': "But I think that those are overkill for what we're doing here.", 'start': 361.252, 'duration': 2.523}, {'end': 368.861, 'text': "So before we move on, let's go ahead and install Sublime Text so that we can start writing HTML.", 'start': 364.256, 'duration': 4.605}, {'end': 375.074, 'text': 'Alright guys, so you want to go to www.sublimetext.com to get this program if you want it.', 'start': 369.73, 'duration': 5.344}, {'end': 376.735, 'text': "If you want to use something else, that's fine.", 'start': 375.134, 'duration': 1.601}, {'end': 378.797, 'text': 'Now this program is free to try.', 'start': 377.175, 'duration': 1.622}, {'end': 381.518, 'text': "If you want to keep using it, I'd suggest buying a license.", 'start': 378.857, 'duration': 2.661}, {'end': 385.521, 'text': "If you use it without a license, it doesn't have any limitations or anything like that.", 'start': 381.899, 'duration': 3.622}], 'summary': 'Sublime text recommended for writing html, free to try, buy license for continued use', 'duration': 31.432, 'max_score': 354.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE354089.jpg'}], 'start': 168.611, 'title': 'Web development fundamentals', 'summary': 'Covers html as a markup language, importance of programming languages in web development, and the significance of choosing a suitable browser and text editor, highlighting google chrome as the fastest browser and sublime text as a lightweight text editor.', 'chapters': [{'end': 212.089, 'start': 168.611, 'title': 'Understanding html basics', 'summary': 'Explains that html is not a programming language but a markup language for creating web pages, focusing on display and format of elements without logic or actual programming.', 'duration': 43.478, 'highlights': ['HTML is not a programming language, but a markup language for creating web pages and documents, focusing on display and format of elements without logic or actual programming.', 'HTML stands for Hypertext Markup Language and is used to display and format elements of a web page, such as text paragraph, heading, bullet list, or image.', "One of the key elements of a programming language is logic, but HTML doesn't have any of that and is strictly presentational."]}, {'end': 295.228, 'start': 212.932, 'title': 'Importance of programming languages in web development', 'summary': 'Discusses the importance of programming languages in web development, emphasizing the significance of html as the foundation of the web and the minimal requirements for building websites, including html and css knowledge.', 'duration': 82.296, 'highlights': ['HTML is the building block of the web, used by every single site, making it more important than intricate programming languages like JavaScript, PHP, or C Sharp.', 'While HTML and CSS alone can create purely presentational websites, advanced functionality like user login and online stores require languages like JavaScript and PHP.', "Despite the importance of HTML, it is harder to secure a job with just HTML and CSS knowledge in today's web development landscape."]}, {'end': 391.726, 'start': 295.268, 'title': 'Choosing browser and text editor for web development', 'summary': 'Discusses the importance of choosing a suitable browser and text editor for web development, emphasizing the cross-platform compatibility and recommending google chrome as the fastest browser and sublime text as a lightweight text editor.', 'duration': 96.458, 'highlights': ['The chapter emphasizes the cross-platform compatibility of the tools, ensuring that they can be utilized on Windows, Mac, or Linux, with no limitations, and suggests Google Chrome as the fastest browser for web development.', 'It recommends Sublime Text as a lightweight and simple text editor, available for Windows, Mac, and Linux, while discouraging the use of Windows Notepad and other heavier editors like Atom or Visual Studio Code for the purpose of web development.', 'The chapter advises obtaining Sublime Text from www.sublimetext.com and suggests considering purchasing a license, though it highlights that using it without a license does not pose any limitations.']}], 'duration': 223.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE168611.jpg', 'highlights': ['HTML is not a programming language, but a markup language for creating web pages and documents.', 'HTML stands for Hypertext Markup Language and is used to display and format elements of a web page.', 'HTML is the building block of the web, used by every single site, making it more important than intricate programming languages like JavaScript, PHP, or C Sharp.', 'The chapter emphasizes the cross-platform compatibility of the tools, ensuring that they can be utilized on Windows, Mac, or Linux, with no limitations.', 'It recommends Sublime Text as a lightweight and simple text editor, available for Windows, Mac, and Linux.']}, {'end': 650.025, 'segs': [{'end': 473.848, 'src': 'embed', 'start': 414.029, 'weight': 0, 'content': [{'end': 419.854, 'text': "What that'll do is it'll allow us to right click on an HTML file and say open with sublime text.", 'start': 414.029, 'duration': 5.825}, {'end': 421.435, 'text': 'So we definitely want that checked.', 'start': 420.054, 'duration': 1.381}, {'end': 423.037, 'text': "And then we're just going to install.", 'start': 421.956, 'duration': 1.081}, {'end': 424.752, 'text': 'All right.', 'start': 424.471, 'duration': 0.281}, {'end': 425.655, 'text': 'So it should be all set.', 'start': 424.792, 'duration': 0.863}, {'end': 426.557, 'text': "Let's click finish.", 'start': 425.695, 'duration': 0.862}, {'end': 429.104, 'text': 'And now we should be able to open it up.', 'start': 427.099, 'duration': 2.005}, {'end': 431.692, 'text': "I'm just going to search for it down here, my search bar.", 'start': 429.305, 'duration': 2.387}, {'end': 435.249, 'text': 'if it opens.', 'start': 433.188, 'duration': 2.061}, {'end': 437.79, 'text': "and let's just see right here sublime text 3.", 'start': 435.249, 'duration': 2.541}, {'end': 442.572, 'text': "okay, there's also sublime text 2, but 3, obviously, is the newer version alright.", 'start': 437.79, 'duration': 4.782}, {'end': 444.372, 'text': 'so this is what a text editor looks like.', 'start': 442.572, 'duration': 1.8}, {'end': 450.314, 'text': "I'm not going to go through all the features, I just want to strictly focus on HTML syntax.", 'start': 444.372, 'duration': 5.942}, {'end': 456.217, 'text': 'so now that we have our editor installed, we can go ahead and we can start to create our HTML file.', 'start': 450.314, 'duration': 5.903}, {'end': 462.519, 'text': "so one great thing about HTML is we don't need any kind of special server or hosting company to write and test HTML.", 'start': 456.217, 'duration': 6.302}, {'end': 465.261, 'text': 'You can simply create a file right on your computer.', 'start': 462.939, 'duration': 2.322}, {'end': 466.282, 'text': 'you can give it a.', 'start': 465.261, 'duration': 1.021}, {'end': 469.264, 'text': 'html extension, and you can open it up with your browser.', 'start': 466.282, 'duration': 2.982}, {'end': 473.848, 'text': 'Now, when your site is ready to deploy to the internet, you will need to buy a domain name,', 'start': 469.685, 'duration': 4.163}], 'summary': 'Installing sublime text 3 for html file editing and testing. no special server needed for html creation and testing.', 'duration': 59.819, 'max_score': 414.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE414029.jpg'}, {'end': 587.34, 'src': 'heatmap', 'start': 491.264, 'weight': 3, 'content': [{'end': 495.428, 'text': 'html This will allow it to be displayed correctly in a web browser.', 'start': 491.264, 'duration': 4.164}, {'end': 500.733, 'text': 'now, one thing to remember is that your home page should always be called index.html.', 'start': 495.908, 'duration': 4.825}, {'end': 508.179, 'text': "if you go to a domain like, let's say, www.something.com and you upload a file called index.html,", 'start': 500.733, 'duration': 7.446}, {'end': 511.282, 'text': "that's the file that's going to show on that root domain.", 'start': 508.179, 'duration': 3.103}, {'end': 517.248, 'text': "okay, if you upload a file, let's say about.html, that's going to show when you go to something.com about.html.", 'start': 511.282, 'duration': 5.966}, {'end': 523.273, 'text': 'So the index file will always be the root file or the home page.', 'start': 520.071, 'duration': 3.202}, {'end': 525.994, 'text': "Unless, of course, you're messing with server settings and you change it.", 'start': 523.313, 'duration': 2.681}, {'end': 528.015, 'text': "But by default, that's the behavior.", 'start': 526.074, 'duration': 1.941}, {'end': 529.656, 'text': "It's going to look at index.html.", 'start': 528.035, 'duration': 1.621}, {'end': 530.977, 'text': 'All right, guys.', 'start': 529.716, 'duration': 1.261}, {'end': 533.678, 'text': "So we're going to go ahead and create our first HTML file.", 'start': 530.997, 'duration': 2.681}, {'end': 535.059, 'text': "Now, I'm going to put this in a folder.", 'start': 533.718, 'duration': 1.341}, {'end': 536.1, 'text': "So I'm going to create a folder.", 'start': 535.139, 'duration': 0.961}, {'end': 539.161, 'text': "And I'm going to call this HTML Cheat Sheet.", 'start': 536.12, 'duration': 3.041}, {'end': 545.085, 'text': "And then inside that folder, let's create a new file by going to New Text Document.", 'start': 540.842, 'duration': 4.243}, {'end': 548.566, 'text': "And we're going to call this index.html.", 'start': 545.765, 'duration': 2.801}, {'end': 551.538, 'text': "Okay, we'll just say yes.", 'start': 550.458, 'duration': 1.08}, {'end': 553.139, 'text': 'We want to change the file extension.', 'start': 551.578, 'duration': 1.561}, {'end': 560.962, 'text': "And notice that mine has a Chrome icon by default because Chrome is my default browser, and that's what opens up the HTML files.", 'start': 553.879, 'duration': 7.083}, {'end': 562.002, 'text': 'Yours may be different.', 'start': 561.002, 'duration': 1}, {'end': 568.004, 'text': "Now, if you're using Windows, you may have an issue where you don't see the .", 'start': 562.702, 'duration': 5.302}, {'end': 575.547, 'text': "html Okay, if you're not seeing that, what you want to do is you want to go to View, Options, Change Folder and Search Options.", 'start': 568.004, 'duration': 7.543}, {'end': 577.768, 'text': 'All right, and you want to go to View.', 'start': 576.267, 'duration': 1.501}, {'end': 583.916, 'text': 'And then down here you want to uncheck hide extensions for known file types.', 'start': 578.529, 'duration': 5.387}, {'end': 587.34, 'text': "Okay You want to make sure that's unchecked and then click apply.", 'start': 584.036, 'duration': 3.304}], 'summary': 'Creating an index.html file is crucial for web page display on a root domain.', 'duration': 96.076, 'max_score': 491.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE491264.jpg'}, {'end': 628.127, 'src': 'embed', 'start': 596.311, 'weight': 4, 'content': [{'end': 599.252, 'text': "I'm sure most of you know that, but just in case there's people that don't.", 'start': 596.311, 'duration': 2.941}, {'end': 603.172, 'text': 'All right, so what we want to do now is we want to open this with Sublime Text.', 'start': 599.952, 'duration': 3.22}, {'end': 606.893, 'text': 'So we can actually just right-click and say Open with Sublime Text.', 'start': 603.232, 'duration': 3.661}, {'end': 608.373, 'text': 'Let me just bring it over.', 'start': 607.473, 'duration': 0.9}, {'end': 609.934, 'text': 'It opened up on a different screen.', 'start': 608.413, 'duration': 1.521}, {'end': 611.294, 'text': "And that's going to open it up.", 'start': 610.394, 'duration': 0.9}, {'end': 613.754, 'text': 'You can see up in the tab it says Index HTML.', 'start': 611.314, 'duration': 2.44}, {'end': 621.356, 'text': 'Now, another thing you could have done is you could just go to File, Open, and you could find that on your computer, that HTML file, and open it.', 'start': 614.855, 'duration': 6.501}, {'end': 622.322, 'text': 'All right.', 'start': 622.062, 'duration': 0.26}, {'end': 628.127, 'text': "So now that we have that open, what I'm going to do is just type in hello world here, just text, no tags or anything yet.", 'start': 622.362, 'duration': 5.765}], 'summary': "Demonstrating opening html file in sublime text and inserting 'hello world' text.", 'duration': 31.816, 'max_score': 596.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE596311.jpg'}], 'start': 391.746, 'title': 'Sublime text 3 installation and local html creation', 'summary': "Covers the step-by-step process of installing and configuring sublime text 3 for html editing, including adding it to the explorer context menu and opening html files. it also explains how to create and test html files locally, highlighting the importance of naming the home page as 'index.html' for correct display.", 'chapters': [{'end': 456.217, 'start': 391.746, 'title': 'Installing sublime text 3 for html editing', 'summary': 'Explains the process of downloading, installing, and configuring sublime text 3 for html editing, including adding it to the explorer context menu and opening an html file with it, demonstrating the interface and highlighting the focus on html syntax.', 'duration': 64.471, 'highlights': ['The process involves downloading and installing Sublime Text 3, which can be used on Windows, Mac, or Linux.', 'Configuring the installation includes adding Sublime Text 3 to the Explorer context menu for easy access to open HTML files.', 'The chapter demonstrates the interface of Sublime Text 3, specifically focusing on its use for HTML syntax and not delving into other features.']}, {'end': 650.025, 'start': 456.217, 'title': 'Creating and testing html locally', 'summary': "Explains how to create and test html files locally on your computer without the need for a special server, and also emphasizes the importance of naming the home page as 'index.html' for correct display on the root domain.", 'duration': 193.808, 'highlights': ['You can create and test HTML files locally on your computer without the need for a special server or hosting company.', "The importance of naming the home page as 'index.html' for correct display on the root domain is emphasized.", 'Explanation on how to show file extensions in Windows and the process of opening HTML files with Sublime Text is provided.']}], 'duration': 258.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE391746.jpg', 'highlights': ['The process involves downloading and installing Sublime Text 3, compatible with Windows, Mac, or Linux.', 'You can create and test HTML files locally on your computer without the need for a special server or hosting company.', 'Configuring the installation includes adding Sublime Text 3 to the Explorer context menu for easy access to open HTML files.', "The importance of naming the home page as 'index.html' for correct display on the root domain is emphasized.", 'Explanation on how to show file extensions in Windows and the process of opening HTML files with Sublime Text is provided.', 'The chapter demonstrates the interface of Sublime Text 3, specifically focusing on its use for HTML syntax.']}, {'end': 1196.836, 'segs': [{'end': 797.375, 'src': 'embed', 'start': 759.049, 'weight': 5, 'content': [{'end': 762.312, 'text': "You'll see that everything is surrounded in HTML tags.", 'start': 759.049, 'duration': 3.263}, {'end': 763.674, 'text': 'We have the start and ending tag.', 'start': 762.352, 'duration': 1.322}, {'end': 767.698, 'text': 'Inside that we have a head area and we have a body area.', 'start': 764.074, 'duration': 3.624}, {'end': 772.36, 'text': "now the head has nothing to do with the output that's in the browser.", 'start': 768.178, 'duration': 4.182}, {'end': 774.982, 'text': 'the head has things like the page title.', 'start': 772.36, 'duration': 2.622}, {'end': 784.087, 'text': 'it has things like links to css files and javascript files that you want to use, metadata such as the description and keywords, things like that.', 'start': 774.982, 'duration': 9.105}, {'end': 797.375, 'text': "the description and keywords are actually used by search engines like google so that it knows some more information about what's what's actually on the web page And then in the body we have the actual markup that's going to display in the browser.", 'start': 784.087, 'duration': 13.288}], 'summary': 'Html consists of head and body areas, with the head containing page title, links, metadata, and the body containing the markup.', 'duration': 38.326, 'max_score': 759.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE759049.jpg'}, {'end': 826.758, 'src': 'embed', 'start': 797.435, 'weight': 1, 'content': [{'end': 799.817, 'text': 'So headings, text, images, things like that.', 'start': 797.435, 'duration': 2.382}, {'end': 803.823, 'text': 'Now, this is an example of a very simple web page.', 'start': 801.181, 'duration': 2.642}, {'end': 806.865, 'text': 'Notice that we have the HTML tags, the head, the body.', 'start': 804.203, 'duration': 2.662}, {'end': 808.446, 'text': 'We also have this thing at the top.', 'start': 807.165, 'duration': 1.281}, {'end': 812.288, 'text': "This is a doc type, and it's not technically an HTML tag.", 'start': 808.486, 'duration': 3.802}, {'end': 815.991, 'text': "It's just a declaration, and it should always be the first thing on the web page.", 'start': 812.628, 'duration': 3.363}, {'end': 821.634, 'text': 'And what this does is it tells the browser what type of HTML this is actually written in.', 'start': 816.431, 'duration': 5.203}, {'end': 824.416, 'text': 'Now, this is the standard doc type for HTML5.', 'start': 822.115, 'duration': 2.301}, {'end': 826.758, 'text': "Let's take a look at some of the other ones.", 'start': 824.496, 'duration': 2.262}], 'summary': 'Introduction to basic web page structure and html tags.', 'duration': 29.323, 'max_score': 797.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE797435.jpg'}, {'end': 1020.051, 'src': 'embed', 'start': 991.214, 'weight': 0, 'content': [{'end': 993.055, 'text': "There's the JavaScript console.", 'start': 991.214, 'duration': 1.841}, {'end': 997.437, 'text': "There's networking, so you can see what pages are loading and so on.", 'start': 993.075, 'duration': 4.362}, {'end': 999.077, 'text': "There's a lot of advanced stuff here.", 'start': 997.537, 'duration': 1.54}, {'end': 1003.119, 'text': "But for now, we're just going to look at the Elements tab, which just shows the HTML.", 'start': 999.478, 'duration': 3.641}, {'end': 1010.344, 'text': "We don't have anything in the body, but if we did, we could hover over things and it'll actually give it a highlight up here, which is very helpful.", 'start': 1003.799, 'duration': 6.545}, {'end': 1014.127, 'text': 'You can even edit stuff down here, which I might get into later.', 'start': 1010.444, 'duration': 3.683}, {'end': 1020.051, 'text': "It's not going to stick if you edit down here, but it will until the page is refreshed.", 'start': 1015.288, 'duration': 4.763}], 'summary': 'Introduction to the elements tab in javascript console for html viewing and editing.', 'duration': 28.837, 'max_score': 991.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE991214.jpg'}, {'end': 1055.587, 'src': 'embed', 'start': 1030.282, 'weight': 4, 'content': [{'end': 1035.667, 'text': 'So with HTML, you can have these comments with the less than exclamation and then two hyphens.', 'start': 1030.282, 'duration': 5.385}, {'end': 1038.01, 'text': "And then let's give this a comment.", 'start': 1036.148, 'duration': 1.862}, {'end': 1040.613, 'text': "We'll just say this is where our headings are going to go.", 'start': 1038.03, 'duration': 2.583}, {'end': 1044.156, 'text': 'And then we want to end the comment with double hyphen and then greater than.', 'start': 1040.992, 'duration': 3.164}, {'end': 1046.739, 'text': 'Now this is not going to be parsed by the browser.', 'start': 1044.637, 'duration': 2.102}, {'end': 1052.064, 'text': "If I save this and reload, you're not going to see it show up here because it's a comment.", 'start': 1046.779, 'duration': 5.285}, {'end': 1055.587, 'text': "It's just for the developer to see.", 'start': 1053.245, 'duration': 2.342}], 'summary': 'Html allows comments using for developer reference.', 'duration': 25.305, 'max_score': 1030.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1030281.jpg'}, {'end': 1096.677, 'src': 'embed', 'start': 1072.367, 'weight': 3, 'content': [{'end': 1078.971, 'text': 'okay, so the browser by default has some core styling in it and an h1 is going to make the text bigger.', 'start': 1072.367, 'duration': 6.604}, {'end': 1086.175, 'text': "it's also going to add some padding around the edges so that you know the next piece of content will be pushed down a little.", 'start': 1078.971, 'duration': 7.204}, {'end': 1088.937, 'text': "all right, so that's an h1 and that's the biggest heading there is.", 'start': 1086.175, 'duration': 2.762}, {'end': 1091.759, 'text': "okay, so let's take a look at an h2.", 'start': 1088.937, 'duration': 2.822}, {'end': 1093.02, 'text': "so we'll say heading two.", 'start': 1091.759, 'duration': 1.261}, {'end': 1094.716, 'text': "Let's save that.", 'start': 1093.936, 'duration': 0.78}, {'end': 1096.677, 'text': "And you'll see that it's a little smaller.", 'start': 1095.056, 'duration': 1.621}], 'summary': 'Browser default styling includes h1 and h2, with h1 being the biggest heading.', 'duration': 24.31, 'max_score': 1072.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1072367.jpg'}], 'start': 651.509, 'title': 'Html basics and structure', 'summary': 'Covers html basics, including tags, structure, developer tools, and browser styling. it emphasizes the importance of doc type declaration and the title tag in an html5 document.', 'chapters': [{'end': 948.76, 'start': 651.509, 'title': 'Html tags and structure', 'summary': 'Explains the basics of html tags and the structure of an html document, including the use of self-closing tags and the specific elements within the head and body sections, emphasizing the importance of the doc type declaration and the title tag in an html5 document.', 'duration': 297.251, 'highlights': ['The chapter explains the basics of HTML tags and the structure of an HTML document', 'The use of self-closing tags and the specific elements within the head and body sections', 'Emphasizing the importance of the doc type declaration and the title tag in an HTML5 document']}, {'end': 1196.836, 'start': 948.76, 'title': 'Html basics and developer tools', 'summary': "Covers the basics of html, including the usage of headings and paragraphs, and the importance of developer tools such as the browser's console and elements tab for inspecting and editing html. it also mentions the usefulness of comments in html and the default browser styling for different heading tags.", 'duration': 248.076, 'highlights': ["The importance of developer tools such as the browser's console and Elements tab for inspecting and editing HTML is emphasized, providing practical insights for web development.", 'The default browser styling for different heading tags is explained, demonstrating the visual differences between H1 to H6 tags and how they affect the text size and padding.', 'The usage of comments in HTML is highlighted, illustrating their significance for developers to add comments without affecting the parsed HTML by the browser.']}], 'duration': 545.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE651509.jpg', 'highlights': ["The importance of developer tools such as the browser's console and Elements tab for inspecting and editing HTML is emphasized, providing practical insights for web development.", 'The chapter explains the basics of HTML tags and the structure of an HTML document', 'Emphasizing the importance of the doc type declaration and the title tag in an HTML5 document', 'The default browser styling for different heading tags is explained, demonstrating the visual differences between H1 to H6 tags and how they affect the text size and padding.', 'The usage of comments in HTML is highlighted, illustrating their significance for developers to add comments without affecting the parsed HTML by the browser.', 'The use of self-closing tags and the specific elements within the head and body sections']}, {'end': 1595.454, 'segs': [{'end': 1229.464, 'src': 'embed', 'start': 1197.416, 'weight': 2, 'content': [{'end': 1198.217, 'text': "And we'll save that.", 'start': 1197.416, 'duration': 0.801}, {'end': 1199.879, 'text': 'And a paragraph.', 'start': 1198.938, 'duration': 0.941}, {'end': 1203.542, 'text': 'just like the headings, has some default styling.', 'start': 1201.021, 'duration': 2.521}, {'end': 1208.343, 'text': "For one, it has a display block, which means it's a block-level element.", 'start': 1204.382, 'duration': 3.961}, {'end': 1217.065, 'text': "If we were to take another paragraph and go ahead and paste that in and reload, you'll see that it's automatically on a new line.", 'start': 1208.583, 'duration': 8.482}, {'end': 1218.746, 'text': 'It also has some margin.', 'start': 1217.406, 'duration': 1.34}, {'end': 1222.427, 'text': 'It has, I believe, one EM of margin or one M.', 'start': 1219.406, 'duration': 3.021}, {'end': 1229.464, 'text': "And M is a measurement in CSS, just like pixels, except it's used for more responsive stuff.", 'start': 1223.263, 'duration': 6.201}], 'summary': 'Paragraphs in css have default styling with display block and 1em margin.', 'duration': 32.048, 'max_score': 1197.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1197416.jpg'}, {'end': 1263.7, 'src': 'embed', 'start': 1240.827, 'weight': 0, 'content': [{'end': 1250.549, 'text': "And if we look at the paragraph here and I just click on it over here you'll actually see any CSS or any styling that is associated with this particular paragraph,", 'start': 1240.827, 'duration': 9.722}, {'end': 1252.169, 'text': "or whatever tag we're hovering over.", 'start': 1250.549, 'duration': 1.62}, {'end': 1260.336, 'text': 'and when you see this user agent style sheet this is the default browser styling so you can see a paragraph is displayed as a block,', 'start': 1252.889, 'duration': 7.447}, {'end': 1263.7, 'text': "so it's block level, and then it actually has some default margin.", 'start': 1260.336, 'duration': 3.364}], 'summary': 'The default browser styling for a paragraph displays it as block level with default margin.', 'duration': 22.873, 'max_score': 1240.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1240827.jpg'}, {'end': 1308.345, 'src': 'embed', 'start': 1279.312, 'weight': 5, 'content': [{'end': 1283.573, 'text': "And you'll see that this before and after is actually the top and bottom.", 'start': 1279.312, 'duration': 4.261}, {'end': 1285.994, 'text': "So that's why you see this space right here.", 'start': 1284.053, 'duration': 1.941}, {'end': 1291.036, 'text': "It's actually 1em, which is a measurement in CSS.", 'start': 1286.374, 'duration': 4.662}, {'end': 1293.917, 'text': 'So we do have margin on the top and bottom by default.', 'start': 1291.456, 'duration': 2.461}, {'end': 1298.439, 'text': 'And then 0 pixels on the start and end, which is the left and right of the paragraph.', 'start': 1294.317, 'duration': 4.122}, {'end': 1300.88, 'text': 'And it even gives us a little diagram here.', 'start': 1299.019, 'duration': 1.861}, {'end': 1308.345, 'text': "You'll see we have the paragraph and if you look up in the body, it shows it highlighted padding, which there isn't any border, and then the margin,", 'start': 1300.92, 'duration': 7.425}], 'summary': 'The default margin in css is 1em on the top and bottom and 0 pixels on the left and right of the paragraph.', 'duration': 29.033, 'max_score': 1279.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1279312.jpg'}, {'end': 1442.826, 'src': 'embed', 'start': 1414.616, 'weight': 4, 'content': [{'end': 1417.618, 'text': "So let's surround this text right here with EM.", 'start': 1414.616, 'duration': 3.002}, {'end': 1420.74, 'text': "And we'll save and reload.", 'start': 1419.439, 'duration': 1.301}, {'end': 1425.322, 'text': "And again, by default, it's going to be italic.", 'start': 1420.84, 'duration': 4.482}, {'end': 1428.064, 'text': "So you'll see right here.", 'start': 1425.462, 'duration': 2.602}, {'end': 1433.887, 'text': 'But again, you can grab onto this in CSS, and you can change it to whatever style you want.', 'start': 1428.544, 'duration': 5.343}, {'end': 1439.59, 'text': 'It just basically means that this part of the document should be emphasized, or this text should be emphasized.', 'start': 1434.207, 'duration': 5.383}, {'end': 1442.826, 'text': "All right, so now let's take a look at links.", 'start': 1440.745, 'duration': 2.081}], 'summary': "Using 'em' in html to emphasize text and change style in css.", 'duration': 28.21, 'max_score': 1414.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1414616.jpg'}, {'end': 1572.482, 'src': 'embed', 'start': 1531.155, 'weight': 1, 'content': [{'end': 1534.877, 'text': "You don't want all these tabs opening up when you're just navigating the site.", 'start': 1531.155, 'duration': 3.722}, {'end': 1540.671, 'text': 'So all HTML tags can have something called an attribute or multiple attributes.', 'start': 1536.129, 'duration': 4.542}, {'end': 1544.172, 'text': 'And what they do is they provide more information about a certain element.', 'start': 1540.711, 'duration': 3.461}, {'end': 1549.714, 'text': 'For instance, the href provided in the link, what we just did, we created an a tag with an href.', 'start': 1544.572, 'duration': 5.142}, {'end': 1557.256, 'text': 'And what the href does is, as you saw, is it opens up or directs it to a certain location, a certain website link.', 'start': 1550.434, 'duration': 6.822}, {'end': 1565.379, 'text': 'We also provided the target attribute, which is not required, but it still allowed us to make it so that the link opened in another tab.', 'start': 1558.236, 'duration': 7.143}, {'end': 1572.482, 'text': "Now attributes are always placed at the start tag and they're always formatted as key value pairs.", 'start': 1566.359, 'duration': 6.123}], 'summary': 'Html attributes add more info to elements, like href for links, and can control how links open.', 'duration': 41.327, 'max_score': 1531.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1531155.jpg'}], 'start': 1197.416, 'title': 'Css and html styling', 'summary': 'Covers default css styling for paragraphs, including properties like display block and margin, as well as html elements such as block level and inline elements, with a focus on default browser styling, margin, padding, and attributes.', 'chapters': [{'end': 1240.066, 'start': 1197.416, 'title': 'Css paragraph styling', 'summary': 'Explains the default styling of paragraphs in css, including display block and margin properties, and the use of measurement units like em for responsiveness.', 'duration': 42.65, 'highlights': ['Paragraphs in CSS have default styling, including display block and margin properties.', 'EM is a measurement in CSS used for responsiveness.']}, {'end': 1595.454, 'start': 1240.827, 'title': 'Html elements and styling', 'summary': 'Explains html elements such as block level and inline elements, and their associated default browser styling, including margin, padding, and attributes, with a focus on the a, strong, and em tags and their default behaviors and applications.', 'duration': 354.627, 'highlights': ['The user agent style sheet provides default browser styling for HTML elements, with examples of block level and inline elements and their associated spacing.', 'The A tag creates hyperlinks with attributes such as href for directing to a specific location and target for opening links in new tabs.', 'The strong and EM tags are used to emphasize or highlight text, with default behaviors such as bold and italic styling.', 'Attributes in HTML provide additional information about elements, including key-value pairs placed within the start tag and formatted in double quotes.']}], 'duration': 398.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1197416.jpg', 'highlights': ['The user agent style sheet provides default browser styling for HTML elements, with examples of block level and inline elements and their associated spacing.', 'Attributes in HTML provide additional information about elements, including key-value pairs placed within the start tag and formatted in double quotes.', 'Paragraphs in CSS have default styling, including display block and margin properties.', 'The A tag creates hyperlinks with attributes such as href for directing to a specific location and target for opening links in new tabs.', 'The strong and EM tags are used to emphasize or highlight text, with default behaviors such as bold and italic styling.', 'EM is a measurement in CSS used for responsiveness.']}, {'end': 2568.795, 'segs': [{'end': 1746.692, 'src': 'embed', 'start': 1720.567, 'weight': 0, 'content': [{'end': 1725.511, 'text': 'And notice that the ordered list now gets rid of the bullet points and replaces it with the numbers.', 'start': 1720.567, 'duration': 4.944}, {'end': 1728.793, 'text': "Okay, so it'll automatically add numbers to your list.", 'start': 1726.091, 'duration': 2.702}, {'end': 1733.379, 'text': "Now, unordered lists are usually what's used for website navigation.", 'start': 1729.676, 'duration': 3.703}, {'end': 1736.903, 'text': "When you see a nav bar up at the top, that's usually just an unordered list.", 'start': 1733.419, 'duration': 3.484}, {'end': 1741.727, 'text': "It's just styled so that the elements float to the right.", 'start': 1736.963, 'duration': 4.764}, {'end': 1746.692, 'text': "They're displayed in line, and it has some really nice background colors and things like that.", 'start': 1741.747, 'duration': 4.945}], 'summary': 'Ordered lists use numbers, unordered lists for website navigation.', 'duration': 26.125, 'max_score': 1720.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1720567.jpg'}, {'end': 1790.742, 'src': 'embed', 'start': 1764.769, 'weight': 8, 'content': [{'end': 1771.035, 'text': 'So we have table, and then we have a head, an area for the heading, and then an area for the table body.', 'start': 1764.769, 'duration': 6.266}, {'end': 1776.8, 'text': "So we say T head, and then we're going to have T body.", 'start': 1771.135, 'duration': 5.665}, {'end': 1783.597, 'text': "now in the heading is where we're going to put the row that has, like you know, the.", 'start': 1779.013, 'duration': 4.584}, {'end': 1789.461, 'text': "if we're going to have a name, email and age column, all right, so these will be the headings of each column.", 'start': 1783.597, 'duration': 5.864}, {'end': 1790.742, 'text': "so we're going to put a tr.", 'start': 1789.461, 'duration': 1.281}], 'summary': 'Describing the structure of a table with headings and body.', 'duration': 25.973, 'max_score': 1764.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1764769.jpg'}, {'end': 1962.626, 'src': 'embed', 'start': 1932.671, 'weight': 7, 'content': [{'end': 1935.153, 'text': 'You want to use tables for tabular data only.', 'start': 1932.671, 'duration': 2.482}, {'end': 1941.896, 'text': "So if you have a list of customers with their names and info like this, that's fine to use a table.", 'start': 1935.553, 'duration': 6.343}, {'end': 1943.737, 'text': 'But do not use it for your layout.', 'start': 1942.176, 'duration': 1.561}, {'end': 1946.798, 'text': 'You want to use CSS for your website layout.', 'start': 1943.757, 'duration': 3.041}, {'end': 1952.781, 'text': "That's very 1999-ish to use tables for layouts.", 'start': 1947.159, 'duration': 5.622}, {'end': 1959.784, 'text': "And there's little rules like that, that they're not enforced by the browser per se or by the technology,", 'start': 1953.141, 'duration': 6.643}, {'end': 1962.626, 'text': "but it's just there's a right and a wrong way to do things.", 'start': 1959.784, 'duration': 2.842}], 'summary': 'Use tables for tabular data only, not for website layout. use css instead.', 'duration': 29.955, 'max_score': 1932.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1932671.jpg'}, {'end': 2022.98, 'src': 'embed', 'start': 1990.399, 'weight': 3, 'content': [{'end': 1993.701, 'text': "but we can't add functionality to the form with HTML.", 'start': 1990.399, 'duration': 3.302}, {'end': 1995.683, 'text': 'For instance, a login form.', 'start': 1994.142, 'duration': 1.541}, {'end': 2001.047, 'text': 'You can build the actual look of the form with HTML, but to actually make it function,', 'start': 1996.003, 'duration': 5.044}, {'end': 2006.931, 'text': 'you need to have something like PHP or some other programming language with dynamic functionality.', 'start': 2001.047, 'duration': 5.884}, {'end': 2010.034, 'text': "All right, so we're only covering the look of the form.", 'start': 2007.452, 'duration': 2.582}, {'end': 2013.916, 'text': "So we're going to put in a form tag.", 'start': 2011.094, 'duration': 2.822}, {'end': 2022.98, 'text': "Now usually with a form you'll see an attribute called action, and that's going to basically submit the form to a certain page.", 'start': 2014.596, 'duration': 8.384}], 'summary': 'Html only creates form appearance; php adds functionality. form action submits to page.', 'duration': 32.581, 'max_score': 1990.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1990399.jpg'}, {'end': 2114.633, 'src': 'embed', 'start': 2084.44, 'weight': 4, 'content': [{'end': 2087.001, 'text': "We're going to put a label for, let's say, first name.", 'start': 2084.44, 'duration': 2.561}, {'end': 2090.922, 'text': "And then under that, let's put an input tag.", 'start': 2088.081, 'duration': 2.841}, {'end': 2096.284, 'text': "So an input is going to have an attribute called type because there's a lot of different inputs.", 'start': 2091.623, 'duration': 4.661}, {'end': 2099.227, 'text': 'This is actually going to be a text input.', 'start': 2097.226, 'duration': 2.001}, {'end': 2101.888, 'text': 'Okay, which is probably the most common.', 'start': 2099.787, 'duration': 2.101}, {'end': 2107.17, 'text': 'And then the name attribute has to do with, again, server-side programming.', 'start': 2102.388, 'duration': 4.782}, {'end': 2114.633, 'text': "If we were submitting this to a PHP file, this name attribute is how we would grab the value of this form that's submitted.", 'start': 2107.23, 'duration': 7.403}], 'summary': 'Creating a text input field with attributes for server-side programming', 'duration': 30.193, 'max_score': 2084.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2084440.jpg'}, {'end': 2227.684, 'src': 'embed', 'start': 2193.332, 'weight': 9, 'content': [{'end': 2195.033, 'text': "That's why they're on the same line here.", 'start': 2193.332, 'duration': 1.701}, {'end': 2198.536, 'text': 'And they only take up the amount of width that that element takes up.', 'start': 2195.073, 'duration': 3.463}, {'end': 2204.141, 'text': "Usually, you'll have form fields on separate lines.", 'start': 2199.537, 'duration': 4.604}, {'end': 2206.022, 'text': "So what I'm going to do is wrap them in a div.", 'start': 2204.221, 'duration': 1.801}, {'end': 2209.405, 'text': 'Because remember, divs are block level elements.', 'start': 2207.003, 'duration': 2.402}, {'end': 2212.407, 'text': "So that'll actually put it on the next line.", 'start': 2209.785, 'duration': 2.622}, {'end': 2215.115, 'text': 'All right.', 'start': 2214.795, 'duration': 0.32}, {'end': 2216.076, 'text': "So let's do that.", 'start': 2215.175, 'duration': 0.901}, {'end': 2221.279, 'text': "And then we'll put a div here, wrap that around both the label and the input.", 'start': 2216.176, 'duration': 5.103}, {'end': 2227.684, 'text': "Okay So now if we reload now they're on separate lines, they're still pretty close together.", 'start': 2223.281, 'duration': 4.403}], 'summary': 'Using divs to separate form fields onto separate lines.', 'duration': 34.352, 'max_score': 2193.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2193332.jpg'}, {'end': 2353.753, 'src': 'embed', 'start': 2317.233, 'weight': 5, 'content': [{'end': 2322.779, 'text': "Another field that you'll see quite a bit is a select list.", 'start': 2317.233, 'duration': 5.546}, {'end': 2325.261, 'text': "For that, I'm just going to copy this div.", 'start': 2322.799, 'duration': 2.462}, {'end': 2328.905, 'text': "Let's say this is.", 'start': 2327.984, 'duration': 0.921}, {'end': 2331.171, 'text': "I don't know.", 'start': 2330.891, 'duration': 0.28}, {'end': 2332.612, 'text': "We'll just say gender, I guess.", 'start': 2331.191, 'duration': 1.421}, {'end': 2336.395, 'text': "So let's say we want to select list to choose either male or female.", 'start': 2333.333, 'duration': 3.062}, {'end': 2341.099, 'text': "So we'll put a select.", 'start': 2337.076, 'duration': 4.023}, {'end': 2343.341, 'text': "We'll give it a name of gender.", 'start': 2341.68, 'duration': 1.661}, {'end': 2351.613, 'text': 'Okay, now each select is going to have a couple options.', 'start': 2346.971, 'duration': 4.642}, {'end': 2353.753, 'text': "So that'll be the option tag.", 'start': 2352.133, 'duration': 1.62}], 'summary': 'Creating a select list for gender with options male and female.', 'duration': 36.52, 'max_score': 2317.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2317233.jpg'}], 'start': 1596.058, 'title': 'Html lists, tables, forms, and fields', 'summary': 'Covers the creation of unordered and ordered lists, html table structure, and form creation basics. it also demonstrates the usage of various html form fields and tags, including their attributes and impact on form design and functionality.', 'chapters': [{'end': 1741.727, 'start': 1596.058, 'title': 'Html lists: unordered and ordered', 'summary': 'Covers the creation of unordered and ordered lists in html, including the default styling and potential for customization, used for website navigation and other purposes.', 'duration': 145.669, 'highlights': ['Ordered list replaces bullet points with numbers', 'Unordered list creates bullet point list items', 'Unordered lists commonly used for website navigation']}, {'end': 2125.177, 'start': 1741.747, 'title': 'Html tables and forms', 'summary': 'Discusses the structure of html tables, including the tags involved and the purpose of using tables for tabular data only. it also covers the basics of creating forms in html, including the form tag, form attributes, and the input tag for creating text inputs.', 'duration': 383.43, 'highlights': ['HTML tables are used for tabular data only', 'Structure of HTML tables', 'Creating forms in HTML']}, {'end': 2568.795, 'start': 2126.249, 'title': 'Html form fields and tags', 'summary': 'Demonstrates the usage of various html form fields and tags, including line breaks, divs, input types, text area, select list, number, date, and button, along with their attributes and their impact on form design and functionality.', 'duration': 442.546, 'highlights': ['The chapter demonstrates the usage of various HTML form fields and tags', 'Usage of input types and their impact on form design and functionality', 'Explanation of the text area and select list', 'Demonstration of the usage of divs for form field arrangement']}], 'duration': 972.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE1596058.jpg', 'highlights': ['Ordered list replaces bullet points with numbers', 'Unordered list creates bullet point list items', 'Unordered lists commonly used for website navigation', 'The chapter demonstrates the usage of various HTML form fields and tags', 'Usage of input types and their impact on form design and functionality', 'Explanation of the text area and select list', 'Creating forms in HTML', 'HTML tables are used for tabular data only', 'Structure of HTML tables', 'Demonstration of the usage of divs for form field arrangement']}, {'end': 2784.498, 'segs': [{'end': 2591.919, 'src': 'embed', 'start': 2568.895, 'weight': 0, 'content': [{'end': 2576.881, 'text': "It's just used to display stuff on the screen and then use other languages like JavaScript to make it dynamic.", 'start': 2568.895, 'duration': 7.986}, {'end': 2579.703, 'text': 'The next thing I want to look at are images or the image tag.', 'start': 2576.901, 'duration': 2.802}, {'end': 2585.555, 'text': "OK, so for images, we're going to use an IMG tag.", 'start': 2582.472, 'duration': 3.083}, {'end': 2588.217, 'text': 'And this is actually a self-closing tag.', 'start': 2585.855, 'duration': 2.362}, {'end': 2591.919, 'text': "We don't need to do slash image or anything like that.", 'start': 2588.237, 'duration': 3.682}], 'summary': 'Using html to display content and images, including self-closing img tag.', 'duration': 23.024, 'max_score': 2568.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2568895.jpg'}, {'end': 2654.444, 'src': 'embed', 'start': 2618.203, 'weight': 2, 'content': [{'end': 2621.744, 'text': "i think it's on my desktop.", 'start': 2618.203, 'duration': 3.541}, {'end': 2627.566, 'text': "yeah, html cheat sheet, and let's uh, let's save it as just sample.jpg.", 'start': 2621.744, 'duration': 5.822}, {'end': 2634.948, 'text': "all right, and then what we'll do is go to our image and we'll say source, okay, source attribute,", 'start': 2627.566, 'duration': 7.382}, {'end': 2638.209, 'text': "and we're going to set this to the name of the image, which is sample.jpg.", 'start': 2634.948, 'duration': 3.261}, {'end': 2643.996, 'text': "Alright, and then we'll go back to our HTML reload and now we have the image.", 'start': 2639.813, 'duration': 4.183}, {'end': 2654.444, 'text': 'Now, the reason it knows where to look is because this is actually in the same folder as our index.html,', 'start': 2645.197, 'duration': 9.247}], 'summary': 'Creating an html image with source attribute set to sample.jpg.', 'duration': 36.241, 'max_score': 2618.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2618203.jpg'}, {'end': 2707.165, 'src': 'embed', 'start': 2681.341, 'weight': 1, 'content': [{'end': 2689.305, 'text': "So what we would have to do is change the location here to go to images slash sample.jpg, and we reload, and now it's back.", 'start': 2681.341, 'duration': 7.964}, {'end': 2693.143, 'text': 'All right, now with images, you should also use an alt attribute.', 'start': 2690.1, 'duration': 3.043}, {'end': 2699.389, 'text': "And basically what this does is if it can't find the image, it's going to display whatever text is here.", 'start': 2694.504, 'duration': 4.885}, {'end': 2702.432, 'text': "So let's just say my sample image.", 'start': 2699.889, 'duration': 2.543}, {'end': 2707.165, 'text': "OK, now if I if I save and reload, we're not going to see any difference.", 'start': 2703.584, 'duration': 3.581}], 'summary': 'Changing image location to images/sample.jpg and adding alt attribute for accessibility.', 'duration': 25.824, 'max_score': 2681.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2681341.jpg'}, {'end': 2764.35, 'src': 'embed', 'start': 2727.099, 'weight': 6, 'content': [{'end': 2730.782, 'text': "All right, now there's also a width and height attribute you can use in HTML.", 'start': 2727.099, 'duration': 3.683}, {'end': 2736.726, 'text': 'Usually, I would suggest using CSS to do this stuff, but it is available.', 'start': 2731.963, 'duration': 4.763}, {'end': 2743.271, 'text': "So let's say we wanted this to be, let's say, 200 pixels, and reload.", 'start': 2737.226, 'duration': 6.045}, {'end': 2745.432, 'text': "It'll change it to 200 pixels.", 'start': 2743.811, 'duration': 1.621}, {'end': 2747.434, 'text': 'Notice that images are also inline.', 'start': 2745.532, 'duration': 1.902}, {'end': 2748.955, 'text': "That's why it's not on a new line.", 'start': 2747.454, 'duration': 1.501}, {'end': 2751.457, 'text': "So what I'm going to do here is just put a line break.", 'start': 2749.335, 'duration': 2.122}, {'end': 2764.35, 'text': 'I put it below the image.', 'start': 2757.568, 'duration': 6.782}], 'summary': 'Html allows setting width and height attributes, e.g., 200 pixels, for inline images.', 'duration': 37.251, 'max_score': 2727.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2727099.jpg'}], 'start': 2568.895, 'title': 'Html image basics and attributes', 'summary': 'Covers the basics and attributes of using the img tag in html, emphasizing the importance of the source attribute, specifying image source locations, using alt attributes for descriptions, and setting image dimensions using width and height attributes.', 'chapters': [{'end': 2643.996, 'start': 2568.895, 'title': 'Html image tag basics', 'summary': 'Discusses the basics of using the img tag in html, including its attributes and how to display an image, emphasizing the importance of the source attribute and its role in loading images.', 'duration': 75.101, 'highlights': ['The IMG tag is a self-closing tag used to display images on a webpage, with the source attribute specifying the image to load.', 'The importance of specifying the source attribute is emphasized, as without it, the image tag alone is meaningless.', 'Demonstration of using the source attribute to load and display a sample image (sample.jpg) in the HTML.', 'Explanation of the process of saving an image and setting the source attribute to the image name (sample.jpg) to display the image on the webpage.']}, {'end': 2784.498, 'start': 2645.197, 'title': 'Html image attributes', 'summary': 'Discusses the usage of image attributes in html, including specifying image source locations, using alt attributes for image descriptions, and setting image dimensions using width and height attributes.', 'duration': 139.301, 'highlights': ["The chapter explains how to specify the image source location in HTML, demonstrating how to reference images in the same folder and in subfolders, such as 'images/sample.jpg'.", "It emphasizes the use of the alt attribute in HTML for images, noting that if an image is not found, the alt text will be displayed instead, providing an example with 'my sample image'.", 'The chapter also introduces the width and height attributes in HTML, demonstrating how to set the dimensions of an image, and mentions that using CSS is usually suggested for this purpose.']}], 'duration': 215.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2568895.jpg', 'highlights': ['The IMG tag is a self-closing tag used to display images on a webpage, with the source attribute specifying the image to load.', 'The importance of specifying the source attribute is emphasized, as without it, the image tag alone is meaningless.', 'Demonstration of using the source attribute to load and display a sample image (sample.jpg) in the HTML.', 'Explanation of the process of saving an image and setting the source attribute to the image name (sample.jpg) to display the image on the webpage.', "The chapter explains how to specify the image source location in HTML, demonstrating how to reference images in the same folder and in subfolders, such as 'images/sample.jpg'.", "It emphasizes the use of the alt attribute in HTML for images, noting that if an image is not found, the alt text will be displayed instead, providing an example with 'my sample image'.", 'The chapter also introduces the width and height attributes in HTML, demonstrating how to set the dimensions of an image, and mentions that using CSS is usually suggested for this purpose.']}, {'end': 3641.516, 'segs': [{'end': 2897.553, 'src': 'embed', 'start': 2866.865, 'weight': 4, 'content': [{'end': 2868.846, 'text': "It's not going to show the actual site.", 'start': 2866.865, 'duration': 1.981}, {'end': 2870.948, 'text': 'If we look at the source code, it will.', 'start': 2869.387, 'duration': 1.561}, {'end': 2875.231, 'text': "So if we go down right here, you'll see it does show it here.", 'start': 2871.928, 'duration': 3.303}, {'end': 2878.833, 'text': 'And you can style this however you want from within CSS.', 'start': 2876.172, 'duration': 2.661}, {'end': 2883.744, 'text': 'We also have the ABBR tag or abbreviation tag.', 'start': 2879.861, 'duration': 3.883}, {'end': 2893.811, 'text': "So let's say we have a paragraph here and we'll say the, uh, let's say the WWW is awesome.", 'start': 2884.544, 'duration': 9.267}, {'end': 2894.571, 'text': 'All right.', 'start': 2894.271, 'duration': 0.3}, {'end': 2897.553, 'text': 'Now this we all know stands for worldwide web.', 'start': 2894.611, 'duration': 2.942}], 'summary': 'The transcript covers using source code to display website content and styling with css, as well as utilizing the abbr tag to define abbreviations.', 'duration': 30.688, 'max_score': 2866.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2866865.jpg'}, {'end': 2986.24, 'src': 'embed', 'start': 2959.445, 'weight': 0, 'content': [{'end': 2963.528, 'text': 'Now what I want to do is talk a little bit about HTML5 semantic tags.', 'start': 2959.445, 'duration': 4.083}, {'end': 2970.566, 'text': 'So the HTML5 semantic tags clearly describe their meaning to both the browser and the developer.', 'start': 2964.58, 'duration': 5.986}, {'end': 2976.291, 'text': 'So if we look over here, these are the tags that were added, and this is kind of a diagram of what you would use these for.', 'start': 2971.026, 'duration': 5.265}, {'end': 2979.154, 'text': 'You use them to kind of lay out your website.', 'start': 2976.611, 'duration': 2.543}, {'end': 2981.916, 'text': 'So we have header, which obviously would be the header.', 'start': 2979.174, 'duration': 2.742}, {'end': 2986.24, 'text': "You'd usually have your logo, things like that, your social media links.", 'start': 2981.956, 'duration': 4.284}], 'summary': 'Html5 semantic tags describe website layout, including header with logo and social media links.', 'duration': 26.795, 'max_score': 2959.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2959445.jpg'}, {'end': 3127.103, 'src': 'embed', 'start': 3101.939, 'weight': 2, 'content': [{'end': 3107.263, 'text': 'Okay So this would be like the, the main area of the web of the page.', 'start': 3101.939, 'duration': 5.324}, {'end': 3113.318, 'text': 'So if this were like an about page, we could have a couple of paragraphs about the company or whatever.', 'start': 3108.436, 'duration': 4.882}, {'end': 3115.739, 'text': 'This is a blog, a blog page.', 'start': 3113.338, 'duration': 2.401}, {'end': 3122.001, 'text': "So what we're going to do is we're going to have some article tags and then in each article will be each blog post.", 'start': 3115.799, 'duration': 6.202}, {'end': 3125.703, 'text': "Okay So let's go ahead and put an H3 here.", 'start': 3122.381, 'duration': 3.322}, {'end': 3127.103, 'text': 'That would be the title.', 'start': 3125.743, 'duration': 1.36}], 'summary': 'Web page includes about and blog sections with h3 titles', 'duration': 25.164, 'max_score': 3101.939, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE3101939.jpg'}], 'start': 2786.778, 'title': 'Html basics, html5 semantic tags, and creating a blog page', 'summary': 'Covers basic html tags and html5 semantic tags, such as header, nav, section, article, aside, and footer, with practical examples. it also demonstrates creating a blog page using html, including blog posts, categories, navigation, footer, and meta tags for seo, emphasizing proper html structure.', 'chapters': [{'end': 3101.919, 'start': 2786.778, 'title': 'Html basics and html5 semantic tags', 'summary': 'Covers basic html tags like link, image, quotations, and introduces html5 semantic tags like header, nav, section, article, aside, and footer with practical examples and their structural use in website layout.', 'duration': 315.141, 'highlights': ['The chapter covers basic HTML tags such as link, image, and quotations, and introduces HTML5 semantic tags like header, nav, section, article, aside, and footer.', 'HTML5 semantic tags are used to clearly describe their meaning to both the browser and the developer, and to structure the document further.', 'Practical examples of using HTML5 semantic tags like header, nav, section, article, aside, and footer are provided to map out a page, with a focus on the structural use in website layout.', 'The use of ABBR and CITE tags in HTML for abbreviations and citations is explained with practical examples and their visual effects on the webpage.', 'The chapter also demonstrates the use of ABBR tag for abbreviations and CITE tag for citations, along with their visual effects on the webpage.']}, {'end': 3641.516, 'start': 3101.939, 'title': 'Creating a blog page', 'summary': 'Demonstrates the creation of a blog page using html, including adding blog posts, categories, navigation, footer, and meta tags for search engine optimization. it also briefly touches on adding basic css styles and linking multiple pages. the tutorial emphasizes the importance of proper html structure for blog pages.', 'duration': 539.577, 'highlights': ['The chapter demonstrates the creation of a blog page using HTML, including adding blog posts, categories, navigation, footer, and meta tags for search engine optimization.', 'It also briefly touches on adding basic CSS styles and linking multiple pages.', 'The tutorial emphasizes the importance of proper HTML structure for blog pages.']}], 'duration': 854.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/UB1O30fR-EE/pics/UB1O30fR-EE2786778.jpg', 'highlights': ['The chapter covers basic HTML tags and introduces HTML5 semantic tags like header, nav, section, article, aside, and footer.', 'Practical examples of using HTML5 semantic tags are provided to map out a page, with a focus on the structural use in website layout.', 'The chapter demonstrates the creation of a blog page using HTML, including blog posts, categories, navigation, footer, and meta tags for search engine optimization.', 'The tutorial emphasizes the importance of proper HTML structure for blog pages.', 'The use of ABBR and CITE tags in HTML for abbreviations and citations is explained with practical examples and their visual effects on the webpage.']}], 'highlights': ['The series focuses on HTML5 for absolute beginners with no prerequisites', 'Emphasizes patient learning and discourages impatience in web development', 'HTML is the building block of the web, used by every single site', 'Sublime Text recommended as a lightweight and simple text editor for HTML', 'HTML files can be created and tested locally without a special server', "Importance of naming the home page as 'index.html' for correct display", "Developer tools like browser's console and Elements tab are emphasized", 'Importance of doc type declaration and title tag in an HTML5 document', 'Default browser styling for different heading tags is explained', 'Attributes in HTML provide additional information about elements', 'Usage of paragraphs, hyperlinks, strong, and EM tags in HTML', 'Ordered and unordered lists, form fields, and HTML tables usage demonstrated', 'IMG tag usage, specifying source attribute, alt attribute, and image dimensions', 'Introduction and practical examples of HTML5 semantic tags', 'Creation of a blog page using HTML with practical examples', 'Explanation of ABBR and CITE tags in HTML with practical examples']}