![]() | |
![]() | |
![]() |
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: TOP 10 personal tech and gadgets of 2024 Designboom Can Using a Dumber Phone Cure ‘Brain Rot’? The New York Times The Latest Personal Tech at CES 2025- The Accounting Technology Lab Podcast - Jan. 2025 CPA Practice Advisor European biz calls for Euro tech for local people theregister.com Why a Tariff-Inflated $2,000 iPhone Is Nothing to Fear The New York Times Google wins 1-1: Judge rules ad giant broke some antitrust law theregister.com PIRG's 'Electronic Waste Graveyard' lists 100+ gadgets dumped after support vanished theregister.com Personal Enrichment Courses Wake Tech Cheaper iPhones and Pixels Are Here. They Are Pretty Good. The New York Times Resellers may be sitting on costly pile of regret after US smartphone shopping spree theregister.com How do you explain what magnetic fields do to monitors to people wearing bowling shoes? theregister.com Tech support session saved files, but probably ended a marriage theregister.com Ignorance really is bliss when you’re drowning in information theregister.com Samsung trumps USA's tariffs by making displays in Mexico, and elsewhere if needed - theregister.com Tech for Babies Is Booming. Here’s What One Parent Found Helped the Most. The New York Times How Tech Created a ‘Recipe for Loneliness’ The New York Times Tariff uncertainty looms large over budget conscious CIOs theregister.com About National Personal Protective Technology Laboratory | NIOSH Centers for Disease Control and Prevention | CDC (.gov) Top 10 Personal Gadgets For Tech-Savvy Individuals Designed To Revolutionize Their Routine Yanko Design Not a Coder? With A.I., Just Having an Idea Can Be Enough. The New York Times Tech titans hide in shadows awaiting Trump tariff threats theregister.com Fear of tariffs made the PC market great again in Q1 as vendors emptied factories to dodge price future hikes theregister.com Appeals court revives lawsuit alleging IBM bilked pensioners theregister.com Apple has locked me in the same monopolistic cage Microsoft's built for Windows 10 users theregister.com How to Create a Multimedia Digital Journal of Your Life The New York Times Framework guns for cheap laptops with upgradeable alternative theregister.com Tech Made Easy AARP Can You Turn Off Big Tech’s A.I. Tools? Sometimes, and Here’s How. The New York Times The Coolest Tech Gadgets We Recommend for 2025 Best Products If TikTok Is Here to Stay, What Does That Mean for Us? The New York Times Laptop makers stalled on repairability improvements theregister.com Apple’s A.I. Is Landing Soon on iPhones. Here’s What It’s Like. The New York Times Wozniak: I didn't reduce chip count for manufacturing. I wanted to prove I was clever theregister.com The passive aggression of connecting USB to PS/2 theregister.com The sound of Windows 95 about to disappoint you added to Library of Congress significant sound archive theregister.com Hisense QLED TVs are just LED TVs, lawsuit claims theregister.com HP Inc to build future products atop grave of flopped 'AI pin' theregister.com Hold my Pimms! Wimbledon turns to tech for line-ball calls theregister.com Trump tariffs forcing rethink of PC purchases stateside theregister.com The sweet Raspberry taste of success masks a missed opportunity theregister.com App stores unconvinced by Trump's TikTok ban pause, which may itself be on shaky legal ground theregister.com Google says it's rolling out fix for stricken Chromecasts theregister.com Intel pitches modular PC designs to make repairs less painful theregister.com HP ditches 15-minute wait time policy due to 'feedback' theregister.com Why You Might Suddenly Be Following Trump on Instagram and Facebook The New York Times Coordinates of millions of smartphones feared stolen, sparking yet another lawsuit against data broker theregister.com Lenovo teases solar-powered and folding screen concept laptops theregister.com Capital One two-day outage leaves customers in free-fall theregister.com Brit watchdog probes Google's search, ads empire theregister.com This Ring on Your Finger Tracks Your Sleep. Is It Worth the Splurge? The New York Times Copilot+ PCs? Customers just aren't buying it – yet theregister.com |
![]() |
![]() |
![]() |
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 |