<h2>Your Journey to Creating Your First Website Begins Here!</h2>
<p>Let's mark this as an important milestone: the creation of your first website! And what's a better way to start than with the traditional "Hello, World!"?</p>
<h3>Why "Hello, World!"?</h3>
<p>In the programming world, "Hello, World!" is more than just a phrase. It's a tradition, an emotion, a simple program that teaches you the syntax and gets you started. And guess what? HTML is no different!</p>
<p>Our first website will display the text 'Hello World'</p>
<h3>Let's Get Started: Setting Up Your VS Code</h3>
<p>If you haven't already set up your environment, let's begin by opening <a href="https://code.visualstudio.com/download" target="_blank" rel="noopener">Visual Studio Code (VS Code).</a></p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-document-structure/vs-code-open.png" alt="cwh tutorial image" width="630" height="340"></p>
<h4>Creating a New File</h4>
<p>Click on "Open Folder" and open a folder somewhere on your computer. I am opening a folder named html-tutorial</p>
<p>Once VS Code is open, you'll want to create a new file:</p>
<ol>
<li>Click on the "New File" icon in VS Code.</li>
<li>Type the filename as "index.html" and hit Enter.</li>
</ol>
<p><video style="width: 624px; height: 341px;" autoplay="autoplay" loop="loop" muted="" controls="controls" width="624" height="341"> <source src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-document-structure/2023-08-26 19-12-34.mp4" type="video/mp4"> Your browser does not support the video tag.</video></p>
<h4>Pasting the Code</h4>
<p>Now that your file is ready, copy the following code and paste it into your "index.html" file.</p>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    Hello World
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Going Live using the "live server" extension</h4>
<p>To see your webpage in action, locate the "Go Live" icon at the bottom-right corner of your VS Code window and click it. If you don't see this icon, you probably haven't installed the Live Server extension, which we discussed in a previous tutorial.</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-document-structure/vs-code-go-live.png" alt="cwh tutorial image" width="630"></p>
<h4>Your First Website is Live!</h4>
<p>Congratulations! If you've followed along, you should now see your very first website displaying the classic "Hello, World!" message.</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-document-structure/hello-world-html.png" alt="cwh tutorial image" width="622" height="402"></p>
<h2>Live Preview Extension</h2>
<p>Another useful extension for working with HTML in VS Code is 'HTML Preview.' To install it, simply click on the extensions icon in VS Code and type 'HTML Preview' in the search bar. Install it!</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-execution/preview-html-extension.png" alt="cwh tutorial image" width="630"></p>
<p>Now, you will see a button within VS Code. Clicking on this button will allow you to preview your HTML right within the editor.</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-execution/preview-button-live-html-preview.png" alt="cwh tutorial image" width="630"></p>
<p>Once you click the button, you'll see a live preview of your HTML directly within VS Code.</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-execution/live-preview-html-in-action.png" alt="cwh tutorial image" width="630"></p>
<p>You don't even need a browser to render plain HTML. This live preview feature in VS Code is perfect for this HTML tutorial, allowing you to build and preview your entire HTML website without ever leaving the editor.</p>

HTML Execution

