Post Reply 

Fundamentals of HTML

May 9, 2011, 16:57 (This post was last modified: May 9, 2011 17:41 by mikethedj4.)
Post: #1
Fundamentals of HTML
Click here to view the video tutorial.

In this tutorial we're going to talk about the fundamentals of HTML.

HTML stands for HyperText Markup Language and is used to markup text, it's not a programming language, but a markup language to make that clear.

Let me point out that in this video tutorial we're not going to go over HTML5's new elements like canvas, and such. If you wanna learn HTML5 head here. As today is strictly the basics to get you guys started.

Before starting any coding language I recommend beginning with HTML, as it's the easiest to understand, after you get your HTML down, and understand that better we'll get into CSS. For a full introduction to HTML, and a list of other tutorials you can head to w3schools.com to check them out.

Lets begin!

bold:
Code:
<strong>This makes bold text</strong>

italics:
Code:
<em>This makes the text have a shear effect</em>

underline:
Code:
<u>underlined text</u>

strikethrew:
Code:
<s>text with a line in the middle</s>
<strike>text with a line in the middle</strike>

font color:
Code:
<font color="red">changes font color</font>

font size:
Code:
<font size="6">changes font size (default is 3)</font>

font change:
Code:
<font face="verdana">Changes the font</font>

hyperlink:
Code:
<a href="URL_TO_SITE_HERE">text for link here</a>

If you want the link to open in a new tab (or window depending if browser doesn't support tabs) put down target="_blank" before the last >.

[b]image
:
Code:
<img src="Image_URL_HERE">

NOTE: You can add width="400" and that'll change the width of the image to 400px, and the height will adjust automatically maintaining it's aspect ratio, however if you add in height="400" it'll automatically add the height stating the width will be this amount of pixels, and the height will be this amount.

If the image is hyperlinked add in border="0" as images automatically get a border when hyperlinked unless stated in the css.

If you want to change where the image is aligned right or left you can add align="right" and the image will be aligned to the right as well as text would fill it's side.

lists:
There's two type of lists there's an unordered list, and an ordered list, an ordered list will give you a numbered list keeping it nice, and organized, and unordered list will give you bullets.

First we'll add in the code for an ordered list.

Code:
<ol>
<li>List 1</li>
<li>List 2</li>
</ol>

OL represents it's an ordered list, and the LI tags represent that thoughs are the lists being added.

UL would state that it'll be an unordered list giving us the bullet system.

Code:
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>

marquees:
Code:
<marquee>Scrolling text</marquee>

scrollamount="6" will adjust the marquee's speed
direction="right" will tell the marquee to go right instead of left (you can also use up, down, and left)

You can also add width="400" and/or height="400" as well to state that the marquee will only be that amount of pixels.

You can also add behavior="alternate" for a bounce effect (TIP: by default the behavior is nor alternate, but scroll.

If you add slide for the behavior the text will slide in, and come to a stop.

So that's it for this tutorial, hopefully I helped you guys out there you guys go for the "Fundamentals of HTML".

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS