title
Introduction to HTML Programming

description
Follow the Insanity at: https://www.FailedNormal.com Downloadable Podcasts at: https://failednormal.podbean.com iTunes: https://itunes.apple.com/us/podcast/failed-normal/id1349818284?mt=2 Info Level: Beginner Presenter: Eli the Computer Guy Length of Class: 100 Minutes Tracks Web Design Prerequisites Introduction to Website Administration Purpose of Class This class teaches students basic HTML Programming. After taking this class students will be able to code basic HTML web pages and write raw HTML code for sites such as Craigslist. Topics Covered Creating an HTML Page Formatting Text Creating Lists Creating Tables Adding Pictures Adding Hyperlinks Class Notes Introduction HTML is still very relevant for web programming HTML is used to create Static Web Pages and for Formating The Basics Suffix has to be with .htm or .html Home page has to be named INDEX or DEFAULT Different web browsers display things differently Deprecated means you should not use If you have a LINUX web server you have to make sure you use correct capitalization

detail
{'title': 'Introduction to HTML Programming', 'heatmap': [{'end': 1417.57, 'start': 1300.257, 'weight': 0.964}, {'end': 4901.097, 'start': 4834.246, 'weight': 0.702}, {'end': 5385.411, 'start': 5254.616, 'weight': 1}], 'summary': 'An introduction to html programming emphasizes its simplicity and independence, covers challenges in web development, html basics, dynamic web development, coding, text formatting, lists, tables, image adding, resizing, and hyperlinks, serving as the first step in web programming and highlighting the potential new features of html5.', 'chapters': [{'end': 122.451, 'segs': [{'end': 73.53, 'src': 'embed', 'start': 0.27, 'weight': 0, 'content': [{'end': 8.166, 'text': "I'm Eli the Computer Guy, and today's class is Introduction to HTML Programming, or Hyper Text Markup Language Programming.", 'start': 0.27, 'duration': 7.896}, {'end': 15.186, 'text': 'Hypertext markup language is the basic programming language that is used to create web pages.', 'start': 9.361, 'duration': 5.825}, {'end': 22.393, 'text': 'Almost every single web page that you see is programmed in one way or another using HTML.', 'start': 15.787, 'duration': 6.606}, {'end': 37.595, 'text': "No matter what other types of languages you learn whether it's JavaScript or PHP or anything like that The main programming language glue you could say that holds everything else together on the web is HTML.", 'start': 23.374, 'duration': 14.221}, {'end': 42.955, 'text': 'HTML is a very simple language to learn.', 'start': 40.132, 'duration': 2.823}, {'end': 48.26, 'text': "You don't need any special software to be able to program in HTML.", 'start': 44.296, 'duration': 3.964}, {'end': 57.149, 'text': 'You may be saying, you know, I have Dreamweaver or I have some other very, very complicated programming, piece of web programming software.', 'start': 48.681, 'duration': 8.468}, {'end': 62.454, 'text': 'Will I be able to use this? Well, yes, you can use Dreamweaver to program in HTML.', 'start': 57.449, 'duration': 5.005}, {'end': 66.408, 'text': "You don't need Dreamweaver to program in HTML.", 'start': 63.968, 'duration': 2.44}, {'end': 68.529, 'text': 'A simple notepad.', 'start': 66.888, 'duration': 1.641}, {'end': 73.53, 'text': "you know that little text editor that's been around in Windows for 20 years.", 'start': 68.529, 'duration': 5.001}], 'summary': 'Introduction to html: the fundamental language for web pages; simple to learn and accessible with basic tools.', 'duration': 73.26, 'max_score': 0.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE270.jpg'}, {'end': 122.451, 'src': 'embed', 'start': 98.342, 'weight': 3, 'content': [{'end': 104.564, 'text': 'I put down $800 or $2000 or whatever for this big package of web development software.', 'start': 98.342, 'duration': 6.222}, {'end': 106.205, 'text': "I don't care about HTML.", 'start': 104.884, 'duration': 1.321}, {'end': 109.986, 'text': 'Who cares about Notepad? I want to create the big fancy stuff.', 'start': 106.485, 'duration': 3.501}, {'end': 122.451, 'text': 'What you should realize is all of these very big fancy programs basically turn everything that you give them into HTML.', 'start': 111.647, 'duration': 10.804}], 'summary': 'Invested $800-$2000 in web development software to create big fancy projects but all programs turn input into html.', 'duration': 24.109, 'max_score': 98.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE98342.jpg'}], 'start': 0.27, 'title': 'Introduction to html programming', 'summary': 'Introduces html as the fundamental web programming language, emphasizing its simplicity and independence from specialized software and its crucial role in web development.', 'chapters': [{'end': 122.451, 'start': 0.27, 'title': 'Introduction to html programming', 'summary': 'Introduces html as the basic programming language for creating web pages, emphasizing its simplicity and independence from specialized software, and highlighting its fundamental role in web development.', 'duration': 122.181, 'highlights': ['HTML is the basic programming language used to create web pages, almost every single web page is programmed in one way or another using HTML.', 'HTML is the main programming language that holds everything else together on the web, and is a very simple language to learn.', 'No specialized software is needed to program in HTML; simple notepad, a text editor, can be used to create HTML documents.', 'Big fancy web development programs essentially turn everything into HTML, regardless of the initial format or software used.']}], 'duration': 122.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE270.jpg', 'highlights': ['HTML is the basic programming language for web pages.', 'HTML is the main programming language that holds everything together on the web.', 'No specialized software is needed to program in HTML.', 'Big fancy web development programs essentially turn everything into HTML.']}, {'end': 349.192, 'segs': [{'end': 149.333, 'src': 'embed', 'start': 124.551, 'weight': 1, 'content': [{'end': 133.579, 'text': 'One of the problems can be and web developers learn is sometimes the pieces of software you use to develop websites.', 'start': 124.551, 'duration': 9.028}, {'end': 141.626, 'text': "they don't get the communication quite right, and so your web page doesn't turn out entirely how you want it to turn out.", 'start': 133.579, 'duration': 8.047}, {'end': 149.333, 'text': 'And so the only way to fix that is to go in and to actually edit the HTML code line for line.', 'start': 142.267, 'duration': 7.066}], 'summary': 'Web developers face communication issues with software, leading to manual html code editing.', 'duration': 24.782, 'max_score': 124.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE124551.jpg'}, {'end': 264.751, 'src': 'embed', 'start': 193.162, 'weight': 2, 'content': [{'end': 202.907, 'text': "So if you understand HTML, you can click on that little source tab and you can see if there are any problems in the programming as it's been written.", 'start': 193.162, 'duration': 9.745}, {'end': 208.33, 'text': 'HTML is a very, very simple programming language.', 'start': 203.828, 'duration': 4.502}, {'end': 211.817, 'text': "We're going to go through most of what you need to know today.", 'start': 208.41, 'duration': 3.407}, {'end': 221.127, 'text': 'I mean this little 30 or 40 or 60 minute class will tell you basically how to program in HTML and then you get to go on from here.', 'start': 211.837, 'duration': 9.29}, {'end': 226.073, 'text': 'Beyond simply being able to go into, like the source code in Dreamweaver, though,', 'start': 222.028, 'duration': 4.045}, {'end': 232.875, 'text': "Where understanding HTML is relevant is say you're posting ads on Craigslist.", 'start': 227.533, 'duration': 5.342}, {'end': 238.436, 'text': 'If you understand HTML, you can put in pure HTML into that Craigslist ad.', 'start': 233.475, 'duration': 4.961}, {'end': 244.118, 'text': 'You can put in pictures and flashy things and all that kind of stuff if you understand how to program in HTML.', 'start': 238.877, 'duration': 5.241}, {'end': 248.839, 'text': 'If you use a WordPress blog, you can plug in your HTML.', 'start': 245.178, 'duration': 3.661}, {'end': 253.901, 'text': 'If you understand HTML programming, running a WordPress press blog is a lot easier.', 'start': 248.859, 'duration': 5.042}, {'end': 261.63, 'text': "HTML is still a very, very, very relevant programming language, so don't dismiss it.", 'start': 254.907, 'duration': 6.723}, {'end': 264.751, 'text': 'This is one of the beginning courses in the web design series,', 'start': 262.05, 'duration': 2.701}], 'summary': 'Learning html can enhance web design skills and enable customizations in ads and blogs.', 'duration': 71.589, 'max_score': 193.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE193162.jpg'}, {'end': 323.771, 'src': 'embed', 'start': 293.53, 'weight': 0, 'content': [{'end': 299.399, 'text': "Everything that you learn today you'll be able to use for years.", 'start': 293.53, 'duration': 5.869}, {'end': 303.581, 'text': "Basically what I'm teaching you today, I learned about 10 years ago and it's still all relevant.", 'start': 299.539, 'duration': 4.042}, {'end': 310.144, 'text': 'So all you should remember about HTML4 and HTML5 is when HTML5 comes out,', 'start': 304.001, 'duration': 6.143}, {'end': 316.087, 'text': "there will be lots of new cool features you'll be able to use and program into the webpage, like video.", 'start': 310.144, 'duration': 5.943}, {'end': 323.771, 'text': "You'll actually be able to plug in pure video using HTML5, but it'll be additional features.", 'start': 316.187, 'duration': 7.584}], 'summary': 'Learnings from 10 years ago are still relevant; html5 offers new features like video.', 'duration': 30.241, 'max_score': 293.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE293530.jpg'}], 'start': 124.551, 'title': 'Web development challenges and html basics', 'summary': 'Covers challenges in web development software communication and the need to edit html line by line. it also emphasizes understanding html basics, relevance for tasks such as troubleshooting, and the ongoing relevance in web design series. additionally, it introduces the importance of html4 and upcoming html5 standards, highlighting potential new features like video integration.', 'chapters': [{'end': 192.741, 'start': 124.551, 'title': 'Web development software overview', 'summary': 'Discusses the challenges web developers face with software communication, emphasizing the need to edit html code line by line to resolve issues, and highlights the features of dreamweaver, including its editing, preview, and source code tabs.', 'duration': 68.19, 'highlights': ['The need to edit HTML code line by line is emphasized as a solution to software communication issues faced by web developers.', 'Dreamweaver software offers three tabs for viewing projects: editing, preview, and source code, providing an easy way to edit and visualize web pages.', 'The editing tab in Dreamweaver allows users to easily manipulate web elements such as pictures and text size.']}, {'end': 264.751, 'start': 193.162, 'title': 'Html basics for web design', 'summary': 'Explains the relevance of understanding html, a simple yet relevant programming language, to tasks such as troubleshooting, posting ads on craigslist, and running a wordpress blog, highlighting its ongoing relevance in the web design series.', 'duration': 71.589, 'highlights': ["Understanding HTML's relevance in troubleshooting and programming tasks such as posting ads on Craigslist and running a WordPress blog, emphasizing its ongoing relevance in web design series.", 'The simplicity of HTML programming, providing a foundation for beginners to learn the basics in a short 30-60 minute class.', 'The capability of HTML to enable users to add pictures, flashy elements, and pure HTML into Craigslist ads and WordPress blogs, enhancing user experience and ease of use.', 'The importance of not dismissing HTML as it remains a very relevant programming language in the field of web design.']}, {'end': 349.192, 'start': 264.751, 'title': 'Html basics and html5 standards', 'summary': 'Introduces the importance of understanding html programming basics, emphasizing the relevance of html4 and the upcoming html5 standards, highlighting the potential for new features like video integration.', 'duration': 84.441, 'highlights': ['HTML5 will introduce new features like video integration into webpages, offering additional capabilities beyond HTML4.', "HTML programming basics remain relevant for years, as evidenced by the instructor's experience of using knowledge acquired 10 years ago.", 'Understanding HTML basics is crucial before delving into advanced programming concepts.']}], 'duration': 224.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE124551.jpg', 'highlights': ['HTML5 will introduce new features like video integration into webpages, offering additional capabilities beyond HTML4.', 'The need to edit HTML code line by line is emphasized as a solution to software communication issues faced by web developers.', "Understanding HTML's relevance in troubleshooting and programming tasks such as posting ads on Craigslist and running a WordPress blog, emphasizing its ongoing relevance in web design series.", 'The importance of not dismissing HTML as it remains a very relevant programming language in the field of web design.', 'The simplicity of HTML programming, providing a foundation for beginners to learn the basics in a short 30-60 minute class.', 'The capability of HTML to enable users to add pictures, flashy elements, and pure HTML into Craigslist ads and WordPress blogs, enhancing user experience and ease of use.']}, {'end': 871.123, 'segs': [{'end': 379.818, 'src': 'embed', 'start': 350.092, 'weight': 1, 'content': [{'end': 364.077, 'text': 'The first thing that you have to understand about HTML is that it is a static language or it is a language that creates either static web pages or static parts of a web page.', 'start': 350.092, 'duration': 13.985}, {'end': 372.632, 'text': 'So, when you look at a web page, when you go to Amazon.com or whatever other web page out there,', 'start': 365.126, 'duration': 7.506}, {'end': 379.818, 'text': "they use multiple programming languages in order to create that really fancy, flashy website that you're looking at.", 'start': 372.632, 'duration': 7.186}], 'summary': 'Html creates static web pages or parts. multiple languages used for fancy websites.', 'duration': 29.726, 'max_score': 350.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE350092.jpg'}, {'end': 436.544, 'src': 'embed', 'start': 405.678, 'weight': 0, 'content': [{'end': 413.585, 'text': 'you will see that the average web page usually uses anywhere between three to five different programming languages.', 'start': 405.678, 'duration': 7.907}, {'end': 419.95, 'text': "to make those really flashy, fancy, modern websites that you're looking at.", 'start': 414.906, 'duration': 5.044}, {'end': 424.653, 'text': 'HTML creates the static parts of the website.', 'start': 419.97, 'duration': 4.683}, {'end': 436.544, 'text': "So, if you want to create a static page, let's say you want a website that will simply show I don't know the location of your business maybe a menu,", 'start': 424.794, 'duration': 11.75}], 'summary': 'Average web page uses 3-5 programming languages to create static content.', 'duration': 30.866, 'max_score': 405.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE405678.jpg'}, {'end': 629.345, 'src': 'embed', 'start': 537.087, 'weight': 2, 'content': [{'end': 566.778, 'text': "One thing that you can get messed up, especially with using a Windows computer to create your web page, is you don't want, So it's HTML,", 'start': 537.087, 'duration': 29.691}, {'end': 573, 'text': 'or HTML always has to be the suffix on the end of your title.', 'start': 566.778, 'duration': 6.222}, {'end': 580.122, 'text': 'The next part is if you are actually uploading your website to the internet.', 'start': 573.88, 'duration': 6.242}, {'end': 587.604, 'text': "So let's say you are creating the home page for your business in pure HTML.", 'start': 581.322, 'duration': 6.282}, {'end': 592.748, 'text': 'You always have to name your home page.', 'start': 590.046, 'duration': 2.702}, {'end': 593.708, 'text': 'This is the home page.', 'start': 592.988, 'duration': 0.72}, {'end': 601.813, 'text': "So when somebody goes to, let's say, www.everymanit.com, it has to be named one of four possibilities.", 'start': 593.728, 'duration': 8.085}, {'end': 603.453, 'text': 'And you only get four possibilities.', 'start': 601.873, 'duration': 1.58}, {'end': 611.098, 'text': 'So the title for it has to be either Default or Index.', 'start': 604.314, 'duration': 6.784}, {'end': 622.083, 'text': 'So when you name the page, when you name your homepage, it always has to be called either default or index.', 'start': 614.46, 'duration': 7.623}, {'end': 625.844, 'text': 'And then the suffix has to be .', 'start': 622.883, 'duration': 2.961}, {'end': 629.345, 'text': 'htm or .', 'start': 625.844, 'duration': 3.501}], 'summary': 'When creating a web page using a windows computer, the home page must be named either default or index, with a suffix .htm or .html.', 'duration': 92.258, 'max_score': 537.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE537087.jpg'}, {'end': 871.123, 'src': 'embed', 'start': 844.221, 'weight': 4, 'content': [{'end': 849.384, 'text': 'On a web server, the titles for your pages do not matter at all for Windows.', 'start': 844.221, 'duration': 5.163}, {'end': 852.385, 'text': 'On Linux, capitalization matters.', 'start': 849.864, 'duration': 2.521}, {'end': 858.349, 'text': 'This is a different file than this is a different file than this on Linux.', 'start': 852.686, 'duration': 5.663}, {'end': 859.49, 'text': 'Windows are the same.', 'start': 858.749, 'duration': 0.741}, {'end': 860.11, 'text': 'Linux are different.', 'start': 859.57, 'duration': 0.54}, {'end': 871.123, 'text': 'Also, the final bit for the basics is when you go out to start doing research on your own to find all the weird, cool, little, neat things.', 'start': 861.491, 'duration': 9.632}], 'summary': "On windows, page titles don't matter. on linux, capitalization matters. linux files differ from windows. research for unique features.", 'duration': 26.902, 'max_score': 844.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE844221.jpg'}], 'start': 350.092, 'title': 'Html basics and dynamic web development', 'summary': 'Discusses the fundamentals of html and the use of multiple programming languages for dynamic web content creation. it emphasizes the average use of three to five languages per web page and covers html basics, file suffixes, naming conventions, capitalization impact, and specific requirements for windows and linux servers.', 'chapters': [{'end': 454.643, 'start': 350.092, 'title': 'Understanding html and dynamic web development', 'summary': 'Explains that html is a static language for creating web pages, while dynamic content is created using multiple programming languages like javascript, php, or asp, with the average web page using three to five languages.', 'duration': 104.551, 'highlights': ['HTML is a static language for creating static web pages or parts of a web page. Highlighting the static nature of HTML in creating web content.', 'Multiple programming languages like JavaScript, PHP, or ASP are used to create dynamic and modern web pages, with the average web page using three to five languages. Emphasizing the use of multiple languages for creating dynamic web content.']}, {'end': 871.123, 'start': 454.643, 'title': 'Html basics and web server requirements', 'summary': 'Explains the basics of html, emphasizing the importance of file suffixes, naming conventions for homepages, and the impact of capitalization on web servers, with specific requirements for both windows and linux servers.', 'duration': 416.48, 'highlights': ['HTML creates static pages with suffix .htm or .html, essential for web pages, emphasizing the importance of file suffixes for HTML web pages. HTML only creates static pages with suffix .htm or .html, crucial for web pages.', 'Naming conventions for homepages require them to be either default.htm, index.htm, default.html, or index.html, emphasizing the limited options for naming homepages. Homepages must be named either default.htm, index.htm, default.html, or index.html, providing only four possibilities for naming.', 'Capitalization does not matter for file titles on Windows web servers, but it significantly impacts file recognition on Linux servers, emphasizing the differing requirements for Windows and Linux servers. Capitalization does not matter for file titles on Windows servers, but it does on Linux servers, highlighting the distinctions in server requirements.']}], 'duration': 521.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE350092.jpg', 'highlights': ['Emphasizing the use of multiple languages for creating dynamic web content.', 'Highlighting the static nature of HTML in creating web content.', 'Emphasizing the importance of file suffixes for HTML web pages.', 'Homepages must be named either default.htm, index.htm, default.html, or index.html, providing only four possibilities for naming.', 'Capitalization does not matter for file titles on Windows servers, but it does on Linux servers, highlighting the distinctions in server requirements.']}, {'end': 1680.2, 'segs': [{'end': 904.039, 'src': 'embed', 'start': 876.123, 'weight': 2, 'content': [{'end': 881.846, 'text': 'HTML, you will see that some of the code is something called deprecated.', 'start': 876.123, 'duration': 5.723}, {'end': 890.81, 'text': 'What deprecated means is that this is code that used to be used, but that programmers are trying to get out of the system.', 'start': 882.126, 'duration': 8.684}, {'end': 900.716, 'text': "So this code may currently work, but you shouldn't use it because basically everybody's just trying to wash everything.", 'start': 891.09, 'duration': 9.626}, {'end': 902.517, 'text': 'Out of the system.', 'start': 901.696, 'duration': 0.821}, {'end': 904.039, 'text': "So don't use it.", 'start': 902.978, 'duration': 1.061}], 'summary': 'Deprecated code should not be used as programmers are trying to remove it from the system.', 'duration': 27.916, 'max_score': 876.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE876123.jpg'}, {'end': 1296.473, 'src': 'embed', 'start': 1265.617, 'weight': 1, 'content': [{'end': 1269.478, 'text': 'So this opens and closes the HTML web page.', 'start': 1265.617, 'duration': 3.861}, {'end': 1276.219, 'text': "Then we're going to go back to the top, and we're going to do open head.", 'start': 1271.636, 'duration': 4.583}, {'end': 1282.263, 'text': "And then we'll give a few lines, and then we'll close the head tag.", 'start': 1278.261, 'duration': 4.002}, {'end': 1288.367, 'text': 'So this creates the head of the HTML web page.', 'start': 1283.984, 'duration': 4.383}, {'end': 1293.231, 'text': 'Again, the head is where things that affect the entire web page go.', 'start': 1288.447, 'duration': 4.784}, {'end': 1296.473, 'text': 'Under this, we will then open the body.', 'start': 1294.592, 'duration': 1.881}], 'summary': 'Html web page structure: opens/closes, head, body', 'duration': 30.856, 'max_score': 1265.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE1265617.jpg'}, {'end': 1417.57, 'src': 'heatmap', 'start': 1300.257, 'weight': 0.964, 'content': [{'end': 1307.741, 'text': "And the body is where all the information that you'll actually see when you're creating the web page is.", 'start': 1300.257, 'duration': 7.484}, {'end': 1310.722, 'text': "And then down at the bottom, we'll close the body tag.", 'start': 1308.121, 'duration': 2.601}, {'end': 1314.544, 'text': 'So we open HTML.', 'start': 1312.663, 'duration': 1.881}, {'end': 1316.605, 'text': 'We open the head.', 'start': 1315.825, 'duration': 0.78}, {'end': 1317.585, 'text': 'We close the head.', 'start': 1316.845, 'duration': 0.74}, {'end': 1318.486, 'text': 'We open the body.', 'start': 1317.666, 'duration': 0.82}, {'end': 1319.646, 'text': 'We close the body.', 'start': 1318.746, 'duration': 0.9}, {'end': 1322.928, 'text': 'And then we close the HTML.', 'start': 1320.467, 'duration': 2.461}, {'end': 1324.529, 'text': "Now we'll do file.", 'start': 1323.648, 'duration': 0.881}, {'end': 1327.558, 'text': "And what we're going to do is we're going to do Save As.", 'start': 1325.697, 'duration': 1.861}, {'end': 1329.858, 'text': "We'll go to the desktop.", 'start': 1328.798, 'duration': 1.06}, {'end': 1334.64, 'text': 'And on the desktop, where is the test website?', 'start': 1331.019, 'duration': 3.621}, {'end': 1343.563, 'text': "So the main thing that we need to make sure we don't do here is we don't want to save this file as a text file a.", 'start': 1335.34, 'duration': 8.223}, {'end': 1344.543, 'text': 'txt file.', 'start': 1343.563, 'duration': 0.98}, {'end': 1346.124, 'text': 'We need to save it as a web page.', 'start': 1344.704, 'duration': 1.42}, {'end': 1351.426, 'text': "So we'll click the Save As Type drop-down box, and we'll do All Files.", 'start': 1346.964, 'duration': 4.462}, {'end': 1355.947, 'text': "So we'll act like this is a normal web page.", 'start': 1352.984, 'duration': 2.963}, {'end': 1360.29, 'text': "So we'll call this index.html.", 'start': 1356.067, 'duration': 4.223}, {'end': 1362.672, 'text': 'And then we will save this.', 'start': 1361.271, 'duration': 1.401}, {'end': 1373.336, 'text': 'Now, if we go to our folder, you can see this has a little Firefox icon by it because now the computer now thinks that this is a web page.', 'start': 1364.511, 'duration': 8.825}, {'end': 1377.218, 'text': 'So we can double click on this and we can open up.', 'start': 1373.756, 'duration': 3.462}, {'end': 1383.282, 'text': "and well, we can see that there's nothing here right now, because we haven't actually put anything into the web page.", 'start': 1377.218, 'duration': 6.064}, {'end': 1388.966, 'text': "We've just create the HTML tags and the head tags and such.", 'start': 1383.682, 'duration': 5.284}, {'end': 1392.63, 'text': "So the first thing that we're going to do for this web page is give it a title.", 'start': 1389.647, 'duration': 2.983}, {'end': 1394.372, 'text': 'So the title goes up here.', 'start': 1392.87, 'duration': 1.502}, {'end': 1398.396, 'text': "You see where this Mozilla Firefox is? So we'll minimize this.", 'start': 1394.592, 'duration': 3.804}, {'end': 1404.662, 'text': "And we'll open up the notepad document that we're working on.", 'start': 1399.857, 'duration': 4.805}, {'end': 1408.266, 'text': 'So in the head, we will create a title.', 'start': 1404.962, 'duration': 3.304}, {'end': 1417.57, 'text': "And we'll say, this is a test website.", 'start': 1413.048, 'duration': 4.522}], 'summary': 'Creating and saving a basic web page with html tags and a title.', 'duration': 117.313, 'max_score': 1300.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE1300257.jpg'}, {'end': 1512.374, 'src': 'embed', 'start': 1489.655, 'weight': 0, 'content': [{'end': 1498.12, 'text': "You just have to remember open HTML, open head, close head, open body, close body, close HTML, and that's basically your web page.", 'start': 1489.655, 'duration': 8.465}, {'end': 1506.191, 'text': 'So now that we understand the layout of the web page, now we can just start talking about putting stuff into the web page.', 'start': 1498.809, 'duration': 7.382}, {'end': 1512.374, 'text': "So the first thing that we're going to talk about is the text that you're going to put into your web page.", 'start': 1506.231, 'duration': 6.143}], 'summary': 'Basic web page structure: html, head, body. focus on adding text.', 'duration': 22.719, 'max_score': 1489.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE1489655.jpg'}, {'end': 1576.73, 'src': 'embed', 'start': 1545.657, 'weight': 4, 'content': [{'end': 1549.36, 'text': "So heading options are if you're going to put, let's say, a title on a page.", 'start': 1545.657, 'duration': 3.703}, {'end': 1552.222, 'text': 'So think about it as titles and subtitles.', 'start': 1549.52, 'duration': 2.702}, {'end': 1556.506, 'text': 'And you have headings anywhere from one through six.', 'start': 1552.883, 'duration': 3.623}, {'end': 1558.688, 'text': 'So you have the heading.', 'start': 1556.746, 'duration': 1.942}, {'end': 1563.222, 'text': 'And you have 1 through 6.', 'start': 1561.181, 'duration': 2.041}, {'end': 1564.743, 'text': 'So 1 is the biggest.', 'start': 1563.222, 'duration': 1.521}, {'end': 1566.944, 'text': 'The 1 is the first title that you will use.', 'start': 1564.763, 'duration': 2.181}, {'end': 1571.147, 'text': 'And heading 6 is the smallest title you use.', 'start': 1567.605, 'duration': 3.542}, {'end': 1573.969, 'text': "Oops, you can't see that.", 'start': 1571.167, 'duration': 2.802}, {'end': 1576.73, 'text': 'Heading 1 through 6.', 'start': 1575.029, 'duration': 1.701}], 'summary': 'The transcript discusses heading options from 1 to 6 for titles and subtitles.', 'duration': 31.073, 'max_score': 1545.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE1545657.jpg'}], 'start': 876.123, 'title': 'Html basics', 'summary': 'Covers html coding basics, emphasizing the avoidance of deprecated code, and the process of laying out an html webpage. it also explains creating an html web page, including title tags, head and body structuring, and text formatting using heading options from h1 to h6.', 'chapters': [{'end': 1041.647, 'start': 876.123, 'title': 'Html coding basics', 'summary': 'Explains the concept of deprecated code in html, emphasizing the importance of avoiding its use and the process of laying out an html webpage using opening and closing tags for html, head, and body, in preparation for coding.', 'duration': 165.524, 'highlights': ['The importance of avoiding deprecated code in HTML is emphasized, as it may still function but should not be used, as programmers are trying to phase it out of the system.', 'The process of laying out an HTML webpage is explained, highlighting the use of opening and closing tags for HTML, head, and body to convey instructions to a web browser.', 'The concept of deprecated code in HTML is clarified, explaining that it is code that used to be used but is being phased out by programmers.', 'The significance of using opening and closing tags for HTML, head, and body in an HTML webpage is emphasized, as they convey instructions to a web browser.', 'The explanation of the deprecated code in HTML is provided, indicating that while it may currently work, programmers are attempting to remove it from the system.']}, {'end': 1680.2, 'start': 1053.007, 'title': 'Html web page basics', 'summary': 'Explains the basics of creating an html web page, including the use of title tags, structuring the head and body, and formatting text using heading options from h1 to h6.', 'duration': 627.193, 'highlights': ["The title tag is used to define the title of the web page displayed at the top of the web browser; for example, 'cnn.com, the world's best place for news' uses this tag. Example: 'cnn.com, the world's best place for news'", 'The head section of the HTML page contains information that affects the entire web page, such as the title and JavaScript pointers. Example: JavaScript pointers', 'The body section of the HTML page contains all the visible information, including text, pictures, etc. Type of content: Text, pictures', 'The basics of formatting text using heading options from H1 to H6 are explained, with H1 being the largest and most prominent, and H6 being the smallest. Heading options: H1 to H6']}], 'duration': 804.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE876123.jpg', 'highlights': ['The process of laying out an HTML webpage is explained, highlighting the use of opening and closing tags for HTML, head, and body to convey instructions to a web browser.', 'The significance of using opening and closing tags for HTML, head, and body in an HTML webpage is emphasized, as they convey instructions to a web browser.', 'The explanation of the deprecated code in HTML is provided, indicating that while it may currently work, programmers are attempting to remove it from the system.', 'The importance of avoiding deprecated code in HTML is emphasized, as it may still function but should not be used, as programmers are trying to phase it out of the system.', 'The basics of formatting text using heading options from H1 to H6 are explained, with H1 being the largest and most prominent, and H6 being the smallest.']}, {'end': 2170.464, 'segs': [{'end': 1725.179, 'src': 'embed', 'start': 1680.82, 'weight': 1, 'content': [{'end': 1692.475, 'text': "So, once you've got the H tags, you will ask, oh, this is horrible.", 'start': 1680.82, 'duration': 11.655}, {'end': 1696.177, 'text': 'Hold on one second.', 'start': 1692.495, 'duration': 3.682}, {'end': 1709.246, 'text': "So once you have the H tags, that's even worse, you'll ask, how do you do normal text? So, okay, so I now understand how to write headings.", 'start': 1697.218, 'duration': 12.028}, {'end': 1716.651, 'text': 'How do I do normal text? Well, for normal text, you use the paragraph tag or P tag.', 'start': 1709.546, 'duration': 7.105}, {'end': 1725.179, 'text': 'So if you do arrow P, This opens a normal paragraph of text.', 'start': 1717.211, 'duration': 7.968}], 'summary': 'Using h tags for headings and p tag for normal text.', 'duration': 44.359, 'max_score': 1680.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE1680820.jpg'}, {'end': 1860.422, 'src': 'embed', 'start': 1824.826, 'weight': 0, 'content': [{'end': 1827.367, 'text': 'So this would create two paragraphs.', 'start': 1824.826, 'duration': 2.541}, {'end': 1833.77, 'text': "If you did not use these P's, it would all turn into just one mass.", 'start': 1828.047, 'duration': 5.723}, {'end': 1837.452, 'text': 'So now you understand the headings.', 'start': 1834.771, 'duration': 2.681}, {'end': 1840.073, 'text': 'So we have headings H1 through H6.', 'start': 1837.532, 'duration': 2.541}, {'end': 1848.998, 'text': "All you do to write headings is you open with H1, H2, H3, H3, H4, H5, or H6 tag, write what you're going to say, and then close that tag.", 'start': 1840.374, 'duration': 8.624}, {'end': 1860.422, 'text': "you know, just text on a page, you use the P's.", 'start': 1857.421, 'duration': 3.001}], 'summary': "Using headings (h1-h6) and paragraphs (p's) improves organization and readability.", 'duration': 35.596, 'max_score': 1824.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE1824826.jpg'}, {'end': 1975.18, 'src': 'embed', 'start': 1943.863, 'weight': 2, 'content': [{'end': 1946.665, 'text': 'it means the title will get aligned to the left side of the page.', 'start': 1943.863, 'duration': 2.802}, {'end': 1950.167, 'text': 'If you say right, it means the title will get assigned to the right side of the page.', 'start': 1946.785, 'duration': 3.382}, {'end': 1956.27, 'text': 'You can use this align for all of the heading tags and for the paragraph tag.', 'start': 1950.847, 'duration': 5.423}, {'end': 1975.18, 'text': 'So, if you want the paragraph, if you want your normal text in the middle of the page, you would simply go p align and then equals And then close it,', 'start': 1956.65, 'duration': 18.53}], 'summary': 'The align attribute can position text left or right on the page, applied to headings and paragraphs.', 'duration': 31.317, 'max_score': 1943.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE1943863.jpg'}, {'end': 2179.452, 'src': 'embed', 'start': 2153.276, 'weight': 4, 'content': [{'end': 2161.979, 'text': 'You do not have to use capitalization when you are writing HTML, either with Windows servers or with Linux servers.', 'start': 2153.276, 'duration': 8.703}, {'end': 2166.241, 'text': "You never have to use capitalization when you're actually writing the HTML code.", 'start': 2161.999, 'duration': 4.242}, {'end': 2170.464, 'text': "I am doing it for you because it's kind of one of those best practices thing.", 'start': 2166.981, 'duration': 3.483}, {'end': 2179.452, 'text': 'If you are going to write your own HTML code for you, yourself, and no one else is ever going to see it, then you can do all lowercase.', 'start': 2171.405, 'duration': 8.047}], 'summary': 'Html can be written without capitalization for best practices, even on windows or linux servers.', 'duration': 26.176, 'max_score': 2153.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE2153276.jpg'}], 'start': 1680.82, 'title': 'Html basics and editing', 'summary': 'Covers html basics such as using h tags for headings and p tags for paragraphs, and also discusses editing basics including creating paragraphs, headings, alignment, and text formatting using various tags.', 'chapters': [{'end': 1794.713, 'start': 1680.82, 'title': 'Html basics: headings and paragraphs', 'summary': 'Explains the basics of using h tags for headings and the p tag for creating normal text, emphasizing the importance of using p tags to separate paragraphs in html.', 'duration': 113.893, 'highlights': ['Using P tags for normal text The chapter explains that for normal text, the P tag is used to open and close paragraphs, and emphasizes the importance of using P tags to separate out paragraphs on a page.', 'Importance of using P tags for separating paragraphs It is emphasized that using P tags for separating paragraphs is crucial in HTML, as not using them can result in one big mass of text in the web browser.', 'Explanation of H tags and their usage The chapter briefly explains the usage of H tags for writing headings in HTML.']}, {'end': 2170.464, 'start': 1794.853, 'title': 'Html editing basics', 'summary': 'Explains the basics of html editing, including creating paragraphs, headings, alignment, and text formatting using tags like h1, p, align, strong, italicize, and underline.', 'duration': 375.611, 'highlights': ['The chapter explains the basics of creating paragraphs, headings, alignment, and text formatting using tags like H1, P, align, strong, italicize, and underline, emphasizing the importance of using paragraph tags to create separate paragraphs and aligning titles using the align attribute.', "It elaborates on using align attribute for headings and paragraph tags, clarifying that 'align' can be used for all heading tags and the paragraph tag, and specifies that it can be used to align text to the center, left, or right of the page.", 'It discusses the usage of the strong tag to make words bold within a paragraph, providing an example and illustrating its impact on the appearance of text on a web page.', "The chapter also mentions that HTML code does not require capitalization and it's considered a best practice to write HTML without capitalization, providing a clear guideline for HTML coding regardless of the server type being used."]}], 'duration': 489.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE1680820.jpg', 'highlights': ['The chapter explains the basics of creating paragraphs, headings, alignment, and text formatting using tags like H1, P, align, strong, italicize, and underline.', 'Using P tags for normal text The chapter explains that for normal text, the P tag is used to open and close paragraphs, and emphasizes the importance of using P tags to separate out paragraphs on a page.', "It elaborates on using align attribute for headings and paragraph tags, clarifying that 'align' can be used for all heading tags and the paragraph tag, and specifies that it can be used to align text to the center, left, or right of the page.", 'Importance of using P tags for separating paragraphs It is emphasized that using P tags for separating paragraphs is crucial in HTML, as not using them can result in one big mass of text in the web browser.', "The chapter also mentions that HTML code does not require capitalization and it's considered a best practice to write HTML without capitalization, providing a clear guideline for HTML coding regardless of the server type being used."]}, {'end': 3105.528, 'segs': [{'end': 2193.964, 'src': 'embed', 'start': 2171.405, 'weight': 2, 'content': [{'end': 2179.452, 'text': 'If you are going to write your own HTML code for you, yourself, and no one else is ever going to see it, then you can do all lowercase.', 'start': 2171.405, 'duration': 8.047}, {'end': 2185.857, 'text': "If you are actually trying to get a job or have something that you're going to turn over to somebody else at some point,", 'start': 2179.652, 'duration': 6.205}, {'end': 2189.2, 'text': "then you should do the capitalization, because that's considered best practices.", 'start': 2185.857, 'duration': 3.343}, {'end': 2192.203, 'text': 'So we created this H1 title.', 'start': 2189.861, 'duration': 2.342}, {'end': 2193.964, 'text': 'We are now going to do file.', 'start': 2192.723, 'duration': 1.241}], 'summary': 'Use proper capitalization in html for best practices when sharing work professionally.', 'duration': 22.559, 'max_score': 2171.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE2171405.jpg'}, {'end': 2324.115, 'src': 'embed', 'start': 2279.603, 'weight': 1, 'content': [{'end': 2281.884, 'text': 'H5, H6, it just goes to H6.', 'start': 2279.603, 'duration': 2.281}, {'end': 2285.005, 'text': 'You see how this goes.', 'start': 2284.345, 'duration': 0.66}, {'end': 2290.567, 'text': "I'm not going to write out h4, 5, and 6, because who cares? So h1 is the best, h2, h3.", 'start': 2285.045, 'duration': 5.522}, {'end': 2298.449, 'text': 'So if we want to then put just normal text into this page, we will do the p.', 'start': 2291.207, 'duration': 7.242}, {'end': 2300.33, 'text': 'So this is the paragraph tag.', 'start': 2298.449, 'duration': 1.881}, {'end': 2312.414, 'text': "We'll go, this is some writing about my cool new web page.", 'start': 2300.35, 'duration': 12.064}, {'end': 2321.174, 'text': "isn't it?", 'start': 2314.89, 'duration': 6.284}, {'end': 2324.115, 'text': 'and then we close the paragraph tag.', 'start': 2321.174, 'duration': 2.941}], 'summary': 'Transcript discusses html heading tags and paragraph tags for web page content.', 'duration': 44.512, 'max_score': 2279.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE2279603.jpg'}, {'end': 2455.513, 'src': 'embed', 'start': 2425.911, 'weight': 3, 'content': [{'end': 2431.475, 'text': "Now that we've done that, if you want to do alignment, let's say H1.", 'start': 2425.911, 'duration': 5.564}, {'end': 2433.796, 'text': 'This is an H1 title.', 'start': 2431.495, 'duration': 2.301}, {'end': 2435.738, 'text': 'You want this to be in the center of the page.', 'start': 2433.857, 'duration': 1.881}, {'end': 2438.089, 'text': 'Then you do space.', 'start': 2437.329, 'duration': 0.76}, {'end': 2440.35, 'text': 'You do A-L-I-G-N.', 'start': 2438.189, 'duration': 2.161}, {'end': 2442.41, 'text': 'Make sure you do equal.', 'start': 2441.19, 'duration': 1.22}, {'end': 2444.13, 'text': 'Quotation marks.', 'start': 2443.27, 'duration': 0.86}, {'end': 2447.411, 'text': 'C-E-N-T-E-R Quotation marks.', 'start': 2444.39, 'duration': 3.021}, {'end': 2452.532, 'text': 'So H1, space, align, no space, equal.', 'start': 2448.111, 'duration': 4.421}, {'end': 2455.513, 'text': "So this whole thing, there's no spaces here.", 'start': 2453.192, 'duration': 2.321}], 'summary': 'Instructions for aligning h1 title in the center using a-l-i-g-n method.', 'duration': 29.602, 'max_score': 2425.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE2425911.jpg'}, {'end': 2623.821, 'src': 'embed', 'start': 2596.085, 'weight': 0, 'content': [{'end': 2599.188, 'text': 'For paragraphs, for normal writing, you use the P tag.', 'start': 2596.085, 'duration': 3.103}, {'end': 2605.091, 'text': 'And then for if you want something strong or bold, you can use a strong tag.', 'start': 2599.888, 'duration': 5.203}, {'end': 2611.995, 'text': 'They also have italics tags, and they have underline tags, and they have superscript tags, and they have a lot of other tags.', 'start': 2605.391, 'duration': 6.604}, {'end': 2615.576, 'text': "This is the basic overview of how it's done.", 'start': 2613.035, 'duration': 2.541}, {'end': 2623.821, 'text': 'If you need to know how to specifically format some text, just do a little Google search on it, and somebody will be able to tell you.', 'start': 2615.777, 'duration': 8.044}], 'summary': 'Html uses tags like p, strong, and italics for formatting text.', 'duration': 27.736, 'max_score': 2596.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE2596085.jpg'}, {'end': 3105.528, 'src': 'embed', 'start': 3074.612, 'weight': 4, 'content': [{'end': 3076.793, 'text': 'Close out the entire unordered list.', 'start': 3074.612, 'duration': 2.181}, {'end': 3079.174, 'text': "And that's how you create a list.", 'start': 3077.313, 'duration': 1.861}, {'end': 3081.135, 'text': 'Simple Easy peasy.', 'start': 3080.154, 'duration': 0.981}, {'end': 3093.079, 'text': "So now we've gone over putting basic text into your HTML web page.", 'start': 3088.237, 'duration': 4.842}, {'end': 3094.52, 'text': "And we've gone over lists.", 'start': 3093.459, 'duration': 1.061}, {'end': 3097.903, 'text': "I think you're seeing how easy this is.", 'start': 3096.142, 'duration': 1.761}, {'end': 3105.528, 'text': "There's a lot of stuff to remember, but there's a difference between having a lot of stuff to remember and something really being complicated.", 'start': 3097.923, 'duration': 7.605}], 'summary': 'Creating lists and adding basic text to html web pages is simple and easy.', 'duration': 30.916, 'max_score': 3074.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE3074612.jpg'}], 'start': 2171.405, 'title': 'Html coding, text formatting, and lists in html', 'summary': 'Covers html coding best practices, including capitalization and tag usage, html text formatting basics such as aligning, bolding, and formatting text, and creating ordered and unordered lists in html, providing a comprehensive guide for web development.', 'chapters': [{'end': 2422.915, 'start': 2171.405, 'title': 'Html coding best practices', 'summary': 'Discusses the best practices for html coding, emphasizing the importance of capitalization for professional work and demonstrating the use of h1, h2, h3, and paragraph tags in creating and formatting web content.', 'duration': 251.51, 'highlights': ['The importance of capitalization in HTML coding for professional work is emphasized, as it is considered best practices. Emphasizes the importance of capitalization in HTML coding for professional work, highlighting it as best practices.', 'Demonstrates the use of H1, H2, and H3 tags in creating and formatting web content, with H1 being the biggest and boldest and H3 being less bold than H2. Demonstrates the use of H1, H2, and H3 tags in creating and formatting web content, explaining their hierarchy and visual differences.', 'Explains the necessity of enclosing text within paragraph tags to ensure proper formatting and line breaks on the web page. Explains the necessity of enclosing text within paragraph tags to ensure proper formatting and line breaks on the web page.']}, {'end': 2615.576, 'start': 2425.911, 'title': 'Html text formatting basics', 'summary': 'Explains how to align text and format it using html, including aligning headings and paragraphs, making text bold, and the basic overview of html text formatting.', 'duration': 189.665, 'highlights': ["The chapter explains how to align text in HTML using the 'align' attribute, demonstrating how to center and right-align headings and paragraphs, with practical examples and step-by-step instructions.", "It also covers making text bold using the 'strong' tag, including how to apply it to specific words within a paragraph, and provides a brief overview of other text formatting tags such as italics and underline.", "Additionally, the chapter introduces the use of different heading tags (H1 through H6) for headings and the 'P' tag for paragraphs, providing a comprehensive understanding of text formatting in HTML."]}, {'end': 3105.528, 'start': 2615.777, 'title': 'Creating lists in html', 'summary': 'Discusses creating ordered and unordered lists in html, explaining the html tags required for each type of list and demonstrating the process of creating them, making it easy for beginners to understand and implement.', 'duration': 489.751, 'highlights': ['Explaining the process of creating ordered and unordered lists in HTML The chapter provides a detailed explanation of the process of creating both ordered and unordered lists in HTML, making it easy for beginners to understand.', 'Demonstrating the use of HTML tags for creating lists The transcript demonstrates the use of OL and UL tags for creating ordered and unordered lists in HTML, simplifying the process for beginners.', "Emphasizing the simplicity and ease of creating lists in HTML The chapter conveys the simplicity of the process, stating that creating lists in HTML is 'Simple Easy peasy,' which encourages beginners to feel confident in implementing these features."]}], 'duration': 934.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE2171405.jpg', 'highlights': ['Explains the necessity of enclosing text within paragraph tags to ensure proper formatting and line breaks on the web page.', 'Demonstrates the use of H1, H2, and H3 tags in creating and formatting web content, explaining their hierarchy and visual differences.', 'The importance of capitalization in HTML coding for professional work is emphasized, as it is considered best practices.', "The chapter explains how to align text in HTML using the 'align' attribute, demonstrating how to center and right-align headings and paragraphs, with practical examples and step-by-step instructions.", 'Explaining the process of creating ordered and unordered lists in HTML The chapter provides a detailed explanation of the process of creating both ordered and unordered lists in HTML, making it easy for beginners to understand.', "Emphasizing the simplicity and ease of creating lists in HTML The chapter conveys the simplicity of the process, stating that creating lists in HTML is 'Simple Easy peasy,' which encourages beginners to feel confident in implementing these features."]}, {'end': 3574.393, 'segs': [{'end': 3140.059, 'src': 'embed', 'start': 3106.188, 'weight': 2, 'content': [{'end': 3109.81, 'text': 'HTML programming is simply just, you just got to remember a lot of stuff.', 'start': 3106.188, 'duration': 3.622}, {'end': 3116.314, 'text': "If you remember the tags, all the tags that you need to remember, then it's really easy to do.", 'start': 3109.85, 'duration': 6.464}, {'end': 3117.795, 'text': 'You just type it out.', 'start': 3116.374, 'duration': 1.421}, {'end': 3121.297, 'text': "So the next thing that we're going to talk about now are tables.", 'start': 3118.636, 'duration': 2.661}, {'end': 3124.359, 'text': 'So tables are basically like little spreadsheets.', 'start': 3121.778, 'duration': 2.581}, {'end': 3140.059, 'text': 'So if I want to create this one, two, three, four, five, six, so this would be like a spreadsheet.', 'start': 3124.519, 'duration': 15.54}], 'summary': 'Html programming involves remembering tags; tables are like spreadsheets.', 'duration': 33.871, 'max_score': 3106.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE3106188.jpg'}, {'end': 3207.436, 'src': 'embed', 'start': 3166.493, 'weight': 5, 'content': [{'end': 3176.099, 'text': 'so this opens the table and this closes the table and then everything in between here will be creating these little, these little blocks.', 'start': 3166.493, 'duration': 9.606}, {'end': 3181.362, 'text': 'basically. so you have rows and you have columns.', 'start': 3176.099, 'duration': 5.263}, {'end': 3190.31, 'text': 'you do the tr tag, so tr.', 'start': 3186.849, 'duration': 3.461}, {'end': 3195.592, 'text': 'So the tr tag opens and the tr tag closes.', 'start': 3191.111, 'duration': 4.481}, {'end': 3200.534, 'text': 'And so tr, that opens and closes this entire row.', 'start': 3196.132, 'duration': 4.402}, {'end': 3206.516, 'text': 'Now within, so each block, you then use the td tag.', 'start': 3201.874, 'duration': 4.642}, {'end': 3207.436, 'text': 'So td.', 'start': 3206.576, 'duration': 0.86}], 'summary': 'The transcript explains how to create table rows and columns using html tags.', 'duration': 40.943, 'max_score': 3166.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE3166493.jpg'}, {'end': 3375.911, 'src': 'embed', 'start': 3313.875, 'weight': 3, 'content': [{'end': 3328.204, 'text': "If you want borders, then in the opening table tag, you would say border, and then equals, quotation, we'll say one, quotation.", 'start': 3313.875, 'duration': 14.329}, {'end': 3329.663, 'text': 'and then close.', 'start': 3328.962, 'duration': 0.701}, {'end': 3338.571, 'text': 'So table opens a table you tell it border equals one width and that will give you all these lines in the table.', 'start': 3329.943, 'duration': 8.628}, {'end': 3342.895, 'text': "That's all it takes to code a table in HTML.", 'start': 3339.512, 'duration': 3.383}, {'end': 3345.457, 'text': 'Seems a little complicated.', 'start': 3344.396, 'duration': 1.061}, {'end': 3347.059, 'text': "Let's go to the computer.", 'start': 3345.577, 'duration': 1.482}, {'end': 3350.642, 'text': "I'll code this out for you and you'll see how simple this really is.", 'start': 3347.259, 'duration': 3.383}, {'end': 3354.678, 'text': 'So now we are going to encode the table.', 'start': 3352.116, 'duration': 2.562}, {'end': 3360.061, 'text': "So just like we've done before, we have to open the table with the table tag.", 'start': 3355.258, 'duration': 4.803}, {'end': 3365.104, 'text': 'So table opens the table.', 'start': 3360.661, 'duration': 4.443}, {'end': 3369.247, 'text': 'To make life easier, we are also going to give the table a border.', 'start': 3365.745, 'duration': 3.502}, {'end': 3375.911, 'text': "You don't have to give your table borders, but it makes life a lot easier if you do.", 'start': 3369.687, 'duration': 6.224}], 'summary': 'Coding a table in html with border equals one width.', 'duration': 62.036, 'max_score': 3313.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE3313875.jpg'}, {'end': 3543.482, 'src': 'embed', 'start': 3469.426, 'weight': 0, 'content': [{'end': 3473.907, 'text': "Now we'll close out the table entirely so we can show you what this looks like.", 'start': 3469.426, 'duration': 4.481}, {'end': 3477.948, 'text': 'Now we do File, and we do Save.', 'start': 3476.368, 'duration': 1.58}, {'end': 3480.749, 'text': 'And now we go over to here.', 'start': 3478.469, 'duration': 2.28}, {'end': 3483.97, 'text': 'And now we have first, second, and third.', 'start': 3481.569, 'duration': 2.401}, {'end': 3485.57, 'text': 'So this is a small little table.', 'start': 3484.09, 'duration': 1.48}, {'end': 3495.013, 'text': "Now if we wanted more and more rows and columns in the table, instead of having to type this out, I'll just copy and paste this so you can see.", 'start': 3486.711, 'duration': 8.302}, {'end': 3495.693, 'text': "So I'll do Control-C.", 'start': 3495.113, 'duration': 0.58}, {'end': 3517.395, 'text': 'Control V.', 'start': 3515.071, 'duration': 2.324}, {'end': 3520.54, 'text': 'OK So now this will be four rows.', 'start': 3517.395, 'duration': 3.145}, {'end': 3521.801, 'text': 'File, Save.', 'start': 3520.76, 'duration': 1.041}, {'end': 3525.528, 'text': "And then we'll go over to our website, hit F5.", 'start': 3523.044, 'duration': 2.484}, {'end': 3528.714, 'text': 'And so we have four rows.', 'start': 3525.929, 'duration': 2.785}, {'end': 3532.54, 'text': 'Rows go left to right with three columns, first, second, third.', 'start': 3529.255, 'duration': 3.285}, {'end': 3534.584, 'text': 'So you could have put anything in these little blocks.', 'start': 3532.56, 'duration': 2.024}, {'end': 3537.088, 'text': "As long as you put something in there, then they'll show up.", 'start': 3535.145, 'duration': 1.943}, {'end': 3541.381, 'text': 'So tables are very simple.', 'start': 3538.559, 'duration': 2.822}, {'end': 3543.482, 'text': 'You open with the table tag.', 'start': 3541.921, 'duration': 1.561}], 'summary': 'Demonstration of creating a table with 4 rows and 3 columns, using copy and paste method.', 'duration': 74.056, 'max_score': 3469.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE3469426.jpg'}], 'start': 3106.188, 'title': 'Html tables basics, coding, and creation', 'summary': "Covers the basics of creating html tables, emphasizing the use of 'table', 'tr', and 'td' tags to structure rows and cells, with a focus on creating a simple 3x2 table. it also explains coding a table in html, including adding borders, and demonstrates creating a simple table in html, including opening and closing tags for rows and cells, and the impact of adding more rows and columns to the table.", 'chapters': [{'end': 3289.209, 'start': 3106.188, 'title': 'Html tables basics', 'summary': "Covers the basics of creating html tables, emphasizing the use of 'table', 'tr', and 'td' tags to structure rows and cells, with a focus on creating a simple 3x2 table.", 'duration': 183.021, 'highlights': ['The chapter emphasizes the importance of remembering HTML tags for programming, making it easy to create tables if the necessary tags are understood.', 'The process of creating a table is explained, including opening and closing tags for the table, rows, and cells (td), with a demonstration of creating a simple 3x2 table.', "The use of 'tr' tags to open and close rows, and 'td' tags to open and close cells, is highlighted, along with the process of entering content within the 'td' tags to populate the table cells."]}, {'end': 3375.911, 'start': 3289.829, 'title': 'Html table coding', 'summary': 'Explains how to code a table in html, including adding borders, and emphasizes the simplicity of the process.', 'duration': 86.082, 'highlights': ["By using the table tag in HTML, one can create a table without borders, and adding the 'border' attribute with a value of '1' will display borders around the table.", 'Adding borders to a table in HTML can make the coding process much simpler and more visually organized.']}, {'end': 3574.393, 'start': 3376.611, 'title': 'Creating tables in html', 'summary': 'Explains how to create a simple table in html, including opening and closing tags for rows and cells, and the impact of adding more rows and columns to the table, demonstrating a clear understanding of the process of creating tables in html.', 'duration': 197.782, 'highlights': ['The process of creating a simple table in HTML, including opening and closing tags for rows and cells, and the impact of adding more rows and columns to the table, demonstrating a clear understanding of the process of creating tables in HTML.', 'Demonstration of creating a table with multiple rows and columns by copying and pasting, resulting in a table with four rows and three columns, showcasing the ease of expanding a table in HTML.', 'Emphasizing the simplicity of creating tables in HTML by using the table, TR, and TD tags, and the importance of giving the table a border of at least one for ease of use.']}], 'duration': 468.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE3106188.jpg', 'highlights': ['The process of creating a simple table in HTML, including opening and closing tags for rows and cells, and the impact of adding more rows and columns to the table, demonstrating a clear understanding of the process of creating tables in HTML.', 'Demonstration of creating a table with multiple rows and columns by copying and pasting, resulting in a table with four rows and three columns, showcasing the ease of expanding a table in HTML.', 'The chapter emphasizes the importance of remembering HTML tags for programming, making it easy to create tables if the necessary tags are understood.', "By using the table tag in HTML, one can create a table without borders, and adding the 'border' attribute with a value of '1' will display borders around the table.", 'Adding borders to a table in HTML can make the coding process much simpler and more visually organized.', "The use of 'tr' tags to open and close rows, and 'td' tags to open and close cells, is highlighted, along with the process of entering content within the 'td' tags to populate the table cells."]}, {'end': 4503.697, 'segs': [{'end': 3647.259, 'src': 'embed', 'start': 3598.985, 'weight': 2, 'content': [{'end': 3605.57, 'text': "Well, the thing that you have to remember is you don't actually put the picture into the web page itself.", 'start': 3598.985, 'duration': 6.585}, {'end': 3607.151, 'text': 'This is not like a Word document.', 'start': 3605.63, 'duration': 1.521}, {'end': 3609.713, 'text': 'You use something called a pointer.', 'start': 3607.592, 'duration': 2.121}, {'end': 3619.922, 'text': 'So if you want a picture to show up in a web page, you have to upload the picture to a place with your website and then point to it.', 'start': 3610.014, 'duration': 9.908}, {'end': 3623.665, 'text': "And that's how the picture gets into the web page.", 'start': 3620.382, 'duration': 3.283}, {'end': 3628.828, 'text': 'So, if I want a picture to show up on my web page,', 'start': 3624.245, 'duration': 4.583}, {'end': 3637.353, 'text': "the easiest thing to do is upload the picture into the same folder that has the web page that I'm dealing with.", 'start': 3628.828, 'duration': 8.525}, {'end': 3639.174, 'text': 'So you upload the picture into the same folder.', 'start': 3637.493, 'duration': 1.681}, {'end': 3641.535, 'text': 'And then from there, we just point to it.', 'start': 3639.754, 'duration': 1.781}, {'end': 3647.259, 'text': 'So, if we want a little smiley face to show up on a web page,', 'start': 3641.856, 'duration': 5.403}], 'summary': "To display a picture on a web page, upload it to the website's folder and use a pointer to display it.", 'duration': 48.274, 'max_score': 3598.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE3598985.jpg'}, {'end': 3716.086, 'src': 'embed', 'start': 3687.017, 'weight': 7, 'content': [{'end': 3697.332, 'text': 'And so by putting this line of code into the web page, this now will tell the web browser to grab this picture and put into the web page.', 'start': 3687.017, 'duration': 10.315}, {'end': 3702.018, 'text': 'So this is how you display a picture in a web page.', 'start': 3697.812, 'duration': 4.206}, {'end': 3708.404, 'text': 'You can display pictures that are on other web pages.', 'start': 3705.343, 'duration': 3.061}, {'end': 3716.086, 'text': 'So if you know the location of a picture on a different website, I use this for my Craigslist.', 'start': 3708.624, 'duration': 7.462}], 'summary': 'Add a line of code to display pictures in a web page.', 'duration': 29.069, 'max_score': 3687.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE3687017.jpg'}, {'end': 4131.389, 'src': 'embed', 'start': 4097.973, 'weight': 1, 'content': [{'end': 4102.975, 'text': 'So if you need to go two up, you could do dot dot slash dot dot slash smiley.', 'start': 4097.973, 'duration': 5.002}, {'end': 4107.618, 'text': 'That would say go from this folder to the next folder up to the next folder up.', 'start': 4103.356, 'duration': 4.262}, {'end': 4110.56, 'text': "That's how you get to higher folders.", 'start': 4108.538, 'duration': 2.022}, {'end': 4117.529, 'text': 'So in order to insert a picture into your web page, all you use is the image src tag, image src equals.', 'start': 4110.64, 'duration': 6.889}, {'end': 4131.389, 'text': "If the picture is in the same folder that the HTML page you're dealing with is, then you just type in the name of the picture.", 'start': 4121.163, 'duration': 10.226}], 'summary': 'To navigate up two folders, use ../.., and to insert a picture in the same folder as the html page, use image src tag.', 'duration': 33.416, 'max_score': 4097.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4097973.jpg'}, {'end': 4233.316, 'src': 'embed', 'start': 4208.621, 'weight': 6, 'content': [{'end': 4215.503, 'text': "And if you want to align the picture into, let's say, the middle of the page, remember you cannot do that within the image tag.", 'start': 4208.621, 'duration': 6.882}, {'end': 4219.12, 'text': 'paragraph tag.', 'start': 4218.319, 'duration': 0.801}, {'end': 4228.19, 'text': 'So you do p, open a p tag, paragraph tag, p space align equals quotation mark center, and quotation mark, and then you put the image.', 'start': 4219.14, 'duration': 9.05}, {'end': 4231.594, 'text': "That's a lot to say.", 'start': 4230.533, 'duration': 1.061}, {'end': 4233.316, 'text': "Let's go onto the computer.", 'start': 4232.275, 'duration': 1.041}], 'summary': "To align an image in the middle of the page, use a paragraph tag with 'align=center'.", 'duration': 24.695, 'max_score': 4208.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4208621.jpg'}, {'end': 4338.313, 'src': 'embed', 'start': 4301.417, 'weight': 4, 'content': [{'end': 4313.198, 'text': "But when you're pointing to a specific file picture, if you're pointing to anything outside of the HTML document, If you are using a Linux server,", 'start': 4301.417, 'duration': 11.781}, {'end': 4315.498, 'text': 'then the capitalization has to be the same.', 'start': 4313.198, 'duration': 2.3}, {'end': 4324.02, 'text': 'So I have this lowercase logo to point to the logo.jpg file.', 'start': 4315.738, 'duration': 8.282}, {'end': 4338.313, 'text': 'If this was a Linux server, and I typed in uppercase L-O-G-O dot jpg, If I did this and this was a Linux server, this would error out.', 'start': 4324.521, 'duration': 13.792}], 'summary': "On a linux server, file capitalization must match; e.g., 'logo.jpg' vs. 'l-o-g-o.jpg'.", 'duration': 36.896, 'max_score': 4301.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4301417.jpg'}, {'end': 4428.902, 'src': 'embed', 'start': 4398.912, 'weight': 0, 'content': [{'end': 4402.474, 'text': 'That is the best way to deal with resizing a picture.', 'start': 4398.912, 'duration': 3.562}, {'end': 4406.056, 'text': 'But you can resize a picture in HTML.', 'start': 4403.234, 'duration': 2.822}, {'end': 4408.917, 'text': 'And this is an HTML class, so I will show you how to do that.', 'start': 4406.396, 'duration': 2.521}, {'end': 4410.758, 'text': 'So we go back to our code.', 'start': 4409.478, 'duration': 1.28}, {'end': 4421.317, 'text': "And here, all we do is we type in width equals, and we'll say 300.", 'start': 4411.459, 'duration': 9.858}, {'end': 4425.46, 'text': "And then we'll do height equals 300.", 'start': 4421.317, 'duration': 4.143}, {'end': 4427.521, 'text': "And that's all you do.", 'start': 4425.46, 'duration': 2.061}, {'end': 4428.902, 'text': 'So we tell it the width.', 'start': 4427.601, 'duration': 1.301}], 'summary': 'Resizing a picture in html by setting width and height to 300.', 'duration': 29.99, 'max_score': 4398.912, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4398912.jpg'}], 'start': 3574.413, 'title': 'Adding and resizing images in html', 'summary': 'Covers adding pictures to web pages, using pointers to upload and display images, html image tag basics such as adding borders and specifying image source, as well as encoding and resizing images with html code, including file naming conventions for linux servers.', 'chapters': [{'end': 3775.128, 'start': 3574.413, 'title': 'Adding pictures to web pages', 'summary': 'Explains the process of adding pictures to a web page, emphasizing the use of pointers to upload and display images, and the ability to use images from other web pages.', 'duration': 200.715, 'highlights': ["You don't actually put the picture into the web page itself; you use something called a pointer Emphasizes the use of pointers to add pictures to a web page instead of directly pasting them, highlighting the difference from a Word document.", 'The easiest thing to do is upload the picture into the same folder that has the web page and then point to it Stresses the simplicity of uploading pictures into the same folder as the web page and pointing to them for display, indicating an easy process for adding images.', 'You can display pictures that are on other web pages by pointing to the entire web address of the picture Highlights the ability to use images from other web pages by pointing to their web addresses, demonstrating the flexibility in sourcing images for web pages.']}, {'end': 4233.316, 'start': 3776.508, 'title': 'Html image tag basics', 'summary': 'Explains the basics of using the image tag in html, including adding borders, adjusting size, aligning the image, specifying the image source, and importing images from different folders or websites.', 'duration': 456.808, 'highlights': ['You can adjust the size of an image on a web page by specifying the width and height in the HTML code, such as width equals 300 and height equals 200, allowing for customization of the image dimensions. Customizing the size of an image on a web page by specifying the width and height in the HTML code, providing flexibility in adjusting image dimensions.', 'To align an image in the middle of a web page, the paragraph tag with the align attribute can be used, such as

, enabling precise positioning of the image on the page. Utilizing the paragraph tag with the align attribute, like

, to accurately position an image in the center of a web page.', "The image source can be specified using the image src tag, where if the image is in the same folder, only the name of the picture is required, and if it's in a different folder or website, the folder or web address needs to be included, providing clear guidelines for specifying image sources. Defining the image source using the image src tag, simplifying the process by specifying the image's location, whether in the same folder, a different folder, or from another website."]}, {'end': 4503.697, 'start': 4233.356, 'title': 'Html image tag and resizing', 'summary': 'Explains how to encode images into html, emphasizing the process of adding and resizing images with html code, highlighting the importance of file naming conventions for linux servers and the impact on image display.', 'duration': 270.341, 'highlights': ['The chapter explains how to encode images into HTML, emphasizing the process of adding and resizing images with HTML code. The process of adding and resizing images with HTML code is demonstrated, providing practical guidance for web designers.', 'Emphasizes the importance of file naming conventions for Linux servers and the impact on image display. The importance of maintaining consistent file naming conventions, especially for Linux servers, to ensure proper image display is highlighted.']}], 'duration': 929.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE3574413.jpg', 'highlights': ['You can adjust the size of an image on a web page by specifying the width and height in the HTML code, such as width equals 300 and height equals 200, allowing for customization of the image dimensions.', "The image source can be specified using the image src tag, where if the image is in the same folder, only the name of the picture is required, and if it's in a different folder or website, the folder or web address needs to be included, providing clear guidelines for specifying image sources.", 'The easiest thing to do is upload the picture into the same folder that has the web page and then point to it Stresses the simplicity of uploading pictures into the same folder as the web page and pointing to them for display, indicating an easy process for adding images.', 'The chapter explains how to encode images into HTML, emphasizing the process of adding and resizing images with HTML code. The process of adding and resizing images with HTML code is demonstrated, providing practical guidance for web designers.', 'Emphasizes the importance of file naming conventions for Linux servers and the impact on image display. The importance of maintaining consistent file naming conventions, especially for Linux servers, to ensure proper image display is highlighted.', "You don't actually put the picture into the web page itself; you use something called a pointer Emphasizes the use of pointers to add pictures to a web page instead of directly pasting them, highlighting the difference from a Word document.", 'To align an image in the middle of a web page, the paragraph tag with the align attribute can be used, such as

, enabling precise positioning of the image on the page. Utilizing the paragraph tag with the align attribute, like

, to accurately position an image in the center of a web page.', 'You can display pictures that are on other web pages by pointing to the entire web address of the picture Highlights the ability to use images from other web pages by pointing to their web addresses, demonstrating the flexibility in sourcing images for web pages.']}, {'end': 5897.251, 'segs': [{'end': 4558.72, 'src': 'embed', 'start': 4531.686, 'weight': 2, 'content': [{'end': 4537.968, 'text': "So we have now put the image within the paragraph and that's how we align the image on the page.", 'start': 4531.686, 'duration': 6.282}, {'end': 4539.149, 'text': 'So if we click save.', 'start': 4538.249, 'duration': 0.9}, {'end': 4541.527, 'text': 'Go back to our website.', 'start': 4540.666, 'duration': 0.861}, {'end': 4545.49, 'text': 'Our little smiley computer is now sitting in the middle of the page.', 'start': 4542.808, 'duration': 2.682}, {'end': 4551.855, 'text': 'So just remember, you cannot put the align within that image tag.', 'start': 4545.59, 'duration': 6.265}, {'end': 4558.72, 'text': "You have to put the whole image, it's called an element, the image element within the paragraph.", 'start': 4552.175, 'duration': 6.545}], 'summary': 'Align image within paragraph to center on page.', 'duration': 27.034, 'max_score': 4531.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4531686.jpg'}, {'end': 4626.551, 'src': 'embed', 'start': 4598.743, 'weight': 3, 'content': [{'end': 4606.646, 'text': "So it's a good idea to always put things like pictures into the same folder when you're creating a website,", 'start': 4598.743, 'duration': 7.903}, {'end': 4610.448, 'text': "just so you don't have pictures scattered everywhere and you lose track of them.", 'start': 4606.646, 'duration': 3.802}, {'end': 4616.25, 'text': "So let's say we're going to take this logo picture and we'll put it into the pictures folder.", 'start': 4611.088, 'duration': 5.162}, {'end': 4626.551, 'text': "Now that we've done that, if we go back to our web page and we hit F5, we will notice this, now nothing shows up, no image shows up.", 'start': 4617.191, 'duration': 9.36}], 'summary': 'Organize website images into folders to avoid losing track.', 'duration': 27.808, 'max_score': 4598.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4598743.jpg'}, {'end': 4767.433, 'src': 'embed', 'start': 4727.231, 'weight': 1, 'content': [{'end': 4729.292, 'text': "Well, nothing changes because it's going to the same place.", 'start': 4727.231, 'duration': 2.061}, {'end': 4737.037, 'text': 'So if the picture is one level up, is one folder up, you do dot dot forward slash and the name of the picture.', 'start': 4729.832, 'duration': 7.205}, {'end': 4745.023, 'text': "If it's below, in a folder below, you do the name of the folder forward slash the picture's name.", 'start': 4737.718, 'duration': 7.305}, {'end': 4752.789, 'text': 'Also, you can do it on an entirely different website.', 'start': 4746.164, 'duration': 6.625}, {'end': 4767.433, 'text': 'So you could do You do http://everyman-at.com.', 'start': 4753.529, 'duration': 13.904}], 'summary': 'The process for accessing files is explained, including using dot dot forward slash and names of folders and pictures, as well as accessing files on different websites using http://everyman-at.com.', 'duration': 40.202, 'max_score': 4727.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4727231.jpg'}, {'end': 4856.576, 'src': 'embed', 'start': 4834.246, 'weight': 0, 'content': [{'end': 4844.811, 'text': "These are the little pictures or the text that you click on a web page that either takes you to different pages within the website that you're visiting or takes you to an entirely different website.", 'start': 4834.246, 'duration': 10.565}, {'end': 4850.193, 'text': 'So, hyperlinks are any of the places that you can click and basically go somewhere else.', 'start': 4845.371, 'duration': 4.822}, {'end': 4853.134, 'text': 'These are very, very, very easy to code.', 'start': 4850.633, 'duration': 2.501}, {'end': 4856.576, 'text': "You use what's called an aHREF tag.", 'start': 4853.615, 'duration': 2.961}], 'summary': 'Hyperlinks on web pages are easy to code using ahref tag.', 'duration': 22.33, 'max_score': 4834.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4834246.jpg'}, {'end': 4901.097, 'src': 'heatmap', 'start': 4834.246, 'weight': 0.702, 'content': [{'end': 4844.811, 'text': "These are the little pictures or the text that you click on a web page that either takes you to different pages within the website that you're visiting or takes you to an entirely different website.", 'start': 4834.246, 'duration': 10.565}, {'end': 4850.193, 'text': 'So, hyperlinks are any of the places that you can click and basically go somewhere else.', 'start': 4845.371, 'duration': 4.822}, {'end': 4853.134, 'text': 'These are very, very, very easy to code.', 'start': 4850.633, 'duration': 2.501}, {'end': 4856.576, 'text': "You use what's called an aHREF tag.", 'start': 4853.615, 'duration': 2.961}, {'end': 4875.889, 'text': 'So you open your hyperlink and then you do a space h, r, e, f equals and then entirely new website or a page on an entirely new website.', 'start': 4856.896, 'duration': 18.993}, {'end': 4882.171, 'text': 'you would put in http:// and then wherever you want the person to go.', 'start': 4875.889, 'duration': 6.282}, {'end': 4892.094, 'text': "If you want to go to a different page in the current website, so in your website, let's say they're at home and you want them to go to About,", 'start': 4883.311, 'duration': 8.783}, {'end': 4901.097, 'text': "then again, if that About web page is sitting in the same folder that you're in, all you would do is you would say About.", 'start': 4892.094, 'duration': 9.003}], 'summary': 'Hyperlinks are easily coded using ahref tag, allowing users to navigate within or outside a website.', 'duration': 66.851, 'max_score': 4834.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4834246.jpg'}, {'end': 5385.411, 'src': 'heatmap', 'start': 5254.616, 'weight': 1, 'content': [{'end': 5255.836, 'text': "Actually, let's make this a paragraph.", 'start': 5254.616, 'duration': 1.22}, {'end': 5265.383, 'text': 'So we put a paragraph in the middle of that.', 'start': 5262.222, 'duration': 3.161}, {'end': 5267.203, 'text': "And we'll do File, Save.", 'start': 5265.683, 'duration': 1.52}, {'end': 5271.264, 'text': "We'll go to our website, hit F5.", 'start': 5268.964, 'duration': 2.3}, {'end': 5273.885, 'text': 'And now we have this little hyperlink.', 'start': 5271.944, 'duration': 1.941}, {'end': 5278.846, 'text': "Since we didn't do a target, when we click on this, we are simply going to go to CNN.com.", 'start': 5273.905, 'duration': 4.941}, {'end': 5283.407, 'text': "And yep, we're at CNN.com.", 'start': 5281.787, 'duration': 1.62}, {'end': 5285.448, 'text': "So let's go back.", 'start': 5284.208, 'duration': 1.24}, {'end': 5290.866, 'text': "Now let's look at our HTML code again.", 'start': 5287.604, 'duration': 3.262}, {'end': 5296.569, 'text': 'And you say, well, I want another window to open up.', 'start': 5291.026, 'duration': 5.543}, {'end': 5300.572, 'text': "I don't want the window that they're in to be replaced with wherever they're going.", 'start': 5296.99, 'duration': 3.582}, {'end': 5302.513, 'text': "So that's where you use the target.", 'start': 5301.012, 'duration': 1.501}, {'end': 5306.836, 'text': 'So we do target equals.', 'start': 5303.254, 'duration': 3.582}, {'end': 5321.397, 'text': 'blank So by doing target equals blank, we do file, save, go back to our website, hit F5, we want to refresh.', 'start': 5313.715, 'duration': 7.682}, {'end': 5322.998, 'text': 'And now we click on this.', 'start': 5321.977, 'duration': 1.021}, {'end': 5330.159, 'text': 'See, so our original tab is open and it now opens up CNN in a different tab.', 'start': 5323.878, 'duration': 6.281}, {'end': 5331.76, 'text': 'So again, this is good.', 'start': 5330.74, 'duration': 1.02}, {'end': 5340.142, 'text': "If you have links on your website where you're sending people to other people's websites, you may not necessarily want them to leave your own.", 'start': 5331.8, 'duration': 8.342}, {'end': 5349.769, 'text': 'So by using that blank as a target, By doing target equals blank, you can have the other website open and keep yours open at the same time.', 'start': 5340.362, 'duration': 9.407}, {'end': 5354.993, 'text': "So now let's say you want to do a picture.", 'start': 5351.11, 'duration': 3.883}, {'end': 5359.636, 'text': 'So instead of using text as we did here, you want a picture.', 'start': 5355.093, 'duration': 4.543}, {'end': 5366.321, 'text': 'All you would do is in the middle of the aHref tag, you would put your picture.', 'start': 5360.356, 'duration': 5.965}, {'end': 5385.411, 'text': 'So we would do impsrc equals So our logo is still sitting down in the Pictures folder.', 'start': 5366.541, 'duration': 18.87}], 'summary': 'Demonstrating the use of target attribute to open links in a new tab and including an example with an image.', 'duration': 130.795, 'max_score': 5254.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE5254616.jpg'}, {'end': 5646.23, 'src': 'embed', 'start': 5620.935, 'weight': 4, 'content': [{'end': 5626.703, 'text': 'Learning to do HTML programming does not take a lot of smarts.', 'start': 5620.935, 'duration': 5.768}, {'end': 5631.405, 'text': 'really complicated things.', 'start': 5630.324, 'duration': 1.081}, {'end': 5634.086, 'text': 'You just have to do basically a lot of memorization.', 'start': 5631.445, 'duration': 2.641}, {'end': 5637.767, 'text': 'If you do the memorization, then you can learn HTML programming.', 'start': 5634.166, 'duration': 3.601}, {'end': 5643.149, 'text': 'Or if you can just have a little cheat sheet right beside you and use that, you can do HTML programming.', 'start': 5638.227, 'duration': 4.922}, {'end': 5646.23, 'text': 'HTML programming is very easy.', 'start': 5644.129, 'duration': 2.101}], 'summary': 'Learning html programming is easy with memorization or a cheat sheet.', 'duration': 25.295, 'max_score': 5620.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE5620935.jpg'}], 'start': 4504.178, 'title': 'Html basics', 'summary': 'Covers aligning images, inserting images, creating hyperlinks, and an introduction to html programming. it emphasizes organizing images, creating hyperlinks, and the basics of html programming, serving as the first step in web programming.', 'chapters': [{'end': 4558.72, 'start': 4504.178, 'title': 'Aligning image in html', 'summary': 'Explains how to align an image in html using paragraph tags and the align attribute, resulting in the image being centered on the page, emphasizing the importance of placing the whole image element within the paragraph.', 'duration': 54.542, 'highlights': ['Placing the whole image element within the paragraph is essential for aligning the image in HTML, as demonstrated by using the align attribute equals to center, resulting in the image being centered on the page.', 'Emphasizes the restriction of not being able to use the align attribute within the image tag, highlighting the necessity of using the entire image element within the paragraph to achieve alignment.']}, {'end': 4810.139, 'start': 4560.661, 'title': 'Inserting images in html', 'summary': 'Discusses the process of inserting images into an html document, emphasizing the importance of organizing images in the same folder, specifying the file path, and accessing images from different locations, with specific instructions on how to do so.', 'duration': 249.478, 'highlights': ['Organizing images in the same folder when creating a website helps in keeping track of them and prevents scattering.', 'Specifying the file path correctly is crucial for the HTML to display the images properly.', 'Accessing images from different locations, whether within the same folder, in a folder above, or on an entirely different website, requires specific file path formats and protocols.']}, {'end': 5697.533, 'start': 4819.38, 'title': 'Html hyperlinks and image links', 'summary': 'Covers creating hyperlinks in html, including using the ahref tag, specifying the target opening location, and turning images into hyperlinks, making it easy to link to different pages or external websites. learning html programming is straightforward and serves as the first step in web programming.', 'duration': 878.153, 'highlights': ['Learning HTML programming is straightforward and serves as the first step in web programming. HTML programming does not require a lot of complex knowledge or skills, but rather involves memorization and understanding the basics, making it accessible for beginners. It lays the foundation for more advanced web programming languages like JavaScript and PHP.', 'Creating hyperlinks in HTML using the aHREF tag and specifying the target opening location. The process involves using the aHREF tag to specify the destination URL, and optionally specifying the target attribute to determine whether the link opens in the current window or in a new tab, providing flexibility and control over the user experience.', 'Turning images into hyperlinks, making it easy to link to different pages or external websites. By using the image source (src) tag within the aHREF tag, images can be turned into clickable hyperlinks, enabling seamless navigation between pages or directing users to external websites.']}, {'end': 5897.251, 'start': 5704.155, 'title': 'Introduction to html programming', 'summary': 'Covers the basics of html programming, emphasizing the practice of coding and utilizing free online resources for learning, with a focus on creating and understanding forms.', 'duration': 193.096, 'highlights': ['Emphasizes the importance of practicing coding, suggesting to create daily hand-coded advertisements on Craigslist to memorize HTML programming.', 'Highlights the abundance of free online resources available for learning HTML programming through Google searches, with thousands of resources accessible.', "Explains the omission of teaching form creation in the introductory class due to HTML's limitations in dynamic functionality, promising to cover it in later classes.", 'Encourages practical learning by creating pure HTML code to understand its functionality, particularly through creating Craigslist advertisements.', 'Mentions the simplicity of HTML programming and the availability of free resources, discouraging the necessity of purchasing expensive books for learning.']}], 'duration': 1393.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fS7w-TXinPE/pics/fS7w-TXinPE4504178.jpg', 'highlights': ['Creating hyperlinks in HTML using the aHREF tag and specifying the target opening location.', 'Accessing images from different locations requires specific file path formats and protocols.', 'Placing the whole image element within the paragraph is essential for aligning the image in HTML.', 'Organizing images in the same folder when creating a website helps in keeping track of them and prevents scattering.', 'Learning HTML programming is straightforward and serves as the first step in web programming.']}], 'highlights': ['HTML is the main programming language that holds everything together on the web.', 'HTML is the basic programming language for web pages.', 'HTML5 will introduce new features like video integration into webpages, offering additional capabilities beyond HTML4.', 'The process of laying out an HTML webpage is explained, highlighting the use of opening and closing tags for HTML, head, and body to convey instructions to a web browser.', 'The chapter explains the basics of creating paragraphs, headings, alignment, and text formatting using tags like H1, P, align, strong, italicize, and underline.', 'Explains the necessity of enclosing text within paragraph tags to ensure proper formatting and line breaks on the web page.', 'The process of creating a simple table in HTML, including opening and closing tags for rows and cells, and the impact of adding more rows and columns to the table, demonstrating a clear understanding of the process of creating tables in HTML.', 'You can adjust the size of an image on a web page by specifying the width and height in the HTML code, such as width equals 300 and height equals 200, allowing for customization of the image dimensions.', 'Creating hyperlinks in HTML using the aHREF tag and specifying the target opening location.', 'Learning HTML programming is straightforward and serves as the first step in web programming.']}