<p>If you want to build a beautiful website, tags are essential elements that help you achieve that.</p>
<p>An HTML tag acts as a container for content or other HTML tags. Tags are words enclosed within <code>&lt;</code> and <code>&gt;</code> angle brackets.</p>
<p>They serve as keywords that instruct the web browser on how to format and display the content.</p>
<h2>Commonly used tags in HTML</h2>
<p>Here are some commonly used tags in HTML. These are the only tags used 70% of the time</p>
<h3>Document Structure Tags</h3>
<ol>
<li><code>&lt;!DOCTYPE html&gt;</code>: Specifies the document type.</li>
<li><code>&lt;html&gt;</code>: Encloses the entire HTML document.</li>
<li><code>&lt;head&gt;</code>: Contains meta-information and links to scripts and stylesheets.</li>
<li><code>&lt;body&gt;</code>: Contains the content of the web page.</li>
</ol>
<h3>Metadata Tags</h3>
<ol>
<li><code>&lt;title&gt;</code>: Sets the title of the web page.</li>
<li><code>&lt;meta&gt;</code>: Provides metadata such as character set, author, and viewport settings.</li>
<li><code>&lt;link&gt;</code>: Links external resources like stylesheets.</li>
</ol>
<h3>Text Formatting Tags</h3>
<ol>
<li><code>&lt;p&gt;</code>: Paragraph.</li>
<li><code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;h4&gt;</code>, <code>&lt;h5&gt;</code>, <code>&lt;h6&gt;</code>: Headings.</li>
<li><code>&lt;strong&gt;</code>: Strong emphasis (typically bold).</li>
<li><code>&lt;em&gt;</code>: Emphasis (typically italic).</li>
<li><code>&lt;br&gt;</code>: Line break.</li>
<li><code>&lt;hr&gt;</code>: Horizontal rule.</li>
</ol>
<h3>List Tags</h3>
<ol>
<li><code>&lt;ul&gt;</code>: Unordered list.</li>
<li><code>&lt;ol&gt;</code>: Ordered list.</li>
<li><code>&lt;li&gt;</code>: List item.</li>
</ol>
<h3>Hyperlink and Media Tags</h3>
<ol>
<li><code>&lt;a&gt;</code>: Anchor (used for links).</li>
<li><code>&lt;img&gt;</code>: Image.</li>
<li><code>&lt;audio&gt;</code>: Audio content.</li>
<li><code>&lt;video&gt;</code>: Video content.</li>
</ol>
<h3>Form Tags</h3>
<ol>
<li><code>&lt;form&gt;</code>: Form.</li>
<li><code>&lt;input&gt;</code>: Input field.</li>
<li><code>&lt;textarea&gt;</code>: Text area.</li>
<li><code>&lt;button&gt;</code>: Button.</li>
<li><code>&lt;select&gt;</code>: Dropdown list.</li>
<li><code>&lt;option&gt;</code>: Options within a <code>&lt;select&gt;</code> or <code>&lt;datalist&gt;</code>.</li>
</ol>
<h3>Table Tags</h3>
<ol>
<li><code>&lt;table&gt;</code>: Table.</li>
<li><code>&lt;tr&gt;</code>: Table row.</li>
<li><code>&lt;td&gt;</code>: Table data cell.</li>
<li><code>&lt;th&gt;</code>: Table header cell.</li>
<li><code>&lt;thead&gt;</code>: Table header group.</li>
<li><code>&lt;tbody&gt;</code>: Table body group.</li>
<li><code>&lt;tfoot&gt;</code>: Table footer group.</li>
</ol>
<h3>Semantic Tags</h3>
<ol>
<li><code>&lt;header&gt;</code>: Header section.</li>
<li><code>&lt;footer&gt;</code>: Footer section.</li>
<li><code>&lt;article&gt;</code>: Article.</li>
<li><code>&lt;section&gt;</code>: Section.</li>
<li><code>&lt;nav&gt;</code>: Navigation.</li>
<li><code>&lt;aside&gt;</code>: Sidebar content.</li>
</ol>
<h2>Paired and Unpaired HTML Tags</h2>
<p>Well, that was a really long list. Don't worry we will study these in detail. In HTML, tags can be broadly categorized into two types:</p>
<h3>1. Paired Tags (Container Tags)</h3>
<p>These are tags that come in pairs, consisting of an opening tag and a corresponding closing tag. The content goes between these two tags.</p>
<ul>
<li><strong>Opening Tag</strong>: The opening tag starts with <code>&lt;</code> and ends with <code>&gt;</code>. For example, <code>&lt;p&gt;</code>.</li>
<li><strong>Closing Tag</strong>: The closing tag also starts with <code>&lt;</code> but includes a forward slash <code>/</code> before the tag name, and ends with <code>&gt;</code>. For example, <code>&lt;/p&gt;</code>.</li>
</ul>
<h4>Examples:</h4>
<ul>
<li>Paragraphs: <code>&lt;p&gt;This is a paragraph.&lt;/p&gt;</code></li>
<li>Headings: <code>&lt;h1&gt;This is a heading.&lt;/h1&gt;&nbsp;</code></li>
</ul>
<h3>2. Unpaired Tags (Self-Closing Tags or Stand-Alone Tags)</h3>
<p>These are tags that don't require a closing tag. They are self-contained, encapsulating all the information within a single tag.</p>
<ul>
<li><strong>Self-Closing Tag</strong>: A self-closing tag starts with <code>&lt;</code> and ends with <code>/&gt;</code> (though the <code>/</code> is optional in HTML5). For example, <code>&lt;img /&gt;</code> or <code>&lt;br&gt;</code>.</li>
</ul>
<p><strong>Note:</strong> Later if you happen to use react or a framework like Next.js, you will have to close the tag like this &lt;br/&gt; &lt;hr/&gt;. So it is better to cultivate the habit!</p>
<h4>Examples of self-closing tags:</h4>
<ul>
<li>Line Break: <code>&lt;br/&gt;</code></li>
<li>Horizontal Rule: <code>&lt;hr/&gt;</code></li>
<li>Image: <code>&lt;img src="image.jpg" alt="An example image"/&gt;</code></li>
</ul>
<h2>Pictorial Representation of Tags</h2>
<p>The image below offers a visual representation of how tags are structured in HTML. As you can see, an element can contain other elements, which may also contain additional elements, forming a tree-like structure. This hierarchy can include self-closing tags as well as nested tags, as illustrated in the picture</p>
<center><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-tags/representation-of-html-tags.png" alt="cwh tutorial image" width="630"></center>

