Jul 10 2010

Quick Start HTML

Published by

If you are having trouble with this lesson, try reading the more detailed lesson. To edit the coding, just change what’s in bold to what you need.

Basically, you just need this coding:

<table> -the begging code of a layout

<td>- a coding for a text –will not scroll–

</td> – the end code for a text box, showing that it closed.

</table> – end code for a table, showing the layout is complete.

Using this <tr> code between two <td> codes will align the text boxes next to them. Also, using a colspan=”2” code will stretch out the text box and make it longer to fill the text. If you have three text boxes in a row, you should make it colspan=”3″. If it’s two, make the code colspan=”2″. Place the colspan code after td but before the carrot (>) Ex: <td colspan=”2″>

To add an image:

Add this code after the table code:

<img src=”image link“> (To get the image link, right click on the image and select “Copy image location”)

Want to change the size?

<img style=”width: 500px; height: 350px;” src=”image link“>

As you can see, you just need to add the style snip.

Adding borders, background colors, and fonts to the layout:

Anything that is added in the <table> code will be added to the whole layout (unless if you use div text boxes [scrolling text boxes])

<table border=”1” bgcolor”#000000” font-face=”Arial“>

Need color codes & fonts? Click here.

Complete layout of how it will look:

<table border=”1” font-face=”arial” bgcolor=”#000000“>

<img style=”width: 500px; height: 350px;” src=”image link“>

<td>text here</td>

<tr>

<td>text here</td>

<tr>

<td colspan=”2“>text here, used as a place to put credit – Made by Jessica27</td>

</table>

Adding a scroll box:

Instead of putting a <td> code and text, just add a <div> code:

<td><div style=”overflow: auto; height: 250px; width: 250px;”>text here</div></td>

The overflow part is what makes it scroll. Adding the width and height makes the size of the text box. Once there is text to fill the text box, it will stop expanding and will start scrolling. Notice that after a word is typed, a colon is added. After the number is added, px is put after it as well as a semi-colon. (px means pixels) If you want the scroll boxes to appear next to each other, you need the td code before and after the div code.

Changing the background and text color of a scroll box:

Enter these codes in the style=”x” part, doesn’t matter where:

background-color: #000000;

color: white;

The first is for the background color (needs a color code) and the second code is for changing the text code – no color code needed, just type any solid color (ex: orange, pink, red, etc.)

Complete layout with scroll boxes: **Notice the image is in a separate table!!**

<table border=”1” font-face=”arial” bgcolor=”#000000“>

<img style=”width: 500px; height: 350px;” src=”image link“>

</table>

<table border=”1” font-face=”arial” bgcolor=”#000000“>

<tbody>

<td>

<div style=”overflow: auto; background-color: #000000; color: white; height: 250px; width: 250px;”>text here</div>

</td>

<tr>

<td>

<div style=”overflow: auto; background-color: #000000; color: white; height: 250px; width: 250px;”>text here</div>

</td>

<tr>

<td style=”color: white;” colspan=”2“>text here, used as a place to put credit – Made by Jessica27</td>

</table>

The tbody code that is above is needed to align text boxes next to each other. Just add it right under a table code – no need to edit it. Also, you can see that the style=”” code can be added to anything – images, tables, text boxes, and scrolling text boxes. A separate table is needed so it doesn’t change the alignment of the text boxes.

**If you add these layouts to your page, remove the extra spacing between each row before saving!

89 responses so far

89 Responses to “Quick Start HTML”

  1. mp3juiceon 04 Jun 2016 at 1:04 pm

    This paragraph is truly a good one it helps new the
    web people, who are wishing in favor of blogging.

Trackback URI | Comments RSS

Leave a Reply