title
HTML CSS Tutorial for Beginners | Learn HTML & CSS | Full Stack Training | Edureka

description
🔥Edureka Full Stack Web Development Training: https://www.edureka.co/masters-program/full-stack-developer-training This Edureka video on "HTML CSS Tutorial for Beginners" will provide you with a detailed and comprehensive knowledge about HTML. In this HTML Tutorial for Beginners you will learn HTML concepts from scratch and also how to create your first web page using HTML Tags. 🔴Subscribe to our channel to get video updates. Hit the subscribe button above: https://goo.gl/6ohpTV ------------------------------------Edureka Online Training and Certification--------------------------------- 🔵 DevOps Online Training: https://bit.ly/2BPwXf0 🟣 Python Online Training: https://bit.ly/2CQYGN7 🔵 AWS Online Training: https://bit.ly/2ZnbW3s 🟣 RPA Online Training: https://bit.ly/2Zd0ac0 🔵 Data Science Online Training: https://bit.ly/2NCT239 🟣 Big Data Online Training: https://bit.ly/3g8zksu 🔵 Java Online Training: https://bit.ly/31rxJcY 🟣 Selenium Online Training: https://bit.ly/3dIrh43 🔵 PMP Online Training: https://bit.ly/3dJxMTW 🟣 Tableau Online Training: https://bit.ly/3g784KJ -----------------------------------------Edureka Masters Programs--------------------------------------------------- 🟣Web Development Training: https://bit.ly/3nXj3xr 🔵DevOps Engineer Masters Program: https://bit.ly/2B9tZCp 🟣Cloud Architect Masters Program: https://bit.ly/3i9z0eJ 🔵Data Scientist Masters Program: https://bit.ly/2YHaolS 🟣Big Data Architect Masters Program: https://bit.ly/31qrOVv 🔵Machine Learning Engineer Masters Program: https://bit.ly/388NXJi 🟣Business Intelligence Masters Program: https://bit.ly/2BPLtn2 🔵Python Developer Masters Program: https://bit.ly/2Vn7tgb 🟣RPA Developer Masters Program: https://bit.ly/3eHwPNf -----------------------------------------Edureka PGP Courses--------------------------------------------------- 🔵Artificial and Machine Learning PGP: https://bit.ly/2Ziy7b1 🟣CyberSecurity PGP: https://bit.ly/3eHvI0h 🔵Digital Marketing PGP: https://bit.ly/38cqdnz 🟣Big Data Engineering PGP: https://bit.ly/3eTSyBC 🔵Data Science PGP: https://bit.ly/3dIeYV9 🟣Cloud Computing PGP: https://bit.ly/2B9tHLP ----------------------------------------------------------------------------------------------------------- Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka Instagram: https://www.instagram.com/edureka_learning/ Facebook: https://www.facebook.com/edurekaIN/ SlideShare: https://www.slideshare.net/EdurekaIN Castbox: https://castbox.fm/networks/505?country=in Meetup: https://www.meetup.com/edureka/ #edureka #webDevelopmentEdureka #HTMLtutorial #htmlCss #learnHTML #withMe ------------------------------------------------------------------------------------------------------- About The Course: Full Stack Web Development Masters Program makes you proficient in skills to work with back-end and front-end web technologies. It includes training on: 1. Web Development 2. jQuery, Angular 3. NodeJS 4. ExpressJs 5. MongoDB. The curriculum has been determined by extensive research on 5000+ job descriptions across the globe. ------------------------------------------------------------------------------------------------------- How It Works? 1. This is a 21 Week Instructor-led Online Course, 125 hours of assignment and 125 hours of project work 2. We have a 24x7 One-on-One LIVE Technical Support to help you with any problems you might face or any clarifications you may require during the course. 3. At the end of each course, there will be a project, post completion of that project you will be given a certificate ---------------------------------------------------------------------------------------------------------- Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. For more information, please write back to us at sales@edureka.in or call us at IND: 9606058406 / US: 18338555775 (toll free).

