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: What I Got Wrong in a Decade of Predicting the Future of Tech The Wall Street Journal ‘Data is the new oil’: Virginia Tech professor wants to protect the personal data of marginalized communities WRIC ABC 8News Smartphones Can Now Last 7 Years. Here's How to Keep Them Working. The New York Times iPad Pro vs. MacBook: The Great Apple Laptop Trade-Off The Wall Street Journal Opinion | Technology Hates Me The New York Times In the City, Personal Safety Starts With Your Smartphone The Wall Street Journal Jonathan Haidt's 'The Anxious Generation': Tech, Smartphones Cause Teen Anxiety - WSJ The Wall Street Journal Tech That Will Change Your Life in 2024, From AI to EV - WSJ The Wall Street Journal Want to Get More Done? That Podcast in the Background Is Holding You Back The Wall Street Journal How TikTok Is Wiring Gen Z's Money Brain The Wall Street Journal OpenAI Made AI Videos for Us. These Clips Are Good Enough to Freak Us Out. - The Wall Street Journal OpenAI Made AI Videos for Us. These Clips Are Good Enough to Freak Us Out. The Wall Street Journal Apple's New iPad Pro vs. New iPad Air vs. iPad: Why Are There So Many? The Wall Street Journal The Invisible $1.52 Trillion Problem: Clunky Old Software The Wall Street Journal After a Sugar High of Free Money, These Billion-Dollar Technologies Need a Nap The Wall Street Journal Huawei's latest smartphone mostly made in China The Register We Aren't Posting on Social Media as Much Anymore. Will We Ever? The Wall Street Journal The Tech to Help You Beat Your Tech Addictions The Wall Street Journal Tech Hubs Are Losing the Talent War to Everywhere Else The Wall Street Journal iPhone Fixes to Make if You're the Family IT Department This Year The Wall Street Journal What Kind of Driver Will Your Kid Be? This Test Can Tell. The Wall Street Journal AT&T, Verizon, Sprint, T-Mobile US fined $200M for selling off people's location info - The Register I Bought the World's Hottest High-Tech E-Bike. Then Its Maker Went Bankrupt. The Wall Street Journal Apple's New Face Computer Is for Work The Wall Street Journal Hands Off! With $3500 Headsets in the Wild, New Social Norms Apply The Wall Street Journal Schools Want to Ban Phones. Parents Say No. The Wall Street Journal Niklaus Wirth, Who Inspired a Generation of Computer Programmers, Dies at 89 The Wall Street Journal Vision Pro Review: Apple's First Headset Lacks Polish and Purpose The New York Times He Stole Hundreds of iPhones and Looted People's Life Savings. He Told Us How. The Wall Street Journal The Accounting Technology Lab Podcast: Personal Tech at CES 2024 CPAPracticeAdvisor.com Boys Are Struggling. It Can Take Coaches, Tutors and Thousands a Month to Fix That. The Wall Street Journal 12 Apps We Can't Stop Using, for Better or Worse The Wall Street Journal 100 Cool Tech Gadgets in 2024, According to a Tech Expert BestProducts.com Best Tech Gifts of 2023 to Buy This Holiday Season, an Updated List - WSJ The Wall Street Journal Yun-Hee Kim promoted to Tech Editor, Corporate and Personal Technology The Washington Post The Four Steps to Better Password Security The Wall Street Journal Testing Apple’s Vision Pro The New York Times Turn On Your iPhone's Stolen Device Protection Now to Secure Your Money and Photos in iOS 17.3 Update - WSJ The Wall Street Journal Meta’s Ray-Ban Smart Glasses Use AI to See, Hear and Speak. What Are They Like? - The New York Times Snapchat's Friend-Ranking Feature Adds to Teen Anxiety The Wall Street Journal A Pain-Free Way to Secure All Your Online Accounts The Wall Street Journal Is the $139 Amazon Prime Subscription Still Worth It? The Wall Street Journal The Apple Video Feature Awkwardly Crashing Your Meetings - WSJ The Wall Street Journal What if You Never Had to Charge Your Gadgets Again? The Wall Street Journal The most personal technology | Jul 22nd 2023 The Economist Quick Tips to Save Time on the Telephone The New York Times Apple’s iOS 17.3 Stolen Device Protection Update Aims to Stop iPhone Thieves The Wall Street Journal Don't rent out that container ship yet: CIOs and biz buyers view AI PCs with some caution The Register Do You Have Painful 'Tech Neck?' This Expert-Approved Gadget Might Help The Wall Street Journal The Most Important Tech Company You've Never Heard of Is a Major Reason Computers Keep Getting Faster The Wall Street Journal Faster, Beefier, Cheaper: The Next-Generation Electric Skateboards Have Arrived The Wall Street Journal Meta Welcomes Headset War With Apple - WSJ The Wall Street Journal Meta and Google Are Betting on AI Voice Assistants. Will They Take Off? The New York Times Distracted, Forgetful and Hooked on Smartphones: Why More Women Are Being Diagnosed With ADHD The Wall Street Journal Ten years ago Microsoft bought Nokia's phone unit – then killed it as a tax write-off - The Register Yes, It's Rude to Use Your Laptop During Meetings—and More Tech Etiquette Rules You Might Be Breaking The Wall Street Journal You're Brewing It Wrong: The Coffee-Making Myths That Might Be Holding You Back The Wall Street Journal How to Cut Down Your Screen Time but Still Get Stuff Done The New York Times Why Tech Companies Are Not Your Friends: Lessons From Roku The New York Times EU duties might not hold off flood of China EVs The Register BASICally still alive: Classic language celebrates 60 years with new code and old quirks The Register New Tech That Asks 'Are You Sure About Sending a Nude Photo?' The Wall Street Journal How to Make Your Phone Last Forever: 6 Simple Tips The Wall Street Journal |
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 |