Presentation guide

So there are many of you who want to learn the basics of HTML, for making presentations.
Well, just to get you started, I'm going to show you a few tips and tricks.
Please note: There are no samples, these are for you to make your own presentation.
Everything in red is your code so far. Everything in yellow is what you can edit to change how it looks. Everything in orange means it's an optional addition to your code.
Click here to go to the HTML editor.
__________________________________________________________

Starting off:
First up, before you even type any code, you must add <p style="  -  it is the beginning of every presentation.
Your code so far: <p style="
Also for later use, remember that instead of pressing enter, it won't work, so type <br />

Alignment and angles:
After that, we'll start with the alignment of the text (left, middle or right). Just add this on after the <p style=", no spaces, it doesn't matter about capital letters, but if you spell it wrong, the code won't be recognised and it won't work.
Please note: HTML uses American spelling (e.g. Colour is spelt the american way: Color).
To add the text alignment, just add on text-align: center;  -  (make sure you use the ';' symbol after everything, otherwise it will not work. You can also add the margin (optional, this is for more experienced HTML makers, or people up for a challenge, if you don't want to do this skip to next section). To add the margin, add on margin-left: 2px; margin-right: 2px; margin-top: 2px; margin-bottom: 2px;  -  that is if you want each side custom. If not, just add margin: 2px;.
Your code so far: <p style="text-align: center; margin: 0px;

Borders and backgrounds:
Now we're going to add the border and background. Let's start with the background.
Just type background-color: #000000; - the '#000000' is the colour (000000 is black). Click here to see a list of HTML colours. Change '000000' (keep the # in front otherwise it won't recognise it) to whatever 6 numbers represent the colour you want. If you don't want a background, just type 'transparent' without the # in front.
Now for the border. Type in border: 6px solid #892ee4;  -  as before, change the 6 numbers to any you want, or keep transparent. Where it says 'solid', you can change it to either of the following border types:
-Solid
-Double
-Dotted
-Dashed
-Inset
-Outset
-Ridge
-Groove
If you want to change the thickness of the border, change the '6' in 6px, to any number 1 and over. If you want 4 different types of borders, you add this code (this is advanced):
border-width: 6px; border-color: #892ee4; border-style: dotted dashed solid double;
Your code so far: <p style="text-align: center; margin: 0px; border: 6px double #892ee4; background-color:  #000000;

Fonts and sizes:
You can also change the type of font, and the size of it. To change the font, simply add font-family: century gothic;  -  you can change 'century gothic' to any font on your computer. If the font doesn't work, then it doesn't exist on your computer. I started off by choosing fonts from Microsoft Word on my computer. If you downloaded a font off the internet, you will be able to see it but nobody else will unless they downloaded it as well. If you type 'bold' after certain fonts (e.g. font-family: century gothic bold;) it will automatically make that font bold.
To change the colour of your text, simple add color: #000000 and change the '000000' to any of the colour codes you want it to be.
To change the size of your text, add font-size: 25px;  -  Change '25' to any number beginning from 1.
Your code so far: <p style="text-align: center; margin: 0px; border: 6px double #892ee4; background-color:  #000000; font-family: century gothic bold; font-size: 30px;

Text shadows:
Everyone's favourite part of the presentation.
Please note: You can only see the effects if you use Google Chrome or Mozilla Firefox
To add a simple shadow, add text-shadow: 0px 0px 2px #ffffff;  -  you now already know how to change the colour, intensity and size of the shadow. Fiddle around with it a bit, and see what you get!
If you want multiple shadows, you just add on to your existing shadow with   text-shadow: 0px 0px 2px #ffffff, -11px 2px #ffffff;   -  each time you want another shadow, just add another 0px 0px 2px #ffffff; making sure you leave a comma ',' in between each one.
Your code so far:  <p style="text-align: centermargin: 0px; border: 6px double #892ee4; background-color:  #000000; font-family: century gothic bold; font-size: 30px; text-shadow: 0px 0px 2px #ffffff, -1px 1px 2px #892ee4;

Ending the code, and starting a new:
Once you've added everything you want, type "> at the end of the code. Type your text (what you want it to say) and after you have typed everything you want, add </p> if that's the end of your presentation, or if you want more...
...instead of adding </p> add </span style=" and begin again!
Your code so far:  <p style="text-align: centermargin: 0px; border: 6px double #892ee4; background-color:  #000000; font-family: century gothic bold; font-size: 30px; text-shadow: 0px 0px 2px #ffffff-1px 1px 2px #892ee4">hello<br /></span style="font-size: 14px; text-shadow: 0px 0px 2px #ffffff">hello again</p>

Scroll boxes:
I am just going to give a simple scroll box code, so if people copy it won't matter that much.
<p style="text-align: center; text-shadow: 0px 0px 2px #000000; color: #000000; border: 4px double #000000; background-color: #ff62b0; margin: auto; height: 230px; width: 350px; overflow: auto; font-family: century gothic; letter-spacing: -0.08em; font-size: 70px">Header.<br><span style="color: #892ee4; letter-spacing: -0.02em; font-family: century gothic; font-size: 14px; text-shadow: 0px 0px 2px #892ee4">Text here.<br><span style="font-size: 20px"><br>text here. text here.<br />text here. text here.<br />text here. text here.<br />text here. text here.<br />text here. text here.</p>

And that's how you make presentations! Did this help you?
If this was too hard and you want a sample, you can get one from my presentation account TheHTMLPres -   please do not copy mine, or anyone else's presentations, it is wrong and will get you into trouble.

14 comments:

  1. Thank you!!! so much it really helped me!

    ReplyDelete
  2. Thank you very much! It helped me so much, and do you know the HTML code for scroll boxes?? Thank you soooo much! :D

    ReplyDelete
  3. Yeah, hi. ^-^ So like uh, it's Japanese_Emo here, o_o and I wanted to know if you know how to just get the backgrounds and make them easy & quick to do in rainbow colors? With a linking font. Thanks, please post a new guide for that where you can just copy & paste if you can (; Bye!
    ~Japanese_Emo
    (P.S. o; Reply as soon as you get this. So like; A.S.A.P :) Thanks so much.)

    ReplyDelete
    Replies
    1. {Rainbow colored background as in Colors in order,in line making a border, then just the typing in the middle. Thanks ;p}

      Delete
    2. Rainbow backgrounds are simple, you just keep making a new background, and type in the one you want the text in. There is unfortunately, no code specifically for that.

      Delete
    3. Can you do the code for the rainbow background please? And, after (If you do paste the code..) do you just put a space then type? Thanks, I'm not good with some things like this ^_~

      ~Alyse
      xxxoooo ♥

      Delete
    4. Sorry! (p.s., thanks for the 2-minute or fast... not always the same time, am I right? anyways thanks for the fast replying. I know someone who's really appreciating it (; So.. bye now!)

      Delete
    5. Haha no, sorry. Just keep copying and pasting the code for a background, and changing the colour.

      Delete
    6. Lol (: Naww... okay! o; And it is Fast 2-Minute replying... thanks anyways! (: And, please answer this again; After the codes, do I put one little space.. then just start typing? Should that work? o_e Anyways thanks!

      Delete
    7. you dont even need a space, just <p style=" or <span style=" and it will restart itself (:

      Delete
    8. *Blushing* o; Uh... sorry v_v Back.. again :S I'm so sorry to take up your time! But is it at the front or back of the codes? o~o Thank you, so so so so so so so so so so so so so so so so so so so so so so much for your time!

      ~Alyse

      Delete