Sir Work
Sir Work
Sir Work
html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>My first website </title>
</head>
<body>
<div class="mainpage">
<div class="container">
<div class="header">
<div class="headerTextLeft">
<h1>
My beautiful new website
</h1>
<p>Here you find all information you need</p>
</div>
<div class="headerTextRight">
<div class="headerBox">
<p>ABCDEFGHIJ</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</body>
</html>
Css
.mainpage{
background-color:black;
width:100%;height:100%;
}
.container{
width: 80%;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.header{
background-color: #95BC20;
}
.headerTextLeft{
width: 50%;
float: left;
}
.headerTextLeft h1{
font-size: 18pt;
font-weight: bold;
padding: 35px 0px 0px 10px;
color: #FFFFFF;
font-style: italic;
height: 20px;
}
.headerTextLeft p
{
font-size: 12pt;
font-weight: bold;
padding: 5px 0px 0px 10px;
color: #FFFFFF;
}
.headerTextRight{
width: 50%;
float: left;
}
.clearfix{
clear: both;
}
.headerBox{
background-color: #ffffff;
width: 180px;
height: 130px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
float: right;
text-align: center;
position: relative;
}
.headerBox p
{
position: absolute;
left: 45px;
top: 45px;
}
Tag Description
Email
<a [email protected]
Hyperlink href="mailto:[email protected]">[email protected]</a>
Attributes may be combined under style="" of the SPAN tag and seperated by
a semicolon as such:
<span style="attribute:value;attribute2:value">Text</span>
Underlined text-
Underlined Text
Text decoration:underline
Change the
font-family:fontname Text will be in style "fontname"
Font
Font Size font-size:200% 2x Size Text
Self-closing Tags
Tags that, by definition, contain nothing between the opening and closing
tags must self-close with a space and forward slash:
Useful Characters
This is a small list of characters that may be useful in the E-logs. For a more
complete list, see Character Chart.
"Contains as Member"
∋ ∋
Symbol
"Greather-than or Equal
≥ ≥
to" Symbol
"Perpendicular to"
⊥ ⊥
Symbol
"Plus/Minus Error"
± ±
Symbol
Example:
<ul>
<li>List item</li>
<li>Second Iten</li>
<li>Third Item</li>
<ul>
Yields:
List item
Second Item
Third Item
Ordered list:
uses <ol> and </ol> tags, and each list item must be inside <li> and </li>
Example:
1. List item
2. Second Item
3. Third Item
How to Create Tables
Simple data tables consist of three parts:
<table>, <tr> and <td>
Where all elements are contained within the <table> tags, <tr> tags surround
a row, and <td> tags surround a table cell's content. As an example, the code:
<table border="1">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Yields the table with a border (notice above the use of the border="1" attribute
to create a border):