Introduction to HTML – Hyper Text Markup Language

HTML is the basic code that the author writes to tell website browsers (Microsoft Edge, Google Chrome, etc.) what text/images/links to display.

HTML practice using Microsoft notepad text editor screen capture
HTML practice using Microsoft notepad text editor screen capture
  • Practice writing HTML with notepad:

You can easily practice HTML with a Microsoft based computer by opening up notepad, and typing something like what you see in this screen shot.

  • Save your written HTML so that you can use a browser to view it like a webpage.

After saving the file (I saved it as Example page.html) you can open it with a browser to see how it will look when people use the same browser to open a page written with the same HTML text.

If you are visiting a page, and want to see HTML and other coding used to design it, you can…

  • Right mouse click on part of the page.
  • Click the “Inspect” option of the window that pops up, to get the coding text used to build the page.



I just bought this HTML/CSS/JavaScript book for my Kindle. It has good reviews. As an amazon affiliate, I may earn from qualifying purchases after the clicking of this ad.

Tags

While writing HTML, you will have a lot of letters and words in angle brackets. The combination is called a tag.

  • These tags do not show up on the webpage that is being viewed by the visitor. They help tell the webpage what to display and how to display it.
  • I used different coding to let tags be displayed on this page.

I type these into the HTML document so that the browser displays angled brackets…

  1. &lt; displays a <
  2. &gt; displays a >

<p></p>

Was written as… (look for the p and /p)

&lt;p&gt;&lt;/p&gt;

 

Single tag:

  • <!DOCTYPE html> – First tag of a html document to let the browser know it is an html document.

That’s the first tag on the page. It lets the browser know that it is an html document.

  • <html lang=”en”> – Nestled (inserted) in the head tags. Lets the browser search engines know the page is written in English.

Container tag (Elements):

Has a starting tag (<p>) and an ending tag (</p>). The ending tag is the same as the starting tag but with an added forward slash. There will be other stuff, possibly other elements, within those tags.

  • <html></html> – Added after !DOCTYPE html, contains everything that is part of the webpage, including the following….
  • <head></head> – Contains a lot of page related stuff that may or may not affect the appearance of how the browser shows the page. Many webpage building software programs commonly used by beginners take care of this for you.
  • <title></title> – Nestled in the head element, contains text (only) that is shown in the browser tab and other places.
  • <body></body> – Added after the head. The body contains the information of the page that will be viewed by someone visiting the webpage.

Adding Headers

HTML has 6 tab headers which are used to display enlarged text of your choosing. They are used to help organize a page.

The table of contents at the top of my web pages automatically lists the headers I add to the page. It arranges them based on whether they are H1, H2, H3, H4, H5, or H6 headers. I use a WordPress plug in to automatically add the table of contents to my pages.

  • I show how the browser displays the tag, followed by the way I wrote the tag for the browser to read it.

H1

Was made with the following…

<h1>H1</h1>


H2

<h2>H2</h2>


H3

<h3>H3</h3>


H4

<h4>H4</h4>


H5

<h5>H5</h5>


H6

<h6>H6</h6>


Usually I center my headers. I just click the appropriate button added to the WordPress Visual tab, but it adds the following code which would need to be typed out if you are adding your own text.

Align Centered H3

<h3 style=”text-align: center;”>Align Centered H3</h3>

Please note that align is actually CSS, not HTML. 


Items can also be aligned right.

Aligned right H4

<h4 style=”text-align: right;”>Aligned right H4</h4>


And although text is aligned left by default, you can still add the code to do so.

Aligned Left H5 Header Text

<h5 style=”text-align: left;”>Aligned Left H5 Header Text</h5>


Paragraph Tag <p></p>

This is a paragraph

Written as…

<p>This is a paragraph</p>

To make the page display the brackets for this page I had to write the following…

