TNPW1 Ing. Jiří Štěpánek

 Tags  Marks for elements ▪ Pair ▪ Start and end tag ( Paragraph text ) ▪ Single ▪ Only start tag, according to XHTML 1.0 strict ended by slash (,  Each element can have attributes (i.e. for img – src, alt)  Each element has its own set of attributes, some are common for all elements (id, class, title…) Some are specific. Some attributes are required.  (

 Represented by tag  Including metadata = info about page  Charset (coding), Author name, page name, keywords and so on Page name

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> Page name Paragraph text

 Head  Title, charset, other metadata  Written inside element  Body  Body tag  Visual elements that can visitor see – images, paragraphs, hyperlinks….

 Headings –  Paragraph  Subscript, Superscript  Preformatted text  Text shown exactly how it is written

Phrase elements  Indicate the meaning of the text. They can only contain text or other line elements.  Looks different than normal text   emphasize – italic font formatting by default   Another emphasize – bold font formatting by default  Another elements:  computer / program code  sample code  definition

 Cite Shakespeare.  For cited source – person / organization names  Elements, – for cites  Cited text  Inline element for short cites  Cited text  Block element for longer cites  Can contain another block elements

 Link text  Element in XHTML document.  Instead of text can contain i.e. picture  After clicking redirected to URL defined in href attribute

  Only one per page  Main heading for concrete page ▪ Very imporatnt for SEO ▪ Contains unique name of page ▪ Text the same or similar to

  Can figure multiple times on page  Must not be skipped (i.e. page cannot contain h1 and h3 if there is no h2)  Semantics is very important factor for search engines

 absolute x relative  absolute  Contact  Leads to URL in href no matter where is HTML document placed  relative  Contact  Looking for file in current folder ▪ „data/contact.htm“ (look into „data“) ▪ „/data/contact.htm“ (goes to root folder, then the same as previous ) ▪ „../data/contact.htm“ (goes one level higher, then look for data folder, in data folder look for contact.htm)

 Hyperlinks can point to random document types (.zip,.jpg,.pdf,.avi and so on…)  The good practice is to tell the file size  As a part of hyperlink ▪ Presentation 1 – Introduction (pps 99 KiB)  When pointing to image, the thumbnail shoul be used.

 Anchor – position on page  Anchor definition ▪ Heading  Link to anchor on the same page ▪ Go to my anchor 1  Link to anchor on different page ▪ Go to index and anchor  Using anchors  Should not be used as web navigation  Should be used for skipping some parts of page or for returning to top of page from end and so on…

 Single element (image)   alt attribute is required (alternative text shown in case image cannot be loaded)  title attribute is optional (text in title attribute shown when mouse cursor is placed on the image)  width and height determines dimensions of image – attributes must correspond with actual size of image!  Considering the image format (gif, jpg, png)  For resizing the image must be used appropriate software, not the browser