Selected Sections of Applied Informatics M.Sc. Marcin Koniak koniakm@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki Based on lecture: Dr inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl 2018
HTML format Definition and purpose Structure of the document Tags Forms and components thereof 2
HTML format HyperText Markup Language - hypertext markup language HTML Document - a text file using HTML tags HTM or HTML extension HTML specifies the standard: the structure of the document (headings, content, paragraphs) appearance of the document (fonts, colours, styles, etc.) navigation within the document and between documents (browser links, links) Entry forms Attachments (media files, documents, etc.) Not programming language (!) Current version of standard 5.0 3
gateway The concept of hypertext Hypertext - text linked to navigation links.................................[anchor]................................ [link 1]........................................................[link 2] gateway The idea known from the 1960s. Document (hiper)text 4
Selected HTML Editors NetBeans HTML Editor Microsoft Web Developer Studio Adobe DreamWeaver Spider (PL) KompoZer BlueFish Notepad+++ etc. 5
Content vs presentation of HTML HTML is a platform-independent format The content of the HTML document shall determine its appearance accurate to the browser HTML does not meet the assumptions of the WYSWYG concept Content of the HTML document View of HTML document 6
HTML tags Tag an element located in brackets with a sharp angle Ex: <head> - tag of the document header Tags are used in pairs: <title> My WWW </title> For some tags a short form of writing is allowed (includes and closes inside the brackets) <tag/> Ex: <br/> - verse breaking mark 7
Tag attributes Tag can have attributes Attribute can be a single value or a pair of names=value Values are defined by quotation marks <p id="akapit" lang="pl"> <option value="2" selected> 8
Structure of HTML tag Opening tag < name > Closing tag < /name > Opening tag with attributes < name attribut = value' > Single tag, attributes < name /> (optional) 9
Structure of HTML document <html> <head> Header </head> Header of the window Page coding Window width window width etc. <html> <body> Content <div> Section <p> Paragraph </p> </div> </body> Contents visible in the browser window 10
Classification of HTML tags Structural describe the structure of the text Presented describe the appearance of the elements in the document Hypertext describe the links (benchmarks) between documents 11
Structural tags They define the division of the document text into segments: HTML document, document heading, document content, text paragraph, table, etc. Does not directly affect the appearance of the text In practice, some of these tags may have default styles assigned to them, which changes the appearance of the text. Operation depends on your browser: the appearance of the same document may vary 12
Structural tags Tag <html> <head> <body> <p> <table>, <tr>, <td> <div> <h1>, <h2>, <h6> Description HTML document HTML document header HTML document content paragraph Table, row, cell Section Chapter 13
Presentation tags Describe the presentation of the document Font, colour, position, size, formatting, etc. Physical tags uniquely define the appearance of the element independently from the browser. Logical tags determine the type of element, leaving the decision on the way of displaying for a web browser. 14
Presentation physical tags <b> BOLD </b> <i> Italic </i> <u> Underline </u> <font color='red' size='6'> Red text </font> <p align='center'> Justified paragraph </p> 15
Presentation logic tags <strong> increased </strong> <em> accolade </em> <cite> citation </cite> <code> source code of the programme </code> <kbd> keyboard input data </kbd> <samp> sample </samp> <var> variable </var> 16
Special characters Code character Character appearance < < > > & & etc. Euro 17
Hypertext tags The transitions between documents are described by a <a> tag. The name attribute indicates the "anchor" in the text, i. e. destination of the jump. <a name= list_of_contents' /> List of contents </a> The href attribute means a link leading to a specific location (an anchor, destination file, attachment) <a href='plik.html#spis_tresci' > Wróć </a> <a href='index.html' > Strona główna </a> <a href='artykul.html#publikacje' > Literatura </a> <a href='artykul.pdf' > Pobierz </a> 18
Graphical annexes (pictures) Graphic images are added to the HTML document as attachments Tag <img> with optional attributes width, height height The image can be an active element in conjunction with the <a>> tag The format of supported graphics files depends on the browser <img src="logo.gif" alt="logo firmy" height="50" width="60"> 19
Other facilities In an HTML document, you can embed any active object that can be played back on a web page, provided that the user has an appropriate browser. <object width="400" height="400" data="witam.swf"> </object> 20
Tables The table is defined by the <table> marker The addition of rows to the table is done using the <tr> row markup declaration Each row of the table consists of a certain number of cells defined using the <td> marker The cell can combine adjacent columns (colspan attribute='...' tag <td>) or rows (rowspan attribute='...' tag <td>) 21
HTML table (example) 22
Comments To disable (browser ignore) a portion of the HTML code, you need to use tags. <!-- You can place any content here, which will not affect the design of the site --> 23
HTML forms Form is an element of the user interface that performs the data input function in order to transfer it to the server. From the HTML point of view, the form is a container for logically related control elements (controls), described in detail below 24
Declaration of the form <form action=" the target URL on the server " method=" the HTTP method of data transmission "> <! controls --> <! buttons [send] --> <! button [reset] --> </form> 25
HTML form components Elements for entering or selecting data <input type= komponent type".> Button [Send] <input type="submit"/> Button [Reset] <input type="reset"/> 26
Component types <input>> Element Text Radio Properties value text field name the name of the all radio group Select Checkbox Button checked whether it is selected (true/false) value the value of selected value field <option> checked whether it is selected (true/false) value text on the button 27
Text component (text text field) Component <input> of the text type provides a value through a value value value property of the string type. 28
Radio component (switch) The components <input> of radio type are used in groups All radio components with identical name attribute value are one group. The name of the group name and the value of the selected component will be transferred to the server. 29
Component Select (developed list) The <select> component is used to select one of many options from the list List elements are declared using the <option>> marker The attribute value value is transferred to the server. 30
Checkbox component (option box) The <input> component of the checkbox type performs a single selection option Option status: whether or not selected (checked) If this option is selected, the attribute id or name of the component and its value are transferred to the server. 31
Component Button (footswitch) The <input> button type ensures the functionality of the button The subtitle is set using the value attribute The submit type button sends the form data back to the server. Reset button cleans the data of the form 32
Transmission of data to a server <form action= /login > Marek <input type= text name= imie /> http://url_serwera/login? name = Marek Send <input type= submit /> 33