HTML Basics: Basic Text Tags

HTML Basics: Basic Text Tags

Basic Text Tags
ith only a small set of HTML tags you can create a functional page. The set of tags in this section let you set up an HTML file that has text in several variation, headlines, and rules.



<BR><body><BR><br /><BR></p> <p><BR><b>, <i>, <tt><BR><h1-6><BR><font><BR></p> <blockquote><p><BR></p> <hr> <p><BR></P><P class=copy><strong>Required Tags</strong><br />Each HTML file needs a certain set of tags to define it as an HTML page that the browser will display. </P><UL><LI>The file begins and ends with an HTML tag. <LI>The first portion of the file is a header, with information about the page. <LI>The second portion of the page is the body, with the content that appears in the reader's browser window. </LI></UL><P class=copy>This is what the basic page template looks like: </P><P class=code><a href="javascript: showSupportItem('listing1');"><html></a><BR></P><P class=code><a href="javascript: showSupportItem('listing2');"><head><BR><title>Title of the Page


Here's where the body content goes, the material that your readers see in their browser windows.


Line Break



In it's most simple form, an HTML file is text. This file:

Hello World!
How Are You?

displays like this in a Web browser:

Hello World! How Are You?

There are no tags to tell the browser to split the text. It just strings all the characters together in one long row.

The break tag inserts a return character, telling the browser to display the text that follows it on a separate line. This file:

Hello World!

How Are You?

displays like this in a Web browser:

Hello World!
How Are You?

Paragraph



In its simplest form, the paragraph tag tells the browser to display the text that follows it on a separate line, and to add extra space above it. So, this file:


Hello World!



How Are You?


displays like this in a web browser:

Hello World!

How Are You?

Make sure to end each paragraph with the end tag

. Everything between the start and end paragraph tags is the contents of that particular paragraph. Any attributes you specify in the paragraph apply to the entire paragraph between the open and close tags.

The most common paragraph attribute is align. You can align the paragraph in three ways:

  1. The default is left. If you don't use the align attribute the text automatically aligns to the left margin.
  2. align=right sends the text to the right margin.
  3. align=center centers the text across the page.
HTML Code Result

This paragraph uses the default alignment, left. Each line is flush to the left margin.

This paragraph is aligned left. Each line is flush to the left margin.

This paragraph is aligned right. Each line is flush to the right margin.

This paragraph is aligned right. Each line is flush to the right margin.

The paragraph is aligned center. Each line is centered and touches neither margin.

This paragraph is aligned center. Each line is centered and touches neither margin.

Headings



The heading tag tells the browser to display the text that follows it as the specified type of heading.

Heading Levels

There are six different levels of headings, from H1 to H6. In their default format, H1 is larger than H2; H2 is larger than H3, and so on. Some levels of heading are bold, some are not. The exact default size and attribute you see depends on your browser. In addition, people who use a feature called Cascading Style Sheets (CSS), a text attribute tag, or the font tag can change the way you see different levels of headings.

You'll always need to close the heading tag, with an end heading tag,

Here's an example of a heading tag in use. This is a heading level 4:

Hello World!



How Are You?


It displays like this in a web browser:

Hello World!

How Are You?

Here are samples of the six different level of headings. We have used CSS to define how some of the headings look. The way they actually appear may vary from browser to browser.

  • Head 1

  • Head 2

  • Head 3

  • Head 4

  • Head 5
  • Head 6

Align

The heading tag has one commonly-used attribute, align. Like the paragraph tag, you can align headings in three ways:

  1. The default is left. If you don't use the align switch, the text automatically aligns to the left margin.
  2. align=right sends the text to the right margin.
  3. align=center centers the text across the page.

HTML Code Result

Head Level 4, aligned left.

This heading is aligned to the left.

This paragraph is aligned right. Each line is flush to the right margin.

This paragraph is aligned right. Each line is flush to the right margin.

The paragraph is aligned center. Each line is centered and touches neither margin.

This paragraph is aligned center. Each line is centered and touches neither margin.

Text Tags

Some text
Some text
Some text
Some text

Some text.


Basic HTML provides some rudimentary ways of changes the appearance of your text. As HTML matures, some of these tags are used less and less often. New methods, such as Cascading Style Sheets are beginning to replace them. But as you are first learning HTML theses tags provide you with a simple way to make small stylistic changes.

