Upload
nathaalie-kumar
View
227
Download
0
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/38669018/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/38654518/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 imageshmm, 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/38661018/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/38638568/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/38632718/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_editors8/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_colors8/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/38620318/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#home8/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.html8/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/34796118/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.html8/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.html8/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/34798518/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/34793418/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.html8/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.html8/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/34794018/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.html8/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/34794718/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/34794718/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/34795118/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/34799418/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