MH Integrity

# Lesson 3 HTML Getting Started

# Web Page Construction

Web browsers like Chrome and Firefox take a set of computer files that it downloads over the web and presents them to the user as the websites we see and use very day. To start with we will be learning about a few types of these files starting with HTML (Hypertext Markup Language).

  • HTML: Hypertext Markup Language (HTML) is the code that you use to structure your web content and give it meaning and purpose. For example, is my content a set of paragraphs or a list of bullet points? Do I have images inserted on my page? Do I have a data table?
  • CSS: Cascading Stylesheets (CSS) is the code that you use to style your website. For example, do you want the text to be black or red? Where should content be drawn on the screen? What background images and colors should be used to decorate your website?
  • JavaScript: JavaScript is the programming language that you use to add interactive features to your website. Some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more.

# What is HTML?

HTML are simple text files. These text files are interpreted by your browser to look and act based on rules. We are going to learn how those rules work. HTML is a simple language made up of elements, which can be applied to pieces of text to give meaning.

  1. Create a new folder and GIT repo for lesson03
  2. Create a new file named "myfirstpage.html"
    • It is important that our file ends with the extension .html or htm, this tells the computer what kind of file it is.
    • HTML describes the structure of Web pages using markup commands
    • HTML elements are the building blocks of HTML pages
    • HTML elements are represented by tags
    • HTML tags label pieces of content such as "heading", "paragraph", "table", it structures a page into locical content, "navigation menu", "main content column"
    • HTML Tag anatomy <TagName> The Tag name is surrounded by angle brackets.
    • Some Tag's affect text content, so the tags come in pair's.
    • <tagname>content goes here</tagname>
    • tags are case insensitive, best practice is to write all tags in lowercase for consistency.

Anatomy of an HTML element My cat is very grumpy

  1. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the start of the paragraph is.
  2. The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the end of the paragraph is. Failing to include a closing tag is a common beginner error and can lead to strange results.
  3. The content: This is the content of the element, which in this case is just text.
  4. The element: The opening tag plus the closing tag plus the content equals the element.

Demo Tags

Tag (element) Description
<h1><\h1> Heading1
<h2><\h2> Heading2
<b><\b> Bold
<img src="image.png"> Image
<a href="https://mhintegrity.com">Text for the Hyperlink</a> Hyperlink

Demo Anatomy of a HTML Page Structure

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>
<body>

</body>
</html>
Tag (element) Description
<!DOCTYPE html> This tells the browser that the file is HTML5
<html><\html> This element wraps all the content on the entire page
<head><\head> This element contains all the content that is not to be shown
<meta charset="utf-8"> Sets the character set your document should use
<body><\body> This element conatins all the content that you want to show

# Attributes

Elements can also have attributes, which look like this: My cat is very grmpy An attribute should have:

  1. A space between it and the element name (or the previous attribute, if the element already has one or more attributes.)
  2. The attribute name, followed by an equals sign.
  3. An attribute value, with opening and closing quote marks wrapped around it.

<a> this stands for "anchor", wraps a piece of text into a hyperlink. Attribute list.

  • href: This attribute specifies as its value the web address that you want the link to point to; where the browser navigates to when the link is clicked. For example, href="https://www.mhintegrity.com/".
  • title: The title attribute specifies extra information about the link, such as what the page is that you are linking to. For example, title="The Mozilla homepage". This will appear as a tooltip when hovered over.
  • target: The target attribute specifies the browsing context which will be used to display the link. For example, target="_blank" will display the link in a new tab. If you want to display the link in the current tab just omit this attribute.
  • Single or Double quotes: using single ' or double " quotes for attributes is a style choice.

# Special Characters

There are some characters that need to be replaced with alternatives.

Literal character Character equivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

To implement such semantic mark up, HTML provides dedicated tags (elements) that you can use to represent such sections, for example:

  • header: <header>.
  • navigation bar: <nav>.
  • <main>, with various content subsections. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn't be nested within other elements.
    • <article> encloses a block of related content that makes sense on its own without the rest of the page (e.g. a single blog post.)
    • <section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g. a mini map, or a set of article headlines and summaries.) It's considered best practice to begin each section with a heading; also note that you can break <article>s up into different <section>s, or <section>s up into different <article>s, depending on the context.
    • Additional non-semantic elements
      • <div> Group a set of elements together to affect them all as a single entity with some CSS or JavaScript.
      • <span> is like div except span in in-line.
    • <aside>; often placed inside <main>.
    • footer: <footer>

The key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS.
Next Lesson we will take our structured HTML and control the way is looks, its layout with CSS.

# Demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My page title</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blogs</a></li>
      </ul>

       <!-- A Search form is another commmon non-linear way to navigate through a website. -->

     </nav>

    <!-- Here is our page's main content -->
    <main>

      <!-- It contains an article -->
      <article>
        <h2>Article heading</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h3>subsection</h3>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">In the West of Washington</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>

    </main>

    <!-- And here is our main footer that is used across all the pages of our website -->

    <footer>
      <p>©Copyright 2018 by Me. All rights reversed.</p>
    </footer>

  </body>
</html>

# Assignment due before next class

  • This assignment counts for your grade
  • create a new repo called lesson03
  • In that repo create one html page called index.html
  • Format the html page correctly, create your own article of your own content. Make sure to use each 1+ of the following semantic tags:
    • main, article, section, paragraph
  • Also show use of the following elements (tags)
    • hyperlink, image, bold
  • push your repo to your github account.
  • Make sure your teacher knows your account so that he can view it before next class.

# Extra resources

  • All class demo's have been removed and will be replaced with screenshot videos soon.
    • 32 Minutes Long
    • 161 MB Size
    • Resolution: HD 1080p

# Next Lesson

Lesson 4 Introduction to CSS