Καλή ανάγνωση...Οργάνωση...
Για δικιά σας ευκολία αντιγράψτε τους παρακάτω κώδικες σε δυο αρχεία με ονόματα index.html & style.css. Το αρχείο style.css βάλτε το σε έναν φάκελο με όνομα style. Αν δεν το κάνετε αυτό θα πρέπει να τροποποιήσετε λίγο τον κώδικα.
Template - 000
index.html
- Κώδικας: Επιλογή όλων
<html>
<head>
<title>Personal webpage of cs091770-billys(ΤΖΙΒΑΡΑΣ ΒΑΣΙΛΕΙΟΣ)</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
</head>
<body>
<div id="header">
<div id="header_title">
<p> Title </p>
</div>
<div id="header_menubar">
<li > <a class="selected" href="index.html"> Page0 </a></li>
<li > <a class="selected" href="studying.html"> Page1 </a></li>
<li > <a class="selected" href="music.html"> Page2 </a></li>
<li > <a class="selected" href="support.html"> Page3 </a></li>
<li > <a class="selected" href="contact.html"> Page4 </a></li>
</div>
</div> <!-- end of header -->
<div id="content">
<p> Content </p>
</div> <!-- end of content -->
<div id="footer">
<p> Footer </p>
</div>
</body>
</html>
style.css
- Κώδικας: Επιλογή όλων
/*********************************************************************
------------------------- MY CSS ---------------------------
by vasilis tzivaras
*********************************************************************/
/* (body) => (header =>(header_title, header_menu), content, footer) */
/*************** MAIN CONTENT ***************/
body {
margin: 0px 0px 0px 0px;
background: black;
}
#header {
height: 200px;
background: blue;
/*background-image: url('../images/final_bg.png');*/
}
#header_title {
height: 150px;
margin: 0px 0px 0px 0px;
background: green;
text-align: center;
}
#header_menubar {
height: 50px;
margin: 15px 0px 15px 0px;;
text-align: center;
}
#content {
text-align: left;
width: 1000px;
overflow: hidden;
margin: 20px auto 0 auto;
padding: 10px 10px 10px 10px;
background: white;
}
/*
#footer {
height: 20px;
width: 1000px;
background: white;
font: 'Comic Sans MS';
text-align: center;
text-transform: uppercase;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}*/
#footer {
width: 100%;
height: 33px;
color: white;
font-family: 'Comic Sans MS';
text-align: center;
text-transform: uppercase;
padding: 10px 0 0 0;
margin: 5px 0 0 0;
background: white;
}
/***************** HEADERS ******************/
h2 {
font: normal 175% 'Comic Sans MS';
color: #1293EE;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
/***************** MENU BAR *****************/
ul {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
li {
display: inline;
}
.selected {
color: black;
text-decoration: none;
word-spacing: 20px;
font-family: 'Comic Sans MS';
font-size: 26px;
}
a {
text-decoration: none;
}
a:hover {
color: 0099FF;
}
Template - 001
index.html
- Κώδικας: Επιλογή όλων
<html>
<head>
<title>Personal webpage of cs091770-billys(ΤΖΙΒΑΡΑΣ ΒΑΣΙΛΕΙΟΣ)</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
</head>
<body>
<div id="header">
<div id="header_title">
<p> Title </p>
</div>
<div id="header_menubar">
<li > <a class="selected" href="index.html"> Page0 </a></li>
<li > <a class="selected" href="studying.html"> Page1 </a></li>
<li > <a class="selected" href="music.html"> Page2 </a></li>
<li > <a class="selected" href="support.html"> Page3 </a></li>
<li > <a class="selected" href="contact.html"> Page4 </a></li>
</div>
</div> <!-- end of header -->
<div id="main">
<div id="sidebar">
<p>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br></p>
</div>
<div id="content">
<p> Content</br> Content</br> Content</br> Content</br> Content</br> Content</br> Content</br> Content</br> Content </br>Content</p>
</div> <!-- end of content -->
</div>
<div id="footer">
<p> Footer </p>
</div>
</body>
</html>
style.css
- Κώδικας: Επιλογή όλων
/*********************************************************************
------------------------- MY CSS ---------------------------
by vasilis tzivaras
*********************************************************************/
/* (body) => (header =>(header_title, header_menu), content, footer) */
/*************** MAIN CONTENT ***************/
body {
background: black;
}
#header {
height: 200px;
background: blue;
/*background-image: url('../images/final_bg.png');*/
}
#header_title {
height: 150px;
background: green;
text-align: center;
}
#header_menubar {
height: 50px;
text-align: center;
}
#main {
background: purple;
margin: 0px auto 0px auto;
width: 1000px;
}
#sidebar {
width: 200px;
background: yellow;
float: left;
padding-top: 5px;
}
#content {
float: left
text-align: left;
width: 800px;
overflow: hidden;
padding: 5px 0px 0px 0px;
background: white;
}
#footer {
width: 1000px;
height: 33px;
color: black;
font-family: 'Comic Sans MS';
text-align: center;
text-transform: uppercase;
padding: 10px 0 0 0;
margin: 5px auto 0 auto;
background: white;
}
/***************** HEADERS ******************/
h2 {
font: normal 175% 'Comic Sans MS';
color: #1293EE;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
/***************** MENU BAR *****************/
ul {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
li {
display: inline;
}
.selected {
color: black;
text-decoration: none;
word-spacing: 20px;
font-family: 'Comic Sans MS';
font-size: 20px;
}
a {
text-decoration: none;
}
a:hover {
color: 0099FF;
}
Η εργασία υπάγεται στην άδεια Creative Commons Αναφορά-Μη εμπορική χρήση-Παρόμοια διανομή 3.0 Ελλάδα
.
