Scribd
Upload
97 views

HTML CheatSheet

HTML uses tags enclosed in angle brackets to structure and style text on a webpage. Tags usually have an opening and closing tag, though some like <BR/> are self-closing. Tags can be nested but their opening and closing order must be respected. Attributes provide additional information about tags, like the URL for an <IMG> tag. Common tags include those for headings, text styling, paragraphs, line breaks, hyperlinks, images, and tables. HTML also supports lists, forms, and special characters represented by entity references.

Uploaded by

wasiu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
97 views

HTML CheatSheet

HTML uses tags enclosed in angle brackets to structure and style text on a webpage. Tags usually have an opening and closing tag, though some like <BR/> are self-closing. Tags can be nested but their opening and closing order must be respected. Attributes provide additional information about tags, like the URL for an <IMG> tag. Common tags include those for headings, text styling, paragraphs, line breaks, hyperlinks, images, and tables. HTML also supports lists, forms, and special characters represented by entity references.

Uploaded by

wasiu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

HTML Language & Syntax Cheat Sheet

Rule #1: HTML works with <TAGs>. Most tags have an opening <TAG> and a closing </TAG>
Rule #2: Some tags only need one tag (no opening and closing tags) such as <BR/> (Notice the position of the / character)
Rule #3: You can embed tags but make sure you respect the order for opening/closing the tags.
Rule #4: Each tag can be customised using attributes: <BODY bgcolor=“#FF0000”> (BGColor is an attribute of the BODY tag)
Variable Assignment
Basic HTML Structure Adding Hyperlinks
<HTML>
<HEAD> <a href=“http://www.google.com“>Google</a>
<TITLE>My website title</TITLE>
</HEAD> Using Tables
<BODY>
Welcome to my first webpage... <TABLE WIDTH=“100%” BORDER=“1” CELLPADDING=“5”
</BODY> CELLSPACING=“0”>
</HTML> <TR>
<TD VALIGN=“TOP”>Row 1, Column 1</TD>
Body Attributes <TD VALIGN=“TOP”>Row 1, Column 2</TD>
</TR>
bgcolor=“#FF00FF” Background Colour <TR>
leftmargin=“10” <TD VALIGN=“TOP”>Row 2, Column 1</TD>
Side Margin Size in Pixels
<TD VALIGN=“TOP”>Row 2, Column 2</TD>
topmargin=“10” Top Margin Size in Pixels </TR>
background=“myPic.png” Background Image </TABLE>

e.g. <body bgcolor=“#FF0000”> Lists


List using bullet points:
Basic Tags to Format Text <UL>
<LI>First Bullet Point</LI>
<H1> ... </H1> Heading (h1, h2, up to h6) <LI>Second Bullet Point</LI>
</UL>
<B> ... </B> Bold Text
<I> ... </I> Italic Text Numbered List: Use the same code as above but replace
the <UL> tag with <OL>
<U> ... </U> Underline Text
<CENTER> … </CENTER> Center Text Form Controls
<FONT color=“#FF0000”>... </FONT> Font Color
<FONT face=“Arial”> … </FONT> Font Type <FORM action=“mailto:info@mail.com” method=“POST”>
<FONT size=“5”>... </FONT> Font Size (from 1 to 6) <INPUT type=“text” size=“10” value=“Hello” name=”txt”>
<P> … </P> New Paragraph
<BR/> Break Line (New line) <SELECT name=“comboBox”>
<HR/> Horizontal Line <OPTION value=“1” SELECTED>Option 1</OPTION>
<OPTION value=“2”>Option 2</OPTION>
Inserting Pictures <OPTION value=“3”>Option 3</OPTION>
Step 1: Make sure you save the picture in a subfolder of </SELECT>
your website (e.g. called “Images”) <TEXTAREA rows=“50” cols=“5” name=”comments”>
Step 2: Use the IMG tag: Type a comment…</TEAXTAREA>
<IMG src=“Images/myImage.png”> <INPUT type=“checkbox” CHECKED name=”C”>Checkbox 1
<INPUT type=“checkbox” name=”C”>Checkbox 2
Step 3: Add some attributes if needed:
<INPUT type=“radio” CHECKED name=“RB”>Radio Button 1
URL or filename of image <INPUT type=“radio” name=“RB”>Radio Button 2
src=“myPic.png”
(required!)
<INPUT type=“password” name=”pwd”>
alt=“Some text here” Alternate Text (required!)
Image alignment within <INPUT type=“submit” value=“Send”>
align=“right” <INPUT type=“reset” value=“Clear”>
surrounding text
width=“300” Image width (in pixels or %) </FORM>
height=“300” Image height (in pixels or %)
border=“1” Border thickness (in pixels) Special Characters
Space above and below image
vspace=“10”
(in pixels) Space < > © & £
Space on either side of image &nbsp; &lt; &gt; &copy; &amp; &pound;
hspace=“10”
(in pixels)

© 101 Computing – www.101Computing.net

You might also like