HTML, XHTML, and. CSS for the Absolute. Beginner. Jerry Lee Ford, Jr. Course Technology PTR. A part of Cengage Learning. Australia • Brazil • Japan • Korea. "HTML, XHTML, & CSS For the Absolute Beginner" provides beginner level programmers with an entry level introduction to HTML, XHTML and. HTML, XHTML, and CSS For The Absolute Beginner [Jr. Jerry Lee Ford] on narledikupttemp.ml *FREE* shipping on qualifying offers. HTML, XHTML, & CSS For the.
|Language:||English, Spanish, Indonesian|
|Genre:||Health & Fitness|
|Distribution:||Free* [*Sign up for free]|
Oh, and did you spot how we snuck another new elem ent in there? Actually, that last question was there to illustrate this point: 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. Rem em ber, you write a com m ent like this: So, what can we do? Thankfully, we can use special little codes called entities in our text instead of these sym bols.
Som e of the m ost com m on are shown below: None of the exam ples shown so far are worth keeping, though. The diving club com prises a group of local enthusiasts, and the web site will provide a way for club m em bers to: You saved the file as basic. Open that file in your text editor now, and strip out the following: Have a go at the following: Once you m ake these changes, your m arkup should look som ething like this the changes are shown in bold: 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. And rem em ber: You should be looking at som ething like the display shown below. So, the hom epage reads a lot like m any other hom epages at this stage: 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.
Beneath the content you already have on the page, add another heading: 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: With that in m ind, you should have som ething m uch like the following m arkup in the body of your docum ent: 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. There certainly is: The mailto: The content that follow s the mailto: 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: 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. Com pare the following: This really is a golden rule. Rather than leaving the paragraph tags as they are, you m ight decide to have som ething like this: These are listed below. We have: Rem em ber that attribute nam es should be written in lowercase, and their values should be contained within quotation m arks. 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.
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: 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: 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: Try for yourself: 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: Add the block of links to contact. It should be possible to flick between all three pages. This is a landm ark: Th e blockquote W h o Sa id Th a t?
Here are the lines: You can quot e m e on t hat! You can quote me on that! 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: 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. The blockquote elem ent has a cite attribute for this very purpose: 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 br basically replicates what happens when you hit the carriage return on an old typewriter.
However, if you just want to signify the start of a new line, rather than a new paragraph, the elem ent you need is br , as dem onstrated in this lim erick: 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: 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: This is what it looks like: The style attribute can contain one or m ore declarations between its quotation m arks. A declaration is m ade up of two parts: In the exam ple above, the declaration is color: 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.
To do this, you need to use the style elem ent inside the head: The actual style declarations are enclosed in a set of curly braces: The selector instructs the browser to apply all the declarations between the curly braces to certain elem ents. In this case, our style sheet contains one rule: Figure 3. If you wanted to change the color of all paragraphs text to red, you need only to change it in the style sheet at the top of the page: 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: 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.
Below, the new line appears in the context of the hom epage: 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!
The link elem ent is another of those special em pty elem ents we discussed earlier in this article: Open each of your web pages—index. Then, try opening each one in your web browser. All of your paragraphs should now display in bold, blue text.
If you change the color specified in your. Go ahead, give it a try. All we need to do is set som e styles. The best place to use this is within the body elem ent, as shown below: The nature of the way in which CSS is applied m eans that every elem ent contained in the body elem ent will take on the sam e font unless another font is specified for a given elem ent or elem ents within body —but m ore on that a little later.
Verdana it is! So, we could type the following: Failing that, please try using Helvetica and, failing that, Arial. If none of the above are installed, just use whatever sans-serif font is available.
Type the above CSS into style1. Save the file, then open the hom epage index. If everything went to plan, your web page all three of them , actually should display slightly differently than they did before. The figure below shows the appearance of our newly-styled hom epage. Sans -serif Fonts: N ote that w hen y ou refer to a sans-serif font in CSS, y ou m ust hy phenate the tw o w ords, i. In your text editor, add the following to style1.
All the first -level headings now display in the Trebuchet MS font, while everything else displays in Verdana. If y ou have saved the altered file, check that y ou ty ped the CSS exactly as described.
If y ou did, y ou m ay be experiencing a caching problem w ith y our brow ser. Caching is w hen y our brow ser accesses files previously saved to the hard drive w hen y ou visit a given w eb page, rather than dow nloading new files each tim e.
For exam ple, y ou enter the URL, and the brow ser pulls the page stored in its cache. This speeds up the process of display ing a w eb page that has been loaded before. Unfortunately , y our cache can soon becom e out-of -date, and w hen that happens, the page y ou visit m ight not display the m ost recent data.
This happens m ost frequently w ith im ages, but it can also occur using CSS files. Therefore, the am ount of space the cache takes up on y our hard disk before cached content is replaced w ith new er data can be adjusted. Copy the CSS below into your style1.
Verdana, Helvetica, Arial, sans-serif; background-color: One is to use recognized color nam es such as navy , blue , red , yellow , and so on. These are easy to rem em ber and spell, but you can be lim ited by the range. Another way of referencing colors is to use a hexadecim al color specification. I m ean, just look at the code for it: This obscure-looking reference e2edff translates to a light shade of blue.
You could not, as a beginner, begin to guess that this would be a light blue. Thankfully there are num erous tools on the Web that let you choose a color from a chart often called a color picker , then give you the code to m atch.
Colors in HTML are often w ritten as a hexadecim al color specification. You m ight rem em ber the hexadecim al counting sy stem from y our high school m ath class. Or m ay be y ou w ere asleep up the back of the room.
N ever m ind. W ell, y ou do now! The hexadecim al sequence looks like this: W ell, as y ou can see, after w e reach 9, instead of going straight to 10 as w e do w hen counting in decim al w e go through A, B, C, D, E, and F before w e finally hit That gives us six extra digits to use w hen w e count. Sound confusing? W ell, as it so happens, com puters can count in hexadecim al far better than hum ans can!
The key here is that all of those num bers that w e know and love in the decim al sy stem , like 2,, 15,0 0 0 ,0 0 0 , and 42, can be represented in hexadecim al. And Table 3. The values represent the proportions of red the ff part , green the first tw o zeros , and blue the second tw o zeros that are m ixed to create the specified color. Those three prim ary colors can be com bined to display any color on the screen, sim ilar to the w ay a television set uses different am ounts of red, green, and blue to create a single dot on its screen.
It m ay not surprise y ou, then, to learn that ff w ill give y ou the color red. The line-height property is an interesting one.
Try tweaking this value, save your CSS file, and see how the new value affects the text on your web page. The padding property is used to provide space between the outside edge of the elem ent in question and the content that sits inside it. We m entioned pixels before, when we specified the size of an im age, but what is a pixel?
Basically, one pixel is one of the tiny dots that m ake up what you see on the com puter screen. Now, to the paragraph styles: Font-size keywords range from xx-small to xx-large and offer a quick way to style text. There are so m any m ore from which you can pick and choose—too m any possibilities, in fact, for us to be able to list them all here.
However, this section lists som e of the basic properties and values with which you m ight like to experim ent. Feel free to try any of these in your CSS file. Be sure to provide options that users are likely to have on their com puters e.
Arial, Verdana, etc. Relative font sizes are definitely the preferred option. Backing It Up!
Before y ou experim ent using the CSS properties above, it m ight be an idea to m ake a backup of y our CSS file, just in case y ou run into difficulties.
Rem em ber that y ou can dow nload all the exam ples used in this chapter from the code archive if y ou accidentally m angle y our CSS file. Re ca p: Our site now boasts a CSS file using a selection of attractive styles.
Find the paragraph about m eeting up in a local pub and add an em phasis elem ent as shown here: As you can see, em phasis elem ents appear in italics by default. Open style1. Does your page look like the figure below? Now, whenever you add an em elem ent to any web page of your site assum ing that page is linked to style1. But this raises an interesting point: Presum ably, the default styles that browsers use were selected carefully; how can you be sure that redefining the styles is a good idea?
They probably are. Perhaps a com prom ise is in order. All we need to do is rem ove the font-style declaration; the em elem ent will then revert to its default italicized appearance, as depicted below: Em phasis or Italics? W hy not?
W ell, m arking text as i say s nothing about its m eaning; i only com m unicates how it should be presented on the screen.
Such elem ents are referred to as presentational HTML elem ents, and they should be avoided. Likew ise, the b elem ent for bold , another old HTML elem ent, should not be used. The preferred option is to use strong or, if y ou just w ant to display headings in bold, use CSS.
W hy is this im portant?
It m ight not seem a big deal as y ou look at the italicized text in y our w eb brow ser. But im agine if y ou w ere blind, and y ou used softw are that read w eb pages aloud to y ou, instead of display ing them on the screen. This program called a screen reader m ight read text m arked up w ith an em elem ent using slight em phasis, and text m arked up w ith strong in a m ore pow erful voice though this, of course, depends on the screen reader being used. But w hat w ould it do w ith text m arked up w ith i or b?
W ell, these elem ents say nothing about the m eaning of the text, so it w ould not treat them in any special w ay —thus potentially losing the m eaning that y ou w ere try ing to convey. A search engine e. One other presentational tag that y ou m ight see others use, but should never copy , is the u elem ent. W rap this around som e text and needless underlining occurs that only serves to confuse users. A pen or a sheep?
So, what tools do you need? Any instructions and screen shots will be with Vista in mind. Windows comes with a very simple text editor called Notepad.
Many professional web designers who use complicated software packages first started out many years ago using Notepad; indeed, many professionals who have expensive pieces of software that should be time-savers still resort to using Notepad for many tasks.
It also loads much more quickly than fully-featured web development programs. Bells and whistles are definitely not featured.
Tip: Shortcut to Notepad To save yourself navigating to this location each time you want to open Notepad, create a shortcut on your desktop. When you release the mouse button, a shortcut to the application will appear on your desktop.
Notepad is the most basic of applications, as you can see below. Internet Explorer sits right there in the Start menu, also in the Programs folder accessed via All Programs from the Start menu , in the Quick Launch area bottom left of the Start menu, near the Windows logo , and a shortcut may also lurk on your desktop.
These tools are virtually equivalent to the Windows programs mentioned above. Unlike Notepad, TextEdit works as a rich text editor by default, which means we can work with fonts, make text bold and italic, and so on.