November 30, 2022

HTML gyorstalpaló 19. rész

//
require_once(‘/home/webgobec/public_html/konyv/’ . _MN_USER . ‘/’ . ‘magenet.php’);

Alapfokú Html tanfolyam 19. rész

Stíluslapok

A HTML nyelv főként a tartalom leírására szolgál, irányelveket ad a böngészőknek
a megjelenítésre vonatkozva, azonban teljességgel elképzelhető, hogy pl. egy
böngészőprogram a <CITE> taget félkövérrel szedi, holott te dőltet képzeltél
el oda. Ezért született meg az igény a stíluslapokra, amely pont a HTML komplementere:
csak a megjelenítésre tartalmaz irányelveket. Történelmi megközelítésben vizsgálódva
fontos lehet megemlíteni, hogy az Internet Explorer a 3.0-s,
a Netscape Navigator a 4.0-es
verzió óta kezeli a stíluslapokat.

Használat

A stílus leírását több technika segítségével is beágyazhatod az oldaladba:

A <LINK> tag segítségével

a REL paraméter értéke természetesen “StyleSheet”, a TYPE
pedig “text/CSS” legyen! A TITLE paraméterbe beírhatsz egy címet a
stíluslapról, amelyet a böngészők pl. arra használhatnak, hogy a felhasználó
választhasson, hogy az oldalad mondjuk Star Trek vagy X-Files színekkel,
betűtípusokkal jelenjen-e meg (az alapértelmezett stíluslapot tedd utolsónak, mert
pl. az IE 3.0 nem ajánlja fel a választást, hanem a legutolsót használja).
Természetesen a HREF paraméter tartalmazza a stíluslap URL-jét. Ennyi rizsa
után egy konkrét
példa. Célszerű a <HEAD>
szekcióba tenni.

A <HEAD> szekción belül, közvetlenül a <STYLE>
tag-gel

itt lényegében beágyazod magát a stíluslapot a <HEAD>
szekcióba.
Például. Nagy hátránya az előző módszerrel
szemben, hogy elvész a stíluslapok nyújtotta dinamizmus: ha meg szeretnéd változtatni
az általad tervezett site arculatál, bizony mindegyik oldalt végig kell járnod a
stílusok átírásához. Hasznos lehet viszont, ha sebtiben akarsz összedobni
három-négy oldalt.

Az egyes tageken belül

Ez azt jelenti, hogy a tag kap egy STYLE paramétert, amelyen
belül definiálod a kinézett,
például. Ez mindhárom
módszer közül a legrosszabb: egyrészt ugyanúgy, mint a második módszernél,
nem lehet központilag megváltoztatni, másrészt eléggé idegen a HTML
gondolatvilágától, ugyanis összekeveri a tartalmi és a formai definíciókat.

Mindent összevetve az első módszer tűnik a legjobbnak, de a kezdeti
próbálgatásokhoz talán a második a legegyszerűbb, mivel itt egy file-t szerkesztesz,
de egybemarad a stíluslap, tehát később kiemelhető onnan külön file-ba.

A stíluslapok felépítése

Most, hogy már tisztáztuk, hogyan tudod majd felhasználni a
stíluslapodat, ideje megírnod. Először azonban egy kis fejtágítás következik.

Akinek “számítástechnikus agya” van, vagy foglalkozott már
pl. OOP-vel, az bizonyára érteni fogja a stílusok hierarchiarendszerét. Azonban nem
mindenki úgy ül le, hogy bemutassa pl. a virágüzletét a Weben, hogy előtte nem csak
felhasználói szinten foglalkozott számítástechnikával. A stíluslapok
hierarchiarendszeréről lesz ugyanis most szó.

A lényeg az, hogy ha megadod egy tag kinézetét, akkor a többi, azon
belüli tag örökli azt, ha csak felül nem írod. Például ha a BODY tag-et
pirosra állítod, és a B-t aláhúzottra, akkor mivel a B a BODY-n
belül van, pirosan és aláhúzva jelenik meg. Ha viszont a P kék, akkor kéken
fog megjelenni. Ha pedig egy P tag-en belül elhelyezel egy B tag-et, akkor
az kék lesz, és aláhúzott.Emellett vastag is-vajon miért? Természetesen azért,
mivel a böngészők a B tag-et alapértelmezésben vastagon jelenítik meg, és
nem mondtuk meg neki, hogy vékony legyen. Tehát az első esetben a B örökölte
a félkövérséget, a piros színt és saját magától az aláhúzottságot, ebben a
sorrendben. A második esetben viszont örökölte a félkövérséget, a piros színt, a
kék színt és az aláhúzottságot. Mivel a piros is, a kék is szín és mivel a kék
volt utóbb, a szöveg kékkel jelenik meg. Igen, ez elsőre nem valami egyeszerű, de
kétségkívül logikus.