HTML Tags

<p>An HTML document is structured using a set of nested tags. Each tag is enclosed within&nbsp;<code>&lt;&hellip;&gt;</code> angle brackets and acts as a container for content or other HTML tags. Let's take a look at a basic HTML document structure:</p>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;!-- content --&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>This is how the title appears on an HTML page:</p>
<p><video style="width: 681px; height: 379px;" autoplay="autoplay" loop="loop" muted="" controls="controls" width="681" height="379"> <source src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-page-structure/title.mp4" type="video/mp4">Your browser does not support the video tag.</video></p>
<p style="text-align: left;">A typical HTML page looks like this:</p>
<div class="" style="width: 99%; border: 1px solid grey; padding: 3px 3px 3px 43px; margin: 10px 36px;">&lt;html&gt;
<div style="width: 90%; border: 1px solid grey; padding: 3px; margin: 20px;">&lt;head&gt;
<div style="width: 90%; border: 1px solid grey; padding: 5px; margin: 20px;">&lt;title&gt;Page title&lt;/title&gt;</div>
&lt;/head&gt;</div>
<div class="ws-grey" style="width: 90%; border: 1px solid grey; padding: 3px; margin: 20px;">&lt;body&gt;
<div class="w3-white" style="width: 90%; border: 1px solid grey; padding: 3px; margin: 20px;">
<div style="width: 90%; border: 1px solid grey; padding: 5px; margin: 20px;">&lt;h1&gt;This is a heading&lt;/h1&gt;</div>
<div style="width: 90%; border: 1px solid grey; padding: 5px; margin: 20px;">&lt;p&gt;This is a paragraph.&lt;/p&gt;</div>
<div style="width: 90%; border: 1px solid grey; padding: 5px; margin: 20px;">&lt;p&gt;This is another paragraph.&lt;/p&gt;</div>
</div>
&lt;/body&gt;</div>
&lt;/html&gt;</div>
<p>Almost every website uses this structure. The main content goes inside the body tag. No worries if this looks complicated; let's break it down!</p>
<p><strong>Note:</strong> These are the essential elements for a basic HTML document:&nbsp;<strong><code>&lt;!DOCTYPE html&gt;</code>, <code>&lt;html&gt;</code>, <code>&lt;head&gt;</code>, <code>&lt;title&gt;</code>, <code>&lt;/head&gt;</code>, <code>&lt;body&gt;</code>, <code>&lt;/body&gt;</code>, <code>&lt;/html&gt;</code></strong></p>
<h3>DOCTYPE Declaration</h3>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;</code></pre>
<p>The <code>&lt;!DOCTYPE html&gt;</code> declaration informs the web browser about the HTML version being used. The latest version is HTML5. But if this changes in the future (maybe 10 years down the line), the doctype declaration will be helpful!</p>
<h3>HTML Root Element</h3>
<pre class="language-markup"><code>&lt;html&gt;</code></pre>
<p>The <code>&lt;html&gt;</code> tag is the root element that encapsulates all the content on the page.</p>
<pre class="language-markup"><code>&lt;/html&gt;</code></pre>
<p>The&nbsp;<code>&lt;/html&gt;</code> tag marks the end of the <code>&lt;html&gt;</code> section.</p>
<h3>Head Section</h3>
<pre class="language-markup"><code>&lt;head&gt;</code></pre>
<p>The <code>&lt;head&gt;</code> tag contains metadata and links to external resources like CSS and JavaScript files.</p>
<pre class="language-markup"><code>&lt;/head&gt;</code></pre>
<p>The <code>&lt;/head&gt;</code> tag marks the end of the <code>&lt;head&gt;</code> section.</p>
<h3>Title Tag</h3>
<pre class="language-markup"><code>&lt;title&gt;Document&lt;/title&gt;</code></pre>
<p>The <code>&lt;title&gt;</code> tag sets the title of the web page, which is displayed in the browser's title bar or tab.</p>
<h3>Body Tag</h3>
<pre class="language-markup"><code>&lt;body&gt;</code></pre>
<p>The <code>&lt;body&gt;</code> tag contains the visible content of the web page. This is where text, images, and other elements go.</p>
<pre class="language-markup"><code>&lt;/body&gt;</code></pre>
<p>The <code>&lt;/body&gt;</code> tag marks the end of the visible content of the web page.</p>
<p>Every HTML page should include at least these essential elements to define the basic layout. In upcoming tutorials, we'll dive deeper into the fascinating world of HTML.</p>
<h2>Summary</h2>
<ul>
<li>The <code>&lt;!DOCTYPE html&gt;</code> tag specifies that the document is an HTML5 document.</li>
<li>The <code>&lt;html lang="en"&gt;</code> tag defines the document to be in English.</li>
<li>The <code>&lt;head&gt;</code> section contains metadata and the title of the webpage, which appears in the browser's title bar.</li>
<li>The <code>&lt;body&gt;</code> section contains the content that will be displayed on the webpage.</li>
<li>The h1 and p are two types of tags. We will learn about more tags in the later section</li>
</ul>
<h3><strong>Visualization of an HTML Document:</strong></h3>
<p>The following image provides a visual representation of the HTML structure:</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-page-structure/html-tag-structure-image.png" alt="cwh tutorial image" width="630"></p>
<h3><strong>How This Content Appears in a Web Browser:</strong></h3>
<p>Consider this html code:</p>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt; This is a heading&lt;/h1&gt;
    &lt;p&gt;This is a paragraph&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>Below is an image showing how this HTML document will be rendered in a web browser:</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/html-page-structure/html-headings.png" alt="cwh tutorial image" width="486" height="233"></p>
<p>In the browser, the title bar will display the content from the <code>&lt;head&gt;</code> section, specifically the <code>&lt;title&gt;</code> tag. The main area of the browser window (usually a white background) will display the content inside the <code>&lt;body&gt;</code> tag.</p>
<p>In the upcoming sections, we will learn about html tags and elements.&nbsp;</p>

HTML Page Structure