There are three sets of tags that let you make these changes:

  • Text Style Tags (, , )
    Let you make a portion of the text appear in bold, italic, or teletype (monospaced) styles.
  • Font ()
    Lets you control the color, size, and type face of the text.
  • Blockquote (

    )
    Lets you indent your text on both margins.

Horizontal Rules



The horizontal rule tag lets you insert a horizontal rule into your page.

Hello World!


It's a beautiful day.

The birds are singing.

The flowers are blooming.

The sun is shining.


How Are You?

The Horizontal Rule Tag displays ahorizontal rule, or a line, in your Web page. It displays like this in your Web browser:

Hello World!


It's a beautiful day.
The birds are singing.
The flowers are blooming.
The sun is shining.


How Are You?

The default rule is two pixels thick, stretches across the entire page, and is an outlined light grey. You can change this by using the tag's attributes: width, size, and noshade.

Width

You can specify width of the page the line should fill, either in pixels or as a percentage of the page (it is usually best to use a percentage, unless you have a specific reason for measuring pixels).

  • The first example create a 100 pixel wide rule. It won't change size if you resize the browser window.
  • The second example create a 50 percent wide rule that is fluid and responds to changes in the browser window size:







Size

You can specify thickness of the rule in pixels with the size= attribute.

  • The first example create a 1 pixel thick rule.
  • The second example create a 15 pixel thick rule:







Noshade

You can specify that the rule be solid instead of having a grey outline by using the noshade attribute. This attribute doesn't have a value. If it is in, the rule is solid. If you leave it out, the rule is the default grey.




Remember, when you are using rules, don't go overboard. Use them in logical places to visually separate information. Don't let them overpower your page or use so many of them that your poor readers are left wondering if they're reading a zebra or a Web page.

Common Problems

When you're first learning HTML?heck, even after you've been doing it for a while?there are some easy-to-make mistakes.

Common Problem #1: Missing Delimiter

Ooops! That tag just isn't working. The first thing to check is: does it have both the opening (<) and closing (>) delimiter. It's easy to accidentally forget or delete one as you edit your page.

Common Problem #2: Missing Quotation Mark

Are things just disappearing from you page? Check to be sure that every place you've used an open quote in a tag, there is also a closing quote. If a browser doesn't find a close quote, it will think everything on the page is part of the tag attribute value rather than content to be displayed.

Common Problem #3: Missing End Tag

Suddenly you have some odd indents. Or all the text is bold. You probably entered an opening tag, but forgot to enter the ending tag.

Common Problem #4: Good Old Typos

The tag isn't working as you expected. Go back to your file and double check for old fashioned typos. It's almost embarrassing how often a
tag-typing finger can slip a little and create a tag instead. The browser just ignores that alien tag because it doesn't understand it.

devx-admin

devx-admin

Share the Post:
Advanced Drones Race

Pentagon’s Bold Race for Advanced Drones

The Pentagon has recently unveiled its ambitious strategy to acquire thousands of sophisticated drones within the next two years. This decision comes in response to

Important Updates

You Need to See the New Microsoft Updates

Microsoft has recently announced a series of new features and updates across their applications, including Outlook, Microsoft Teams, and SharePoint. These new developments are centered

Price Wars

Inside Hyundai and Kia’s Price Wars

South Korean automakers Hyundai and Kia are cutting the prices on a number of their electric vehicles (EVs) in response to growing price competition within

Solar Frenzy Surprises

Solar Subsidy in Germany Causes Frenzy

In a shocking turn of events, the German national KfW bank was forced to discontinue its home solar power subsidy program for charging electric vehicles

Advanced Drones Race

Pentagon’s Bold Race for Advanced Drones

The Pentagon has recently unveiled its ambitious strategy to acquire thousands of sophisticated drones within the next two years. This decision comes in response to Russia’s rapid utilization of airborne

Important Updates

You Need to See the New Microsoft Updates

Microsoft has recently announced a series of new features and updates across their applications, including Outlook, Microsoft Teams, and SharePoint. These new developments are centered around improving user experience, streamlining

Price Wars

Inside Hyundai and Kia’s Price Wars

South Korean automakers Hyundai and Kia are cutting the prices on a number of their electric vehicles (EVs) in response to growing price competition within the South Korean market. Many

Solar Frenzy Surprises

Solar Subsidy in Germany Causes Frenzy

In a shocking turn of events, the German national KfW bank was forced to discontinue its home solar power subsidy program for charging electric vehicles (EVs) after just one day,

Electric Spare

