HTML Practice Notes

Outline

  1. What is HTML?
  2. History of HTML
  3. How HTML works: Introduction to HTML
  4. HTML text editors
  5. Headings
  6. Paragraphs
  7. Text formatin
  8. Div
  9. Header
  10. Aside
  11. footer
  12. Intermediate html tags [tutorial]
  13.  
  14. Ordered list
  15. Unordered list
  16. Code
  17. Pre
  18. Forms
  19. Html input
  20. Text Inputs
  21. Radio input
  22. Submit button
  23. Blockquotes
  24. Video
  25. Audio
  26. Embed
  27. Canvas

What is html?

HTML is the short form for Hyper Text Markup Language. It helps us to display text, links, pictures, sounds and videos correctly on a webpage. Every time you visit a website through you should know that HTML is involved.

History of html

HTML was created by Tim Berners-Lee to share documents across the internet. It has evolved. You can now be able to share images, videos, and even play games on the internet.

How HTML works: Introduction to HTML.

HTML is used to describe the appearance of a document to be displayed by a internet browser.

HTML documents are normal text documents but with ‘.html‘ file name extension. Normal text files have a ‘.txt‘ file name extension.

When the HTML file is viewed on a browser, the browser interprets the HTML code is but does not display the html code itself.

To view the html code itself, you can right click on the webpage and click on view source.

To edit the HTML, you need to use a text editor.

HTML Text Editors

HTML text editors allow you to create and edit HTML files. There are many text editors you can use. Some of them are:

      1. Sublime text editor of my choice. Their upgrade notification might annoy you.
      2. Notepad++ (for windows only).
      3. Atom (for windows and Ubuntu).
      4. Visual Studio Code (for windows and Ubuntu).

You can read more about html text editors.

Html elements

Html element includes the opening tag, the closing tag and the content between the tags.

Html tags

These are tags used to tell the browser the beginning and the end of a HTML element.

Basic html elements and tags tutorial

1. Basic html page

They help divide your html into meaningful sections.

We have the basic template for each HTML page. Each HTML


 page usually has these tags.

 

<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
This is a basic HTML page.
</body>
</html>
This is a basic HTML page.

 

Anything that you want to be displayed on the HTML page is added between the body tags.

<iframe width=”500″  height=”300″ src=”https://scrimba.com/p/pZaVfV/cPydyur.embed”> </iframe>

HTML Text Tags

1. Headings

There are 6 type of heading with h1 being used as the title of the post or article for SEO purposes.

The rest can be used for headings and sub headings.

<h1>H1 Heading1</h1>
<h2>H2 Heading2</h2>
<h3>H3 Heading3</h3>
<h4>H4 Heading4</h4>
<h5>H4 Heading5</h5>
<h6>H6 Heading6</h6>

H1 Heading1

H2 Heading2

H3 Heading3

H4 Heading4

H4 Heading5
H6 Heading6

 

2. Paragraphs

This is used to display the normal text in paragraphs like the normal paragraph.

<p>This is a paragraph.</p>
<p>This is a second paragraph.</p>

This is a paragraph.

This is a second paragraph.

3. Line Break

The line break tag <br> breaks a line of text wherever it is inserted.

<p>The line break will be here<br>, and not here on a full line of text.</p>

The line break will be here
, and not here on a full line of text.

4. Bold & Strong

Both turns the text into bold but strong is concidered to have more meaning to search engines.

<b>Bolded text</b>

5. Italic & Emphasized

Both turns the text into italics but strong is concidered to have more meaning to search engines.

<i>Italized text</i>

<em>Emphasised</em> text

6. Underlined

Use this carefully so that the users don’t confuse them with links.

<u>Underlined text</u>

7. Ordered Lists

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
      1. Item 1
      2. Item 2
      3. Item 3

8. Unordered Lists

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
      • Item 1
      • Item 2
      • Item 3

11. Superscript

The word <sup>tags</sup> is superscript.
The word tags is superscript.

12. Subscript

The word <sup>tags</sup> is a subscript.
The word tags is a subscript.

13. Horizontal Line

Create a line that breaks the text.

<hr>

14. Marked or Highlighted Text

15. Deleted (Cross-Through) Text

<del> tags. </del>

16. Short & Long Quotations

<blockquote>All of this text will be in a blockquote like the rest of the examples.</blockquote>

<q>I’m quoting this story.</q>

17. Italics

The <i>dog ate my homework</i> is a commonly used lie.

18. Images

<img src=”https://learn.avicndugu.com/wp-content/uploads/2019/03/pet-dogs.jpg”>

pet dogs

Html Links

Links help you navigate from one page to the next web page or a different website.

The tag used to make links are the <a href=”URL”></a> tags.

The URL is the target, which page or website you want to go to.

Relative path

<img src=”/wp-content/uploads/2019/03/pet-dogs.jpg”>

Absolute path

Link that opens in a new tab/ window

Html comment tag

Html comment tags are used to add a comment in a html document. Anything inside the comment tag is not rendered on the browser but can be seen if you check the html source code.

<!– This is a comment that will not be visible –>

Creating your first html page

A

Html structure tags layout elements

Div

<div>

</div>

<nav>

</nav>

Header

<header>

Aside

<aside>

</aside>

footer

<footer>

</footer>

Intermediate html tags [tutorial]

Code

Pre

Forms

<form>
<input type="">
</form>

Html input types

Text Inputs

<form action="contacts.php">
<input type="text" name="firstname" placeholder="First Name">
</form>

Radio input

<form action="contacts.php">
<input type="radio" name="firstname" placeholder="First Name">
<input type="radio" name="firstname" placeholder="First Name">
</form>

Submit button

<form action="contacts.php">
<input type="submit" value="Submit">
</form>

OR

<form action="contacts.php">
<button type="submit">Submit</button>
</form>

You can read an in-depth article on HTML forms that I wrote.

QUOTES

Inline quotes

<p>When Dave asks HAL to open the pod bay door, HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>

Blockquotes

<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
<cite>– Aldous Huxley, Brave New World</cite>

Video

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Audio

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio

Embed

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1"
>

</iframe>
 

Canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>