Scribd
Upload
110 views

Tag Name Code Example Browser View: (Tip) Visit Our Site (Tip)

The document contains a chart summarizing HTML tags, their names, code examples, and how they would appear in a browser. It lists tags for text styling, headings, lists, forms, images, and more. Each tag is accompanied by a brief description and visual example of how it would structure or present content on a webpage.

Uploaded by

Anonymous IhmXvCHj3c
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
110 views

Tag Name Code Example Browser View: (Tip) Visit Our Site (Tip)

The document contains a chart summarizing HTML tags, their names, code examples, and how they would appear in a browser. It lists tags for text styling, headings, lists, forms, images, and more. Each tag is accompanied by a brief description and visual example of how it would structure or present content on a webpage.

Uploaded by

Anonymous IhmXvCHj3c
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML Tags Chart

Tag Name Code Example Browser View

<!-- comment <!--This can be viewed in the HTML part of a document--> Nothing will show (Tip)

<A HREF="http://www.yourdomain.com/index.html">Visit Our


<A - anchor Visit Our Site (Tip)
Site</A>

<B> bold <B>Example</B> Example

<BIG> big (text) <BIG>Example</BIG> Example (Tip)

<BODY> body of document <BODY>The content of your page</BODY> Contents of your webpage (Tip)

The contents of your page


<BR> line break The contents of your page<BR>The contents of your page
The contents of your page

<CENTER> center <CENTER>This will center your contents</CENTER>


This will center your contents

<DL>
<DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
<DD> definition description
<DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>

<DL>
<DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
<DL> definition list
<DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>

<DL>
<DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
<DT> definition term
<DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>

This is an Example of using the emphasis


<EM> emphasis This is an <EM>Example</EM> of using the emphasis tag
tag

<EMBED src="yourfile.mid" width="100%" height="60"


<EMBED> embed object
align="center"> (Tip)

<EMBED src="yourfile.mid" autostart="true" hidden="false"


Music will begin playing when your page is
<EMBED> embed object loop="false">
loaded and will only play one time. A
<noembed><bgsound src="yourfile.mid" loop="1"></noembed>
control panel will be displayed to enable
your visitors to stop the music.

<FONT> font <FONT FACE="Times New Roman">Example</FONT> Example (Tip)

<FONT> font <FONT FACE="Times New Roman" SIZE="4">Example</FONT> Example (Tip)

<FONT FACE="Times New Roman" SIZE="+3"


<FONT> font Example (Tip)
COLOR="#FF0000">Example</FONT>

<FORM action="mailto:[email protected]"> Name: (Tip)


Name: <INPUT name="Name" value="" size="10"><BR>
<FORM> form Email: <INPUT name="Email" value="" size="10"><BR>
Email:
<CENTER><INPUT type="submit"></CENTER>
</FORM> Submit Query

<H1> heading 1 <H1>Heading 1 Example</H1>


Heading 1 Example

<H2> heading 2 <H2>Heading 2 Example</H2>


Heading 2 Example

<H3> heading 3 <H3>Heading 3 Example</H3>


Heading 3 Example

<H4> heading 4 <H4>Heading 4 Example</H4>


Heading 4 Example

<H5> heading 5 <H5>Heading 5 Example</H5>


Heading 5 Example

<H6> heading 6 <H6>Heading 6 Example</H6>


Heading 6 Example

<HEAD> heading of document <HEAD>Contains elements describing the document</HEAD> Nothing will show

Contents of your webpage (Tip)


<HR> horizontal rule <HR>
Contents of your webpage

Contents of your webpage


<HR> horizontal rule <HR WIDTH="50%" SIZE="3">
Contents of your webpage

<HR> horizontal rule <HR WIDTH="50%" SIZE="3" NOSHADE> Contents of your webpage
Contents of your webpage

<HR> Contents of your webpage


(Internet horizontal rule <HR WIDTH="75%" COLOR="#FF0000" SIZE="4">
Explorer) Contents of your webpage

<HR> Contents of your webpage


(Internet horizontal rule <HR WIDTH="25%" COLOR="#6699FF" SIZE="6">
Explorer) Contents of your webpage

