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. CSS is what is used to change the appearance of many of those things, and other parts of the page.

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 Windows based computer by opening up notepad, and typing something like what you see in this screen shot image.

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

After saving the file with the .html extension (I saved it as Example page.html), you can open it with a browser to see how it will look when people using the same browser to open a page written with the same HTML text. It might look different on different browsers.

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 view 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 of them is called a tag. I know that’s probably confusing, keep scrolling down for examples that will make more sense.

  • The tags do not show up on the webpage that is being viewed by the visitor. They tell the webpage what to display and how to display it.
  • I used different coding in my HTML to let my tag examples be displayed on browsers.

I type the following 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.
  • <html lang=”en”> – Commonly nestled (inserted) inside the head tags. Lets the browser and search engines know that the page is written in English.

Container tag (Elements):

Has a starting tag (such as <p>) and an ending tag (such as </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. I use WordPress and it’s themes and various plugins that takes care of everything in the head element for me unless I want to modify something myself.
  • <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 headers which are used to display enlarged text of your choosing. They are used to help organize a page and their appearance can be modified with CSS if desired.

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.

Examples:

The following shows 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 could be typed out in the text tab or html document.

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.
  • I also showed 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.