html glosář značek. html–creating signs {hypertext markup language} document headding dokument...

36
HTML HTML Glosář značek Glosář značek

Upload: beatrix-hunter

Post on 03-Jan-2016

228 views

Category:

Documents


4 download

TRANSCRIPT

HTMLHTML

Glosář značekGlosář značek

HTML–creating signsHTML–creating signs

<HTML> {hypertext markup language}

<HEAD> document headding

<TITLE> dokument title

<BODY> dokument body

<META> inserting metainformation

Principal shape of dokumentPrincipal shape of dokument

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>Name of dokument</TITLE>

</HEAD>

<BODY>

Dokument body

</BODY>

</HTML>

Dokument bodyDokument body

<BODY>BACKGROUND picture behind

BGCOLOR color behind

TEXT color of normal text

LINK color of reference text

VLINK color of viewed text

ALINK color of active reference

[#rrggbb | name]

MetainformationMetainformation

<META>HTTP-EQUIV additional information in

head line

NAME name

CONTENT content<meta http-equiv="Content-type" content="text/html;charset=iso-8859-2">

<!-- --> comments

Page creating signsPage creating signs

<P> {paragraph} paragraph

<BR> {line break} brake row

<HR> {horizontal rule} horizontal rule

<H1> - <H6> {heading} heading

<A> {anchor} odkaz

Formát odstavceFormát odstavce

<P ALIGN=> align [right | center | justify]

<BR CLEAR=> cleaning around [all | left | right]

<CENTER> centering

<PRE> previously formated text

<DIV> contejner for objects

<BLOCKQUOTE> tab spacing

Horizontal rulerHorizontal ruler

<HR>SIZE thickness

WIDTH width on the screen

ALIGN align

NOSHADE depress shadowing

COLOR color

ReferenceReference

<A>HREF reference on documents

NAME creating of document’s parts

TITLE helping text

ACCESSKEY access key

FormátováníFormátování

Fyzické Fyzické LogickéLogické

<FONT> direct correction of fontSIZE font size [ 1–7]

COLOR color [#rrggbb | name]

FACE font cut

<BASEFONT> assignement of character set

Physical formatingPhysical formating

<B> {bold} bold

<I> {italic} italic

<U> {underline} underline

<SUP> {superscript} superscript

<SUB> {subscript} subscript

<TT> {teletype} teletype

Logické formátováníLogické formátování

<EM> {emphasized} highliting

<STRONG> strong highliting

<CODE> code example

<KBD> keyboard access

ListsLists

<UL> {unordered list}

<OL> {ordered list}

<LI> {list item}

<DL> {definition list}

<DT> {definition term}

<DD> {def. description}

Example of listExample of list

<UL>

<LI>first item</LI>

<LI>second item

<OL>

<LI>first included item</LI>

<LI>second included item</LI>

</OL>

</LI>

</UL>

• První položka• Druhá položka

1. První vnořená položka

2. Druhá vnořená položka

Atributs of listsAtributs of lists

<UL>TYPE shape [circle, disc, square]

<OL>TYPE shape [1 | I | i | A | a]

START numbered from

<LI>VALUE numbered from this sign

PicturesPictures

<IMG>SRC picture URL

ALIGN assigned [left | middle | baseline | ...]

ALT information for text clients

BORDER frame of picture with reference

LOWSRC picture view

WIDTH, HEIGHT dimensions in pixels

VSPACE, HSPACE space around picture

Pictures with handlePictures with handle

<IMG USEMAP=> indication of the picture with handle

<MAP NAME=> areas declaration

<AREA> area definitionSHAPE [rect | circle | polygon]

COORDS coordinates

HREF reference

NOHREF there is no reference in the area

ALT help tex

Example of picture with handleExample of picture with handle

<IMG SRC=“picture.gif" USEMAP="#Mapa" WIDTH="35" HEIGHT="30">

<MAP NAME="Mapa">

<AREA SHAPE="circle" COORDS="10,10,5">

<AREA SHAPE="rect" COORDS="20,15,30,25">

</MAP>

TablesTables

<TABLE> table

<TR> {table row} row

<TH> {table heading} heading area

<TD> {table data} data area

Example of tableExample of table

<TABLE BORDER="1">

<TR>

<TD>first row, first column/TD>

<TD>first row, second column</TD>

</TR>

<TR>

<TD>second row, first column</TD>

<TD>second row, second column</TD>

</TR>

</TABLE>1. řádek, 1. sloupec 1. řádek, 2. sloupec

2. řádek, 1. sloupec 2. řádek, 2. sloupec

Table formatingTable formating

<TABLE>BORDER side of table

CELLSPACING size of spaces between cells

CELLPADDING distance from margin

WIDTH šířka

Table attributesTable attributes

<TABLE>, <TR>, <TD>, <TH>ALIGN horizontal [center | right]

VALIGN vertical [top | bottom | middle]

BGCOLOR color behind

<TD>, <TH>COLSPAN merging columns

ROWSPAN merging rows

RámyRámy

<FRAMESET> frames declarationROWS dividing of window into

rows

COLS [* | 200 | 20% | 3*]

<FRAME> definition of framesSRC source document of frame

NAME name of frame

<NOFRAMES> frame resistent clients

Example of document with Example of document with framesframes

<FRAMESET COLS="20%,*">

<FRAMESET ROWS="*,120">

<FRAME NAME="obsah" SRC=“content.html">

<FRAME NAME="logo" SRC="logo.html">

</FRAMESET>

<FRAME NAME="hlavni" SRC="title.html">

</FRAMESET>

<NOFRAMES><BODY>

Document for clients resisted to frames

</BODY></NOFRAMES>

Úpravy rámůÚpravy rámů

<FRAME>FRAMEBORDER frame border[yes | no | 0]

SCROLLING enable, cancel scrolling [yes | no | auto]

NORESIZE cancel change of size

MARGINHEIGHT

MARGINWIDTH

References to framesReferences to frames

<A TARGET=> target frame [jméno |_blank | _self | _parent | _top]

<BASE> base for referenceTARGET principal frame for reference

HREF base for reference to document

FormsForms

<FORM> form

<INPUT> entry field

<TEXTAREA> entry text area

<SELECT> menu

FormForm

<FORM>ACTION what to do with data of form

METHOD how to handle data [get | post]

ENCTYPE what kind of available data

TARGET target window

Example of formExample of form

<FORM ACTION="mailto.php" METHOD="post">

Name: <INPUT TYPE="text" NAME="jmeno">

E-mail: <INPUT TYPE="text" NAME="email">

Message: <TEXTAREA NAME="zprava"></TEXTAREA>

Pages with:<INPUT TYPE="radio" NAME=“I like" value=“Yes"> I like

<INPUT TYPE="radio" NAME=“I like" value=“No"> I dislike

<INPUT TYPE="submit" VALUE=“send">

</FORM>

Entries to formsEntries to forms

<INPUT TYPE=>TEXT, PASSWORD simple hidden text

CHECKBOX field for ticking

RADIO switch

HIDDEN hidden element

FILE sending of whole file

SUBMIT button for sending

RESET clear button

Attributes of entered dataAttributes of entered data

<INPUT>NAME name

VALUE value

SIZE size of entry field

MAXLENGTH maximal length of entry

CHECKED indicator of selection

DISABLED element not available for selection

READONLY element is not possible to change

Entry text areaEntry text area

<TEXTAREA>ROWS, COLS number of rows, columns

WRAP end of row [off | soft | hard]

<TEXTAREA WRAP="hard">

Text displayed in entry field

</TEXTAREA>

MenuMenu

<SELECT>NAME name of item

SIZE size of menu

MULTIPLE possibility to highlite (select) more items

<OPTION> item of menuSELECTED selected item

VALUE text sent by form

StylesStyles

<LINK REL="stylesheet" TYPE="text/css" HREF="styl.css">

<STYLE>P { margin-bottom: 0; }

</STYLE>

<DIV CLASS="citat">

<P STYLE="text-indent: 10;">

Example of stylesExample of styles

P { text-align: justify; }

A { text-decoration: none; }

A:hover { color: Red; }

.citat, .adresa { font-size: 10pt; font-family: Verdana, sans-serif; font-style: italic; }

.male TD { font-size: 80%; }

ConclusionConclusion

LiteraturaLiteraturaStránky v HTML na WWW

World wide web consortium (http://w3.org)

HTML Reference Library (HomeSite)

Further detailsFurther detailsdynamic elements (JavaScript, PHP, databáze)

modern styles (styly, XHTML)