Basics of HTML

Sunday, July 1, 2012

This post was the very first design/html type post that I published on Misse{Blog}, I had such a great response to Tutorial Tuesdays that I ended up starting this blog! Thank you all so much for all the emails and tweets, it really makes my day. I love being able to help you all and do something I absolutely love. Make sure to check out my freebies, as a thank you :)

Todays topic is the basics of html, I think it's important to know the layout before starting to edit HTML in order to design your blog, it will make more sense to you, I hope. So here we go...

When writing up HTML code from scratch, it is best to do so with programs such as Textpad(PC) or TextWrangler(Mac). First things first, you must give the document structure. The layout should look like this;


  <html>
       <head>
       <title>Title of Web Page here</title>
       </head>

       <body>
       Web Page content (such as images, text, etc.) goes here
       </body>

  </html>


<    > is an opening tag & </   > is a closing tag.

The second step is text elements such as h1 (heading 1), h2 (heading 2), p (paragraph), em (emphasised text).

   <html>
       <head>
       <title>Title of Web Page here</title>
       </head>


       <body>
       <h1>Miss E Blog</h1>
       <h2>How to</h2>
       <p>Web Page <em>content</em> (such as images, text, etc.) goes here</p>
       </body>


    </html>


Save as example.html and open in a web browser. It should look like so;



To add an image to the webpage, we simply add this code;

<img src="elaine.jpg" alt="picture of owner" />

within the body tag (<body>). Make sure that the name of your image is identical to that of which you called it. eg. "elaine.jpg", it is very important that is is identical so do double check. Save and re-open in the browser.



Now I want to add a link to another web page. There are a number of ways to do so, which I will get into later. We do this by using the anchor element a (<a> ... </a>) I add this code within the body tag;

<a href="http://miss-eblog.blogspot.com/">Misseblog found here</a>

I also added the link break (<br />) under this but before the image in order to move the image to the next line.



<html>
       <head>
       <title>Title of Web Page here</title>
       </head>

       <body>
       <h1>Miss E Blog</h1>
       <h2>How to</h2>
       <p>Web Page <em>content</em> (such as images, text, etc.) goes here</p>
       <a href="http://miss-eblog.blogspot.com/">Misseblog found here</a>
       <br />
       <img src="elaine.jpg" alt="picture of elaine" />
       </body>

       </html>



 resulting in;




The last step is to change the look. To do this we add the style tag.

<head>
       <title>Title of Web Page here</title>

<style>
</style>
       </head>

Now we can begin to change the look. I will be getting into styling in more detail in a couple of weeks, so you don't need to worry about it now. But here is some basic styling;


<style> 

body { background-color: black;
            font-family: sans-serif;  }

h1 { color: red;
       border-bottom: 2px solid black; }

h2 { color: green; }

p { color: yellow; }

</style>






So there you are, you know the basics. You have created you're first webpage.
Check back next week to learn more. Hope you found this interesting, I think once I get around to the blog-related designs it will be more useful and interesting. But I hope you learned something.


Posted in: , |