What does all this code mean?
Paragraph: <p>These are Paragraph Tags</p> You'll use them all of the time when you add text. Many html editors put them in automatically, but you may have to add some manually.
Breaks: <br> This tag is used when you do not wish to start another paragraph, but want the text just break to the next line.
Sample using just paragraph tags
This line of text is a paragraph line without using a break. It continues until you hit "enter" on your keyboard to move to the next line of text. There will be no spaces between this line and above line of text, since it is in the same paragraph.
Once you hit "enter' on your keyboard, your text will begin a new paragraph.
Coding:
<p>This line of text is a paragraph line without using a break. It continues until you hit "enter" on your keyboard to move to the next line of text. There will be no spaces between this line and the above line of text, since it is in the same paragrapy.</p>
<p>Once you hit "enter" on your keyboard, your text will begin a new paragraph.</p>
Sample using break tags
This line uses a break to separate text.
The text breaks and begins on next line.
To get text to start on a
new line, but not a new paragraph, use your shift-enter keys on your keyboard or place the <br> in the code
When you do, your text will
begin on the next line, but be in the same paragraph.
Coding:
<p>This line uses breaks to separate text.<br>
The text breaks and begins on the next line.<br>
To get text to start on a new line,
but not a new paragraph, use your shift-enter keys on your keyboard or place the <br> in your code<br>
When you do, your text
will begin on the next
line, but be in the same paragraph.</p>
Bold Text: <b>bold text</b> or <strong>Bold Text</strong> are used for bold text
Links: <a href>your link</a> This is the anchor tag for links.
Italics: <em>Italics</em> This makes your text itallic
<hr> This is a horizontal rule or line that is styled into the web. You pick the colors, lengths, heights all in your css file. You can even use an image for your horizontal rule. The first line is a plain horizontal rule, the second, a fancy horizontal rule using an image:
Spans: <span> Your Text </span> This is a Span bracket. It "spans" the length of the text you create. When you create a span, you need a class to go with it in order to style the span. So a highlight span would look like this: A span bracket is cool to use.
Tables: There are 3 different parts to a table code
So a table consisting of 2 rows with 3 columns each would be coded like this:
<table> [opens the table]
<tr>[begins row 1 of the table]
<td>table data - column 1</td>
<td>table data - column 2</td>
<td>table data - column 3</td>
</tr>[ends row 1 of the table]
<tr>[begins row 2 of the table]
<td>table data - column 1</td>
<td>table data - column 2</td>
<td>table data - column 3</td>
</tr>[ends row 2 of the table]
</table>[closes the table]
Or here is the code for a table with borders and table width: (you can copy and paste this code)
<table width="90%" border="1"> [opens the table]
<tr>[begins row 1 of the table]
<td>table data - column 1</td>
<td>table data - column 2</td>
<td>table data - column 3</td>
</tr>[ends row 1 of the
table]
<tr>[begins row 2 of the table]
<td>table data - column 1</td>
<td>table data - column 2</td>
<td>table data - column 3</td>
</tr>[ends row 2 of the
table]
</table>[closes the table]
Smashing Magazine
Cheat Sheet
W3Schools offers several great hands on try-it yourself online tutorials.
https://www.w3schools.com
Updated by AB June 2021
Comments and administrative-type problems should be emailed to the
National Coordinator. For
suggestions, concerns or complaints regarding a specific web site within
the USGenWeb Project, please email the
National Coordinator.
Direct comments, technical difficulties or suggestions about this web site to the Webmaster.