how to create web page?

Terry

2006-11-27 22:28:16 UTC

Easiest way would probably to get a program like Frontpage (even Word could work if you just use "save as" and make it into a webpage).

life goes on...

2006-11-28 10:43:13 UTC

1) Determine the objective of your website...whether its going to be a online photo album or a page about you and your family or a page about your passions say sports ( :) )...

2) Once you decide what you want to make it on decide what all you are going to put up

3) Once you are sure about what all you are going to put up (eg what pics,what text ..what scripts will you be using and all)..search for a good free web host which supports these features (Features such as a ftp client which will allow you to upload your pics,supports the kind of scripting you want like flash,javascript,cgi etc..)

some good ones are geocties.com,lycos.com,

bravenet.com,pages.google.com( you will need a gmail id for google pages )

4) Lot of these free web hosts provide website builders which have predefined templates to allow you create a decent website easily and quickly..if you are satisfied with that..well and good..but if you want some more customization then I suggest you get a free WYSIWYG HTML editor such as NVU ..(if you have microsoft frontpage already well and good..its quite good)..

5) Using the editor you can easily create a website ..learning a bit of HTML to improve the site appearance wont harm anything..

6) If you really want to spice up your website then i suggest you can implement some javascript ...you can learn it and do it or download the scripts from the net and put it on your site..here are some sites which have a lot of good scripts with various functionalities

1) http://www.javascriptkit.com/

2) http://www.a1javascripts.com/

3)http://www.java-scripts.net/

4) http://www.javafile.com/

some good html tutorials for your reference are

http://www.davesite.com/webstation/html/

http://www.cmis.brighton.ac.uk/~mas/mas/courses/html/html.html

http://founderweb.com/html_tutorial/

http://www.w3schools.com/html/html_examples.asp

Happy building

angelvein

2006-11-27 22:54:59 UTC

I suggest you use the SJ Namo Web editor..it is a drag and drop procedure like what you are doing in Visual Basic..

also, familiarize the tags of the HTML..

enjoy!!!

2006-11-28 02:56:44 UTC

Free site builder.

NVU

http://www.nvu.com

Free FTP to upload pages.

Filezilla

http://filezilla.sourceforge.net/

Free HTML tutorials.

http://www.w3schools.com/

Step by step tutorials.

http://www.webmasterautomation.com/videos/

Vaibhav

2006-11-27 22:34:26 UTC

Browse www.w3schools.com

Khairudin Bin Salim

2006-11-30 09:14:54 UTC

go to www.tripod.com ..... there is a basic web-builder that you can use to create a decent webpage....

sriram

2006-11-27 22:30:20 UTC

Well,

SiteRightNow - Instant Websites!

--------------------------------------------------------------------------------

This page explains everything that is needed for anyone wanting to create their own web page. Below this paragraph is the table of contents. Click on any of the content subjects and it will take you to that section of the guide. To return to the table of contents at any time, click the "Return to Index" link in the frame on the side of the page. I hope this guide is helpful.

--------------------------------------------------------------------------------

Getting Started

Title

Text

Headings

Paragraphs

Lists

Forced Line Breaks

Horizontal Rules

Character Formatting

Linking

URLs

Links to Specific Sections

Mailto

Graphics

Putting Images on a page

Alternate Text for Images

Animated Graphics

Background, text, and link Color

Background Graphics

Linking with graphics

Image Maps

Fill-out Forms

Getting Started

Form Method/Action

Single or multiple fields

Larger Fields

Checkboxes

Radio Buttons

Pull-Down Lists

Scroll-Down Lists

Reset Form

Submit Entry

Frames

What are Frames?

Java

What is Java?

Programming in Java

Troubleshooting

For More Information

Other Pages

--------------------------------------------------------------------------------

Getting Started

There are basically two ways to make a web page. The first way is to create the page(s) offline and then upload them to your Internet Service Provider (ISP) via FTP. The second way is to create your web page(s) online using a Telnet program by accessing your UNIX account, if you have one.

If you are creating your web page(s) offline, do so in any text editing or word processing document. Make sure that when you save your document, you save it as a "text", "plain text" or "text only" document. Otherwise it will not be read properly by a web browser. Once you have created your page(s), you will need to contact your ISP about how to go about uploading them to your server.

If you have a UNIX account, you can create your web page(s) online. You first need to get a program that can access your UNIX account. I recommend Telnet for the Mac or Ewan for Windows 95/98.

Once you can access your account, you need to make a new directory called "public_html". You can do this by typing:

mkdir public_html

After this, change your directory to this new directory called "public_html".

cd public_html

If you want to, you can make other directories, one for all the web pages that you make, and one for all of the graphics that you have. Follow the same steps as above to do this.

Next, you need to think of a filename for your page (this is not a title, but what will be in the URL). A common filename for a main web page, is "index". Once you've decided on this, add ".html" to the end of it. Then type (i.e.)

pico index.html

Of course, use your page's filename, instead of this one. Next, you need to gain some knowledge of the many HTML commands. Lucky for you, I've already gotten some of the basic commands for you. Follow the index below, to decide what to put on your page, and how to do it. Once you've gotten started, exit your page. You can do this by pressing control-x. Then you need to type:

chmod 744 index.html

Only do this with the filename of your page. You only need to do this the very first time that you leave your web page. This command will make sure that nobody else can delete your page. You will need to do this to any other pages that you make in the future. Then, look at your page on the WWW. Lets say that your server is "www.domain.com", your username is "username", and the name of your page is "index.html". The URL would normally be:

http://www.domain.com/~username/index.html

However, you will need to contact your ISP for your URL.

If you have made separate directories for pages and graphics, then you need to include that in the URL also. Lets say that you made a directory for all of your web pages, called "Pages". The new URL would be: http://www.domain.com/~username/Pages/index.html

Title

The first thing to put on your web page, is a title. The title is what will show up in the very top of the window. Let's say that your title is going to be "John Doe's Web Page", you would type:

John Doe's Web Page