&lt;p&gt;This is a paragraph&lt;/p&gt;

  • A paragraph is basic text like that shown right below the “Paragraph<p></p>” H2 header.
  • Below “This is a paragraph” is the proper way to tell the browser to display that text by putting it between the <p></p> (opening and closing) brackets. However, the browser should also display the text just like that if you just write it in without the <p></p> brackets.
  • Below that is the code needed to display <p>This is a paragraph</p> to the browser. The browser removes the <p></p> when typed directly as text.

Strike through:

This is no longer important.

Was made with…

<del>This is no longer important.</del>

or …

This is no longer true.

was written as

<s>This is no longer true.</s>


Small element/tag

Additional information that doesn’t need to stand out as much.

Was written as…

<small>Additional information that doesn’t need to stand out as much.</small>


<hr />

&lt;hr /&gt;

  • The text (<hr />) below the horizontal line shown above was used to display the horizontal line itself.
  • Below that text, is the text needed to display the coding text to the browser without the brackets being removed by the browser.

I’m not going to display the added text needed to have your browser show the brackets anymore. 

More Formatting Elements Examples:

Screen shot of some HTML Formatting elements that I typed out in notepad, saved as an .html file, and then opened up with Google Chrome in incognito mode. Actual file location removed.

Common HTML Formatting elements examples
Common HTML Formatting elements examples

Links <a> hyperlinks

Click here to open Electronzap main page in a new tab

HTML that made that link…

<a href=”https://www.electronzap.com/” target=”_blank”>Click here to open Electronzap main page in a new tab</a>

  • a tag = hyperlink.
  • href=” ” is the link definition.
  • Between <a ….> and </a> is the link text that will be displayed by the browser.

Where link opens at.

    • _blank – New tab.
    • _self – Same tab currently being viewed.
    • _parent – In parent frame.
    • _top – Full body of the window.

Button link:

HTML I used to make the button link above. It opens this page again.

<a href=”https://electronzap.com/introduction-to-html-hyper-text-markup-language/” target=”_blank” rel=”noopener”><button>Introduction to HTML &amp;#8211; Hyper Text Markup Language</button></a>

  • All I did was take the code of a link  I had WordPress make for me, and I added <button> after everything in the <a…> tab, and then </button> right before </a>
  • rel=”noopener is automatically added to links that open in a new tab while using WordPress (which is what I usually use) to create them. It helps with security and should not should not cause any problems. A topic not covered further on this site.

Lists – Unordered – Ordered

Unordered <ul> list items <li>

  • First unordered item indicated by a bullet point dot.
  • Second unordered item indicated by a bullet point dot.
  • You can keep adding as many items as you want…

How that looks in HTML….

<ul>
<li>First unordered item indicated by a bullet point dot.</li>
<li>Second unordered item indicated by a bullet point dot.</li>
<li>You can keep adding as many items as you want…</li>
</ul>


Ordered <ol> list items <li>

  1. First ordered item in a list.
  2. Second ordered item in a list.
  3. You can keep adding as many items as you want…

How that looks in HTML

<ol>
<li>First ordered item in a list.</li>
<li>Second ordered item in a list.</li>
<li>You can keep adding as many items as you want…</li>
</ol>


Table

Items: Color: Size:
Item 1 Red Large
Item 2 Green Medium
Item 3 Blue Small

Below is the HTML used to create the table above… Keep in mind that you can copy code like this, rename things to what you want, while also adding or removing columns (up/down) and rows (left/right) as desired.

<table>
<tbody>
<tr>
<th>Items:</th>
<th>Color:</th>
<th>Size:</th>
</tr>
<tr>
<td>Item 1</td>
<td>Red</td>
<td>Large</td>
</tr>
<tr>
<td>Item 2</td>
<td>Green</td>
<td>Medium</td>
</tr>
<tr>
<td>Item 3</td>
<td>Blue</td>
<td>Small</td>
</tr>
</tbody>
</table>


Description list <dl>, terms <dt>, description <dd> elements

HTML:
Adds basic text, images, links etc. to be viewed by a browser.
CSS:
Modifies the appearance of HTML content.
Javascript:
Adds complex features.

HTML used above