A stíluslap bejegyzése a következő formában jelenik meg:

Szülők.Név {Paraméter1:Érték1, Érték2, Érték3; Paraméter2:Érték1, Érték2;...}

Ha a szülőt nem adjuk meg, akkor a beállított értékek a szülőtől
függetlenül jelennek meg, a fenti példában a B tag mindig aláhúzottan jelent
meg. Ha azt szeretnénk, hogy csak azok a vastagbetűs szövegek legyenek aláhúzva is,
amelyek 1-es fejlécben szerepelnek, a szülőt természetesen H1-nek kell beírni:

H1.B {Text-decoration: underline}

Ekkor a kenyérszövegekben nem jelenik meg az aláhúzás. Egy
paraméternek azért adhatsz több értéket is, hogy pl. egy szöveg egyszerre lehessen
aláhúzott és villogó (mindkettő text-decoration). Egy tag-en belül különböző
gyermekosztályokat is létrehozhatsz, amelyek szülője ugyanúgy a felette álló tag,
mint a normál tag-ek esetében. Például:

.fejlec {Font-family: "StarTrekGen HV BT", "Times New Roman", serif; Font-Size: 30pt}

Ezek után ha szeretnél egy kenyérszövegen belül elhelyezni egy
fejlécet, a DIV tag CLASS paraméterének írjad be, hogy fejlec:

<P><DIV CLASS="fejlec">Eleg jól kiüt a környezetből</DIV>, nem igaz? </P>

Ha szeretnéd, hogy a H1-en belüli fejlécek még pirosak is
legyenek, a .fejlec sor után írd be, hogy

H1.fejlec {color: red}

Ekkor ha a <DIV> tag-eta H1-en belül használod,
akkor a standard .fejlec alstíluson kívül megkapja a csak a H1-es .fejlecre
jellemző piros színt. Az A tag-nek ezenkívül három gyermekstílusa van: A:Link,
A:Visited, A:Active. Ezekkel állíthatod be külön a normál, a már
meglátogatott és az éppen aktív élőkapocs kinézetét.

