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.
So, what can we do? Thankfully, we can use special little codes called entities in our text instead of these sym bols. None of the exam ples shown so far are worth keeping, though. Th e H om e pa ge : t h e St a r t in g Poin t for All W e b Sit e s At the very beginning of this chapter, we looked at a basic web page with nothing on it the car chassis with no bodywork or interior. You saved the file as basic. The figure below shows what it should look like. You've passed your underwater navigation skills and successfully found your way to the start point - or in this case, our home page.
Im portant: Hey! You should be looking at som ething like the display shown below. But what exactly is the site about? Notice that, despite our inclusion of a couple of headings and a couple of paragraphs, there is little to suggest what this site is about. Next, add the following text.
Note that there is m ore than one paragraph. We arrange weekends away as sm all groups to cut the costs of accom m odation and travel, and to ensure that everyone gets a trustworthy dive buddy.
Finally, add som e sim ple contact details as follows: "To find out m ore, contact Club Secretary Bob Dobalina on 0 7 or em ail bob bubbleunder. We arrange weekends away as small groups to cut the costs of accommodation and travel and to ensure that everyone gets a trustworthy dive buddy. The im portant thing to focus on at this stage is what the content of your site should com prise, and how it m ight be structured. To use this address, a site visitor w ould need to copy and paste the address into an em ail m essage.
The mailto: prefix tells the brow ser that the link needs to be treated as an em ail address that is, the em ail program should be opened for this link. The content that follow s the mailto: section should be a valid em ail address in the form at username domain. Add this to the w eb page now , save it, then refresh the view in y our brow ser.
Try clicking on the underlined text: it should open y our em ail program autom atically , and display an em ail form in w hich the To: address is already com pleted. This is useful for blind visitors to your site, search engines, and users of slow Internet connections. Go and grab divers-circle. The im age is shown below. Open index. It should look like the display shown below. Addin g St r u ct u r e Paragraphs?
No problem. But what on earth is a div? A div is used to divide up a web page and, in doing so, to provide a definite structure that can be used to great effect when com bined with CSS. When you place content inside a div , it has no effect on the styling of the text it contains, except for the fact that it adds a break before and after the contained text. Unlike a p elem ent, the div does not add any m argins or padding.
This really is a golden rule. These are listed below. Rem em ber that attribute nam es should be written in lowercase, and their values should be contained within quotation m arks. Im portant: No Sharing id s id attributes are used in XHTML to uniquely identify elem ents, so no tw o elem ents should share the sam e id value. N o t e : h1 , header , a n d head An id attribute set to header should not be confused w ith headings on the page h1 , h2 , and so on ; nor is it the sam e as the head of y our HTML page.
In the snippet below, that section has been changed to a div with an id attribute: Exam ple 2. This is called nesting. Nesting elem ents can help to logically group sections of a web page together, just as you m ight do in the real world by placing a selection of sm all boxes containing sim ilar item s inside a larger box.
Indenting y our code can help resolve problem s later, as y ou can m ore clearly see w hich item s sit inside other item s. It does not affect how the brow ser interprets or display s the w eb page.
Notice that, in the m arkup above, com m ents appear after som e of the closing div tags. These com m ents are optional, but again, com m enting is a good habit to get into as it helps you fix problem s later. Adding som e com m ents here and there can really help you debug later. Save it as index. Got that file ready? First, m ake two copies of the file: Click on the index.
Repeat the process once m ore. You should now have three HTML files in the folder that holds your web site files. The index. Renam e one file as contact. Renam e the other one as about. If y our filenam e appears as just index in W indow s Explorer, y our sy stem is currently set up to hide extensions for files that W indow s recognizes. To m ake the extensions visible, follow these sim ple steps: 1. Launch W indow s Explorer.
Select the Vie w tab. Opening a file in TextEdit is a sim ilar process. In your text editor, open each page in turn and edit them as follows rem em bering to save your changes to each before you open the next file : index. Now, each of the three files contains the content that suits its respective filenam e, but a further change is required for the two newly created files. Open about. Next, open contact. If everything has gone to plan, you should have three files nam ed index.
The m arkup for each should be as follows: index. Try for yourself: open index. How will you get from one page to another? To enable site visitors to m ove around, we need to add navigation. Navigation relies on anchors, which are m ore com m only referred to as links. The a elem ent contains the link text that will be clicked which, by default, appears on the screen as blue, underlined text.
Our navigation is just a list of three links. A good position would be just after the header has finished, before the m ain body content starts. In the code below, the navigation block appears in position on the hom epage: index. Add the block of links to contact. It should be possible to flick between all three pages.
Th e blockquote W h o Sa id Th a t? Here are the lines: " Happiness is a dip in t he ocean followed by a pint or t wo of Old Speckled Hen. You can quot e m e on t hat! You can quote me on that! N o t e : D is p la y in g blockquote s In m ost brow sers, y our use of blockquote w ill see the quoted text indented in the page display. On the flip side, y ou should never use the blockquote elem ent for the purposes of indenting text.
This is very poor form. Only use blockquote for its intended purpose: to present a quotation. There are other, better w ay s to create visual indentations, nam ely CSS. One way is to use the cite elem ent. A citation, by default, will style the text in italics.
And when they came home they'd find me sitting on the sofa, drinking beer and watching TV soaps. If you can im agine yourself adding som e kind of inflection as you say a word, then em phasis is probably what you need. By default, adding em will style text in italics, while using strong m akes the text bold.
You can com bine the two if you want, but usually, one or the other will suffice. The exam ples below should help you understand what these elem ents are used for. The figure below shows how they appear in the browser. Well, this is just an excuse for a headline pun. We have one m ore elem ent to look at: the break elem ent. The break elem ent br basically replicates what happens when you hit the carriage return on an old typewriter.
Be careful in y our use of br. But, som ehow, despite all your efforts, the web pages are still looking a little on the bland side. Addin g Som e St yle Earlier in this article, we stepped through the process of setting up your com puter so that we could develop web sites, and pulled together the beginnings of a web site with which you could im press your friends and fam ily.
What have you done wrong? The answer is: nothing. J ust let them see what you can do with this rolling shell! CSS is a language that allows you to change the appearance of elem ents on the page: the size, style, and color of text, background colors, border styles and colors—even the position of elem ents on the page.
The style attribute can contain one or m ore declarations between its quotation m arks. A declaration is m ade up of two parts: a property , and a value for that property. In the exam ple above, the declaration is color: red color being the property and red being its value. If you wanted to, you could add another declaration to the exam ple above.
For instance, as well as having the text display in red, you m ight want it to appear in a bold typeface. You could carry on adding styles in this way, but beware, this approach can be m essy. Addin g I n lin e St yle s Open about. Refer to the previous exam ple as you create the style. Does the m arkup for your paragraph look like this? It should appear like the page shown below.
You can do this using a span elem ent, which can be wrapped around any content you like. Unlike p , which m eans paragraph, or blockquote , which signifies a quotation, span has no m eaning. A span is little m ore than a tool for highlighting the start and end of a section to which you want to apply a style.
Em bedded sty le sheets are a logical step up. An em bedded sty le sheet is a section you add to the start of a web page that sets out all the styles that will be used on that page. The selector instructs the browser to apply all the declarations between the curly braces to certain elem ents. For this reason, an em bedded style sheet is a m arked im provem ent over inline styles. But what if you have a web site that com prises m any pages?
If you want to m ake your changes across the whole site, using em bedded style sheets in the way I dem onstrated above is still not quite the perfect solution. The best solution is to use an external style sheet. Every page needed 20 or m ore different tweaks, and each tweak had to be applied consistently to every page of the site. Inevitably, som e pages were m issed and eventually the redesign plan was uncerem oniously dropped. In short, the ugly web site rem ained ugly for a whole lot longer before dying a nasty death through sheer negligence indeed, there are m any such legacy docum ents littered around the Web today.
This need not be the case though. CSS gives you the power to set styling rules in one place. When you want to m ake changes to your web site, you m ake changes in that one place, and your whole web site changes autom atically to reflect those new styles. Happy Days! CSS Support Is Here The good news is that the large m ajority of web browsers in use today offer excellent support for CSS though this has not always been the case, which is why som e people were slow to adopt CSS-based design in the past.
Som e browsers can choke on a few of the m ore advanced CSS techniques, but, by and large, you can style your web pages using CSS and be confident that what you see on your screen is the sam e view that Open your text editor and enter the following: style1.
Note that the first few lines we typed into our CSS file will not actually do anything. Above, we used the com m ent sim ply to m ake a note about the purpose of the file, nam ely that it is the CSS for the Bubble Under site. To do this, you need to add a link elem ent to the head of each and every web page that will be styled using CSS. Our site contains just three pages at the m om ent, so this will be nice and easy.
The link elem ent sim ply links a file to the page on which the elem ent appears; in this case, the linked file is a style sheet. The href attribute tells the web browser where the style sheet file style1.
You should always include these im portant attributes when linking to a. Em pty Elem ent Alert! Over the past two years, Simple-Talk has published articles on a variety of SysAdmin topics, from Exchange to Virtualization, and including everything from Powershell to Unified Messaging.
We have brought the best of these articles together to form The SysAdmin Handbook. With over fifty articles packed into this book, it will be an essential refere The Deno Handbook.
In particular, the goal is to get you up to speed quickly with Deno The InfoSec Handbook. The InfoSec Handbook offers the reader an organized layout of information that is easily read and understood. Allowing beginners to enter the field and understand the key concepts and ideas, while still keeping the experienced readers updated on topics and concepts. It is intended mainly for beginners to the field of information security, writte This Open Access 7th edition of the European Society for Blood and Marrow Transplantation EBMT handbook addresses the latest developments and innovations in hematopoietic stem cell transplantation and cellular therapy.
Consisting of 93 chapters, it has been written by leading experts in the field. Discussing all types of stem cell and bone CSS Notes for Professionals.
0コメント