Open CheatSheet Back To List Next Tutorial

HTML Introduction (Video Tutorial)

Video Timestamps
0:00 How to create a simple "Hello World" web page, and launch it locally on your computer. 1:28 HTML terms. 7:41 How to set up a web project. 8:42 How to structure a web page using semantic elements.

HTML Introduction

Hello World example

Create a simple "Hello World" web page

We will create a Hello World web page. All this will do is display a web page that says "Hello World". 

Prerequisites

  • A text editor such as Visual Studio Code.
  • A local web server such as the Live Server extension for VS Code.
  • A web browser like Chrome, Edge, Safari, or Firefox.

Steps

  • Create a folder called web-project in a convenient location such as the desktop.
  • Drag the folder into the VS Code application. This will open the app on the empty project.
  • Create a file in the project called index.html.
  • Enter !+tab in the empty index.html file. This is a built-in snippet that will generate the following skeleton HTML document:
<!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>Document</title>
  </head>
  <body>
    
  </body>
  </html>
  • Change the title content from "Document" to "Hello World".
  • Between the body tags, add an h1 heading tag with "Hello World" as it's content:
<body>
  <h1>Hello World</h1>
</body>

Launch the server:
  • If you have VS Code with the Live Server extension installed then right click anywhere on the page. 
  • A context menu will appear: Select Open With Live Server.
  • The web page should open in your default browser to http://127.0.0.1:5500. This is the IP address for the localhost (i.e., your computer). Live Server uses port 5500. The page should just display "Hello World" in big letters.

HTML Terms

Definitions:

  • HTML (Hypertext Markup Language): Defines the semantic structure of a web page document. 
    • "Hypertext" refers to clickable links that connect web pages to one another, either within a single website or between websites. 
    • "Markup" annotates text, images, and other content for display in a Web browser.
  • HTML5: The 5th and latest generation of HTML. It added numerous elements and functionality. The first draft was released in 2008, and was released as an official W3 Recommendation in Oct 2014. Most of its functionality was incorporated in browsers around 2012. It is not supported in IE8 or earlier.
  • Tags: HTML consists of elements marked by tags. Tags are surrounded by angle brackets. Examples of tags: <html>, <h1>, <p>, </h2>.
  • Elements: Everything from the start tag to the end tag. <p>This is a paragraph element</p>
  • Nested elements: Elements within other elements
  • Empty elements: Elements that are self contained and only have one tag. Most commonly used empty elements: br, hr, img, input, link, meta.
  • Attributes: Information about an element. Put in the opening tag in quotation marks. Double quotation marks are the convention but single quotes also work. Multiple attributes in the same element are separated by spaces.
    • Name-value pairs: Attributes come in name-value pairs formatted as name="value" 
    • Example: <p id="p-1" class="text-center">Some text</p> id and class are attributes of this paragraph element.

Elements and Attributes

Add more meta data:

<!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">
    <meta name="description" content="INSERT SITE DESCRIPTION HERE (158 Chars max)">
    <meta name="author" content="YOUR NAME HERE (optional)">
  
    <title>Hello World</title>
    <link href="path/to/stylesheet.css" rel="stylesheet">
</head>
  <body>
    <h1>Hello World</h1>
  </body>
  </html>

Elements explained
  • <!DOCTYPE html> Tells the browser this is an HTML5 webpage. Old browsers that do not support HTML5 will revert to HTML 4.
  • <html lang="en-US"> The root element of the HTML document. Set the lang attribute so that screen readers can announce the proper language.
  • <head> Contains meta information about the document and is not displayed by the browser.
  • <meta charset="UTF-8"> Tells the browser to use UTF-8 as the character encoding. UTF-8 is the dominant character set on the web and is able to display all languages consistently.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> The browser's viewport is the area of the window in which web content can be seen. Set this attribute for mobile browsers. Ref: MDN: Viewport_meta_tag
  • <meta name="description" content=""> Provide a brief summary of the web page content. Displayed as part of search engine results snippet. Google will cut off more than 158 characters (including spaces). Mobile devices cut off after 120 chars.
  • <title> Sets the title of the page. It is displayed on the browser tab, and as the bookmark title if the user bookmarks the page. It is also displayed in search engine results. Should be concise and informative. 
  • <link rel="stylesheet" href="style.css"> Link to an external stylesheet. Add the absolute or relative path to the stylesheet in the href attribute. The type attribute is not needed.
  • <body> Contains the content you want to display. Use this element for styles you want to apply across the whole page.