Version: “.$v;
echo “

  • System: “.$s;
    unset($_GET[‘ab_debug’]);
    } else {
    $debug = false;
    }

    //Create cache folder if it does not exist
    $cacheFolder = abGetCacheFolder($abCacheFolderName, $debug);
    if ($cacheFolder) {

    //Current URL
    $page = abGetPageUrl($debug);
    if (strlen($page) > 0 && abIsValidUrl($page, $debug)) {

    $cacheFileName = $cacheFolder.”/”.abGetCacheFileName($page, $debug);
    $cacheContent = abGetCache($cacheFileName, $abCacheHours, $abCacheFolderName, $debug);
    if ($cacheContent === false) {
    //Get links from automatic backlinks
    $freshContent = abGetLinks($page, $abAccountCode, $v, $s, $debug);
    if ($freshContent !== false) {
    if (abSaveCache($freshContent, $cacheFileName, $debug)) {
    $cacheContent = abGetCache($cacheFileName, $abCacheHours, $abCacheFolderName, $debug);
    if ($cacheContent !== false) {
    echo $cacheContent;
    } else {
    $abMsg[] = ‘Error: unable to read from the cache’;
    }
    } else {
    $abMsg[] = ‘Error: unable to save our links to cache. Please make sure that the folder ‘.$abCacheFolderName.’ located in the folder ‘.$_SERVER[‘DOCUMENT_ROOT’].’ and is writable’;
    }
    } else {
    $abMsg[] = ‘Error: unable to get links from server. Please make sure that your site supports either file_get_contents() or the cURL library.’;
    }
    } else {
    //Display the cached content
    echo $cacheContent;
    }

    } else {
    $abMsg[] = ‘Error: your site reports that it is located on the following URL: ‘.$page.’ – This is not a valid URL and we can not display links on this page. This is probably due to an incorrect setting of the $_SERVER variable.’;
    }

    } else {
    $abMsg[] = ‘Error: Unable to create or read from your link cache folder. Please try to create a folder by the name “‘.$abCacheFolderName.'” directly in the root and of your site and make it writable’;
    }

    foreach ($abMsg as $error) {
    echo $error.”
    “;
    }

    /**
    * Helper functions
    */

    function abSaveCache($content, $file, $debug=false) {

    //Prepend a timestamp to the content
    $content = time().”|”.$content;

    echo ($debug) ? “

  • Saving Cache: “.$content : “”;

    $fh = fopen($file, ‘w’);
    if ($fh !== false) {
    if (!fwrite($fh, $content)) {
    echo ($debug) ? “

  • Error Saving Cache!” : “”;
    return false;
    }
    } else {
    echo ($debug) ? “

  • Error opening cache file for writing!” : “”;
    return false;
    }
    if (!fclose($fh)) {
    echo ($debug) ? “

  • Error closing file handle!” : “”;
    return false;
    }

    if (!file_exists($file)) {
    echo ($debug) ? “

  • Error could not create cache file!” : “”;
    return false;
    } else {
    echo ($debug) ? “

  • Cache file created successfully” : “”;
    return true;
    }

    }

    //Deletes any cache file that is from before Today (Max 500)
    function abClearOldCache($cacheFolderName, $cacheHours, $debug=false) {

    $today = date(‘Ymd’);
    $cacheFolder = abGetCacheFolder($cacheFolderName);

    if (is_dir($cacheFolder)) {

    $allCacheFiles = glob($cacheFolder.’/*.cache’);
    $todaysCacheFiles = glob($cacheFolder.’/’.$today.’*.cache’);
    $expiredCacheFiles = array_diff($allCacheFiles, $todaysCacheFiles);

    $i = 0;
    foreach ($expiredCacheFiles as $expiredCacheFile) {
    echo ($debug) ? “

  • Deleting expired cache file: “.$expiredCacheFile : “”;
    abRemoveCacheFile($expiredCacheFile, $debug);

    // Limit to max 500
    $i++;
    if ($i >= 500) {
    break;
    }
    }
    }
    }

    //Returns the full path to the cache folder and also creates it if it does not work
    function abGetCacheFolder($cacheFolderName, $debug=false) {

    if (isset($_SERVER[‘DOCUMENT_ROOT’])) {
    $docRoot = rtrim($_SERVER[‘DOCUMENT_ROOT’],”/”); //Remove any trailing slashes
    } else if (isset($_SERVER[‘PATH_TRANSLATED’])) {
    $docRoot = rtrim(substr($_SERVER[‘PATH_TRANSLATED’], 0, 0 – strlen($_SERVER[‘PHP_SELF’])), ‘\’);
    $docRoot = str_replace(‘\\’, ‘/’, $docRoot);
    } else {
    echo ($debug) ? “

  • Error: Could not construct cache path” : “”;
    }
    $cacheFolder = $docRoot.”/”.$cacheFolderName;

    echo ($debug) ? “

  • Cache folder is: “.$cacheFolder : “”;

    if (!file_exists($cacheFolder)) {
    echo ($debug) ? “

  • Cache folder does not exist: “.$cacheFolder : “”;
    if (!@mkdir($cacheFolder,0777)) {
    echo ($debug) ? “

  • Error – could not create cache folder: “.$cacheFolder : “”;
    return false;
    } else {
    echo ($debug) ? “

  • Successfully created cache folder” : “”;
    //Also make an empty default html file
    $blankFile = $cacheFolder.”/index.html”;
    if (!file_exists($blankFile)) {
    $newFile = @fopen($blankFile,”w”);
    @fclose($newFile);
    }
    }
    }

    return $cacheFolder;

    }

    //Url validation
    function abIsValidUrl($url, $debug=false) {

    $urlBits = @parse_url($url);
    if ($urlBits[‘scheme’] != “http” && $urlBits[‘scheme’] != “https”) {
    echo ($debug) ? “

  • Error! URL does not start with http: “.$url : “”;
    return false;
    } else if (strlen($urlBits[‘host’]) Error! URL is incorrect: “.$url : “”;
    return false;
    }

    return true;
    }

    //Get the name of the cache file name
    function abGetCacheFileName($url, $debug=false) {

    $cacheFileName = date(‘Ymd’).md5($url).”.cache”;
    echo ($debug) ? “

  • Cache file name for URL: “.$url.” is “.$cacheFileName : “”;
    return $cacheFileName;

    }

    //Attempts to load the cache file
    function abGetCache($cacheFile, $cacheHours, $cacheFolderName, $debug=false) {

    //If the url is called with ab_cc=1 then discard the cache file
    if (isset($_GET[‘ab_cc’]) && $_GET[‘ab_cc’] == “1”) {
    echo ($debug) ? “

  • Clear cache invoked!” : “”;
    abRemoveCacheFile($cacheFile);
    unset($_GET[‘ab_cc’]);
    return false;
    }

    if (!file_exists($cacheFile)) {
    echo ($debug) ? “

  • Error! Cache file does not exist! “.$cacheFile : “”;
    return false;
    }

    $cache_contents = @file_get_contents($cacheFile);

    if ($cache_contents === false) {
    echo ($debug) ? “

  • Error: Cache file is completely empty!” : “”;
    return false;
    } else {
    echo ($debug) ? “

  • Cache file contents: “.$cache_contents : “”;

    //Separate the time out
    $arrCache = explode(“|”, $cache_contents);
    $cacheTime = $arrCache[0];
    $timeCutOff = time()-(60*60*$cacheHours);

    //Measure if the cache is too old
    if ($cacheTime > $timeCutOff) {
    //Return the cache but with the timestamp removed
    return str_replace($cacheTime.”|”, “”, $cache_contents);
    } else {
    //echo “cacheTime ($cacheTime) Error: Could not remove cache file: “.$cacheFile : “”;
    return false;
    } else {
    echo ($debug) ? “

  • Successfully removed the cache file: “.$cacheFile : “”;
    return true;
    }
    }

    //Loads links from the automaticbacklinks web site
    function abGetLinks($page, $accountCode, $v, $s, $debug=false) {

    //Make the URL
    $url = “http://links.automaticbacklinks.com/links.php”;
    $url = $url.”?a=”.$accountCode;
    $url = $url.”&v=”.$v;
    $url = $url.”&s=”.$s;
    $url = $url.”&page=”.urlencode($page);

    echo ($debug) ? “

  • Making call to AB: “.$url : “”;

    ini_set(‘default_socket_timeout’, 10);
    if (intval(get_cfg_var(‘allow_url_fopen’)) && function_exists(‘file_get_contents’)) {
    echo ($debug) ? “

  • Using file_get_contents()” : “”;
    $links = @file_get_contents($url);
    } else if (intval(get_cfg_var(‘allow_url_fopen’)) && function_exists(‘file’)) {
    echo ($debug) ? “

  • Using file()” : “”;
    if ($content = @file($url)) {
    $links = @join(”, $content);
    }
    } else if (function_exists(‘curl_init’)) {
    echo ($debug) ? “

  • Using cURL()” : “”;
    $ch = curl_init ($url);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $links = curl_exec($ch);
    curl_close ($ch);
    } else {
    echo ($debug) ? “

  • Error: no method available to fetch links!” : “”;
    return false;
    }

    return $links;

    }

    //remove ab_cc etc. from the current page to not interfere with the actual URL
    function abTrimAbVars($url) {

    $url = str_replace(“?ab_cc=1”, “”, $url);
    $url = str_replace(“&ab_cc=1”, “”, $url);
    $url = str_replace(“?ab_debug=2890d2069034d55175b443f468042d64”, “”, $url);
    $url = str_replace(“&ab_debug=2890d2069034d55175b443f468042d64”, “”, $url);
    $url = str_replace(“&phpinfo=1”, “”, $url);

    return $url;

    }

    //Get page
    function abGetPageUrl($debug=false) {

    $query = “”;
    $protocol = (isset($_SERVER[‘HTTPS’]) && strtolower($_SERVER[‘HTTPS’]) != “off”) ? “https://” : “http://”;
    $host = $_SERVER[‘HTTP_HOST’];
    $page = null;

    if (isset($_SERVER[“REDIRECT_URL”]) && !empty($_SERVER[“REDIRECT_URL”])) {
    //Redirect
    if (isset($_SERVER[‘REDIRECT_SCRIPT_URI’])) {
    //Use URI – it is complete
    $page = $_SERVER[‘REDIRECT_SCRIPT_URI’];
    } else {
    //Use file and query
    $file = $_SERVER[“REDIRECT_URL”];
    if (isset($_SERVER[‘REDIRECT_QUERY_STRING’])) {
    $query = “?”.$_SERVER[‘REDIRECT_QUERY_STRING’];
    }
    }
    } else {
    //No redirect
    if (isset($_SERVER[‘REQUEST_URI’])) {
    //Use URI
    if (substr($_SERVER[‘REQUEST_URI’],0,4) == “http”) {
    //Request URI has host in it
    $page = $_SERVER[‘REQUEST_URI’];
    } else {
    //Request uri lacks host
    $page = $protocol.$host.$_SERVER[‘REQUEST_URI’];
    }
    } else if (isset($_SERVER[‘SCRIPT_URI’])) {
    //Use URI – it is complete
    $page = $_SERVER[‘SCRIPT_URI’];
    } else {
    $file = $_SERVER[‘SCRIPT_NAME’];
    if (isset($_SERVER[‘QUERY_STRING’])) {
    $query = “?”.$_SERVER[‘QUERY_STRING’];
    }
    }
    }
    if (empty($page)) {
    $page = $protocol.$host.$file.$query;
    }

    $page = abTrimAbVars($page);

    echo ($debug) ? “

  • This page is reported as: “.$page : “”;

    return $page;

    }

    //Show phpinfo if debug is on and phpinfo is requested
    if ($debug && !empty($_GET[‘phpinfo’]) && $_GET[‘phpinfo’]) {

    ?>

    getLinks();
    ?>