<HTML><HEAD><META><TITLE>Title of your
<HTML> hypertext markup language webpage</TITLE></HEAD><BODY>Webpage Contents of your webpage
contents</BODY></HTML>

<I> italic <I>Example</I> Example

<IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0"


<IMG> image
ALT="a sentence about your site">
(Tip)

Example 1:
Example 1: (Tip)
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT> input field
<INPUT type="text" size="10" maxlength="30">
Submit
<INPUT type="Submit" VALUE="Submit">
</FORM>

Example 2:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi"> Example 2: (Tip)


<INPUT> <INPUT type="text" STYLE="color: #FFFFFF; font-family:
input field
(Internet Explorer) Verdana; font-weight: bold; font-size: 12px; background-color:
Submit
#72A4D2;" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>

Example 3: (Tip)
Example 3:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


<TABLE BORDER="0" CELLSPACING="0"
<INPUT> input field CELLPADDING="2"><TR><TD BGCOLOR="#8463FF"><INPUT
type="text" size="10" MAXLENGTH="30"></TD><TD
BGCOLOR="#8463FF" VALIGN="Middle"> <INPUT type="image"
name="submit" src="yourimage.gif"></TD></TR> </TABLE>
</FORM>

Example 4: (Tip)
Example 4:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


Enter Your Comments:<BR>
<INPUT> input field <TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20
MAXLENGTH=100></TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">
<INPUT type="Reset" VALUE="Clear">
</FORM>
Submit Clear

Example 5:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


<CENTER>
Select an option:
<SELECT> Example 5: (Tip)
<OPTION >option 1
<INPUT> input field <OPTION SELECTED>option 2 option 2
<OPTION>option 3 Select an option:
<OPTION>option 4
<OPTION>option 5 Submit
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit" VALUE="Submit"></CENTER>
</FORM>

Example 6: (Tip)

Select an option:
Example 6:
Option 1
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Select an option:<BR>
<INPUT type="radio" name="option"> Option 1 Option 2
<INPUT type="radio" name="option" CHECKED> Option 2
<INPUT type="radio" name="option"> Option 3 Option 3
<BR>
<INPUT> input field
<BR> Select an option:
Select an option:<BR>
<INPUT type="checkbox" name="selection"> Selection 1
Selection 1
<INPUT type="checkbox" name="selection" CHECKED> Selection
2
<INPUT type="checkbox" name="selection"> Selection 3 Selection 2
<INPUT type="Submit" VALUE="Submit">
</FORM> Selection 3

Submit

<LI> list item Example 1: Example 1: (Tip)


 List item 1
<MENU>
<LI type="disc">List item 1
o List item 2
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>  List item 3

Example 2:
Example 2:
<OL type="i">
<LI>List item 1
<LI>List item 2 i. List item 1
<LI>List item 3 ii. List item 2
<LI>List item 4 iii. List item 3
</OL>
iv. List item 4

Visit our <A


<LINK> link Visit our site
HREF="http://www.yourdomain.com/">site</A>

<MARQUEE>
<MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2"
(Internet scrolling text ? Example (Tip)
width="100%">Example Marquee</MARQUEE>
Explorer)

 List item 1
<MENU>
<LI type="disc">List item 1
<MENU> menu <LI type="circle">List item 2 o List item 2
<LI type="square">List item 3
</MENU>
 List item 3

<META name="Description" content="Description of your site">


<META> meta <META name="keywords" content="keywords describing your Nothing will show (Tip)
site">

<META HTTP-EQUIV="Refresh"
<META> meta Nothing will show (Tip)
CONTENT="4;URL=http://www.yourdomain.com/">

<META> meta <META http-equiv="Pragma" content="no-cache"> Nothing will show (Tip)

<META> meta <META name="rating" content="General"> Nothing will show (Tip)

<META> meta <META name="ROBOTS" content="ALL"> Nothing will show (Tip)

<META> meta <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> Nothing will show (Tip)

Example 1:
Example 1:
<OL> 1. List item 1
<LI>List item 1 2. List item 2
<LI>List item 2 3. List item 3
<LI>List item 3 4. List item 4
<LI>List item 4
</OL>
<OL> ordered list Example 2:
Example 2:

a. List item 1
<OL type="a"> b. List item 2
<LI>List item 1 c. List item 3
<LI>List item 2
<LI>List item 3
<LI>List item 4 d. List item 4
</OL>

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">


