• March 28, 2024, 04:27 AM
• Welcome, Guest. Please login or register.
Did you miss your activation email?
Perusing The Shelves

Author Topic: HTML book  (Read 4265 times)

xandra16

  • Guest
HTML book
« on: March 20, 2012, 05:17 AM »
Hey everyone. I decided to start learning html. Problem is I don't know where to start. I'd like a book or some good tutorial but I simply don't know where to start. Can anyone suggest and maybe upload some book/tutorial or anything of the sort? I am new to html and really have no idea how it works but I want to learn it. I understand html 5 is the latest one so I guess that's what I should learn but it's still in the works so maybe previous html? No idea here. Please help!!!
Thanks ^.^
 

Advertisement


Offline jessadia

Re: HTML book
« Reply #1 on: March 22, 2012, 09:26 PM »
You may be asking what's the difference between CSS and HTML? The answer is:


HTML (or Hyper Text Markup Language) is used to to structure the actual content itself. HTML is used mostly to add layout to websites and to set up and structure layout, etc. HTML is "hidden" content, such as formatting. An example of HTML would be hyperlinks (like the site Member of the Month banner or the Donate link in the Feb 16th S&F thread).

CSS (or Cascading Style Sheet) is used to format structured content. CSS is made up of noticeable things that you can see- such as font, color, height, width, margins and the like.

This guide will teach you all about several of the different CSS options and how/when to use them. You'll notice that when you hit the "Reply" button on a thread you'll be rewarded with a new reply screen which features different sections like Subject, Tags, Message icon, Message Body, as well as several weird looking buttons and bars. These are CSS buttons. If you play around with these you'll discover you can do lots of neat things like center, shadow and bolden text. You can insert codes, tables, rules, videos and emoticons (which most of you are probably already familiar with). The Font face, font size and font color are actually really limited- there's so many more that you could use then what's in the drop down lists.



Font Family:

B- Bolden text
I- Italicize text
U- Underline text
S Strikeout text

Font Face:
This is used to change the font style of text. The drop down menu gives you 10 different options but you can use pretty much any font style. For example: Bradley Hand ITC is one of my favorites and is not listed. To insert your own font style you can either select one from the drop down list and simply remove the selected and enter your own or to do it yourself enter "font=bradleyhanditc" in brackets (without the paranthesis) before the preferred text and enter "/font"  in brackets (again, w/o the paranthesis) after the text. (see the coded entry below for a more detailed example)

Code: You are not allowed to view links. Register or Login
[font=bradleyhanditc]enter preferred text here[/font]
Font size:

This changes the size (height/width) of your text. The dropdown box gives you 7 different selections but again, you can use any size.

Change color:

This bar gives you the option to change the color of your text. The dropdown menu gives you a basic overview of colors you can use but again, any color can be used here. In HTML you would use color codes, such as:
Code: You are not allowed to view links. Register or Login
[fontcolor=#669900]colored text here[/font]
**The selected color (#669900) is a dark greenish

In CSS things are made much easier because you can simply use color tags.
Example:
Code: You are not allowed to view links. Register or Login
[color=olivedrab]colored text here[/color]
Here's a link to a CSS Font Colour Code Chart that I use:
You are not allowed to view links. Register or Login
*Scroll down to the Not necessarily web safe section- you'll need to use the actual color names, not the numbers, but it gives you a colored preview of what each one looks like.



Other Options:

You'll notice 4 little boxes located on the top with the Font Family. These are used to align text. The 4 options are:
Preformatted text ("pre")
Left Align ("left")
Center Align ("center")
Right Aligh ("right")

There are also 3 boxes grouped together under the alignment options:
G: add glow to text - you can change the color and luminosity of the text by replacing the "red" with the color of your choice and the same for the "2,300" (increase the number for a brighter glow or decrease for a duller effect)
D: add shadow to text - you can change the color and shading effect by replacing the "red" with the color of your choice or the "left" with options like "right", "above" or "below"
M: make your text scroll right to left across the screen by using the Marquee effect

sup: inserts superscript into text
sub: inserts subscript into text
Tt: inserts Teletype




Advanced Options:

Next I'll go over how to embed things in your posts. You'll notice on the 2nd row there's a group of 6 boxes.
f: used to insert youtube and other flash videos

</>: used to insert youtube and other embedded videos and text


*You can change the size of the videos by simply changing the numbers. I like to use 400,250 for videos. Likewise you can simply use the "embed" button to embed various text, etc (size won't matter here)

Sp: Spoiler button. This button can be used to "hide" the contents of a message like so:
Sorry but you are not allowed to view spoiler contents.



The next 3 boxes are:

Insert Hyperlink
You are not allowed to view links. Register or Login
 
Code: You are not allowed to view links. Register or Login
[url]www.perusingtheshelves.com[/url]
I like to use a manual hyperlink code:
Code: You are not allowed to view links. Register or Login
<a href="insert url here"> enter text [/url]

Example:

You are not allowed to view links. Register or Login
Sorry but you are not allowed to view spoiler contents.

Insert email
Code: You are not allowed to view links. Register or Login
[email]yourname@hotmail.com[/email]
Insert FTP link
ftp://www.perusingtheshelves.com (ftp://www.perusingtheshelves.com)
Code: You are not allowed to view links. Register or Login
[ftp]www.perusingtheshelves.com[/ftp]
Sorry but you are not allowed to view spoiler contents.




Advanced Formatting Options:

Under the "font size" bar are 3 boxes:

Insert table: this is used to format your text. A complete walkthrough can be found here: You are not allowed to view links. Register or Login

Insert code: used to code text (see the above coded examples)




Insert quote: used to insert quotes



The next 3 boxes are for lists and rules:

Insert Unordered List:
Code: You are not allowed to view links. Register or Login
[list]
[li]text here[/li]
[li]text here[/li]
[/list]

example:

  • enter text
  • enter text
Insert Ordered list:

Code: You are not allowed to view links. Register or Login
[list type=decimal]
[li][/li]
[li][/li]
[/list]

  • enter text
  • enter text


Horizontal Rule: Used to insert a horizontal line to separate text
Code: You are not allowed to view links. Register or Login
[hr]


The last 2 boxes are:

Remove formatting: does exactly as it says
Toggle View: clicking this button will allow you to automatically preview your post in the message window instead of having to scroll down/up and hit the "preview" button



The last of the buttons are the emoticons which are pretty self-explanatory. However, there are a few that you can use that aren't listed such as an angel and devil:

0:)

Code: You are not allowed to view links. Register or Login
0:)

Use the zero key then a regular smiley


>:D

Code: You are not allowed to view links. Register or Login

>:D

Use the > key then a open mouthed smiley



I hope this "guide" was helpful. If you have any questions or anything to add, leave a post or PM me (this guide was written for STP, if you'd like I can help with any questions you may have in regards to general CSS/HTML.....)
 

Tags:
 

Related Topics

  Subject / Started by Replies Last post
40 Replies
23995 Views
Last post June 13, 2012, 08:21 AM
by Mij
127 Replies
62475 Views
Last post February 20, 2018, 09:11 PM
by mayabelle
33 Replies
16090 Views
Last post May 14, 2012, 12:24 AM
by Rika
2 Replies
5073 Views
Last post January 02, 2012, 06:38 AM
by sowmyakc_sridharan
3 Replies
9458 Views
Last post July 19, 2012, 09:07 AM
by itallFire