detail
{'title': 'HTML CSS Tutorial for Beginners | Learn HTML & CSS | Full Stack Training | Edureka', 'heatmap': [{'end': 1137.268, 'start': 1114.437, 'weight': 0.806}, {'end': 1395.68, 'start': 1325.523, 'weight': 0.735}, {'end': 1651.703, 'start': 1620.493, 'weight': 0.852}, {'end': 1806.326, 'start': 1757.25, 'weight': 0.955}, {'end': 1867.768, 'start': 1842.32, 'weight': 0.915}, {'end': 2064.507, 'start': 2034.483, 'weight': 0.778}], 'summary': 'A comprehensive tutorial covering html and css fundamentals, code editors, seo meta tag optimization, wikipedia content structure, css styling methods, and styling html with css.', 'chapters': [{'end': 244.877, 'segs': [{'end': 46.683, 'src': 'embed', 'start': 4.875, 'weight': 1, 'content': [{'end': 5.356, 'text': 'Good morning.', 'start': 4.875, 'duration': 0.481}, {'end': 7.978, 'text': 'Good afternoon and good evening guys based on the time zones.', 'start': 5.376, 'duration': 2.602}, {'end': 13.424, 'text': 'You all are coming from so before we get started, let me quickly introduce myself to you all first.', 'start': 7.998, 'duration': 5.426}, {'end': 18.489, 'text': "So my name is Neeraj Kheria and I've been working in this IT industry for more than 13 years now.", 'start': 13.484, 'duration': 5.005}, {'end': 21.151, 'text': "So let's get started.", 'start': 19.169, 'duration': 1.982}, {'end': 28.979, 'text': 'So our main purpose of joining this session is to discuss on HTML and CSS how they are used for the web development.', 'start': 22.432, 'duration': 6.547}, {'end': 32.14, 'text': 'and then where we are going to start from scratch,', 'start': 29.62, 'duration': 2.52}, {'end': 40.502, 'text': 'just seeing how exactly we can design the entire solution and how the HTML instances are used as a main drivers for web development.', 'start': 32.14, 'duration': 8.362}, {'end': 43.102, 'text': "So the main agenda for today's session.", 'start': 41.402, 'duration': 1.7}, {'end': 46.683, 'text': 'We are going to discuss on what exactly is HTML.', 'start': 43.162, 'duration': 3.521}], 'summary': 'Neeraj kheria, with 13 years of it experience, leads a session on html and css for web development.', 'duration': 41.808, 'max_score': 4.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU4875.jpg'}, {'end': 90.721, 'src': 'embed', 'start': 64.821, 'weight': 0, 'content': [{'end': 72.006, 'text': 'So, if you talk about any website and any website is built on three main core Technologies if you talk about selling upside,', 'start': 64.821, 'duration': 7.185}, {'end': 73.967, 'text': 'first of all we have HTML.', 'start': 72.006, 'duration': 1.961}, {'end': 78.591, 'text': 'So HTML is the building block for any element.', 'start': 75.529, 'duration': 3.062}, {'end': 85.037, 'text': "For example, if we are placing a form on the page if you're working on building up a form on the page.", 'start': 78.672, 'duration': 6.365}, {'end': 90.721, 'text': 'So how the form is going to look that means how what all elements are going to be present in their form.', 'start': 85.537, 'duration': 5.184}], 'summary': 'Websites rely on three core technologies, with html serving as the building block for elements such as forms.', 'duration': 25.9, 'max_score': 64.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU64821.jpg'}, {'end': 152.523, 'src': 'embed', 'start': 131.684, 'weight': 4, 'content': [{'end': 142.548, 'text': 'So HTML is what HTML is the hypertext markup language which helps us in building the entire content that we are seeing on the pages and then for beautifying all of these elements.', 'start': 131.684, 'duration': 10.864}, {'end': 145.969, 'text': 'It means how the form elements have to look like, how they are going to look like.', 'start': 142.588, 'duration': 3.381}, {'end': 149.321, 'text': 'that is given to us by CSS.', 'start': 146.559, 'duration': 2.762}, {'end': 152.523, 'text': 'CSS refers to cascading style sheet.', 'start': 149.321, 'duration': 3.202}], 'summary': 'Html is used to build web content, while css beautifies it.', 'duration': 20.839, 'max_score': 131.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU131684.jpg'}, {'end': 205.07, 'src': 'embed', 'start': 175.961, 'weight': 3, 'content': [{'end': 180.122, 'text': "Js refers to JavaScript, and that's why any static website.", 'start': 175.961, 'duration': 4.161}, {'end': 189.805, 'text': "It's a combination of these three HTML for defining the content that we have, CSS for beautifying them, for adding the styling components,", 'start': 180.262, 'duration': 9.543}, {'end': 195.227, 'text': 'and then Js for adding the functionality part, as in JavaScript, just like we have our human body.', 'start': 189.805, 'duration': 5.422}, {'end': 197.848, 'text': 'The entire structure is defined by a skeleton.', 'start': 195.547, 'duration': 2.301}, {'end': 205.07, 'text': "There's HTML the entire skin and the entire structure that can does given to us by CSS for beautifying of the body.", 'start': 198.388, 'duration': 6.682}], 'summary': 'Javascript (js) is essential for adding functionality to static websites, alongside html for content and css for styling.', 'duration': 29.109, 'max_score': 175.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU175961.jpg'}, {'end': 247.679, 'src': 'embed', 'start': 222.202, 'weight': 5, 'content': [{'end': 226.786, 'text': 'So HTML as we discussed HTML defines what all elements are going to be present.', 'start': 222.202, 'duration': 4.584}, {'end': 233.751, 'text': 'So HTML refers to hypertext marker language and it defines which all elements are going to be available in the web page.', 'start': 227.486, 'duration': 6.265}, {'end': 237.11, 'text': 'CSS simply defines the styling of any page.', 'start': 234.448, 'duration': 2.662}, {'end': 242.254, 'text': "So let's see how we can create a one web page by using any of the editor.", 'start': 238.251, 'duration': 4.003}, {'end': 244.877, 'text': 'So there are multiple editors available in the market.', 'start': 242.755, 'duration': 2.122}, {'end': 247.679, 'text': 'We can use any of the editors whichever we are comfortable with.', 'start': 244.897, 'duration': 2.782}], 'summary': 'Html defines web elements, css styles pages. multiple editors available.', 'duration': 25.477, 'max_score': 222.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU222202.jpg'}], 'start': 4.875, 'title': 'Web development fundamentals', 'summary': 'Covers the fundamentals of html and css, their role in web development, and creating a website using these components. it also discusses the roles of html, css, and js, emphasizing their importance as the backbone for static websites.', 'chapters': [{'end': 85.037, 'start': 4.875, 'title': 'Html and css for web development', 'summary': 'Discusses the fundamentals of html and css for web development, including their role as building blocks for websites, with html as the main driver and the main agenda covering the definition and usage of html, css, and creating a website using these components.', 'duration': 80.162, 'highlights': ['HTML is the building block for any website and is the main driver for web development, with websites built on three main core technologies: HTML, CSS, and JavaScript.', 'Neeraj Kheria, with over 13 years of experience in the IT industry, will lead the discussion on HTML and CSS for web development.', "The main agenda for today's session includes discussing the definition and usage of HTML, CSS, and creating a website using these components."]}, {'end': 244.877, 'start': 85.537, 'title': 'Html, css, and js in web development', 'summary': 'Discusses the role of html, css, and js in web development, highlighting that html defines elements, css styles pages, and js adds functionality, serving as the backbone for any static website.', 'duration': 159.34, 'highlights': ['HTML defines elements in a web page HTML refers to hypertext markup language and defines the elements present on the web page.', 'CSS styles pages CSS defines the styling of web pages, including elements like forms, text boxes, and images.', 'JS adds functionality to a website JS provides the functionality for web pages, such as form submission and updating content, making it a core component of any static website.']}], 'duration': 240.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU4875.jpg', 'highlights': ['HTML is the building block for any website and is the main driver for web development, with websites built on three main core technologies: HTML, CSS, and JavaScript.', "The main agenda for today's session includes discussing the definition and usage of HTML, CSS, and creating a website using these components.", 'Neeraj Kheria, with over 13 years of experience in the IT industry, will lead the discussion on HTML and CSS for web development.', 'JS adds functionality to a website JS provides the functionality for web pages, such as form submission and updating content, making it a core component of any static website.', 'CSS styles pages CSS defines the styling of web pages, including elements like forms, text boxes, and images.', 'HTML defines elements in a web page HTML refers to hypertext markup language and defines the elements present on the web page.']}, {'end': 502.77, 'segs': [{'end': 352.232, 'src': 'embed', 'start': 287.117, 'weight': 0, 'content': [{'end': 288.998, 'text': 'and then you can also download this as well.', 'start': 287.117, 'duration': 1.881}, {'end': 292.545, 'text': 'and these all code editors are free of cost.', 'start': 289.642, 'duration': 2.903}, {'end': 297.69, 'text': 'So they are no licensing involved here for notepad for Visual Studio code or for sublime text.', 'start': 292.585, 'duration': 5.105}, {'end': 302.215, 'text': 'We can use any of these so we have shown you the notepad plus first.', 'start': 297.71, 'duration': 4.505}, {'end': 310.483, 'text': 'So this is how the sublime text also looks like so we can work on the entire sublime text editor that we can get used to get started.', 'start': 302.235, 'duration': 8.248}, {'end': 312.688, 'text': "So there's no main difference here.", 'start': 311.067, 'duration': 1.621}, {'end': 315.169, 'text': 'So it all comes down to our own comfort level.', 'start': 312.768, 'duration': 2.401}, {'end': 319.532, 'text': 'We can choose we can simply create that based on the requirement.', 'start': 315.55, 'duration': 3.982}, {'end': 324.575, 'text': 'So now we are going to use the sublime text editor for building a code.', 'start': 320.593, 'duration': 3.982}, {'end': 331.339, 'text': 'So first of all, we are going to save the file now the extensions that we use for saving and for working or any of the objects.', 'start': 324.595, 'duration': 6.744}, {'end': 335.822, 'text': 'We are going to use the extensions such as dot over can use extensions such as home.html.', 'start': 331.359, 'duration': 4.463}, {'end': 339.201, 'text': 'and all the objects for any file.', 'start': 337.219, 'duration': 1.982}, {'end': 343.765, 'text': 'We are simply recommend to store that as a part of one folder altogether.', 'start': 339.241, 'duration': 4.524}, {'end': 347.348, 'text': "So here we can get a folder and let's say inside this folder.", 'start': 343.785, 'duration': 3.563}, {'end': 352.232, 'text': 'We can name the file as opposed home.html and then we can get started.', 'start': 347.368, 'duration': 4.864}], 'summary': 'Free code editors like notepad++, visual studio code, and sublime text can be used without licensing. sublime text is used for building code and saving files with extensions like .html.', 'duration': 65.115, 'max_score': 287.117, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU287117.jpg'}, {'end': 442.977, 'src': 'embed', 'start': 400.668, 'weight': 3, 'content': [{'end': 404.309, 'text': 'So as you can see every tag here needs to be open and close as well.', 'start': 400.668, 'duration': 3.641}, {'end': 407.37, 'text': 'Then only it is going to be treated like a complete tag altogether.', 'start': 404.829, 'duration': 2.541}, {'end': 415.793, 'text': 'So for opening a tag, we only have to use these all our what these all are different elements available in HTML like we have HTML head and title.', 'start': 407.39, 'duration': 8.403}, {'end': 419.434, 'text': 'So here we are opening the entire title and then we are closing in as well, right?', 'start': 416.253, 'duration': 3.181}, {'end': 428.29, 'text': 'So now, once we have open a title here, now for closing the title, we have to make use of this forward slash and in the same tag that we open now,', 'start': 420.714, 'duration': 7.576}, {'end': 431.777, 'text': 'once we are done now we want to place title inside the head tag.', 'start': 428.29, 'duration': 3.487}, {'end': 435.634, 'text': 'So head is basically like a common section for about the entire website.', 'start': 432.253, 'duration': 3.381}, {'end': 440.636, 'text': 'So head section is basically used to Define the meta tax for like.', 'start': 436.014, 'duration': 4.622}, {'end': 442.977, 'text': 'we have meta keywords, description.', 'start': 440.636, 'duration': 2.341}], 'summary': 'Html tags require opening and closing, e.g. . head section defines meta tags for the website.', 'duration': 42.309, 'max_score': 400.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU400668.jpg'}, {'end': 491.883, 'src': 'embed', 'start': 461.914, 'weight': 5, 'content': [{'end': 467.296, 'text': 'So down next once we are done now, we are going to work on the elements itself.', 'start': 461.914, 'duration': 5.382}, {'end': 470.797, 'text': 'So here we are going to work on adding the elements.', 'start': 467.776, 'duration': 3.021}, {'end': 474.598, 'text': "So now once we're done with head now, we can place body.", 'start': 471.457, 'duration': 3.141}, {'end': 476.518, 'text': 'So whatever we are going to place in the body.', 'start': 474.618, 'duration': 1.9}, {'end': 479.499, 'text': 'So body is the actual content.', 'start': 477.059, 'duration': 2.44}, {'end': 483.881, 'text': 'That means whatever we can see on the webpage that is generally placed inside the body itself.', 'start': 479.539, 'duration': 4.342}, {'end': 491.883, 'text': 'For example, if we open up Microsoft or whatever we can see on Microsoft, That means from top to bottom, whatever we can see her,', 'start': 484.701, 'duration': 7.182}], 'summary': 'Working on adding elements to the body of the webpage.', 'duration': 29.969, 'max_score': 461.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU461914.jpg'}], 'start': 244.897, 'title': 'Code editors and html structure', 'summary': 'Discusses popular code editors like notepad++, visual studio code, and sublime text, which are available for both windows and ios, and the structure of an html document, emphasizing opening and closing tags, head section for meta tags and loading resources, and body section for rendering webpage content.', 'chapters': [{'end': 352.232, 'start': 244.897, 'title': 'Choosing code editors', 'summary': 'Discusses using popular code editors like notepad++, visual studio code, and sublime text, which are available for both windows and ios, and are free of cost, allowing users to choose based on their comfort level and requirements.', 'duration': 107.335, 'highlights': ['Popular code editors like Notepad++, Visual Studio Code, and Sublime Text are available for both Windows and iOS, and are free of cost. Notepad++, Visual Studio Code, and Sublime Text are popular code editors available for both Windows and iOS, and are free of cost, providing flexibility for users to choose based on their comfort level and requirements.', 'Ability to choose code editor based on comfort level and requirements. Users can choose a code editor based on their comfort level and specific requirements, allowing for flexibility in the coding process.', 'Use of specific file extensions such as .html for saving and working on files. The chapter recommends using specific file extensions such as .html for saving and working on files, providing organization and structure to the coding process.']}, {'end': 502.77, 'start': 353.153, 'title': 'Html document structure', 'summary': 'Explains the structure of an html document, highlighting the necessity of opening and closing tags, the purpose of the head section for meta tags and loading resources, and the definition of the body section for rendering webpage content.', 'duration': 149.617, 'highlights': ['The importance of opening and closing tags is emphasized, with every HTML document starting with an HTML tag and necessitating the proper closure of tags for complete functionality.', 'The head section is highlighted as a common section for defining meta tags such as keywords, descriptions, and loading resources like style sheets and JavaScript files.', 'The body section is explained as the area where the actual content of the webpage is placed, encompassing all visible elements on the webpage.']}], 'duration': 257.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU244897.jpg', 'highlights': ['Notepad++, Visual Studio Code, and Sublime Text are popular code editors available for both Windows and iOS, and are free of cost, providing flexibility for users to choose based on their comfort level and requirements.', 'Users can choose a code editor based on their comfort level and specific requirements, allowing for flexibility in the coding process.', 'The chapter recommends using specific file extensions such as .html for saving and working on files, providing organization and structure to the coding process.', 'Every HTML document starts with an HTML tag and necessitates the proper closure of tags for complete functionality.', 'The head section is highlighted as a common section for defining meta tags such as keywords, descriptions, and loading resources like style sheets and JavaScript files.', 'The body section is explained as the area where the actual content of the webpage is placed, encompassing all visible elements on the webpage.']}, {'end': 872.523, 'segs': [{'end': 587.959, 'src': 'embed', 'start': 520.576, 'weight': 0, 'content': [{'end': 526.878, 'text': 'The middle name tags the middle tag for keywords and for adding descriptions for example as a part of the SEO.', 'start': 520.576, 'duration': 6.302}, {'end': 530.82, 'text': 'We want to make sure that this particular page is treated.', 'start': 526.959, 'duration': 3.861}, {'end': 533.922, 'text': 'Now, we can define middle name and keywords.', 'start': 530.9, 'duration': 3.022}, {'end': 535.342, 'text': 'That means suppose.', 'start': 534.322, 'duration': 1.02}, {'end': 542.575, 'text': 'if anyone is searching for suppose, this page is meant for suppose travel website, right?', 'start': 535.342, 'duration': 7.233}, {'end': 550.618, 'text': 'So here, if someone is looking for travel or book hotels, book flights, if anyone is looking for these keywords,', 'start': 542.595, 'duration': 8.023}, {'end': 555.441, 'text': 'then our page should be included in the search results for these keywords, right?', 'start': 550.618, 'duration': 4.823}, {'end': 559.022, 'text': 'That exactly is what we are giving as a meta tag, same way.', 'start': 555.821, 'duration': 3.201}, {'end': 562.784, 'text': 'If we want to add a short description for the page as well, right?', 'start': 559.142, 'duration': 3.642}, {'end': 570.653, 'text': 'So here we can define the name meta tag as description and then we can give the entire content for that description as well.', 'start': 563.171, 'duration': 7.482}, {'end': 577.055, 'text': 'Whatever we are going to suppose by cheap light tickets.', 'start': 570.773, 'duration': 6.282}, {'end': 584.457, 'text': 'So this can be a short description a simple one-liner that is going to be used by the search engines to know more about working.', 'start': 578.356, 'duration': 6.101}, {'end': 587.959, 'text': 'What exactly these pages, what exactly this page is all about,', 'start': 584.477, 'duration': 3.482}], 'summary': 'Optimizing meta tags for seo to improve search result inclusion for specific keywords and descriptions.', 'duration': 67.383, 'max_score': 520.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU520576.jpg'}, {'end': 640.131, 'src': 'embed', 'start': 612.462, 'weight': 3, 'content': [{'end': 614.943, 'text': 'We have multiple header elements available here.', 'start': 612.462, 'duration': 2.481}, {'end': 623.766, 'text': 'We have from h1 to h2, h3, h4, h5, h6, depending upon how many heading we want to add and that to add,', 'start': 615.543, 'duration': 8.223}, {'end': 627.907, 'text': 'what hierarchical level we want to add as a part of the page, for example here.', 'start': 623.766, 'duration': 4.141}, {'end': 629.608, 'text': 'We can give h1 here.', 'start': 627.927, 'duration': 1.681}, {'end': 632.549, 'text': 'We can name it as welcome to edureka.', 'start': 629.628, 'duration': 2.921}, {'end': 636.57, 'text': 'So now as we discuss every tag needs to be closed as well.', 'start': 633.369, 'duration': 3.201}, {'end': 637.891, 'text': 'Whatever tag we are opening up.', 'start': 636.63, 'duration': 1.261}, {'end': 640.131, 'text': 'So we had to find welcome to edureka.', 'start': 638.491, 'duration': 1.64}], 'summary': "The transcript discusses the availability of multiple header elements ranging from h1 to h6, and emphasizes the need to close each tag after opening. it also exemplifies the use of h1 for naming as 'welcome to edureka.'", 'duration': 27.669, 'max_score': 612.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU612462.jpg'}, {'end': 712.496, 'src': 'embed', 'start': 681.937, 'weight': 5, 'content': [{'end': 686.099, 'text': "So we have heading tab from h1 and it's this can go to h2 as well.", 'start': 681.937, 'duration': 4.162}, {'end': 688.3, 'text': 'This can go to h2 for example here.', 'start': 686.659, 'duration': 1.641}, {'end': 689.88, 'text': 'We have h2 again.', 'start': 688.32, 'duration': 1.56}, {'end': 695.223, 'text': 'If you want to have a subheading for h2 again we can give another header for h3.', 'start': 689.9, 'duration': 5.323}, {'end': 700.029, 'text': 'then we can have for h4 another header or the subheader.', 'start': 695.223, 'duration': 4.806}, {'end': 703.611, 'text': 'then we can have h5 and basically it goes till h6..', 'start': 700.029, 'duration': 3.582}, {'end': 712.496, 'text': 'If you come back here refresh we can see the size and wait for each and every header reduces by using the multiple tags here.', 'start': 705.972, 'duration': 6.524}], 'summary': 'The transcript discusses header tags from h1 to h6 and their impact on text size.', 'duration': 30.559, 'max_score': 681.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU681937.jpg'}, {'end': 806.83, 'src': 'embed', 'start': 767.606, 'weight': 4, 'content': [{'end': 771.629, 'text': "That's how the entire newspaper is structured, because we have to give the weightage.", 'start': 767.606, 'duration': 4.023}, {'end': 777.153, 'text': 'We have to give different weightage to different articles and heading as a part of the page.', 'start': 771.689, 'duration': 5.464}, {'end': 780.276, 'text': 'same thing is going to be applied here for this page as well.', 'start': 777.153, 'duration': 3.123}, {'end': 786.696, 'text': 'So What we can do here suppose if you are writing a blog article, maybe the main heading is top trends and shoes.', 'start': 781.397, 'duration': 5.299}, {'end': 790.779, 'text': 'So since this is a main heading we are going to place this under the H1 tag.', 'start': 787.236, 'duration': 3.543}, {'end': 797.604, 'text': 'Now suppose if you have for the subdividing the main header again into sub if we can say multiple equal components.', 'start': 791.84, 'duration': 5.764}, {'end': 804.228, 'text': 'So for example here, we are going to write the article divide them on men and men and women sections.', 'start': 798.224, 'duration': 6.004}, {'end': 806.83, 'text': 'So we have men and women now.', 'start': 804.408, 'duration': 2.422}], 'summary': 'Newspaper layout structured with different weightage for articles and headings, applying similar concept to web page content organization.', 'duration': 39.224, 'max_score': 767.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU767606.jpg'}], 'start': 503.01, 'title': 'Seo meta tag optimization and html structure', 'summary': 'Discusses optimizing meta tags for seo by using middle name and keywords, aiming to improve search results. it also explains html content structure and demonstrates the use of heading tags for organizing content, with examples of subdividing main headings.', 'chapters': [{'end': 587.959, 'start': 503.01, 'title': 'Seo meta tag optimization', 'summary': 'Discusses the use of middle name and keywords as meta tags for seo optimization, ensuring that the page is included in search results for specific keywords.', 'duration': 84.949, 'highlights': ['Google search results are influenced by the use of middle name and middle tag for keywords and descriptions, impacting SEO optimization.', 'The meta tag for keywords and descriptions helps in ensuring the inclusion of the page in search results for specific keywords, such as travel, book hotels, and book flights.', "Defining meta tags like 'description' and providing relevant content helps search engines understand the page's content and purpose, aiding in SEO optimization."]}, {'end': 872.523, 'start': 587.959, 'title': 'Html structure and heading tags', 'summary': 'Explains the structure of html content and demonstrates the use of heading tags from h1 to h6 for organizing and hierarchizing content, with examples of how to use the tags to subdivide main headings into subheadings.', 'duration': 284.564, 'highlights': ['The use of heading tags from h1 to h6 is demonstrated for organizing and hierarchizing content. The transcript explains the use of heading tags from h1 to h6 for organizing and hierarchizing content.', 'Examples of how to use the tags to subdivide main headings into subheadings are provided. The transcript provides examples of how to use the heading tags to subdivide main headings into subheadings.', 'Demonstration of the hierarchy level of heading tags, such as using h2 for subdividing main headings into subheadings. The transcript demonstrates the hierarchy level of heading tags, such as using h2 for subdividing main headings into subheadings.', 'Explanation of how to structure content using heading tags, with examples of subdividing main headings into subheadings. The transcript explains how to structure content using heading tags, with examples of subdividing main headings into subheadings.', 'The importance of giving different weightage to different articles and headings is emphasized. The transcript emphasizes the importance of giving different weightage to different articles and headings.']}], 'duration': 369.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU503010.jpg', 'highlights': ['Google search results are influenced by the use of middle name and middle tag for keywords and descriptions, impacting SEO optimization.', 'The meta tag for keywords and descriptions helps in ensuring the inclusion of the page in search results for specific keywords, such as travel, book hotels, and book flights.', "Defining meta tags like 'description' and providing relevant content helps search engines understand the page's content and purpose, aiding in SEO optimization.", 'The use of heading tags from h1 to h6 is demonstrated for organizing and hierarchizing content.', 'Examples of how to use the tags to subdivide main headings into subheadings are provided.', 'Demonstration of the hierarchy level of heading tags, such as using h2 for subdividing main headings into subheadings.', 'Explanation of how to structure content using heading tags, with examples of subdividing main headings into subheadings.', 'The importance of giving different weightage to different articles and headings is emphasized.']}, {'end': 1406.828, 'segs': [{'end': 906.99, 'src': 'embed', 'start': 872.563, 'weight': 0, 'content': [{'end': 876.913, 'text': 'For example, if we go ahead and open up Wikipedia, we may see multiple content there right?', 'start': 872.563, 'duration': 4.35}, {'end': 882.558, 'text': "For example, if you're looking about India on Wikipedia, so you can see the main heading is India itself.", 'start': 877.495, 'duration': 5.063}, {'end': 886.48, 'text': 'And then we have multiple subsections like we have supposed to be a history.', 'start': 882.718, 'duration': 3.762}, {'end': 891.522, 'text': 'Our history is going to be the H2 and then history has been further subdivided into ancient India.', 'start': 886.54, 'duration': 4.982}, {'end': 893.203, 'text': 'Then we have medieval India.', 'start': 891.962, 'duration': 1.241}, {'end': 895.704, 'text': 'Then we have early modern India and then we have modern India.', 'start': 893.243, 'duration': 2.461}, {'end': 897.705, 'text': 'All right, and then same way.', 'start': 895.724, 'duration': 1.981}, {'end': 906.99, 'text': 'We have geography geography is going to be H2 and then these all can be characterized as for the setup as for the content that we have now.', 'start': 897.745, 'duration': 9.245}], 'summary': 'Wikipedia page on india has multiple sections: history (ancient, medieval, early modern, modern) and geography.', 'duration': 34.427, 'max_score': 872.563, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU872563.jpg'}, {'end': 939.116, 'src': 'embed', 'start': 913.097, 'weight': 5, 'content': [{'end': 919.041, 'text': 'So when we want to add the style sheet to the web pages, then we have to make use of these CSS part.', 'start': 913.097, 'duration': 5.944}, {'end': 921.242, 'text': 'So basically correct.', 'start': 919.761, 'duration': 1.481}, {'end': 924.384, 'text': 'We have this type of content available on the page here.', 'start': 921.883, 'duration': 2.501}, {'end': 927.687, 'text': 'So now we want to apply a different styling to different elements.', 'start': 924.905, 'duration': 2.782}, {'end': 930.829, 'text': "For example, let's say we have this header.", 'start': 928.107, 'duration': 2.722}, {'end': 936.833, 'text': "We have a second header and then we have third header as JavaScript, correct? Let's remove these elements.", 'start': 931.709, 'duration': 5.124}, {'end': 939.116, 'text': 'from the page for now.', 'start': 938.336, 'duration': 0.78}], 'summary': 'Adding css stylesheet to web pages to apply different styling to elements.', 'duration': 26.019, 'max_score': 913.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU913097.jpg'}, {'end': 991.713, 'src': 'embed', 'start': 960.607, 'weight': 1, 'content': [{'end': 962.028, 'text': 'We can add a simple paragraph.', 'start': 960.607, 'duration': 1.421}, {'end': 967.451, 'text': 'So this is the content that we have on the page.', 'start': 963.929, 'duration': 3.522}, {'end': 975.523, 'text': 'Now if you want to add images say here, we want to add images in the upside then we can tend for placing the images.', 'start': 968.379, 'duration': 7.144}, {'end': 980.586, 'text': 'We have certain tasks as IMG, which is basically used to place the images.', 'start': 975.583, 'duration': 5.003}, {'end': 987.65, 'text': "Now, let's say we want to place the image just after this entire HTML element here.", 'start': 981.567, 'duration': 6.083}, {'end': 988.371, 'text': 'All right.', 'start': 988.091, 'duration': 0.28}, {'end': 991.713, 'text': 'So what we can do first of all, we have to look for the image.', 'start': 988.851, 'duration': 2.862}], 'summary': 'The transcript discusses adding images to the webpage using html, with an emphasis on image placement.', 'duration': 31.106, 'max_score': 960.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU960607.jpg'}, {'end': 1148.048, 'src': 'heatmap', 'start': 1114.437, 'weight': 0.806, 'content': [{'end': 1116.958, 'text': 'So here we can define slider.jpg.', 'start': 1114.437, 'duration': 2.521}, {'end': 1124.522, 'text': 'So we have to define the element as in tag and then we have to find the attribute for it as in source right,', 'start': 1117.919, 'duration': 6.603}, {'end': 1129.664, 'text': 'and they are certain elements that where we do not need to close them, so we can save it up.', 'start': 1124.522, 'duration': 5.142}, {'end': 1137.268, 'text': 'and if we come back to the browser, you can see the image has been placed successfully in the browser itself.', 'start': 1129.664, 'duration': 7.604}, {'end': 1137.968, 'text': 'what we have to find?', 'start': 1137.268, 'duration': 0.7}, {'end': 1148.048, 'text': 'All right, and if we are not defining any size for the given image tag, then what happens the image is being displayed at its full size.', 'start': 1138.7, 'duration': 9.348}], 'summary': 'Defining image elements and attributes in html for successful browser placement.', 'duration': 33.611, 'max_score': 1114.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1114437.jpg'}, {'end': 1189.291, 'src': 'embed', 'start': 1159.078, 'weight': 2, 'content': [{'end': 1166.444, 'text': 'So for that we have to define another attribute such as width or height, whatever you want to change your now.', 'start': 1159.078, 'duration': 7.366}, {'end': 1172.078, 'text': "Let's say we want that the width of the image should be restricted to let's say 350 pixels.", 'start': 1167.014, 'duration': 5.064}, {'end': 1180.324, 'text': 'So here we can find 350 Save it and now I can see her the image size has been shrinked down to 350.', 'start': 1172.378, 'duration': 7.946}, {'end': 1189.291, 'text': "That means even it doesn't matter now if we shrink the entire container not the image is going to be fixed at the 350 pixels size as you can see here.", 'start': 1180.324, 'duration': 8.967}], 'summary': 'The image size is restricted to 350 pixels, ensuring fixed dimensions.', 'duration': 30.213, 'max_score': 1159.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1159078.jpg'}, {'end': 1226.579, 'src': 'embed', 'start': 1203.5, 'weight': 3, 'content': [{'end': 1211.366, 'text': 'as for the available size of the window, then, instead of defining it as a as a different pixel size,', 'start': 1203.5, 'duration': 7.866}, {'end': 1212.767, 'text': 'We can keep it to percentage.', 'start': 1211.426, 'duration': 1.341}, {'end': 1220.774, 'text': 'For example, we wanted at any point of time the width of the image should be 50% to the image, to the width of the container,', 'start': 1213.567, 'duration': 7.207}, {'end': 1222.916, 'text': 'or suppose it should be 70% of the bit.', 'start': 1220.774, 'duration': 2.142}, {'end': 1226.579, 'text': 'So once we save it we come back to the browser.', 'start': 1223.817, 'duration': 2.762}], 'summary': 'Proposing to use percentage for window size, e.g. 50% or 70% of container, instead of fixed pixels.', 'duration': 23.079, 'max_score': 1203.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1203500.jpg'}, {'end': 1395.68, 'src': 'heatmap', 'start': 1325.523, 'weight': 0.735, 'content': [{'end': 1331.846, 'text': 'We have to place any element that we are going to link and anchor that just like we define the source for the image.', 'start': 1325.523, 'duration': 6.323}, {'end': 1336.409, 'text': 'We also have to define which hyperlink we want to add to this particular texture.', 'start': 1331.886, 'duration': 4.523}, {'end': 1343.133, 'text': 'So here we can make use of edge reference as an edge reference equals to, and then you have.', 'start': 1337.67, 'duration': 5.463}, {'end': 1347.115, 'text': 'we had to specify the link that you want to hyperlink, suppose, here.', 'start': 1343.133, 'duration': 3.982}, {'end': 1350.537, 'text': "We want the user should be going to Google's homepage as in google.com.", 'start': 1347.135, 'duration': 3.402}, {'end': 1358.684, 'text': 'Google.com. so here, once you save this, if you come back, we hit refresh.', 'start': 1352.54, 'duration': 6.144}, {'end': 1360.705, 'text': 'now you can see how this entire page has.', 'start': 1358.684, 'duration': 2.021}, {'end': 1364.107, 'text': 'this hyperlink has been added to this particular text.', 'start': 1360.705, 'duration': 3.402}, {'end': 1369.05, 'text': "It means now if you click on the same link here, we are going to go to the Google's home page as you can see here.", 'start': 1364.167, 'duration': 4.883}, {'end': 1373.053, 'text': 'Now currently the link is being opened up in the same browser.', 'start': 1369.991, 'duration': 3.062}, {'end': 1379.317, 'text': 'If you want the link should be opened up in some other tab, then we only have to add another attribute to it.', 'start': 1373.553, 'duration': 5.764}, {'end': 1385.873, 'text': 'as target underscore equals to underscore blank underscore.', 'start': 1380.109, 'duration': 5.764}, {'end': 1388.275, 'text': 'Blank here.', 'start': 1387.755, 'duration': 0.52}, {'end': 1395.68, 'text': 'That means now if we save it we come back we hit refresh now if you click on this link at this link is not going to be opened up in the same browser.', 'start': 1388.655, 'duration': 7.025}], 'summary': 'Demonstrating how to add hyperlinks to a webpage and specifying target attributes.', 'duration': 70.157, 'max_score': 1325.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1325523.jpg'}, {'end': 1395.68, 'src': 'embed', 'start': 1364.167, 'weight': 4, 'content': [{'end': 1369.05, 'text': "It means now if you click on the same link here, we are going to go to the Google's home page as you can see here.", 'start': 1364.167, 'duration': 4.883}, {'end': 1373.053, 'text': 'Now currently the link is being opened up in the same browser.', 'start': 1369.991, 'duration': 3.062}, {'end': 1379.317, 'text': 'If you want the link should be opened up in some other tab, then we only have to add another attribute to it.', 'start': 1373.553, 'duration': 5.764}, {'end': 1385.873, 'text': 'as target underscore equals to underscore blank underscore.', 'start': 1380.109, 'duration': 5.764}, {'end': 1388.275, 'text': 'Blank here.', 'start': 1387.755, 'duration': 0.52}, {'end': 1395.68, 'text': 'That means now if we save it we come back we hit refresh now if you click on this link at this link is not going to be opened up in the same browser.', 'start': 1388.655, 'duration': 7.025}], 'summary': 'Adding target_blank attribute opens link in new tab.', 'duration': 31.513, 'max_score': 1364.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1364167.jpg'}], 'start': 872.563, 'title': 'Wikipedia content structure and html elements', 'summary': "Discusses the hierarchical structure of wikipedia content, using india's page as an example with main headings like history and geography, further divided into subsections. it also covers html elements for adding images, setting image size, making images responsive, and adding hyperlinks in html.", 'chapters': [{'end': 912.416, 'start': 872.563, 'title': 'Wikipedia content structure', 'summary': "Discusses the hierarchical structure of content on wikipedia, using the example of india's page which has main headings like history and geography, further divided into subsections like ancient, medieval, and modern india, and cascading style sheet (css) is also mentioned.", 'duration': 39.853, 'highlights': ["The hierarchical structure of content on Wikipedia is illustrated using the example of India's page, which includes main headings like History and Geography, further subdivided into subsections such as ancient, medieval, and modern India. (e.g. history is subdivided into ancient, medieval, early modern, and modern India)", 'The concept of cascading style sheet (CSS) is briefly mentioned in relation to Wikipedia content. (e.g. CSS refers to cascading style sheet)']}, {'end': 1406.828, 'start': 913.097, 'title': 'Html elements and styling', 'summary': 'Covers adding images, setting image size, making images responsive, and adding hyperlinks in html, demonstrating how to use html elements and css to style web pages effectively.', 'duration': 493.731, 'highlights': ['The chapter explains how to add and style HTML elements, including headers, paragraphs, and images, with practical examples and best practices.', 'It demonstrates how to set the size of an image in HTML using width and height attributes, with a specific example of restricting image width to 350 pixels.', 'It provides guidance on making images responsive by setting their width as a percentage of the container, ensuring they adjust to the available window size.', 'It shows how to add hyperlinks using anchor tags, specifying the link destination and opening the link in a new tab using the target attribute.']}], 'duration': 534.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU872563.jpg', 'highlights': ["The hierarchical structure of content on Wikipedia is illustrated using the example of India's page, including main headings like History and Geography, further subdivided into subsections. (e.g. history is subdivided into ancient, medieval, early modern, and modern India)", 'The chapter explains how to add and style HTML elements, including headers, paragraphs, and images, with practical examples and best practices.', 'It demonstrates how to set the size of an image in HTML using width and height attributes, with a specific example of restricting image width to 350 pixels.', 'It provides guidance on making images responsive by setting their width as a percentage of the container, ensuring they adjust to the available window size.', 'It shows how to add hyperlinks using anchor tags, specifying the link destination and opening the link in a new tab using the target attribute.', 'The concept of cascading style sheet (CSS) is briefly mentioned in relation to Wikipedia content. (e.g. CSS refers to cascading style sheet)']}, {'end': 1703.987, 'segs': [{'end': 1530.609, 'src': 'embed', 'start': 1501.169, 'weight': 1, 'content': [{'end': 1503.75, 'text': 'In the head section just before closing the head tag here.', 'start': 1501.169, 'duration': 2.581}, {'end': 1506.612, 'text': 'We can place an element call as style.', 'start': 1503.83, 'duration': 2.782}, {'end': 1513.276, 'text': 'We can add the style tag here only and whatever selling we want to be applied for the entire page for any of the elements.', 'start': 1506.672, 'duration': 6.604}, {'end': 1514.217, 'text': 'We can place it here.', 'start': 1513.416, 'duration': 0.801}, {'end': 1522.727, 'text': 'For example, we wanted H2 element wherever we have used H2 the H2 element should be having the specific style.', 'start': 1514.946, 'duration': 7.781}, {'end': 1526.308, 'text': 'So here we can write H2 and under curly braces here.', 'start': 1523.267, 'duration': 3.041}, {'end': 1527.548, 'text': 'We have to define the style.', 'start': 1526.348, 'duration': 1.2}, {'end': 1530.609, 'text': 'For example, we want the color should be in red color.', 'start': 1528.248, 'duration': 2.361}], 'summary': 'Using the style tag in the head section to apply specific styles to elements on the entire page, such as setting h2 element color to red.', 'duration': 29.44, 'max_score': 1501.169, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1501169.jpg'}, {'end': 1570.998, 'src': 'embed', 'start': 1542.151, 'weight': 3, 'content': [{'end': 1547.848, 'text': 'So these all are Colors having name, but we know that there are millions of shades available out there, right?', 'start': 1542.151, 'duration': 5.697}, {'end': 1550.209, 'text': 'So we want to add those millions of shades.', 'start': 1548.288, 'duration': 1.921}, {'end': 1553.03, 'text': 'So here we can make use of this kind of X code.', 'start': 1550.269, 'duration': 2.761}, {'end': 1556.592, 'text': 'So for example, we want to give a specific shade of red.', 'start': 1553.59, 'duration': 3.002}, {'end': 1558.613, 'text': 'For example, we want to give this shade of red this one.', 'start': 1556.612, 'duration': 2.001}, {'end': 1566.016, 'text': 'So here we can copy the hex value, here copy this one and in here we can come back and in.', 'start': 1559.153, 'duration': 6.863}, {'end': 1570.998, 'text': 'here, instead of red, we can specify the hash symbol and then the value that we have copied.', 'start': 1566.016, 'duration': 4.982}], 'summary': 'Add millions of shades using x code for specific colors.', 'duration': 28.847, 'max_score': 1542.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1542151.jpg'}, {'end': 1651.703, 'src': 'heatmap', 'start': 1583.649, 'weight': 0, 'content': [{'end': 1586.332, 'text': 'suppose we want this to change before Verdana?', 'start': 1583.649, 'duration': 2.683}, {'end': 1588.634, 'text': 'if we can find font, family is Verdana.', 'start': 1586.332, 'duration': 2.302}, {'end': 1591.177, 'text': 'if you save this, we can come back to our page.', 'start': 1588.634, 'duration': 2.543}, {'end': 1595.201, 'text': 'If you come back we hit refresh we can see here.', 'start': 1593.499, 'duration': 1.702}, {'end': 1601.418, 'text': 'The color has been changed, plus the entire font family has also been changed by,', 'start': 1595.914, 'duration': 5.504}, {'end': 1607.964, 'text': 'because we have to find the styling here by using the internal style sheet for this particular element, as you can see here.', 'start': 1601.418, 'duration': 6.546}, {'end': 1609.285, 'text': 'All right.', 'start': 1609.024, 'duration': 0.261}, {'end': 1617.311, 'text': 'So this method is called as when we define the style sheet find the styling for any element by using this internal style sheet.', 'start': 1610.085, 'duration': 7.226}, {'end': 1618.892, 'text': 'This is called as internal styling.', 'start': 1617.371, 'duration': 1.521}, {'end': 1620.053, 'text': 'All right.', 'start': 1619.773, 'duration': 0.28}, {'end': 1630.411, 'text': 'So first of all, we had inline style then this is called this method is called internal style sheet and then we have external style sheet.', 'start': 1620.493, 'duration': 9.918}, {'end': 1634.673, 'text': 'For example, if you want we can create a new document all together.', 'start': 1630.531, 'duration': 4.142}, {'end': 1637.974, 'text': "We can save it as let's say styler CSS.", 'start': 1634.693, 'duration': 3.281}, {'end': 1642.335, 'text': 'And now whatever styling we want to apply here.', 'start': 1640.214, 'duration': 2.121}, {'end': 1643.655, 'text': 'We can apply the directly here.', 'start': 1642.435, 'duration': 1.22}, {'end': 1646.376, 'text': 'For example, we can cut it.', 'start': 1644.035, 'duration': 2.341}, {'end': 1651.703, 'text': 'and here without specifying anything for the h2 or HTML.', 'start': 1647.66, 'duration': 4.043}], 'summary': 'Changing font to verdana using internal style sheet.', 'duration': 51.024, 'max_score': 1583.649, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1583649.jpg'}], 'start': 1408.101, 'title': 'Css styling methods and internal vs external css', 'summary': 'Discusses three methods of applying css styling, including inline, internal, and external styles, with an emphasis on defining styles for elements and utilizing color values. it also explains internal and external css styling, including changing font family and colors, and provides a comparison of internal style sheets with inline and external styles.', 'chapters': [{'end': 1558.613, 'start': 1408.101, 'title': 'Css styling methods', 'summary': 'Discusses the three methods of applying css styling: inline style, internal style sheet, and external style sheet, with emphasis on defining styles for elements and utilizing color values.', 'duration': 150.512, 'highlights': ['The chapter discusses the three methods of applying CSS styling: inline style, internal style sheet, and external style sheet, with emphasis on defining styles for elements and utilizing color values.', 'The inline style method involves adding the style attribute to individual elements, allowing specific styling to be applied to each element, such as defining the text color as red for an h2 element.', 'The internal style sheet method entails placing the style tag in the head section and defining styles for elements using selectors and declarations, allowing for consistent styling across multiple elements, like specifying the color of all h2 elements to be red.', 'Various color values, including named colors and hexadecimal codes, are discussed for defining specific shades and tones in CSS styling, providing flexibility for customizing the appearance of elements.']}, {'end': 1703.987, 'start': 1559.153, 'title': 'Internal vs external css styling', 'summary': 'Explains internal and external css styling, including changing font family and colors, and it mentions the process of defining styles using internal style sheets, with a brief comparison to inline and external styles.', 'duration': 144.834, 'highlights': ['The process of defining styles using internal style sheets is called internal styling, which is a method for finding the styling for any element by using the internal style sheet.', 'The chapter explains the method of defining styles using internal style sheets, which is a part of the three methods of styling including inline and external style sheets.', 'The example demonstrates changing the font family and color using internal style sheets, with the font family being changed to Verdana and the color being modified using a hex code.', "The demonstration includes the direct application of styling in an external style sheet document 'styler.css', including defining styles for h2 and paragraph tags, changing color with a hex code and increasing font size to 18 pixels for the paragraph."]}], 'duration': 295.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1408101.jpg', 'highlights': ['The chapter discusses the three methods of applying CSS styling: inline style, internal style sheet, and external style sheet, with emphasis on defining styles for elements and utilizing color values.', 'The internal style sheet method entails placing the style tag in the head section and defining styles for elements using selectors and declarations, allowing for consistent styling across multiple elements, like specifying the color of all h2 elements to be red.', 'The example demonstrates changing the font family and color using internal style sheets, with the font family being changed to Verdana and the color being modified using a hex code.', 'Various color values, including named colors and hexadecimal codes, are discussed for defining specific shades and tones in CSS styling, providing flexibility for customizing the appearance of elements.']}, {'end': 2112.551, 'segs': [{'end': 1749.421, 'src': 'embed', 'start': 1723.196, 'weight': 0, 'content': [{'end': 1731.244, 'text': 'Now, if you want to have this, this styling, applied in a document, then we have to link the style sheet with our HTML document,', 'start': 1723.196, 'duration': 8.048}, {'end': 1735.428, 'text': 'and that better is called as external style sheets, because here we are using.', 'start': 1731.244, 'duration': 4.184}, {'end': 1738.951, 'text': 'we are planning to use an external style sheet in a separate file.', 'start': 1735.428, 'duration': 3.523}, {'end': 1743.075, 'text': 'Correct So for linking this style sheet in a human document.', 'start': 1739.271, 'duration': 3.804}, {'end': 1744.296, 'text': 'We have same way.', 'start': 1743.215, 'duration': 1.081}, {'end': 1749.421, 'text': 'We have to place the link in the head section itself in the header section itself.', 'start': 1744.336, 'duration': 5.085}], 'summary': 'Link external style sheet to html document for consistent styling.', 'duration': 26.225, 'max_score': 1723.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1723196.jpg'}, {'end': 1806.326, 'src': 'heatmap', 'start': 1757.25, 'weight': 0.955, 'content': [{'end': 1758.97, 'text': 'Now, what is a type of the file?', 'start': 1757.25, 'duration': 1.72}, {'end': 1766.112, 'text': 'We are going to add, this is going to be text file in the format of CSS, and then we have to find the source of the file.', 'start': 1758.99, 'duration': 7.122}, {'end': 1774.614, 'text': 'So this file is currently located in the same folder as a html folder as standard CSS suppose if this was available in here in CSS.', 'start': 1766.132, 'duration': 8.482}, {'end': 1781.216, 'text': 'So now if you because we have changes the the entire styling component here, right? So now we can save it.', 'start': 1775.694, 'duration': 5.522}, {'end': 1784.717, 'text': 'Now the CC file is available under CSS folder.', 'start': 1782.196, 'duration': 2.521}, {'end': 1789.299, 'text': 'So now we have to find the Location as CSS and under CSS.', 'start': 1784.857, 'duration': 4.442}, {'end': 1791.66, 'text': 'We have style dot CSS file available.', 'start': 1789.319, 'duration': 2.341}, {'end': 1796.101, 'text': 'And now we can close the link tag.', 'start': 1793.48, 'duration': 2.621}, {'end': 1800.803, 'text': 'if we save this, we come back to a page we can hit refresh.', 'start': 1796.101, 'duration': 4.702}, {'end': 1804.485, 'text': 'as you can see here, whatever selling we define in that external style sheet.', 'start': 1800.803, 'duration': 3.682}, {'end': 1806.326, 'text': 'It has now been applicable here.', 'start': 1804.525, 'duration': 1.801}], 'summary': 'The transcript discusses adding a text file in css format and locating the file in the same folder as an html file. the styling changes are saved in the css file and applied to the webpage.', 'duration': 49.076, 'max_score': 1757.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1757250.jpg'}, {'end': 1848.35, 'src': 'embed', 'start': 1820.026, 'weight': 3, 'content': [{'end': 1825.909, 'text': 'the same thing has been applicable here all through the concept for external style sheet, as we had a fine.', 'start': 1820.026, 'duration': 5.883}, {'end': 1828.371, 'text': 'Let me show you a simple thing.', 'start': 1827.23, 'duration': 1.141}, {'end': 1830.752, 'text': "Let's say we are placing we want to place a button.", 'start': 1828.591, 'duration': 2.161}, {'end': 1835.095, 'text': "Let's say we convert this link to a button instead of text.", 'start': 1831.433, 'duration': 3.662}, {'end': 1839.558, 'text': 'You want to stay a button here, right? So we can come back to home here.', 'start': 1835.115, 'duration': 4.443}, {'end': 1841.579, 'text': 'We have visit Google correct.', 'start': 1839.638, 'duration': 1.941}, {'end': 1848.35, 'text': 'So instead of this button, What we can do here we can insert this text.', 'start': 1842.32, 'duration': 6.03}], 'summary': 'Demonstration of converting a link to a button with a simple concept for external style sheet.', 'duration': 28.324, 'max_score': 1820.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1820026.jpg'}, {'end': 1867.768, 'src': 'heatmap', 'start': 1842.32, 'weight': 0.915, 'content': [{'end': 1848.35, 'text': 'So instead of this button, What we can do here we can insert this text.', 'start': 1842.32, 'duration': 6.03}, {'end': 1856.117, 'text': 'We can play something as a button and here we can Define a class for the button suppose as BTN.', 'start': 1848.39, 'duration': 7.727}, {'end': 1860.581, 'text': 'We can name the button as visit Google.', 'start': 1857.378, 'duration': 3.203}, {'end': 1864.284, 'text': 'Now if you save it we come back.', 'start': 1862.683, 'duration': 1.601}, {'end': 1867.768, 'text': 'We have to fetch we can see a plane button has been added here right now.', 'start': 1864.345, 'duration': 3.423}], 'summary': "Replaced button with text, added class 'btn', and created a plain button for 'visit google'.", 'duration': 25.448, 'max_score': 1842.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1842320.jpg'}, {'end': 2027.982, 'src': 'embed', 'start': 1999.843, 'weight': 4, 'content': [{'end': 2009.605, 'text': 'We had to find class button for the first button right and for Google and they find the class name as button one for a de rica button.', 'start': 1999.843, 'duration': 9.762}, {'end': 2017.9, 'text': 'So for button we want to have a background color of this one and here we can define button padding as suppose 10 pixel.', 'start': 2010.225, 'duration': 7.675}, {'end': 2027.982, 'text': 'And we want that whenever we hover over this button as in BTN colon hover so we can add a special effect for button hover.', 'start': 2019.34, 'duration': 8.642}], 'summary': "Defined class 'button' for google and added css styles like background color and padding.", 'duration': 28.139, 'max_score': 1999.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1999843.jpg'}, {'end': 2064.507, 'src': 'heatmap', 'start': 2034.483, 'weight': 0.778, 'content': [{'end': 2042.025, 'text': 'So we want that whenever we hover over the button, the background color should be changed, background color should be changed to support the sake.', 'start': 2034.483, 'duration': 7.542}, {'end': 2045.799, 'text': 'pure black, as in 6 times 0.', 'start': 2042.025, 'duration': 3.774}, {'end': 2046.159, 'text': "That's it.", 'start': 2045.799, 'duration': 0.36}, {'end': 2048.199, 'text': 'Nothing else would change.', 'start': 2047.28, 'duration': 0.919}, {'end': 2049.541, 'text': 'So here we can save it.', 'start': 2048.54, 'duration': 1.001}, {'end': 2054.623, 'text': 'So now if we come back we can see this is a selling apply to this button by default.', 'start': 2050.38, 'duration': 4.243}, {'end': 2056.944, 'text': 'This is having the entire styling defined.', 'start': 2054.643, 'duration': 2.301}, {'end': 2064.507, 'text': 'if you hover over this button here, as you can see here, the styling is automatically getting change here on our hover effect same thing.', 'start': 2056.944, 'duration': 7.563}], 'summary': 'Hover over button changes background to pure black, 6 times 0.', 'duration': 30.024, 'max_score': 2034.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU2034483.jpg'}], 'start': 1704.007, 'title': 'Styling html with css', 'summary': 'Covers linking external style sheets to html, including usage of link tag, file type and location definition, and applying styles with examples. it also discusses styling anchor tags for links, defining classes for buttons, setting background color and hover effects for distinct styling.', 'chapters': [{'end': 1894.97, 'start': 1704.007, 'title': 'Linking external style sheets', 'summary': 'Discusses how to link an external style sheet to an html document, including the use of the link tag, defining the file type and location, and applying styles to elements, with examples of applying the styles to the page.', 'duration': 190.963, 'highlights': ['The process of linking an external style sheet to an HTML document involves defining the relation as a style sheet, specifying the file type as text/CSS, and indicating the file source, such as its location in the same folder as the HTML file.', 'Applying styles to elements in the HTML document involves defining classes for specific elements, such as buttons, and then applying the defined styles to those elements.', 'The importance of linking an external style sheet is emphasized by demonstrating how changes made to the style sheet are immediately reflected in the HTML document upon refreshing the page.']}, {'end': 2112.551, 'start': 1896.711, 'title': 'Anchor tag styling for links', 'summary': 'Demonstrates how to style anchor tags for links, including defining different classes for different buttons, setting background color and hover effects, resulting in distinct styling for each button.', 'duration': 215.84, 'highlights': ['The chapter demonstrates how to style anchor tags for links, including defining different classes for different buttons. The speaker explains the process of using different classes to define styling for different buttons, enabling distinct visual representation for each button.', 'Setting background color and hover effects for the buttons. The speaker demonstrates setting background color and hover effects for the buttons, ensuring a visually distinct experience when interacting with the buttons.']}], 'duration': 408.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QMnv3QrjZoU/pics/QMnv3QrjZoU1704007.jpg', 'highlights': ['The process of linking an external style sheet to an HTML document involves defining the relation as a style sheet, specifying the file type as text/CSS, and indicating the file source, such as its location in the same folder as the HTML file.', 'Applying styles to elements in the HTML document involves defining classes for specific elements, such as buttons, and then applying the defined styles to those elements.', 'The importance of linking an external style sheet is emphasized by demonstrating how changes made to the style sheet are immediately reflected in the HTML document upon refreshing the page.', 'The chapter demonstrates how to style anchor tags for links, including defining different classes for different buttons.', 'Setting background color and hover effects for the buttons. The speaker demonstrates setting background color and hover effects for the buttons, ensuring a visually distinct experience when interacting with the buttons.']}], 'highlights': ['HTML is the building block for any website and is the main driver for web development, with websites built on three main core technologies: HTML, CSS, and JavaScript.', "The main agenda for today's session includes discussing the definition and usage of HTML, CSS, and creating a website using these components.", 'Neeraj Kheria, with over 13 years of experience in the IT industry, will lead the discussion on HTML and CSS for web development.', 'JS adds functionality to a website JS provides the functionality for web pages, such as form submission and updating content, making it a core component of any static website.', 'CSS styles pages CSS defines the styling of web pages, including elements like forms, text boxes, and images.', 'HTML defines elements in a web page HTML refers to hypertext markup language and defines the elements present on the web page.', 'Notepad++, Visual Studio Code, and Sublime Text are popular code editors available for both Windows and iOS, and are free of cost, providing flexibility for users to choose based on their comfort level and requirements.', 'Users can choose a code editor based on their comfort level and specific requirements, allowing for flexibility in the coding process.', 'The chapter recommends using specific file extensions such as .html for saving and working on files, providing organization and structure to the coding process.', 'Every HTML document starts with an HTML tag and necessitates the proper closure of tags for complete functionality.', 'The head section is highlighted as a common section for defining meta tags such as keywords, descriptions, and loading resources like style sheets and JavaScript files.', 'The body section is explained as the area where the actual content of the webpage is placed, encompassing all visible elements on the webpage.', 'Google search results are influenced by the use of middle name and middle tag for keywords and descriptions, impacting SEO optimization.', 'The meta tag for keywords and descriptions helps in ensuring the inclusion of the page in search results for specific keywords, such as travel, book hotels, and book flights.', "Defining meta tags like 'description' and providing relevant content helps search engines understand the page's content and purpose, aiding in SEO optimization.", 'The use of heading tags from h1 to h6 is demonstrated for organizing and hierarchizing content.', 'Examples of how to use the tags to subdivide main headings into subheadings are provided.', 'Demonstration of the hierarchy level of heading tags, such as using h2 for subdividing main headings into subheadings.', 'Explanation of how to structure content using heading tags, with examples of subdividing main headings into subheadings.', 'The importance of giving different weightage to different articles and headings is emphasized.', "The hierarchical structure of content on Wikipedia is illustrated using the example of India's page, including main headings like History and Geography, further subdivided into subsections. (e.g. history is subdivided into ancient, medieval, early modern, and modern India)", 'The chapter explains how to add and style HTML elements, including headers, paragraphs, and images, with practical examples and best practices.', 'It demonstrates how to set the size of an image in HTML using width and height attributes, with a specific example of restricting image width to 350 pixels.', 'It provides guidance on making images responsive by setting their width as a percentage of the container, ensuring they adjust to the available window size.', 'It shows how to add hyperlinks using anchor tags, specifying the link destination and opening the link in a new tab using the target attribute.', 'The concept of cascading style sheet (CSS) is briefly mentioned in relation to Wikipedia content. (e.g. CSS refers to cascading style sheet)', 'The chapter discusses the three methods of applying CSS styling: inline style, internal style sheet, and external style sheet, with emphasis on defining styles for elements and utilizing color values.', 'The internal style sheet method entails placing the style tag in the head section and defining styles for elements using selectors and declarations, allowing for consistent styling across multiple elements, like specifying the color of all h2 elements to be red.', 'The example demonstrates changing the font family and color using internal style sheets, with the font family being changed to Verdana and the color being modified using a hex code.', 'Various color values, including named colors and hexadecimal codes, are discussed for defining specific shades and tones in CSS styling, providing flexibility for customizing the appearance of elements.', 'The process of linking an external style sheet to an HTML document involves defining the relation as a style sheet, specifying the file type as text/CSS, and indicating the file source, such as its location in the same folder as the HTML file.', 'Applying styles to elements in the HTML document involves defining classes for specific elements, such as buttons, and then applying the defined styles to those elements.', 'The importance of linking an external style sheet is emphasized by demonstrating how changes made to the style sheet are immediately reflected in the HTML document upon refreshing the page.', 'The chapter demonstrates how to style anchor tags for links, including defining different classes for different buttons.', 'Setting background color and hover effects for the buttons. The speaker demonstrates setting background color and hover effects for the buttons, ensuring a visually distinct experience when interacting with the buttons.']}