Best way to create an Advanced HTML Page?

brandon_g · brandon_g Sat 07 Feb 2015, 22:11

Hello everyone,

Lately I have been brainstorming ideas on possible updates and new features for my forum and site. One of my ideas is very cool but will require a seperate very advanced HTML Page. I have never attempted such a big project on my before so I figured I could get some tips and advice here.

My questions are:

Is there an easy way to go about creating an HTML Page (on forumotion)
Is there a way to include off site Embed codes in HTML Page?
Is there a way for the HTML page to be my home page but the forum still appears as the homepage as well?
Is there a way to insert my navigation bar on the HTML Page?

Any assistance will be greatly appericated, again this is my 1st ever big project that I will doing solely. More information can given out upon request. A test forum is avalible so I can work on it before totally bringing it online on my real forum.
This is a big project, I am excited and scared at the same time, this has to go just right to be successful. Smile

Regards,
-Brandon

**Ange Tuteur** · **Ange Tuteur** Sat 07 Feb 2015, 22:38

Is there an easy way to go about creating an HTML Page (on forumotion)
=> If you know what you're doing, then yes Smile

Is there a way to include off site Embed codes in HTML Page?
=> Of course, if the other website allows hotlinking of their content

Is there a way for the HTML page to be my home page but the forum still appears as the homepage as well?
=> Yep, there's an option while creating the HTML page

Is there a way to insert my navigation bar on the HTML Page?
=> JavaScript AJAX can do that, or you can recreate it, ooor just use your forum header and footer. Wink

A good advice is to steer clear of the simple mode with the editor that's on the forum. It'll mess up your tagging and tabulation with unhelpful corrections. Rolling Eyes

It's better to create in advanced mode. If you're not going to use your forum header you'll want to include a flexible doctype like XHTML transitional and declare the character set as UTF-8 !

This is a simple example of what you would start with, without your header :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML DOCUMENT</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <link href="http://illiweb.com/fa/favicon/discussion.ico" rel="shortcut icon" type="image/x-icon"/> <style type="text/css"> /* color your elements here ! :D */ </style> </head> <body> <h1>I'm a TITLE !</h1> <div>I'm a DIV !</div> </body> </html>

This is your favicon : https://illiweb.com/fa/favicon/discussion.ico , the icon you see next to the tab title.

HTML DOCUMENT : title of your document, it'll show on the tab name.

I personally like to keep from linking too many external sources on my page, because it tends to increase response time. So use only what you need, that's what I say. Wink

This is a page slider example I wrote up a few days ago : http://forumbeta.forumactif.com/h1-pagelist
( Arrows are hidden in the page numbers )

brandon_g · brandon_g Sat 07 Feb 2015, 22:44

That was a lot to read, i can only image it was a lot to write. Thanks for the advice and tips. What did you mean by the site allowing off site hotlinking. The embed codes I want to use are already on my forum and working like a charm.

Thanks again. Smile

**Ange Tuteur** · **Ange Tuteur** Sat 07 Feb 2015, 22:48

Oh, I'd also recommend validating your HTML page here : http://validator.w3.org/

Forum-wise you'll notice many errors, however, it's useful for HTML pages.

You can include what you want. I just mean, using others sources without their permission. Razz

brandon_g · brandon_g Sat 07 Feb 2015, 23:10

Ah thanks Ange, this is going to be easy peasy! This is the simplest thing in the darn world! I pulled this as refrence scheet since html and bbcode tags are different: http://www.w3schools.com/tags/

Thanks Ange so much!
So just to clarify if I hit make html page my homepage does still show the forum too?

Thanks Ange Smile

-Brandon

**Ange Tuteur** · **Ange Tuteur** Sat 07 Feb 2015, 23:24

Yeah, it should show your forum, it'll just store the html page on the index. i.e. "/"

brandon_g · brandon_g Sat 07 Feb 2015, 23:28

Oh ok... I have started it already, if you want to see what I got so far here is the preview page: http://testingduo.forumotion.com/ also what are the tags for coloring text? It does not say it in the refrence sheet. Could it perhaps be <color= Color></color>

Thanks again so much Ange!
-Brandon

**Ange Tuteur** · **Ange Tuteur** Sat 07 Feb 2015, 23:47

You can use CSS Wink

For example, we add the class "colorRed" to our span tag :

