| |
| |
|
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 rel="nofollow" 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:
|
|
|
|
RELATED ARTICLES
Getting Started with HTML The basic language of the internet is html. If you can do crossword puzzles, if you can write a report for your teacher or boss, you can be creating web pages in a matter of minutes. 10 Time Saving Keyboard Shortcuts Time is money. And when you constantly have to divide your time between your mouse and your keyboard, your workflow rate really slows down. FTP - File Transfer Protocol Explained File Transfer Protocol (FTP) is a protocol that is part of the TCP/IP suite. It is the standard for transferring large amounts of data from server to server and from servers to clients. 15 Good Programming Habits 1. Before sitting down for coding, you must have formal or a paper-napkin design of the solution to be coded. How I Started Working With 3D Modeling Programs So I'll start from the very beginning.One day I was surfing in the web and I found one site -- www. 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. Deleting and Destroying Data Forever Peoples' private information needs to stay private, even after it has been erased. Wait a minute, after it's been erased?Have you ever given away an old computer or diskette, deleting the files off it, or giving it a quick format to make sure your information is gone? That might not be enough to stop some one from easily recovering the information!When you delete a file, normally the operating system and file system say, "ok the file is gone!" but at the physical level the information is still there. Internet Explorer Shortcuts for Mouse-o-phobes If you're like me, you occasionally find the ubiquitous mouse inconvenient. Here are keyboard shortcuts for Microsoft's Internet Explorer (I. 10 Tips to Stay Safe and Secure Online The Internet can be a dangerous place.While you're enjoying the convenience of online shopping, Internet banking and subscription websites, nasty people lurk around every corner. Upgrading Your PC for Non-experts IntroOne of the big advantages of PCs over earlier types of computers is that they're upgradable. If you get to the point where you need a faster computer, more storage space or whatever, you don't have to buy a new PC. Desktop Security Software Risks - Part 2 This is the third in a series of articles highlighting reasons why we need a new model for anti-virus and security solutions.Reason #2: the Desktop Security Software RisksThe risks of placing software on the desktop are such that I will be breaking this article into two parts. Buying a Home Theater Receiver Buying a receiver is one of the most important decisions you're going to have to make when building your home theater. The receiver has a number of functions including; connecting and switching audio sources; connecting and switching video sources; decoding surround sound formats; amplifying an audio signal and sending it to your speakers; tuning in to radio stations; and acting as the interface between you and your home theater. Consumer Electronic Information: The Basics of the DLP Projector Projectors have come a long way in the past few decades. The desktop fossils that were once used to show home moviesor classroom filmstrips are a thing of the past. Get Ahead When You Build Your Own Computer If you've been kicking around the idea of building your own computer, it actually isn't a bad idea. It's easier than you might think, and you can probably come out with a system that gives you more kick for your money, than you'd see in retail, or those made-to-order places. Web Standards HTTP ProtocolThe web is run on port 80. You are probably wondering what "port 80" is, right (whether you actually are or not is irrelevant)? Well, the answer is easy (not really). 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. Be Prepared in the Event Computer Disaster Strikes ComputersBusinesses and individuals alike have all grown to rely on computers. The reliance is never more apparent than when something happens to the horrid little box that makes our lives easier. Cisco Certification: What To Expect On Exam Day Cisco Certification: Taking Your First Certification ExamYou've studied hard; you've practiced your configurations; you've used your flash cards over and over again; and finally, the big day is here. Your first certification exam!For many Cisco certification candidates, their first exam is the CCNA Composite exam or one of the two exams that make up the CCNA, the Introduction To Networking exam or the ICND (Interconnecting Cisco Networking Devices) exam. Email Management If you utilize a computer at home or work it is likely that you use email. Email is an electronic message that is sent from one computer to another following a specific protocol (Simple Mail Transfer Protocol or SMTP). 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.
|
| home | site map | contact us |
