Viktiga grundläggande begrepp om hemsidor

HTML, server, PHP… Det är många begrepp som kan behöva en förklaring innan du börjar göra din hemsida.

Även om du inte vill lära dig kodning och mer avancerade saker är några grundläggande begrepp bra att kunna. Du kan gå direkt till nästa sida, men du kommer ha nytta av att ägna någon minut till att läsa grunderna om hur hemsidan fungerar.

Viktigaste delen av hemsidan är servern. Det är en hårddisk där du har filer som får hemsidan att fungera. Servern är tillgänglig för andras datorer genom internet. På servern har du textfiler med koder som berättar för webbläsaren, till exempel Chrome och Safari, hur hemsidan ska se ut. På servern har du även bilder och andra mediafiler.

Databasen är en annan viktig del av hemsidan. Databasen består av en tabell med information. Du kan till exempel ha en tabell för texten på dina sidor. Du har då en rad för varje sida. I en kolumn har du texten du ska visa. I en annan har du publiceringsdatum, en tredje har tittel och så vidare. En stor fördel med att ha ha informationen i en databas är att du kan sortera sidorna i alfabetisk ordning eller visa alla sidor som publicerats i ett datumintervall. Du kan välja att visa innehållet i en kolumn på en sida, till exempel namnet på alla artiklar.

Från början använde man HTML för att skicka information till en dator. Man skrev taggar för att förklara för datorerna vad som skulle visas. Man skrev taggen <p> och så kom ett stycke med text. När stycket var färdigt skrev man sluttaggen </p>. Vill man ha en stor överskrift skrev man <h1>. En mindre överskrift angav man med <h2> och så vidare. Man avslutade överskriften med samma kod, men la till /. Skrifttyp och storlek bestämdes av nätläsaren. Datorer fanns nästan bara på universitet. Att det skulle vara lockande att läsa en hemsida brydde man sig inte om.

Exempel på HTML-kod:

<div id="main-slider" data-stretch="true"><div class="flexslider" id="metaslider-demo"><ul class="slides"><li><div class="content"> <img src="https://www.gorenhemsida.se/wp-content/themes/vantage/slider/backgrounds/slide-responsive-overlay.png" width="1080" height="420" alt="Demo Slide" /></div> <img src="https://www.gorenhemsida.se/wp-content/themes/vantage/slider/backgrounds/slide-4.jpg" class="ms-default-image" width="1080" height="420" alt="Demo Slide" /></li><li><div class="content"> <img src="https://www.gorenhemsida.se/wp-content/themes/vantage/slider/backgrounds/slide-plugins-overlay.png" width="1080" height="420" alt="Demo Slide" /></div>

Ibland kan det uppstå konstiga problem som är svåra att rätta till när du redigerar text på dins sidor i WordPress. Ofta är det någon HTML-kod som hamnat där en inte ska. Kan du det mest grundläggande är det lätt att åtgärda felet. Läs mer om det i min artikel Grundläggande HTML.

Det fanns möjligheter att bestämma hur sidan skulle se ut med hjälp av HTML. Ville man bestämma textens utseende var man tvungen att lägga till kod i den tagg man ville ändra. Skulle all text se likadan ut var man tvungen att ändra alla taggar av den typen. Det blev opraktiskt, man uppfann därför ett nytt språk, CSS. Det ger möjlighet att bestämma utseende på hela sidan: Färg på länkar, ram runt bilder och så vidare.

Exempel på CSS-kod:

h6:lang(ary), .page-title:lang(ary), blockquote cite:lang(ary), table:lang(ary), .button:lang(ary),
input:lang(ary)[type="button"],
input:lang(ary)[type="reset"],
input:lang(ary)[type="submit"], .comment-navigation .nav-previous:lang(ary),
.comment-navigation .nav-next:lang(ary), .comment-list .pingback .comment-body:lang(ary),
.comment-list .trackback .comment-body:lang(ary), .comment-list .pingback .comment-body .comment-edit-link:lang(ary),
.comment-list .trackback .comment-body .comment-edit-link:lang(ary), .comment-form .comment-notes:lang(ary),
.comment-form label:lang(ary), .widget_archive ul li:lang(ary),
.widget_categories ul li:lang(ary),
.widget_meta ul li:lang(ary),
.widget_nav_menu ul li:lang(ary),
.widget_pages ul li:lang(ary),
.widget_recent_comments ul li:lang(ary),

 

Det kan vara praktiskt om hemsidan anpassar sig efter användaren. Hemsidan blir inte så användarvänlig för en person med mobiltelefon om den är anpassad för en stor dataskärm och motsatt. Om man är inloggad ska det stå ”Logga ut” eller ”Användarinställningar” istället för ”Logga in”. Om användaren har en fransk nätläsare ska sidan visas på franska och så vidare. Kodspråket PHP kan ger möjligheter att anpassa vad besökaren ska se beroende på olika kriterier, till exempel storlek på skärmen. Ofta blandar man PHP med HTML i samma dokument.

Exempel på PHP-kod:

<footer id="colophon" class="site-footer">
    <?php get_template_part( 'template-parts/footer/footer', 'widgets' ); ?>
    <div class="site-info">
        <?php $blog_info = get_bloginfo( 'name' ); ?>
        <?php if ( ! empty( $blog_info ) ) : ?>
            <a class="site-name" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>,
        <?php endif; ?>
        <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentynineteen' ) ); ?>" class="imprint">
            <?php

 

Vill du ha möjlighet till att användaren ska kunna ändra saker på hemsidan? Du kanske vill att hen ska kunna räkna ut saker genom att ange värden i rutor. För det behövs Javascript.

 

Det var en mycket snabb introduktion till olika kodspråk. Du behöver inte kunna detta men det hjälper. Jag har skrivit om grunderna i HTML för dig som är intresserad. Det kommer hjälpa dig en dag när texten på din sida inte visas på rätt sätt av oförklarliga orsaker. Nu är det dags att gå vidare och se på hur man installerar WordPress.