Introduction to HTML – Hyper Text Markup Language

HTML is the basic code that tells website browsers (Microsoft Edge, Google Chrome, etc.)  what text/images/links to display, and some options to modify them. CSS and JavaScript are the 2 other programming languages that are typically used to add a lot more options to building websites once you are familiar with HTML.

This site will just present a brief introduction to HTML. There’s lots of other websites and books go into in much more depth, including how to actually begin building a website and ways to practice coding.

How to easily view the coding that was used to build any web page that is being viewed with a windows browser!

If you like the way a web page looks while you are using a windows browser, you can right mouse click on part of the page, and 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 the tags you see below be displayed on this page. Some examples are…

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 within) in the head tags (included in the next list), 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 central information of the page and their element/tags nestled in it, including the following….
  • <h1></h1> – Covered below.
  • <p></p> – Covered below.
  • <a></a> – covered below.

Paragraph Tag <p></p>

This is a paragraph

<p>This is a paragraph</p>

&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.
  • As with most html, the appearance (of the text in this case) can be altered with CSS.

<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. 


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 the page 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 plug in to automatically add the table of contents to my pages.

  • As with most html, the appearance (of the text in this case) can be altered with CSS.

H1

<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>


Items can also be aligned right.

Aligned right H4

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


And although things are generally 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>


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>


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


 

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.