and . Tr stands for “table row” while td stands for “table data” (in other words, a table cell). The words “Navigation” and “Content” are simply placeholders set in paragraph tags. We will replace them with real information in the upcoming sections. In other words, this table structure says the following: 1. 2. 3. 4. 5. 6. 7. 8. 9.
Start the table (). Start a new row (). Create a cell in that row (| ). We’ll put navigation in that cell later (“ Navigation ”). End that cell ( | ). Create a new cell in the same row ( | ). We’ll put content in that cell later (“ Content ”). End that cell ( | ). End the row ( | ). 12
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
10. End the table ( ) Now that we have the basic table structure, lets customize it a little bit. Tech Tip: In both HTML or XHTML, line breaks in code don’t matter very much. You’ll see in our tutorial that sometimes we’ll add blank lines between tags, and sometimes we’ll keep a number of tags on the same line. Line breaks are only used to make the code easier for you to read, and they’re often interpreted as spaces (which also don’t matter very much). The only time you don’t want a line break in your code is when you don’t want the browser to think you’ve typed a space there, such as in the middle of a word. 2. Align the information to the top of the page. When you enter information into a table cell, it naturally aligns horizontally to the left and vertically to the middle. Since we want our content to always start at the top of the page, we’re going to say valign=”top” (valign is short for “vertical alignment”). We will place this command within both | tags like this: Excerpt from index.html. Table cell alignment shown in bold.
Tech Tip: When we put information inside of a tag, we call it an attribute. In XHTML, attributes are always in lower case and always use quotation marks. 3. Add some margins. We don’t want our text to bump up against the edge of our table, so we’re going add some margins. Tables have two different attributes for adding margins: cellpadding and cellspacing. Cellpadding determines the margin between the text and the edge of a cell. Cellspacing determines the margin between the cells. Sometimes it doesn’t matter which attribute you use to add a margin. In our case, however, we’ll be adding background colors to our cells, and we don’t want any space in between them. We’re going to set our cellpadding to 10 pixels and our cellspacing to 0 pixels (see “Tech Tip” below for an explanation of pixels). Find your tag and enter the text you see in bold here: Navigation | Excerpt from index.html. Table cell padding and spacing shown in bold.
Tech Tip: A pixel is the smallest speck of color that a computer screen can display for an image. A computer with a 600 x 800 resolution views a screen that is 600 pixels high and 800 pixels wide. Since resolutions vary on computers, we can’t describe the actual dimensions of a pixel to you. Once you start working with them, you’ll get a feel for how to estimate them. Most image editors (see “Useful Tools” in the Introduction) have tools for measuring the pixels of images. 13
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
4. Set the width of your table. We’ll have more control over our table layout if we tell it how wide we want it to be. We can use either a percentage value or a pixel value. If we use a percentage value, 100% would mean the table should span the entire web browser window, 80% would mean the table should span 80% of the web browser window, and so on. A table width defined by a percentage value will resize to fit a web browser window. If your visitors make their windows smaller or larger, the webpage will shrink or grow to fit them. On the other hand, if we use a pixel value, the table will remain at its set size, and we’ll be better able to predict its appearance. A good rule of thumb is not to exceed 750 pixels for the width of your webpage content. Any larger than that, and your visitors may not see the entire table in their web browser windows. For this website, we’re going to use a width of 700 pixels. This value goes in the same table tag that we edited in Step 4. Enter it like this: Navigation | Excerpt from index.html. Table width shown in bold.
Set the width of your left table cell. We want the table cells to maintain their widths consistently across pages. Since the logo we’re going to use in the left table cell is 122 pixels wide (jump ahead to Part 4: Adding an Image for a sneak peak) and it will be the widest item in that cell, we’ll use that number for setting the width. We’ll set the width of a table cell similarly to how we set the width of the table, except that we use the tag. Enter it like this: Navigation | Excerpt from index.html. Table cell width shown in bold.
Tech Tip: You do not need to set the widths of all table cells, as long as enough widths have been set to keep the cells consistent. In this case, we’ve set the width of the table at 700 pixels, and the width of the left cell to 122 pixels. The width of the right cell will automatically set to the difference between those two values, so we do not need to type it out. By leaving some table cells flexible, we make it easier to change those values in the future.
5. Save and check your work. As you did at the end of in Part 2 (steps 6-9), save your work and open it in a web browser. It should look something like this:
14
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
Screenshot of index.html as basic layout.
If your work looks significantly different the screenshot above, retrace your steps through this section and check your code. Sometimes a missed quotation mark or bracket can throw off an entire page.
Concept Review 1.
Why do we use tables? Tables are a clear and effective way for organizing content into particular areas on a website.
2. Why is it important to set the width of some parts of a table? Setting widths gives you more control over the appearance of your table. If you do not set any widths, the appearance of tables may vary based on what content it holds and what browser is viewing it.
What’s Next? In Part 4, you’ll learn how to add an image to your website.
15
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
PART 4: Adding an Image In this section, we’ll add a logo image to our website. You should have your text editor open to index.html. You’ll also need to use the Internet to get the logo. 1. Inside your website folder, create a new folder called “images”. Your website folder is the folder you created in Step 1 of Part 2. 2. Use your web browser to visit http://www.seattlepies.com. You’ll see the logo in the upper left-hand corner of the screen. 3. Right-click with your mouse on the Seattle Pies logo and choose “Save As…” Your browser may use a variation on that term, like “Save Image As…” The result will be the same. 4. Save the image to your new “images” folder. The image is already named logo.gif, so you can just keep that name the same. 5. Repeat Steps 3 and 4 for all other images in the website. In Part 7: Adding Content, we will add more images to our website. You can save time later on by saving all of the images on this demo website to your “images” folder. These are the main images used with the content on each page. Here are their filenames for reference: Webpage Home About Pies Locations
Image pumpkin.gif apple2.gif apple.gif woman.gif
6. Enter the XHTML code for the image inside the “Navigation” table cell of your website. Enter the code exactly as you see here in bold. See below for an explanation.  Navigation | Content | Excerpt from index.html. Image tag shown in bold.
What does this stuff mean? The basic tag here is ![]() , which stands for “image”. Its first attribute, src, stands for source. To tell the web browser what the source of the image is, we need to describe the path to the file. Since the logo.gif is in the “images” folder, we say the file path is “images/logo.gif”.
16
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
The next few tags are optional, but they’re very useful to have. The alt attribute is short for “alternative text.” In it, we include a description of the image. This text will display on limited web browsers that can’t display all images (like cell phones), and they will be communicated to the visually impaired. The width and height attributes are measurements of the image in pixels. They help the page load faster. Your image editor can usually tell you what the pixel measurements of an image are (don’t guess!). Tech Tip: Since image tags don’t require a closing tag, we close them by adding a slash to the end of the tag, like this:  You’ll see this later with the line break (
) and horizontal rule tags (
), too. 7. Save and check your work. As you did at the ends of Parts 2 and 3, save your work and open it in a web browser. It should look something like this:
Screenshot of index.html with new image.
If you don’t see the image, first check to make sure it is in the images folder and named logo.gif. Your images folder should be in the same folder as your index.html file. If that’s all okay, check to see that you typed out the ![]() tag code exactly as shown above.
Concept Review 1.
What do the parts of the image tag mean? In the image tag, img src means “image source.” Alt means “alternate text,” and height and width call for the image’s measurements in pixels.
2. Why does it matter where I store my image? The image tag needs to state exactly where an image is stored in order for it to display the image properly. While an image doesn’t need to be in a folder called images, it helps you as a web developer to keep things organized.
What’s Next? In Part 5, you’ll learn how to add color, font, and some other elements of style to your website.
17
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
PART 5: Adding Style In this section, you’ll learn to use different colors and font faces. We’ll also cover a few content formatting tags. Please take note we won’t be using CSS because it’s outside the scope of this tutorial. CSS is a more powerful method of creating style in a website, and you should learn to use it as soon as you’re comfortable with XHTML. While the tags we’ll use here are perfectly valid style techniques, they can all be replaced and improved with CSS. Before you begin, make sure your text editor is open with your index.html file on display. 1. Add all sections that need style. For this website, each page will need a header, a subheader, some body content, a footer (for copyright and contact information), and our navigation list. Since our navigation list and footer will be consistent across all pages, we’ll fill in the actual content for those now. For the others, we’ll just use placeholders. Replace the words “Navigation” and “Content” in your existing document with the text as shown here in bold. See below for an explanation of the new tags. | Home
About
Pies
Locations
| Header Sub-header Body Content © 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. | Excerpt from index.html. New content regions shown in bold.
What does this stuff mean? In our first table cell, we added our navigation text (Home, About, Pies, and Locations). Each one of these is followed by a
tag, which stands for “line break.” Whereas a paragraph tag set ( ) creates a block of text with an extra space above and below it, a line break simply moves to the next line. Next, we notice that tags surround the header and tags surround the sub-header. The “h” in these tags stands for header, and the corresponding number stands for its size and importance. is the largest header, while is the smallest header (all number in between size up in order). While in the next step, we’ll learn to change the font and size of our headers to whatever we want, it’s still important to use header tags. They signify to search engines and other devices what information is most important on a website. You’ll notice we have the text, “©” in our footer. When you view this webpage in your browser, you’ll see the change into the symbol for copyright (try it!). This is a special 18
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
character, and it uses this code for greater consistency across browsers. Check the HTML and XHTML reference guides on the web for complete lists of special characters you can use on websites. Tech Tip: In HTML code, the
code would actually appear as
. A line break stands alone, and therefore doesn’t need to be followed with a tag. However, since XHTML requires that all tags be closed, we add a slash to the end of this tag to signify its closure. 2. Add tags. Font tags are used to define the font face and size. In strict XHTML, these have been fully replaced by CSS, which we recommend you learn after you finish this tutorial. However, in transitional XHTML, which is what we’re using (see our description of DOCTYPE in Part 2: Creating a New Webpage), they work just fine. Add tags to your work exactly as shown here in bold. See below for an explanation of how tags work. | Home
About
Pies
Locations
| Header Subheader Body Content © 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. | Excerpt from index.html. Font tags shown in bold.
What does this stuff mean? All of these tags have two attributes: size and face. The face is the same for every one: “Verdana, Arial, Helvetica, sans-serif.” These font faces are listed in order of preference. Translated into our language, this attribute is saying, “Use the Verdana font face for this text. If visitors don’t have Verdana installed on their computers, use Arial. If they don’t have Arial either, use Helvetica. If they don’t have any of those, just use your best sans-serif font.” You should always have several fonts listed as a backup, including the basic font family.
19
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
The sizes on each of these tags vary. The header is “5,” the footer is “1,” and everything else is “2.” Font sizes range from 1 – 7, with “1” being the smallest (take note: this is the opposite of the … tags). “3” is the standard size, and would be displayed if no size were set. However, Verdana is a slightly larger font than others, so “2” is a more attractive font size for its standard. We’re also using “2” as a sub-header because we don’t want it to be larger than the body content. Tech Tip: Every new paragraph needs a new font tag. When you use these tags, it’s important to keep the nesting consistent. For example, use text . Do NOT use text . 3. Add a horizontal rule. Just before the footer, we’ll want a simple divider line, or a horizontal rule. The tag for a horizontal rule is
. Add it directly after the tag before the footer text, like this:
© 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. Excerpt from index.html. Horizontal rule shown in bold.
4. Add color. We want to add color to the table cells, the website background, and the header font. With websites, color is defined in hexadecimal format. This means each color is coded with a six-character combinations of numbers and letters, preceded by a pound sign. For example, white is #ffffff, black is #000000, and a nice light blue would be #99ccff. Visit a website like http://www.visibone.com/colorlab or check your image editor for color codes. Don’t try to memorize them. It’s just not possible. Add color to your webpage by adding the text presented here in bold. See below for an explanation of the tags. | Home
About
Pies
Locations
| Header Excerpt from index.html. Color tags shown in bold.
20
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
What does this stuff mean? As we mentioned above, those six-character figures represent colors. The first three are background colors, and they use the attribute bgcolor (which, as you might guess, is short for “background color”). The first one is in the body tag, and it defines the background of the entire webpage as a deep indigo. The second instance is in the left table cell. It colors the cell light blue. The third instance colors the right table cell white. While it was white before, it’s necessary to add this tag because the background defined in will otherwise override it. The fourth tag simply uses the attribute, color. This can be used in font tags. As you’ll see, we’ve colored the header the same deep indigo as the page background. 5. Save and check your work. As you’ve done at the end of previous sections, save your work and open index.html in a web browser. You should see something like this:
Screenshot of index.html with new style.
If you’re not seeing things properly, retrace your work in this section and check for typos.
Concept Review 1. Why do we list multiple fonts in our tags? Not every computer has the same list of fonts installed. If we call for a font that your visitor doesn’t have, the web browser will not know how to display the text. Offering a list of fonts informs the browser of what it should use as a second choice, third choice, and as a worst-case scenario, the general font family. 2. Are we really just scratching the surface here? Yes. Graphic design is its own field. Here we’ve talked a little about colors and fonts. If you choose to study CSS after this tutorial, you will find you have far more control over these elements, as well as others.
What’s Next? In Part 6, you’ll learn the art of adding links to your website.
21
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
PART 6: Adding Links In this section, we’ll add links to our navigation bar. To begin with, you should have your text editor open with your index.html file on display. 1. Enter XHTML code for links. Adding links is a simple matter of knowing the tag format. Enter the tags exactly as displayed here in bold. See below for an explanation of the link tag. | Home
About
Pies
Locations
| Excerpt from index.html. Link tags shown in bold.
What does this stuff mean? This is the first truly unintuitive tag we’ve come across so far. The tag is short for “anchor.” The attribute href is short for “hypertext reference.” Fortunately, since links are so common, it’s easy to just memorize this one. Don’t bother trying to make too much sense of it. The href anchor points to the file path of the page you want to link to (see “Part 4: Adding an Image” for another example of file paths at work.) Since the pages we’re linking to here exist in the same folder as index.html, there’s no need to type out long file paths. If we were linking to another website, however, we’d type the whole URL out (for example: Google). The text between the and tags is the text you will see hyperlinked on the website. 2. Change your links’ colors. In the tag of your website, you can determine the colors of your links. You have three attributes at your fingertips for this task: link, alink, and vlink. The link attribute is the general color for a link. The alink attribute is the color of an “active link,” in order words, the color a link changes the second you click on it. The vlink attribute colors the “visited links,” or links your browser knows that you’ve clicked on before. We’re going to make the link and alink a nice dark blue, and the vlink will match the page background deep indigo color. Remember, you can browse color codes in your image editor or websites like http://www.visibone.com/colorlab to choose your own. Enter the tags as shown here in bold: Excerpt from index.html. Link colors shown in bold.
22
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
3. Save and check your work. As you’ve done at the end of previous sections, save your file and open it in a web browser. You should see the same presentation you saw at the end of Part 5, except that your navigation menu options will be underlined as links. Try clicking on them. They should each bring you to an empty file you created in “Part 2: Creating a New Webpage.” Tech Tip: If you want to change any of the style or layout elements to better suit your taste, you should do so before moving on to Part 7: Adding Content. Once you’ve copied this appearance onto multiple webpages, it will take much more time and energy to make changes to it. In our next section, we will copy this layout to those pages and add unique content. Are you ready to complete your website?
Concept Review 1. When do we have to type out a whole URL in a link? When can we just use a filename? If the page you’re linking to is in the same folder or directory as the page with the link, you can simply type the filename in your link code. If it’s within a folder or series of folders which are located in the same directory as the page with the link, you can simply type the folders and the filename (when you type folders, you use slashes like this: “folder1/folder2/file.html”). If it’s outside of the file’s directory or simply more complicated than you want to think about, type out the entire URL (starting with http://). Typing out the entire URL is always an option.
What’s Next? In Part 7, you’ll duplicate this attractive webpage design and add content, thus completing your first website!
23
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
PART 7: Adding Content In this section, we’ll finish up our website by copying our style and layout to other pages and adding content. As always, begin with your text editor open and with index.html on display. 1. Open all of your other webpages. You can do this with the “Open” command in the “File” menu. Your other webpages are called about.html, locations.html, and pies.html (you created them in Part 2: Creating a New Webpage). Use the “Open” command to open each of these files so that they are all in front of you in your text editor, in addition to index.html. You may need to open them one at a time. They should all appear to be blank documents. 2. Copy the entire text of your index.html file. To do this, highlight everything in the index.html text file and choose “Copy” from the “Edit” menu. 3. Paste the text of index.html into all of your other webpages. These are the files you opened in Step 1. Click on each file’s blank window, go to the “Edit” menu, and choose “Paste.” When you complete this step, every file will have exactly the same code you developed for your index.html file. 4. Add titles to your pages. The title for each page is currently “Basic XHTML Page” (you entered this back in Part 2: Creating a New Webpage). It’s important to have unique titles for each webpage because they show up in search engine listings and bookmark lists. Your visitors need to know exactly what they’re going to visit when they click on your link from these sources. These are the titles we will use for our webpages: Webpage index.html about.html pies.html locations.html
Title Seattle Pies – Quality Pie Distributors – Seattle, Washington About Seattle Pies Seattle Pies - Our Pies Seattle Pies Locations
Enter each title between the and tags on every webpage, deleting the old “Basic XHTML Page” as you go. For example, here’s how we’ll enter the title for about.html: About Seattle Pies Excerpt from about.html. New page title shown in bold.
When you’re done, double-check each webpage to make sure its title corresponds with its filename as shown in the table above. 24
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
5. Add headers to your pages. The header for each page is currently “Header”. Since this is the largest and most immediately visible text on the page, it’s important to make your headers clear titles for your page’s content. Because they serve a similar purpose as the titles we entered in Step 4, they will have similar content. These are the headers we will use for our webpages: Webpage index.html about.html pies.html locations.html
Title Welcome to Seattle Pies About Seattle Pies Our Pies Seattle Pies Locations
Enter each header between the and tags on every webpage, deleting the old “Header” as you go. For example, here’s how we’ll enter the header for about.html: | Home
About
Pies
Locations
| About Seattle Pies Subheader Body Content Excerpt from about.html. New header shown in bold.
When you’re done, double-check each webpage to make sure its title corresponds with its filename as shown in the table above. Now that we have our headers and titles in place, we’re going to add content to each individual page. 6. Add content to the index.html page. Replacing the text, “Sub-header” and “Body content,” add the following content as shown in bold here. You’ll notice some new tags here: and . These, as you might guess, center everything inside of them. They also act similarly to the tag in that they isolate the region as its own paragraph. | Welcome to Seattle Pies Quality Pie Distributors, Seattle, Washington
25
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
We specialize in high-quality delicious pies for the greater Seattle, WA area. With five locations, you can be sure to find the right pie with us.  Excerpt from index.html. New content shown in bold.
Notice that we added the image pumpkin.gif here. This is one of the images we saved from the Internet in Step 5 of Part 4: Adding an image. Make sure you have those images before you continue. 7. Add content to the about.html page. Replacing the text, “Sub-header” and “Body content,” add the following content as shown in bold here. See below for an explanation of some of our new actions. | About Seattle Pies  Our Mission We strive to create the most exceptional pies in the most delicious flavors. Our Promise Each one of our delectable pies is handmade each day at one of our stores. We bake our pies with passion and we provide our service with a smile. Our History In 1964, Douglas Pie discovered his ancestors' secret recipes for the world's most delicious pies. After testing them out among friends and family, he realized he had to share his good fortune with the world. Douglas promptly opened Seattle Pies. Excerpt from about.html. New content shown in bold.
What does this stuff mean? We did two new things here. We added an align attribute to the image and we repeated the sub-header. Let’s start with the align attribute. This pushes an image to either the left or 26
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
right, and lets the text wrap around it. So in this case, we’re aligning the image to the right, and the text will display directly to the left of it. This is a very useful attribute, and we’ll see it at work in the next two pages as well. If you scan through the code here, you’ll see three instances of . This is because we actually copied the subhead and the body content code and pasted it in three instances. When doing this, it’s important to copy everything up to the proper tags, so elements continue to nest properly. In this case, we copied from to for the sub-head, and from to for the body content (we were careful, though, to make sure we grabbed the tags that just surrounded what we wanted – no more). 8. Add content to the pies.html page. Replacing the text, “Sub-header” and “Body content,” add the following content as shown in bold here. See below for an explanation of the new tags presented. | Our Pies Flavors We carry all of these fine flavors at our stores:  - Apple
- Dutch Apple
- Blueberry
- Peach Cobbler
- Chocolate
- Stawberry-Rhubarb
- Pumpkin
- Cherry
- Lemon Cream
- Banana Cream
- Lemon Meringue
- Stawberry
- Mincemeat
Excerpt from pies.html. New content shown in bold.
What is this stuff? The new tags you see here are for building lists. You’ll notice the list of pie flavors is surrounded by the tags . These stand for “unordered list” and they create a bullet list. To create a numbered list, you would use the tags, and , which stand for “ordered list”. The and tags stand for “list items” and they surround each element of the list. In the next step, when you save and check your work, you’ll see the final product of your list. 27
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
9. Add content to the locations.html page. Replacing the text, “Sub-header” and “Body content,” add the following content as shown in bold below. Here, we use the same technique of repeating body content that we used in Step 7 with about.html. Since this page requires many line breaks and paragraph breaks, the tags here look very complex. Take a close look, though. You’ve seen most these tags before, and their functions are very clear. The only new tags here are and . These make text bold. | Seattle Pies Locations  Greater Seattle Area
sans-serif">
sans-serif">
sans-serif">
sans-serif">
Excerpt from locations.html. New content shown in bold.
10. Save and check your work. As you’ve done in past sections, save your pages at this point. Then, use your web browser to open index.html. It should look something like this:
28
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
Screenshot of index.html.
You can use the links on the left-hand side to view your other pages, as well. They should look like this:
Screenshot of about.html.
Screenshot of pies.html.
29
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
Screenshot of locations.html.
If anything on your website doesn’t look right at this point, check your webpage files against the finished code provided in Appendix I: Finished Project Code for any differences.
Concept Review 1.
What kinds of lists can XHTML create? On our “Pies” page, we see an unordered, bulleted list. This uses the tags for the list, as well as and for the list items. XHTML can also create ordered, numbered lists. To do that, you use the same structure, but replace the tags with and tags. On our “Locations” page, we see a simple list without bullets or numbers. This simply uses line breaks, paragraph breaks, and bold text to create.
2. Is it okay to repeat header tags on a page? Yes. We did this on the “About” page with our tags. For the sake of keeping the most important information clear to search engines, it’s a good idea to only have one tag on each page. Repeat the others as much as the page requires. 3. Why do we use different titles for each page? The titles (not the headers – these are different items) will show up in search engine listings and in a visitor’s bookmark list. It’s important to have clear titles that reflect the content of each individual page. This gives people the information they need when deciding if they want to visit the webpage. Congratulations! You’ve completed a website and learned the basics of XHTML!
30
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
AFTERWORD: What’s Next? Now that you’ve completed this tutorial in XHTML, you’re ready to apply your skills to your own website needs. You can create basic XHTML webpage files, build layouts, add style, create links, and work with content. Those skills will take you far! As we’ve mentioned before, however, XHTML isn’t everything to a website – it’s just the primary foundation. Now that you have a handle on XHTML, it may be time for you to learn about Cascading Style Sheets (CSS). Integrating CSS with your XHTML will give you significantly more power when it comes to creating and manipulating the style of your website. Check the Internet or your local bookstore for CSS tutorials and handbooks. The other important skill you’ll need to learn is how to publish your work on the Internet. As we mentioned in the introduction, you’ll need an FTP program for this. Since publishing to the web can use a unique process based on your setup, we don’t cover those instructions in this tutorial. Check your FTP manual for instructions and talk to your web hosting provider for additional help. You may also want to look into pre-developed website applications in JavaScript, PHP, or ASP. As soon as you start looking around, you’ll realize the sky is the limit! If you have any questions about XHTML, drop us an email at [email protected]. We’d love to help you out. Good luck and enjoy your new skills!
31
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
APPENDIX I: Finished Project Code Below is the final code for each webpage we developed in this tutorial. For an electronic version, visit http://www.seattlepies.com and right-click on each page (anywhere except for on an image or link). Your browser will display a list of options, and one will be similar to “View Source.” Choose that option and a new window will open with the text you see below. index.html Seattle Pies - Quality Pie Distributors - Seattle, Washington | Home
About
Pies
Locations
| Welcome to Seattle Pies Quality Pie Distributors, Seattle, Washington We specialize in high-quality delicious pies for the greater Seattle, WA area. With five locations, you can be sure to find the right pie with us.
© 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. |
32
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
about.html About Seattle Pies | Home
About
Pies
Locations
| About Seattle Pies Our Mission We strive to create the most exceptional pies in the most delicious flavors. Our Promise Each one of our delectable pies is handmade each day at one of our stores. pies with passion and we provide our service with a smile.
We bake our
Our History In 1964, Douglas Pie discovered his ancestors' secret recipes for the world's most delicious pies. After testing them out among friends and family, he realized he had to share his good fortune with the world. Douglas promptly opened Seattle Pies.
© 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. |
33
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
pies.html Seattle Pies - Our Pies | Home
About
Pies
Locations
| Our Pies Flavors We carry all of these fine flavors at our stores: - Apple
- Dutch Apple
- Blueberry
- Peach Cobbler
- Chocolate
- Stawberry-Rhubarb
- Pumpkin
- Cherry
- Lemon Cream
- Banana Cream
- Lemon Meringue
- Stawberry
- Mincemeat
© 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678. |
34
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
locations.html Seattle Pies Locations | Home
About
Pies
Locations
| Seattle Pies Locations Greater Seattle Area
sans-serif">
sans-serif">
sans-serif">
sans-serif">
© 2005 Seattle Pies. For more information, call us toll-free at 1-800-555-5678.
|
35
Sarah Dopp
Intro to XTHML: A Tutorial for the Beginner
APPENDIX II: XHTML Reference Guide The following list covers all of the tags we used in our tutorial, as well as some other common ones. Search the internet for “XHTML Reference Guide” to find a complete list and explanation of tags. Tag html head
Purpose Creates an XHTML document Defines the title and other information that is not part of the webpage itself Defines the webpage itself Defines the page title, usually displayed in the browser's title bar defines a text paragraph Defines a forced linebreak. centers a region of content Defines a level 1-6 heading. defines a table
defines a table row defines a table cell
Defines an ordered list (1, 2, 3, ...). Defines an unordered, bulleted list. defines a list item in an ordered or unordered list emphasizes text, usually with italics marks strong text, usually with bold defines font for a text region creates a link, where “url” is target page and “link text” is hyperlinked text on webpage. creates an image, where “url” is target image file. creates a horizontal rule
body <p> <br /> <center> <h1>...<h6><br />
<br />
<ul> <li> <i>, <em> <b>, <strong> <font> <a href="url" rel="nofollow">link text</a><br />
<br />
<img src="url" /> <hr /><br />
<br />
36<br />
<br />
Common Attributes<br />
<br />
bgcolor, background, text, link, vlink, alink<br />
<br />
cellpadding, cellspacing, width, bgcolor, background, border width, bgcolor, background, align, valign, colspan, rowspan<br />
<br />
face, size, color<br />
<br />
alt, width, height, border, align<br />
<br />
Sarah Dopp<br />
<br />
Intro to XTHML: A Tutorial for the Beginner<br />
<br />
WORKS CITED Castro, Elizabeth. Creating a Web Page with HTML: Visual QuickProject Guide. Berkeley: Peachpit Press, 2005. Claben, Michael. “XHTML Tags Reference.” Exploring XML. 2001. Jupiter Media Corporation. 2 August 2005. <http://www.webreference.com/xml/reference/xhtml.html>. “Introduction to XHTML.” W3Schools. 2005. Refsnes Data. 2 August 2005. <http://www.w3schools.com/xhtml/xhtml_intro.asp>. “Webmaster’s Color Laboratory.” VisiBone. 2004. VisiBone 8 August 2005. <http://www.visibone.com/colorlab>.<br />
<br />
37<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row hidden-xs">
<div class="col-md-12">
<h4></h4>
<hr />
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/fundamentals-of-web-xhtml-a-1-tutorial-2pdf_59ccdd8f1723dd357b7a7777.html">
<img src="https://p.pdfkul.com/img/300x300/fundamentals-of-web-xhtml-a-1-tutorial-2pdf_59ccdd8f1723dd357b7a7777.jpg" alt="Fundamentals of Web, XHTML â 1 Tutorial 2.pdf" height="200" class="block" />
<h4 class="name-title">Fundamentals of Web, XHTML â 1 Tutorial 2.pdf</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/xhtml-tutorial-pdf_5af0dd9a7f8b9acf788b457f.html">
<img src="https://p.pdfkul.com/img/300x300/xhtml-tutorial-pdf_5af0dd9a7f8b9acf788b457f.jpg" alt="xhtml tutorial pdf" height="200" class="block" />
<h4 class="name-title">xhtml tutorial pdf</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/xhtml-tutorial-pdf-free-download_5af0dd9a7f8b9ad3788b4586.html">
<img src="https://p.pdfkul.com/img/300x300/xhtml-tutorial-pdf-free-download_5af0dd9a7f8b9ad3788b4586.jpg" alt="xhtml tutorial pdf free download" height="200" class="block" />
<h4 class="name-title">xhtml tutorial pdf free download</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/computer-fundamentals-of-gis-and-data-storage-tutorial-1pdf-_59bfeb331723dddc42c50f17.html">
<img src="https://p.pdfkul.com/img/300x300/computer-fundamentals-of-gis-and-data-storage-tuto_59bfeb331723dddc42c50f17.jpg" alt="Computer Fundamentals of GIS and Data storage Tutorial 1.pdf ..." height="200" class="block" />
<h4 class="name-title">Computer Fundamentals of GIS and Data storage Tutorial 1.pdf ...</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/computer-fundamentals-of-gis-and-data-storage-tutorial-1pdf-_59c297f71723dddb426a7e53.html">
<img src="https://p.pdfkul.com/img/300x300/computer-fundamentals-of-gis-and-data-storage-tuto_59c297f71723dddb426a7e53.jpg" alt="Computer Fundamentals of GIS and Data storage Tutorial 1.pdf ..." height="200" class="block" />
<h4 class="name-title">Computer Fundamentals of GIS and Data storage Tutorial 1.pdf ...</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/name-of-tutorial-heading-1_59c5e5931723dd9b439439c8.html">
<img src="https://p.pdfkul.com/img/300x300/name-of-tutorial-heading-1_59c5e5931723dd9b439439c8.jpg" alt="Name of Tutorial (Heading 1)" height="200" class="block" />
<h4 class="name-title">Name of Tutorial (Heading 1)</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/web-designing-web-development-tutorial-series-introduction-_59c37a451723dddb426a80c7.html">
<img src="https://p.pdfkul.com/img/300x300/web-designing-web-development-tutorial-series-intr_59c37a451723dddb426a80c7.jpg" alt="Web Designing & Web Development Tutorial Series - Introduction ..." height="200" class="block" />
<h4 class="name-title">Web Designing & Web Development Tutorial Series - Introduction ...</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/hibernate-tutorial_59f59d1a1723dd286e3fcf2d.html">
<img src="https://p.pdfkul.com/img/300x300/hibernate-tutorial_59f59d1a1723dd286e3fcf2d.jpg" alt="Hibernate Tutorial" height="200" class="block" />
<h4 class="name-title">Hibernate Tutorial</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/hibernate-tutorial_59fbcc641723dd0250bc72bf.html">
<img src="https://p.pdfkul.com/img/300x300/hibernate-tutorial_59fbcc641723dd0250bc72bf.jpg" alt="Hibernate Tutorial" height="200" class="block" />
<h4 class="name-title">Hibernate Tutorial</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/typing-xhtml-web-applications-in-ml_5a1cfa081723dd95ae696e25.html">
<img src="https://p.pdfkul.com/img/300x300/typing-xhtml-web-applications-in-ml_5a1cfa081723dd95ae696e25.jpg" alt="Typing XHTML Web Applications in ML" height="200" class="block" />
<h4 class="name-title">Typing XHTML Web Applications in ML</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/lesson-2-web-publishing-technologies-html-xhtml-csspdf-_59c118bc1723dddc42c515ce.html">
<img src="https://p.pdfkul.com/img/300x300/lesson-2-web-publishing-technologies-html-xhtml-cs_59c118bc1723dddc42c515ce.jpg" alt="Lesson 2 Web Publishing Technologies HTML-XHTML-CSS.pdf ..." height="200" class="block" />
<h4 class="name-title">Lesson 2 Web Publishing Technologies HTML-XHTML-CSS.pdf ...</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/methodology-of-project-identification-tutorial-1pdf-_59c3a3381723dd74c9bfb791.html">
<img src="https://p.pdfkul.com/img/300x300/methodology-of-project-identification-tutorial-1pd_59c3a3381723dd74c9bfb791.jpg" alt="METHODOLOGY OF PROJECT IDENTIFICATION TUTORIAL 1.pdf ..." height="200" class="block" />
<h4 class="name-title">METHODOLOGY OF PROJECT IDENTIFICATION TUTORIAL 1.pdf ...</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/tutorial-membuat-template-web-designpdf_5a16af9a1723ddfa1a90e58f.html">
<img src="https://p.pdfkul.com/img/300x300/tutorial-membuat-template-web-designpdf_5a16af9a1723ddfa1a90e58f.jpg" alt="Tutorial Membuat Template Web Design.pdf" height="200" class="block" />
<h4 class="name-title">Tutorial Membuat Template Web Design.pdf</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/the-javaa-web-services-tutorial_59b316af1723dda273d97f68.html">
<img src="https://p.pdfkul.com/img/300x300/the-javaa-web-services-tutorial_59b316af1723dda273d97f68.jpg" alt="The Java⢠Web Services Tutorial" height="200" class="block" />
<h4 class="name-title">The Java⢠Web Services Tutorial</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/web-designing-tutorial-pdf_59cea43c1723ddbd5e417da4.html">
<img src="https://p.pdfkul.com/img/300x300/web-designing-tutorial-pdf_59cea43c1723ddbd5e417da4.jpg" alt="web designing tutorial pdf" height="200" class="block" />
<h4 class="name-title">web designing tutorial pdf</h4>
</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="box-product doc">
<div class="doc-meta-thumb name">
<a href="https://p.pdfkul.com/photoshop-web-design-tutorial-pdf_59cdf6521723dd27d6200978.html">
<img src="https://p.pdfkul.com/img/300x300/photoshop-web-design-tutorial-pdf_59cdf6521723dd27d6200978.jpg" alt="photoshop web design tutorial pdf" height="200" class="block" />
<h4 class="name-title">photoshop web design tutorial pdf</h4>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-xs-12">
<div class="panel-meta panel panel-info">
<div class="panel-heading">
<h2 class="text-center panel-title">Fundamentals of Web, XHTML â 1 Tutorial 1.pdf</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<span class="st">Why Not Use Software that Builds <em>Websites</em> Automatically? Software companies have developed a number of powerful programs for <em>building websites</em>.</span> </div>
<div class="col-md-12">
<div class="doc">
<hr />
<div class="download-button" style="margin-right: 3px; margin-bottom: 6px;">
<a href="https://p.pdfkul.com/download/fundamentals-of-web-xhtml-a-1-tutorial-1pdf_59bccd511723dde8e86d1ff3.html" class="btn btn-success btn-block"><i class="fa fa-cloud-download"></i> Download PDF </a>
</div>
<div class="share-box pull-left" style="margin-right: 3px;">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://p.pdfkul.com/fundamentals-of-web-xhtml-a-1-tutorial-1pdf_59bccd511723dde8e86d1ff3.html" target="_blank" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- Twitter -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=https://p.pdfkul.com/fundamentals-of-web-xhtml-a-1-tutorial-1pdf_59bccd511723dde8e86d1ff3.html" target="_blank" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="fb-like pull-left" data-href="https://p.pdfkul.com/fundamentals-of-web-xhtml-a-1-tutorial-1pdf_59bccd511723dde8e86d1ff3.html" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12" style="margin-top: 6px;">
<span class="btn pull-left" style="padding-left: 0;"><i class="fa fa-file-pdf-o"></i> 945KB Sizes</span>
<span class="btn pull-left"><i class="fa fa-download"></i> 0 Downloads</span>
<span class="btn pull-left" style="padding-right: 0;"><i class="fa fa-eye"></i> 30 Views</span>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12">
<span class="btn pull-left" style="padding-left: 0;"><a data-toggle="modal" data-target="#report" style="color: #f44336;"><i class="fa fa-handshake-o"></i> Report</a></span>
</div>
</div>
</div>
</div>
</div>
<h4 id="comment"></h4>
<div id="fb-root"></div>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9&appId=266776430439748";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" data-href="https://p.pdfkul.com/fundamentals-of-web-xhtml-a-1-tutorial-1pdf_59bccd511723dde8e86d1ff3.html" data-width="100%" data-numposts="6"></div>
</div>
</div>
<div class="panel-recommend panel panel-success">
<div class="panel-heading">
<h4 class="text-center panel-title">Recommend Documents</h4>
</div>
<div class="panel-body">
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/fundamentals-of-web-xhtml-a-1-tutorial-2pdf_59ccdd8f1723dd357b7a7777.html">
<img src="https://p.pdfkul.com/img/60x80/fundamentals-of-web-xhtml-a-1-tutorial-2pdf_59ccdd8f1723dd357b7a7777.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/fundamentals-of-web-xhtml-a-1-tutorial-2pdf_59ccdd8f1723dd357b7a7777.html">
Fundamentals of Web, XHTML â 1 Tutorial 2.pdf </a>
<div class="doc-meta">
<div class="doc-desc">Diff-marked from previous version: xhtml-basic-diff.html. Previous recommendation: http://www.w3.org/TR/2008/REC-xhtml-basic-20080729. Diff-marked from ...</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/xhtml-tutorial-pdf_5af0dd9a7f8b9acf788b457f.html">
<img src="https://p.pdfkul.com/img/60x80/xhtml-tutorial-pdf_5af0dd9a7f8b9acf788b457f.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/xhtml-tutorial-pdf_5af0dd9a7f8b9acf788b457f.html">
xhtml tutorial pdf </a>
<div class="doc-meta">
<div class="doc-desc">Page 1 of 1. File: Xhtml tutorial pdf. Download now. Click here if your download doesn't start automatically. Page 1 of 1. xhtml tutorial pdf. xhtml tutorial pdf. Open. Extract. Open with. Sign In. Main menu. Displaying xhtml tutorial pdf. Page 1 of </div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/xhtml-tutorial-pdf-free-download_5af0dd9a7f8b9ad3788b4586.html">
<img src="https://p.pdfkul.com/img/60x80/xhtml-tutorial-pdf-free-download_5af0dd9a7f8b9ad3788b4586.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/xhtml-tutorial-pdf-free-download_5af0dd9a7f8b9ad3788b4586.html">
xhtml tutorial pdf free download </a>
<div class="doc-meta">
<div class="doc-desc">Page 1 of 1. File: Xhtml tutorial pdf free download. Download now. Click here if your download doesn't start automatically. Page 1 of 1. xhtml tutorial pdf free download. xhtml tutorial pdf free download. Open. Extract. Open with. Sign In. Main menu.</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/computer-fundamentals-of-gis-and-data-storage-tutorial-1pdf-_59bfeb331723dddc42c50f17.html">
<img src="https://p.pdfkul.com/img/60x80/computer-fundamentals-of-gis-and-data-storage-tuto_59bfeb331723dddc42c50f17.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/computer-fundamentals-of-gis-and-data-storage-tutorial-1pdf-_59bfeb331723dddc42c50f17.html">
Computer Fundamentals of GIS and Data storage Tutorial 1.pdf ... </a>
<div class="doc-meta">
<div class="doc-desc">There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Computer ...</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/computer-fundamentals-of-gis-and-data-storage-tutorial-1pdf-_59c297f71723dddb426a7e53.html">
<img src="https://p.pdfkul.com/img/60x80/computer-fundamentals-of-gis-and-data-storage-tuto_59c297f71723dddb426a7e53.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/computer-fundamentals-of-gis-and-data-storage-tutorial-1pdf-_59c297f71723dddb426a7e53.html">
Computer Fundamentals of GIS and Data storage Tutorial 1.pdf ... </a>
<div class="doc-meta">
<div class="doc-desc">Computer Fundamentals of GIS and Data storage Tutorial 1.pdf. Computer Fundamentals of GIS and Data storage Tutorial 1.pdf. Open. Extract. Open with.</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/name-of-tutorial-heading-1_59c5e5931723dd9b439439c8.html">
<img src="https://p.pdfkul.com/img/60x80/name-of-tutorial-heading-1_59c5e5931723dd9b439439c8.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/name-of-tutorial-heading-1_59c5e5931723dd9b439439c8.html">
Name of Tutorial (Heading 1) </a>
<div class="doc-meta">
<div class="doc-desc">unable to run this tutorial without a graphics card installed - it is possible to run OpenGL ... Files Included in this Tutorial: ... cd C:\Program Files (x86)\GPlates\GPlates 1.4.0 .... At any point the depth can be reset by clicking the 'Restore ac</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/web-designing-web-development-tutorial-series-introduction-_59c37a451723dddb426a80c7.html">
<img src="https://p.pdfkul.com/img/60x80/web-designing-web-development-tutorial-series-intr_59c37a451723dddb426a80c7.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/web-designing-web-development-tutorial-series-introduction-_59c37a451723dddb426a80c7.html">
Web Designing & Web Development Tutorial Series - Introduction ... </a>
<div class="doc-meta">
<div class="doc-desc">Page 4 of 12. Difference Difference between Static & Dynamic Websites. Pawan Mall's Production. Static Web. Page/Website. Dynamic Web. Page/Website.</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/hibernate-tutorial_59f59d1a1723dd286e3fcf2d.html">
<img src="https://p.pdfkul.com/img/60x80/hibernate-tutorial_59f59d1a1723dd286e3fcf2d.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/hibernate-tutorial_59f59d1a1723dd286e3fcf2d.html">
Hibernate Tutorial </a>
<div class="doc-meta">
<div class="doc-desc">Alternatively, if you use an Integrated Development Environment (IDE) like .... the process more efficient than with other scripting languages (such as PHP) and ...</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/hibernate-tutorial_59fbcc641723dd0250bc72bf.html">
<img src="https://p.pdfkul.com/img/60x80/hibernate-tutorial_59fbcc641723dd0250bc72bf.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/hibernate-tutorial_59fbcc641723dd0250bc72bf.html">
Hibernate Tutorial </a>
<div class="doc-meta">
<div class="doc-desc">... be used in combination with servlets that handle the business logic, the model ..... Specifies a list of packages or classes for use in the JSP as the Java import ..... Returns the Internet Protocol (IP) address of the client that sent the reques</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/typing-xhtml-web-applications-in-ml_5a1cfa081723dd95ae696e25.html">
<img src="https://p.pdfkul.com/img/60x80/typing-xhtml-web-applications-in-ml_5a1cfa081723dd95ae696e25.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/typing-xhtml-web-applications-in-ml_5a1cfa081723dd95ae696e25.html">
Typing XHTML Web Applications in ML </a>
<div class="doc-meta">
<div class="doc-desc">In this paper, we present a type system for typing Web ap- plications in ...... 21. W3C. XHTMLTM 1.0: The extensible hypertext markup language, January 2000.</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/lesson-2-web-publishing-technologies-html-xhtml-csspdf-_59c118bc1723dddc42c515ce.html">
<img src="https://p.pdfkul.com/img/60x80/lesson-2-web-publishing-technologies-html-xhtml-cs_59c118bc1723dddc42c515ce.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/lesson-2-web-publishing-technologies-html-xhtml-csspdf-_59c118bc1723dddc42c515ce.html">
Lesson 2 Web Publishing Technologies HTML-XHTML-CSS.pdf ... </a>
<div class="doc-meta">
<div class="doc-desc">There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Lesson 2 Web ...</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/methodology-of-project-identification-tutorial-1pdf-_59c3a3381723dd74c9bfb791.html">
<img src="https://p.pdfkul.com/img/60x80/methodology-of-project-identification-tutorial-1pd_59c3a3381723dd74c9bfb791.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/methodology-of-project-identification-tutorial-1pdf-_59c3a3381723dd74c9bfb791.html">
METHODOLOGY OF PROJECT IDENTIFICATION TUTORIAL 1.pdf ... </a>
<div class="doc-meta">
<div class="doc-desc">METHODOLOGY OF PROJECT IDENTIFICATION TUTORIAL 1.pdf. METHODOLOGY OF PROJECT IDENTIFICATION TUTORIAL 1.pdf. Open. Extract. Open with.</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/tutorial-membuat-template-web-designpdf_5a16af9a1723ddfa1a90e58f.html">
<img src="https://p.pdfkul.com/img/60x80/tutorial-membuat-template-web-designpdf_5a16af9a1723ddfa1a90e58f.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/tutorial-membuat-template-web-designpdf_5a16af9a1723ddfa1a90e58f.html">
Tutorial Membuat Template Web Design.pdf </a>
<div class="doc-meta">
<div class="doc-desc">Tutorial Membuat Template Web Design.pdf. Tutorial Membuat Template Web Design.pdf. Open. Extract. Open with. Sign In. Main menu.</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/the-javaa-web-services-tutorial_59b316af1723dda273d97f68.html">
<img src="https://p.pdfkul.com/img/60x80/the-javaa-web-services-tutorial_59b316af1723dda273d97f68.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/the-javaa-web-services-tutorial_59b316af1723dda273d97f68.html">
The Java⢠Web Services Tutorial </a>
<div class="doc-meta">
<div class="doc-desc">Mar 15, 2002 - Chapter 1: Introduction to Web Services . . . . . . . . . . . . . . . . . . 1 ... 10. The XSLT API. 13. JAX-RPC. 16. Overview of JAX-RPC. 16. Using JAX-RPC. 18 ..... Here we cover all the things you need to know to make the best use of</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/web-designing-tutorial-pdf_59cea43c1723ddbd5e417da4.html">
<img src="https://p.pdfkul.com/img/60x80/web-designing-tutorial-pdf_59cea43c1723ddbd5e417da4.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/web-designing-tutorial-pdf_59cea43c1723ddbd5e417da4.html">
web designing tutorial pdf </a>
<div class="doc-meta">
<div class="doc-desc">Page 1 of 1. web designing tutorial pdf. web designing tutorial pdf. Open. Extract. Open with. Sign In. Main menu. Displaying web designing tutorial pdf.</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
<div class="row m-0">
<div class="col-md-3 col-xs-3 pl-0 text-center">
<a href="https://p.pdfkul.com/photoshop-web-design-tutorial-pdf_59cdf6521723dd27d6200978.html">
<img src="https://p.pdfkul.com/img/60x80/photoshop-web-design-tutorial-pdf_59cdf6521723dd27d6200978.jpg" alt="" width="100%" />
</a>
</div>
<div class="col-md-9 col-xs-9 p-0">
<a href="https://p.pdfkul.com/photoshop-web-design-tutorial-pdf_59cdf6521723dd27d6200978.html">
photoshop web design tutorial pdf </a>
<div class="doc-meta">
<div class="doc-desc">Download. Connect more apps... Try one of the apps below to open or edit this item. photoshop web design tutorial pdf. photoshop web design tutorial pdf. Open.</div>
</div>
</div>
<div class="clearfix"></div>
<hr class="mt-15 mb-15" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://p.pdfkul.com/report/59bccd511723dde8e86d1ff3" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report Fundamentals of Web, XHTML â 1 Tutorial 1.pdf</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LeP2DsUAAAAAABvCByMZRCE253cahUVoC_jPUkq"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Sign In</h3>
</div>
<div class="modal-body">
<form action="https://p.pdfkul.com/login" method="post">
<div class="form-group form-group-lg">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group form-group-lg">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group form-group-lg">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember Password </label>
<label class="pull-right"><a href="https://p.pdfkul.com/forgot">Forgot Password?</a></label>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer-container" style="background: #fff;display: block;padding: 10px 0 20px 0;margin-top: 30px;">
<hr />
<div class="footer-container-inner">
<footer id="footer" class="container">
<div class="row">
<!-- Block footer -->
<section class="block col-md-4 col-xs-12 col-sm-3" id="block_various_links_footer">
<h4>Information</h4>
<ul class="toggle-footer" style="">
<li><a href="https://p.pdfkul.com/about">About Us</a></li>
<li><a href="https://p.pdfkul.com/privacy">Privacy Policy</a></li>
<li><a href="https://p.pdfkul.com/term">Terms and Service</a></li>
<li><a href="https://p.pdfkul.com/copyright">Copyright</a></li>
<li><a href="https://p.pdfkul.com/contact">Contact Us</a></li>
</ul>
</section>
<!-- /Block footer -->
<section id="social_block" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Follow us</h4>
<ul>
<li class="facebook">
<a target="_blank" href="" title="Facebook">
<i class="fa fa-facebook-square fa-2x"></i> <span>Facebook</span>
</a>
</li>
<li class="twitter">
<a target="_blank" href="" title="Twitter">
<i class="fa fa-twitter-square fa-2x"></i> <span>Twitter</span>
</a>
</li>
<li class="google-plus">
<a target="_blank" href="" title="Google Plus">
<i class="fa fa-plus-square fa-2x"></i> <span>Google Plus</span>
</a>
</li>
</ul>
</section>
<!-- Block Newsletter module-->
<div id="newsletter" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Newsletter</h4>
<div class="block_content">
<form action="https://p.pdfkul.com/newsletter" method="post">
<div class="form-group">
<input id="newsletter-input" type="text" name="email" size="18" placeholder="Entrer Email" />
<button type="submit" name="submit_newsletter" class="btn btn-default">
<i class="fa fa-location-arrow"></i>
</button>
<input type="hidden" name="action" value="0">
</div>
</form>
</div>
</div>
<!-- /Block Newsletter module-->
</div>
<div class="row">
<div class="bottom-footer">
<div class="container">
Copyright © 2024 P.PDFKUL.COM. All rights reserved.
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- #footer -->
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://p.pdfkul.com/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VPK2MQK127"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-VPK2MQK127');
</script>
</body>
</html>
|
| | | |