Code:: <span class="colorRed">I'm red !</span>

Then we can add a stylesheet to our HTML page if we haven't. NOTE : Stylesheets should be before all elements you want to style.

Code:: <style type="text/css"> .colorRed { color:#F00 } /* anything with this class will render as red texte ! */ </style>

You can also just place the color in the style attribute :

Code:: <span style="color:#F00;">I'm red !</span>

brandon_g · brandon_g Sat 07 Feb 2015, 23:57

Perfect! The last one did the trick. You are truly awesome Ange. I can have this done in week top probably. And I though I would be coding for months! Razz

Thanks again,
-Brandon

**Ange Tuteur** · **Ange Tuteur** Sun 08 Feb 2015, 00:08

It's easy after you work with it for awhile. Wink

You should consider reading up on CSS sometime, because it's an integral part in the design of your HTML document. I put it as HTML is the framework, CSS is your graphics, and JavaScript can manipulate and make your document dynamic. Cool

This is a reference of the CSS properties you can use : http://www.w3schools.com/cssref/default.asp

You already used 1; color Razz

brandon_g · brandon_g Sun 08 Feb 2015, 00:15

Well, I will definitelly get there, I think Jadster was going to teach me some things some time (in about 3 months when his schedule frees up Razz

). Who knows, maybe I can beat him to punch. Who knew code could be so simple (especially now that I have test forum that I do not care if i screw up Smile

).

Thanks again Ange, I think will do the basics tonight. Then transfer the embed codes to a text document tommorow. Can not work on it too late though, walking dead starts back up tomorrow night Smile

.

brandon_g · brandon_g Sun 08 Feb 2015, 22:59

Hello,

Today I added the embed codes, gave it a preview on my forum directly and will need to fix that colored text bit!

Anyway I was hoping for feedback and if anyone has any thoughts on something I can add to make it better or style it better please let me know!

My updated HTML can be found here: http://testingduo.forumotion.com/

I hope I did good Shocked

-Brandon

EDIT: Sorry for early bump, I have school tommorow (snow permitting) so I can not really stay up until 1AM like last night, so I hope it is okay that I post it now before I go go bed? I apologize wad not intending to purposelly double post to break the rules Neutral

.

**Ange Tuteur** · **Ange Tuteur** Mon 09 Feb 2015, 03:07

I think on larger screens it can end up looking too far to the left, so I'd probably consider centering those objects. You can do that with a DIV and style="text-align:center;" to wrap a majority of your content. You can always change the alignment of the child tags later on. If you do it this way -- adding a main tag that wraps all your content -- you can even include a background, border.. which frames the content. Wink

Take the affiliate page as an example : https://fmdesign.forumotion.com/h1-

I made use of the already existing module style and placed my content in it.

You could make the sectional sub-titles add some separation, and be more attractive. One way to do that would be to use a DIV or H3 tag and add a border. I usually use DIVs, so here's an example.

We could replace :

Code:: <strong>Twilight FM!</strong>

by :

Code:: <div class="subTitle">Twilight FM!</div>

Then add this to the top of your HTML document :

Code:: <style type="text/css"> .subTitle { color:#000; font-size:18px; border-bottom:1px solid; padding-bottom:6px; margin-bottom:6px; } </style>

Should result in a sub title that separates content. Smile

Best way to create an Advanced HTML Page? Captur84

To change the color, just edit #000.

Sorry for early bump, I have school tommorow (snow permitting) so I can not really stay up until 1AM like last night, so I hope it is okay that I post it now before I go go bed? I apologize wad not intending to purposelly double post to break the rules

I think I nuked that rule awhile ago. So long as you're not bumping your topic every second, I don't mind.

_Twisted_Mods_ · _Twisted_Mods_ Mon 09 Feb 2015, 04:54

ange also forgot to mention you can color multiple things by placing it inside

<font color="#00ff00">whatever text or elements</font>

**Ange Tuteur** · **Ange Tuteur** Mon 09 Feb 2015, 06:01

_Twisted_Mods_ wrote:ange also forgot to mention you can color multiple things by placing it inside

<font color="#00ff00">whatever text or elements</font>

It's deprecated, but it does still work on some browser. Smile

You can read about it here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font

It's pretty useless now since we have CSS color though. Surprised

brandon_g · brandon_g Mon 09 Feb 2015, 06:23

Thanks for the advice everyone! I will certainly get to this after school, Jack Frost could not even save me today.

P.s I saw someone finally locked that new chatbox topic! About time. Very Happy

-Brandon

**Ange Tuteur** · **Ange Tuteur** Tue 10 Feb 2015, 22:43

Good luck, if you have any questions feel free. Smile

Yeah, I'm not sure who did it, but most of the replies were not all helpful. It is funny though, we get a chatbox that partially works and some people are worried about their username glowing. lol!

brandon_g · brandon_g Tue 10 Feb 2015, 22:47

I know right Smile

. I will Ange, I apologize by the way, I have been slacking, have not updated the html page yet ;( last 2 days have been BUSIER then I would have liked... start of the week is always busy, the good news is... I got a 4 day weekend coming up! That will leave me plenty of time to get on it Very Happy

.

-Brandon

**Ange Tuteur** · **Ange Tuteur** Tue 10 Feb 2015, 22:59

Not a problem. Wink

In fact, I have been quite busy since 2015 started. It's when I started this database topic stuff after seeing talk about it. I've really improved on it, although these extra projects have left me very busy. Still, I try to work on at least one tutorial a week -- even if it's silly ! Very Happy

Take it slow and you're bound to make less mistakes. Salute

brandon_g · brandon_g Wed 11 Feb 2015, 16:14

I know right! Life always speeds up at the most inconvient times. Neutral

brandon_g · brandon_g Thu 12 Feb 2015, 16:03

Hey guys,

I added Ange's code finally onto the html page which you can find here: http://www.testingduo.forumotion.com

The problem I am having is that the embeded player below the Praise FM sub title does not look right and is centered. It should look exactly like the player below 'Twilight FM'.
Screen shots and code are available upon request, but it seems Ange can see through my code anyway Razz

EDIT: Never mind the last part I fixed it Smile

Thanks for all the assistance so far everyone,
Regards,
-Brandon

**Ange Tuteur** · **Ange Tuteur** Thu 12 Feb 2015, 18:30

It's looking good. Wink

Have you tried adding a container for the content now ? I can give you an example to play with. Smile

Add this tag at the start of your HTML page : <div class="subWrapper">

and this at the end : </div>

Then add the rule following to the stylesheet I gave you before.

Code:: .subWrapper { background:#EEE; border:2px solid #CCC; border-radius:6px; padding:6px; margin:6px; }

You'll have to change the colors of course, so they match your forum. Wink

Those in particular are :
background : http://www.w3schools.com/cssref/css3_pr_background.asp
border : http://www.w3schools.com/cssref/pr_border.asp

Keep it up Smile

brandon_g · brandon_g Thu 12 Feb 2015, 19:15

What exactly does this wrapper do? I added it to the code and it does not do very much if anything at all... or maybe I did it wrong Very Happy

The code the way I added it is:

Code:: <style css"="" type"text=""> .subTitle { color: #000 font-size: 18px; border-bottom: 1px solid; padding-bottom: 6px; margin-bottom: 6px; .subWrapper { background:#EEE; border:2px solid #CCC; border-radius:6px; padding:6px; margin:6px; } }

I also am planning to write some text on the page (easy to do) and if possible show the user profile and avatar (these 2 are just optional accesories not really needed for me to role out the final product).

Thanks again for your help,
-Brandon

**Ange Tuteur** · **Ange Tuteur** Thu 12 Feb 2015, 19:24

Change it to this :

Code:: <style text="text/css"> .subTitle { color: #000 font-size: 18px; border-bottom: 1px solid; padding-bottom: 6px; margin-bottom: 6px; } .subWrapper { background:#EEE; border:2px solid #CCC; border-radius:6px; padding:6px; margin:6px; } </style>

You had the rule inside the other, which causes problems. Shocked

Profile data can be shown with a bit of JavaScript, as far as I know.

brandon_g · brandon_g Thu 12 Feb 2015, 19:32

Is there an easy way to go about starting or obtaining that JS code?

And oops... how embarrassing Embarassed

Sponsored content · Sponsored content

IMPORTANT

Best way to create an Advanced HTML Page?

Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Re: Best way to create an Advanced HTML Page?

Create an account or log in to leave a reply

Create an account

Log in