********** HTML + CSS ********** .. admonition:: reading * The official HTML spec: https://html.spec.whatwg.org/ * Reference on the different tags: https://www.w3schools.com/tags/default.asp Web pages are written in a combination of HTML as CSS. The basic division is that: * HTML provides the content and structure * CSS provides the style We don't have time to dive deep into how to write a modern webpage, but we can look at some of the concepts. .. note:: Our goal here is to learn how to write a basic webpage describing our codes. We are not going to be able to cover web design deeply, but hopefully we'll learn enough so that we can use templates that others have written to write our own pages. Basic HTML structure ==================== A basic HTML page has the following format: .. literalinclude:: ../../examples/html/basic/index.html :language: html :caption: ``index.html`` Some comments: * HTML *tags* need to be opened and closed to denote a block in which they apply. For instance: ``
`` opens the main body of the page and ```` closes the main body of the page. * Some tags are self-closing, and we end with ``/>``, for instance in above: ```` * The name ``index.html`` is commonly used to indicate the first page of a website. Many web-servers will automatically display this page when we go to a web site. * We can open this page in our browser as: .. prompt:: bash google-chrome index.html or .. prompt:: bash firefox index.html .. tip:: A good reference on the different tags is provided by https://www.w3schools.com/tags/default.asp Separating content ================== HTML using `headings...
``. Here's an example: .. literalinclude:: ../../examples/html/basic_headings/index.html :language: html :caption: ``index.html`` Adding CSS ========== CSS means `cascading style sheets...
`` denotes a paragraph and we could style it via: .. code:: css .center {text-align: center;} .. tip:: Accessibility is an important design consideration when making web pages, and you should use the ``alt`` tag to provide a text alternative to the image for screen readers. Responsive pages ================ A *responsive* page changes the styling based on the device / screen size. Usually this is triggered by the ``@media`` rule: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp .. tip:: Instead of writing your own page from scratch, start with a template from a site like: https://html5up.net/