Contact Us
1-877-210-2807
Simple HTML Editing
I need to make some simple changes on my website. Can you give me some basic instruction on how to edit the HTML code?
HTML code is a lot simpler than it appears at first glance. The acronym stands for HyperText Markup Language. The purpose of HTML is to display content in an organized fashion.
Let’s look at a simple HTML website example:
<html>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my lovely webpage. <a href="contact.html">Contact me</a></p>
<br />
<img src="image.jpg" />
</body>
</html>Now, let’s analyze the above code:
<html> is the ‘start tag’ which initiates the start of HTML code. It tells the browser, “Everything that follows is HTML.” </html> is the ‘end tag’. The content after the start tag and before the end tag will be interpreted as HTML code.
<body> and </body> are the start and end ‘body’ tags. Everything in between them will be the main website content displayed on computer screens.
Every element in HTML needs a start and an end tag. Everything between the start and end tag is depicted in the manor specified. There is only one exception to this rule which we will get to later. For now, here is an example of how start and end tags work:
<h1>Welcome to My Webpage</h1>
In the above example, the text will be shown as an H1 header. There are six types of headers in HTML ranging from H1 to H6. H1 headers are the largest and boldest while H6 are the smallest.
<p>This is my lovely webpage. <a href="contact.html">Contact me</a></p>
This example shows a simple paragraph. Paragraphs are displayed inside the <p> and </p> tags. There is also a simple link or “anchor” linking to the contact page contact.html. The link text displayed will look like this:
<br />
<img src="image.jpg" />
Our final example displays the image image.jpg. Note that there is no separate end tag here. End tags are not needed for images since there is no text content displayed between the tags. We solve this problem by combining the end tag and start tag together with a slash at the end of the tag: <img />
The other thing to note in the above example is the <br /> tag. This tag creates a line break in the page. We want to be sure our image is displayed on the line below the text “Contact me” text and not to the right of it.
General Editing Tips
Now that you know the basis of the HTML programming language, you are ready to start editing your HTML website.
Start off by downloading the page you want to edit onto your computer. You may connect to your website via FTP to download and upload files.
Now, open your HTML file in a text editor or a website editing program like Dreamweaver. We recommend using plain HTML mode when using website editing programs like Dreamweaver. Make sure you do not open the file inside a web browser, or you will not be able to edit it.
Use the search function (usually Ctrl+F) to find the text you wish to change. Make your changes and be sure to keep a backup of the original file in case something goes wrong.
Finally, upload your edited file and test your live website to make sure your changes are successful.
2Leaf recommends you make only simple changes to avoid breaking your website’s programming. In addition, be aware that by editing your website’s HTML code you might be breaking the warranty with your web development company.
If you are not 100% sure of what you are doing, it is always best to just get a quote from a web development company. Chances are that the time you spend learning, editing, troubleshoot, and being frustrated will be worth the few hours billed to make the changes.
Question by Anonymous
Published on June 23, 2010
Ask 2Leaf gives you the ability to find the answer to your web development and Internet marketing questions in 24 hours flat. All questions are publically available on this website. Save some dough and ask us first.