In HTML, every command is surrounded by <'s, and >'s. And in most commands, you need to tell the web browser when to end this command. You do this by putting a back slash (/) in front of the ending command, as in above. Since HTML isn't case sensitive, is the same as <TITLE>, which is the same as <TiTLe>. Next, you need to decide what you want to put on your page. Text, links, graphics, and text fields, are just a few ideas. Follow the table of contents above to decide how, and what to put on your page. Text Headings HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are displayed in larger, or smaller fonts, and usually bolder. If you wanted to type "Hello", this is what you would type for each heading, and what the outcome is: <h1>Hello</h1> Hello <h2>Hello</h2> Hello <h3>Hello</h3> Hello <h4>Hello</h4> Hello <h5>Hello</h5> Hello <h6>Hello</h6> Hello Paragraphs Whenever you have more than a sentence of writing, you should have paragraphs. Personally, I don't see what the difference is, but I do it anyway, because then I can find a certain spot better when programing. To Make a paragraph of "This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com", type: This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com The outcome is: This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com Lists There are two types of lists that you can make in HTML, dotted, and numbered. To make a dotted list of: red, orange, green, blue, purple, black, and brown, type: <UL> <LI> red <LI> orange <LI> green <LI> blue <LI> purple <LI> black <LI> brown </UL> The result is: red orange green blue purple black brown To make a numbered list of: red, orange, green, blue, purple, black, and brown, type: <OL> <LI> red <LI> orange <LI> green <LI> blue <LI> purple <LI> black <LI> brown </OL> The result looks like: red orange green blue purple black brown Forced Line Breaks There are many cases in which you want to end typing on one line, and start on the next. To do this, you can use a simple HTML command. This is one of the few commands that you don't have to put an ending command on. Let's say that you wanted to say "Hello, how are you?", but with each word on a separate line. All you have to type is: Hello, how are you? The outcome is: Hello, how are you? Horizontal Rules Every now and then, you might want to have a horizontal rule, or line in your page. Horizontal rules can be many different sizes and lengths. You can also have the line be solid black, by typing NOSHADE. Here are several examples of sizes and widths, and what the outcome is: <HR SIZE=1 WIDTH=100%> -------------------------------------------------------------------------------- <HR SIZE=5 WIDTH=50%> -------------------------------------------------------------------------------- <HR SIZE=25 WIDTH=75%> -------------------------------------------------------------------------------- <HR SIZE=3 WIDTH=100%> -------------------------------------------------------------------------------- <HR NOSHADE SIZE=1 WIDTH=100%> -------------------------------------------------------------------------------- <HR NOSHADE SIZE=3 WIDTH=100%> -------------------------------------------------------------------------------- <HR NOSHADE SIZE=10 WIDTH=20%> -------------------------------------------------------------------------------- Character Formatting You may want to format some of your text differently than others using text styles. There are several types of styles of text that you can use: bold, italic, underline, strikeout, superscript, subscript, teletype, and blinking text are examples. To do these styles, surround your text with the following commands: , for bold , for italic , for underlined <strike>, <strike> for strikeout , for superscript , for subscript <tt>, </tt> for teletype <blink>, </blink> for blinking text (very annoying) You can also mix styles together like this! Linking URLs When you make a link, you are making colored text or even a graphic (talked about later). When somebody clicks on this text, it will take them to another web page, or possibly a certain section of a web page. Let's say that you wanted to make a link from your web page, to Yahoo!. The URL of Yahoo! is: http://www.yahoo.com To do this, you would type: <A HREF="http://www.yahoo.com">What ever text that you want to be colored goes here</A> The result would be: What ever text that you want to be colored goes here You can go ahead and try it if you want to. Links to Specific Sections Sometimes, you might want to have a link that will take you further down a page, or to a certain section of another page. An example of this is the index to this web page. You click on the colored text, and it takes you to that section. To do this, you need to do two things. The first, is to make the link, and the second, is to make where the link will lead to. NOTE: You cannot make links to specific sections within a different document unless either you have write permission to the coded source of that document or that document already contains in-document named links. 1) To make the actual link, think of a name for the certain spot. Let's say you are going to call it "spot". If this certain spot is on the same page that the link is, you would type: <A HREF="#spot">Colored Text Otherwise, you would add "#spot" to the end of the URL. 2) Now, you need to make where the link will take you. Go to the spot where you want the link to take you, and type: <A NAME = "spot"> Mailto Links Most people like to have a link on their web page that automatically sends e-mail to an address. If you want to do this, and your name is Dan, and your e-mail address is a@a.com, type: <A HREF="mailto:a@a.com">Dan</a> Here is the result of typing this: Dan Graphics Putting Images On A Page On almost EVERY web page on the net, there is some kind of graphic. I would HIGHLY RECOMMEND that you have AT LEAST one picture on your page. There are mainly two kinds of ways to have graphics on your web page. The first, is to use a graphic that is on another web page somewhere on the web. The second, is to upload the graphic to your own account. Personally, I prefer to use the upload method. If you are using the other way, there is always a chance that the person who made that page will decide to delete that graphic. Then a symbol with a circle, square, and triangle will appear where the graphic was supposed to be, sometimes it will look like it has been torn through the middle: 1) To display a graphic on some one else's page, you need to find the URL. To do this, I recommend that you have Netscape Navigator. Right click or click and hold down on the graphic, until a menu comes up. Choose "View this Image". Then , copy the URL that appears at the top of the screen, in the "location" box. Let's say that the URL was: http://www.infhost.com/members/web/Images/pic.gif You would type: <IMG SRC="http://www.infhost.com/members/web/Images/pic.gif"> The result is: 2) To display a graphic that is in your account, all you have to do is type in the filename. If you didn't make separate directories for graphics and pages, then you just need to type the graphic's name.(i.e. <IMG SRC="pic.gif"> Alternate Text for Images Some World Wide Web browsers cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a command to tell readers what they are missing on your pages. The "ALT" attribute lets you specify text to be displayed instead of an image. For example: <IMG SRC="pic.gif" ALT="How to make a web page"> In this example, "pic.gif" is the picture of a sign. With graphics-capable viewers that have image-loading turned on, you see the graphic. With a non-graphic browser or if image-loading is turned off, the words "How to make a web page" is shown in your window. You should try to include alternate text for each image you use in your document, as it is a courtesy for your readers. Animated Graphics Some people like to put animation on their web pages. It actually is not that hard. Here is some background history. Most GIFs over the years have only one image per file. According to "technical specifications from 1987", a GIF could have had more than one image per file, making it like a slide show presentation and not a single image. However, most programs that work with GIF are designed around the idea of one image per file. So the multi-image aspect of GIFs was forgotten. In 1989, they added timing and various other abilities to the GIF format, including transparency. Nobody used these new additions either. Then the Web took off. Transparency and interlacing became features people wanted to use and software companies began supporting those features. In order to have animation on your web page, you need to download a program that was made to fit more that one GIF in a file. I recommend GifBuilder for the Mac. Windows users can go here to download another program. Here is one example of a small animation: Background, text, and link Color On most pages, you want to have a specific color for the background, text, unvisited links, visited links, and active links. In order to do this, you need to find the code number for the specific color that you are looking for. Here is a HUGE list of code numbers, and here is how you would display this in your page. NOTE: Type these ONLY right below your title. NOTE: You must have the "#" sign before the actual code. <body bgcolor="#code">for background color <body text="#code">for color of text (all non-links) <body link="#code">for color of unvisited links <body vlink="#code">for color of visited links <body alink="#code">for color of active links (while being selected) You can also string two or more of these commands together: <body bgcolor="#000015" text="#000020" link="#000050" vlink="#7a7777" alink="#8f8e8d"> Background Graphics Instead of having a solid color as a background, you might want to have one graphic that repeats over and over to create a background. Here are several places that you can go to find background graphics. The text that you would type in for a background called "bk.gif" would be: <body background="bk.gif"> Linking with graphics Sometimes on your web page, you might want to have a graphic that is a link. This is quite simple, since you just mix the two commands of linking, and displaying graphics. Here is an example of a graphic that leads to Yahoo: You can also have a text link next to the graphic that leads to the same place. Yahoo! Here is what you would type in for, first the plain graphic-link, and second, the graphic-link with text: <A href="http://www.yahoo.com"><IMG SRC="http://www.infhost.com/members/web/Images/yahoo.gif"></A> <A href="http://www.yahoo.com"><IMG SRC="http://www.infhost.com/members/web/Images/yahoo.gif">Yahoo!</A> Image Maps Before you create an image map, you need to make sure that your server supports them. Then, you can follow these steps. First, you need to create an image. Draw a picture with sections that could lead to certain places. Second, you need to create an image map file. There are several programs that can do this for you. I recommend WebMap, for the Mac. You can go to Yahoo's Image Map Directory for others. Fill-out Forms Getting Started Fill-out forms let a reader return information to a Web server for some action. For example, suppose you collect names and email addresses so you can email some information to people who request it. This processing of incoming data is usually handled by a script or program written in Perl or another language that manipulates text, files, and information. If you want to, you can write this program yourself, but I have no idea how to do it. I would check with your server. I know that many servers have scripts available for its users. Let's pretend that the one that I'm going to use is called "fb.pl". This will send a response to your fillout form directly to your email address. NOTE: This script is not real, it is just an example. Check with your ISP to see if they have built-in scripts. Form Method/Action The first thing that you type for your guestbook is the Form Method and Action. This is where you enter the Perl script. Most servers and Internet Providers have scripts like this that they provide for you. Check with yours. You cannot have any kind of forms without having a script. The address of the one that I'll be using is: http://www.domain.com/cgi-bin/fb.pl. If you would like the response sent to your email address, and the address is "a@a.com", you would type this for the first two lines: <FORM METHOD="POST" ACTION="http://www.domain.com/cgi-bin/fb.pl"> <INPUT TYPE="input" NAME="recipient" value="a@a.com">TO: Here is what it will look like: TO: Next, you need to decide what questions that you want to ask, and what you will use to ask them. Before you start, though, you might want to check with your server to see if they have any questions that you MUST ask. I know with some ISPs, you must ask what their email address is, their first name, their last name, and what the subject of their question is. You can use single or multiple text fields, larger fields, checkboxes, radio buttons, pull-down lists and scroll-down lists. Single or multiple fields In your guestbook, you might want to ask questions that have a single one word answer. To here is what you would type to have four fields that ask for an email address, a first name, a last name, and a subject: <INPUT TYPE="input" NAME="from">Your Email Address <INPUT TYPE="input" NAME="firstname">Your First Name <INPUT TYPE="input" NAME="lastname">Your Last Name <INPUT TYPE="input" NAME="subject">Subject Here is what the result is: Your Email Address Your First Name Your Last Name Subject Larger Fields I would recommend that you have one larger field at the end of your guestbook for comments. You first need to decide how many columns and rows that you want to have. Let's say that you want to have 7 rows, and 45 columns. Here is what you would type: Please place any questions or comments here: <TEXTAREA Rows=7 Cols=45 NAME="suggestions"></TEXTAREA> Here is what the result looks like: Please place any questions or comments here: Checkboxes Let's say that you wanted to ask a question like "What are some things that you like to do?" You could have a list of things with checkboxes. If you wanted the list to be: Watch TV, play on the Internet, read a book, play sports, and study, you would type: What are some things that you like to do? <INPUT TYPE="checkbox" NAME="like" VALUE="TV">Watch TV <INPUT TYPE="checkbox" NAME="like" VALUE="internet">Play on the Internet <INPUT TYPE="checkbox" NAME="like" VALUE="read">Read a book <INPUT TYPE="checkbox" NAME="like" VALUE="sports">Play sports <INPUT TYPE="checkbox" NAME="like" VALUE="study">Study The result: What are some things that you like to do? Watch TV Play on the Internet Read a book Play sports Study Radio Buttons If you ever want to ask a question with one answer, you can use radio buttons. If you wanted to ask "What WWW browser are you using right now?", and you wanted to have the choices Netscape Navigator 4.x, Netscape Navigator 3.x, Netscape Communicator, Mosaic, and Microsoft Explorer, you would type: What WWW browser are you using right now? <INPUT TYPE="radio" NAME="browser" VALUE="Navigator 4.x">Netscape Navigator 4.x <INPUT TYPE="radio" NAME="browser" VALUE="Navigator 3.x">Netscape Navigator 3.x <INPUT TYPE="radio" NAME="browser" VALUE="Communicator">Netscape Communicator <INPUT TYPE="radio" NAME="browser" VALUE="Mosaic">Mosaic <INPUT TYPE="radio" NAME="browser" VALUE="Internetex">Internet Explorer The Result: What WWW browser are you using right now? Netscape Navigator 4.x Netscape Navigator 3.x Netscape Communicator Mosaic Internet Explorer Pull-Down Lists Another way to ask a question with only one answer is to use a pull-down menu. You can use the SELECTED command to have an option besides the first be selected, as you will see below. If you wanted to ask "What is your favorite color?", and you wanted the list to be of red, yellow, orange, green, blue, purple, black, and brown, with black selected, you would type: What is your favorite color? <SELECT NAME="color"> <OPTION>Red <OPTION>Yellow <OPTION>Orange <OPTION>Green <OPTION>Blue <OPTION>Purple <OPTION SELECTED>Black <OPTION>Brown </SELECT> The outcome is: What is your favorite color? RedYellowOrangeGreenBluePurpleBlackBrown Scroll-Down Lists Some times, you might want to have a scroll-down list on your page. With this, you can decide whether or not you want people to be able to select more that one item. If you do have it with more that one items, the user has to hold down the command or shift key. You can also decide how many of the lines you want visible. Below are two lists of the same things. In the first one, you can only select one item, and it is showing three lines. In the second one, you can select one or more items by holding down command or shift . The second list is showing four lines. The question is "What is your favorite video game system?" The answers are: Nintendo 64, Sony Playstation, Sega Dreamcast, or arcade video games. The text that you type for each list is above the actual list. What is your favorite video game system? <SELECT NAME="video game" SIZE=3> <OPTION VALUE="nintendo64">Nintendo 64 <OPTION VALUE="playstation">Sony Playstation <OPTION VALUE="dreamcast">Sega Dreamcast <OPTION VALUE="arcade">Arcade Games </SELECT> The outcome is: What is your favorite video game system? Nintendo 64Sony PlaystationSega DreamcastArcade Games -------------------------------------------------------------------------------- What is your favorite video game system? (Hold shift to select more that one) <SELECT NAME="video game" MULTIPLE SIZE=4> <OPTION VALUE="nintendo64">Nintendo 64 <OPTION VALUE="playstation">Sony Playstation <OPTION VALUE="dreamcast">Sega Dreamcast <OPTION VALUE="arcade">Arcade Games </SELECT> The second outcome is: What is your favorite video game system? (Hold shift to select more that one) Nintendo 64Sony PlaystationSega DreamcastArcade Games Reset Form On most page that have fill-out forms, there is a reset button at the bottom of the form, next to the "submit" or "send" button. To have a reset button, just type: To reset the all of the forms, press this button:<INPUT TYPE="reset" VALUE="Reset"> The outcome is: (try it!) To reset the all of the forms, press this button: Submit Entry When you are all finished with everything, you need to make a button so that people can submit their entry. To do this, type: To submit your choices, press this button:<INPUT TYPE="submit" VALUE="Submit"> The result is: (NOTE: Please don't click this button. It has been disabled and will not work.) To submit your choices, press this button: NOTE: At the very end of your form, you must type </FORM> or your forms won't work!! Frames What are Frames? Frames basically split your window in to sections. You can display two or more web pages at a time with frames. You don't necessarily have to have whole pages in a frame. You could just have graphics, too. If you are really interested in putting frames on your page, I recommend that you go here to Sharky's Netscape Frames Tutorial and read the lessons. Java What is Java? Java is a simple, robust, object-oriented, platform-independent multi-threaded, dynamic general-purpose programming environment. It's best for creating applets and applications for the Internet, intranets and any other complex, distributed network. Programming in Java I do not know how to program in java. However, it is a very useful language if you know how to use it. If you think that you would like to begin learning the java language, an excellent tutorial can be found here. Just because I don't know how to program in java, doesn't mean that I don't use it. I love java. It can add so much to a web site. If you really don't want to learn java, but would like to use it on your web pages, I would suggest using free java scripts that can be found around the web. One such web site can be found here at Sharky's JavaScript Answers. Troubleshooting Under Construction For More Information Other Pages There are many other pages that have to do with writing web pages. The best one I've seen, is here SiteRightNow - Instant Websites! -------------------------------------------------------------------------------- This page explains everything that is needed for anyone wanting to create their own web page. Below this paragraph is the table of contents. Click on any of the content subjects and it will take you to that section of the guide. To return to the table of contents at any time, click the "Return to Index" link in the frame on the side of the page. I hope this guide is helpful. -------------------------------------------------------------------------------- Getting Started Title Text Headings Paragraphs Lists Forced Line Breaks Horizontal Rules Character Formatting Linking URLs Links to Specific Sections Mailto Graphics Putting Images on a page Alternate Text for Images Animated Graphics Background, text, and link Color Background Graphics Linking with graphics Image Maps Fill-out Forms Getting Started Form Method/Action Single or multiple fields Larger Fields Checkboxes Radio Buttons Pull-Down Lists Scroll-Down Lists Reset Form Submit Entry Frames What are Frames? Java What is Java? Programming in Java Troubleshooting For More Information Other Pages -------------------------------------------------------------------------------- Getting Started There are basically two ways to make a web page. The first way is to create the page(s) offline and then upload them to your Internet Service Provider (ISP) via FTP. The second way is to create your web page(s) online using a Telnet program by accessing your UNIX account, if you have one. If you are creating your web page(s) offline, do so in any text editing or word processing document. Make sure that when you save your document, you save it as a "text", "plain text" or "text only" document. Otherwise it will not be read properly by a web browser. Once you have created your page(s), you will need to contact your ISP about how to go about uploading them to your server. If you have a UNIX account, you can create your web page(s) online. You first need to get a program that can access your UNIX account. I recommend Telnet for the Mac or Ewan for Windows 95/98. Once you can access your account, you need to make a new directory called "public_html". You can do this by typing: mkdir public_html After this, change your directory to this new directory called "public_html". cd public_html If you want to, you can make other directories, one for all the web pages that you make, and one for all of the graphics that you have. Follow the same steps as above to do this. Next, you need to think of a filename for your page (this is not a title, but what will be in the URL). A common filename for a main web page, is "index". Once you've decided on this, add ".html" to the end of it. Then type (i.e.) pico index.html Of course, use your page's filename, instead of this one. Next, you need to gain some knowledge of the many HTML commands. Lucky for you, I've already gotten some of the basic commands for you. Follow the index below, to decide what to put on your page, and how to do it. Once you've gotten started, exit your page. You can do this by pressing control-x. Then you need to type: chmod 744 index.html Only do this with the filename of your page. You only need to do this the very first time that you leave your web page. This command will make sure that nobody else can delete your page. You will need to do this to any other pages that you make in the future. Then, look at your page on the WWW. Lets say that your server is "www.domain.com", your username is "username", and the name of your page is "index.html". The URL would normally be: http://www.domain.com/~username/index.html However, you will need to contact your ISP for your URL. If you have made separate directories for pages and graphics, then you need to include that in the URL also. Lets say that you made a directory for all of your web pages, called "Pages". The new URL would be: http://www.domain.com/~username/Pages/index.html Title The first thing to put on your web page, is a title. The title is what will show up in the very top of the window. Let's say that your title is going to be "John Doe's Web Page", you would type: <title>John Doe's Web Page

