#W5 Web languages 1

#W5 Web languages 1

Basis Html

As mentioned in #1 Addresses and Routing  html  is a client side web languages. Many people get frustrated when they are starting to learn html and coding in general, but dont despair. You have to remember, that it is a laungages and if you never have seen a languages before, it will always be like readig greek (almost). But html and coding have a kind of logic to it, that makes it easy.

A basic hmtl website looks lige this:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html>
         <head>  
                          <title>My first styled page</title>
        </head>  

          <body> 
                       <div> <p> INDHOLD </p> </div>
        </body>
</html>

Using netbeans i have written a basic html website and populated it with information using basic tags like paragraphs, links, images and lists. You can se an example of the code in the header image, this is a screenshoot of of the result in the browser, without Css.

Skærmbillede 2013-11-24 kl. 20.05.12

 

 

 


Basic CSS

Css = ”Cascading style sheet”
Css is the styling of your and can be written in the html code or as an extrenal site linked to your html in the header.

 In-site css lookes like this:

<style type=”text/css”>  
body {
font-family: Times, serif;   
color: purple;    
background-color: #d8da3d
}

To link an external css file you just write:

<link rel=”stylesheet” hret=”Navnet på dit stylesheet.css” type=”text/css”>

To target a specific content, we use selectores like ; element, id and class. This allows us to make a specialle identifikation to the specific content, which then can be accesed in the css file.

Html                                        Css

Class= ”menu”        =          .menu

Id=”menu                  =          #menu

 

I have here styled the basis html website with some basic css. It’s not pretty, but it shows the basic Css properties like backgrund-color, font-style etc.

Skærmbillede 2013-11-24 kl. 19.44.04Skærmbillede 2013-11-24 kl. 19.42.51

Skriv et svar

Din e-mailadresse vil ikke blive offentliggjort. Krævede felter er markeret med *

Disse HTML koder og attributter er tilladte: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>