It will, however, m ean that som e of the suggested downloads or uploads m ay take longer to com plete, but you probably knew that already. N o t e : Pla n n in g , Sch m a n n in g At this point, it m ight be tem pting to look at y our m otives for building a w eb site.
Do y ou have a project plan? W hat objectives do y ou have for the site? As this is y our first w eb site and it w ill be a fairly sim ple one, w e can overlook som e of the m ore detailed aspects of site planning.
W hen that tim e com es, proper planning w ill be a far m ore im portant aspect of the job. So, what tools do you need? Any instructions and screen shots will be with Vista in m ind. Windows com es with a very sim ple text editor called Notepad. Many professional web designers who use com plicated software packages first started out m any years ago using Notepad; indeed, m any professionals who have expensive pieces of software that should be tim e -savers still resort to using Notepad for m any tasks.
It also loads m uch m ore quickly than fully-featured web developm ent program s. Bells and whistles are definitely not featured. Tip: Shortcut to Notepad To save y ourself navigating to this location each tim e y ou w ant to open N otepad, create a shortcut on y our desktop.
W hen y ou release the m ouse button, a shortcut to the application w ill appear on y our desktop. Notepad is the m ost basic of applications, as you can see below.
Internet Explorer sits right there in the Start m enu, also in the Pro gram s folder accessed via All Pro gram s from the Start m enu , in the Qu ick Lau n ch area bottom left of the Start m enu, near the Windows logo , and a shortcut m ay also lurk on your desktop.
These tools are virtually equivalent to the Windows program s m entioned above. Unlike Notepad, TextEdit works as a rich text editor by default, which m eans we can work with fonts, m ake text bold and italic, and so on.
The next tim e you create a new file in TextEdit, it will be a plain text docum ent. You can usually find Safari in the d o ck the dock is the bar of icons at the bottom of your screen , but you can also access it through the Applications folder.
To add a program to the dock, just drag its icon from the Applications folder onto the dock, and presto! The application is now easily accessible w henever y ou need it. If you are using a slightly older Mac, you m ay also have a copy of Internet Explorer installed. Our advice for Internet Explorer for Mac?
Send it to Trash. It also bears no real resem blance to its Windows counterpart, for those m ore com fortable using IE. Be yon d t h e Ba sic Tools You can certainly m ake a good start using the tools m entioned above. Countless other text editors and web browsers are available for download, and m any of them are free.
Fire fo x As m entioned in the Preface, Firefox is a very popular alternative to Internet Explorer and, as we proceed through this book, it will be our browser of choice for a num ber of reasons. As with NoteTab, Firefox offers a tabbed interface that helps keep your com puter free from window clutter. However, there are a few program s that you m ight like to consider as you m ove beyond the basics. As with NoteTab for Windows, TextWrangler can tidy up your workspace by allowing several text files to be open for editing at the sam e tim e the docum ents are listed in a pull-out drawer to one side of the interface, rather than in tabs.
Fire fo x Firefox is popular not just am ong Windows users, but also with Mac users, m any of whom prefer to use it instead of Safari often because of the extra features—known as ad d -o n s —that can be bolted on to the browser. A web page viewed in Firefox should display the sam e regardless of whether the browser is installed on a PC running Windows XP or Vista, on a Mac running OS X, or on Linux, a free, open source operating system generally favored by highly technical people who like to tinker with their com puters a lot.
The predictability of Firefox is a welcom e change from the bad old days of endless browser com petition, and is one very good reason why we will m ainly use Firefox in the exam ples included in this book. A professional im age editing program , like Photoshop or Fireworks, costs hundreds of dollars. If you already have a copy of one of these, or a sim ilar im age editing program , by all m eans use it and experim ent with it.
Keep an eye open for free im age editors that are included on disks attached to the covers of Internet, com puting, and design m agazines. Software vendors often give away older versions of their software in the hope that users m ight be tem pted to upgrade to a new version at a later date. Look out for Paint Shop Pro, or any im age editor that supports laye rs —a way to construct an im age by stacking 2 or m ore layers, one on top of the other.
Ta k in g t h e Big Bo y s fo r a Sp in The m ost com m only used im age editing packages are available for trial dow nload. They are large dow nloads hundreds of m egaby tes and m ay need to be left to dow nload overnight, even on a broadband connection.
How ever, those 30 day s m ight just be enough tim e for y ou to use the softw are w hile y ou w ork through this book. Ad o be Ph o to s h o p A trial of the latest version of Photoshop is available for download [7]. Ad o be Fire w o rks You can download a trial version of Fireworks from the Adobe web site [10 ]. W in dow s Tools A standard Windows install has not always been blessed with im age editing software. In Windows Vista, the Photo Gallery application has seen som e big im provem ents over its previous XP incarnation and now includes som e basic, but still useful, im age m anipulation tools, including cropping, color, and contrast adjustm ent.
The Photo Gallery application can be found directly in the Start m enu. With that in m ind, you m ight like to try out an excellent im age m anagem ent tool that Google offers for free download.
M a c OS X Tools The Mac has a reputation for being favored by designers and creative types, and the platform m akes m any tools available to the budding artist. However, they usually com e at a price, and often that price is higher than those of the Windows equivalents. So, what free software can we use on the Mac, assum ing that we want som ething m ore perm anent than a 30 -day trial version of Photoshop or Fireworks?
Grap h icCo n ve rte r GraphicConverter has m uch greater capabilities than its nam e suggests. Although this is prim arily a tool for converting graphic files, it can also be used for sim ple editing tasks. The next task we m ust tick off our to-do list before we go any further is to create a space for your web site on the hard drive. W in dow s The easiest and m ost logical place to keep your web site files is in a dedicated folder within the D o cu m e n ts folder or the My D o cu m e n ts folder in Windows XP.
The D o cu m e n ts folder can be found inside your user folder. Missing y our My Docum ents folder in XP? This is how y ou can return the folder to y our desktop: From the Start Me n u , select Co n tro l Pan e l. Vis ta u s e rs : choose Pe rs o n alizatio n and listed in the top left, under the title Tas ks is the option to Ch an ge D e s kto p Ico n s.
You m ay now also close the Ap p e aran ce an d Pe rs o n alizatio n window. XP u s e rs : select Ch an ge th e d e s kto p backgro u n d from the list of options, then click the Cu s to m ize D e s kto p … button at the bottom. Check the My D o cu m e n ts option in the dialogue box that appears, then click OK. Close the Ap p e aran ce an d Th e m e s window also by pressing OK. What do you do next? Oh, and did we m ention that all this friendly, helpful advice is free of charge? We thought that m ight encourage you!
Finally, we m entioned som e m ore capable—and m ore expensive—options, such as Photoshop and Paint Shop Pro. You r Fir st W e b Pa ge s A wise m an once said that a journey of a thousand m iles begins with a single step. Elem ents tell the web browser what a particular item in the page is: a paragraph, a heading, a quotation, and so on. There are som e things that are essential to the process of driving; others are m ere fashion item s.
To drive the car you need to have wheels including the steering wheel , and a place to sit. The car m ust also have som e kind of chassis to which the bodywork can be bolted. An engine is required to power the car, as is bodywork to which your nonessential, but spiffy trim can be attached. Anything less, and all you have is a collection of attractive—but useless!
Like the car, your web page also needs to have a chassis: a basic structure upon which everything else can be built. But what does this hypothetical chassis look like? Position your cursor som ewhere on the page other than over an im age , and right-click Ctrl-click on a Mac. You should be presented with a context m enu sim ilar to those shown below. A car enthusiast would call it a project—a solid foundation that needs a little extra work to turn it in to som ething usable. The sam e goes for a web page.
It m ust be the first item on a web page, appearing even before any spacing or carriage returns. Have you ever taken a docum ent you wrote in Microsoft Word 20 0 7 on one com puter, and tried to open it on another com puter that only had Word 20 0 0 on it?
This is where the doctype com es in. The browser uses this inform ation to decide how it should render item s on the screen. Got all that? There are way too m any abbreviations for this paragraph. You should, how ever, be aw are of its existence at the very least. W 3C W 3C is an abbreviation of the nam e W orld W ide W eb Consortium , a group of sm art people spread across the globe w ho, collectively , com e up w ith proposals for the w ay s in w hich com puting and m arkup languages used on the W eb should be w ritten.
The W 3C docum ents are the starting point, and indeed every thing in this book is based on the original docum ents. What com es next? Som e HTML! Rem em ber, elem ents are the bricks that create the structures that hold a web page together. But what exactly is an elem ent? What does an elem ent look like, and what is its purpose? Inside a tag, there is a tag nam e; there m ay also be one or m ore attributes.
The figure below shows what we have. Attributes appear only in the opening tag of any given elem ent. Back to the purpose of the htm l elem ent. There are two m ajor sections inside the htm l elem ent: the head and the body. Th e h e a d Ele m e n t The head [16] elem ent contains inform ation about the page, but no inform ation that will be displayed on the page itself.
As the figure below shows, it really pays to put som ething m eaningful as a title, and not just for the sake of those people who visit our web page.
It also appears in the dock on a Mac. If users decide to add the page to their bookm arks or favorites , the title will be used to nam e the bookm ark. Your title elem ent is used heavily by search engines to ascertain what your page contains, and what inform ation about it should be displayed in the search results. J ust for fun, and to see how m any people forget to type in a useful title, try searching for the phrase Untitled Docum ent in the search engine of your choice.
In the exam ple above, the meta tag tells the browser which character set to use specifically, UTF-8, which includes the characters needed for web pages in just about any written language. Self-closing Elem ents The m eta elem ent is an exam ple of a self-closing elem ent or an em pty elem ent.
Even the m ost hardened and w orld-w eary coders w ould have difficulty rem em bering these elem ents exactly , so m ost do the sam e thing—they copy from a source they know to be correct m ost likely from their last project or piece of w ork.
Fully -fledged w eb developm ent program s, such as Dream w eaver, w ill norm ally take care of these difficult parts of coding. But if y ou are using a hum ble text editor and need som e help, y ou need only rem em ber that there is a com pletely searchable HTML reference, accessible at any tim e at SitePoint.
Th e body Ele m e n t Finally, we get to the place where it all happens. However, to start to appreciate how everything fits together, you really need to see a sim ple page with som e actual content on it. Hopefully you will get to see how the markup that drives the page relates to the end result that you can see on screen. Just to show how it works. Enter the filenam e as basic. Select UTF-8 from the Encoding drop -down list. Click Save. Find the Sites folder, enter the filenam e as basic.
We want to save this file with an. Because their com puter is set up to read Korean text, and y ours is set up to create English text. UTF-8 can handle just about any language there is including som e quite obscure ones and m ost com puters can read it, so UTF-8 is alw ay s a safe bet. Next, using Windows Explorer or Finder, locate the file that you just saved, and double-click to open it in your browser.
The figure below shows how the page displays. The figure below shows a direct com parison of the docum ent displays. In the sam e way, the p elem ents contain the text in the two paragraphs. All of our attribute nam es w ill be in low ercase, too. If we wanted to include a subheading beneath this heading, we would use the h2 elem ent.
A subheading under an h2 would use an h3 elem ent, and so on, until we get to h6. The lower the heading level, the lesser its im portance and the sm aller the font size unless you have re-styled the headings with CSS, but m ore of that later in this article. With headings, an im portant and com m onsense practice is to ensure that they do not jum p out of sequence. In other words, you should start from level one, and work your way down through the levels in num erical order.
The elem ent we use to deal with blocks of text is the p elem ent. An unordered list—known as bullet points to the average person—m akes use of the ul elem ent. In both types of list, individual points or list item s are specified using the li elem ent.
So we use ol for an ordered list, ul for an unordered list, and li for a list item. Sim ple. To see this m arkup in action, type the following into a new text docum ent, save it as lists. A lovely, concise little paragraph.
Did you type it all out? Rem em ber, if it seem s like a hassle to type out the exam ples, you can find all the m arkup in the code archive, as I explained in the preface. When displayed in a browser, the above m arkup should look like the page shown below. Any guesses? All will be revealed in good tim e.
The trouble is, if you had a reason to attach the hubcaps that way before, surely you should do it the sam e way again. What a quandary. You m ight build a site then not touch it again for six m onths. Then when you revisit the work, you m ight find yourself going through the all-too-fam iliar head-scratching routine. Fortunately, there is a solution. XHTML—like m ost program m ing and m arkup languages—allows you to use com m ents. Handy one, that. Why not? Oh, and did you spot how we snuck another new elem ent in there?
Read that part to yourself now, and listen to the way it sounds in your head. Now you know when to use the em elem ent. Usin g Com m e n t s t o H ide M a r k u p fr om Br ow se r s Te m por a r ily There is no lim it to the am ount of inform ation you can put into a com m ent, and this is why com m ents are often used to hide a section of a web page tem porarily. No fee costs no downloading costs, the only thing which is needed your pc and our free samples.
Because we teach through live examples right at our site and you the experts of different php languages. So now learning is not a tough job any more. Phptpoint is going to be your new learning point where you can explore your knowledge and choose from different tutorial samples. This has the best examples to feed your requirements of learning. All other colors are obtained by using a combination of the three main colors, which in their mixture must create a white color. Experimentally it was proven that red, green and blue are the most suited for human eyes.
As we know, the surface of the screen is not solid, it consists of small dots called pixels. Each pixel consists of three blocks, red, green and blue. By varying the brightness level of each block we can get different colors. The information about the brightness level is encoded using binary code. For example, the most common for modern displays bit True Color system uses three bytes with values from 0 to for each pixel on the screen.
Absolutely red color will have a value This means that the amount of red color is full, of the green is 0 and of the blue is also 0. Absolutely blue color will have a value of 0. With different combinations different colors are formed: bright-violet is RGB color can also be encoded with the help of the hexadecimal system.
Here are some standard colors:. This color system is called additive. In other words, we take black color no color and add primary colors to it, mixing them all the way up to white.
This way we can encode 16 colors, which is more than enough for human eyes. In a word, alt tag is an abbreviation of what is essentially an alt attribute on an image tag showing a nature or a content of its image. That is why each image on any successful website has its alt tag that describes what is actually on it. As a result, various screen readers will make the image from your website accessible while reading out this alternative text.
To illustrate the situation, that is an example of a complete HTML image tag:. So, why does one need alt text for their images? As it has already been mentioned, the alt text literally tells what an image depicts as well as describes the main function of this image on the web page. Generally speaking, you just propose a person to use some services or buy some products that you provide with the help of this button.
Thus, its alternative text simply explains what the button is used for. As you can see, there is nothing complicated. Here is another simple example of using alt text.
As you can see from the screenshot below, this blue call-to-action button lets a person get a shown website template right now.
What is more, talking about the image buttons, you could also put some extra call to action text to it. Actually, it is quite popular policy, so I am sure that you have seen such things a plenty of times while surfing through the web space.
Below you can see the next example of this function. Keep in mind that every image you want to use for your online project should have its own alternative text. In point of fact, visually impaired and blind visitors of your site will also use alt in order to figure out what an image or a button is for. What else should you know about it? Ok, now you know a lot of information about the pluses of alternative text. Still, I know what you are thinking about right now: what should you do in case your image does not have a clear purpose?
Without a doubt, it is a logical question, so let me tell you a couple of words. First of all, remember that the images that you would like to use simply for the design of your website should be in your CSS and never in your HTML code. Shortly, the empty alt attribute looks like this:. To make things clear it is here to make sure that screen readers will pass over the image that has no purpose.
For today it was all the information about alternative text. To sum everything up, below you can see the list of the main functions of alt text.
Thus, giving your images an alt text is an easy but important thing. In addition, remember that this text may be provided in the alt attribute or in the surrounding context of your image. I hope you will remind all the given points because they are the main rules of a successful alt text creation. Also, you may watch this video from Matt Cutts that was made in order to help you with a nice alternative text creation. Still want to know more about alt?
In this case, I have a lot of useful articles to share with you! Furthermore, I would like you to tell me your own definition of alt! Maybe you have something to add? For this simple reasons, just leave your comment below! To begin with, CMYK cyan, magenta, yellow, key is the abbreviation for the name of the scheme, which combines the primary pigments. Thus, C means cyan aqua , M means magenta pink , Y is for yellow and K stands for the key.
As you may know, these days K color means black in the modern printing world. Still, things have not always gone this way. Historically, there were other colors used for Key: brown and even blue. Honestly speaking, people used the color that was the cheapest ink to get for their needs. That is why today there are a lot of various draw and paint programs that are able to make use of both mentioned color models.
Still, keep in mind that the CMYK model is usually used for the creation of the printed color illustration. On the other hand, the RGB color scheme is mostly used for the computer displays. Without a doubt, there is a difference between color and pigment. What is more, it is a fundamental one!
To make things clear, a color depicts the energy that is radiated by a luminous object.
0コメント