Basics and Boiler Plate Code

Starting from this point, each section will start with an exercise followed by a code walkthrough and explanation. After you've completed the exercise, try out the suggestions in the "Experiment with the code" section. Experimenting with the code will give you a deeper understanding of the functionality. This can be a highly effective way to learn programming languages. It allows you to actively engage with the material and put your skills into practice, making the learning experience more dynamic and effective. The exercises give you the opportunity to experiment and try things out on your own, building confidence and reinforcing your knowledge. Then, the code walkthrough and explanation provide context and insight into why certain code is written the way it is and how it fits into the bigger picture. This approach also encourages you to think critically and problem-solve, which are essential skills for any programmer. Each section will wrap up with a link to the companion website where you will find video(s) around the subject matter, code, and reference material. You can use this section for review and deeper dives as well as get help if you are stuck.


Exercise

  1. Create a new folder on your computer and name it "HTML"
  2. Open the folder in VSCode by selecting "File" -> "Open Folder" from the menu bar
  3. Select the folder that you created in step 1 from the file explorer and click "Open".
  4. In the left-hand side panel, right-click on the folder and click on "New File".
  5. Name the file "index.html".
  6. Type the following code into the editor window for the "index.html" file:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Web Page</title>
</head>
<body>

</body>
</html>
  1. Save.
  2. Open the "index.html" file with Google Chrome and you should see the following:

    3. Exercise 1 Result

Code Walkthrough and Explanation


index.html

This is a naming convention for the default file name of the main web page of a website. It is a common convention to name the main page of a website in this manner since many web servers are configured to automatically serve this file when a user visits the root directory of a website.

The index.html file contains the HTML code that defines the structure, content, and appearance of the web page. It is a plain text file that can be created and edited using a text editor, such as Notepad or Visual Studio Code.

When a user visits a website, their web browser sends a request to the web server for the index.html file. The web server then returns the contents of the index.html file to the browser, which renders it and displays the web page to the user.

In addition to index.html, websites can contain other HTML pages, images, stylesheets, scripts, and other types of files. These files can be referenced within the index.html file or other HTML pages to create a complete and functional website.


<!DOCTYPE html>

The <!DOCTYPE html> declaration is used to specify the document type and version of HTML being used in a web page. It is the first line of code in an HTML document and is important because it tells the web browser how to interpret the rest of the HTML code.

This declaration specifies that the document is written in HTML5, the latest version of HTML at the time of writing. This declaration is required for all HTML5 documents and helps ensure that the web page is rendered correctly across different web browsers.

It is important to note that the <!DOCTYPE html> declaration is not an HTML tag, but rather a document type declaration. It is used to specify the type of document and is not part of the actual content of the web page.


<html lang="en"> </html>

The <html lang="en"> element is an HTML tag used to specify the language of the content within an HTML document. The lang attribute is used to specify the language code, such as "en" for English, "fr" for French, "de" for German, etc.

The <html> tag is the root element of an HTML document and encapsulates all the other HTMl elements on a web page. By specifying the language of the content within the <html> tag, you can help ensure that the web page is rendered correctly and that the content is accessible to a global audience.

In Exercise 1, the lang atribute is set to "en" to indicate that the content of the web page is written in English. By specifying the language, web browsers and screen readers can use this information to render the content appropriately and provide accessibility support.

The <html> element is opening tag and has a corresponding closing tag - </html>. In HTML, opening and closing tags are used to define the structure and content of a web page. An opening tag consists of a less-than sign < followed by a tag name and a greater-than sign >. A closing tag consists of a less-than sign < followed by a forward slash / and the tag name, followed by a greater-than sign `>'.

The opening tag marks the beginning of an HTML element, and the closing tag marks the end of that element. The content between the opening and closing tags defines the content of that element.

Some HTML elements are self-closing, meaning they don't have a closing tag. These elements are defined with a forward slash before the greater-than sign /> at the end of the opening tag. We will see examples of these self-closing elements later on.

Opening and closing tags are an essential part of HTML and define the structure and content of a web page. They allow you to create and organize different elements, such as headings, paragraphs, images, and links, in a logical and meaningful way.


<head></head>

The <head> element in HTMl is a container for metadata (data that provides information about other data) about a web page. The content of the <head> element is not displayed directly on the web page, but it is used by web browsers and search engines to provide additional information about the web page.

The <head> element should be placed between the <html> tag and the <body> tag at the top of an HTML document. The <head> element can contain several different types of metadata including:



The information contained in the <head> element is used by web browsers, search engines, and other applications to understand the structure and content of the web page. By providing relevant metadata, you can improve the accessibility and search engine optimization (SEO) of your web page.


<meta charset="UTF-8">

The <meta charset="UTF-8"> tag is used to declare the character encoding of an HTML document. It tells the browser what character encoding to use to properly display the text content of the page. UTF-8 is a widely used character encoding that can represent all possible characters in the Unicode standard, making it a good choice for encoding multilingual text content on the web. By declaring the charset in the tag, it helps ensure that the browser renders the text content of the page correctly.


<meta http-equiv="X-UA-Compatible" content="IE=edge">

The HTML meta tag http-equiv attribute is used to specify an HTTP header for a page. The X-UA-Compatible header is a way for web developers to specify which version of Internet Explorer a webpage should be rendered as.

This meta tag instructs Internet Explorer to use the latest rendering engine available, rather than using compatibility mode to emulate older versions of Internet Explorer. The content attribute sets the value of the X-UA-Compatible header, and in this case, it is set to IE=edge, which means that the latest version of Internet Explorer should be used.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The <meta name="viewport" content="width=device-width, initial-scale=1.0"> is a meta tag in HTML that sets the viewport's width and initial zoom level on mobile devices. The viewport is the user's visible area of a web page, and it varies depending on the device's screen size and orientation.

The width=device-width parameter tells the browser to set the width of the viewport to the device's width in pixels. This means that the page will adjust its layout to fit the screen size of the device.

The initial-scale=1.0 parameter sets the initial zoom level when the page is first loaded. A value of 1.0 means that the page will be displayed at its default size without any zooming in or out.

Using the <meta name="viewport"> tag is important for creating a mobile-friendly website or web application that is optimized for various screen sizes and devices. It ensures that the content is properly displayed and easy to read on smaller screens such as smartphones and tablets.


Experiment with the Code


Video and Code References


Questions? Subscribe and ask in the video comments:



GitHub and Other References