My notes on website building using WordPress HTML CSS

Here’s a brief list of what I think is the most important code for beginners in HTML and WordPress. Someday I hope to add CSS.  I made the following page with my tips for those who don’t have a wordpress site yet but are interested in starting one Starting a wordpress website tips

HTML Coding WordPress website content:

If you use the WordPress “Visual” tab to set up most of your content, it is a good idea to review the code that was generated by clicking the “Text” tab.

  • Visual tab: WordPress does the coding for you. You tell it what you want and where you want it in a what you see is what you get (WYSIWYG) format.
  • Text tab: Is where the actual code made by wordpress is shown. The code can be modified or written in full by you as well.
  • Syntax – The words used to make up a computer language. In this case, it’s the code that your browser(s) know what to do with.

NOTE: If you are on any website, you can right click a part of the page where there is regular text, and select the “view source code” option to see the code that is used to make the page. 

Examples

Below, I will mostly show an effect as seen by a website visitor and what you’ll probably see while working in the Visual WYSIWYG tab,  followed by the code used in the text tab that made that effect.

<p>Paragraphs and even single sentences like this one are written within p tags as shown. I never need to use p tags though. I usually just type text in both the WordPress Visual tab and text tab. </p>

Heading

Heading

Heading

Heading

Heading
Heading

The 6 heading options are shown above, which were made using the following code…

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

Tags Tags Tags Tags Tags Tags2 Tags2

  • Darkened “Tags” above was made by the code <strong>Tags</strong>
  • Underlined “Tags” was made with <u>Tags</u> ,
  • The “Tags” in italics for emphasis was made with <em>Tags</em>
  • The line through Tags (strikethrough) was made with <del>Tags</del>
  • Second darkened “Tags” was created with <b>Tags</b>
  • Supescripted 2 (smaller and higher 2) was made with Tags<sup>2</sup>
  • Subscripted 2 (smaller and lower 2) was made with Tags<sub>2</sub>

I used an unordered/bullet list (ul) above help organize my comments above. There is also an ordered/numbered lists (ol) you can use. I show both below, followed by the code used to make it.

  • first
  • Second
  • Third
  1. First
  2. Second
  3. Third

<ul>
<li>first</li>
<li>Second</li>
<li>Third</li>
</ul>

<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>


You can make a horizontal line, as shown above and below this text, which separates parts of a page by using just  <hr> , which my WordPress changes to <hr /> .


You can align the text to the left side of the page, the center of the page, or the right side of the page as shown below by using the tags shown below that.

Left

Center

Right

<p style=”text-align: left;”>Left</p>
<p style=”text-align: center;”>Center</p>
<p style=”text-align: right;”>Right</p>


Red Green Blue Yellow Orange Pink Gold

<span style=”color: #ff0000;”>Red</span> <span style=”color: #008000;”>Green</span> <span style=”color: #0000ff;”>Blue</span> <span style=”color: #ffff00;”>Yellow</span> <span style=”color: #ff6600;”>Orange</span> <span style=”color: #ff99cc;”>Pink</span> <span style=”color: #ffcc00;”>Gold</span>    …    was used to make the colors above. <span> defines an area to color.


I wanted a simple way to make a button (as shown below). Luckily there’s all kinds of websites for beginners like me where you can make the button look the way that you want by selecting a bunch of options and they will provide the code. I snagged this simpler one from https://www.krisblack.com/journal/create-a-call-to-action-button-using-simple-code where I just had to copy and paste this code into the text portion of my wordpress page…

<div class="button-wrapper">
<a class="button cta-button" href="#">Button Text</a>
</div>

Replace # with the URL you want inserted and replace Button Text with the text you want inserted.

Copying and pasting the code shown above into the Visual tab, and then going into the Text tab to see the code it produced , gave me this code in the Text tab, which I copied from Text tab and pasted into Visual tab so you could read it as follows…

<pre class=”source-code” data-preserve-html-node=”true”><span class=”cm-tag” data-preserve-html-node=”true”>&lt;div</span> <span class=”cm-attribute” data-preserve-html-node=”true”>class</span>=<span class=”cm-string” data-preserve-html-node=”true”>”button-wrapper”</span><span class=”cm-tag” data-preserve-html-node=”true”>&gt;</span><br data-preserve-html-node=”true” /> <span class=”cm-tag” data-preserve-html-node=”true”>&lt;a</span> <span class=”cm-attribute” data-preserve-html-node=”true”>class</span>=<span class=”cm-string” data-preserve-html-node=”true”>”button cta-button”</span> <span class=”cm-attribute” data-preserve-html-node=”true”>href</span>=<span class=”cm-string” data-preserve-html-node=”true”>”#”</span><span class=”cm-tag” data-preserve-html-node=”true”>&gt;</span>Button Text<span class=”cm-tag” data-preserve-html-node=”true”>&lt;/a</span><span class=”cm-tag” data-preserve-html-node=”true”>&gt;</span><br data-preserve-html-node=”true” /><span class=”cm-tag” data-preserve-html-node=”true”>&lt;/div</span><span class=”cm-tag” data-preserve-html-node=”true”>&gt;</span></pre>


Anchor links to jump to specific parts of a page

  • Header – Go to the header.

Code used above

<ul>
<li>Header – Go to the <a href=”#Header”>header</a>.</li>
</ul>
<h4 id=”Header”>This is a H4 header</h4>

Click this to go to the top of the page Top

Code for the link, added after the text, is

<a href=”#top”>Top</a>


Make a link with anchor tags <a> … </a>

Click here to go to the Home page – Electronics learning for hobbyists and students WordPress made this link for me. The code is <a href=”https://electronzap.com/” target=”_blank” rel=”noopener”>Click here to go to the Home page – Electronics learning for hobbyists and students</a>

  • Within the <a> anchor tag, you notice href= , that makes the link and the address https://electronzap.com is where it will bring you to.
  • Also added to the <a> tag is target=”_blank” which opens a new browser tab for the site, so that you don’t leave this page.
  • And another thing added within the <a> tag is rel=”noopener” which is apparently something wordpress ads to fix a vulnerability that malicious code on another website could take advantage of. You’ll have to research elsewhere for more info on that topic.

More to come! Including…

  • Input and button tags
Links that support this site

 

Home page

Become a Patron! https://www.amazon.com/shop/electronzapdotcom https://www.youtube.com/electronzap