![]() | |
![]() | |
![]() |
Personal Technology Information |
|
![]() |
HTML Explained: Part 2
Get started creating web pages using text files and HTML code! This article is a continuation of HTML Explained: Part 1, which gives a general overview of HTML. Here, we're going to get into the nitty gritty of the code itself. Once you see how simple it really is, you should RUN, not walk to the nearest bookstore and grab your own copy of a handy HTML manual. All right, let's begin. In viewing the source of web pages, you may have noticed a lot of these things: < >. They're called HTML tags, and they're what the computer uses to interpret the HTML code. NOTE: in this article I had to add spaces to all of my HTML tags so that I could display them without actually having them work. There are two HTML tricks to actually "shutting off" HTML tags, but neither of them function properly in this submission box. The HTML tags shown here will display like so: < FAKE TAG > but in reality you're supposed to type them like so: A friend of mine describes HTML tags as "on/off switches." An easy example which you may be well-familiar with, is the Bold command. To "turn on" Bold, type < B > (but with no spaces). All of the text that comes after the Bold tag, will then be Bolded. To "turn off" the bold characteristic, type < /B >. Any text that comes after the "bold off" tag will unbolded. It's worth mentioning that in all cases, all text that falls between an "on" or "off" HTML tag will take on the characteristic of that tag descriptor. How much text can you put in between two HTML tags? As much or as little as you want. That means, you can use just a couple of HTML tags to design paragraphs and paragraphs of text. What are some other HTML tags that web designers frequently use? < I > and < /I > (for italics)< U > and < /U > (for underline)< BR > (to create a single line break). In most but not all cases, if you activate an HTML tag by enclosing it in these: < >s, you must also deactivate it at some point, as in < I > and < /I > for italics shown above. An exception to this rule is < P >, or paragraph separator tags, and < BR > or line breaks. Specifying Multiple Text Characteristics Within a Single HTML Tag HTML tags work in different ways, depending on the aspect of the design they're controlling. As I mentioned above, you can control all elements of web design via HTML code-page separation, text formatting, image placement, design layout, and hyperlink insertion. For this reason, one HTML tag can include multiple variables. This sounds a lot trickier than it is. For example, a tag with multiple variables enclosed all in one of these: < >, can be used to format text. An equals (=) sign is used to specify multiple characteristics within a single HTML tag. To tag a section of text for font specs, begin with: < FONT FACE= Using no spaces after the equals (=) sign, type your font name in quotes, as so: "arial". You can also specify the size and color here. In the same tag that says to close. Your font tag will now look like this: < FONT FACE="arial" SIZE="2" > (but with no end spaces). If you wanted to, you could also include a color for the text within that tag. The color is entered in the same way as the font face and size, and is named within its own set of quotation marks either in a basic name such as "black" or "red", or a 6-digit numerical code that begins with a number sign. So, an HTML tag that designates a paragraph typed in Arial font at the 2nd smallest size of type, in the color black, would look like this: < FONT FACE="arial SIZE="2" COLOR="black" > All of the type that came after this HTML tag would take on the characteristics above. Once you wanted to "shut off" the font characteristics of that blurb of text, you would type the tag < /FONT >. Using HTML Tags to Add Images to Your Web Page Now suppose you wanted to add an image to your webpage. And let's assume the image was already located in the folder of your website where images are stored. In order to make the image appear in your NEW web page, you need: 1. the complete web address of your website (such as http://www.wordfeeder.com), 2. the folder (or subdirectory) on your server where images are kept, and 3. the file name of the image (ends in .jpg). The HTML code used to "pick up" an image from a source is IMG SRC. As always, it belongs inside those handy bracket-things. So your tag would begin: < IMG SRC= Without typing any spaces before or after the = (equals) sign, you'd then paste the URL of where the image is located (as explained in examples 1, 2 and 3 above), and follow with the filename and .jpg ending. I'll illustrate this with an example from my own web collection of images: < IMG SRC="http://www.wordfeeder.com/sitebuildercontent/sitebuilderpictures/wordfeederlogox.jpg" > By typing that HTML tag with the specific web address and folder information/filename within quotation marks, the computer knows the origin of the image, and will then "hyperlink it" into your web page. If you're ever unsure of the filepath of an image you need, go to the webpage where it's located and then right-click the image. Under "properties", you'll find the complete URL path that must be typed in between the two quotation marks that fall inside your Image Source tag. Note: you do not need to "shut off" an image tag. You can also include multiple variables within a single image tag. For example, if you wanted to left-align the above image, you'd edit the above tag to look like this: < IMG SRC="http://www.wordfeeder.com/sitebuildercontent/sitebuilderpictures/wordfeederlogox.jpg" ALIGN=left > Hyperlink Tags for Email and Website Addresses Ever wonder how webmasters create live links? A live link might say something like, "Click here for more info!" and then when you click there, you're suddenly transported to a new web page. A live link is simply type covering a website address. Check it out: < A HREF="http://wordfeeder.com" >Visit Wordfeeder for more info!< /A > That's HTML code for "hyperlinked text". It looks weird, but think about it this way. The first part in that's enclosed in these: < >, is what turns on the "make the following words into a link that leads to the address I am typing here" function. The end tag, < /A > is what "shuts off" the "hypertext linking" feature and will then let you resume typing in normal, unlinked text. As you can see, by typing a few simple HTML tags, you can create some pretty amazing things. This article is just the tip of the iceberg. I hope that the explanations and examples shown have at least provided a basic understanding of HTML for you. A great way to learn is by "studying" other people's web page code from the View>Source window. You practice by copying their HTML code into your own fake pages, and filling in the "meat" between their "on" and "off" tags with text and images that suit your own purposes. But be careful. If you paste HTML incorrectly, you can totally wreck and corrupt your document. For folks who want to get into serious design, I highly recommend that you buy a comprehensive HTML guide. Once you get the hang of HTML, there's no telling what you can create! Copyright 2005 Dina Giolitto. All rights reserved. Dina Giolitto is a New-Jersey based Copywriting Consultant with nine years' industry experience. Her current focus is web content and web marketing for a multitude of products and services although the bulk of her experience lies in retail for big-name companies like Toys"R"Us. Visit http://www.wordfeeder.com for rates and samples.
MORE RESOURCES: I Quit Google Search for AI—and I’m Not Going Back The Wall Street Journal If TikTok Is Here to Stay, What Does That Mean for Us? The New York Times TOP 10 personal tech and gadgets of 2024 Designboom The Latest Personal Tech at CES 2025- The Accounting Technology Lab Podcast - Jan. 2025 CPAPracticeAdvisor.com The Five Things You Shouldn’t Tell ChatGPT The Wall Street Journal Personal Enrichment Courses Wake Tech Newsroom Tech for Babies Is Booming. Here’s What One Parent Found Helped the Most. The New York Times Not a Coder? With A.I., Just Having an Idea Can Be Enough. The New York Times AI Solves My Most Annoying Chore: Meal Planning for a Toddler The Wall Street Journal How Workplace Tech Has Changed Over the Years, From the WSJ Archives The Wall Street Journal How Tech Created a ‘Recipe for Loneliness’ The New York Times Tech That Will Change Your Life in 2025 - WSJ The Wall Street Journal iRobot may be iDead in iYear The Register The Trouble With Searching Google for ‘the Best’ The Wall Street Journal The Snapchat Move That Leaves Teen Girls Heartbroken The Wall Street Journal When Cell Service Is Down, You Can Send iPhone Texts via Satellite The Wall Street Journal How to Create a Multimedia Digital Journal of Your Life The New York Times Office Technology Comes to the Movies: Test Your Knowledge With Our Quiz The Wall Street Journal Top 10 Personal Gadgets For Tech-Savvy Individuals Designed To Revolutionize Their Routine Yanko Design Your iPhone Storage Is Full Again. Do This to Reclaim Space. The Wall Street Journal Shop the best Cyber Monday deals on phones, tablets, smartwatches and more Good Morning America The 28 Best Tech Gifts of 2024, According to Our Gadget Gurus The Wall Street Journal ChatGPT vs. Claude vs. DeepSeek: The Battle to Be My AI Work Assistant - WSJ The Wall Street Journal Can an App Replace a Personal Trainer? I Tested Nearly a Dozen to Find Out - The Wall Street Journal Can an App Replace a Personal Trainer? I Tested Nearly a Dozen to Find Out The Wall Street Journal Tech Made Easy AARP Things to Try: Our 9 Top Tech Tips for You The Wall Street Journal Can You Turn Off Big Tech’s A.I. Tools? Sometimes, and Here’s How. The New York Times How to Make Typing Easier on the Phone and Leave the Laptop at Home The New York Times The Summer Is So Hot, Workers Are Wearing High-Tech Ice Packs The Wall Street Journal Touch Screens Are Over. Even Apple Is Bringing Back Buttons. - WSJ The Wall Street Journal Apple Intelligence Isn’t Very Smart Yet—and Apple’s OK With That - WSJ The Wall Street Journal I Replied ‘Stop’ to a Political Text Message. I Got 100 More. - WSJ The Wall Street Journal The Coolest Tech Gadgets We Recommend for 2025 BestProducts.com Wozniak: I didn't reduce chip count for manufacturing. I wanted to prove I was clever - The Register The Year Everyone Started ‘Manifesting.’ Does It Work? The Wall Street Journal Apple’s A.I. Is Landing Soon on iPhones. Here’s What It’s Like. The New York Times Want an iPhone 16 Review? Just Ask Joannabot The Wall Street Journal What the Arrival of A.I. Phones and Computers Means for Our Data The New York Times Apple Watch Is Becoming Doctors’ Favorite Medical Device - WSJ The Wall Street Journal This Ring on Your Finger Tracks Your Sleep. Is It Worth the Splurge? The New York Times How to Download Your Videos and Other Data From TikTok The New York Times Apple Headset Stalls, Struggles to Attract Killer Apps in First Year The Wall Street Journal The Only App That Always Wins the Battle for Your Attention The Wall Street Journal No way? Big Tech's 'lucrative surveillance' of everyone is terrible for privacy, freedom The Register Android beefs up Bluetooth tag stalker protections The Register The Great AI Challenge: We Test Five Top Bots on Useful, Everyday Skills The Wall Street Journal Laptop makers stalled on repairability improvements The Register PC shipments stuck in neutral despite AI buzz The Register Exclusive | Google’s Gemini Live AI Sounds So Human, I Almost Forgot It Was a Bot The Wall Street Journal Why You Might Suddenly Be Following Trump on Instagram and Facebook The New York Times I’ve Been Driving an EV for a Year. I Have Only One Regret. - WSJ The Wall Street Journal Running Your Household Is a Second Job, but It Doesn’t Have to Be The Wall Street Journal Brit watchdog probes Google's search, ads empire The Register |
![]() |
![]() |
![]() |
RELATED ARTICLES
What Exactly are Screensavers? - part II Here are some tips on how to use screensavers:First of all you should be careful when you use a screensaver on a LCD. A pixel it's on when it's dark on a LCD. Apache, MySQL & PHP for Windows Apache, MysQL and PHP for Windows could be a nice nice thing to have on your Windows workstation. You could try and experiment with all kinds of nice PHP and MySQL based applications right on your Windows desktop running Apache, instead of having to access a full-featured server. Keeping the Windows Registry Operational The registry is where the computer stores information about the configuration of the system and the programs installed so that the operating system can use them.Regularly maintaining the registry is a basic requirement. EDTV vs HDTV Confused by EDTV vs HDTV? We don't blame you. The number of acronyms floating about with regard to digital TV is frightening. Windows PDA Medical Software Benefits PDA Medical BenefitsIf you are concerned about your medical history, the Internet has some great windows medical pda software that is available for free. Freeware is all the rage, and finding good quality freeware that is medically related is easy and fun. Why There Are Color Differences in Printing from Your PC This article describes the basic properties of color, what the relationships are between them and the differences between what you see and what you actually get using your inkjet cartridges.PropertiesMost of you will have come across these three; Hue, Saturation and Brightness; if you have ever messed around with color settings of your images. Are You Putting Off Productivity? I recently took a good look at what was keeping me from accomplishing what I needed to do. After all, I had my goals. Enhanced Web Browsing With Toolbars As the Web grows more crowded and just plain "noisy" withinformation bombarding us from every angle, most peoplewelcome any tool, trick or shortcut to help them wadethrough the mountains of data to find what they want.Since your web browser represents your main window to theInternet, it makes sense for any tool which enables you tofind what you need and get around faster online should sitright where you need it most. Tips for Buying a PC Buying Your PCBuying a PC that's right for you and your family is not all that simple task. More so if you're going to buy an unbranded or an assembled one. Basic Diagnosis Guidelines for Your PC Simone is exasperated. She has to work on her university assignment but her PC is not working properly. Why Get a Microsoft MCSE Certification? In the years of the dot com boom and bust, the Microsoft MCSE Certification has gotten its eye blackened over an over. Paper Microsoft MCSE's who were excellent at finding brain dumps and passing exams gave the Microsoft MCSE Certification a bad name. Nephrology and Dialysis For a PDA Saving Lives With A Pocket PCFree medical downloads can be a real lifesaver for many people. For those dealing with diseases, using their pda to help monitor their health is one of the best and most useful benefits of the new pocket pc technology. Smart Apple iPod Tips and Techniques Are you thinking of buying an Apple iPod? Or have you bought one?Almost everyone and anyone that I know seems to have bought an iPod or at least is thinking of getting an ipod for themselves or their loved ones. The iPod is just so alluring! However, do you know what you should do after buying the iPod?Most people don't. Flash Memory, Part I: MMC and SD MMC and SDFlash memory is available in so many formats that it can be difficult to know what will work with any particular device. Devices such as MP3 players, PDAs, mobile phones, digital cameras, and personal computers can take advantage of flash memory to bolster their storage capacity, but selecting the right format may be easier said than done. Lightning Season: How to Avoid Data Loss We have just entered the time of year that most electrical storms occur.Sudden loss of power, power surges, and electrical spikes are all very common causes of computer damage. Home Electronics: The Facts About Plasma TV Not so many years ago, homes across the country watched their favorite TV shows on a bulky floor model that took awhile to warm up before you could see the picture, didn't offer anything in the way of remote control manipulation and offered a washed out image on the TV's cathode ray tubehosted screen.. Computer Viruses are Bad Luck OK, so you caught a computer virus and your system is all screwed up and you're frustrated and angry and upset. Bad luck. MobiTV and Visual Stimulation Imput for Personal Cognitive Performance Stimulus thru Caffiene or Visual Input?It appears that the Mobi TV feature for Cell Phones may in fact have some positive Bio-advantages in that it exercises the brain thru visual stimulation. We know that visual input stimulates the brain. Flash Your nVidia Video Cards BIOS You will need the following:1. 1. Selecting the Perfect Big Screen TV Selecting a TV isn't as easy as it used to be in years goneby. Rather than going to the local department store and choosing a console that would take up a large portion of the living room, we now have other options. ![]() |
home | site map |
© 2006 |