Please enable JavaScript.

Coggle requires JavaScript to display documents.

HTML (Forms (Sending Data to Webserver (Validation (Types (Client (Built…

- - - - <form action="/my-handling" method="post>
        </form>
      - <form> is a container element and supports some specific attributes
        
        action => defines url where form data should be sent
        
        method => defines which HTTP method to send data with POST
    - - <label>,<input>,<textarea>
      - Input Field with Labels example:
        <div>
        <label for="name">Name</label>
        </div>
        <div>
        <label for="mail">Email</label>
        <input type="email" id="mail" name="user_mail">
        </div>
      - for attribute on label is a formal way to link a label to form widget
      - <input> element => most important attribute is 'type' - defines the behaviour of the input
        
        <input> is an "empty" element (self-closing, can't have children)
        
        e.g <input type="text" value="default val here" />
      - <textarea> is not an "empty" element - can have children
        e.g. <textarea> default value</textarea>
      - <button> element is used to send the form data
        e.g.
        <div>
        <button type="submit">Send</button>
        </div>
        
        Button also accepts type
        
        type attribute can be 3 values
        
        reset => reset all widget data
        
        button => does nothing and just for testing purposes
        
        submit => send data to wherever action says
      - <label> element
        
        Most important element for UX (user experience) of form
        
        To associate a lavel to an input use for and id attributes
        e.g
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name"/>
  - - - method attribute
        
        If 3 fields - on send - server receives 3 key:values pairs
        
        Defines how the data is sent
        
        HTTP protocol provides many ways to send data
        
        GET and POST - most common
        
        When sending http requests also send
        
        Header - info about metadata
        
        Body - Info about the request
        
        GET => get resource from server - no body needed when requesting data (unless parameters)
        
        Can send data from client to server in the Url via the ? tag e.g.
        https://www.example.com/index.html?key=value&key=value&...
        
        POST
        
        Method of browser talking to the server and wants response catered to the data given
        
        The data for this method is appended to the body of the request (no data is appended to the URL)
      - action attribute
        
        Defines where the data gets sent - must be a valid URL
        
        If attribute not provided it is sent to page of URL containing the form (make sure to use https)
        
        Setup in <form> tag
        <form action="URL">
    - - Client / Server
        
        The web is a client (browser) sending requests to server (like Apache, Nginx) using http(s) protocol
        
        The Server answers with the same protocol
        
        On the client, the form is a nice way to configure http(s) request to the server
    - - Files are binary data whereas all other is text
      - Give "enctype" attribute
        
        This lets specify content-type in http header in request thus telling the server the data type
      - -Default Content-Type = application/x-www-form-urlencoded
        -This means the form has been encoded in URL parameters
      - To send files
        
        1) Set method attribute to POST as file content cannot be put in GET request
        
        2) Set enctype to multipart/form-data as data split into multple parts: - each file
        
        text form data
        
        3) Include File Picker
        <form method="post" enctype="multipart/form-data">
    - - HTML forms are by far the most common place to attack against servers
      - XSS and CSRF
        
        Cross-Site Scripting => XSS
        
        Cross-Site Request Forgery
        (Common attacks where form data sent to 3rd party)
        
        XSS - lets attackers inject a client-side script into web pages by other users - bypass same origin policy
        
        CSRF - Same as XSS but target the admin users data to gain all privileges
        
        To fix - Check data a user sends from the website and filter out the html data
      - SQL Injection
        
        Tries to perform actions on database used by target website - send a SQL hoping for server execution => leading to potential data loss and loss of site
      - HTTP Header Injection
        
        If App builds headers based on user input
        
        Check data - limit its size
        Sandbox uploaded files - store in different server
        
        New subdomain for uploaded data
    - - Overview
        
        Sending data is not enough - need to process user input so you don't break the app
        
        Validation means input with conditions - "This field is required" or "Please enter a valid email"
        
        If the form is not valid - no submit takes place
      - Types
        
        Client
        
        Before data submitted to server
        1) Javascript Validation - custom
        2) Built-in form validation - good performance
        
        Built-in Form Validation
        
        Validate without scripts - let's you specify if a field needs to be filled in and the rules to meet for a valid form
        e.g length of data, email
        
        Valid
        
        If valid:
        
        the elements match - can use valid CSS class and style to let user know
        
        If user sends data => find
        
        Invalid
        
        Element has invalid CSS class to let user name
        
        Browser blocks the submit
        
        Constrain length of input with:
        
        maxlength and minlength attributes
        
        Field only valid if meets these requirements
        
        Server
        
        After data sent but before placed into database
        
        If data is wrong - response code sent back e.g 401
      - Implement
        
        To validate add required attribute => makes it mandatory and won't submit without it
        <input type="text" required/>
        CSS:
        input:valid{ color:green; }
        
        With Regular Expresssions
        
        Use pattern attribute - expects a regular expression as its value and is used to match a character combo
        
        a => will match "a" by itself
        
        abc => will match "abc" only
        
        a* => matches single "a" 1+ times
        
        [^a} => matches character that is not "a"
        
        a | b => matches "a" or "b"
        
        [abc] - matches character that is "a","b" or "c"
        
        [a-z] => matches any lowercase character a-z
        
        [A-Za-z] => both lower and upper case
        
        a.c => matches "a | any character | c"
        
        [0-9] => matches any number 0-9
        
        e.g.
        
        [Ll].*K => Upper or lower case L and any character K
        
        [A-Z][A-Za-z " -]+ => single uppercase followed by 1+ characters both upper and lower
        
        Use regex if people enter input without correct casing
        e.g if answer is "banana" use
        pattern=[Bb]anana
      - Custom Error Message
        
        Overview
        
        Have to use via Javascript
        
        HTML5 uses Constraint Validation API to check state of form element (Lots of control over form via this API)
        
        Methods to use
        
        checkValidity(), setCustomValidity(msg)
        
        Implement
        
        Add novalidate to form at the beginning to turn off browser's automatic validation
        
        If that doesn't work do it via CSS pseudo-classes
        :valid,:invalid,:in-range,:out-of-range
        
        e.g.
        var email = document.getElementById("mail");
        email.addEventListener("input", function(event){
        if (email.validity.typeMisMatch){
        email.setCustomValidity("I want email");
        } else {
        email.setCustomValidity("");
      - Remote
        
        Check on server if valid e.g. password/username (be weary of security/ AJAX lagging)
  - - - Defines a form
        
        Can't nest form inside another form
        
        Can use form widgets outside form but must arrange data sending yourself
    - - Is a convenient way to create a group of widgets that share the same purpose - for styling purposes
    - - To label a fieldset element include a <legend> element below the opening fieldset tag
        
        <legend> describes the purpose of fieldset
        e.g.
        <form>
        <fieldset>
        <legend>Fruit Juice Size</legend>
        <fieldset>
        <form>
        (If have radio buttons - use fieldset)
    - - Inputs can be nested inside a label
    - - Common practice to wrap label in <div> or <p> tag - also use <h1> and <section> tags
      - Create a drop-down box using <select> with <option> tags giving its values
  - - - Many of the elements used to define form widgets have their own attributes - the ones however common to all are
      - name => name of element submitted with form data
      - form
        
        Form element the widget is associated with
        
        The value must be same as id attribute of <form>
      - value => Elements initial value
      - disabled => default false
        
        Boolean value to indicate if user can interact with the element
        
        If attribute not specified it inherits value from containing element e.g. <fieldset>
        
        If no value specified in attribute - element is enabled
      - autofocus => default false
        
        Boolean to indicates if element should have input focus automatically when page loads
  - - - 1) Can be marked readonly / disabled
        2) Can have placeholder
        3) Constrained in size and length
        4) Benefit from spell checking
      - A Single line text field
        <input type="text" />
        
        Constraint => if breaks in text - taken out on SEND
      - <input/> is an empty element - meaning it can't have children
    - - Email Address Field
        
        <input> tag with type "email"
        
        Add multiple attributes to add many comma seperated emails
      - Password Field
        
        <input> with type "password"
        
        This will obscure the value in the field
        
        Doesn't protect data on send - as its sent as plain-text (bad practice)
        
        To fix => send of HTTPS (encrypted)
      - Search Field
        
        <input> with type="search"
        
        Browser will style this - with rounded corners
        
        Also their values can be autocompleted across multiple pages of same site
      - Phone Number Field
        
        <input> with type = "tel"
        
        No constraints - applied universally
      - Url Field
        
        <input/> with type="url"
        
        Adds special validation
      - Multi-line Text Fields
        
        <textarea
        cols="30"
        rows="10"></textarea>
        
        Also accepts "warp" attribute - "hard" or "soft" regarding the wrapping of the text
  - - - Selectbox
        
        Created with <select> element with <option> tag nested
        
        <select id="simple" name="simple">
        <option>Banana</option>
        <option>Cherry</option>
        </select>
        
        Add attribute selected (no quotes) to option if want to be default
        
        <option> can be nested in <optgroup> to create groups of options
        <optgroup label="fruits">
        <option>Banana</option>
        </optgroup>
        
        If option is set with value attribute - that element's value is submitted with forms
        
        If value is omitted then the content of option element is used
        
        Multiple Choice Selection Box
        
        Default select box only lets single value
        
        Add multiple (no quotes) to <select> to select several values
      - Auto-Complete Box
        
        Can provide suggested, auto-complete values for form widgets using <datalist> with some <option> elements to specify
        
        Data is bound to text field (<input>) using list attribute
        
        Once data list is affiliated with a form widget -its options are used for autocomplete
        
        e.g.
        <input list="mySuggestions">
        <datalist id="mySuggestions">
        <options ....
        </datalist>
        
        <datalist> is very new and has limited browser support
        
        Fallback for old browsers is
        <datalist id="fruitlist">
        <select>
        <options>
        </select>
        </datalist>
  - - - Check Box
        
        <input/> tag with value type = "checkbox"
        
        Include "checked" attribute (no quotes) if want auto checked
      - Radio
        
        <input/> tag with value type="radio"
        
        Several radio buttons can be tied together
        
        If they share the same value for the attribute "name" - only one button can be checked though
  - - - Reset => resets all the widgets
      - Anonymous => No effect - just for testing
      - Submit => submits the form data
    - - <button>
        
        Does have children therefore placeholder must be default value using value attribute
      - <input />
        
        <input/> is empty and has no children - attribute value can be a placeholder
      - Both pretty much the same
        
        <button type="submit"> is the same as
        
        `<input type="submit">
  - - - Widget for numbers used with <input/> and value="number"
      - This is a field which allows decimal places with some increment/decrement buttons
      - Attributes
        
        step => up/down by this amount
        
        max => maximum number
        
        min => minimum number
    - - Overview
        
        Use slider to pick a number
        
        Created with <input/> and type = "range"
        
        Its attributes can be min,max, and step
        
        Problem
        
        Sliders don't offer feedback - have to do with Javascript
        
        e.g.
        var beans = document.querySelector("#beans");
        var count = document.querySelector(".beancount");
        count.textContent = beans.values;
        beans.oninput = function(){
        count.textContent = beans.value;}
    - - Traditionally a nightmare
      - datatime-local => e.g
        <input type="datetime-local">
        
        Type can also be month,time or week
      - Set max and min:
        
        `<input type="date" max="2018-16-11" min="2017-06-01"/>
    - - `<input type="color"/>
    - - File Picker
        
        HTML forms can send files to a server
        
        To implement
        
        <input type="file" /> => can add multiple attribute
        
        Can constrain type with accept value
        <input type="file" accept="image/*" multiple"/>
      - Hidden Content
        
        Can send data to server that is not displayed to user - add invisible elements to form
        <input type="hidden" value="123"/>
      - Meters and Progress Bars
        
        Use the <progress> element
        
        e.g <progress max="100" value="75">75/100</progress>
        
        Meter e.g.
        <meter min="0" max="100" value="75" low="33" height="66" optimum="50">75</meter>
        
        Meter represents a fixed value in range with a min and max value
        
        If meter is in preferred range => bar is green
        
        If meter is in average range => bar is yellow
        
        If meter is in worst range => bar is red
        
        min < - > low < - > high < - > max
        
        Optimum is in one of the 3 areas
      - Image button
        
        <input type="image" src="" alt="" width />
  - - - Can send form via HTTP(s) request but can also prepare HTTP request in Javascript
      - N.B Standard HTML form submission loads the Url where form is sent - full page load
        
        Nowadays use async Javascript - AJAX
      - AJAX uses XMLHttpRequest (XHR) DOM object - can build http requests - then send them and retrieve results
        
        XMLHttpRequest was originally used for XML but now JSON
      - Neither XML or JSON fit into form data request encoding - only accepts:
        
        form-data => application/x-www-form-urlencoded
        
        binary => multipart/form-data
        
        Therefore If you control the front-end and back-end you can send JSON by conversion
    - - Build XMLHttpRequest Manually
        
        This is the safest and most reliable way
        
        Methods
        
        1) Prepare the data by url-encoding it
        
        `<button type="button" onclick="sendData({ test : "ok"})"></button>
        
        2) Use XMLHttpRequest and Form Data object
        
        FormData (write-only) object can be used to build data
        
        In Javascript:
        var FD = new FormData()
        FD.append(name, data[name]);
        XHR.send(FD);
        
        Build DOM in hidden iframe
        
        Avoid => massive security risk
    - - Dealing with Binary Data
        
        FormData object will do this automatically
        
        Use FileReader() object => look at code (complex)
      - Basic Styling
        
        CSS's biggest downfall is legacy browser support
        
        CSS Attribute Selectors
        
        Some browsers don't support it
        
        <input type="number" />
        
        Don't support CSS: input[type=number]
        
        To get input use JS => input.number
        
        Modernizr
        
        A "polyfill" is a bit of Javascript that "fills the holes" in the functionality of legacy browsers
        
        Best way to "polyfill" missing API in browser is to use Modernizr as it allows to test availability of functionality
        
        HTML Forms
        
        Hard to Style - form widgets don't go well with CSS - due to form widget complexity
        
        Some elements can be styled with no problems:
        
        <form>
        
        <fieldset>
        
        <label>
        
        <output>
        
        Text and Button widgets
        
        Some Elements can't be styled:
        
        <legend>
        
        Check boxes, radio buttons
        
        Placeholder content
        
        <select>,<option>,<optgroup>,<datalist>,<progress> and <meter>
        
        Fonts - some widgets don't inherit font-family or font-size from parents
        
        Fix: button, input, select, textarea {
        font-family:inherit;
        font-size:100%;
        }
        
        Box Model
        
        Is supported and each form widget has its own rules for border
        
        To use:
        input, textarea,select, button {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        }
        
        Positioning
        
        Fine apart from <legend> and <textarea> which browsers consider to be inline and change with display
- - - - Putting elements inside other elements (make sure nested closing tag always before main closing tag)
    - - Attributes
        
        1) <! DOCTYPE html> => used to tell browser to follow certain html rules to be good html
        
        Now just a historical artefact that needs to be included
        
        2) html tags <html>
        
        Wraps all content on entire page
        
        Is called the "root" element
        
        3) Head tags <head>
        
        container for all content on HTML that not showing users e.g keywords
        
        4) Meta tags <meta charset="utf-8"> => document should use character set UTF-8
        
        5) Title tags => title that appears on browser
        
        6) Body tags => contains all content - text and images
      - Head
        
        Head is not displayed in the browser and contains information such as the title, css and metadata
        
        page title is made with <title> tags
        
        Meta
        
        Metadata is data that describes data and HTML has an official way to add it via the <meta> tags
        
        <meta name="description" content="..."> (Good for search engines)
        
        Other Types
        
        Open Graph protocol - metadata that Facebook invented to provide rich metadata for websites
        <meta property="og:image" og:content="image-link" og:description="string">
        
        Twitter has similar:
        <meta name="twitter:title" content="content">
        
        Custom Icons
        
        Add favicon to meta data (16x16 pixel)
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        
        Add different sizes for different devices
        
        Applying CSS
        
        CSS adds styles to HTML web page (Javascript adds functionality)
        
        In the head tag
        <link rel="stylesheet" href="main.css">
        <script src="file.js"></script>
        
        Setting Primary Language of Document
        
        <html lang="en-us">
        
        Useful to do as page will be indexed more effectively in search engines
      - Properties
        
        HTML Text
        
        HTML's main job is to give text structure and meaning (known as semantics) so browser dispalys it correctly
        e.g <h1> Header => h1 - h6
        <p> paragraph
        
        Search engines grep h1 elements to index
        
        Lists
        
        2 types <ol>, <ul> ordered list and unordered list
        
        e.g. unordered
        <ul>
        <li>Milk</li>
        <li>Bread</li>
        </ul>
        
        e.g. ordered list - order here matters
        <ol>
        <li>Fish</li>
        <li>Milk</li>
        </ol>
        
        Emphasis
        
        <em> tags - browsers recognise this
        
        <i> - to italicise
        
        <strong> - bold
        
        <ul> - underline
        
        Hyperlinks
        
        Allow us to link documents to any other document we want - even just specific parts
        
        A url can point to html files, text files, images, text documents, video and audio files
        
        Anatomy
        
        A basic link is wrapping text with an <a> anchor tag and giving it a href attribute (href stands for hypertext reference/target)
        
        Add title attribute to <a> for tooltip on hover
        
        Can even turn block elements into a link - wrap with the <a> tags
        
        URL - Uniform Resource Locator
        
        String of text which defines where something is located on the web
        
        Urls use paths to find files - referencing files relative to current file location
        
        Document Fragment - link just part of a document rather than the whole thing
        
        assign id attribute to element to link
        
        In anchor tag put document in href with # and id of part to link
        <a href="contact.html#address></a>
        
        Types
        
        Absolute - point to location defined by absolute location on web - including protocol and domain name
        e.g. index.html uploaded to web server example.com under the project folder "projects" becomes"
        http://www.example.com/projects/index.html
        
        Relative - point to different places depending on where the file is used inside is located
        
        Best practices
        
        Keep clear and concise
        
        Use lots of relative links to docs on same website
        
        Use download attribute when linking to a download
        e.g. `<a href="link" download>Install.exe</a>
        
        Email
        
        Add mailto to anchor tags
        e.g <a href="mailto: me@something.com"></a>
        n.b to add subject use
        mailto:<email>?cc<email>&subject=The%Subject%needs%Percent
  - - - form a visible block on the page
        
        appear on new line from whatever content before it
        
        Any content after it will be on newline
        
        They tend to be structural elements on page - <p>, lists, menus
        
        They shouldn't be nested in inline-element
    - - those contained in block elements and surround small part of content - not entire paragraphs
        
        won't cause a new line to appear
        <em> => inline
  - - - href attribute => Linking anchor tag to website
      - title attribute => extra information about link and will appear on tooltip hover
      - target attribute => specifies browsing context e.g "_blank" means new window
      - Boolean Attributes => attributes without values
        e.g <input type="text" disabled/> => the attribute is "disabled"
- - - - Because they are rigid
      - They offer a good visual representation
    - - For a one row header - complex markup and not responsive
  - - - <table>
        <colgroup>
        <col>
        <col style="color:yellow">
        </colgroup>
        
        The above says do 2 columns and apply yellow to second column
        
        If want to apply styling to both columns just include one <col> element
- - - - use <blockquote> tags - to show quotes
      - Inline quotations - use the <q> tag
      - Citations => use the <cite> block - not used by browsers
    - - Use <abbr> tag
        e.g <abbr title="hyper text markup">HTML</abbr>
        
        Hover over it will show the title
    - - <address> tag for page author
    - - 25<sup>th</sup> of May = 25th of May
      - Formula: C<sub>8</sub>H<sub>10</sub>
    - - <var> => Marking up variable name
      - <kbd> => Making up keyboard input
      - <pre> => Retaining whitespace
      - <samp> => Marking up output of programmes
      - <code> => generic pieces of code
    - - <time> tag
        e.g <time datetime="2016-10-20">20 Jan 2016</time>
  - - - <article> => encloses a block of related content that makes sense on its own without the rest of the page (break up sections with articles)
      - <section> => similar to article but for grouping together single part of page with one piece of functionality (e.g. map)
      - <main> => is for content unique to this page - use once per page in the body
      - <aside> => contains content not directly related to main content but can provide more information e.g glossary
      - <header> => group of introductory content
        
        If child of body it defines global header of webpage
        
        If child of article of section it defines header for the section
      - <nav> => main navigation
      - <footer> => footer for page
    - - If can't find correct elements use <div> or <span> with class attribute
      - <span> is inline non-semantic element which should only use if can't find semantic element
      - <div> is a block-level non-semantic element and you should only use if no semantic block element is available
    - - <br> and <hr>
        
        <br> creates a line break in paragraph
        
        <hr> - creates a horizontal rule that denotes a thematic change - horizontal line
  - - - Alternative Text
        
        Add alt attribute for when if image can't load => good for SEO
        
        Alt text describe images
      - Width and Height => Set it on an image
      - Title
        
        Can set title on image just like links which turn it into a tooltip
      - Figures and Figure Caption
        
        Can put caption with image via <p> tag but to link them use <figure> and <figcaption>- these link figure to caption (Good for SEO)
        e.g.
        <figure>
        <img>
        <figcaption>Image</figcaption>
        </figure>
        
        Figure doesn't have to be an image - it is an independent unit of content that expresses meaning in easy and compact way and provides information about the main text
      - CSS Background Image
        
        Use CSS to embed images e.g
        p{ background-image: url(path/to/file) }
        This is easier to position than html but only for decoration
      - Use <img> tag to put image on a site
        
        <img> is an empty element - no closing tag and requires a src to point to image (Url or path)
      - Responsive
        
        Images that change according to browser width
        
        Problems
        
        Art Direction Problem => large pic on large device needs to be cropped for iPad and again for iPhone
        
        Resolution Switching Problem => No need to embed large image if being viewed on tiny screen
        
        Raster image is a set number of pixels tall and wide and looks bad if width set too wide
        
        If width too low - waste of bandwidth - important on mobile
        
        Fix
        
        Resolution Switching
        
        srcset => defines et of images we allow browser to choose between.
        Syntax : <image> 480w - image width in pixels
        
        Sizes - sets screen media conditions and shows which image is best suited
        <media condition> <width of the slot image will fill>
        
        If browser is 480px the 440px slot is chose so the 480.png is show as its closest to 440
        
        Can also change resolution in srcset with X descriptors
        srcset="file.png 1.5x
        file-480.png 2x
        
        In this situation the browser works out the best resolution
        
        Resolution Switching => different sizes depending on the device - use new attributes on image tag with srcset and sizes
        <img srcset="pic.png 320w,
        pic480.png 480w"
        sizes = "(max-wdith: 320px) 280px, (max-width: 480px) 440px, 800px
        
        Art Direction
        
        The Art Direction problem involves wanting to change the image displayed to suit different image display sizes
        
        Large shot will look good on desktop but bad on mobile
        
        Better to show cropped image
        
        Use the <picture> tag which fixes the problem
        <picture>
        <source media="(max-width:799px)" srcset="small-file1.png">
        <source media="(min-width:800px)" srcset="file1.png">
        <img src="file1.png" alt="text"/>
        </picture>
        
        Source has media attribute that contains media condition - for viewport size
        
        srcset attributes contain path to image (can take multiple images)
        
        Must provide image <img> with src and alt or nothing will appear
    - - Video
        
        <video> - tag allows to embed video very easily
        e.g
        <video src="/path/to/source"" controls>
        <p>Comment</p>
        </video>
        
        src => same as for image
        
        controls => include controls for audio + playback
        
        <p> tag => Fallback content if it doesn't work in the browser
        
        In early days - the web couldn't do video in HTML - so had to use flash
        
        HTML5 now gives a native solution with <video> and <audio> tags
        
        Supporting Formats
        
        mp3 (audio)
        
        mp4 (video) - AAC video and mp2 audio
        
        WebM (audiovisual media file format) - Ogg Vorbis ?
        
        Browsers have different codecs which are used to convert compressed sound + video into binary digits and back (not all browsers have full support)
        
        To get around this take out src in <video> tag and put in new source tag:
        e.g.
        <video controls>
        <source src = "file.mp4" type="video/mp4"> //type is MIME type
        <source src = "file.webm" type="video/webm">
        </video>
        
        Attributes
        
        autoplay => start playing straight away while rest of page loads
        
        loop => start video again once finished
        
        width height => can set video width and height but video will maintain aspect ratio - its native width/height
        
        muted => play without sound default
        
        poster => image url - displayed before video is played
        
        Displaying Video Text Tracks (VTT)
        
        Transcript of words on video
        
        Create a WebVTT format file - with text strings (called cues) for different times
        
        Useful for captioins, subtitles
        
        e.g. WebVTT Syntax
        00:00:22:230 ---> 00:00:24:606
        This is the first subtitle
        
        Save the above in a .vtt file and link it in the track element in an <audio> or <video> tag
        
        Use kind attribute to state whether using subtitles,captions or description
        <track kind="subtitles" src="file.vtt" srclang="en">
      - Audio
        
        <audio> element
        
        Same attributes as <video> apart from
        
        no width/height attribute
        
        No poster attribute
    - - Types
        
        <iframe>
        
        For embedding other web pages - embed + object for embedding pdfs, svg and Flash
        
        Structure
        <iframe
        src="link"
        width="100%"
        height="500"
        frameborder="0" //boolean for border
        allowfullscreen
        sandbox //heightened security
        <p>Fallback Content</p>
        </frame>`
        
        Security
        
        Iframes are common target for hackers - therefore only embed where necessary
        
        Use https - more secure and needs certificate - never use http
        
        Use sandbox attribute - means code source is not affected by it
        
        <embed> (not used)
        
        <object> (not used)
      - History Overview
        
        Was popular in the past to use frames to create a website - small parts of a website stored in individual HTML pages
        
        They were embedded on master document - called frameset - which allowed you to specify the area on the screen that each frame filled
        
        Led to Java Applets being used to embed rich content (video) on html via <object> and <embed> - out of fashion now
        
        <iframe> comes along to embed web documents - adopted universally
      - Embed Object Elements
        
        General purpose for embedding external content that include Java plugins, flash and pdf
        
        Not in use anymore
        
        No more plugins - not everyone has them and not accessible