Web Client Side Technologies 0780341 Raneem Qaddoura HTML Web Client Side Technologies 0780341 Raneem Qaddoura
What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language and is defined by W3C HTML elements are represented by tags The first tag in a pair is the start tag, the second tag is the end tag Tip: The start tag is also called the opening tag, and the end tag the closing tag. HTML tags: The <!DOCTYPE html> declaration defines this document to be HTML5 The <html> element is the root element of an HTML page The <head> element contains meta information about the document The <title> element specifies a title for the document The <meta> defines metadata about an HTML document The <body> element contains the visible page content Other tags …. <tagname>content goes here...</tagname>
HTML Page Structure Only the content inside the <body> section (the white area above) is displayed in a browser.
HTML Global Attributes Description class Specifies one or more class names for an element (refers to a class in a style sheet) contenteditable Specifies whether the content of an element is editable or not dir Specifies the text direction for the content in an element hidden Specifies that an element is not yet, or is no longer, relevant id Specifies a unique id for an element spellcheck Specifies whether the element is to have its spelling and grammar checked or not style Specifies an inline CSS style for an element tabindex Specifies the tabbing order of an element title Specifies extra information about an element
<link> attributes HTML tags <a> attributes Attribute Value Description download filename Specifies that the target will be downloaded when a user clicks on the hyperlink href URL Specifies the URL of the page the link goes to Target _blank _parent _self _top framename Specifies where to open the linked document Basic HTML: <h1>, <h2> … <h6> <p> <pre> <br> Links: <a>, <link>, <nav> <link> attributes Attribute Value Description type media_type Specifies the media type of the linked document href URL Specifies the location of the linked document rel ex: stylesheet Required. Specifies the relationship between the current document and the linked document
HTML tags Images: <img> <figure>, <figcaption> <img> attributes Attribute Value Description alt text Specifies an alternate text for an image height pixels Specifies the height of an image src URL Specifies the URL of an image width Specifies the width of an image Images: <img> <figure>, <figcaption> Lists: <ul>, <ol>, <li> <dl>, <dt>, <dd> <ol> attributes Attribute Value Description reversed Specifies that the list order should be descending (9,8,7...) start number Specifies the start value of an ordered list type 1, A, a, I, i Specifies the kind of marker to use in the list
HTML tags <meter> attributes Attribute Value Description high number Specifies the range that is considered to be a high value low Specifies the range that is considered to be a low value max Specifies the maximum value of the range min Specifies the minimum value of the range value Required. Specifies the current value of the gauge Formatting: <b>, <i>, <u>, <em>, <strong>, <small> <b> vs <strong> and <i> vs <em> <bdi> <del>, <ins>, <s> <mark> <meter>, <progress> <sub>, <sup> <template> <progress> attributes Attribute Value Description max number Specifies how much work the task requires in total value Specifies how much of the task has been completed
HTML tags Frames: <iframe> Styles and Semantics: <style> <iframe> attributes Attribute Value Description height pixels Specifies the height of an <iframe> name text Specifies the name of an <iframe> src URL Specifies the address of the document to embed in the <iframe> width Specifies the width of an <iframe> Frames: <iframe> Styles and Semantics: <style> <div>, <span> <header>, <footer>, <main> <section> <article> <details>, <summary> Programming: <script>, <noscript> <details> attributes Attribute Value Description open Specifies that the details should be visible (open) to the user <script> attributes Attribute Value Description src URL Specifies the URL of an external script file
HTML tags Audio / Video: <audio> <video> <source> <audio> <video> attributes HTML tags Attribute Value Description Autoplay (audio) Autoplay (video) autoplay Specifies that the audio / video will start playing as soon as it is ready controls (audio) controls (video) controls Specifies that audio / video controls should be displayed (such as a play/pause button etc). height pixels Sets the height of the video player loop (audio) loop (video) loop Specifies that the audio / video will start over again, every time it is finished muted (audio) muted (video) muted Specifies that the audio / audio output of the video should be muted poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button src (audio) src (video) Specifies the URL of the audio / video file width Sets the width of the video player Audio / Video: <audio> <video> <source> <source> attributes Attribute Value Description src URL Required when <source> is used in <audio> and <video>. Specifies the URL of the media file type MIME-type Specifies the MIME-type of the resource
HTML tags Tables: <table>, <caption>, <td> <th> attributes Tables: <table>, <caption>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot> <col>, <colgroup> Attribute Value Description colspan (th) colspan (td) number Specifies the number of columns a header cell should span rowspan (th) rowspan (td) Specifies the number of rows a header cell should span <col> <colgroup> attributes Attribute Value Description span (col) span (colgroup) number Specifies the number of columns a <col> element should span
HTML tags Forms and Input: <form> <label> <input>, <textarea> <button> <select>, <option>, <optgroup>, <datalist> <fieldset>, <legend>
Migration from HTML4 to HTML5 More Details
Self Study HTML Symbols (https://www.w3schools.com/html/html_symbols.asp) HTML Charset (https://www.w3schools.com/html/html_charset.asp) HTML5 style guide (https://www.w3schools.com/html/html5_syntax.asp) HTML Youtube (https://www.w3schools.com/html/html_youtube.asp) HTML Multimedia (https://www.w3schools.com/html/html_media.asp) HTML Event Attributes (https://www.w3schools.com/tags/ref_eventattributes.asp)
References https://www.w3schools.com/ Sharma, P. (2013). Introduction to Web Technology. SK Kataria and Sons. Peterson, C. (2014). Learning responsive web design: a beginner's guide. " O'Reilly Media, Inc.".