Learn HTML Coding.Tech Lovers :Episode 1

Related image

HTML is a vital part of the web as we know it. And while few web designers create pages by manually typing HTML, it’s still handy to know a little bit about it.

 We’re going to look at some basics of the language, including what HTML really is,and  some fundamental concepts.

HTML Basics: What Is HTML?

HTML stands for Hypertext Markup Language.

As a markup language, HTML only lets you create the display layout of pages. A true programming language, like Java or C++, contains logic and commands that are carried out.

While it’s simple, HTML is at the backbone of every page on the web. It’s responsible for what text shows up as bold, adding images, and linking to other pages.

You can right-click on most webpages in your browser and choose View page source or similar to see the HTML behind them. This will likely also contain a lot of code that’s not HTML, but you can sift through that.

View HTML Source Example

Step 1: Understanding the Concept of Tags

HTML uses a system of tags to categorize different elements of the document.

Most tags come in pairs to wrap the affected text inside them. Here’s a simple example (the <strong> tag makes text bold; we’ll discuss this more in a moment.)
<strong>This is some bold text</strong>.
Notice how the closing tag starts with a forward slash (/). This signifies a closing tag, which is important. If you don’t close a tag, everything from the start onward will have that attribute.

However, not all tags have a pair. Some HTML elements, called empty elements, have no content and exist on their own. An example is the <br> tag, which is a line break. You can “close” such tags by adding a slash (such as <br />) but it’s not strictly necessary.

Step 2: The Skeleton HTML Layout

A proper HTML document must have certain tags defined so it’s laid out correctly. These are the essential parts:

Every HTML document must begin with <!DOCTYPE html> to declare itself as such. Thus, its closing tag, </html>, is the last item in an HTML file.

Next, the <head>section includes information like the page title, various scripts that run on the page, and similar. As the name suggests, this typically comes right after the initial <html> tag. The end user doesn’t see much of the content in these tags.

Finally, the <body>tag holds the text of the page that the reader sees (plus much more). Here you’ll find images, links, and more.

Since the <body> section makes up the bulk of an HTML document, the rest of our walkthrough looks at elements that pertain to it.

Step 3: Basic HTML Tags for Formatting


Next, let’s look at some common tags that make up HTML documents. Of course, it’s not possible to cover every element, so we’ll review some of the most important. We’ve covered many more HTML examples if these don’t satisfy you.

If these tags seem pretty basic, remember that HTML was created all the way back in 1993. The web was very much text-based back then in its early stages.

Simple Text Formatting


HTML supports basic text styles like you’d find in Microsoft Word:

<strong> tags make text bold.
<em> tags (which stands for “emphasis”) will italicize text.
HTML also supports the older <b> tag for bold and <i> for italics. However, it’s preferable to use the ones above.

In short, <strong> and <em> show how something should be understood, while the latter tags only tell you how it should look. These former tags are more accessible for screen readers used by the visually impaired.

Paragraph and Other Divisions


HTML’s <div> tag lets you define a section of the document. Usually, this is paired with CSS (see below) to format a section in a certain way.

The <p> tag lets you divide text into paragraphs. Browsers will automatically put some space before and after these, letting you naturally break up text.

You can add headers to your document and make it easier to follow using the <h1> through <h6> tags. H1 is the most important header, while H6 is least important. Nearly every MakeUseOf article uses H2 and H3 headers to organize information.

Hitting Enter to add line breaks in your HTML document won’t actually display them. Instead, you can use <br> to add a line break

.Here’s an example that uses all of these:
<div class="example">
<h2>Example Heading</h2>
<p>This is one paragraph.</p>
<p>This is a second<br>paragraph split between two lines.</p>
</div>

Step 4: Inserting Images


Images are a vital part of most webpages. You can add them easily with HTML, and even set different properties for them.

You insert an image using the <img> tag. Combining this with the src attribute lets you specify where you want the image to load from.

Another important attribute of <img> tags is alt. Alt text allows you to describe the image for screen readers or in case the image doesn’t load properly. You can mouse over an image to see its alt text.

Use the width and height elements to specify the number of pixels the image appears at.

Put it all together, and an image tag looks like this:

<img src="https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg" alt="Dr. Phil" width="1280" height="720"> 

Step 5: Adding Links

The World Wide Web wouldn’t be much of a web without links to other pages. Using the <a> tag, you can link to other pages on any text.

Inside the <a> tag, the href attribute tells where you’re linking. Simply pasting the URL will work fine. You can use the title element to add a bit of text that appears when someone hovers over the link.

A basic link looks like this:
<a href="https://www.google.com/" title="Click here to search the web">Visit Google</a>

The <a> tag has many other possible elements, but we won’t dive into them here.

To be Continue next week drop a comment if  you need any Help

About Binnabook

Binnabook Magazine Believes in Free Speech,Social Journalism with newsgathering and verification of Data.

0 Comments:

Post a Comment

Your Views are needed.Thanks!

Kidnappers Must Be Treated As Terrorists — Tinubu

President Bola Tinubu has declared that individuals involved in despicable crimes such as kidnapping must be treated as terrorists. The Pres...

TRENDING News Feed