{"id":841,"date":"2024-05-06T10:25:21","date_gmt":"2024-05-06T08:25:21","guid":{"rendered":"https:\/\/programmier-workshops.de\/blog\/?p=841"},"modified":"2024-05-12T10:03:28","modified_gmt":"2024-05-12T08:03:28","slug":"lesson-understanding-html","status":"publish","type":"post","link":"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/","title":{"rendered":"Lesson: Understanding HTML"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Introduction_to_HTML\" >Introduction to HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#What_Are_HTML_Tags\" >What Are HTML Tags?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Understanding_Attributes\" >Understanding Attributes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Common_HTML_Elements_and_Their_Uses\" >Common HTML Elements and Their Uses<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Welcome_to_My_Website\" >Welcome to My Website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Header_1\" >Header 1<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Header_2\" >Header 2<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Header_3\" >Header 3<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Header_4\" >Header 4<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Header_5\" >Header 5<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Header_6\" >Header 6<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/programmier-workshops.de\/blog\/lesson-understanding-html\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introduction_to_HTML\"><\/span>Introduction to HTML<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>HTML, which stands for Hypertext Markup Language, is the backbone of web development. It is a markup language used for creating and structuring sections, paragraphs, and links on web pages. Every web page you visit is built using HTML. It lays the groundwork for web design and web content, which can be further styled by CSS and made interactive with JavaScript.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Are_HTML_Tags\"><\/span>What Are HTML Tags?<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>HTML tags are the basic building blocks of HTML. They define and structure the content of a web page by enclosing different parts of the content to make it function in a certain way or to format it to look a specific way. Each tag is made up of elements surrounded by angle brackets, like <code>&lt;tagname&gt;content&lt;\/tagname&gt;<\/code>. Tags usually come in pairs, though some are self-closing.<\/p>\n\n\n\n<p>For example, the <code>&lt;p&gt;<\/code> tag is used to create a paragraph:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"false\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p>This is a paragraph in HTML.&lt;\/p><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Understanding_Attributes\"><\/span>Understanding Attributes<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Attributes provide additional information about HTML elements. They are always specified in the start tag and usually come in name\/value pairs like <code>name=\"value\"<\/code>. For example, to set the width of an image, you would write:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"false\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"image.jpg\" alt=\"Description of the image\" width=\"500\"><\/pre>\n\n\n\n<p>In this example, <code>src<\/code>, <code>alt<\/code>, and <code>width<\/code> are attributes of the <code>&lt;img&gt;<\/code> tag.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_HTML_Elements_and_Their_Uses\"><\/span>Common HTML Elements and Their Uses<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Let\u2019s look at a few fundamental HTML elements, their functions, and examples of how they are used:<\/p>\n\n\n\n<p><strong><code>&lt;!DOCTYPE html><\/code><\/strong> &#8211; Declares the document type and version of HTML.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"false\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html><\/pre>\n\n\n\n<p><strong><code>&lt;html><\/code><\/strong> &#8211; The root element that contains all other HTML elements.htmlCopy code<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"false\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html lang=\"en\">\n&lt;head>\n   &lt;!-- Head content goes here -->\n&lt;\/head>\n\n&lt;body>\n   &lt;!-- Body content goes here -->\n&lt;\/body>\n\n&lt;\/html><\/pre>\n\n\n\n<p id=\"head\"><strong><code>&lt;head><\/code><\/strong> &#8211; Contains meta-information about the HTML document.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;head>\n   &lt;title>Page Title&lt;\/title>\n&lt;\/head><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<head>\n   <title>Page Title<\/title>\n<\/head>\n<\/div>\n<\/div>\n\n\n\n<p id=\"lists\"><strong><code>&lt;ul><\/code>, <code>&lt;ol><\/code><\/strong>, and <strong><code>&lt;li><\/code><\/strong> &#8211; Define unordered (bulleted) and ordered (numbered) lists.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"false\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;ul>\n   &lt;li>First item&lt;\/li>\n   &lt;li>Second item&lt;\/li>\n&lt;\/ul><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul>\n   <li>First item<\/li>\n   <li>Second item<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<p id=\"title\"><strong><code>&lt;title><\/code><\/strong> &#8211; Specifies the title of the HTML document shown in the browser title bar.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;title>\n   This is the Title of the Page\n&lt;\/title><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<title>This is the Title of the Page<\/title>\n<\/div>\n<\/div>\n\n\n\n<p><strong><code>&lt;body><\/code><\/strong> &#8211; Contains the content of the HTML document.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body>\n   &lt;h1>Welcome to My Website&lt;\/h1>\n   &lt;p>This is a sample paragraph.&lt;\/p>\n&lt;\/body><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<body>\n<h1><span class=\"ez-toc-section\" id=\"Welcome_to_My_Website\"><\/span>Welcome to My Website<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>This is a sample paragraph.<\/p>\n<\/body>\n<\/div>\n<\/div>\n\n\n\n<p id=\"h1-h6\"><strong><code>&lt;h1> to &lt;h6><\/code><\/strong> &#8211; Defines HTML headings. <code>&lt;h1><\/code> is the highest and <code>&lt;h6><\/code> is the lowest.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1>Header 1&lt;\/h1>\n&lt;h2>Header 2&lt;\/h2>\n&lt;h3>Header 3&lt;\/h3>\n&lt;h4>Header 4&lt;\/h4>\n&lt;h5>Header 5&lt;\/h5>\n&lt;h6>Header 6&lt;\/h6>\n<\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h1><span class=\"ez-toc-section\" id=\"Header_1\"><\/span>Header 1<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<h2><span class=\"ez-toc-section\" id=\"Header_2\"><\/span>Header 2<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Header_3\"><\/span>Header 3<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h4><span class=\"ez-toc-section\" id=\"Header_4\"><\/span>Header 4<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h5><span class=\"ez-toc-section\" id=\"Header_5\"><\/span>Header 5<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<h6><span class=\"ez-toc-section\" id=\"Header_6\"><\/span>Header 6<span class=\"ez-toc-section-end\"><\/span><\/h6>\n<\/div>\n<\/div>\n\n\n\n<p id=\"link\"><strong><code>&lt;a><\/code><\/strong> &#8211; Defines a hyperlink, which is used to link from one page to another.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;a href=\"https:\/\/www.example.com\">Visit Example.com&lt;\/a><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<a href=\"https:\/\/www.example.com\">Visit Example.com<\/a>\n<\/div>\n<\/div>\n\n\n\n<p id=\"img\"><strong><code>&lt;img><\/code><\/strong> &#8211; Embeds an image into the document.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcRsubI1xnS2EsbFC7IKOtHXy3o2yp5zNGHX8-mLk-0nVw&amp;s\" alt=\"alternative text\"><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcRsubI1xnS2EsbFC7IKOtHXy3o2yp5zNGHX8-mLk-0nVw&#038;s\" alt=\"alternative text\">\n<\/div>\n<\/div>\n\n\n\n<p><strong><code>&lt;table><\/code>, <code>&lt;tr><\/code>, <code>&lt;th><\/code>, <code>&lt;td><\/code><\/strong> &#8211; Used to create and structure tables.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"false\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;table>\n   &lt;tr>\n      &lt;th>Header 1&lt;\/th>\n      &lt;th>Header 2&lt;\/th> \n   &lt;\/tr> \n   &lt;tr> \n      &lt;td>Data 1&lt;\/td>\n      &lt;td>Data 2&lt;\/td>\n   &lt;\/tr>\n&lt;\/table><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<table>\n   <tr>\n      <th>Header 1<\/th>\n      <th>Header 2<\/th> \n   <\/tr> \n   <tr> \n      <td>Data 1<\/td>\n      <td>Data 2<\/td>\n   <\/tr>\n<\/table>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Understanding HTML is crucial for anyone involved in web development or digital content creation. By mastering HTML, you can effectively communicate your ideas, layout your content, and work seamlessly with designers and developers. Whether you are creating a personal blog or a complex corporate website, HTML is the starting point of your web development journey.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>This blog post has provided a concise but comprehensive overview of HTML, its primary elements, and how these elements are used to structure and design web pages.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to HTML HTML, which stands for Hypertext Markup Language, is the backbone of web development. It is a markup language used for creating and structuring sections, paragraphs, and links on web pages. Every web page you visit is built using HTML. It lays the&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,11,3,33],"tags":[],"class_list":["post-841","post","type-post","status-publish","format-standard","hentry","category-coding4beginner","category-html","category-kurs","category-kurs-lesson"],"_links":{"self":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/comments?post=841"}],"version-history":[{"count":14,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/841\/revisions"}],"predecessor-version":[{"id":870,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/841\/revisions\/870"}],"wp:attachment":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/media?parent=841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/categories?post=841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/tags?post=841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}