Our Little Church DIY:
HTML5 and CSS3 Responsive Pages

The web page not only has to fit into a personal computer, but also has to fit into a cell phone screen. This is not as simple as reducing the size of everything. There are times which the order of items in the page are reorganized.

One of the keys is the HTML standards changed when going from standard HTML and CSS to HTML5 and CSS3. We no longer use tables, but rather there are work around, which appears tables are beings used. We will learn about the call to Cascading Style Sheet (CSS) files.

HTML Responsive Text

Please study CSS3 Responsive Text.

HTML Responsive Images

Please study HTML Responsive Images.

HTML Responsive Navigation

Please study HTML Responsive Navigation.

HTML Title Tag

Please study HTML Title Tag.

HTML Meta Tag

Please study HTML Meta Tag.


<!DOCTYPE html>
<!--
 * This is the Written For Christ DIY Home web-page, for Our Little Church.
 * Author: John Fischer III of Written For Christ in 2021.
 * Updated: 
-->

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <?php include("view/head.php"); ?>
        <title><?php echo CHURCH_ABBREV_NAME; ?>: Home Page</title>
        <meta name="description" content="<?php echo CHURCH_FULL_NAME; ?>" />
        <meta name="keywords" content="<?php echo CHURCH_FULL_NAME; ?> ,
                Christian, church" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <?php include("view/header.php"); ?>
        <?php include("view/nav.php"); ?>
        ...
        <?php include("view/footer.php"); ?>
    </body>
</html>

Reviewing the file:

Let us review the lines between the leading <head> and the closing </head>. The first line of the group is the "head.php" file, which we know is majority of the code for Head. The "head.php" file contains the link for the "main.css" file, which controls the responsiveness of the web pages. We do not recommend you touch the "main.css" file unless you understand HTML5 and CSS3.

The next line starts with <title> tag and is the associated <title>The <title> tag and <meta> tags use CONSTANTS, as we know in the programming world is normally done in ALL CAPITALIZATION. After you download the files, you will need to update the constants.

The <meta> tag (as you are aware) covers the description, keywords, viewport, and the author. As you remember, the Head contains the details such as the links for the CSS files, JavaScript files, Title tag, and Meta tags.