.. include:: /Includes.rst.txt .. _open-template: Open the HTML template ********************** .. note:: You can open and edit HTML files with any text editor. However, you will make your life much easier, if you use an editor, which supports syntax highlighting. With syntax highlighting you will see directly where a certain tag begins, where it ends, where there are attributes and so on. If you don't already have one of these, a quick search on Internet will turn up a lot of them and you should be able to find one which runs on your computer and with which you are comfortable. Our HTML template is the file :file:`fileadmin/doc_tut_templating/index.html`. You will notice that this is just a normal HTML document. You can open it with your web browser and see the design. .. tip:: Do not use :file:`index-with-markers.html` which is the finished result, with all marks and subparts. You can check it out when you're done to validate your work, but using it right away would spoil your learning process. Now open the HTML template with your favorite text editor. .. _add-marker-subparts: .. _add-marks-subparts: Add marks/subparts ****************** We will now modify the HTML template by adding marks and subparts. .. _add-subpart-document: Add the subpart "DOCUMENT" ~~~~~~~~~~~~~~~~~~~~~~~~~~ Add a subpart called "DOCUMENT" inside the body tag. Remember that subparts come in pairs. Hence the first marker of this subpart should be directly behind the opening :code:`` tag and the second one directly in front of the closing :code:`` tag so that everything in the :code:`` tag is inside that subpart. TYPO3 CMS will later recreate its own HTML structure for us and we will configure TYPO3 CMS to only put the HTML code inside that structure, which is inside this subpart (all tags "outside" the two :code:`###DOCUMENT###` markers, i.e., :code:``, :code:``, :code:``, :code:`<meta />`, :code:`<link>` and :code:`<body>` will not be influenced). That is the reason, why we need it here. .. code-block:: html :emphasize-lines: 14,38 <!DOCTYPE html> <html> <head> <title> Here is the title ...
...
.. _subpart-metanav: Add the subpart "METANAV" ~~~~~~~~~~~~~~~~~~~~~~~~~ Inside the div box with the id "metanav" comes the navigation to some special pages. Add a subpart called "METANAV", so that the whole content of that box is inside the subpart. This is exactly the same process as the previous exercise. .. code-block:: html :emphasize-lines: 9,14