Essential HTML Tags and Commands Guide
Translated by
ScribdTranslationsEssential HTML Tags and Commands Guide
Translated by
ScribdTranslationsHTML COMMANDS
(Prof. Ivaldi Giuliano)
Fundamental TAG
<HTML> </HTML> start and end of HTML document
<HEAD> </HEAD> start and end header
<TITLE> </TITLE> start and end title placed on the 'title bar' of Internet Explorer useful for making oneself
"visible" to search engines and therefore must be included in every HTML document that is created.
<BODY> </BODY> start and end of the site body
<!-- commento --> code to insert a comment
Text formatting
<H1> </H1> start and end level 1 header (up to level 6 is possible)
<P> , inizio paragrafo saltando una riga
<P ALIGN="type"> start paragraph with alignment type (LEFT, CENTER, RIGHT)
<BR> paragraph start without skipping a line
<BR CLEAR=ALL> , paragraph interruption
<PRE></PRE> It allows you to replicate every space and every line break typed in the programming.
even in the browser window
<B> </B> , bold start and end
<I> </I> , italic start and end
<U> </U> start and end of underline
<CODE> </CODE> , start and end character typewriter
<CENTER> </CENTER> start and end centered alignment
<SUP> </SUP> , beginning and end quotation mark
<SUB> </SUB> , start and end subscript
<STRIKE> </STRIKE> striked text start and end
Oss :
• / indicates the end of a tag
• Empty lines in Notepad are not displayed by the browser (if you want to consider them, you need to use the <PRE> tag)
• the options (e.g. BGCOLOR) are added to the tags (e.g. BODY) and modify their effect
• to add special characters, use the format: &#ASCII-code
• Before closing the site, add the date, time of the last update, and the name and surname of the site owner.
with an email address possibly in the form of a link
HR Properties
<HR> draw a line and insert a page break
WIDTH="number" , width; number format: “num%” in relation to the window,
n° pixel (max 550-600 pixel)
ALIGN="type" , alignment (type: LEFT, CENTER, RIGHT)
SIZE="number" , row size
COLOR=”#cod colore” , colorazione
Ex.
<HR WIDTH="50%" ALIGN="left" SIZE="2" COLOR="blue">
inserts a horizontal line with a width of '50%' on the size of the window, aligns it to the left with font size
"2" and colors it blue
1
BODY Property
BGCOLOR="#cod color" , color the background with "color code"
BACKGROUND=”percorso/nome immagine” set 'image name' as background
#color code , color all the text of the site with
LINK="#color code" , unhighlighted link
ALINK=”#cod colore” highlighted link
VLINK=”#cod colore” visited link
For example.
<BODY BGCOLOR="#0000FF"> color the background blue
<BODY BACKGROUND="images/[Link]"> , set "[Link]" as background
<BODY TEXT=”YELLOW”> color all the text of the site yellow
<BODY BGCOLOR="WHITE" LINK="#0000FF" ALINK="#FF0000" VLINK="#00FFFF">
colora di bianco lo sfondo e dà i colori ai Link normali , quelli evidenziati (Attivi) e quelli Visitati (i colori indicati sono
the standard blue, red and green ones)
FONT Properties
COLOR="#cod color" color the following text with "#color code"
SIZE="n° size" , change the size of the following text
FACE="font type" modify the font of the following text
Font type Microsoft: Arial, sans-serif (sans-serif means 'without serifs')
Verdana, sans-serif
Trebuchet MS,sans-serif
Georgia, serif (serif means "with grace")
(if I want to use fonts in a document I need to use style sheets)
<SMALL> </SMALL> , start and end small character
Es.
<FONT COLOR=”Yellow”> </FONT> start and end text coloring with yellow
<FONT SIZE=”6”> </FONT> start and end modify font dimensions
<FONT FACE="Georgia,serif" SIZE="5"> set the font type and its size
COLOR CODE
Colors can be entered by their code or their name in English.
WHITE BLACK RED GREEN BLUE
#FFFFFF #000000 #FF0000 #00FF00 #0000FF
MAGENTA CYAN YELLOW AQUAMARINE DARK GREEN
#FF00FF #00FFFF #FFFF00 #70DB93 #2F4F2F
LIGHT BLUE LIGHT GREEN ORANGE PINK SUMMER SKY
#C0D9D9 #32CD32 #E47833 #BC8F8F #236B8E
TURQUOISE VIOLET thistle GOLDENROD MAROON
#ADEAEA #4F2F4F #D8BFD8 #DBDB70 #8E236B
LIGHTEST GREY LIGHTER GREY MEDIUM GREY DARKER GREY DARKEST GREY
#DDDDDD #A8A8A8 #545454 #454545 #333333
2
Command lists
<UL> </UL> start and end of unordered list
<OL> </OL> start and end of ordered list
<MENU> </MENU> , start and end of a list of brief entries, which generally occupies a single line,
displayed in a much more compact way than in the instruction <UL>
<DIR> </DIR> , beginning and end of a very brief list of items, for example file names,
possibly displayed in multiple columns
<LI> identify a voice from the list
<UL TYPE="bullet point type"> defines the type of bullet points (types: SQUARE, CIRCLE, DISC which is the default)
that, however, are not part of the official HTML standard
<OL TYPE="ordered list" START="starting element">
def. il tipo di ordinamento dell’elenco (TYPE) e da quale elemento dell’ordinamento partire (START)
sorting type: 'i' lowercase roman numerals
I uppercase Roman numerals
the letter 'a' of the lowercase alphabet
"A" uppercase letter of the alphabet
"1" number (default)
just enter the element to start from
<DL> </DL> start and end of list type glossary
<DT> Termine <DD> Definizione identifying the term and the definition of the word
Ex.
Fundamental components of a computer
<OL TYPE="I">
CPU
<UL>
CU
ALU
</UL>
Central memory
<UL>
RAM
ROM
</UL>
Input/Output Devices
<UL>
Input Devices
Output Devices
Input/Output Devices
<UL>
Mass storage (Hard Disk, Floppy Disk, CD, DVD)
</UL>
</UL>
</OL>
Glossary
<DL>
<DT>CPU <DD> Central Processing Unit
CU Control Unit
<DT>ALU <DD> Arithmetic Logic Unit
The glossary continues...
</DL>
3
Anchor Commands or Links
<A HREF="[Link] Link name </A>
create a link named 'Link Name' that points to the address contained in the tag
email_address
create a link to the email address contained in the tag (when clicked, an email will open with
the destination address already prepared with that indicated in the tag
<A HREF="path/[Link]"> Link name </A>
create a link named 'Link Name' that points to the html page contained in the tag
<A HREF="path/audio_file_name"> Link name </A>
create a link named "Link Name" that points to the audio file contained in the tag
Note: if the link is internal to the same page, the syntax will be as follows
<A HREF="#anchor_name_to_reach"> Link name </A>
and where you want to insert the anchor, which will not be displayed, you will type
<A NAME="anchor_name"></A>
if the attribute is added to the <A HREF…> tag -> TARGET="target_name"
The 'content' that the link points to will be loaded in the 'target_name' frame and not in the frame that contains the link itself:
this can be useful when using a fixed menu frame and varying the remaining part of the page (for
I will frame the lighter paragraph related later.
Ex.
<A HREF="[Link] Virgilio search engine </A>
create a link named 'Virgilio search engine' that points to the [Link]
<A HREF=”mailto: mariorossi@[Link]”> mariorossi@[Link] </A>
create a link to Mr. Rossi's email address (when clicked, it will open an email with
the destination address of Mr. Rossi
<A HREF="[Link]" TARGET="right"> Updates </A>
In this example, it is assumed that two frames have been created, one named 'left' in which the link is inserted and one of
name 'right' where the content of [Link] will end up
<A HREF="[Link]"> Volare </A>, creates a link named "Volare" that points to the song volare
<A HREF="#section_reading"> Link name </A>
...HTML code...
<A NAME="reading_section"></A>
4
IMG Properties - Image Commands
<IMG>
SRC="path/image_name" indicate which image should be uploaded
ALT="image title" it will display image title during loading, also useful for
index the image and make it "visible" to search engines
WIDTH="n° pixel" , image width
HEIGHT="n° pixel" image height
HSPACE="n° pixel" , horizontal space left around the image
VSPACE="pixel number" , vertical space left around the image
ALIGN="type" , allineamento (tipo: TOP, MIDDLE, BOTTOM, LEFT, RIGHT)
Oss:
• Internet Explorer: the properties of the image can be obtained by right-clicking on the image.
Netscape: displays the dimensions of the image when loaded in the browser window.
The dimensions in pixels are displayed on the menu bar.
• <BR CLEAR=ALL> paragraph interruption (e.g. what follows is positioned below the image and not to the side)
Es.
<IMG SRC=”images/[Link]” ALIGN=”right” ALT=”Titolo dell’immagine”>
insert the image '[Link]' present in the 'images' folder and align it to the right of the following text, introducing
a brief description during the image loading phase
Mapped images
They are links represented by graphic images and are a useful aid to simple text links, which are still useful for making oneself
"visible" to search engines.
To create them, follow these steps:
- build the image-link bar with a graphics program (e.g. paint) and note the coordinates in pixels provided
from the program itself, the angles at the top left and bottom right of each image inserted in the bar just
created, which must start from the coordinates 0,0
- add the following html code to the page/file where you want to create the link-bar:
immediately after <TITLE> insert
<MAP NAME="barra">
<AREA SHAPE="RECT" COORDS="49,15,179,130" HREF="[Link]">
<AREA SHAPE="RECT" COORDS="211,15,345,130" HREF="[Link]">
<AREA SHAPE="RECT" COORDS="380,15,510,130" HREF="[Link]">
<AREA SHAPE="RECT" COORDS="544,15,676,130" HREF="[Link]">
...other coordinates and other connections...
</MAP>
where you want to insert the bar on the page, insert
<IMG SRC="images\link_mappati.jpg" ALIGN="CENTER" WIDTH="722" HEIGHT="120" USEMAP="#barra">
Oss : the COORDS coordinates are examples like the HREF html files, the name and path of the bar
"images\linked_mapped.jpg" and all the values of the other attributes.
The name indicated by USEMAP must match the one given to the bar in <MAP NAME>, to which '#' is added in front.
the other shape options besides rect are circle and polygon
By inserting the option ALT="name" before coords, a name is given to the image that will be displayed when hovering over it.
with the mouse
5
STYLE Properties - Style sheets
They are used to define styles (like those in Word)
<STYLE TYPE="text/css">
<!-
.style_name { proprietà1: modifica proprietà1; proprietà2: modifica proprietà2;…}
->
</STYLE>
Example.
<STYLE TYPE="text/css">
<!-
character The provided text appears to be incomplete or incorrectly formatted. Please provide a valid text for translation.
left: 5em }
->
</STYLE>
Oss :
• The previous commands should be placed in the header (HEAD)
• There needs to be a tabulation between the style_name and the curly brace.
• The properties entered in the command are examples
• The first and last line are used to hide the command from older web browsers.
• To invoke the defined style: <P CLASS="name_style"> , Is. <P CLASS="character">
In a table, it will be called in the <TR> and <TD> tags.
If one must use a style only in a certain context (e.g., within a sentence), the following command can be used:
Text to modify
Ex.
Text to be modified
6
TABLE Properties - Table Commands
<TABLE> </TABLE> , start and end of table management
BGCOLOR="#cod color" defines the background color of the table
BORDER="number" defines the table border dimensions, "0" to make it
invisible table
WIDTH="number" defines the width of the table
number format : “num%” in relation to the window or
"n° pixel" (max 550-600 pixels)
The second format allows for fixing the dimensions.
HEIGHT=”numero” indicates the height at which the table will be placed
VALIGN="type" vertical alignment (types: TOP, MIDDLE, BOTTOM)
ALIGN="type" horizontal alignment (types: LEFT, RIGHT, CENTER)
CELLPADDING="n° pixel" indicates the distance from the edges of the content
CELLSPACING="n° pixel" indicates the distance that should be between the edges of the cells
COLSPAN="number" allows you to create cells that span multiple columns
ROWSPAN="number" allows you to create cells that occupy multiple rows
<TR> row formatting (Table Row)
<TD> cell formatting (Table Data)
Ex.
• <TABLE WIDTH="50%" HEIGHT="100" BORDER="2" BGCOLOR="yellow">
<TR VALIGN="center" ALIGN="center">
<TD><FONT SIZE="4" FACE="Georgia,serif" COLOR="blue"> Table text </FONT></TD>
</TR>
</TABLE>
create a table with a width of '50%' of the window size, height '100', border '2' and background color 'yellow' then
format the rows and their alignment with <TR> and finally format the cells with the <TD> tag setting the font of the characters
a “Georgia,serif” di dimensioni “4” e colore “blue”
• <TABLE BORDER="2" WIDTH="100%" CELLPADDING="5" CELLSPACING="10" BCOLOR="#CCEEDD">
<TR>
cell text 1, row 1
<TD VALIGN="BOTTOM" ALIGN="RIGHT" WIDTH="150" ROWSPAN="2">
cell text 2, row 1
</TR>
<TR>
cell text 1, row 2
</TR>
<TR>
cell text 1, row 3
</TR>
</TABLE>
Available properties <TABLE> <TR> <TD>
BGCOLOR Yes If Yes
BORDER Yes No No
WIDTH Yes No If
HEIGHT If If Yes
VALIGN No If Yes
ALIGN No Yes Yes
CELLPADDING Yes No No
CELLSPACING Yes No No
COLSPAN No No If
ROWSPAN No Yes No
7
FRAME property
Frames require a dedicated file (e.g. [Link])
<FRAMESET ROWS="n° pixel, *, *,…" indicates the frame size in number of pixels in height and then divides it
remaining part of the page in as many equal parts as there are asterisks
<FRAMESET COLS="number pixel, *, *,…" indicates the frame size in pixel width and then divides
the remaining part of the page into as many equal parts as there are asterisks
</FRAMESET> , it is inserted at the end of the frame definition
<FRAME> , tag in which to include the following properties
SRC="page_name.html" indicate which html page should contain the frame
NAME=”nome_frame” , useful if you need to connect the frames
MARGINWIDTH="n° pixels" vertical edge distance from the text
MARGINHEIGHT="n° pixel" horizontal edge distance from the text
SCROLLING=”AUTO” defines whether scroll bars should be added
(only AUTO, YES, NO)
NORESIZE to prevent the user from resizing the frame
FRAMEBORDER="number" indicates the size of the frame border ("0", no border)
BORDERCOLOR="#color code" adds color to the possible border of the frame
<NOFRAMES> </NOFRAMES> start and end command to manage browsers that do not support frames
(content in frameset) useful for making oneself "visible" to search engines
providing a complete description of the site and a list of the links of the
two main pages
TARGET=”nome_bersaglio” this attribute already seen in the "link" section allows you to select the
target frame (-> "target_name") of a certain link
<BASE TARGET="name_frame"> , added in the <HEAD> section creates a default destination,
"name_frame", for all the links present on the HTML page without
doverla più specificare per ogni collegamento a meno che i link non
they must aim at a different frame than the default one
TARGET=”_top” to be included in all links coming from the site if you want to eliminate the frameset
Oss :
• The FRAMESET tag must contain a number of FRAME tags equal to the number of frames defined.
• If I want to define frames within frames, simply replace the FRAME tag with another FRAMESET tag that will be equipped with.
your return of tag FRAME
• Naturally, the SRC property only works if the files indicated by 'page_name' exist.
Ex.
<HTML>
<HEAD><TITLE>Prova comandi frame</TITLE></HEAD>
<FRAMESET COLS="200, *">
<FRAME SRC="[Link]" NAME="left" SCROLLING="AUTO" NORESIZE FRAMEBORDER="1">
<FRAME SRC="[Link]" NAME="right" SCROLLING="AUTO" NORESIZE FRAMEBORDER="1">
</FRAMESET>
</HTML>
8
FORM properties
<FORM> </FORM> start and end management form
ACTION=”mailto: indirizzo_e-mail” indicate to the browser at which address to send the form
METHOD=”POST” indicates the browser to send the form via email
<INPUT> inserts objects (text boxes, buttons, ...) into the form
TYPE="text" inserts a text box
TYPE="password" password text box (with asterisks)
TYPE="radio" , insert a radio button (box with a dot)
TYPE="checkbox" insert a checkbox
TYPE="submit" , it adds an insert button
TYPE="reset" , it adds a reset button
NAME="name" , text box name
SIZE="num_characters" dimensions width box in number of characters
VALUE=... value returned by the selected object on the form
CHECKED for radio button and checkbox selected by default
<SELECT NAME="name"> dropdown menu management
Option value "1°name">1°text to insert</option>
<OPTION VALUE=”2°nome” SELECTED>2°testo da inserire</OPTION>
……
</SELECT>
<TEXTAREA> </TEXTAREA> create a scrollable text box (e.g. comments)
NAME=”nome” text box name
ROWS=”n° righe” defines the number of lines
COLS=”n° colonne” defines the number of columns
WRAP , enable automatic line break
Ex.
<FORM ACTION="[Link] METHOD="POST">
<PRE>
Nome : <INPUT TYPE=”text” NAME=”nome”>
Sex : Male <INPUT TYPE='radio' NAME='gender' VALUE='male'>
Female<INPUT TYPE="radio" NAME="gender" VALUE="female">
Email : <INPUT TYPE=”text” NAME=”email”>
Comments: <TEXTAREA NAME="comments"></TEXTAREA>
</PRE>
</FORM>
It should be noted that the labels of the text boxes Name, Email, and Comments will appear, thanks to the <PRE> command, equal
appear on the page displayed by the browser
9
The META tags, or how to make yourself visible to search engines
In addition to the tips mentioned above, to make oneself visible to search engines, META tags can be used. First, one must decide which ones to use.
these are the keywords of the site and try to verify their use on the Internet through one of the designated sites for this purpose (e.g.
[Link]). After deciding which keywords to use, you can insert them into the site via the META tag that will be
transcribed in the index page immediately after <TITLE> as follows:
Insert the keywords here, separated by commas.
Additionally, a second META tag will be included with a brief description of the site (max 200 characters)
<META NAME = ”description” CONTENT = “Descrizione sintetica max 200 caratteri”>
This work can be repeated for all pages of the site, with different keywords and descriptions.
Experienced Users: Some simple and useful JAVASCRIPT commands
What is Javascript?
JavaScript offers a way to further improve the design and functionality of web pages.
First of all, one must be careful not to confuse Java, a programming language, with JavaScript, a language of
scripting; too often, in fact, the two terms are used interchangeably. Java was developed by Sun Microsystems as
platform-independent programming language for computers, for creating small applications, or 'applets', that
They could both be part of a webpage and be a standalone desktop program. Java applets are like small programs.
independent, which can be used without seeing them or worrying about them.
Originally called 'LiveScript', JavaScript was developed by Netscape as something very different. It was
renamed because of the structural similarities with the Java programming language. To create JavaScript, you just need to type the
your embedded commands in your HTML and the browser follows the commands while trying to format the web page.
Simple commands
• Make an "alert" pop-up appear on a link
link text
• Modify the message associated with a link displayed in the status bar
<a href="[Link]" onMouseOver="[Link]='message text
link text
oss : The two events onClick and onMouseOver can be nested within the same HREF tag.
#dummy_anchor it is a fictional anchor that must be inserted just above the relevant html line,
to prevent the browser from jumping to an unwanted page
• Open an image in another window
<a href="#dummy_anchor" onClick="[Link]('file_name_img.ext', 'window_name', 'toolbar=no,
directories=no, location=no, status=no, menubar=no, resizable=no, scrollbars=no,
width=dimXXpixel, height=dimYYpixel,
my image
oss : toolbar=yes/no display the browser buttons (forward, back, home, print, etc)
address display the field that shows the URL for the current window
directories display the directory buttons of other web browsers
status display the browser toolbar at the bottom
menubar display the menu bar of the web browser
resizable allows users to change the window size
scrollbars provides scroll bars if the content is wider than the window
width=XX specify the window width in pixels
height=YY specify the height of the window when it is opened, in pixels
screenX, screenY, left and top fix the top left corner of the window
screenX, screenY only work for Netscape browser version 4.0
left and top only work for Internet Explorer version 4.0
10