<dl>
<dt>HTML:</dt>
<dd>Adds basic text, images, links etc. to be viewed by a browser.</dd>
<dt>CSS:</dt>
<dd>Modifies the appearance of HTML content.</dd>
<dt>Javascript:</dt>
<dd>Adds complex features.</dd>
</dl>

Contenteditable (content editable)

Actually click the following line and start typing.

Click this line to edit it.

<p contenteditable=”true”>Click this line to edit it.</p>

Editable list:

  • Click this line to edit it.
  • Click this line to edit it.
  • Click this line to edit it.

<ul contenteditable=”true”>
<li>Click this line to edit it.</li>
<li>Click this line to edit it.</li>
<li>Click this line to edit it.</li>
</ul>

 Abbr element (Abbreviation)

Hold the mouse over the abbreviation to see what words it stands for.

html

Was made with…

<abbr title=”HyperText Markup Language”>html</abbr>

CSS

Was made with…

<abbr title=”Cascading Style Sheets”>CSS</abbr>

Iframe

Iframe can easily insert other documents directly into the page as shown below. I added the main page of this website below.

<iframe src=”https://electronzap.com/introduction-to-html-hyper-text-markup-language/”></iframe>

Size and width can be easily adjusted as shown below. And it is good to add a title.

Was made with

<iframe src=”https://electronzap.com/introduction-to-html-hyper-text-markup-language/” height=”400″ width=”600″ title=”My main page added to this page”></iframe>


<pre>

This is preformatted

<pre>This is preformatted</pre>

Also (probably added later)

  • sub
  • sup

More examples of HTML tags are going to be added later!


Inline CSS (bonus material)

CSS is commonly used to modify how each type of HTML element (<h1></h1> , <p></P> , etc.) is displayed throughout a page. This is known as either internal or embedded CSS.

Inline CSS however, specifically modifies an individual element. So I think it is good to start learning it while learning HTML.

Color:

This paragraph is green.

<span style=”color: #008000;”>This paragraph is green.</span>


This paragraph is red.

<span style=”color: #ff0000;”>This paragraph is red.</span>


You can make part of the text blue in this way.

<p>You can make <span style=”color: blue;”> part of the text blue</span> in this way.</p>


Or make the text brown like this.

<p style=”color: brown;”>Or make the text brown like this.</p>


Another way to make brown text.

<span style=”color: #993300;”>Another way to make brown text.</span>

Also changing size, font and aligned to the center:

Green, larger, italic font and aligned center.

<p style=”color: #009900; font-size: 30px; font-style: italic; text-align: center;”>Green, larger, italic font and aligned center.</p>


Plus a border:

Green, larger text, italic font and aligned center.

<p style=”color: #009900; font-size: 30px; font-style: italic; text-align: center; border: 5px solid gray;”>Green, larger text, italic font and aligned center.</p>

Modified again:

(compared to example above…)

Blue, not as large text, cursive font, thicker red border, and aligned right.

<p style=”color: #000099; font-size: 15px; font-family: cursive; text-align: right; border: 10px solid red;”>Blue, not as large text, cursive font, thicker red border, and aligned right.</p>

A few font comparisons

Arial font.

Italic font.

Cursive font.

Fantasy font.

<p style=”font-family: arial;”>Arial font.</p>
<p style=”font-family: italic;”>Italic font.</p>
<p style=”font-family: cursive;”>Cursive font.</p>
<p style=”font-family: fantasy;”>Fantasy font.</p>

Note: Italic font isn’t showing up on my phone when I view this page. The text still looks like the arial font, which is the default. Each device/browser has a limited number of fonts it will recognize, and will often display it differently even when it does recognize it.  Fantasy looks different on my phone than it does on my laptop. These things must be considered when choosing a font.


 

Make sure to subscribe and ring the bell! from r/ElectronicsStudy

Home page

  • Information on this site is not guaranteed to be accurate. Always consult the manufacturer info/datasheet of parts you use. Research the proper safety precautions for everything you do.
  • Electronzap is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.