HTML Basics: How Does All This HTML Stuff Impact Me?
HTML Basics: How Does All This HTML Stuff Impact Me?
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display
them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the
content of the page:
<html>
<body>
</body>
</html>
The text between <html> and </html> describes the web page (Don’t typically see this in
Wordpress)
The text between <body> and </body> is the visible page content (Don’t typically see
this in Wordpress editor)
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
(Source: http://www.w3schools.com/html/html_intro.asp)
In a nutshell, if a tag – for example <strong> - is placed at the beginning of text the ending tag
- </strong> - needs to be placed somewhere to end the command. The “strong” tag, as you might
have guessed indicates to make text bold.
That’s generally the case. There are some tags that don’t have closing tags. For example, a soft
return is just one <br>. The “jump tag” also is a standalone tag: <!--more-->. (This is the tag that
allows stories to jump off the front page of your topical site.)
Picture example
Changing the alignment. (1) To change it to align right (instead of left) just delete “left”
and type “right”.
Change the size. (2) Only shrink photos this way. Do not increase a photo’s size this way.
Make sure to keep the proportions between the height and width the same. For
example, to shrink the picture by half its size this: width="270" height="438” becomes
this: width="135" height="219”.
o You can do this with any dimensions smaller than the initial size. Just make sure
that the new width has the same relationship to the new height as the old width
had to the old height.
And then highlighting the correct parts of the sentence and clicking on the button for the
correct function.
But sometimes when you highlight a sentence you might highlight too much. This could also
show up in the HTML.
For example:
If you doubleclicked on the link (below) you also highlighted the space.
Now, if you add the link, you also added the link to the space.
Switch to the HTML editor and delete the extra space before the </a> and add a space behind
it.
Here’s how it looks:
The same can apply with other VISUAL editor functions. For example, if you add sub headlines.
How do you fix it? Switch to the HTML editor and then move the </h2> tag behind the SUBHEADLINE
Some more tips:
If you run into a specific problem Google for a solution. For example, if you want to add a table, Google:
“How to add a HTML table.” If you want to find out how to add padding around a picture search for that.