Course Dashboard

  .html

Lesson 1 

 Avoir une bonne structure de page

Apprenez comment avoir une bonne structure de page (et complète) en HTML 5





  • Start Here

  • Read

    Un document HTML doit contenir au minimun :

    HTML
    


    
    Un titre d</div>

                                        </div>

                                        <div class="timeline-footer"></div>
                                    </div>
                                </li>

                                                
                    <li class="time-label">
                                                <a class="btn btn-success" href="/auth/login">Log in to mark this lesson complete.</a> 
                                            </li>

                </ul>
            </div>
                    </div>
    </div>    
</div>
<div class="clearfix"></div>
<br>
<br>
</div>


            <div class="clearfix"></div>
        </div>
    </div>
    <div class="clearfix"></div>
    <br>
    <br>
</div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="modal fade" id="shareModal" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title text-center">Share Resource</h3>
            </div>
            <div class="modal-footer">
                <div style="padding-left: 16px; padding-right: 16px;" id="chooseShareOption">
                    <div class="text-center">
                        <h4>Share By Link</h4>
                                                <button id="linkButton" type="button" class="btn btn-primary btn-block"> Share by Link <i class='glyphicon glyphicon-link'></i> </button>
                        <br>
                        <h4>Share Socially</h4>
                        <div class="text-center">
                            <button class="btn btn-link"  style="margin-top: 5px;">
                                <div class="g-sharetoclassroom" data-size="34" data-url="https://TopgradeApp.com/course/avoir-une-bonne-structure-de-page" id="googleClassroomButton" type="button" class="btn btn-primary btn-block"> Share on Google Classroom  <i class='glyphicon glyphicon-user'></i> </div>
                            </button>
                            <button type="button" class="btn btn-link" onClick="window.open('https://api.whatsapp.com/send?text=https://TopgradeApp.com/course/avoir-une-bonne-structure-de-page');"><img height="34" width="34" src="/img/whatsapp_114_logo.png"></button>
                        </div>
                    </div>
                </div>
                <div id="emailOption" style="display: none">
                    <button type="button" class="btn btn-primary" id="moreOptionsEmail"> Other Share Options <i class='glyphicon glyphicon-menu-hamburger'></i> </button>
                    <form method="POST" action="https://topgradeapp.com/course/html/email" accept-charset="UTF-8" class="form"><input name="_token" type="hidden" value="x6tkAgPkAefLZIBxOO1rp6n04gmpubvEpL0HteAA">
                    <div class="form-group text-left">
                    <label for="linkToShare">Link to share</label>
                    <input required disabled class="form-control" placeholder="For example: example@example.com" name="linkToShare" type="text" value="https://TopgradeApp.com/course/avoir-une-bonne-structure-de-page" id="linkToShare">    
                    <div style="display: none"><input required class="form-control" placeholder="For example: example@example.com" name="linkToShare" type="text" value="https://TopgradeApp.com/course/avoir-une-bonne-structure-de-page" id="linkToShare"></div>   
                    </div>
                    <div class="form-group text-left">
                    <label for="sendTo">Send this link to (one address per send)</label>
                    <input required class="form-control" placeholder="For example: example@example.com" name="sendTo" type="email" id="sendTo">
                    </div>
                    <div class="form-group text-left">
                    <label for="messageBody">Message Body</label>
                    <textarea required class="form-control" placeholder="For example: example@example.com" name="messageBody" cols="50" rows="10" id="messageBody">Hi, I have just made this great course on TopgradeApp.com and thought you might like to try it out.</textarea>
                    </div>
                    <button type="submit" class="btn btn-success btn-block" id="shareEmail"> Send <i class='glyphicon glyphicon-send'></i> </button>
                    </form>
                    <br>
                </div>
                <div id="linkOption" style="display: none">
                    <h3 class="text-center">Course Link</h3>
                    <hr>
                    <h4 class="text-center">Give this link to anyone who wants to play:</h4>
                    <h4 class="text-center" id="linkToShareValue" style="color: royalblue">https://TopgradeApp.com/course/avoir-une-bonne-structure-de-page</h4>
                    <br>
                    <br>
                    <button type="button" class="btn btn-primary" id="moreOptionsLink"> Other Share Options <i class='glyphicon glyphicon-menu-hamburger'></i> </button>
                </div>
            </div>
        </div>   
    </div>
</div>
<script language="javascript">
    function userClickedEmailOption() {
        document.getElementById("chooseShareOption").style.display = "none";
        document.getElementById("emailOption").style.display = "block";
    }
    function userClickedLinkOption() {
        document.getElementById("chooseShareOption").style.display = "none";
        document.getElementById("linkOption").style.display = "block";
    }
    function userClickedFacebookOption() {
        var text = document.getElementById("linkToShareValue").innerHTML;
        var name = document.getElementById("courseName").innerHTML;
        FB.ui({
            method: 'feed',
            name: 'Topgrade',
            link: text,
            caption: 'Just made a course on Topgrade, click here to play it.',
                
                picture: 'https://TopgradeApp.com/mainIconDesigner.png', 
                        description: name
        }, function(response) {
            if(response && response.post_id){}
            else{}
        });
    }
    function userClickedMoreOptions() {
        document.getElementById("chooseShareOption").style.display = "block";
        document.getElementById("emailOption").style.display = "none";
        document.getElementById("linkOption").style.display = "none";
    }
        document.getElementById("linkButton").addEventListener("click", userClickedLinkOption);

    document.getElementById("moreOptionsEmail").addEventListener("click", userClickedMoreOptions);
    document.getElementById("moreOptionsLink").addEventListener("click", userClickedMoreOptions);