Electric Cars Ditch Spare Tires for Efficiency

Ira Newlander from West Los Angeles is thinking about trading in his old Ford Explorer for a contemporary hybrid or electric vehicle. However, he has observed that the majority of

Solar Geoengineering Impacts

Unraveling Solar Geoengineering’s Hidden Impacts

As we continue to face the repercussions of climate change, scientists and experts seek innovative ways to mitigate its impacts. Solar geoengineering (SG), a technique involving the distribution of aerosols

Razer Discount

Unbelievable Razer Blade 17 Discount

On September 24, 2023, it was reported that Razer, a popular brand in the premium gaming laptop industry, is offering an exceptional deal on their Razer Blade 17 model. Typically

Innovation Ignition

New Fintech Innovation Ignites Change

The fintech sector continues to attract substantial interest, as demonstrated by a dedicated fintech stage at a recent event featuring panel discussions and informal conversations with industry professionals. The gathering,

Import Easing

Easing Import Rules for Big Tech

India has chosen to ease its proposed restrictions on imports of laptops, tablets, and other IT hardware, allowing manufacturers like Apple Inc., HP Inc., and Dell Technologies Inc. more time

Semiconductor Stock Plummet

Dramatic Downturn in Semiconductor Stocks Looms

Recent events show that the S&P Semiconductors Select Industry Index seems to be experiencing a downturn, which could result in a decline in semiconductor stocks. Known as a key indicator

Anthropic Investment

Amazon’s Bold Anthropic Investment

On Monday, Amazon announced its plan to invest up to $4 billion in the AI firm Anthropic, acquiring a minority stake in the process. This decision demonstrates Amazon’s commitment to

AI Experts Get Hired

Tech Industry Rehiring Wave: AI Experts Wanted

A few months ago, Big Tech companies were downsizing their workforce, but currently, many are considering rehiring some of these employees, especially in popular fields such as artificial intelligence. The

Lagos Migration

Middle-Class Migration: Undermining Democracy?

As the middle class in Lagos, Nigeria, increasingly migrates to private communities, a PhD scholar from a leading technology institute has been investigating the impact of this development on democratic

AI Software Development

ChatGPT is Now Making Video Games

Pietro Schirano’s foray into using ChatGPT, an AI tool for programming, has opened up new vistas in game and software development. As design lead at business finance firm Brex, Schirano

Llama Codebot

Developers! Here’s Your Chatbot

Meta Platforms has recently unveiled Code Llama, a free chatbot designed to aid developers in crafting coding scripts. This large language model (LLM), developed using Meta’s Llama 2 model, serves

Tech Layoffs

Unraveling the Tech Sector’s Historic Job Losses

Throughout 2023, the tech sector has experienced a record-breaking number of job losses, impacting tens of thousands of workers across various companies, including well-established corporations and emerging startups in areas

Chinese 5G Limitation

Germany Considers Limiting Chinese 5G Tech

A recent report has put forth the possibility that Germany’s Federal Ministry of the Interior and Community may consider limiting the use of Chinese 5G technology by local network providers

Modern Warfare

The Barak Tank is Transforming Modern Warfare

The Barak tank is a groundbreaking addition to the Israeli Defense Forces’ arsenal, significantly enhancing their combat capabilities. This AI-powered military vehicle is expected to transform the way modern warfare

AI Cheating Growth

AI Plagiarism Challenges Shake Academic Integrity

As generative AI technologies like ChatGPT become increasingly prevalent among students and raise concerns about widespread cheating, prominent universities have halted their use of AI detection software, such as Turnitin’s

US Commitment

US Approves Sustainable Battery Research

The US Department of Energy has revealed a $325 million commitment in the research of innovative battery types, designed to enable solar and wind power as continuous, 24-hour energy sources.

Netanyahu Musk AI

Netanyahu and Musk Discuss AI Future

On September 22, 2023, Israeli Prime Minister Benjamin Netanyahu met with entrepreneur Elon Musk in San Francisco prior to attending the United Nations. In a live-streamed discussion, Netanyahu lauded Musk

Urban Gardening

Creating Thriving Cities Through Urban Gardening

The rising popularity of urban gardening is receiving increased recognition for its numerous advantages, as demonstrated in a recent study featured in the Environmental Research Letters journal. Carried out by

©2023 Copyright DevX - All Rights Reserved. Registration or use of this site constitutes acceptance of our Terms of Service and Privacy Policy.

Sitemap