How to make Web page using HTML and CSS

simple web page - html & css tutorial for beginners and web page html css template
JohenCorner Profile Pic
JohenCorner,France,Professional
Published Date:02-08-2017
Your Website URL(Optional)
Comment
CREATING A SIMPLE PAGE Part I provided a g eneral overview of the web design environment. Now that we’ve covered the big concepts, it’s time to roll up our sleeves and start creat- ing a real web page. It will be a simple page, but even the most complicated pages are based on the principles described here. In this chapter, we’ll create a simple web page step by step so you can get a feel for what it’s like to mark up a document with (X)HTML tags. The exercises allow you to work along. This is what I want you to get out of this chapter: • Get a feel for how (X)HTML markup works, including an understanding of elements and attributes. • See how browsers interpret (X)HTML documents. • Learn the basic structure of an (X)HTML document. • Get a first glimpse of a style sheet in action. Don’t worry about learning the specific text elements or style sheet rules at this point; we’ll get to those in the following chapters. For now, just pay attention to the process, the overall structure of the document, and the new terminology. A Web Page, Step by Step You got a look at an (X)HTML document in Chapter 2, How the Web Works, but now you’ll get to create one yourself and play around with it in the browser. The demonstration in this chapter has five steps that cover the basics of page production. Step 1: Start with content. As a starting point, we’ll add raw text content and see what browsers do with it. Step 2: Give the document structure. You’ll learn about (X) HTML elements and the elements that give a document its structure. 1a Before We Begin, Launch a Text Editor Step 3: Identify text elements. You’ll describe the content using the appropri- t e R m I n O l O G y ate text elements and learn about the proper way to use (X)HTML. (X)HTML Step 4: Add an image. By adding an image to the page, you’ll learn about (X)HTML is a shorthand way to attributes and empty elements. refer to both HTML and its latest version, XHTML. Authors may Step 5: Change the look with a style sheet. This exercise gives you a taste of write documents in either version. formatting content with Cascading Style Sheets. For a detailed explanation of the differences, see Chapter 10, By the time we’re finished, you will have written the source document for Understanding the Standards. the page shown in Figure 4-1. It’s not very fancy, but you have to start some- where. We’ll be checking our work in a browser frequently throughout this demon- stration—probably more than you would in real life—but because this is an introduction to (X)HTML, it is helpful to see the cause and effect of each HTML the Hard Way small change to the source file along the way. With all the wonderful web- authoring tools out there today, chances are you will be using one to create your pages. You may be asking, “If the tools are so great, do I need to learn HTML at all?” The answer is yes, you do. You may not need to have every element memorized, but some familiarity is essential for everyone who wants to make web pages. If you apply for a “web designer” position, employers will expect that you know your way around an (X)HTML document. I stand by my method of teaching (X)HTML the old-fashioned way—by hand. There’s no better way to truly understand how markup works than F Figur igure e 4-1. 4-1. In In this this chapt chapter er, , w we e’ ’ll ll writ write e the the sour sourc ce e do document cument for for this this w web eb page page st step ep b by y st step ep. . typing it out, one tag at a time, then opening your page in a browser. It doesn’t take long to develop a feel for marking up documents properly. Before We Begin, Launch a Text Understanding (X)HTML will make Editor using your authoring tools easier and more efficient. In addition, you In this chapter and throughout the book, we’ll be writing out (X)HTML will be glad that you can look at a documents by hand, so the first thing we need to do is launch a text editor. source file and understand what you’re seeing. It is also crucial for The text editor that is provided with your operating system, such as Notepad troubleshooting broken pages or (Windows) or TextEdit (Macintosh), will do for these purposes. Other text fine-tuning the default formatting editors are fine as long as you can save plain text (ASCII) files with the .html that web tools produce. extension. If you have a WYSIWYG web authoring tool such as Dreamweaver or FrontPage, set it aside for now. I want you to get a feel for marking up a document manually (see the sidebar, (X)HTML the Hard Way).  2 Part II: HTML Markup for Structurea Before We Begin, Launch a Text Editor This section shows how to open new documents in Notepad and TextEdit. Even if you’ve used these programs before, skim through for some special set- tings that will make the exercises go more smoothly. We’ll start with Notepad; Mac users can jump ahead. Creating a new document in Notepad (Windows users) These are the steps to creating a new document in Notepad on Windows XP (Figure 4-2). 1. Open the Start menu and navigate to Notepad (in Accessories). 1 2. Clicking on Notepad will open a new document window, and you’re ready to start typing. 2 3. Next, we’ll make the extensions visible. This step is not required to make (X)HTML documents, but it will help make the file types more clear at a glance. In any Explorer window, select “Folder Options...” from the Tools menu and select the “View” tab. Find “Hide extensions for known 34 file types” and uncheck that option. Click OK to save the preference 5 and the file extensions will now be visible. T To o mak make e t th he e e ex xtensions visible go to My C tensions visible go to My Computer omputer T Tools F ools Folder Options older Options 33 44 Selec Select the t the View tab View tab. . Clicking on Notepad will Clicking on Notepad will 22 55 open a new document. open a new document. F Find ind “ “H Hi id de e e ex xtensions tensions for known file t for known file types ypes” ” a an nd d u un nc ch he ec ck k. . T Th he en n c cl li ic ck k O OK K t to o s sa av ve e p pr refer efere en nc ce e. . Open the Star Open the Start t m me en nu u a an nd d n na av vi ig ga at te e t to o N No ot te ep pa ad d (All Pr (All Progr ograms ams A Ac cc cessories Notepad) essories Notepad) 1 1 F Figur igure e 4-2. 4-2. Cr Creating eating a a new new do document cument in in Not Notepad epad. . Chapter  , Creating A Simple Page (HTML Overview)  3a Before We Begin, Launch a Text Editor t I P Creating a new document in TextEdit (Macintosh users) To make it easy to get to TextEdit later, follow these instructions to save By default, TextEdit creates “rich text” documents, that is, documents that it in the Dock. With TextEdit running, have hidden style formatting instructions for making text bold, setting font click and hold on its icon in the Dock, then select “Keep in Dock” from the size, and so on. (X)HTML documents need to be plain text documents, so pop-up menu. The next time you we’ll need to change the Format, as shown in this example (Figure 4-3). need it, you can double-click its icon in the Dock, launch the program, 1. Use the Finder to look in the Applications folder for TextEdit. When and alleviate to the need to navigate you’ve found it, double-click the name or icon to launch the application. to the Applications folder. 2. TextEdit opens a new document. You can tell from the text formatting menu at the top that you are in Rich Text mode 1. Here’s how you change it. 3. Open the Preferences dialog box from the TextEdit menu. 4. There are three settings you need to adjust: Select “Plain text”. 2 Select “Ignore rich text commands in HTML files”. 3 Turn off “Append ‘.txt’ extensions to plain text files”. 4 5. When you are done, click the red button in the top-left corner. 5 6. Quit TextEdit and restart it to open a new document with the new Plain Text settings. The formatting menu will no longer be on the new document. 6 Rich Text to Plain text Rich Text to Plain text Plain Plain T Te ex xt t d do oc cu um me en nt ts s h ha av ve e n no o m me en nu u 66 11 T The formatting menu indicates the he formatting menu indicates the document is in Rich document is in Rich T Te ex xt t F Forma ormat t 22 T This mak his makes es T Te ex xt tE Edit dit open new documents open new documents in Plain in Plain T Te ex xt t F Forma ormat t 33 Check this so Check this so T Te ex xt tE Edit dit will displa will display the HTML y the HTML sour sourc ce e d do oc cu um me en nt t. .44 T Turn off the .tx urn off the .txt t e ex xtension so that tension so that y yo ou u Other Otherwise wise, , it displa it displays ys can name y can name your files with .html our files with .html HTML elements as HTML elements as Close the windo Close the window w 55 they w they would appear in ould appear in when when y yo ou u’ ’r re e done done a br a browser owser. . F Figur igure e 4-3. 4-3. L Launching aunching T Tex extE tEdit dit and and cho choosing osing P Plain lain T Tex ext t settings settings in in the the P Pr refer eferenc ences es. .  Part II: HTML Markup for Structurea Step 1: Start with Content Step 1: Start with Content Naming Conventions Now that we’ve got our new document, it’s time to get typing. A web page It is important that you follow these always starts with content, so that’s where we begin our demonstration. rules and conventions when naming Exercise 4-1 walks you through entering the raw text content and saving the your files: document in a new folder. Use proper suffixes for your files. (X)HTML files must end with .html (some servers allow .htm). Web graphics must be labeled e ex xe er rc ciis se e 4 4- -1 1 E En nt te er ri in ng g c co on nt te en nt t according to their file format: .gif or .jpg (.jpeg is also acceptable). 1. 1. T Type ype the the cont content ent f for or the the home home page page int into o the the ne new w document document in in y your our t tex ext t edit editor or. . Never use character spaces within Just Just cop copy y it it as as y you ou see see it it her here e. . K Keep eep the the line line br breaks eaks the the same same f for or the the sak sake e of of filenames. It is common to use pla playing ying along along.. an underline character or dash to visually separate words within Black Black Goose Goose Bistro Bistro filenames, such as robbins_bio. html or robbins-bio.html. The The Restaurant Restaurant Avoid special characters such as ?, The The Black Black Goose Goose Bistro Bistro offers offers casual casual lunch lunch and and dinner dinner fare fare in in a a %, , /, :, ;, •, etc. Limit filenames hip hip atmosphere. atmosphere. to letters, numbers, underscores, hyphens, and periods. Catering Catering You You have have fun... fun... we’ll we’ll handle handle the the cooking. cooking. Black Black Goose Goose Catering Catering can can Filenames may be case-sensitive, handle handle events events from from snacks snacks for for bridge bridge club club to to elegant elegant corporate corporate depending on your server fundraisers. fundraisers. configuration. Consistently using all lowercase letters in filenames, Location Location and and Hours Hours while not necessary, makes your Seekonk, Seekonk, Massachusetts; Massachusetts; filenames easier to manage. Monday Monday through through Thursday Thursday 11am 11am to to 9pm, 9pm, Friday Friday and and Saturday, Saturday, 11am 11am to to Keep filenames short. Short midnight midnight names keep the character count and file size of your (X)HTML 2. 2. S Selec elect t “Sa “Sav ve e” ” or or “Sa “Sav ve e as as” ” fr from om the the F File ile menu menu t to o get get the the Sa Sav ve e A As s dialog dialog bo box x ( (F Figur igure e file in check. If you really must 4-4 4-4). ). T The he first first thing thing y you ou need need t to o do do is is cr creat eate e a a ne new w f folder older that that will will contain contain all all of of give the file a long, multiword the the files files f for or the the sit site e (in (in other other w wor ords ds, , it it’’s s the the local local r root oot f folder older). ). name, you can separate words with capital letters, such as W Windo indows: ws: Click Click the the f folder older icon icon at at the the t top op t to o cr creat eate e the the ne new w f folder older.. ➊➊ ALongDocumentTitle.html, Mac: Mac: Click Click the the “Ne “New w F Folder older” ” butt button. on. ➋➋ or with underscores, such as a_long_document_title.html, to improve readability. Self-imposed conventions. It is 1111 helpful to develop a consistent naming scheme for huge sites. For instance, always using lowercase with underscores between words. This takes some of the guesswork out of remembering what you named a file when you go to link to it later. 2222 W W W Windows XP indows XP indows XP indows XP Mac OS Mac OS Mac OS Mac OS X X X X F F F Figur igur igur igure e e e 4-4. 4-4. 4-4. 4-4. S S S Saving aving aving aving index.html index.html index.html index.html in in in in a a a a new new new new folder folder folder folder c c c called alled alled alled “ “ “ “bistr bistr bistr bistro o o o” ” ” ”. . . . Chapter  , Creating A Simple Page (HTML Overview) a Step 1: Start with Content Name the new folder bistro, and save the text file as index.html in it. Windows users, you will also need to choose “All Files” after “Save as type” to prevent Notepad from adding a “.txt” extension to your filename. The filename needs to end in .html to be recognized by the browser as a web document. See the sidebar, Naming Conventions, for more tips on naming files. 3. Just for kicks, let’s take a look at index.html in a browser. Launch your favorite browser (I’m using Firefox) and choose “Open” or “Open File” from the File menu. Navigate to index.html and select the document to open it in the browser. You should see something like the page shown in Figure 4-5. We’ll talk about the results in the following section. What Browsers Ignore Some information in the source document will be ignored when it is viewed in a browser, including: Line breaks (carriage returns). Line breaks are ignored. Text and elements will wrap continuously until a new block element, such as a heading (h1) or paragraph (p), or the line break (br) element is encountered in the flow of the document text. Tabs and multiple spaces. When a browser encounters a tab or more than one consecutive F Figur igure e 4-5. 4-5. T The he home home page page c cont ontent ent in in a a br bro owser wser. . blank character space, it displays a single space. So if the document contains: N ot e long, long ago The raw text file for this exercise is available online at www.learningwebdesign.com/ the browser displays: materials/. long, long ago Unrecognized markup. A browser simply ignores any Learning from step 1 tag it doesn’t understand or that was incorrectly specified. Our content isn’t looking so good (Figure 4-5). The text is all run togeth- Depending on the element er—that’s not how it looked in the original document. There are a couple of and the browser, this can have things to be learned here. The first thing that is apparent is that the browser varied results. The browser may display nothing at all, or it may ignores line breaks in the source document. (The sidebar, What Browsers display the contents of the tag Ignore, lists other information in the source that are not displayed in the as though it were normal text. browser window.) Text in comments. Browsers will not display text between the Second, we see that simply typing in some content and naming the document special and tags used .html is not enough. While the browser can display the text from the file, we to denote a comment. See the haven’t indicated the structure of the content. That’s where (X)HTML comes in. (X)HTML Comments sidebar We’ll use markup to add structure: first to the (X)HTML document itself (com- later in this chapter. ing up in Step 2), then to the page’s content (Step 3). Once the browser knows the structure of the content, it can display the page in a more meaningful way.  Part II: HTML Markup for Structurea Step 2: Give the Document Structure Step 2: Give the Document Structure We’ve got our content saved in an .html document—now we’re ready to start marking it up. Introducing... the HTML element Back in Chapter 2, How the Web Works, you saw examples of (X)HTML ele- An element consists of ments with an opening tag (p for a paragraph, for example) and closing tag both the content and its (/p). Before we start adding tags to our document, let’s look at the structure markup. of an HTML element and firm up some important terminology. A generic (X)HTML element is labeled in Figure 4-6. Opening tag Opening tag Content Content Closing tag Closing tag (may be text and/or other HTML elements) (may be text and/or other HTML elements) (starts with a /) (starts with a /) element name element name Content here Content here /element name /element name Elemen Element t Example: Example: h1 h1 Black Goose Bistro Black Goose Bistro /h1 /h1 F Figur igure e 4-6. 4-6. T The he par parts ts of of an an ( (X X)HTML )HTML element. element. Elements are identified by tags in the text source. A tag consists of the ele- t I P ment name (usually an abbreviation of a longer descriptive name) within angle brackets ( ). The browser knows that any text within brackets is hid- Slash vs. Backslash den and not displayed in the browser window. (X)HTML tags and URLs use the slash character (/). The slash character is The element name appears in the opening tag (also called a start tag) and found under the question mark (?) on again in the closing (or end) tag preceded by a slash (/). The closing tag works the standard QWERTY keyboard. something like an “off” switch for the element. Be careful not to use the simi- It is easy to confuse the slash with lar backslash character in end tags (see the tip, Slash vs. Backslash). the backslash character (\), which is found under the bar character (). The The tags added around content are referred to as the markup. It is important backslash key will not work in tags or to note that an element consists of both the content and its markup (the start URLs, so be careful not to use it. and end tags). Not all elements have content, however. Some are empty by definition, such as the img element used to add an image to the page. We’ll talk about empty elements a little later in this chapter. One last thing...capitalization. In this book, all elements are lowercase, and I recommend that you follow the same convention. Even though it isn’t strictly required for HTML documents, it is required for XHTML documents, so keeping all your markup lowercase brings you one step closer to being com- patible with future web standards. See the sidebar, Do As I Say, Not As They Do, for details. Chapter  , Creating A Simple Page (HTML Overview) a Step 2: Give the Document Structure Basic document structure Do As I Say, Much like you and me, (X)HTML documents have a head and a body. The Not As They Do head of the document (also sometimes called the header) contains descriptive If you view the source of a few information about the document itself, such as its title, the style sheet it uses, web pages, you are likely to scripts, and other types of “meta” information. The body contains the actual see markup that looks different content that displays in the browser window. from the examples in this book. That’s because this book teaches Figure 4-7 shows the minimal skeleton of an (X)HTML document . First, the contemporary authoring methods entire document is contained within an html element. The html element is that are in keeping with the stricter requirements of XHTML. If you’re called the root element because it contains all the elements in the document, learning markup for the first time, and it may not be contained within any other element. It is used for both you might as well learn to do it like HTML and XHTML documents. the pros do it. Lax markup practices are partly due The head comes next and contains the title element. According to the to the fact that the rules of HTML (X)HTML specifications, every document must contain a descriptive title. are less stringent than XHTML. The body element comes after the head and contains everything that we want In addition, browsers have been to show up in the browser window. The document structure elements do not forgiving of incorrect markup, so designers have gotten away with affect how the content looks in the browser (as you’ll see in a moment), but bad habits for years. they are required to make the document valid (that is, to properly abide by I recommend following these the (X)HTML standards). guidelines even for documents written with HTML. html html Capitalization. In HTML, element names are not case sensitive, so head head you could write IMG, Img, title title Title here Title here /title /title 2233 or img. Most professionals, /head /head however, keep all elements 11 and attributes in lowercase for body body consistency and to be in line Web page content here. Web page content here. 44 with future (X)HTML standards. /body /body Quotation marks. All attribute /html /html values should be in quotation marks, even though in HTML, T The minimal struc he minimal structur ture of an (X)HTML document: e of an (X)HTML document: certain values were okay without them.11 Identifies the document as written in HTML or XHTML Identifies the document as written in HTML or XHTML 22 T The head pr he head provides information about the documen ovides information about the document t Closing elements. In HTML, it is 33 A descriptive title is r A descriptive title is requir equired ed okay to omit the closing tag for 44 T Th he e b bo od dy y c co on nt ta ai in ns s t th he e c co on nt te en nt t t th ha at t d di is sp pl la ays in the br ys in the browser owser certain block elements (such as a paragraph or list item), F Figur igure e 4-7. 4-7. T The he minimal minimal struc structur ture e of of an an ( (X X)HTML )HTML do document. cument. however, it is safer to close every element in the document. Complex tables for layout. Old- school web design is well- Are you ready to add some structure to the Black Goose Bistro home page? known for its use of complex Open the index.html document and move on to Exercise 4-2. nested tables for page layout. Now that style sheets can handle the same thing, the table-based approach is obsolete.  Technically, there are other bits of information that are required for HTML and XHTML docu- ments to validate, such as a document type definition and an indication of the character set used in the document. We’ll discuss those in Chapter 10, but for the current introductory discussion these are the only elements you need to worry about.  Part II: HTML Markup for Structurea Step 2: Give the Document Structure exercise 4-2 Adding basic structure N ot e 1. Open the newly created document, index.html, if it isn’t open already. The correct terminology is to say that the 2. Put the entire document in an HTML root element by adding an html start title element is nested within the head tag at the very beginning and an end /html tag at the end of the text. This element. We’ll talk about nesting more in identifies the document as marked up in HTML (although XHTML uses html as well in order to be backwards compatible). Throughout the exercises in this later chapters. chapter, we’ll be writing markup according to the rules of XHTML. 3. Next, create the document head that contains the title for the page. Insert head and /head tags before the content. Within the head element, add the title, “Black Goose Bistro”, surrounded by opening and closing title tags. 4. Finally, define the body of the document by wrapping the content in body and /body tags. When you are done, the source document should look like this (the markup is shown in color to make it stand out): html head titleBlack Goose Bistro/title Don’t Forget a /head Good Title body Not only is a title element required Black Goose Bistro for every document, it is quite useful as well. The title is what is displayed The Restaurant in a user’s Bookmarks or Favorites list. The Black Goose Bistro offers casual lunch and dinner fare in a hip Descriptive titles are also a key tool atmosphere. for improving accessibility, as they Catering Services are the first thing a person hears You have fun... we’ll do the cooking. Black Goose Catering can handle when using a screen reader. Search events from snacks for bridge club to elegant corporate fundraisers. engines rely heavily on document titles as well. For these reasons, it’s Location and Hours important to provide thoughtful Bakers Corner in Seekonk, Massachusetts; and descriptive titles for all your Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to documents and avoid vague titles, midnight such as “Welcome” or “My Page.” You /body may also want to keep the length of /html your titles in check so they are able to display in the browser’s title area. 5. Save the document in the bistro directory, so that it overwrites the old version. Open the file in the browser or hit “refresh” or “reload” if it is open already. Figure 4-8 shows how it should look now. F Figur igure e 4-8. 4-8. T The he home home page page in in a a br bro owser wser a af ft ter er the the do document cument struc structur ture e elements elements hav have e b been een defined defined. . Chapter  , Creating A Simple Page (HTML Overview) a Step 3: Identify Text Elements Not much has changed after structuring the document, except that the browser now displays the title of the document in the top bar. If someone were to bookmark this page, that title would be added to their Bookmarks or Favorites list as well (see the sidebar, Don’t Forget a Good Title). But the content still runs together because we haven’t given the browser any indica- tion of how it is broken up. We’ll take care of that next. Step 3: Identify Text Elements With a little markup experience under your belt, it should be a no-brainer to add the markup that identifies headings and subheads (h1 and h2), para- (X)HTML Comments graphs (p), and emphasized text (em) to our content, as we’ll do in Exercise You can leave notes in the source 4-3. However, before we begin, I want to take a moment to talk about what document for yourself and others by marking them up as comments. we’re doing and not doing when marking up content with (X)HTML. Anything you put between comment tags ( ) will not Introducing...semantic markup display in the browser and will not have any effect on the rest of the The purpose of (X)HTML is to provide meaning and structure to the content. source. It is not intended to provide instructions for how the content should look (its This is a comment This is a presentation). multiple-line comment that ends here. Your job when marking up content is to choose the (X)HTML element that Comments are useful for labeling provides the most meaningful description of the content at hand. In the biz, and organizing long (X)HTML we call this semantic markup. For example, the first heading level on the page documents, particularly when they should be marked up as an h1 because it is the most important heading on are shared by a team of developers. the page. Don’t worry about what that looks like in the browser...you can In this example, comments are easily change that with a style sheet. The important thing is that you choose used to point out the section of the source that contains the navigation. elements based on what makes the most sense for the content. start global nav In addition to adding meaning to content, the markup gives the document ul ... structure. The way elements follow each other or nest within one another /ul creates relationships between the elements. This document structure is the end global nav foundation upon which we can add presentation instructions with style Bear in mind that although the sheets, and behaviors with JavaScript. We’ll talk about document structure browser will not display comments in the web page, readers can see more in Part III, when we discuss Cascading Style Sheets. them if they “view source,” so be sure Although HTML was intended to be used strictly for meaning and structure that the comments you leave are appropriate for everyone. since its creation, that mission was somewhat thwarted in the early years of the Web. With no style sheet system in place, HTML was extended to give authors ways to change the appearance of fonts, colors, and alignment. Those presentational extras are still out there, so you may run across them when you “view source.” In this book, however, we’ll focus on using HTML and XHTML the right way, in keeping with the new standards-based approach of contemporary web design. Okay, enough lecturing. It’s time to get to work on that content in Exercise 4-3.  0 Part II: HTML Markup for Structurea Step 3: Identify Text Elements exercise 4-3 Defining text elements 1. Open the document index.html in your text editor, if it isn’t 6. Now that we’ve marked up the document, let’s save it as we open already. did before, and open (or refresh) the page in the browser. You should see a page that looks much like the one in 2. The first line of text, “Black Goose Bistro,” is the main heading Figure 4-9. If it doesn’t, check your markup to be sure that for the page, so we’ll mark it up as a Heading Level 1 (h1) you aren’t missing any angle brackets or a slash in a closing element. Put the opening tag, h1, at the beginning of the tag. line and the closing tag, /h1, after it, like this. h1Black Goose Bistro/h1 3. Our page also has three subheads. Mark them up as Heading Level 2 (h2) elements in a similar manner. I’ll do the first one here; you do the same for “Catering” and “Location and Hours”. h2The Restaurant/h2 4. Each h2 element is followed by a brief paragraph of text, so let’s mark those up as paragraph (p) elements in a similar manner. Here’s the first one; you do the rest. pThe Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere./p 5. Finally, in the Catering section, I want to emphasize that visitors should just leave the cooking to us. To make text emphasized, mark it up in an emphasis element (em) element, as shown here. pYou have fun... emwe'll handle the cooking Figure 4-9. The home page after the content has been marked /emBlack Goose Catering can handle events from snacks for bridge club to elegant corporate up in (X)HTML elements. fundraisers./p Now we’re getting somewhere. With the elements properly identified, the browser can now display the text in a more meaningful manner. There are a few significant things to note about what’s happening in Figure 4-9. Block and inline elements While it may seem like stating the obvious, it is worth pointing out that the heading and paragraph elements start on new lines and do not run together as they did before. That is because they are examples of block-level elements. Browsers treat block-level elements as though they are in little rectangular boxes, stacked up in the page. Each block-level element begins on a new line, and some space is also usually added above and below the entire element by default. In Figure 4-10, the edges of the block elements are outlined in red. By contrast, look at the text we marked up as emphasized (em). It does not start a new line, but rather stays in the flow of the paragraph. That is because the em element is an inline element. Inline elements do not start new lines; Chapter  , Creating A Simple Page (HTML Overview)  1a Step 3: Identify Text Elements they just go with the flow. In Figure 4-10, the inline em element is outlined in light blue. F Figur igure e 4-10. 4-10. T The he outlines outlines sho show w the the struc structur ture e of of the the elements elements in in the the home home page page. . The distinction between block-level and inline elements is important. In (X)HTML markup, whether an element is block-level or inline restricts what other elements it may contain. For example, you can’t put a block-level ele- ment within an inline element (such as a paragraph within a link). Block- level and inline elements also behave differently when it comes to applying Cascading Style Sheets. Br Bro ow wsers sers ha hav ve e built-in built-in s style tyle sheets sheets tha that t describe describe the the def default ault r rendering endering o of f Default styles (X)HTML (X)HTML elements. elements. The other thing that you will notice about the marked-up page in Figures 4-9 and 4-10 is that the browser makes an attempt to give the page some visual hierarchy by making the first-level heading the biggest and boldest thing on the page, with the second-level headings slightly smaller, and so on. How does the browser determine what an h1 should look like? It uses a style sheet All browsers have their own built-in style sheets that describe the default rendering of (X)HTML elements. The default rendering is similar from browser to browser (for example, h1s are always big and bold), but there are some variations (block quotes may or may not be indented). The appear- ance is also affected by the user’s preferences, discussed in Chapter 3, The Nature of Web Design.  2 Part II: HTML Markup for Structurea Step : Add an Image If you think the h1 is too big and clunky as the browser renders it, just change it with a style sheet rule. Resist the urge to mark up the heading with another element just to get it to look better (for example, using an h3 instead of an h1 so it isn’t as large). In the days before ubiquitous style sheet support, elements were abused in just that way. Now that there are style sheets for controlling the design, you should always choose elements based on how accurately they describe the content, and don’t worry about the browser’s default rendering. We’ll fix the presentation of the page with style sheets in a moment, but first, let’s add an image to the page. Step  : Add an Image What fun is a web page with no image? In Exercise 4-4, we’ll add an image to the page using the img element. Images will be discussed in more detail in Chapter 7, Adding Images, but for now, it gives us an opportunity to introduce two more basic markup concepts: empty elements and attributes. Empty elements So far, all of the elements we’ve used in the Black Goose Bistro home page have followed the syntax shown in Figure 4-1: a bit of text content surround- ed by start and end tags. A handful of elements, however, do not have text content because they are used to provide a simple directive. These elements are said to be empty. The image element (img) is an example of such an element; it tells the browser to get an graphic file from the server and insert it into the flow of the text at that spot in the document. Other empty elements include the line break (br), horizontal rule (hr), and elements that provide information about a docu- ment but don’t affect its displayed content, such as the meta element. The syntax for empty elements is slightly different for HTML and XHTML. In HTML, empty elements don’t use closing tags—they are indicated by a single tag (img, br, or hr, for example) inserted into the text, as shown in this example that uses the br element to insert a line break. p1005 Gravenstein Highway North brSebastopol, CA 95472/p In XHTML, all elements, including empty elements, must be closed (or ter- minated, to use the proper term). Empty elements are terminated by adding a trailing slash preceded by a space before the closing bracket, like so: img /, br /, and hr /. Here is that example again, this time using XHTML syntax. p1005 Gravenstein Highway North br /Sebastopol, CA 95472/p Chapter  , Creating A Simple Page (HTML Overview)  3a Step : Add an Image Attributes Obviously, an img / tag is not very useful by itself... there’s no way to know which image to use. That’s where attributes come in. Attributes are instruc- tions that clarify or modify an element. For the img element, the src (short for “source”) attribute is required, and provides the location of the image file via its URL. The syntax for attributes is as follows: element attribute-name="value"Content/element or for empty elements: element attribute-name="value" / For another way to look at it, the attribute structure of an img element is labeled in Figure 4-11. Attribute names and values ar Attribute names and values are separated by an equals sign (=) e separated by an equals sign (=) Attribute name Attribute name Value Value Attribute name Attribute name Value Value img src="bird.jpg" alt="photo of bird" img src="bird.jpg" alt="photo of bird" Attribute Attribute Attribute Attribute Multiple attributes are separated by a space Multiple attributes are separated by a space F Figur igure e 4-11. 4-11. A An n element element with with attribut attributes es. . Here’s what you need to know about attributes: • Attributes go after the element name in the opening tag only, never in the end tag. • There may be several attributes applied to an element, separated by spaces in the opening tag. Their order is not important. • Attributes take values, which follow an equals sign (=). • A value might be a number, a word, a string of text, a URL, or a measure- ment depending on the purpose of the attribute. • Always put values within quotation marks. Although quotation marks aren’t required around all values in HTML, they are required in XHTML. You might as well do it the more future-compatible way from the start. Either single or double quotation marks are acceptable as long as they are used consistently, however, double quotation marks are the convention.  Part II: HTML Markup for Structurea Step : Add an Image • Some attributes are required, such as the src and alt attributes in the img element. • The attribute names available for each element are defined in the (X)HTML specifications; in other words, you can’t make up an attribute for an element. Now you should be more than ready to try your hand at adding the img ele- ment with its attributes to the Black Goose Bistro page in the next exercise. exercise 4-4 Adding an image 1. If you’re working along, the first thing you’ll need to do is 2. Once you’ve got the image, insert it at the beginning of get a copy of the image file on your hard drive so you can the first-level heading by typing in the img element and its see it in place when you open the file locally. The image file attributes as shown here: is provided in the materials for this chapter. You can also get h1img src="blackgoose.gif" alt="Black Goose the image file by saving it right from the sample web page logo" /Black Goose Bistro/h1 online at www.learningwebdesign.com/chapter4/bistro. The src attribute provides the name of the image file that Right-click (or Ctrl-click on a Mac) on the goose image and should be inserted, and the alt attribute provides text that select “Save to disk” (or similar) from the pop-up menu as should be displayed if the image is not available. Both of shown in Figure 4-12. Be sure to save it in the bistro folder these attributes are required in every img element. with index.html. 3. Now save index.html and open or refresh it in the browser window. The page should look like the one shown in Figure 4-13. If it doesn’t, check to make sure that the image file, blackgoose.gif, is in the same directory as index.html. If it is, then check to make sure that you aren’t missing any characters, such as a closing quote or bracket, in the img element markup. Mac users: Ctrl-click on the image to access the pop-up menu and select the option for saving the image. The actual text may vary depending Windows users: on the browser you are using. Right-click on the image to access the pop-up menu and select the option for saving the picture. Figure 4-12. Saving an image file from a page on the Web. Figure 4-13. The Black Goose Bistro home page with the Black Goose logo inline image. Chapter  , Creating A Simple Page (HTML Overview) a Step : Change the Look with a Style Sheet Step  : Change the Look with a Style Sheet Depending on the content and purpose of your web site, you may decide that the browser’s default rendering of your document is perfectly adequate. However, I think I’d like to pretty up the Black Goose Bistro home page a bit to make a good first impression on potential patrons. “Prettying up” is just my way of saying that I’d like to change its presentation, which is the job of Cascading Style Sheets (CSS). In Exercise 4-5, we’ll change the appearance of the text elements and the page background using some simple style sheet rules. Don’t worry about understanding them all right now—we’ll get into CSS in more detail in Part III. But I want to at least give you a taste of what it means to add a “layer” of presentation onto the structure we’ve created with our XHTML markup. exercise 4-5 Adding a style sheet head 1. Open index.html if it isn’t open already. titleBlack Goose Bistro/title 2. We’re going to use the style element to apply an style type="text/css" embedded style sheet to the page. (This is just one of the ways to add a style sheet; the others are covered in Chapter /style 11, Style Sheet Orientation.) /head The style element is placed inside the head of the 3. Now, type the following style rules within the style element document. It uses the required type attribute to tell the just as you see them here. Don’t worry if you don’t know browser the type of information in the element (text/css exactly what is going on... you’ll learn all about style rules in is currently the only option). Start by adding the style Part III. element to the document as shown here: style type="text/css" body background-color: C2A7F2; font-family: sans-serif; h1 color: 2A1959; border-bottom: 2px solid 2A1959; h2 color: 474B94; font-size: 1.2em; h2, p margin-left: 120px; /style 4. Now it’s time to save the file and take a look at it in the browser. It should look like the page in Figure 4-14. If it doesn’t, go over the style sheet code to make sure you didn’t Figure 4-14. The Black Goose Bistro page after CSS style rules miss a semi-colon or a curly bracket. have been applied.  Part II: HTML Markup for Structurea When Good Pages Go Bad We’re finished with the Black Goose Bistro page. Not only have you written your first XHTML document, complete with a style sheet, but you’ve learned about elements, attributes, empty elements, block-level and inline elements, the basic structure of an (X)HTML document, and the correct use of markup along the way. When Good Pages Go Bad The previous demonstration went very smoothly, but it’s easy for small things to go wrong when typing out (X)HTML markup by hand. Unfortunately, one missed character can break a whole page. I’m going to break my page on purpose so we can see what happens. What if I had forgotten to type the slash (/) in the closing emphasis tag (/em)? With just one character out of place (Figure 4-15), the remainder of the document displays in emphasized (italic) text. That’s because without that slash, there’s nothing telling the browser to turn “off” the emphasized formatting, so it just keeps going. h2Catering/h2 h2Catering/h2 N ot e pYou have fun... emwe'll handle the cooking.em Black Goose pYou have fun... emwe'll handle the cooking.em Black Goose Catering can handle events from snacks for bridge club to elegant Catering can handle events from snacks for bridge club to elegant Omitting the slash in the closing tag (in corporate fundraisers./p corporate fundraisers./p effect, omitting the closing tag itself) for certain block elements, such as headings g. g.em em or paragraphs, may not be so dramatic. Browsers interpret the start of a new Without the slash, the browser Without the slash, the browser block element to mean that the previous does not know to turn the does not know to turn the block element is finished. emphasized text “off,” and the emphasized text “off,” and the remainder of the page is remainder of the page is rendered as emphasized text rendered as emphasized text (italics). (italics). F Figur igure e 4-15. 4-15. W When hen a a slash slash is is omitt omitted ed, , the the br bro owser wser do doesn esn’ ’t t k kno now w when when the the element element ends ends, , as as is is the the c case ase in in this this ex example ample. . Chapter  , Creating A Simple Page (HTML Overview) a When Good Pages Go Bad I’ve fixed the slash, but this time, let’s see what would have happened if I had accidentally omitted a bracket from the end of the first h2 tag (Figure 4-16). h2The Restaurant/h2 h2The Restaurant/h2 Having Problems? pThe Black Goose Bistro offers casual lunch and dinner fare pThe Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight in a hip atmosphere. The menu changes regularly to highlight The following are some typical the freshest ingredients./p the freshest ingredients./p problems that crop up when creating web pages and viewing them in a browser: h2 h2The The I’ve changed my document, but when I reload the page in my browser, it looks exactly the same. It could be you didn’t save your Missing Missing headline headline document before reloading, or you may have saved it in a different directory. Half my page disappeared. This could happen if you are Without the bracket, all the following characters are Without the bracket, all the following characters are missing a closing bracket () or a interpreted as part of a long, unrecognizable element name, interpreted as part of a long, unrecognizable element name, quotation mark within a tag. This and “The Restaurant” disappears from the page. and “The Restaurant” disappears from the page. is a common error when writing (X)HTML by hand. F Figur igure e 4-16. 4-16. A A missing missing end end br brack acket et mak makes es all all the the follo following wing c cont ontent ent par part t of of the the tag tag, , and and I put in a graphic using the img ther therefor efore e it it do doesn esn’ ’t t display display. . element, but all that shows up is a broken graphic icon. The broken graphic could mean See how the headline is missing? That’s because without the closing tag a couple of things. First, it might mean that the browser is not bracket, the browser assumes that all the following text—all the way up to finding the graphic. Make sure the next closing bracket () it finds—is part of that h2 tag. Browsers don’t that the URL to the image file display any text within a tag, so my heading disappeared. The browser just is correct. (We’ll discuss URLs ignored the foreign-looking element name and moved on to the next ele- further in Chapter 6, Adding Links.) Make sure that the image ment. file is actually in the directory Making mistakes in your first (X)HTML documents and fixing them is a you’ve specified. If the file is there, make sure it is in one of great way to learn. If you write your first pages perfectly, I’d recommend fid- the formats that web browsers dling with the code as I have here to see how the browser reacts to various can display (GIF, JPEG, or PNG) changes. This can be extremely useful in troubleshooting pages later. I’ve and that it is named with the listed some common problems in the sidebar, Having Problems? Note that proper suffix (.gif, .jpeg or .jpg, or .png, respectively). these problems are not specific to beginners. Little stuff like this goes wrong all the time, even for the pros.  Part II: HTML Markup for Structurea Test Yourself Test Yourself Now is a good time to make sure you’re understanding the basics of markup. Use what you’ve learned in this chapter to answer the following questions. Answers are in Appendix A. 1. What is the difference between a tag and an element? 2. Write out the minimal structure of an (X)HTML document. 3. Mark whether each of these file names is an acceptable name for a web document by circling “Yes” or “No.” If it is not acceptable, provide the reason why. a. Sunflower.html Yes No b. index.doc Yes No c. cooking home page.html Yes No d. Song_Lyrics.html Yes No e. games/rubix.html Yes No f. %whatever.html Yes No 4. All of the following markup examples are incorrect. Describe what is wrong with each one, then write it correctly. a. img "birthday.jpg" b. iCongratulationsi c. a href="file.html"linked text/a href="file.html" d. pThis is a new paragraph\p Chapter  , Creating A Simple Page (HTML Overview) a (X)HTML Review: Document Structure Elements 5. How would you mark up this comment in an (X)HTML document so that it doesn’t display in the browser window? product list begins here (X)HTML Review: Document Structure Elements This chapter introduced the elements that establish the structure of the document. The remaining elements introduced in the exercises will be treated in more depth in the following chapters. Element Description html The root element that identifies the document as (X)HTML head Identifies the head of the document title Gives the page a title body Identifies the body of the document that holds the content  0 Part II: HTML Markup for Structure