html samles

Embed Size (px)

Citation preview

  • 8/7/2019 html samles

    1/86

    Website 101: Adding Background Color to your WebSite Through CSSBy Michael Rohde

    There are several ways to add background color to your web site. You can add some HTML in the tag such as:

    This provides a solid black background to the web page. If you use black font on your site, suddenly yourweb page looks like someone turned out the lights. You'll still see any other images and graphic elementsyou've used, but all of your text will not appear. At this point, you could change your font to white, or youcould change the back ground color to a light gray, such as E0E0E0. That eliminates the sometimes harshglare of a bright white web page, but then again, some web sites look very good using a plain whitebackground.

    Most likely, you'll want the same background color on all of your pages. Open your CSS file and type:

    body{background: #E0E0E0;}Provided that your CSS file is linked to your htm docs, you now have a light gray background on all of yourpages.

    Using Images as a Background

    You can also use an image for the background. Use the following code and update the path to your image asappropriate.body{

    background: url(../Images/rightbg.gif) repeat-x;}If you want the background image to repeat, then remove repeat-x.

    Gradient Colors as a Background

    Many web sites use a gradient color in the background. It provides a subtle effect and looks moreprofessional than solid colors or pictures. To create a gradient color for your background, you need agraphics program that allows you to create gradient colors, such as Adobe Photoshop or Illustrator. Usingthat software, create an image that starts light and ends dark, or vice versa. Consult the software's help onhow to create that effect.

    After you have your gradient image, just plug that into the path as shown above.

    Creating Gradient Colors without Software

    Graphics software can be very expensive. I found a site that appears to allow you to create your owngradient colors. I haven't tested it, so I can't vouch for it, but theexamples look good.

    Gradient Colors without Images

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3866901http://gradcolor.com/http://gradcolor.com/http://gradcolor.com/http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3866901
  • 8/7/2019 html samles

    2/86

    There is code that allows you to create a gradient colors through code. Fair warning, this code has atendency to change your fonts and it does not work across all browsers. The code is provided here simply asa means to show that it is possible, but it's not recommended.The above code provides a gradient effect for the background pages. You can use something similar within

    tables.

    You can use the following code within a table tag:

    style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"Again, it must be stressed that in tests, this only works in Internet Explorer and does not work in other

    browsers such as Chrome or Firefox. If you simply want to play around with it in IE, then feel free, but it's

    highly not recommended to use this code in a professional site

    How To Build a Web Site: Using Style SheetsBy Michael Rohde

    In the first part of this series on how to build a web site, you learned how to: Develop a purpose for yoursite; Organize a project outline; Draw a wireframe; Organize your folder structure; and Define HTML andJavaScript.

    In the second part of the series, you learned how to: Get an HTML editor; Defined the different parts of anHTML file; Wrote your first HTML code; and Started your CSS file. The third article described how to: Addadditional styles to the CSS and How links work and how to style them.

    In our last tutorial we learned how to create a page layout using CSS. Now we'll learn how to update the.html file to make use of the CSS we created. You may remember, last week we created the CSS to styleour page...it looked like this:

    H1 {text-align:left; color:black; font: normal 20pt "Arial Black"}H2 {text-align:left; color:black; font: italic 12pt "Verdana"}P {text-align:left; color:black; font: normal 10pt "Verdana"}A:link {color: blue; text-decoration:none}A:visited {color: gray; text-decoration:none}A:hover {text-decoration:underline}If we were going live with our example, we would have added styles for each section of our page, includingcontainers, headers, footers, etc. and it would have looked like this:container {text-align:left; color:black; font: normal 10pt "Arial Black"}header {text-align:left; color:black; font: italic 8pt "Verdana"}footer {text-align:left; color:black; font: normal 8pt "Verdana"}navbar {text-align:center; color:black; font: normal 8pt "Verdana"}Now, you'll need to open your .html file, and directly under the tag, type:

    My Web SiteBefore you know it, I'll be a proYou might notice that you have two opening tags and only one closing tag. The first tagis for the container for all of the content on the page, which means you need the closing tag at thevery end of the page. Right above the closing tag, type:

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3865451http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3865451
  • 8/7/2019 html samles

    3/86

    It's good practice to always remember to write your closing tag whenever you write your opening tag. Thatway, you won't forget to add it in later. Now, add in a placeholder for your navigation:

    About Us | Contact Us | Page 1 | Page 2

    Don't worry about having links to these pages yet. That can be added in later after you have tested yourlayout. Now for the columns:

    Here's the left text.

    Here's the center text.

    Here is my right-hand column text.

    Last, it's time to add a footer:

    Copyright 2010

    That's what it takes to create a three-column layout for your site. You know have styles, links and images

    hmm, but something is missing ah yes: background color. There are plenty of sites that use a plain white

    background, which is very acceptable and does look very nice. However, there are also plenty of other sites

    that have some subtle color in the background. What you won't find on current sites are solid blocks of color

    with square edges. In the next article, you'll learn how to use gradient colors that provide a nice blending

    effect.

    How To Build a Web Site: Create a CSS FileBy Michael Rohde

    In the first part of this series on how to build a web site, you learned how to: Develop a purpose for yoursite; Organize a project outline; Draw a wireframe; Organize your folder structure; and Define HTML andJavaScript.

    In the second part of the series, you learned how to: Get an HTML editor; Defined the different parts of anHTML file; Wrote your first HTML code; and Started your CSS file. The third article described how to: Addadditional styles to the CSS and How links work and how to style them. Now, you'll learn how to create apage layout in the CSS.

    Defining the Page Layout Using CSS

    If you're tempted to create your page layout with tables, stop right there, pack up your bags and go home.Tables went out of style nearly 10 years ago. Currently, most web developers use containers and tagsto determine the page layout. That might not be true with HTML 5, but that time is not here yet. For thepurposes of this article, you will learn how to create a three-column page design with a header and footer.Start by opening the .htm file you started and within the tags, type:html, body {margin: 0px;padding: 0px;

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3866101http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3866101
  • 8/7/2019 html samles

    4/86

    border: 0px;}What you've just done is essentially zero out any pre-existing default margins. Now you're free to createyour own margins.

    Side note: after your site is up and running, and you've started using an analytics tool to gather informationabout your visitors, you can learn the size and resolution of your visitor's screen. At that time, you mightwant to adjust your margins to reflect the most popular screen sizes, or change it so it resolves to anyresolution. For the purpose of this article, you will learn how to create a page layout to suite a screenresolution of 1280 x 800, which should also work just fine for screen resolutions of 1280 x 1084. In yourCSS file, create the container:

    #container {width: 1000px;margin: 0 auto;padding: 0;

    }This creates a container that is essentially 1000 pixels wide with no margins and no padding. This will fitvery nicely on a screen resolution of 1280 x 800.

    Side note: Adding this code to your CSS file now advances you beyond basic HTML, which means you nowneed to update your doctype declaration in the .htm file to:

    You'll notice this declaration is essentially the same as the previous one, but it now allows for XHTML, whichis Extensible Hyper Text Markup Language.

    The third line of the above code (margin: 0 auto;) contains the XHTML. This code creates a margin of zero.The auto, allows the browser to help determine the best margins for a visitor's browser, and centers thecontainer on the screen. Otherwise, all of your content would be left-aligned, leaving a large amount ofspace on the right-hand side of the screen. This provides an aesthetically pleasing appearance for your site.

    Now, let's create your header row. In your CSS file, type:

    #container #header {margin: 0;padding: 0;width: 100%;height: 100px;float: left;border-bottom: #adde63 solid 1px;

    }You've now created a header with a height of 100 pixels. Adding a border to the code now will help you seewhere this container ends. You can always remove it later.

    Most likely, you'll want your navigation bar underneath the header. Type the following into your CSS file tocreate a holder for your menu:

    #container #navbar {margin: 0;padding: 0;width: 100%;height: 40px;float: left;vertical-align;

  • 8/7/2019 html samles

    5/86

    border-bottom: #adde63 solid 1px;}Using a border in the CSS is a better alternative to using a hard rule in the HTML. It provides greaterflexibility and is easier to update pages later. You can define the color of the border by using hex numbers.The thickness of the border is defined by pixel. Many designers would advise against using too many borderson a site as they create clutter. Instead, utilize good white space technique to help keep your contentorganized and easy to find.

    Next, it's time to add in your columns. You need to create columns that are divisible by two, which meansyou can't simply create three columns. First, you need to create two columns and then split the secondcolumn in two. It might sound like a lot of work, but it's really not.

    In your CSS file, type:

    #container #col1 {width: 280px;float: left;

    }#container #col2outer {width: 700px;

    float: right;margin: 0;padding: 0;

    }#col2outer #col2mid {width: 400px;float: left;

    }#col2outer #col2side {width: 280px;float: right;

    }The width is no longer defined by 100%, which means the width equals the same width as defined in themain container, which in this case is 1000 pixels. Instead, the column widths now have a static value. You

    can change these values as you see fit. As it's set up now, the value for the first column is 280 pixels. Thetotal value for the middle and right column is 700 pixels, which is then split to 400 pixels for the middlecolumn and 280 pixels for the right column.

    Generally, the middle column in most web sites is slightly larger than the two side columns.

    If you do some simple addition, you might notice that the total widths of all the columns do not add up to1000 (280 + 400 + 280 = 960). You might be wondering where the other 40 pixels have gone. Those 40pixels make up the spacing, or padding, between the columns. This provides the sought after white spacethat prevents the text from each column from running into each other.

    Look at the number of pixels for the middle and right column, which is 700. The middle column is assigned awidth of 400 pixels and the right column is 280 pixels, which is a total of 660 pixels. This provides 20 pixelsof space between the two columns.

    Last, add in the footer:

    #container #footer {float: left;width: 100%;border-top: #adde63 solid 1px;

    }

  • 8/7/2019 html samles

    6/86

    You'll notice the footer has the border at the top as opposed to the bottom. You can place the borderwherever you feel best.

    In the next article, you'll learn how to update the .htm to make use of your CSS.

    How to Build a Website: More on Cascading StyleSheets and LinksBy Michael Rohde

    In the first part of this series on how to build a website, you learned how to: Develop a purpose for yoursite; Organize a project outline; Draw a wireframe; Organize your folder structure; and Define HTML andJavaScript.

    In the second part of the series, you learned how to: Get an HTML editor; Define the different parts of anHTML file; Write your first HTML code; and Start your CSS file. In this third article, you will learn how to:Add additional styles to the CSS and Learn how links work and how to style them.

    Start by opening your CSS file. If you've been following along in the series, you've already defined your tag. It's now time to define your tags, the paragraph tags and the links.

    Side note: It's important to use tags in your web pages for a couple of reasons. The first reason isthat it allows you to globally assign style to your headers. The second reason relates to SEO (search engineoptimization). The details for SEO best practices will be discussed in future articles, but for now, it's good tounderstand that search engines look for keywords within tags to help determine search results. Forexample, if your tag contains the text, "How to make ice cream" and someone used a search enginesuch as Google to look for "How to make ice cream" it's a good probability that your page will appear nearthe top of the search results. Of course, several other variables come in to play, but using tags is anexcellent place to start when executing your SEO strategy.

    Defining Your Styles: Using CSS

    Type the following into your CSS to define your first-level header, second-level header and your paragraphs:

    H1 {text-align:left; color:black; font: normal 20pt "Arial Black"}

    H2 {text-align:left; color:black; font: italic 12pt "Verdana"}

    P {text-align:left; color:black; font: normal 10pt "Verdana"}

    A good rule of thumb when it comes to fonts is to never use more than three different fonts on a givenpage. Try to use one font style for your header , a slightly smaller and different font for the subheader, and then the same font but a different size for the paragraphs

    . Also, keep your styles consistentfrom page to page.

    Now, type the following to define your links. Here, you might want to use your own preferences. Thefollowing provides some ideas and suggestions as to what is possible (and commonly used):

    A:link {color: blue; text-decoration:none}

    A:visited {color: gray; text-decoration:none}

    A:hover {text-decoration:underline}

    It was true in the beginning and it's still true today: the vast majority of websites designate a link with thecolor blue. Most sites also provide some kind of visual clue or transitional effect to show when you arehovering over a link with the cursor. Also, it's a good idea to change the color of a link after a visitor has

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3863856http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3863856
  • 8/7/2019 html samles

    7/86

    clicked on it. This provides the visitor a reminder that they already visited that page. That may or may notprove useful to your site.

    Creating a Link: Using the Anchor Tag

    Before moving too much further, it's time to learn how to create a link (aka anchor tag); after all, you just

    learned how style one. In your .htm file, between the tags, type:My first linkYou should recognize the as being your second-level heading. The new code is the "a href=". That'show all links start. You then type any valid URL inside the quotes. For added functionality, thetarget="_blank"simply means that a new browser window will open when the visitor clicks the link. If thelink takes the visitor off your site to another site, you might want to use this, so the visitor can easily comeback to your site. If you're simply linking to another page within your own site, then it's good practice to

    eliminate this code. The text, "My first link" can be any text you want to describe where the link will take thevisitor. In this case, the link will open Google.com. To end the link, you need the closing tag and thento finish, you need the closing tag .

    If you're playing along at home, go ahead and test this now. You can test your page a couple of differentways. The first way, is to simply click the Preview button in your HTML editor. Or, you can navigate toyour .htm file in your folder structure and click on it. Doing so will open your web browser. Click the link.

    You should see a new window open to Google.com. Close that new window. Your web page should still beopen. Take note that your blue link has turned gray (if you used the same code in the above examples).

    Adding Images: Using the IMG Tag

    At this point, you might be thinking that your page is looking pretty barren with no images. It's time to adda picture to your site. First things first, add a .jpg to your Images folder. If you have no .jpg files, simply goto Google.com, click Images, and search for the image of your choice. Make sure there's no copyrightsattached to the file and then save it in your Images folder. Now, type the following between the tags:The text within the first set of quotes appears in the web browser in the event that the visitor's browserdoes not support images. The src is exactly what it sounds like, it's the location of your image. You can useheight and width to spoecify the size of the image.

    Looking at your preview, you're seeing a lot of left-aligned content. It's time to create a page layout. Youwill learn how to do just that in the

    How To Build a Website: HTML, CSS and HTML EditorsBy Michael Rohde

    In the first part of this series on how to build a web site, you learned how to:

    Develop a purpose for your site

    Organize a project outline

    Draw a wireframe

    Organize your folder structure

    Define HTML and JavaScript

    Now that you know how to define the purpose of your site, create a project outline and create a file folderstructure, it's time to move on. In this tutorial, you will learn about HTML editors, HTML tags, CSS, and howto create your first web page using the infamous "Hello World" programming example.

    http://www.htmlgoodies.com/tutorials/getting_started/article.php/3863856http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3863271http://www.htmlgoodies.com/tutorials/getting_started/article.php/3863856http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3863271
  • 8/7/2019 html samles

    8/86

    HTML 4 is still considered the basic building blocks of a web site. HTML 5 is the proposed next standard, butaccording to the HTML 5 Wikipedia page, the W3C is not expected to recommend it until 2022. However,some aspects are considered stable and some implementations can be used today. For the purpose of thisarticle, HTML 4 will be considered the gold standard.

    Get an HTML Editor

    Now you're ready to dive into HTML and CSS. For the CSS file, all you need is a plain text editor, such asNotepad. For the HTML, you will most likely want an HTML editor, such as the Chami HTML-Kit, which isused in the examples in this article.

    Here's an entire list ofHTML editors that you can choose from. The better HTML editors provide a built-inbrowser window, which allows you to preview your work. Also, you might want an HTML editor that has avalidator. That way, the editor can help find mistakes. It's kind of like using spell checker in a wordprocessor. However, just like spell check does not catch all mistakes, neither will a validator. Your bestchance of success is to develop the eye-of-a-hawk and catch your own typos and mistakes. Writers andeditors pay close attention to detail and this skill is equally important to web developers. If you miss evenone closing tag, your entire page could be affected. Don't let this scare you. As long as you pay attention towhat you're doing, you'll be fine. The best rule of thumb is to type slowly, check your work as you go, andconstantly test.

    As you search the Internet looking for an HTML editor, you might run across some sites or services thatpromise you the ability to build a web site in minutes using their professionally designed templates. Youmight be tempted to use these pre-built templates. If you do so though, are you truly a web site developer,or are you simply skipping steps to reach an end-goal? You might want to ask yourself what your true end-goal isdo you want to be a web developer or do you want to simply fill in the blanks? If you're filling in theblanks of a pre-built template, then you run the risk of creating a site that looks and behaves exactly likesomeone else's. If you do this, you're not building marketable skills that you can sell to a hiring manager tobecome a web developer. It's best to take the long road and write the code yourself.

    Defining an HTML Page

    When you start a new HTML page in Chami's HTML-Kit, you'll see some code has been populated for you.This isn't cheating and this isn't filling in the blanks. The software is simply saving you some typing andproviding you a head start. This is what you'll see:UntitledThe first thing you should notice are the tags. An HTML tag defines what you want to accomplish: whetherthat's to create a link, insert an image, or simply place some text on the page. Each tag has an opening tagand a closing tag; the keywords within each tag are enclosed by angle brackets (< and >). If your tag ismissing an angled bracket, then the whole tag is rendered ineffective. It's very important to remember each< and > and that each opening tag, for example, needs a closing tag . Notice that thedifference in the closing tag is /.

    The first line on the page is the document type declaration and tells a validator which version of HTML to usein checking the document's syntax. You'll notice that this declaration is telling the validator your site usesHTML 4. You'll also see the word, "public" in there. That means your site is available to the public. The W3Cis the group that owns and maintains the DOCTYPE. DTD is the type of DOCTYPE that is being used.

    Transitional means that humans will be reading your site as compared to a computer-read site. And finally,EN represents English, which means the DTD is written in English. It does not represent the language of the

    http://en.wikipedia.org/wiki/HTML5http://en.wikipedia.org/wiki/HTML5http://www.htmlkit.com/http://www.htmlkit.com/http://en.wikipedia.org/wiki/List_of_HTML_editorshttp://en.wikipedia.org/wiki/HTML5http://www.htmlkit.com/http://en.wikipedia.org/wiki/List_of_HTML_editors
  • 8/7/2019 html samles

    9/86

    content on the page. You do not need to alter the declaration type, but you should be aware that otherversions do exist.

    -- This is the first HTML tag on the page. At the very end of the page is the closing tag. Allof your content will appear between the tags.

    -- This is the second HTML tag on the page. Within the is where you place the ofyour page. The of your page appears when someone prints your web page on paper and it alsoappears in the border of a web browser (which all depends on your browser and the settings).

    For Internet Explorer 8, the title of the web page appears in the very top border above the address bar. Tochange the title of your page, simply replace "untitled" with your title. There's no need to alter the tag. Also within the tag is where you place your styles. Since you'll be using CSS while followingthis series of articles, this is where you'll place a reference to your CSS file(s). You'll also place references toyour script files if you use some advanced JavaScript in your web site.

    -- Within the is where you'll do the majority of your coding. This is where you place yourcontent, including text, images and links and other functionality you might want, like image galleries, video,etc.

    Hello World

    Right now, you might be craving some instant gratification. It's time to get to it! Before digging into theCSS, let's build up some confidence and create some actual content that you can view in a browser.

    Immediately after the tag, type:

    Hello World, this is my first HTMLClick the Preview button. In HTML-Kit, that's located in the bottom menu, just to the right of Editor. You'llsee your text in large, Times New Roman font. You can also save your file, go to your folder structure, findthe .htm file and click it to open it in your browser. You'll see essentially the same thing. You might bethinking to yourself, "Gee, that large, Times New Roman font doesn't look very good." You can fix that byadding some style and creating a CSS.

    Starting the CSS

    CSS stands for Cascading Style Sheets and you create this file in a text editor such as Notepad. CSS allowsyou to define styles and page layout in one location so that you can globally apply them to your .htm files. Ifyou ever change your mind on style, you can change it once in your CSS file and it automatically updates allof your .htm files. This can save a lot of time and energy down the line.

    Let's start by adding some style to the tag you created in the Hello World example. Simply type,

    H1 {text-align:left; color:black; font: normal 40pt "Arial Black"}

    You have now defined the style for your tag. describes the tag that you want to define. You

    start with a { and end the definition with }. This is the equivalent to the angled brackets in HTML.

    Text-align - this defines the alignment of the text. You can have left-aligned, right-aligned or centered.

    Color - is exactly what it sounds like, you can change the color of your font. You can use words, such asBlack, Gray, Green, etc. You can also usehex numbers.

    Font - this is where you assign the size and type of font (http://en.wikipedia.org/wiki/HTML_fonts)

    http://en.wikipedia.org/wiki/Web_colorshttp://en.wikipedia.org/wiki/Web_colorshttp://en.wikipedia.org/wiki/Web_colors
  • 8/7/2019 html samles

    10/86

    Notice that after each attribute, you need to use a ; to separate the different parts.

    Now that you have at least one style defined, it's time to connect this CSS to the .htm file. Save the file witha .css extension in your CSS folder. For example, HelloWorld.css

    Open your .htm file and in within the tag, preferably under the tag, type:

    This connects your CSS file to your .htm file. You need to add this tag to each and every .htm file that youcreate.

    Your HTML should now look similar to this:

    Hello WorldHello World, this is my first HTMLComing up next:

    Add additional styles to the CSS including the page design

    Learn how links work and how to style them

    Add gradient colors to the background

    Time to review the functionality requirements of your site

    next article in this series!

    How To Build a Website: Develop a Project OutlineBy Michael Rohde

    You've been online, looked around at a few web sites, and reached the conclusion that you want a site ofyour own. In this tutorial, you will learn how to create a project outline, use a wireframe and begin to designyour website!

    We all know what a website is, but the only problem is that for many of us, our entire knowledge of websitescomes from using Google to search for information, not how to actually design a site that provides thatinformation. What you need is a simple, easy-to-read instructional guide on how to create web sites startingat the ground floor; without using cookie-cutter templates. You want to build your skills and develop thefoundation for either a career in web site development, or you simply want your own unique web site that

    you built yourself; without having to pay a very expensive web site developer.

    What's the Point of Having a Web Site?

    Web sites are good for many purposes. They can be as simple as an online brochure for your business or anonline resume, which allows prospective employers to view your portfolio. Web sites can also be extremelycomplex shopping tools where customers can purchase goods. Web sites may serve as news outlets, or inthe case of blogs, a place where you can publish your rant of the day. The first step you have to take whenbuilding a web site is to determine the purpose of your site. In time, this purpose will help you develop a

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3862031http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3862031
  • 8/7/2019 html samles

    11/86

    mission statement for the site, which will help keep your project on task and focused. Without focus, a website can start out with the purpose of being your online resume, and before you know it, the focus of the siteis a Youtube video of a cat playing with yarn. Yes, that might be cute, but is it relevant? The point is, thereare plenty of features and functionality that you can add to your site, but only implement the features thatare pertinent.

    After you have decided on the purpose of your site, visit existing sites that appear to have the same

    purpose, as doing so can provide you with some ideas for the presentation, functionality and content of yoursite. From here, you can start to form an image in your mind of how you want your site to look and behave.

    Formulate a Project Outline

    You're at the point now of formulating a project outline. You know the purpose of the site, you've written amission statement and you have an idea of the functionality you want on your site. It's a good idea to starta list of all the features you want, which might include:

    Do you need a shopping cart to allow customers to purchase items?

    Do you want visitors to leave comments?

    Do you want a forum?

    Do you want social networking features? Do you need to worry about security?

    Do you want people to sign in to view particular content?

    Will you have a newsletter?

    Also include in your project outline if you have a budget for designers and writers. Web sites include manyparameters, and most shops have teams of graphic artists, writers, editors, developers and Q&A. No oneperson can specialize in all things; although some of us try...you need to determine your strengths and bewilling to reach out to others. If a budget is a fantasy, then you can still develop a fully functioning site, butkeep in your mind that at some point you might want to find a friend or a colleague to help copyedit, orcreate some unique art for your site. You could always return the favor by offering to build or enhance aweb site for them.

    One last item to include in your outline is a timeline. Do you have any existing constraints as to when you

    want your site to go online? Giving yourself a deadline will provide a goal for you to reach. Otherwise, youmight hold off on launching the site until you get just one more piece. When it comes to developing websites, there will always be one more piece to add, or one more item to tweak. You have to know when to sayenough is enough and put your creation out there for the world to see.

    Draw the Wireframe

    Now that you have a purpose and a project outline, it's time to create a wireframe. What is a wireframe?Think of it as taking that image in your mind and putting it on paper. If you have the skills and theresources, you can always use graphics software to start sketching your web site. However, even as archaicas it sounds, taking pencil to paper is a great place to start. Simply draw in a rectangle for the header, somevertical boxes for your columns and another rectangle for the footer. You might be scratching your headover, what's the point in that, but it comes in handy when you start writing the code for the layout. The

    wireframe provides a reference point for what you are creating. Plus, if you like what you see on the paper,chances are you're going to like what you eventually see on the screen. As part of the wireframe, you canwrite in your Title header and any basic content that you know you're going to want. Plus, you can trydifferent layouts. Do you want a single-column, two-column or three-column layout? Drawing it by handtakes a lot less time than writing and rewriting the code.

    While you're drawing your wireframe, keep in mind that studies have shown that a visitor's eye traces a Zpattern across the screen as they scan a page. Don't become disheartened if your visitors don't read everyword you write and don't click every link that you provide. You basically have 10 seconds for a visitor to

  • 8/7/2019 html samles

    12/86

    determine if they like your site or not. In that amount of time, you have to present your purpose, clearlyand succinctly, to keep that visitor from leaving.

    The first thing your visitor will see is the header, which is presumably the title, a logo and perhaps a shortblurb that describes the site. Next, they'll see the middle content and perhaps skip right over anything thatis directly below the header on the left. Last, they'll scan the bottom of the screen. This could be your footerif the entire page fits on the screen. These are principles that you have to take into consideration when

    designing the page.

    Note: In regards to the Z pattern, if your menu and navigation is crucial to keeping visitors on your site,you'll probably want a horizontal menu as opposed to a vertical menu running along the right or left border.What you have on your menu will also determine the additional pages to your site. You'd be hard-pressed tofind a web site these days that consists of a single page. You need to think about the content for thesesecondary pages. The vast majority of sites do have an About Us page and a Contact Us page. Organizeadditional pages by topic, which provides a sense of logic for the visitor to find what they are looking for.Keep in mind that visitors do not want to click more than two or three times to reach their objective.However, if they feel they are on the right path, they will continue to click until they get to where they wantto go. The basic rule is to keep your navigation simple and each section of your site should not be more thantwo or three levels deep.

    Get OrganizedAt this point, you're ready to turn on your computer. First, you need to create a folder structure. Keepingyour files and images organized is crucial. Each file and image will be linked in your code. If you move a fileafter you've linked it in your code, then you need to go back and update the code. Save yourself that hassleand create a folder system now.

    Create one folder for each type of file that you'll have more than one of, such as:

    Images

    Pages (your .html files)

    CSS (cascading style sheets, it's how you format your pages)

    Scripts (more than likely, you'll add some JavaScript to your site)

    Don't worry about these folders being empty for now. You'll fill these folders soon enough.

    The Coding is Next

    Now you're probably starting to wonder, "when do I start coding". That will come in good time. Let's startfirst with defining HTML. HTML stands for Hyper Text Markup Language and is the cornerstone for all websites. It's a relatively simple and easy language to learn and to use. HTML became publicly available in1991, and almost 20 years later, it's still relevant and highly important. If you learn HTML, you haveundertaken a large first step in web site development. The next article in this series will guide you throughhow HTML works, what tags are and you'll write your first lines of code that allows you to say, "Wow. I didthat. I *can* do this!"

    Equally is important to HTML is JavaScript, which allows the development of enhanced user interfaces anddynamic websites. It was developed with ease-of-use in mind so that non-programmers can work with it.For the most part, if there's some kind of basic functionality that you want with your site, chances are youcan find sample JavaScript online that you can tweak to your preferences. The next article in this seriescontains the following information:

    Writing your first HTML code

    Starting your CSS (cascading style sheet)

    Applying the styles in the CSS to the HTML

  • 8/7/2019 html samles

    13/86

    So You Want To Set Up Your First Site, Huh?By Joe Burns

    ...use these to jump around or read it all

    [Putting A Site Together]

    [The HREF Links]

    [In Site vs. Off Site Links]

    [Directory Structure]

    [Internal Links]

    [To Use Full URL, Or Not]

    [What If I Do Use the Full URL?]

    [Are There Exceptions To This?]

    [The Home Page Links]

    Answering a ton of email every day allows me to keep an eye on when the new batch of HTML writerscome into the fold. The questions I receive always become more and more difficult, and then all of a

    sudden...they become much simpler. The new group of people has arrived.What's more, in my constant want to write tutorials on new and more difficult topics, I forget to create

    more beginning-level tutorials. In that vein, I offer this tutorial.

    Putting A Site Together

    Lately, I've been getting a lot of email asking about setting up a site with numerous internal pages. For

    example, let's say you create a homepage. We'll call it homepage.html.

    You then create three more pages:

    links.html (A page of your favorite links) photos.html (A page of your favorite photos)

    story.html (A page with one of your best stories)

    At the moment they are just sitting on your hard drive (or floppy disc) and now you want them to

    become a site. Homepage.html will offer links to the three other pages. That'll be your first site. Good. Now,

    how do you do it?

    The HREF Links

    First off, I'm assuming you already have a place to post these pages.

    So, now you have a place for your files. This "place" you have been given is actually a small section of a

    hard drive on a server somewhere. In computer terms, you have a directory where you can place your files.

    Think of this directory like an equal to a floppy disc. It's a contained area where the pages, and all the

    images that go on those pages will be housed.

    This is important to remember when you're writing the links that will connect these four pages together.

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479561http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#sitehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#thehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#inhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#directoryhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#linkshttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#usehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#whathttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#arehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#homehttp://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479561http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#sitehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#thehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#inhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#directoryhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#linkshttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#usehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#whathttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#arehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561#home
  • 8/7/2019 html samles

    14/86

    In Site vs. Off Site LinksYou've probably already read throughPrimer Four - Creating Links. If not - give it a once over pretty

    soon. It'll give you the basic format of a link. Now let's talk about the pages you'll link to.

    First off, let's attach to a page outside of your site. Here's the basic format:

    Click Here

    Note the address above is a full URL. ("URL" stands for Universal Resource Locator. It's a fancy way ofsaying "web address") It starts with that http thing and ends with that .com deal. It's a full address.

    Now let's look at what I call an internal link. This is a link that stays within your own site. One of your

    pages is calling for another one of your pages. We'll say this is a link from your homepage.html tolinks.html. Remember that from above? Here's the format:

    Click Here

    Notice I'm only calling for the page, without the full address attached. Why? Well, because I don't needit. To make the point a little stronger, let's look at the directory structure ofweb addresses.

    Directory Structure

    For the sake of continuing this discussion, and because I love to hear myself talk, let's take this little

    fantasy of mine a bit further. You purchase an account on a server called www.joeserver.com. When you

    sign up for your account, you choose the login "schmoe". This means that, most likely, your email address

    will be [email protected] and your web site address will be http://www.joeserver.com/~schmoe. The

    little squiggly line thing (~) is called a tilde. It tells the server, "There is one directory on this server called

    'schmoe'- find it."

    When you use your File Transfer Protocol(FTP) program to upload files to your new server, you will

    upload into the directory that was set aside for you - in this case, schmoe.

    So you upload your homepage.html page into your directory. The address of that page is now

    http://www.joeserver.com/~schmoe/homepage.html.

    See the slash I added and then the name? I do that because the homepage.html page is now inside your

    directory called schmoe.

    Think of a directory structure as one item being inside of a larger item. For example, a word is inside ofsentence, is inside of a paragraph, is inside of a page, is inside of a chapter, is inside of a book. If this werewritten in directory structure format, it would look like this:

    Book/chapter/page/paragraph/sentence/word

    It gets smaller as you move to the right, each is inside the previous. Take this URL for example:

    http://www.server.com/users/pages/ohio/joe.html

    In that URL, the page "joe.html" is inside a directory called Ohio, is inside a directory called pages, is

    inside a directory called users, is on a server called server.com.

    That's why the page homepage.html is at the end of the address above. Make sense?

    Internal Links

    http://www.htmlgoodies.com/primers/primer_4.htmlhttp://www.htmlgoodies.com/primers/primer_4.htmlhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561http://www.htmlgoodies.com/beyond/ftp.htmlhttp://www.htmlgoodies.com/beyond/ftp.htmlhttp://www.htmlgoodies.com/primers/primer_4.htmlhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479561http://www.htmlgoodies.com/beyond/ftp.html
  • 8/7/2019 html samles

    15/86

    Now we put together a site in your own directory. Once again, you have a homepage called

    "homepage.html" and three sub-pages that you want to link to from homepage.html. They are "links.html,"

    "photos.html," and "story.html". First off, you need to to FTP, or "upload" all four pages to your directory.

    Now, here's the first link on homepage.html that will call up your links.html page.

    Click Here

    Notice I am only calling for the page by its name. I am not using the full address.Now, I could use the full address. There's no reason why I couldn't. If you followed along with the

    discussion above, you'll remember that since the file was uploaded into the schmoe directory, its full addresswould be http://www.joeserver.com/~schmoe/links.html. So why not use it?

    To Use Full URL, Or Not To Use Full URL

    If you are linking to a page off of your site, then you must use the full URL. The reason is that you are

    leaving your own directory. In fact, the chances are really good that you are leaving your server all

    together. Because of that, you need to offer your HREF command the full address to the new site.

    But when you're staying within your own site, as we are above, you need only call for the page name.

    You see, your directory is a closed home for all of your pages. If you only call for a page or an image

    through its name minus the full address, what happens is that the server looks for the page or the image

    inside the same home that houses the page that called for it. In other words, servers will search a page's

    home directory by default. That's good to know when you create your links. It means you only have to use

    the page's name minus the full URL.

    What If I Do Use The Full URL?Always playing the rebel, huh? The answer is that your internal links might run slower. You see, if you

    use the full address, what happens is that when your user clicks on a link, a full search process begins. First

    the server is located, next the directory is located, then the page is located. Whereas, if you use only the

    name, the search is already at its destination. The server simply searches itself. Slick, huh?

    The Home Page Links

    So what is written onto homepage.html to link the pages together? This:

    Click Here for My Favorite Links

    Click Here for My Photos

    Click Here for My Best Story

    Now you're all linked up. Hey! You made more than a couple of pages. You linked them all together. Youmade a site.

    Enjoy!

    What is "HTML" Anyway?By Vince Barnes

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479611http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479611
  • 8/7/2019 html samles

    16/86

    Do you know what it stands for? And Why?

    Somebody recently told me they were so dumb they didn't even know what "html" meant. There

    are a couple of things I think are wrong with that sentiment. Firstly, dumb means unable tospeak, though I think he meant lacking intelligence. To my way of thinking, lacking speech

    doesn't imply lacking brainpower any more than blindness does! Secondly, lacking the

    knowledge of any particular thing doesn't imply a lack of brainpower. In China, there are little

    children who know what chicken and rice is called in Chinese. If you don't, you shouldn't feelbad I bet they don't know what it's called in English! All this having been said, there are still

    those who feel the need to know what certain Web related things mean. If you already know,

    please read on anyway I bet there's some piece of fascinating trivia in here you didn't know!

    Let's start with the original question. The easy answer is that html is the language of web pages.

    The trouble is that's incomplete! Many moons ago, the use of typewriters to lay out text pages

    meant that changing a line required retyping a page. Then some clever characters sat down and

    figured out how to use computers to manipulate the words on a page so that words, lines, blocksof text or entire paragraphs could be moved around at will, and the computer would again lay out

    the page for you. They called it "Word Processing" and it was a big new deal! It also included

    the ability to mark certain pieces of text to be printed bold or underlined or various other specialtreatments. This was accomplished by using special sequences of characters, or codes, to

    indicate the beginning and ending of the bold (or whatever) text. These codes were known as

    "mark-ups", and the collection of them was a Mark-up Language. Since it was used in WordProcessing, it was a Word Processing Markup Language. With the addition of codes that would

    link a word or phrase to another document file, providing the ability to jump from one to the

    other (a system called "Hypertext"), came the creation of HyperText Markup Language or

    HTML. It has been suggested (many times!) that the term "Hypertext" was influenced by theterm "Hyperspace" used so much in Gene Roddenberry's popular Star Trek TV series. I beg to

    differ. "Hypertext", coined in 1965 by Ted Nelson (see

    http://www.geocities.com/tonychilvers/hypold/development.html andhttp://jefferson.village.virginia.edu/elab/hfl0155.html ) predates Star Trek, which first aired in

    September 1966 (seehttp://www.startrek.com/information/timeline.asp?ID=70802 ) It is possible that

    Gene was influenced by Ted!

    The birth of the World Wide Web is related to the release of Marc Andreesen's Mosaic browser(see http://www.geocities.com/tonychilvers/hypold/mosaic.html ) Note that the term "browser" is

    closely related to the concept of a "Web" of documents (pages) spread "World Wide" and

    through which one can "browse" by traversing "HyperText" links. This is a system conceived byTim Berners-Lee (seehttp://jefferson.village.virginia.edu/elab/hfl0007.html ). Thus, the World Wide

    Web is a collection of document files ("Web Pages") linked to each other through the transport

    mechanism of the Internet.

    CGI is another term that often brings confusion. CGI is a specification for an interface (saywhat???) CGI stands for Common Gateway Interface. It's actual a means of connecting from a

    Web Server program to a scripting language that can perform functions outside the Server's own

    capabilities. Programs written to be accessed via a CGI interface are frequently referred to asCGI programs or even CGIs. This leads to the notion that CGI is a language, which it is not.

    Programs written for the CGI are often written in Perl, which is a script programming language.

    http://www.geocities.com/tonychilvers/hypold/development.htmlhttp://jefferson.village.virginia.edu/elab/hfl0155.htmlhttp://www.startrek.com/information/timeline.asp?ID=70802http://www.startrek.com/information/timeline.asp?ID=70802http://www.geocities.com/tonychilvers/hypold/mosaic.htmlhttp://jefferson.village.virginia.edu/elab/hfl0007.htmlhttp://jefferson.village.virginia.edu/elab/hfl0007.htmlhttp://www.geocities.com/tonychilvers/hypold/development.htmlhttp://jefferson.village.virginia.edu/elab/hfl0155.htmlhttp://www.startrek.com/information/timeline.asp?ID=70802http://www.geocities.com/tonychilvers/hypold/mosaic.htmlhttp://jefferson.village.virginia.edu/elab/hfl0007.html
  • 8/7/2019 html samles

    17/86

    "PERL" originally stood for Practical Extraction and Report Language and was design and

    written by Larry Wall (Larry has been known to say that it actually stands for "Pathologically

    Eclectic Rubbish Lister"!) Perl is a great scripting language and if you haven't yet, you shouldlearn about it here: http://www.htmlgoodies.com/primers/perl/

    By the way, ASP, which stands for Active Server Pages uses another scripting language. Basedon Visual Basic, VB Script is the language of ASP. They say that on the Internet things change

    so quickly that you have to measure time like you do for a dog's age, and count seven years foreach calendar year. No exception here, as ASP is now to be replaced by ASP.Net (Asp dot Net)

    (see Dot Net Introduction ) There's a tutorial coming to HTML Goodies soon (seeI Want My ASP )

    The world of computers is rife with acronyms. There are so many, and they have been used so

    much, that some have become words in their own right. Did you know that "Bit" derived fromBinary digIT? How about flops (FLoating point Operations Per Second)? And mime (Multi-

    purpose Internet Mail Extensions)?

    Boot and Reboot , while not acronyms, derive from the expression "to pull up by its bootstraps"and refer to the process of loading an Operating System (OS) by first loading a small loader

    program from a predetermined place. If you come across a computer expression you've not

    heard before, nod knowingly, say "Ahh yes!" then excuse yourself, run to a PC (Personal

    Computer ) pull up a browser (thanks Marc) and go to webopedia.com This way you'llavoid the embarrassment of not protecting yourself from a pulsing zombie. I hate it when that

    happens!

    Please

    note I have

    used the

    HEIGHT and

    WIDTH

    commands

    for my

    image. You

    should do

    this with all

    your images.

    Plus use the

    ALT

    command. It

    really helps

    with page

    loading. Go

    here for

    enough about

    it to make

    your brain

    pop.

    Now, noticethe

    ALIGN="---"

    subcommand in

    the image

    command

    above. That

    ALIGN

    command, when

    using "right" or

    "left" refers to

    the placement

    of the image on

    the page ratherthan the text

    itself. That will

    be an important

    item in a

    minute. Keep it

    in mind.

    http://www.htmlgoodies.com/primers/perl/http://www.htmlgoodies.com/dotnet/dnaIntro.htmlhttp://www.htmlgoodies.com/articles/IWantMyASP.htmlhttp://www.htmlgoodies.com/articles/IWantMyASP.htmlhttp://www.webopedia.com/http://www.webopedia.com/TERM/P/pulsing_zombie.htmlhttp://www.htmlgoodies.com/tutors/hw.htmlhttp://www.htmlgoodies.com/primers/perl/http://www.htmlgoodies.com/dotnet/dnaIntro.htmlhttp://www.htmlgoodies.com/articles/IWantMyASP.htmlhttp://www.webopedia.com/http://www.webopedia.com/TERM/P/pulsing_zombie.htmlhttp://www.htmlgoodies.com/tutors/hw.html
  • 8/7/2019 html samles

    18/86

    In order to get the text to wrap around the image, you use one of these ALIGN right or left commands.

    But the image is already to the left, you say. Do it anyway. The ALIGN alerts the browser to allow the text

    to wrap. That's what I did above.

    The image that went to the right just used the ALIGN="right" subcommand attribute to wrap.

    Image In The Center

    Isn't that a neat trick above, getting the image in the middle of flowing text? It actually isn't much of a

    trick. It's a three-celledtable with half the text in one side and half in the other.

    To do it, I wrote the text I wanted and split into the two parts. I made sure to write enough text so that

    the image height was equaled. Then I put it all into this table format:

    First Half of Text

    Image Second Half of Text

    Speaking of Tables...

    Sure will. Just make a point of adding

    ALIGN="left" or ALIGN="right" inside the first

    TABLE command. Like so:

    Align One Line of Text

    This is actually the easiest of the bunch. If you only want to align one line of text, like a title, with a

    picture, then use one of three commands; "top," "middle," or "bottom." Like so:

    Will the ALIGN="---" commands work

    when you are using Tables?

    http://www.htmlgoodies.com/tutorials/tables/article.php/3479851http://www.htmlgoodies.com/tutorials/tables/article.php/3479851http://www.htmlgoodies.com/tutorials/tables/article.php/3479851
  • 8/7/2019 html samles

    19/86

    No Commands AllowedThey won't align. "H" heading commands want to be alone. To get bigger text next to the image, use

    commands.

    Aligning Two Lines of Text

    If you've tried the top, middle, and bottom commands above, then you know after you get more than

    one line of text, the rest jumps to under the picture. Bummer.

    How to get around it is a little more tricky. First off, you only use a left or right ALIGN to get the text

    started. (Yes, it starts at the top. I'll explain further.) After you have the amount of text you want, you usethis command:


    That little doo-dad clears the remainder of the picture wrap and starts you on the next line under thepicture. Like so:

    This text is next to the Monk's picture.This text is also...(
    placed here)

    This text isn't.

    Now, some may say they want the text to start down thepicture a bit. They want the same effect as the ALIGN="middle" orALIGN="bottom" commands above. Easy to do. You add blanklines.

    Adding Blank Lines

    But... you say I have tried adding fifty

    commands and I never get more than one line. That's true.

    The reason is because you never put anything on the line after the

    command. Try this:

    That's a great little deal that adds a couple blank lines. Why? Because the is a space. You've putsomething on the line so the next

    can act. But the space is invisible, so no one sees it and you get twoblank lines. Slick, huh? Use a few to "bump" your text down the image face. You can get the same effect bysimply adding a slew of
    commands too, but this gets the job done quicker with less text.

  • 8/7/2019 html samles

    20/86

    Aligning Text Alone

    You probably already know about the commands that center the text for you:

    and

    You surround the text, tables, images, or whatever, with those two commands and it centers it all. Nosweat.

    There's not much I can tell you about left align either since that happens without you doing anything. It'sthat pesky right align that messes people up.

    I mean it's really a rough deal getting the text to do that!Why, if I could do it... I would!

    Okay, bad joke. But it gets the point across. The text above is right-aligned. And it's easy. Just surround

    whatever you want right aligned with this:

    and

    What About Custom Text Shaping?

    No two ways about it. If you want certain breaks here and there and you want a space here and a line to

    end there, you have to do all that by hand.

    Use...


    for a single space text jump.

    for a double space text jump.

    to add a space.

    And that wraps it up. Get it?! Wraps?! Man! I can be so funny at times... and then there's now. *Sigh*

    So, You Want Newspaper Columns, Huh?By Joe Burns

    Please note: These are Netscape-specific commands. This will not work on Explorer.

    News Flash!HTML Artist Uses Newspaper Columns -- Thousands Flee!Joe Burns -- HTML Goodies

    Sorry for the theatrics, but this is a tutorial about newspaper columns, and hey, any time I get thechance to use the BLINK command --

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479341http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479341
  • 8/7/2019 html samles

    21/86

    I TAKE IT! Sorry Internet Explorer users. Blink doesn't work on your browser either. Man...this just isn'tyour kind of tutorial is it?

    Dig This - Click to see the Newspaper columns

    You have to have Netscape to see it!

    Now onto the matter at hand: How did I get those three nice columns? Table commands, right? No, Iused a command that looks more like an afterthought than something the HTML know-it-alls created foreveryday use.

    I used this command:

    Some might say that all this can be done with table commands, and while that is true, it isn't as easy. Todo this you simply surround a block of text with these commands:

    and

    ...and you're off and running.There are three other subcommands that go along with this MULTICOL. They all go inside the first

    MULTICOL and effect everything in between.Use:

    COLS="#"

    to denote how many columns your page will have. I happen to have chosen three. I was just feeling like atrio at the time.

    Use:

    GUTTER="#"

    to denote the width, in pixels, between the columns of text. I happen to have chosen the number 25 for thislovely tutorial.

    Use:

    WIDTH="#"

    to denote the overall width of all columns together.

    All the commands that manipulate text shape, like CENTER and ALIGN, will work inside the column. So ifyou center something, it will center inside the column, but you knew that.

    The reason I think this command is a bit of an afterthought is that there isn't a command that jumps youto the beginning of the next column to start a new story or heading. The commands simply take text andbreak it into columns. It's a nice look, plus it spaces it evenly. Table cells will do that, but it's a lot morecoding. You could get the same effect using tables, but if this is all you want, and the page will be viewed onNetscape browsers, the MULTICOL command does a nice job.

    Oh, and in case you were wondering if there is a MULTIROW command -- yes. It's called "TheParagraph."

    Enjoy!

    http://www.htmlgoodies.com/legacy/tutorials/getting_started/cols_example.htmlhttp://www.htmlgoodies.com/legacy/tutorials/getting_started/cols_example.html
  • 8/7/2019 html samles

    22/86

    So, You Want An HTML Declaration, Huh?By Joe Burns

    If you've made your way through the HTML Goodies site, then you probably have looked at the source ofsome of my documents. I know some of you are looking because every now and again, I get a letter asking

    what that strange, cryptic command right at the top stands for. If you don't know what I mean, this is thecommand:

    That's a strange looking thing, huh? It's called an "HTML Declaration." Basically it's declaring whatversion of HTML the browser is to use when reading this document. It also tells the viewer, if they care tolook. It's long, but rather easy to understand. Here's what it means:

    !DOCTYPE HTML PUBLIC proclaims this is an HTML document type that can be read by publicbrowsers.

    -//W3C represents the HTML organization that denotes what HTML commands are to be used andwhat are not. You can visit their WWW page at http://www.w3.organd read about HTML until yourbrain is full.

    //DTD HTML 3.2 stands for Document Type Description HyperText MarkUp Language (version)3.2.

    //EN means the document will be written in the English language.

    If you were attempting to write HTML using the commands set aside in HTML 4.0, then you wouldchange the header above from 3.2 to 4.0. Now, I'm not talking browsers here. I am talking version of HTML.Again, if you'd like to read about new and older versions of HTML and what makes them different, go tohttp://www.w3.org. 4.0 is out and there are reams of paper on what it will do.

    My assumption is that once you read this, you will right away ask if you need to hurry and put thecommand on your pages. I don't have a good answer for you there. I knew that would come up so I

    contacted my brain trust of HTML people. One said yes, one said no, the other said to do it if you remember.Not exactly the consensus of answers I was looking for.

    So, do you use it? Yes. I do on every page now. I started putting it on when I first learned about it.Some of my very early pages do not have the command and I'm in no real hurry to get it on them. Mainlybecause the pages use very early, and very basic, commands that do not belong to a higher version ofHTML. Besides, if you do not have a declaration, I've been told the default is the highest HTML version. Iwould not be doing myself any good by altering the page.

    I'll give you a couple rules of thumb that one of the HTML big-heads told me. If you're using METAcommands or plan to use HTML validators... use the declaration.

    ...and of course, any comments regarding the use of these commands will be cheerfully accepted. If youknow something I don't, tell me. I'll post it if I feel others should know.

    So, You Don't Want .html, Huh?

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479361http://www.w3.org/http://www.w3.org/http://www.htmlgoodies.com/tutorials/getting_started/article.php/html4.htmlhttp://www.w3.org/http://www.htmlgoodies.com/tutorials/getting_started/article.php/meta.htmlhttp://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479361http://www.w3.org/http://www.htmlgoodies.com/tutorials/getting_started/article.php/html4.htmlhttp://www.w3.org/http://www.htmlgoodies.com/tutorials/getting_started/article.php/meta.html
  • 8/7/2019 html samles

    23/86

    By Joe Burns

    Use these to jump around or read it all...

    [The Index Page]

    [How To Do It][Creating A Directory][The Big Hint]

    I've gotten lots of letters asking how I am able to post pages that do not require the .html extension. Tosome it may seem simple enough, but to those new to the HTML game, it isn't. So, here's the trick.

    My assumption is that you have a WWW site right now, correct? That means you have a general ideathat you need to place files from your computer to a server so the whole world can see them. It's calledFTP-ing a file. Some call it "uploading."

    When you upload, you are uploading to a directory. That directory is a little section of the server's harddrive set aside and given a name. Let's say your home page address is:

    http://www.fred.com/~wwwuser

    The name of the directory that you upload or FTP all your files to is "wwwuser." See that above? Now,what you may not know is that that directory has a certain set of rules that it follows. The main rule is thatit allows any- and everyone to look at its contents. It's a WWW directory and people can access it, right?Another rule is that you are given personal access, with the use of a log-in and password, to place andremove files.

    The rule you may not be aware of, and the one that will be of utmost importance for this little tutorial, isthat that directory has been told to look for a specific file name when someone logs in. Look at the addressabove again: Notice it doesn't call for any specific page. It could, of course, just by adding a slash and thenthe page name, like so:

    http://www.fred.com/~wwwuser/joe.html

    But that's not what happened. All that was listed was the name of the directory. Again, look at theoriginal address toward the top. Better yet, look at HTML Goodies or the address at the the top of yourbrowser window. See, the address is:

    http://www.htmlgoodies.com/tutors/directory/

    None of these addresses call for a certain page, but one comes up. That's because of the third rule Ispoke of earlier. I hope you were paying attention... and spit out that gum!

    The Index Page

    When you got your WWW site, you were told to give the home page a certain name. The vast majority ofthe time that name is index.html. Why? Because the directory that holds your WWW files has been toldthat when someone tries to get access to the directory, by default, display the index.html page. Get it?

    Now, don't get flustered if your default page isn't index.html. I have been on many different servers.One wanted www.html, the other wanted HomePage.html (note the capitalization), and a third wanteddefault.html. My Webmaster wizards here at HTML Goodies tell me that you can configure a server to searchfor booger.html if you really want to. But that would lead to a sticky situation. *Rim-shot* (Thank you,folks, good night! Try the veal.)

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479371http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479371#indexhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479371#howhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479371#creatinghttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479371#hinthttp://www.htmlgoodies.com/http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479371http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479371#indexhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479371#howhttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479371#creatinghttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479371#hinthttp://www.htmlgoodies.com/
  • 8/7/2019 html samles

    24/86

    How To Do It

    Geez, it took me a while to get to this, didn't it? I tend to ramble. So, how do you do it? Well, the rule ofthumb here is to remember that any subdirectory (a directory inside a directory) retains all the properties ofthe parent directory.

    Huh?

    Any directory inside a bigger directory will do what the big directory does, just because. (That's my best"Gen-X" speak.)So, if you make a directory inside of wwwuser, then that directory will also display its own index.html. If

    you make a smaller directory inside that directory, then it will display its own index.html. Get it?

    Creating A Directory

    I have received so many letters telling me that I go the long way in making a directory. True, there aresoftware programs out there that will do all of this with the click of a button, but in case you don't have suchan animal, try this. If you do have a program that will do all of this on the fly, go nuts.

    1. Telnet into your site.2. Get to your directory. Usually when you telnet into your site, you are either in, or one directory

    above, your www directory where you keep all your files.3. Try typing at the prompt: cd [name of your www directory]4. If that doesn't work, type cd .. (two periods) and then try step 3 again. If you don't get any errors,

    you're there.

    5. If you would like, you can type ls at the prompt and that will give you a listing of all your files.6. To create the directory, type mkdir [directory name]7. You can now do another ls command and you should see that directory sitting there.8. Some servers need for that directory to be "turned on" before anyone can use it. So, just to be safe,

    type chmod [directory name] a+rx now. If the server won't take that command, try substitutinga+rx with 777.

    9. Log out. You're done.

    Now you have a second directory sitting inside of your wwwuser directory. That directory will respond to

    its own index.html. Let's say you named the directory "skippy." Now you can tell people to go to:http://www.fred.com/~wwwuser/skippy

    ...and they'll get the main page with no html. Now, how easy it that? Once you do it, it's a joke thesecond time.

    The Big Hint

    I'm going to tell you right up front what will mess you up: You will replace the wrong index.html with the

    wrong index.html at least once. I will bet you a zillion clams. I've done it at least 10 times. Always make a

    point of checking your work after you transfer stuff. That allows your mistakes to be fixed straightaway.

    Bye-bye!

    So, You Want Dynamic Fonts, Huh?By Joe Burns

    Use these to jump around or read it all...

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479401http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479401
  • 8/7/2019 html samles

    25/86

    [Dynamic Fonts

  • 8/7/2019 html samles

    26/86

    VietPage Fonts: Ditto.

    The majority of the fonts I found were made available as long as you always had the font grabbed fromthe server offering them. Yes, it's pretty easy to download the font and run it from your own server, butthese people are nice enough to offer these fonts, you should do what they ask. The effect is the same as ifyou were running it from your own server.

    The next, next question is then - how do I make my own fonts? Well, from everything I've read, youhave to grab a program specifically set to create fonts. A couple of the shareware programs did not have theability to save in pfr format. If you have a pay-for program that will create fonts, check to see if it has theability to save in pfr. If not, the people athttp://www.truedoc.com suggest HexMac Typograph and ExtensisBeyondPress.

    I ran across an article that suggested that CorelDraw has the ability to save fonts as pfrs. If you haveCorelDraw, check out:http://www.mediafear.com/dreamweaver/help/dynamic_fonts2.html

    If you do make your own fonts, here are the letters you must create:

    abcdefghijklmnopqrstuvwxyz

    ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 &$?!%

    Get the Font

    Let's say you've traveled to http://www.truedoc.com and have found a few fonts you like. I actually likethree that they've offered:

    AmeliaAmeriGarmnd

    BakerSignet

    The font names above should be in the font suggested by the name. If not, then your browser versionmay not be high enough, or the fonts may still be downloading (I'm grabbing three). By now though, theyshould be up and running.

    In order to use a font, you need to grab it and download it into your browser's cache. You do thatthrough LINK tags set in the document's HEAD tags. I grabbed three fonts, so the tags looked like this:

    Notice that each font is being grabbed from the TrueDoc server, as they asked I do. If you use a fontthat is coming right from your own server, there is no need for the full URL.

    Let's take a look:

    LINK sets up a link to something

    REL is the relation of the link to the document

    http://www.vietpage.com/dynamicfonts.htmlhttp://www.truedoc.com/http://www.truedoc.com/http://www.mediafear.com/dreamweaver/help/dynamic_fonts2.htmlhttp://www.mediafear.com/dreamweaver/help/dynamic_fonts2.htmlhttp://www.mediafear.com/dreamweaver/help/dynamic_fonts2.htmlhttp://www.mediafear.com/dreamweaver/help/dynamic_fonts2.htmlhttp://www.truedoc.com/http://www.vietpage.com/dynamicfonts.htmlhttp://www.truedoc.com/http://www.mediafear.com/dreamweaver/help/dynamic_fonts2.htmlhttp://www.mediafear.com/dreamweaver/help/dynamic_fonts2.htmlhttp://www.truedoc.com/
  • 8/7/2019 html samles

    27/86

    FONTDEF tells the document this is a font definition

    SRC tells the browser where to get the font

    The URL is the path

    Very Important! The names of fonts are case sensitive. Big letters have to stay big.

    Yes, but what about this:

    Remember I said earlier that in order for this to work on MSIE, you would need an Active X program.This is it. It's 68K and it has to be offered if MSIE users are to get in the game. By doing it this way, you arebasically completing a step for the user. Microsoft offers a plug in of their own at their MSIE page. You cango grab it and install it if you'd like. However, doing it this way finishes the process for the user. They will beasked if they wish to download the Active X helper. That means a gray dialogue box pops up that oftenscares people, but there's no getting around it.

    If you're interested, Microsoft also offers a "Font Smoother" at http://www.microsoft.com/typography/

    grayscal/smoother.htm. It helps to make your fonts look...well...smoother.

    Using the Fonts

    OK, you've got the fonts downloaded into the cache. Now you need to incorporate them into the page.This is the easy part. At this point in time the fonts act like they were already on the system to begin with,because in reality, now they are on the system.

    Follow these basic FONT and Style Sheet formats you've seen a million times before:

    Text Text

    P {font-family: "AmeriGarmnd BT";}

    However you incorporated fonts before, you can now use these to get up and running. Just do yourself afavor when you choose a font from a download site. Make a point of looking at their sample code. It oftendiffers slightly. Notice above that "BT" that is in the command? That isn't in the download name. Payattention to that.

    That's That

    That's the basic concept. Finding the font you like may very well be the hardest part of all of thisdynamic font stuff. Good luck with it.

    Enjoy!

    So, You Want HEAD Commands, Huh?

    http://www.microsoft.com/ie/http://www.microsoft.com/typography/grayscal/smoother.htmhttp://www.microsoft.com/typography/grayscal/smoother.htmhttp://www.htmlgoodies.com/tutors/textfont.htmlhttp://www.htmlgoodies.com/tutors/ie_style.htmlhttp://www.microsoft.com/ie/http://www.microsoft.com/typography/grayscal/smoother.htmhttp://www.microsoft.com/typography/grayscal/smoother.htmhttp://www.htmlgoodies.com/tutors/textfont.htmlhttp://www.htmlgoodies.com/tutors/ie_style.html
  • 8/7/2019 html samles

    28/86

    By Joe Burns

    Use these to jump around or read it all...

    [Basic HTML Format]

    [What the HEAD Commands Actually Do][Information Regarding the Document]

    [TITLE Commands]

    [META Commands]

    [Base HREF Command]

    [Parts 2 & 3]

    Try this for fun. Without telling the people what you are doing, ask a few of your friends what the commands on an HTML document are for. I'll bet you get widely differing answers. I received aletter from a person who really chewed me out for not involving the HEAD commands in the HTML GoodiesPrimers. I asked why this struck such a chord with her and she answered that the commands have to be inthe document for it work correctly. "No, they don't," I replied. "Yes, they do," she replied back. "No theydon't," I wrote back. "Do too," she replied. "Do not!" "Do too!" "Do not!" "Do too!" "Do not!" "Do too!"

    The conversation went downhill from there.

    Actually we're both right. Here's a very basic HTML document format. You've seen this example 100times, I'm sure.

    Displays in browser window

    When I was first learning to use HTML, I saw that same example over and over again. I thought theHEAD commands made things pop up in the blue bar at the top. You see, that was all I ever saw inside ofthem. So, because I was left to my wits to learn this language, I figured I didn't need those commands. Iwrote without them for a good long time. None of the pages ever seemed incorrect or flawed so I just neverfelt I needed them.

    It wasn't until the advent ofJavaScriptand META commands that I even cared what they did. This is alltrue. When I teach HTML in a classroom, I do not incorporate the HEAD commands until after the studentslearn to manipulate text with bold, italic, and other types of commands.

    I'm sure that statement is right now driving someone out of his or her skull. Again, I say... what wouldyou tell students who are just being introduced to the language what those commands do? Headercommands are a great part of HTML. I know that now. But I still think they are to be taught separately, assomething to incorporate rather than something that's required.

    I don't know why I told you that... I guess I just love sharing with you people. So, let's get started.

    http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479431http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#basichttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#whathttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#infohttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#titlehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#metahttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#basehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#parthttp://www.htmlgoodies.com/primers/http://www.htmlgoodies.com/beyond/javascript/index.phphttp://www.htmlgoodies.com/beyond/javascript/index.phphttp://www.htmlgoodies.com/beyond/javascript/index.phphttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479471http://www.htmlgoodies.com/feedback.php/http:/www.htmlgoodies.com/tutorials/getting_started/article.php/3479431http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#basichttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#whathttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#infohttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#titlehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#metahttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#basehttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479431#parthttp://www.htmlgoodies.com/primers/http://www.htmlgoodies.com/beyond/javascript/index.phphttp://www.htmlgoodies.com/tutorials/getting_started/article.php/3479471
  • 8/7/2019 html samles

    29/86

    What The Commands Actually Do

    The HEAD commands do three things:

    They contain information regarding the document. This data does not appear in the browser window when the page is loaded. The data is mainlyused for helping search engines with page descriptions, browsers with base domains, and otherdata not generally regarded as display content.

    They separate the page into two distinct sections.Ever go into a page that won't load, but somehow the title is up there? It's inside the HEAD

    commands.

    They are loaded first and what is included between them is run first by the browser.

    Here's the first section in a little more depth:

    Information Regarding The Document

    TITLE CommandsThis is the most popular command to appear between the HEAD commands. It places text within the

    color bar at the very top of the browser.

    I must say I liked it before the newer version browsers placed their name after the TITLE text. That did

    not used to be the case. It was just text you wrote. Plus if you wrote a lot of TITLE commands, they would

    all be compiled one after the other. You could have animation in the blue bar at the top. It was great. The

    newer browsers don't go for more than one TITLE command these days.

    Geez, I'm starting to sound like Dana Carvey's Grumpy Old Man. We had lots of TITLE commands. And

    that's the way I likes it! ...Sorry.

    At this point in time, we'll begin constructing the fully functioning HEAD command extraordinaire.

    Big Fat Head Commands

    META CommandsI have a full tutorial just onMETA Commands and what they do. Here, I'll quickly outline some of the

    more popular ones.

    This offers key words to the search engines that use them in their searches.

    This offers a description of the page for search engines that use them.

    This tells search engines what program was used to create the document.

    This tells search engines who wrote the document.

    This tells search engines... blah, blah, blah.

    http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479471http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479471http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479471
  • 8/7/2019 html samles

    30/86

    This automatically expires the document in the search engine's database.

    Adding these commands, our Super Duper Head command section grows to this:

    Big Fat Head Commands

    The Base HREF CommandThe Base HREF instructs the browser to use a path as a basis for all links and images on its page. Here's

    the basic format:

    The command acts as a reference for the remainder of the page. When you use the Base HREF, whateveryou place between its quotes will be added in front of any links you write. For example:

    I write the link:

    Since my document employs the Base HREF command, the link now becomeshttp://www.htmlgoodies.com/page.html.

    I have yet to adopt the Base HREF command because of the setup of my pages. I include page jumps alot. If I use a Base HREF, then the page jump only works on the server. If the document is on my harddrive, then it won't jump because the Base HREF command won't stop adding the domain to the links andimages. However, when the page is posted to the Net, it tends to reload the page with the entire domainattached rather than just jumping to the page section I want. I don't use it, but I can see why one woulduse it. If your page happens to be reposted off of your server, then all of the images would point back at the

    original source of the images.Let's continue making our Super Duper HEAD command section:

    Big Fat Head Commands

    http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511
  • 8/7/2019 html samles

    31/86

    http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3479941http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3479941http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3479941
  • 8/7/2019 html samles

    32/86

    Ah, but it goes on. It is now possible to use these things calledCascading Style Sheetsto help pretty upyour pages for all. They go in the Head commands, too.

    Add them in the recipe and you get the finished product:

    Big Fat Head Commands

  • 8/7/2019 html samles

    33/86

    I have received a good many letters asking how I do indented paragraphs and those bullet lists. The little

    bullets aren't images. They are placed there through HTML Commands. In fact, the entire list format can be

    created through commands. I'll show you how.

    Indenting Paragraph

    I'm surprised that people ask me how I indent paragraphs because I seldom use it.

    If you'd like to write with indented lines of text, I'd be more than pleased to show you how I do it. I'm

    sure there's another method for this, but I like the way I do it. I'm comfortable with it.

    My guess is I don't do it a normal, or HTML, way. I simply indent by adding blank spaces. "BUT MY

    BROWSER IGNORES MY SPACES!!!" you say.

    Yeah, mine does too. I understand totally. I use this small code to create each of my spaces:

    That thing is an ampersand command that creates a space as if you pushed the space bar. I have a

    whole tutorial on those commands right here if you like to see more.

    This is what each of these indented lines look like:

    It looks like this. See the five spaces? No, really. That's what I do.Look at the VIEW SOURCE if you don't believe me.

    And that's all I have to say about that. (Joe Gump) There may be another method, but I like this one. Sothere, (add raspberry sound effect).

    Bullet Lists

    These lists are nice. Here's why I like them...

    They present information in an easy fashion.

    The bullets look cool.

    They make me happy.

    Sorry about that last one. I just needed another item to make a three-item list. OK, here's how I did it.

    They present information in an easy fashion.The bullets look cool.They make me happy.

    Don't be put off by the commands. It's actually only two being used again and again. Here's what'shappening.

    UL stands for Unordered List. It means bullets will be used rather than numbers. Numbers will beexplained later.

    LI stands for List Item. It denotes the next thing that will receive a bullet. Please note that no is required. Neither is a Break or Paragraph command. The LI does all that good stuff foryou.

    /UL ends the entire list.

    HINT: If you use a center command before this, it doesn't cente


<!doctype html><html><head><script type=