</script>
        </div>
                    <div class="modal fade" id="appleAppStoreModal" role="dialog" aria-labelledby="appleAppStoreModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title text-center">App Store</h3> </div> <div class="modal-body text-center"> <p>Select a Topgrade app to view on the Apple App Store.</p> <br> <a target="_blank" href="https://itunes.apple.com/us/app/topgrade-quiz-maker/id673565359?mt=8" class="btn btn-primary btn-block" role="button">Quiz Maker</a> <br> <a target="_blank" href="https://itunes.apple.com/us/app/topgrade-flashcard-maker/id1128950682?mt=8" class="btn btn-primary btn-block" role="button">Flashcard Maker</a> <br> <a target="_blank" href="https://itunes.apple.com/us/app/topgrade-courses/id1195340734?mt=8" class="btn btn-primary btn-block" role="button">Course Maker</a> <br> <a target="_blank" href="https://itunes.apple.com/us/app/topgrade-study-planner/id1349710192?mt=8" class="btn btn-primary btn-block" role="button">Study Planner</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-block" data-dismiss="modal">Cancel</button> </div> </div> </div> </div>                    <div class="modal fade" id="googlePlayModal" role="dialog" aria-labelledby="googlePlayModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title text-center">Google Play</h3> </div> <div class="modal-body text-center"> <p>Select a Topgrade app to view on Google Play.</p> <br> <a target="_blank" href="https://play.google.com/store/apps/details?id=com.revisionquizmaker.revisionquizmaker" class="btn btn-primary btn-block" role="button">Quiz Maker</a> <br> <a target="_blank" href="https://play.google.com/store/apps/details?id=com.revisionquizmaker.flashcardmaker" class="btn btn-primary btn-block" role="button">Flashcard Maker</a> <br> <a target="_blank" href="https://play.google.com/store/apps/details?id=ac.topgrade.android.course" class="btn btn-primary btn-block" role="button">Course Maker</a> <br> <a target="_blank" href="https://play.google.com/store/apps/details?id=topgrade.ac.topgradestudyplanner.topgradestudyplanner" class="btn btn-primary btn-block" role="button">Study Planner</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-block" data-dismiss="modal">Cancel</button> </div> </div> </div> </div>        <script type="text/javascript">
            $('#confirmDelete').on('show.bs.modal', function (e) {
                $message = $(e.relatedTarget).attr('data-message');
                $(this).find('.modal-body p').text($message);
                $title = $(e.relatedTarget).attr('data-title');
                $(this).find('.modal-title').text($title);

                // Pass form reference to modal for submission on yes/ok
                var form = $(e.relatedTarget).closest('form');
                $(this).find('.modal-footer #confirm').data('form', form);
            });

            <!-- Form confirm (yes/ok) handler, submits form -->
            $('#confirmDelete').find('.modal-footer #confirm').on('click', function(){
                $(this).data('form').submit();
            });
        </script>
        <script type="text/javascript">
            $('#flagModal').on('show.bs.modal', function (e) {
                // Pass form reference to modal for submission on yes/ok
                var form = $(e.relatedTarget).closest('form');
                $(this).find('.modal-footer #confirm').data('form', form);
            });
            <!-- Form confirm (yes/ok) handler, submits form -->
            $('#flagModal').find('.modal-footer #confirm').on('click', function(){
                $(this).data('form').submit();
            });
        </script>
        <script type="text/javascript">
            $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
            });
        </script>
                    <footer class="footer primary-background-color" style="padding-top: 10px;">
                <div class="col-md-12 primary-background-color" style="padding-top: 10px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px;"> 
                    <p class="primary-foreground-color" style="display:inline;"><b><i class="fas fa-globe"></i></b> </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/id/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">Bahasa Indonesia</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/ms/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">Bahasa Melayu</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/de/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">Deutsch</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/en/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">English</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/es/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">español</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/fr/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">français</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/it/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">italiano</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/nl/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">Nederlands</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/pl/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">polski</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/pt/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">português</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/vi/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">Tiếng Việt</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/tr/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">Türkçe</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/el/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">Ελληνικά</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/ru/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">русский</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/ar/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">العربية</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/hi/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">हिन्दी</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/ja/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">日本語</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/zh/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">简体中文</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/zh-Hant/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">繁體中文</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                                    <a style="display:inline;" href="https://topgradeapp.com/ko/lesson/avoir-une-bonne-structure-de-page" class="primary-foreground-color">한국어</a>
                            <p style="display:inline;" class="primary-foreground-color">  |  </p>
                                        </div>
                <div class="clearfix primary-background-color"></div>
                                    <div class="col-md-12 primary-background-color" style="padding-bottom: 10px; padding-left: 32px; padding-right: 32px;"> 
                        <a class="pull-right" type='button' data-toggle="modal" data-target="#appleAppStoreModal">
                            <img style="padding: 3px; cursor: pointer;" alt="Download from iTunes App Store" src="/badge-download-on-the-app-store.png" width="160" height="50"> 
                        </a>
                        <a class="pull-right" type='button' data-toggle="modal" data-target="#googlePlayModal">
                            <img style="padding: 3px; cursor: pointer;" alt="Download from Google Play Store" src="/getOnGooglePlay.png" width="140" height="50"> 
                        </a>
                        <div class="clearfix primary-background-color"></div>
                    </div>
                                <div class="text-center primary-background-color primary-foreground-color" style="padding-left: 8px; padding-right: 8px;">
                                                                <a class="primary-foreground-color" href="/contactUs"> Contact Us</a> |
                                                                <a class="primary-foreground-color" href="https://topgradenews.com"> News</a>
                        | <a class="primary-foreground-color" href="/press"> Press</a>
                        <!--| <a class="primary-foreground-color" href="/jobs"> Jobs</a>-->
                        <!--| <a class="primary-foreground-color" href="/services/white-label"> White-Label</a>-->
                        |
                                                                <a class="primary-foreground-color" href="/app/termsAndConditions"> Terms and Conditions </a>
                                                            |
                                                                <a class="primary-foreground-color" href="/app/privacypolicy"> Privacy Policy</a>
                                    </div> 
                <div class="text-center primary-background-color primary-foreground-color" style="padding-left: 8px; padding-right: 8px;">
                                            <a class="primary-foreground-color" href="https://sureware.co.uk">© Sureware Ltd. 2013-2024 | Registered in England and Wales | Company Number 10718435</a><br>
                                    </div>
                <div class="text-center primary-background-color primary-foreground-color" style="padding-top: 12px; padding-left: 8px; padding-right: 8px;">
                    <p class="primary-foreground-color"> Topgrade is a trademark of Sureware Ltd. |  Website Version 6.2.5 </p><br>
                </div>
                <div class="clearfix primary-background-color"></div>
            </footer>
                <script src="/js/app.min.js"></script>
        <script src="/js/adminlte.min.js"></script>
                                                        <script>
    
    $(document).on("click", ".open-EditContentDialog", function () {
        
        var myEditId = $(this).data('id');
                
        var formAction = $("#editContent").attr("action");
        
        // Remove blockNumber if already there
        var n = formAction.lastIndexOf('/');
        var lastSegment = formAction.substring(n + 1);
        
        if (lastSegment != 'block') {
            
            formAction = formAction.substring(0, n);
            
        }
        
        // Replace all leading non-digits with nothing
        var blockNumber = myEditId.replace( /^\D+/g, ''); 

        $("#editContent").attr("action", formAction.concat("/").concat(blockNumber));
        
        if (myEditId.includes('editResource')) {
            
            showQuizBlock();
            
        } else if (myEditId.includes('editText')) {

            var existingTextId = "html_".concat(myEditId);
            var existingText = document.getElementById(existingTextId).innerHTML;
            $('#textBlockEditorEdit').summernote('code', existingText);
                        
            showTextBlock();
            
        } else if (myEditId.includes('editVideo')) {
            
            document.getElementById('video_uri_edit').value = document.getElementById('existingURL_'.concat(myEditId)).innerHTML;

            showVideoBlock();
            
        }
        
        showEdit();
             
    });
    
    $(document).on("click", ".open-DeleteContentDialog", function () {
        
        var myEditId = $(this).data('id');
                
        var formAction = $("#deleteContent").attr("action");
     
        // Remove id if already there
        var n = formAction.lastIndexOf('/');
        var lastSegment = formAction.substring(n + 1);
        
        if (lastSegment != 'block') {
            
            formAction = formAction.substring(0, n);
            
        }
        
        $("#deleteContent").attr("action", formAction.concat("/").concat(myEditId));
     
    });
    
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    function onYouTubeIframeAPIReady() {
        
        var elements = document.getElementsByClassName('youTubePlayer');
    
        var arrayLength = elements.length;
    
        for (var i = 0; i < arrayLength; i++) {
        
            var element = elements[i];
            var elementId = element.id;
            var splitIndex = elementId.lastIndexOf('=');
            var youTubeId = elementId.substring(splitIndex + 1);
        
           var player = new YT.Player(elementId, {
                height: '390',
                width: '640',
                videoId: youTubeId,
                playerVars: {
                    'rel': 0,
                    'showinfo': 0
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    }
    
    function onPlayerReady(event) {}
    function onPlayerStateChange(event) {}
    
</script>
                                    </body>
</html>
<script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'87a88bf5d85d607c',t:'MTcxNDE1NTIwNi4zNTAwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script>