HTML

ByAodha21

This story is a very light introduction to HTML, with a few basic details, to help you get started learning this critically important language of the World Wide Web. My most wanted response for this particular story is to inspire you to want to explore the Internet and learn how to use it in your own private free enterprise.

HTML, Hyper Text Markup Language, is the most basic language of the world wide web. Its the language that web pages are written in. Each web page is an HTML document.

HTML was first developed by Tim Berners Lee, Robert Cailliau and others, starting in 1989. The current version is HTML5.

Hypertext means the document contains links to other places, either within the current page or to another page or even another website. A markup language is a language that computers use to communicate with each other and to control how text is processed and presented.

Tags and attributes are the basic building blocks of HTML. Tags are used to markup an HTML element. They are usually contained within angle brackets. HTML attributes are parameters of HTML tags.

Very basic example of an HTML document

 <!DOCTYPE html>
 <html>

 <head>
   <title></title>
   <meta charset="UTF-8">
   <meta name="description" content="Info about your page">
   <meta name+"author" content="Bob Mccoy">
 </head>
 
 <body>
   the content of your webpage
 </body>
 
 <footer>
   other information like copyrights, disclaimers and other links, etc.
 </footer> 

 </html>

Tags

Most tags must be opened <tag> and closed </tag> and properly nested, as in

<strong><em>This is important!</em></strong>.

Create a heading using the <h1> tag. You can use <h1> through <h6> for a hierarchy of 6 different heading classes. <h1> is the highest class, <h2> and so on are lower ranking headings. Heading tags must be closed like so:

< h1>Heading</h1>.

<p>paragraph</p> is probably the most common tag.

All these tags must be closed with a closing tag.

 <b>bold</b>
 <strong>strong</strong>
 <i>italic</italic>
 <em>Emphasized text</em>, usually as image captions
 <mark>Marked text</mark>, highlight the text background.
 <small>small text</small>
 <strike>strike out text</strike>, places horizontal line through the text.
 <u>underlined text</u>
 <ins>inserted text</ins>, underlined to indicate inserted text.
 <sub>subscript</sub>
 <sup>superscript</sup>

Use an anchor tag to create links to another location within the webpage you are viewing or to another webpage or another website. 

<a href="http://homeoffice.studio">Holistic Home Office</a>

links to the front page of holistic home office at homeoffice.studio.

Images

In the image tag

<img src="myfamily.png" alt="My family photo."height="120" width="120">

img is the function, the tag; src and alt are the parameters, the attributes.

Lists

Ordered lists, list numbered items. Unordered lists, use a dot at the beginning of each list item. A definition list puts the list item and the definition of the list item on separate lines.

Ordered List

<ol>
 <li>List item</li>
 <li>List item</li>
 <li>List item</li>
</ol>

Unordered List

<ul>
 <li>List item</li>
 <li>List item</li>
 <li>List item</li>
</ul>

Definition List

<dl>
 <dt>List item</li>
  <dd><Definition>
 <dt>List item</li>
  <dd><Definition>
 <dt>List item</li>
  <dd><Definition>
</dl>

Tables

<table>
 <tr>
  <td>Row 1 - Column 1</td>
  <td>Row 1 - Column 2</td>
  <td>Row 1 - Column 3</td>
 </tr>
 <tr>
  <td>Row 2 - Column 1</td>
  <td>Row 2 - Column 2</td>
  <td>Row 2 - Column 3</td>
 </tr>
</table>

Produces a table with 2 rows, with 3 columns in each row.

Additional table tags

<thead></thead> table head
<tbody></tbody> table body
<tfoot></tfoot> table footer
<colgroup></colgroup> Column Group
<th></th> table header

HTML Editors

I recommend using Kate. You can also build your own Integrated Development Environment using Alacritty, Zsh, Tmux, NeoVim and Vifm. Get them all installed and configured and practice using them, every chance you get.

An excellent alternative system is to use the Kitty terminal. It runs on the GPU, which makes ity very fast, like Alacritty, and it has multiplexing tools builtin to it, so there is no need for Tmux. You can install and run the shell ZSH and NeoVim in either terminal.

If you really want a graphical editor, then I recommend Kdevelop. Microsoft’s Visual Studio Code is probably the most popular IDE right now, and it is a good one. I like Kdevelop and Qt Creator in keeping with my interest in KDE. There are many other high performance integrated development environments available.

Credits:

Notes from html.com.