<CENTER>
Select an option:
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2 Select an option: (Tip)
<OPTION> listbox option <OPTION>option 3 option 2
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>

<P> paragraph This is an example displaying the use of the paragraph tag. <P> This is an example displaying the use of
This will create a line break and a space between lines. the paragraph tag.

Attributes:
This will create a line break and a space
Example 1:<BR> between lines.
<BR>
<P align="left"> Attributes:
This is an example<BR>displaying the use<BR>of the paragraph
tag.<BR><BR></P> Example 1:
Example 2:<BR>
<BR> This is an example
<P align="right"> displaying the use
This is an example<BR> of the paragraph tag.
displaying the use<BR>
of the paragraph tag.<BR> Example 2:
<BR></P>
Example 3:<BR> This is an example
<BR> displaying the use
<P align="center"> of the paragraph tag.
This is an example<BR>
displaying the use<BR>
of the paragraph tag. </P> Example 3:

This is an example
displaying the use
of the paragraph tag.

<SMALL> small (text) <SMALL>Example</SMALL> Example (Tip)

<STRONG> strong emphasis <STRONG>Example</STRONG> Example

Example 1:

<TABLE BORDER="4" CELLPADDING="2"  CELLSPACING="2"


WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR> Example 1: (Tip)
</TABLE> Column 1 Column 2

Example 2: (Internet Explorer)

<TABLE BORDER="2" BORDERCOLOR="#336699"


Example 2: (Tip)
CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TABLE> table Column 1 Column 2
<TD>Column 2</TD>
</TR>
</TABLE>

Example 3: Example 3: (Tip)

<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%">


<TR> Column 1 Column 2
<TD BGCOLOR="#CCCCCC">Column 1</TD> Row 2 Row 2
<TD BGCOLOR="#CCCCCC">Column 2</TD>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
</TABLE>

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2"


WIDTH="100%">
<TR>
<TD> table data <TD>Column 1</TD>
Column 1 Column 2
<TD>Column 2</TD>
</TR>
</TABLE>
Column 1 Column 2 Column 3
<DIV align="center">
<TABLE> Row 2 Row 2 Row 2
<TR> Row 3 Row 3 Row 3
<TH>Column 1</TH> Row 4 Row 4 Row 4
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
<TH> table header
<TR>
<TD>Row 3</TD>
<TD>Row 3</TD>
<TD>Row 3</TD>
</TR>
<TR>
<TD>Row 4</TD>
<TD>Row 4</TD>
<TD>Row 4</TD>
</TR>
</TABLE>
</DIV>

Title of your webpage will be viewable in


<TITLE> document title <TITLE>Title of your webpage</TITLE>
the title bar. (Tip)

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2"


table row WIDTH="100%">
<TR>
<TR> <TD>Column 1</TD> Column 1 Column 2
<TD>Column 2</TD>
</TR>
</TABLE>
<TT> teletype <TT>Example</TT> Example

<U> underline <U>Example</U> Example

<UL> unordered list Example 1:<BR> Example 1:


<BR>
<UL>
<LI>List item 1  List item 1
<LI>List item 2  List item 2
</UL>
<BR>
Example 2:<BR>
<UL type="disc"> Example 2:
<LI>List item 1
<LI>List item 2
<UL type="circle">  List item 1
<LI>List item 3
 List item 2
<LI>List item 4
o List item 3
</UL>
</UL>
o List item 4
mysql> (name = "Bugs Bunny") ORDER BY
Continuation…….MySQL mysql> phone_number;
4. Deletion
One can also delete records inserted into the table. This is accomplished through
the DELETE command. Result:
All records containing the name "Bugs Bunny" will be displayed to the screen,
mysql> DELETE FROM test ordered in respect to the phone_number.
mysql> WHERE (name = "Bugs Bunny");
Search functions
MySQL offers the user the ability to perform both general and specific searches
Result: on data.
This would result in the deletion of all records within the table test containing
name "Bugs Bunny". mysql> SELECT * FROM test WHERE
Another example: mysql> (name LIKE "%gs Bunny");

mysql> DELETE FROM test


