Scribd
Upload
91 views

HTML Basics: How Does All This HTML Stuff Impact Me?

HTML (Hypertext Markup Language) is used to describe the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, images, and links. A web browser reads the HTML tags and displays the page elements accordingly. The HTML editor allows viewing and editing the underlying HTML code, which can help troubleshoot formatting issues that occur in the visual editor. While the visual editor is usually easier to use, the HTML editor may be necessary to fix certain problems, like removing extra spacing or adjusting tag placement.

Uploaded by

The Gazette
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
91 views

HTML Basics: How Does All This HTML Stuff Impact Me?

HTML (Hypertext Markup Language) is used to describe the structure and layout of web pages. It uses tags to mark elements like headings, paragraphs, images, and links. A web browser reads the HTML tags and displays the page elements accordingly. The HTML editor allows viewing and editing the underlying HTML code, which can help troubleshoot formatting issues that occur in the visual editor. While the visual editor is usually easier to use, the HTML editor may be necessary to fix certain problems, like removing extra spacing or adjusting tag placement.

Uploaded by

The Gazette
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML Basics

HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language


 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages

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>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

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

How does all this HTML stuff impact me?


For our Wordpress editor you don’t have to write in the HTML (1) editor but you can use that
editor to review tags, make simple changes or troubleshoot. The VISUAL (2) editor let’s you do
many of the things you need to do to post, but sometimes it’s easier to use the HTML (1) editor.
Some examples:

Here’s how the HTML version of this looks:


Why is it important to know that there’s a red space? Extra tags can mess with formatting but you
wouldn’t know what to change without looking in the HTML. For example, if the red space is in the
middle of a paragraph of text you might have extra space.

Picture example

The same picture in HTML


What can you do in the HTML?

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

Visual vs. HTML


In general, it’s much easier to work in the VISUAL editor as opposed to the HTML editor. Even
when you are “fluent” in HTML it can still take more time to type in:

<strong>This sentence <span style="text-decoration: underline;"> is </span> in bold.</strong>

than typing in:

This sentence is in bold.

And then highlighting the correct parts of the sentence and clicking on the button for the
correct function.

This sentence is in bold.

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.

You might also like