askIT

Basic HTML and CSS skeleton files

media-floppy.png Download files for this lesson

Create a folder called «_webdesign». This folder will store the design for the website. Create a sub folder named «images».

Create the files «reset.css», «master.css» and «index.php».

Folder and files:

Folder

_webdesign

Folder

images (Contains all the images for the website)

image.png

dialog-error.png

image.png

dialog-information.png

image.png

dialog-warning.png

CSS

master.css (Style Sheet)

CSS

reset.css (Resets all styles set by browsers)

Txt

index.php

favicon.ico

favicon.ico

index.php

Copy the code for «index.php» below and paste it into your own index file.

<?php echo"<!DOCTYPE html>
<html lang=\"en-US\">
<head>
    <title>Community Website</title>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/reset.css\" />
    <link rel=\"stylesheet\" type=\"text/css\" href=\"_webdesign/master.css\" />
    <link rel=\"icon\" href=\"favicon.ico\" />
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
    <meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0;\"/>
</head>
<body>
    <h1>Hello! Welcome to my site!</h1>
</body>
</html>"
;
?>

master.css

Copy the code for «master.css» below and paste it into your own master file.

/**
*
* File: _webdesign/master.css
* Version 11.14 24.12.2016
* Copyright (c) 2008-2017 S. Ditlefsen
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/*- Body ---------------------------------------------------------------------------- */
body {
    font: normal 15px Tahoma, Arial, Helvetica, sans-serif;
}

reset.css

Copy the code for «reset.css» below and paste it into your own reset file.

/**
*
* File: _webdesign/reset.css
* Version 11.14 24.12.2016
* Copyright (c) 2008-2017 S. Ditlefsen
* License: http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/*- Reset ---------------------------------------------------------------------------- */
html, body, div, span, object, iframe, img {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}

/*- Basic Structure ------------------------------------------------------------------- */
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {
    display: block;
}
p{
    padding: 12px 0px 12px 0px;
    margin: 0;
}
table{
    border-spacing:0px;
}
td{
    padding: 0px;
}
preload {display:none;}

/*- Lists ------------------------------------------------------------------------------ */
ul {
    padding: 10px 0px 10px 0px;
}
ol {
    padding: 10px 0px 10px 0px;
}

/*- Line ------------------------------------------------------------------------------- */
hr{
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*- Smal -------------------------------------------------------------------------------- */
.smal{
    font-size: 10px;
}
.smal_grey{
    font-size: 10px;
    color: #444444;
}

/*- Mark, Ins and Del ------------------------------------------------------------------- */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}

/*- Abbr ---------------------------------------------------------------------------------- */
abbr[title], dfn[title] {
    border-bottom: #000 1px dotted;
    cursor:help;
}

/*- Feedback boxes ------------------------------------------------------------------------- */
.info, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url("images/dialog-information.png");
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url("images/dialog-information.png");
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url("images/dialog-warning.png");
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url("images/dialog-error.png");
}

images

Download the images below to your images folder. They are used to write feedback to the user.

dialog-error.png
dialog-error.png

dialog-information.png
dialog-information.png

dialog-warning.png
dialog-warning.png

favicon.ico
favicon.ico

Status check

You shoud now have a HTML page with CSS style sheets and a favorite icon. The website should say "Hello! Welcome to my site!"
You check my files and compare it to your files.


go-previous.png HTML and CSS

start-here.png Index

go-next.png Enabling jQuery and Bootstrap

Add comment

avatar_blank_60.png

Comment:

Name:

Email:

Comments

No comments yet. You can be the first one to comment. Just write your comment in the form and click on the submit button.