Add more content to the body:

<body>
    <h1>Hello World</h1>
    <p id="p-1" class="text-center">This is a paragraph element.</p>
    <p id="p-2" style="text-align: center;">This is the next paragraph element.</p>
  
    <hr>
    <div data-article-category="tech">Learn HTML</div>
    <form>
      <input name="title" required autofocus>
      <button onclick="alert('form submitted')">Submit Form</button>
    </form>
  </body>

  • Save the file, then view the changes in the browser.

Elements and attributes explained
  • Paragraph elements: <p> We added two paragraph elements that have id, class and style attributes. We'll cover what these attributes are later. 
  • Horizontal rule/line: <hr> adds a horizontal line across the page.
  • Data attributes: Create your own custom attribute with data- followed by whatever attribute name you want to use. In the above case we created a custom attribute named data-article-category set to "tech". 
  • Form Element with input and submit button: These will be covered in detail in the Forms category.
  • Boolean attributes: If a boolean attribute is present, its value is true. The default value is false, so if it is not present, it is false. In the example, the input element has two boolean attributes: 
    • <input name="title" required autofocus> the input field is required and the cursor is automatically focused on this element.
  • Onevent attributes: You can use onevent attributes to execute JavaScript code.
    • Common examples: onclick, onhover, onfocus, onblur, onsubmit, onload. 
    • Full list: MDN:GlobalEventHandlers
    • <button onclick="alert('Button clicked')">Click Me</button> When clicked, an alert is triggered.
    • Onevent attributes are generally not recommended to keep JS separate from HTML.


Site Layout: Blog Site example

We will create an example Blog web site in a series of tutorials, one for each category on this CheatSheet.

The code is available on GitHub: github.com/LearnByCheating/learn-html-blog-site-example

For the Layout category, we will create the project folder, add some basic directories and files, then add a page layout for the index and article pages.

Start by creating a directory called blog-site, and opening it with Visual Studio Code, or your preferred text editor.

File Structure

We will start by creating the project's file structure.
• blog-site folder
  • index.html file
    • sample-form.html file
  • stylesheets folder
    • styles.css stylesheet file
  • images folder
    • placeholder-x.png image file
  • articles folder
    • article-template.html file

  • In the project root, add two HTML files: index.html and sample-form.html.
  • Add a stylesheets folder and add a file called styles.css inside it.
  • Add an images folder. In the Blog Site example project there is an image file called placeholder-x.png inside it.
  • Add an articles folder. This will hold a separate html file for each article. For now add a file called article-template.html.

Page Layout

Now let's create the page layout for the index.html and articles/article-template.html files.
Paste the below content in the index and article-template files.

Home page layout

  • Index.html is the default file name for a web site, so this is the home page for the site. 
  • For now just put in placeholders for the various layout tags. 
  • The home page will highlight a few articles. 
  • Then it will list links to all the site's articles.
  • It also has an About section where you can include some information about yourself, your company, and/or the focus of your blogs.

index.html
<!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">
  <meta name="description" content="INSERT SITE DESCRIPTION HERE (158 Chars max)">
  <meta name="author" content="YOUR NAME HERE (optional)">
  <title>Blog Site</title>
  <!-- Favicon and stylesheet links go here -->
