to

The heart of HTML: Links!

• … – Anchor: Just a hyperlink • External links – Web pages • Same website, same folder—relative referencing – A sister page • Same website, different folder —relative referencing – A neighbouring page • Different website (or could be same website)—absolute referencing – A distant page – E-mail addresses • Mail me – FTP, other Internet resources • Download me! • Internal links – id attribute

The face of HTML: Images!

• • src attribute – Specifies the location of the image file • alt attribute – Alternate text, if image cannot display • width and height – Scales image, and helps to render and load faster • Pixels (“picture elements”) – Most monitors display 72 ppi (pixels per inch) – Standard monitor resolution is 800 x 600 pixels

5.7 Creating and Using Image Maps

• Designate certain areas of an image (called hotspots) as links • Element map – Attributes id and name • Identifies the image map • Because of Firefox bug, use both id and name – Element area • Defines hotspot • Attribute shape and coords – Specify the hotspot’s shape and coordinates in pixels • Rectangular ( shape = “rect” ) • Polygon ( shape = “poly” ) • Circle ( shape = “circle” ) • For easy image maps, use a tool – GeoHTML: http://www.snapfiles.com/freeware/webpublish/fwimagemap_r.html

Lists

•

and
– Unordered and ordered (numbered) lists •
1. – List item; that is, an individual item in a list

   Frames

   • – Defines a group of frames – cols, rows attributes define widths/heights of frames in either pixels or percentages of the screen • – Defines a single frame within a group • – Alternate XHTML to show for browsers that don’t support frames • <iframe> – Inline frame that doesn’t have to hug a border—full window within a window</p> <a id="p24" href="#"></a> <h3>4.11 Web Resources</h3> <p>• http://www.webstyleguide.com</p> <p>• http://webclipart.about.com</p> <p>• http://www.snapfiles.com/freeware/webpublish/fwedi tors_r.html</p> <p>• http://validator.w3.org/file-upload.html</p> <p>• http://www.w3schools.com/tags/ref_byfunc.asp</p> <p>• www.w3.org/TR/xhtml11 • www.xhtml.org</p> <p>• hotwired.lycos.com/webmonkey/00/50/index2a.html</p> <p>• wdvl.com/Authoring/Languages/XML/XHTML • www.w3.org/TR/2001/REC-xhtml11-20010531</p> <a id="p25" href="#"></a> <h3>Tables and Forms</h3> <p>http://www.w3schools.com/tags/ref_byfunc.asp</p> <a id="p26" href="#"></a> <h3>5.2 Basic XHTML Tables</h3> <p>• Organize data into rows and columns • Attributes of <table> – Border • Specifies the table’s border thickness in pixels – Width • Specifies the table’s width in pixels or % – Summary • Describes the table’s contents • Caption – Describes the table’s content and helps text-based browsers interpret table data • Head section (header cell, defined with a thead – Contains header information such as column names element) – tr element (defines an individual table row) – th element (defines the columns in the head section) • Foot section (defined with a tfoot element) • Table body (defined with a tbody • Data cells (defined with td element) element)</p> <a id="p27" href="#"></a> <h3>Elements of XHTML Tables</h3> <p>• Essential elements – Table rows <tr> – Data cells < td> • Attributes: – align: Aligns data horizontally – valign: Aligns data vertically • Optional elements – Caption <caption> • Describes the table’s content and helps text-based browsers interpret table data – Head section < – Table body < thead> • Contains header information such as column names tbody > – Foot section < tfoot> • Footer for the entire table – Table headings <th> • Specially-formatted <td> elements to designated row or column headers • Can appear in any section, just like <td></p> <a id="p28" href="#"></a> <h3>Merging cells in tables</h3> <p>• Element colgroup – Groups and formats columns • Element col – Attributes • align: Determines the alignment of text in the column • span: Determines how many columns the col element formats • <td> attributes rowspan and colspan – Specify the number of rows or columns occupied by a cell</p> <a id="p29" href="#"></a> <h3>5.4 Basic XHTML Forms</h3> <p>• Element form – Attribute action • Specifies the URL of a script that processes the form • E-mailing form results to you is an option – Attribute method • Specifies how the form’s data is sent to Web server • method = “get” (default) – Appends form data directly to the end of the </p> <p><b>URL</b></p> <p>—visible to users • method = “post” – Appends form data to the HTTP request—invisible to users – input • Specifies data to provide to the script that processes the form</p> <a id="p30" href="#"></a> <h3>Form <input> types</h3> <p>• <input>: attributes for type – type=“text” (default) – type=“hidden” • Variable for developer programming; hidden from users – type=“file” • File upload dialogue – type=“password” • Masks input of sensitive text • Only masks from user—does not encrypt!</p> <p>• <textarea> – Multi-line text entry</p> <a id="p31" href="#"></a> <h3>Buttons for forms</h3> <p>• <button> – type=“submit” • Button that activates the action for the form – type=“reset” • Resets all form fields to default values – type=“button” • Generic, programmable button • <input> – type=“submit” and type=“reset” are the same as <button> with those types</p> <a id="p32" href="#"></a> <h3>Multi-choice selections</h3> <p>• <input> – type=“checkbox” • Select one or more of multiple options – type=“radio” • Choose only one of multiple options • All radio buttons in a group must have the same name – <label> tag can be used for clickable text • <select> – Drop-down listbox – Each <option> is a distinct option • value is programmatic value • selected=“selected” is default value for the <select> item</p> <a id="p33" href="#"></a> <h3>5.11 Web Resources</h3> <p>• http://www.w3schools.com/tags/ref_byfunc.asp</p> <p>• www.vbxml.com/xhtml/articles/xhtml_tables • www.webreference.com/xml/reference/xhtml.</p> <p>html</p> </div> </section> </div> </div> </div> </main> <footer> <div class="container mt-3"> <div class="row justify-content-between"> <div class="col"> <a href="/"> <img src="/theme/studyslide/static/logo-slideum.png" /> </a> </div> </div> <div class="row mt-3"> <ul class="col-sm-6 list-unstyled"> <li> <h6 class="mb-3">Company</h6> <li> <i class="fa fa-location-arrow"></i> Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040 <li> <i class="fa fa-phone"></i> +357 64-733-402 <li> <i class="fa fa-envelope"></i> info@slideum.com </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Links</h6> <li> <a href="/about">About</a> <li> <a href="/contacts">Contact</a> <li> <a href="/faq">Help / FAQ</a> </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Legal</h6> <li> <a href="/terms">Terms of Service</a> <li> <a href="/privacy">Privacy policy</a> <li> <a href="/page.html?code=public.usefull.cookie">Cookie policy</a> <li> <a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a> </ul> </div> <hr> <p>slideum.com &copy; 2025, Inc. All rights reserved.</p> </div> </footer> <div class="modal directory" id="directory-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Directory</h5> <button class="close" type="button" data-dismiss="modal">&times;</button> </div> <div class="modal-body"></div> </div> </div> </div> <script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script> <script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <script> var __path_directory = [ ] !function __draw_directory(data, root, uuid) { var ul = $('<ul>', uuid && { id: 'category' + uuid, class: !__path_directory.includes(uuid) ? 'collapse' : null }); for (var item in data) { var li = $('<li>').appendTo(ul); if (item = data[item], item.children) { li.append('<a href=#category' + item.id + ' data-toggle=collapse>') __draw_directory(item.children, li, item.id); } else { li.append('<a href=' + item.url + '>'); } var a = $('> a', li).addClass('item').text(item.name) .append($('<a class="link fa fa-external-link" href=' + item.url + '>')); if (item.id === +__path_directory.slice(-1)) { a.addClass('active'); } /* if (item.id !== __path_directory[0]) { a.addClass('collapsed'); } */ } root.append(ul); } ([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside')); var __root_directory = $('#directory-aside > ul'); $('#directory-aside') .on('show.bs.collapse', function() { //console.log('show.collapse') }) .on('hide.bs.collapse', function() { //console.log('hide.collapse') }); $('#directory-modal') .on('show.bs.modal', function() { $('[class$="body"]', this).prepend(__root_directory); }) .on('hide.bs.modal', function() { $('#directory-aside').prepend(__root_directory); }); $('.directory-mobile').on('click', function(e) { e.preventDefault(); }); $('.directory .link').on('click', function(e) { e.stopPropagation(); }); </script> <script> function scrollToViewport() { $('html, body').stop().animate( { scrollTop: $('.navbar').outerHeight() }, 1000); } setTimeout(scrollToViewport, 1000); $(window).on('orientationchange', scrollToViewport); $('[data-toggle="tooltip"]').tooltip(); </script> <script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter28397281 = new Ya.Metrika({ id:28397281 }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <style> @media screen and (max-width: 768px) { .cc-revoke { display: none; }} </style> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function() { window.cookieconsent.initialise( { content: { href: "https://slideum.com/dmca" }, location: true, palette: { button: { background: "#fff", text: "#237afc" }, popup: { background: "#007bff" }, }, position: "bottom-right", revokable: true, theme: "classic", type: "opt-in" })}); </script> </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>