Learn HTML in Five minutes

Demystifying Buzz Words

The Internet

The internet is just a global network of computers

Each computer/router has an IP address to uniquely identify them just like an actual address for your home.

These IP addresses are assigned by the ISP.

Computers talk to each other using the TCP/IP protocol.

HTTP runs over TCP. It's responsible for handling web traffic (request/response) between a browser (client) and a server.

DNS is used to map IP addresses to domain names.

HTML

HTML is a markup language used to create content on a web page.

HTML has no style hence the need for CSS.

HTML is extremely important for creating websites for it is the base for every web page.

CSS

CSS is a styling language

CSS is used to style the layout of a web page

What can I build with HTML and CSS?

• A Static Website
• The visual part of any website

A Deep Dive into HTML

Meta Tags

Snippets that describe a page's content. They are written in the head tag. They do not appear anywhere in the body of the web page.

Headings, Paragraphs & Typography

<h1>Heading 1</h1>

There are six heading <h1> to <h6>.

It is good practice to have just one h1 per page this will help with SEO as it describes the whole content of a page. For example, if it's a blog post, the blog title should be contained in the h1 tag.

Links and Images

<a href="https://google.com" target="_blank"> External link </a>

When linking to another website, it's good practice to open the link on a new window.

Snippet on displaying images below:

<img src="./illustrator.png" alt="Illustration of a Fox" width="450">

Lists

There are two kinds of lists.

• Unordered Lists

<ul>
  <li></li>
</ul>

• Ordered Lists

<ol>
  <li></li>
</ol>

• Nested Lists

<ul>
  <li>Shoes
    <ul>
      <li>Nike Air Max</li>
    </ul>
  </li>
</ul>

Tables

<table>

  <thead>
    <th>Email accounts</th>
  </thead>

  <tbody>
    <tr>
      <td>[e-mail]</td>
    </tr>
  </tbody>

</table>

Forms & Input

Forms can be displayed and styled with HTML and CSS respectively. However, in order to process the form, you need to code that functionality with a programming language that works on the backend (eg. PHP, Javascript, etc.)

   <form action="someScript.php">
       <div>
           <label for="name">Name </label> <br>
           <input type="text" name="name" id="name" placeholder="John Doe">
       </div>

       <div>
           <label for="email">Email</label> <br>
           <input type="email" name="email" id="email">
       </div>

       <div>
           <label for="message">Message</label> <br>
           <textarea name="message" id="message" cols="50" rows="5"></textarea>
       </div>

       <div>
       <label for="sex">Sex</label>
       <select name="sex" id="sex">
           <option value="male">Male</option>
           <option value="female">Female</option>
           <option value="female" selected >Other</option>
       </select>
       </div>

       <div>
           <label for="age">Age</label> <br>
           <input type="number" name="age" id="age">
       </div>

       <div>
           <label for="birthdate">Birthdate</label> <br>
           <input type="date" name="birthdate" id="birthdate">
       </div>

       <div>
           <label for="membership">Membership</label>
           <input type="radio" name="membership" value="starter" id="membership">Starter
           <input type="radio" name="membership" value="grow" id="membership">Grow
           <input type="radio" name="membership" value="scale" id="membership" checked>Scale
       </div>

       <div>
        <label for="hobbies">Hobbies</label>
        <input type="checkbox" name="hobbies" value="skating" id="hobbies">Skating
        <input type="checkbox" name="hobbies" value="playing-the-violin" id="hobbies">Playing the violin
        <input type="checkbox" name="hobbies" value="workouts" id="hobbies" checked>Workouts
    </div>
    <input type="submit" value="Submit">
    <button type="reset">Reset  </button>
   </form>

Block and Inline Level Elements

Inline elements only take up the full with of the element on that page. Allowing the next element to take up the available space that is unused. (eg. <a>, <span>)

Block-level elements span across the full width of the page and break the next element onto a new line. I there was an Inline element before it, it breaks itself onto a new line and does not take up the unused available space. (eg. <p>, <div>)

Divs, Spans, Classes and IDs

Div is used in creating division (or separation of affairs) in your code.
Spans are inline elements used to target specific text in code.

Classes vs IDs

There is no functional difference between classes and IDs. It is good practice to have your ID naming convention be singular. Do you need to give multiple elements the same style? Use classes. Would you have only one main header? Use IDs.

HTML Entities

• Non-breaking space: Gives an horizontal space  

• Greater than: >

• Less than: <

• Copyright: ©

• Euro: €

• Pound: £

HTML Semantic Tags

These are excellent for organizing your code since the name of the tags is quite descriptive. However, its main goal is accessibility. Writing semantic HTML code helps people with hearing/vision disabilities understand what goes where. They are quite important to use and should be used in place of <div> which carries no semantic meaning.

Some examples:
<header>
<footer>
<section>
<article>
<nav>