mysql> WHERE (phone_number = 5554321); Result:
All records containing the partial string "gs Bunny" will be displayed to the
screen. This would include such names as: "Bugs Bunny", "ags Bunny", "gs
Bunny", and "234rtgs Bunny".
Result: (Using the previously illustrated example) Notice that "LIKE" has been used instead of the equals sign (=). "LIKE" signifies
name Email phone that one is searching for an estimate of the data requested, and not necessarily
an exact copy.
Bugs Bunny [email protected] 5554331 The '%' sign could be placed anywhere within the string. The method in which
Bugs Bunny [email protected] 5554341 the Server searches for a string is dependent upon where one places the '%'
sign.
Bugs Bunny [email protected] 5554351
mysql> SELECT * FROM test WHERE
5. Modification mysql> (name LIKE "Bugs Bunny%");

MySQL also has the capability of modifying data already entered into the table.
This is accomplished through the UPDATE command. Result:
All records containing the partial string "Bugs Bunny" will be displayed to the
mysql> UPDATE test SET name = 'Daffy Duck' screen. This would include such names as: "Bugs Bunnys", "Bugs Bunnyyyy453",
mysql> WHERE name = "Bugs Bunny"; "Bugs Bunnytrtrtrtrtr", but not "gs Bunny".

Focused Search Results


One can also perform searches and display only certain columns.
name email phone
Daffy Duck [email protected] 5554331 mysql> SELECT name FROM test WHERE
mysql> (name = "Bugs Bunny");
Daffy Duck [email protected] 5554341
Daffy Duck [email protected] 5554351
Result:
6. Advanced MySQL Commands name

Logical Operations Bugs Bunny


MySQL includes full support of all basic logical operations.
Alter table
AND (&&) Another very important function of MySQL is the ability to modify previously
created tables. This is accomplished via the ALTER statement. This function
mysql> SELECT * FROM test WHERE allows one to add, modify, and delete columns, as well as rename the table,
mysql> (name = "Bugs Bunny") AND among other functions.
mysql> (phone_number = 5554321); Example: Rename the table

mysql> ALTER table test RENAME mytest;


Result:
All records containing the name "Bugs Bunny" AND the phone number '5554321'
will be displayed to the screen. Example: Add a column

OR ( || ) mysql> ALTER table mytest ADD birthday DATE;

mysql> SELECT * FROM test WHERE


mysql> (name = "Bugs Bunny") OR Example: Modify a column
mysql> (phone_number = 5554321);
mysql> ALTER table mytest CHANGE
mysql> name newname VARCHAR (25);
Result:
All records containing the name "Bugs Bunny" OR the phone number '5554321'
will be displayed to the screen. Example: Delete a column

NOT ( ! ) mysql> ALTER table mytest DROP newname;

mysql> SELECT * FROM test WHERE


mysql> (name != "Bugs Bunny"); Executing the above four functions would modify test, creating the following
table:

Result: mysql> TABLE mytest (


All records NOT containing the name "Bugs Bunny" will be displayed to the > email VARCHAR (25),
screen. > phone_number INT,
> ID INT AUTO_INCREMENT,
Order By > birthday DATE );

mysql> SELECT * FROM test WHERE


MySQL Tips and Functions

• Comparison operators
= Equals
< Less than
<= Less than or equal to
> column2');"Greater than
>= = column2');"Greater than or equal to
<> column2');"Not equal to
!= Not equal to
LIKE Compare strings

• Mathematical operators
() Use parentheses to force precedence
+ add
- subtract
* multiply
/ divide
% modulo

• Conditional operators
|| Logical "or"
| Bitwise "or"
OR Same as Logical "or"
&& Logical "and"
& Bitwise "and"
AND Same as Logical "and"

• Some Common Functions


CONCAT(str1,str2) Concatenates strings
DAYNAME(date) Returns the dayname for the given date
LAST_INSERT_ID( ) Returns the last record ID inserted
LENGTH(column) Returns the length of a string in characters
TRUNCATE(n,n) Returns stated number of decimal places
UNIX_TIMESTAMP( ) Returns the epoch

• Some Aggregate Functions


AVG(column) Average number from returned results
MAX(column) Returns the largest number from returned results
MIN(column) Returns the smallest number from returned results
SUM(column) Returns the sum of all returned results

You might also like