</head>
<body>
  <nav>Navigation Bar Here</nav>
  <main>
    <article>
      <h1>Highlighted Article title 1</h1>
      <p>Summary and link.</p> 
    </article>
    <article>
      <h3>Highlighted Article title 2</h3>
      <p>Summary and link.</p> 
    </article>
    <article>
      <h3>Highlighted Article title 3</h3>
      <p>Summary and link.</p> 
    </article>
    <article>
      <h3>Article title N</h3>
      <p>Summary and link.</p> 
    </article>
    <aside>
      <h4>About</h4>
      <p>About you, your business, and/or your blog content focus</p>
      <address>email: me@example.com</address>
    </aside>
  </main>
  <footer>Footer Here</footer> 
</body>
</html>

Article template page layout

  • The articles folder will hold separate files for each article. 
  • Articles-template.html is the template you can use for each article.
  • It has a nav bar at the top and a table of contents along the left side where you can put links to headings within the article.
  • The header contains the article title, author, date, and introduction.
  • There is a placeholder to include an image in the article.

articles/article-template.html
<!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">
  <meta name="description" content="INSERT ARTICLE DESCRIPTION HERE (158 Chars max)">
  <meta name="author" content="YOUR NAME HERE (optional)">
  <title>ARTICLE TITLE HERE</title>
  <!-- Favicon and stylesheet links go here -->
</head>
<body>
  <nav>Navigation Bar Here</nav>
  <article>
    <header>
      <h1>Article Title</h1>
      <p>Author, date, article introduction.</p> 
    </header>
    <main>
      <h2 id="topic-1">Article Topic 1</h2>
      <p>Put your topic summary here.</p>
      <h3 id="subtopic-1a">Subtopic 1A</h3>
      <p>Put your subtopic text here.</p>
      <h3 id="subtopic-1b">Subtopic 1B</h3>
      <p>
        Put your next subtopic text here.
      </p>
      <figure>
        <img src="../images/placeholder-x.png" alt="placeholder">
        <figcaption>Image Caption</figcaption>
      </figure>      
    </main>
    <nav>
      <h5>Table of Contents (sidebar)</h4>
      <ul>
        <li>Link to heading id "topic-1"</li>
        <li>Link to heading id "subtopic-1a"</li>
        <li>Link to heading id "subtopic-1b"</li>
      </ul>
    </nav>
  </article>
  <footer>Footer Here</footer>
</body>
</html>

To view the result, if you are using VS Code and have the Live Server extension installed:
  • Save the changes to the file.
  • Right click in the editor and select "Open with Live Server". It will open in your default web browser.
  • Note that we haven't added any CSS for styling so each element will be displayed using the browser's default styling for that element. So it looks very plain right now.


Semantic Elements

We used the below semantic elements for the page layouts. These are block elements, meaning they take up the whole line by default.

  • <header> Introductory content or navigational aids. May include a navigation bar, company logo, page heading. Some developers put the nav bar inside the the header element, while others don't. 
  • <nav> Navigation bar. Contains links to main pages and sections of your website. In the article page, a nav element contains a table of contents as a sidebar where you can put links to headings in the article.
  • <aside> Portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes. For our Blog Site, we'll use the aside element for our About content.
  • <main> The dominant content of the document. Directly relates to the main topic or function of the document or website.
  • <h1> thru < h6> Different levels of section headings. h1 heading is the highest level and contains our article title.
  • <p> Paragraph.
  • <section> A standalone section.
  • <article> Block of content that makes sense on its own. For our Blog site's home page, we'll use article elements to hold a summary of each blog post. The article template page puts the whole blog post content in an article element.
  • <address> For contact information (address, phone, email, website, etc.).
  • <figure> Optionally, put these tags around an image tag. Especially useful when combined with figcaption.
  • <figcaption> Put inside the figure tags and after the image tag to include a caption with your image.
  • <footer> footer content. You can put links to your social media, site copyright, and links to general pages for your site (e.g., about, contact, policy).

Now our Blog Site structure is set up, with minimal placeholder content in each layout semantic element.
Open CheatSheet Back To List Next Tutorial