.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 id="facebookButton" type="button" class="btn btn-link"><img height="34" width="34" src="/img/facebook_logo_144.png"></button>
                                <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="IpFxnlK2t6BOoSBbm1mKSfTVzjRrTVdqUBHmtGPd">
                        <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("facebookButton").addEventListener("click", userClickedFacebookOption);
        
        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-2021 | 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 defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"rayId":"65ee20f86b65cec0","version":"2021.5.2","r":1,"token":"21b6dc86b0c747169256c81c533a1be4","si":10}'></script>