Basic HTML+CSS Learning Part-2 (Document Start)

Hi everybody, how are you all? I am good. My first post was

Basic HTML+CSS Learning Part-1 (Basic start). After one month I start now part-2. Now we learn how to start a html document and what element or tag are common in html.

HTML means Hyper Text Markup Language. Its use to markup a document and CSS means Cascade Style Sheet. It uses to design html “id” and “class”. HTML and CSS are needed for basic and advance web design.

Basic document of HTML.

<!DOCTYPE html>

<html>

<head>

<title>THIS IS TITLE</title>

</head>

<body>

Your content here.............

</body>

</html>

The Paragraph Tag:

Let’s start with the absolute basics. In HTML, you work with tags, which are identified with carrots. Each tag has an opener and a closer. To format a paragraph, you use a <p> tag at the start of a new paragraph. You most likely will not have to be concerned with font, size, color and the rest because the CSS in the CMS takes care of that for you. You also need to close the paragraph with a closing </p> tag. You will notice the difference between an opening tag and a closing tag is the slashmark. Here’s an example paragraph using <p> tags:

<p>This is a sentence formatted with the HTML paragraph tags.</p>

<p>This will be the beginning of a new paragraph.</p>

Header Tags:

Now, let’s get into a little SEO (search engine optimization) to help visitors find your articles through search results on Google, Bing and so on. Header tags are treated as important text within an article and search engines read this to help determine content on a page and search results. Typically, the title of your article will be enclosed within <h1> tags, which is the highest level for headers. Then comes <h2>, <h3> and sometimes even <h4> tags. Most likely, the subheads in your articles will be <h2> and <h3> tags, but check with your editor and publisher to see what they use for subheaders. Here are some examples that show how to use header tags in conjunction with <p> tags.

<h1>Title of Article</h1>

<p>Introduction paragraph goes here.</p>

<h2>Subheader</h2>

<p>A paragraph of text.</p>

<h3>Another Subheading</h3>

<p>A paragraph of text.</p>

Image Tags:

It’s a good bet that the CMS you use to submit articles has some kind of image icon that you can click to upload and insert an image. However, once that image is in your article, you should know how to format it so that the image flows with the text. Within the <img> tag you can set all sorts of parameters to format your images and help with SEO. The <img> tag is one of the rare tags that does not require a closing tag. Here’s some example code:

The margin attributes allow for 10px (pixels) of space around the image so that text does not bump up into it. The float attribute keeps the image flushed aligned left or right. The alt attribute is for SEO, so use good keywords here. The src is where the image is stored. And width and height are self-explanatory. For more information on images, you can see my previous article.

HREF Tags:

What would the internet be without links? It’s the links that keep the World Wide Web running smoothly so that visitors can jump from one site to another. Without links, we might as well have printed books. Links in HTML are created through <href> tags. Why they aren’t called <link> tags, I don’t know. Here’s an example of how to code a link:

<a href="http://www.URL.com">Linked Text Here</a>

You must start the <href> tag with the letter ‘a.’ The URL within the quotes is where you want the visitor to go. The text, “Linked Text Here” can be whatever you want but should be simple enough so that people understand where that link will take them. You must close this tag with </a>, otherwise, the entire rest of the page will appear as a link. You can add in one more bit of code to an <href> so that when the visitor clicks the click, the new page will open in a window, which is nice if the link takes the visitor off your site. If the link is to another page within your site, then this extra code is not advised.

<a href="http://www.URL.com" target=”_blank”>Linked Text Here</a>

Bold and Italics:

Sometimes writers like to put emphasis on certain words. Using bold or italics can accomplish this trick. Chances are, when you copy your article from your word processing software to the CMS, you’re going to lose this type of formatting. To add it back in, the easy way is to probably find the bold and/or italics icon in the CMS text editor. But if you want to learn the HTML code for it, you simply use a <b> tag for bold and <em> for italics. Don’t forget to close these tags with </b> and </em>.

Now that you’ve learned a few more tags, let’s see how they look all put together.

<h1>Title of Article</h1>
<img style="margin: 10px; float: left;" alt="keyword" src="images/path/image-name.jpg" width="400" height="350" />
<p>This article builds on <a href="http://www.URL.com">another article</a> that was previously published.</p>
<h2>Subheader</h2>
<p>I really want this text <b>bold</b>.</p>
<h3>Another Subheading</h3>
<p>I really want this text <em>in italics</em>.</p>

By learning the <p> tags, the header tags, how images are formatted, how links work and how to do basic formatting like bold and italics, you are improving your skill set as both a writer and editor. Next time you are asked about your HTML knowledge, you can confidently say that you understand the basics.

Today is here stop..... Next day I write about other tags.