In HTML, every command is surrounded by <'s, and >'s. And in most commands, you need to tell the web browser when to end this command. You do this by putting a back slash (/) in front of the ending command, as in above. Since HTML isn't case sensitive, is the same as <TITLE>, which is the same as <TiTLe>. Next, you need to decide what you want to put on your page. Text, links, graphics, and text fields, are just a few ideas. Follow the table of contents above to decide how, and what to put on your page. Text Headings HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are displayed in larger, or smaller fonts, and usually bolder. If you wanted to type "Hello", this is what you would type for each heading, and what the outcome is: <h1>Hello</h1> Hello <h2>Hello</h2> Hello <h3>Hello</h3> Hello <h4>Hello</h4> Hello <h5>Hello</h5> Hello <h6>Hello</h6> Hello Paragraphs Whenever you have more than a sentence of writing, you should have paragraphs. Personally, I don't see what the difference is, but I do it anyway, because then I can find a certain spot better when programing. To Make a paragraph of "This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com", type: This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com The outcome is: This is a web page. How do you like what I've done? Please e-mail me with any suggestions at a@a.com Lists There are two types of lists that you can make in HTML, dotted, and numbered. To make a dotted list of: red, orange, green, blue, purple, black, and brown, type: <UL> <LI> red <LI> orange <LI> green <LI> blue <LI> purple <LI> black <LI> brown </UL> The result is: red orange green blue purple black brown To make a numbered list of: red, orange, green, blue, purple, black, and brown, type: <OL> <LI> red <LI> orange <LI> green <LI> blue <LI> purple <LI> black <LI> brown </OL> The result looks like: red orange green blue purple black brown Forced Line Breaks There are many cases in which you want to end typing on one line, and start on the next. To do this, you can use a simple HTML command. This is one of the few commands that you don't have to put an ending command on. Let's say that you wanted to say "Hello, how are you?", but with each word on a separate line. All you have to type is: Hello, how are you? The outcome is: Hello, how are you? Horizontal Rules Every now and then, you might want to have a horizontal rule, or line in your page. Horizontal rules can be many different sizes and lengths. You can also have the line be solid black, by typing NOSHADE. Here are several examples of sizes and widths, and what the outcome is: <HR SIZE=1 WIDTH=100%> -------------------------------------------------------------------------------- <HR SIZE=5 WIDTH=50%> -------------------------------------------------------------------------------- <HR SIZE=25 WIDTH=75%> -------------------------------------------------------------------------------- <HR SIZE=3 WIDTH=100%> -------------------------------------------------------------------------------- <HR NOSHADE SIZE=1 WIDTH=100%> -------------------------------------------------------------------------------- <HR NOSHADE SIZE=3 WIDTH=100%> -------------------------------------------------------------------------------- <HR NOSHADE SIZE=10 WIDTH=20%> -------------------------------------------------------------------------------- Character Formatting You may want to format some of your text differently than others using text styles. There are several types of styles of text that you can use: bold, italic, underline, strikeout, superscript, subscript, teletype, and blinking text are examples. To do these styles, surround your text with the following commands: , for bold , for italic , for underlined <strike>, <strike> for strikeout , for superscript , for subscript <tt>, </tt> for teletype <blink>, </blink> for blinking text (very annoying) You can also mix styles together like this! Linking URLs When you make a link, you are making colored text or even a graphic (talked about later). When somebody clicks on this text, it will take them to another web page, or possibly a certain section of a web page. Let's say that you wanted to make a link from your web page, to Yahoo!. The URL of Yahoo! is: http://www.yahoo.com To do this, you would type: <A HREF="http://www.yahoo.com">What ever text that you want to be colored goes here</A> The result would be: What ever text that you want to be colored goes here You can go ahead and try it if you want to. Links to Specific Sections Sometimes, you might want to have a link that will take you further down a page, or to a certain section of another page. An example of this is the index to this web page. You click on the colored text, and it takes you to that section. To do this, you need to do two things. The first, is to make the link, and the second, is to make where the link will lead to. NOTE: You cannot make links to specific sections within a different document unless either you have write permission to the coded source of that document or that document already contains in-document named links. 1) To make the actual link, think of a name for the certain spot. Let's say you are going to call it "spot". If this certain spot is on the same page that the link is, you would type: <A HREF="#spot">Colored Text Otherwise, you would add "#spot" to the end of the URL. 2) Now, you need to make where the link will take you. Go to the spot where you want the link to take you, and type: <A NAME = "spot"> Mailto Links Most people like to have a link on their web page that automatically sends e-mail to an address. If you want to do this, and your name is Dan, and your e-mail address is a@a.com, type: <A HREF="mailto:a@a.com">Dan</a> Here is the result of typing this: Dan Graphics Putting Images On A Page On almost EVERY web page on the net, there is some kind of graphic. I would HIGHLY RECOMMEND that you have AT LEAST one picture on your page. There are mainly two kinds of ways to have graphics on your web page. The first, is to use a graphic that is on another web page somewhere on the web. The second, is to upload the graphic to your own account. Personally, I prefer to use the upload method. If you are using the other way, there is always a chance that the person who made that page will decide to delete that graphic. Then a symbol with a circle, square, and triangle will appear where the graphic was supposed to be, sometimes it will look like it has been torn through the middle: 1) To display a graphic on some one else's page, you need to find the URL. To do this, I recommend that you have Netscape Navigator. Right click or click and hold down on the graphic, until a menu comes up. Choose "View this Image". Then , copy the URL that appears at the top of the screen, in the "location" box. Let's say that the URL was: http://www.infhost.com/members/web/Images/pic.gif You would type: <IMG SRC="http://www.infhost.com/members/web/Images/pic.gif"> The result is: 2) To display a graphic that is in your account, all you have to do is type in the filename. If you didn't make separate directories for graphics and pages, then you just need to type the graphic's name.(i.e. <IMG SRC="pic.gif"> Alternate Text for Images Some World Wide Web browsers cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a command to tell readers what they are missing on your pages. The "ALT" attribute lets you specify text to be displayed instead of an image. For example: <IMG SRC="pic.gif" ALT="How to make a web page"> In this example, "pic.gif" is the picture of a sign. With graphics-capable viewers that have image-loading turned on, you see the graphic. With a non-graphic browser or if image-loading is turned off, the words "How to make a web page" is shown in your window. You should try to include alternate text for each image you use in your document, as it is a courtesy for your readers. Animated Graphics Some people like to put animation on their web pages. It actually is not that hard. Here is some background history. Most GIFs over the years have only one image per file. According to "technical specifications from 1987", a GIF could have had more than one image per file, making it like a slide show presentation and not a single image. However, most programs that work with GIF are designed around the idea of one image per file. So the multi-image aspect of GIFs was forgotten. In 1989, they added timing and various other abilities to the GIF format, including transparency. Nobody used these new additions either. Then the Web took off. Transparency and interlacing became features people wanted to use and software companies began supporting those features. In order to have animation on your web page, you need to download a program that was made to fit more that one GIF in a file. I recommend GifBuilder for the Mac. Windows users can go here to download another program. Here is one example of a small animation: Background, text, and link Color On most pages, you want to have a specific color for the background, text, unvisited links, visited links, and active links. In order to do this, you need to find the code number for the specific color that you are looking for. Here is a HUGE list of code numbers, and here is how you would display this in your page. NOTE: Type these ONLY right below your title. NOTE: You must have the "#" sign before the actual code. <body bgcolor="#code">for background color <body text="#code">for color of text (all non-links) <body link="#code">for color of unvisited links <body vlink="#code">for color of visited links <body alink="#code">for color of active links (while being selected) You can also string two or more of these commands together: <body bgcolor="#000015" text="#000020" link="#000050" vlink="#7a7777" alink="#8f8e8d"> Background Graphics Instead of having a solid color as a background, you might want to have one graphic that repeats over and over to create a background. Here are several places that you can go to find background graphics. The text that you would type in for a background called "bk.gif" would be: <body background="bk.gif"> Linking with graphics Sometimes on your web page, you might want to have a graphic that is a link. This is quite simple, since you just mix the two commands of linking, and displaying graphics. Here is an example of a graphic that leads to Yahoo: You can also have a text link next to the graphic that leads to the same place. Yahoo! Here is what you would type in for, first the plain graphic-link, and second, the graphic-link with text: <A href="http://www.yahoo.com"><IMG SRC="http://www.infhost.com/members/web/Images/yahoo.gif"></A> <A href="http://www.yahoo.com"><IMG SRC="http://www.infhost.com/members/web/Images/yahoo.gif">Yahoo!</A> Image Maps Before you create an image map, you need to make sure that your server supports them. Then, you can follow these steps. First, you need to create an image. Draw a picture with sections that could lead to certain places. Second, you need to create an image map file. There are several programs that can do this for you. I recommend WebMap, for the Mac. You can go to Yahoo's Image Map Directory for others. Fill-out Forms Getting Started Fill-out forms let a reader return information to a Web server for some action. For example, suppose you collect names and email addresses so you can email some information to people who request it. This processing of incoming data is usually handled by a script or program written in Perl or another language that manipulates text, files, and information. If you want to, you can write this program yourself, but I have no idea how to do it. I would check with your server. I know that many servers have scripts available for its users. Let's pretend that the one that I'm going to use is called "fb.pl". This will send a response to your fillout form directly to your email address. NOTE: This script is not real, it is just an example. Check with your ISP to see if they have built-in scripts. Form Method/Action The first thing that you type for your guestbook is the Form Method and Action. This is where you enter the Perl script. Most servers and Internet Providers have scripts like this that they provide for you. Check with yours. You cannot have any kind of forms without having a script. The address of the one that I'll be using is: http://www.domain.com/cgi-bin/fb.pl. If you would like the response sent to your email address, and the address is "a@a.com", you would type this for the first two lines: <FORM METHOD="POST" ACTION="http://www.domain.com/cgi-bin/fb.pl"> <INPUT TYPE="input" NAME="recipient" value="a@a.com">TO: Here is what it will look like: TO: Next, you need to decide what questions that you want to ask, and what you will use to ask them. Before you start, though, you might want to check with your server to see if they have any questions that you MUST ask. I know with some ISPs, you must ask what their email address is, their first name, their last name, and what the subject of their question is. You can use single or multiple text fields, larger fields, checkboxes, radio buttons, pull-down lists and scroll-down lists. Single or multiple fields In your guestbook, you might want to ask questions that have a single one word answer. To here is what you would type to have four fields that ask for an email address, a first name, a last name, and a subject: <INPUT TYPE="input" NAME="from">Your Email Address <INPUT TYPE="input" NAME="firstname">Your First Name <INPUT TYPE="input" NAME="lastname">Your Last Name <INPUT TYPE="input" NAME="subject">Subject Here is what the result is: Your Email Address Your First Name Your Last Name Subject Larger Fields I would recommend that you have one larger field at the end of your guestbook for comments. You first need to decide how many columns and rows that you want to have. Let's say that you want to have 7 rows, and 45 columns. Here is what you would type: Please place any questions or comments here: <TEXTAREA Rows=7 Cols=45 NAME="suggestions"></TEXTAREA> Here is what the result looks like: Please place any questions or comments here: Checkboxes Let's say that you wanted to ask a question like "What are some things that you like to do?" You could have a list of things with checkboxes. If you wanted the list to be: Watch TV, play on the Internet, read a book, play sports, and study, you would type: What are some things that you like to do? <INPUT TYPE="checkbox" NAME="like" VALUE="TV">Watch TV <INPUT TYPE="checkbox" NAME="like" VALUE="internet">Play on the Internet <INPUT TYPE="checkbox" NAME="like" VALUE="read">Read a book <INPUT TYPE="checkbox" NAME="like" VALUE="sports">Play sports <INPUT TYPE="checkbox" NAME="like" VALUE="study">Study The result: What are some things that you like to do? Watch TV Play on the Internet Read a book Play sports Study Radio Buttons If you ever want to ask a question with one answer, you can use radio buttons. If you wanted to ask "What WWW browser are you using right now?", and you wanted to have the choices Netscape Navigator 4.x, Netscape Navigator 3.x, Netscape Communicator, Mosaic, and Microsoft Explorer, you would type: What WWW browser are you using right now? <INPUT TYPE="radio" NAME="browser" VALUE="Navigator 4.x">Netscape Navigator 4.x <INPUT TYPE="radio" NAME="browser" VALUE="Navigator 3.x">Netscape Navigator 3.x <INPUT TYPE="radio" NAME="browser" VALUE="Communicator">Netscape Communicator <INPUT TYPE="radio" NAME="browser" VALUE="Mosaic">Mosaic <INPUT TYPE="radio" NAME="browser" VALUE="Internetex">Internet Explorer The Result: What WWW browser are you using right now? Netscape Navigator 4.x Netscape Navigator 3.x Netscape Communicator Mosaic Internet Explorer Pull-Down Lists Another way to ask a question with only one answer is to use a pull-down menu. You can use the SELECTED command to have an option besides the first be selected, as you will see below. If you wanted to ask "What is your favorite color?", and you wanted the list to be of red, yellow, orange, green, blue, purple, black, and brown, with black selected, you would type: What is your favorite color? <SELECT NAME="color"> <OPTION>Red <OPTION>Yellow <OPTION>Orange <OPTION>Green <OPTION>Blue <OPTION>Purple <OPTION SELECTED>Black <OPTION>Brown </SELECT> The outcome is: What is your favorite color? RedYellowOrangeGreenBluePurpleBlackBrown Scroll-Down Lists Some times, you might want to have a scroll-down list on your page. With this, you can decide whether or not you want people to be able to select more that one item. If you do have it with more that one items, the user has to hold down the command or shift key. You can also decide how many of the lines you want visible. Below are two lists of the same things. In the first one, you can only select one item, and it is showing three lines. In the second one, you can select one or more items by holding down command or shift . The second list is showing four lines. The question is "What is your favorite video game system?" The answers are: Nintendo 64, Sony Playstation, Sega Dreamcast, or arcade video games. The text that you type for each list is above the actual list. What is your favorite video game system? <SELECT NAME="video game" SIZE=3> <OPTION VALUE="nintendo64">Nintendo 64 <OPTION VALUE="playstation">Sony Playstation <OPTION VALUE="dreamcast">Sega Dreamcast <OPTION VALUE="arcade">Arcade Games </SELECT> The outcome is: What is your favorite video game system? Nintendo 64Sony PlaystationSega DreamcastArcade Games -------------------------------------------------------------------------------- What is your favorite video game system? (Hold shift to select more that one) <SELECT NAME="video game" MULTIPLE SIZE=4> <OPTION VALUE="nintendo64">Nintendo 64 <OPTION VALUE="playstation">Sony Playstation <OPTION VALUE="dreamcast">Sega Dreamcast <OPTION VALUE="arcade">Arcade Games </SELECT> The second outcome is: What is your favorite video game system? (Hold shift to select more that one) Nintendo 64Sony PlaystationSega DreamcastArcade Games Reset Form On most page that have fill-out forms, there is a reset button at the bottom of the form, next to the "submit" or "send" button. To have a reset button, just type: To reset the all of the forms, press this button:<INPUT TYPE="reset" VALUE="Reset"> The outcome is: (try it!) To reset the all of the forms, press this button: Submit Entry When you are all finished with everything, you need to make a button so that people can submit their entry. To do this, type: To submit your choices, press this button:<INPUT TYPE="submit" VALUE="Submit"> The result is: (NOTE: Please don't click this button. It has been disabled and will not work.) To submit your choices, press this button: NOTE: At the very end of your form, you must type </FORM> or your forms won't work!! Frames What are Frames? Frames basically split your window in to sections. You can display two or more web pages at a time with frames. You don't necessarily have to have whole pages in a frame. You could just have graphics, too. If you are really interested in putting frames on your page, I recommend that you go here to Sharky's Netscape Frames Tutorial and read the lessons. Java What is Java? Java is a simple, robust, object-oriented, platform-independent multi-threaded, dynamic general-purpose programming environment. It's best for creating applets and applications for the Internet, intranets and any other complex, distributed network. Programming in Java I do not know how to program in java. However, it is a very useful language if you know how to use it. If you think that you would like to begin learning the java language, an excellent tutorial can be found here. Just because I don't know how to program in java, doesn't mean that I don't use it. I love java. It can add so much to a web site. If you really don't want to learn java, but would like to use it on your web pages, I would suggest using free java scripts that can be found around the web. One such web site can be found here at Sharky's JavaScript Answers. Troubleshooting Under Construction For More Information Other Pages There are many other pages that have to do with writing web pages. The best one I've seen, is here </div> </div>  </div> <div id="se_licensing_notice"> <div id="se_licensing_notice_info"> ⓘ </div> <div id="se_licensing_notice_text"> This content was originally posted on Y! Answers, a Q&A website that shut down in 2021. </div> </div>  <script type="text/javascript"> //$(document).ready(function() { (nk = window.nk || []).session_id = '678ef360a529'; if(nk.adb === undefined) nk.adb = 'enabled'; if(0) nk.adb = 'untested'; nk.threadfunction = function() { $.ajax({ url: "https://" + document.domain +"/ajax/ThreadViewCounter?hash=NWndwEi4&nk_session=" + nk.session_id, data: { page_version: 1, is_desktop: 1, lang: 'en', replycount: 7, views: 1, type: 'ya', simqa: 0, simsearchqa: 0, simsearch: 0, url: window.location.href, hash: 'NWndwEi4', cat: document.domain.replace('.narkive.', '.'), path: window.location.pathname, title: 'how to create web page?', recency: 6579, ads_filter: 'no-match', // adb: nk.adb, }, cache: true, type: "GET" }) .done(function( html ) { eval(html); }); } //}); $(document).ready(function() { if(typeof adsense_dispatcher_id === 'undefined' || adsense_dispatcher_id < 2) { // disable stats collection if you're unlikely to be a new user //nk.threadfunction(); } }); // prebid callback here as there is no command queue, in theory ThreadViewCounter works, but hey var nk_ts_PreBidConnectionTime = Date.now(); function connect_prebid_callback() { if(typeof vmpbjs !== undefined && vmpbjs.onEvent !== undefined) { vmpbjs.onEvent('bidWon', function(prebidwin) { console.log(prebidwin.bidderCode+ ' won the ad server auction for ad unit ' +prebidwin.adUnitCode+ ' at ' +prebidwin.cpm+ ' CPM'); console.log(prebidwin); var u = "https://" + document.domain +"/ajax/telemprebid?abs_sec=" + parseInt((Date.now()-nk_ts_PreBidConnectionTime) / 1000) + "&nk_session=" + nk.session_id; $.ajax({ url: u, cache: false, type: "HEAD", global: false, beforeSend: function(){}, complete: function(){}, data: { bidder: prebidwin.bidder, cpm: prebidwin.originalCpm, currency: prebidwin.originalCurrency, height: prebidwin.height, width: prebidwin.width, slotElementId: prebidwin.adserverTargeting.hb_div_id }}); console.log('callback sent'); }); } else { setTimeout(function() { connect_prebid_callback(); }, 100); } } //connect_prebid_callback(); </script> <div id="last_post_visibility_indicator"> </div> <style> .post_body.parsed { /*padding: 11px 12px;*/ color: #192527; font-family: "Segoe UI","Segoe WP","Arial","Sans-Serif"; font-size: 17px; line-height: 24px; } </style> <style> @media screen and (min-width: 770px) { .post_body.parsed { padding: 11px 12px; color: #192527; font-family: "Segoe UI","Segoe WP","Arial","Sans-Serif"; font-size: 18px; line-height: 26px; } .post_header { border-width: 1px; border-radius: 3px; } .post_wrapper { border-left: 0; padding-left: 22px; } .post_body { border: 0; } .quoted_post { font-size: 14px; line-height: 18px; } .post_header { height: 30px; line-height: 30px; font-size: 17px; } #thread_lister_ctrl_nav { font-size: 24px; line-height: 32px; } #thread_lister_subtitle { display: none; } /* smaller */ #thread_lister_ctrl_nav { font-size: 20px; line-height: 31px; } .post_header { height: 28px; line-height: 27px; font-size: 16px; } .post_body.parsed { font-family: "Segoe UI","Segoe WP","Arial","Sans-Serif"; font-size: 17px; line-height: 25px; padding-bottom: 16px; } .thread #thread_lister_ctrl { margin: 8px 4px; margin-top: 7px; margin-bottom: 4px; } #thread_lister_subtitle { display: block; } #thread_lister_subtitle { margin-bottom: -5px; } #thread_container .post_header_date .timeago { font-size: 15px; } #simthread_first_header { font-family: serif; font-size: 25px; margin-top: 30px; margin-left: 15px; background-color: #f3feff; padding: 7px 13px; color: #234244; width: fit-content; border-radius: 5px; } } </style> <style> #sidebar_banner_right { /*float: right; margin-right: 20px;*/ float: left; margin-left: 40px; margin-top: 20px; width: 22px; height: 30px; /*display: none;*/ /*border: 1px solid red;*/ /*background-color: red;*/ } @media screen and (min-width: 1500px) { #sidebar_banner_right { margin-left: 80px; } } </style> </div> <div id="sidebar_container"></div> <div id="sidebar_banner_right"><div class="sidebar_banner_placeholder_2"></div></div> <div style="clear: both"></div> </div> <script type="text/javascript"> var nav_highlighted = false, sidebar_fixed = false, sidebar_initial_top_distance = 0, sidebar_initial_left_distance = 0, sidebar_right_banner_initial_left_distance = 0, last_post_divs_distance_build = 0, post_divs_distances = Array(), sidebar_height = 0, thread_navigation_height = 0, sidebar_position_offset = 0, thread_onscroll_timeout = 0, sidebar_related_height = 0; function build_post_divs_distance() { if(new Date().getTime() - last_post_divs_distance_build < 1000) { return; } var post_divs = $('.post'); for(k in post_divs) { if(parseInt(k) != k) continue; post_divs_distances[$(post_divs[k]).position().top] = $(post_divs[k]).attr('id').replace('post', ''); } sidebar_height = $('#sidebar_container').height(); thread_navigation_height = $('#thread_navigation').height(); } function thread_onscroll() { if($(window).width() < 995) { return; } build_post_divs_distance(); var scroll_top = $(window).scrollTop(), sidebar_offset_top = $('#sidebar_container').offset().top, windows_height = $(window).height(), sidebar_css_top = parseInt($('#sidebar_container').css('top') == 'auto' ? 0 : $('#sidebar_container').css('top')), sidebar_standard_top_distance = 20, first_visible_post = 1, scroller_margins = windows_height < 250 ? 20 : 100; highlighted_top_distance = nav_highlighted > 0 ? $('#nav_post' + nav_highlighted).position().top : windows_height/2; left_margin = parseInt($('#sidebar_container').css('margin-left')); left_margin_banner = parseInt($('#sidebar_banner_right').css('margin-left')); if(sidebar_initial_left_distance == 0) { sidebar_initial_left_distance = $('#sidebar_container').offset().left/* == 0 ? 760 : $('#sidebar_container').offset().left*/; } if(sidebar_right_banner_initial_left_distance == 0) { sidebar_right_banner_initial_left_distance = $('#sidebar_banner_right').offset().left/* == 0 ? 760 : $('#sidebar_container').offset().left*/; } if(highlighted_top_distance + scroller_margins + sidebar_position_offset + sidebar_related_height > windows_height) { sidebar_position_offset -= windows_height/2; $('#sidebar_container').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_initial_left_distance - left_margin) + 'px'); $('#sidebar_banner_right').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_right_banner_initial_left_distance - left_margin_banner) + 'px'); } else if(highlighted_top_distance + sidebar_position_offset < scroller_margins) { sidebar_position_offset += windows_height/2; $('#sidebar_container').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_initial_left_distance - left_margin) + 'px'); $('#sidebar_banner_right').css('position', 'fixed').css('top', sidebar_position_offset + 'px').css('left', (sidebar_right_banner_initial_left_distance - left_margin_banner) + 'px'); } else if(!sidebar_fixed && scroll_top + sidebar_standard_top_distance > sidebar_offset_top) { $('#sidebar_container').css('position', 'fixed').css('top', '0px').css('left', (sidebar_initial_left_distance - left_margin) + 'px'); $('#sidebar_banner_right').css('position', 'fixed').css('top', '0px').css('left', (sidebar_right_banner_initial_left_distance - left_margin_banner) + 'px'); sidebar_fixed = true; sidebar_initial_top_distance = sidebar_offset_top; } else if(sidebar_fixed && scroll_top + sidebar_standard_top_distance < sidebar_initial_top_distance) { $('#sidebar_container').css('position', 'relative').css('top', '0').css('left', '0'); $('#sidebar_banner_right').css('position', 'relative').css('top', '0').css('left', '0'); sidebar_fixed = false; } for(k in post_divs_distances) if(k < scroll_top + 100 && post_divs_distances[k] != 'selector') first_visible_post = parseInt(post_divs_distances[k]); if(first_visible_post > 0 && first_visible_post <= post_divs_distances.length + 1) { $('#nav_post' + nav_highlighted).css('opacity', ''); $('#nav_post' + first_visible_post).css('opacity', '1'); nav_highlighted = first_visible_post; } clearTimeout(thread_onscroll_timeout); thread_onscroll_timeout = setTimeout(function () {thread_onscroll();}, 200); } function init_quoted_extra() { $(".quoted_post_level_1").each(function() { if($(this).text().length < 500) return; if($(this).next('.quoted_extra_clickable').length != 0) return; $(this).css('display', 'none'); $(this).after('<div class="quoted_extra_clickable">...</div>'); }); } function quoted_extra_click(e) { $(e).css('display', 'none'); $(e).prev().css('display', 'block'); build_post_divs_distance() } $( document ).ready(function() { $(".post_censored").on('click', function(event){ event.stopPropagation(); event.stopImmediatePropagation(); var post_id = $(this).closest(".post").attr('id').replace('post', ''); console.log(post_id); censored_post = $(this).closest(".post_body"); $(this).closest(".post_body").css('opacity', '0.3'); /* $.ajax({ url: "?load_censored_post=" + post_id, type: 'GET', dataType: 'html', success: function(data){ console.log(nk.censored_post); nk.censored_post.html(data); } }); */ $.post(window.location, {'load_censored_post': post_id}, function(data) { // alert('POST was successful. Server says: ' + data); console.log(censored_post); $(censored_post).html(data); $(censored_post).css('opacity', '1'); }); }); }); function thread_selector_mouseup() { } function thread_init_selection() { if(!window.location.hash || !window.location.hash.match(/^#selection:([0-9]+)\.([0-9]+)\.([0-9]+)$/)) return; nk.is_select_ref = 1; var temp = window.location.hash.match(/^#selection:([0-9]+)\.([0-9]+)\.([0-9]+)$/); var post = temp[1], start = temp[2], end = parseInt(start) + parseInt(temp[3]), ts, tr; tr = $('#post' + post).children('.post_body').html().trim(); ts = '<div>' + $('#post' + post).children('.post_body').html().trim() + '</div>'; ts = $(ts); ts.find('.quoted_post').remove(); ts.find('.post_signature').remove(); //ts.find('#selection_url_f').remove(); ts.find('br').replaceWith(' '); ts = ts.html().trim(); var post_verified = '', c; for (var i = 0; i < ts.length; i++) { if(i < start || i >= end) continue; c = ts.charAt(i); post_verified += c; if(c != ' ') continue; if(tr.indexOf(post_verified) != -1) continue; post_verified = post_verified.slice(0, -1); if(tr.indexOf(post_verified + ' ') != -1) { post_verified += ' '; continue; } break; } $('#post' + post).children('.post_body').html( $('#post' + post).children('.post_body').html().replace(post_verified, '' + post_verified + '') ); var offset = (window.innerHeight < $("#init_selection").height()) ? 30 : ((window.innerHeight - $("#init_selection").height()) / 2); $('html,body').animate({scrollTop: $("#init_selection").offset().top - offset},'fast'); ga('send', 'event', 'selection', 'load', {'nonInteraction': 1}); } function thread_init_copy() { $('#thread_container').on("mouseup", function() { var t, te, tr, ts; if($('#selection_url_c:hover').length > 0) { $('#selection_url_c input').select(); ga('send', 'event', 'selection', 'click', {'nonInteraction': 1}); if(typeof nk.push_ts_event !== 'undefined') nk.push_ts_event('selected_link_hover', 1); return; } $('#selection_url_c').remove(); $('#selection_url_f').remove(); if(window.getSelection) t = window.getSelection(); else if(document.getSelection) t = document.getSelection(); else if(document.selection) t = document.selection.createRange().text; if(typeof t === 'undefined' || t.toString().length <= 1) return; if(typeof t.anchorNode === 'undefined' || typeof t.anchorNode.parentElement === 'undefined' || typeof t.anchorNode.parentElement.parentElement === 'undefined') return; te = t.anchorNode.parentElement.parentElement; if(!te.id.match(/^post[0-9]+$/)) return; tr = t.toString().replace(/\n/g, ' ').trim(); ts = '<div>' + $(te).children('.post_body').html().trim() + '</div>'; ts = $(ts); ts.find('.quoted_post').remove(); ts.find('.post_signature').remove(); //ts.find('#selection_url_f').remove(); ts.find('br').replaceWith(' '); ts = ts.html().trim(); if(ts.indexOf(tr) == -1) return; var hash = document.location.href.match(/\.narkive\.com\/([a-zA-Z0-9]{8})/); if (typeof hash[1] === 'undefined') return; hash = hash[1]; var fix_index = 0; if(ts.indexOf('init_selection') < ts.indexOf(tr) && ts.indexOf('init_selection') != -1) fix_index = 33; //console.log(ts); //console.log(fix_index); if(typeof nk.push_ts_event !== 'undefined') nk.push_ts_event('selected_char_count', tr.length); var url = 'https://narkive.com/' + hash + ':' + te.id.replace('post', '') + '.' + (ts.indexOf(tr) - fix_index) + '.' + tr.length; setTimeout(function() { try { var range = document.createRange(); range.setStart(t.focusNode, t.focusOffset); range.insertNode($('').get(0)); var selection_button = $('<div style="top: ' + $('#selection_url_f').offset().top + 'px" id="selection_url_c">Selection Permalink:<input type="text" value="'+url+'"></div>').get(0); $('#thread_container').append(selection_button); //console.log(selection_button); } catch (e) {} }, 10); }); } /* function thread_similarbar(hash) { if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) return; $.get( "https://" + document.domain + "/ajax/similarbar?hash=" + hash, function( data ) { $('#thread_navigation').after(data); }); } */ function thread_suggested_reading(hash) { if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) return; $.get( "https://" + document.domain + "/ajax/suggestedreading?hash=" + hash, function( data ) { $('#thread_container').append(data); }); } $( window ).scroll(function () { thread_onscroll(); }); $( document ).ready(function() { init_quoted_extra(); thread_onscroll(); /*thread_check_adv();*/ thread_init_copy(); thread_init_selection(); }); </script> <script type="text/javascript"> /* thread_similarbar('NWndwEi4');*/ /* thread_suggested_reading('NWndwEi4'); */ </script> <style type="text/css"> </style> <script type="text/javascript"> $( document ).ready(function() { var targetNodes = $(".adsbygoogle"); var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var myObserver = new MutationObserver (mutationHandler); var obsConfig = { attributes: true }; targetNodes.each ( function () { myObserver.observe (this, obsConfig); } ); function mutationHandler (mutationRecords) { mutationRecords.forEach ( function (mutation) { if(mutation.type == 'attributes' && mutation.attributeName == 'data-ad-status') { var jq = $(mutation.target).attr('data-ad-status'); if(jq == 'filled') { nk.adsense_status.filled++; } if(jq == 'unfilled') { nk.adsense_status.unfilled++; } nk.ts_suggestPushEvent = 1; } } ); } var testURL = "https://" + document.domain + "/s/_adverts.js" var myInit = { method: 'HEAD', mode: 'no-cors' }; var myRequest = new Request(testURL, myInit); fetch(myRequest).then(function(response) { return response; }).then(function(response) { nk.adb = 'disabled'; nk.ts_suggestPushEvent = 1; }).catch(function(e){ nk.adb = 'enabled'; nk.ts_suggestPushEvent = 1; }); }); </script> <div style="height: 50px"></div> </div> <div id="footer_wrapper"> <div id="footer_links"> <a href="https://narkive.com/about">about</a> - <a href="https://narkive.com/legalese">legalese</a> </div>  </div> <div id="ajax_loading">Loading...</div> <div id="overflow"></div> <div id="overflow_message"> <div id="overflow_message_header"> </div> <div id="overflow_message_content"> </div> <div id="overflow_message_actions"> </div> </div> </body></html>