@charset "utf-8";
/* CSS Document */
p{
color: blue
}
Index
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<meta name="description" content="Good idea to include this" >
<title>HTML Lesson</title>
<style>
p{
color: blue;
text-align: center;
}
.myClass {
color: green;
}
#myId {
color: #D800FF;
}
.myImage {
width: 100px;
height: 100px;
}
Laurence Svekis [Link]
ul li {
display: inline;
background-color: grey;
color: black;
padding: 10px;
}
ul li a:hover {
background-color: blue;
color: white;
}
.myTable {
background-color: blue;
}
div {
border: 1px black solid;
padding: 5px;
margin: 5px;
}
.newClass {
background-color: yellow;
}
</style>
</head>
<body >
<div class="myClass">Cascading Style Sheets</div>
<!-- example of HTML markup -->
Hyper Text <sup>Markup</sup> <i>Language</i><br/>
default text <span class="newClass">more information on the same
line</span>
Laurence Svekis [Link]
<div>
<h1>iframe</h1>
<iframe src="[Link]" width="100px" height="250px;" scrolling="no"
style="border:none" ></iframe>
</div>
<div>
<h1>Tables</h1>
<table border="1">
<tr bgcolor="red">
<th>Lesson Name</th>
<th>Watched sdfsdfsdfsdfsdfsdfsdfsdf</th>
<th>Watch Later</th>
</tr>
<tr>
<td rowspan="2">HTML tagsImage tags</td>
<td colspan="2">XX</td>
</tr>
<tr>
<td style="text-align:center">Y</td>
<td class="myTable">X</td>
</tr>
<tr>
<td width="400px">Y</td>
<td >X</td>
</tr>
</table>
</div>
<div>
<h1>Hyperlinks</h1>
Laurence Svekis [Link]
newline
<p>Hyperlink example <a href="#myId"
style="text-decoration:none;">Click Me</a></p>
newline </div>
<div>
<h1>Image tag</h1>
<p>text inline<img src="[Link] class="myImage"
alt="random image"/></p>
</div>
<div>
<h1>Lists Unordered</h1>
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
<h1>Lists Ordered</h1>
<ol type="I">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
line break
<p title="First Paragraph"><em>Hello</em> <b>World</b> 1
<h1 class="myClass">Hello <strong>World</strong> 1</h1>
<h2>Hello World 2</h2>
<h3>Hello World 3</h3>
Laurence Svekis [Link]
<h4>Hello World 4</h4>
<h5>Hello World 5</h5>
<h6>Hello World 6</h6>
</p>
<p style="background:#FD1A1E;">Hello World 2</p>
<p style="font-family:Cambria, 'Hoefler Text', 'Liberation Serif', Times,
'Times New Roman', serif; font-weight:bold; text-align:right;">Hello World
3</p>
<div id="myId">Cascading Style Sheets</div>
</body>
</html>
Index1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<meta name="description" content="Good idea to include this" >
<title>HTML Lesson</title>
</head>
<body >
<!-- example of HTML markup -->
Hyper Text <sup>Markup</sup> <i>Language</i><br/>
line break
<p title="First Paragraph"><em>Hello</em> <b>World</b> 1
<h1>Hello <strong>World</strong> 1</h1>
<h2>Hello World 2</h2>
<h3>Hello World 3</h3>
Laurence Svekis [Link]
<h4>Hello World 4</h4>
<h5>Hello World 5</h5>
<h6>Hello World 6</h6>
</p>
<p style="background:#FD1A1E;">Hello World 2</p>
<p style="font-family:Cambria, 'Hoefler Text', 'Liberation Serif', Times,
'Times New Roman', serif; font-weight:bold; text-align:right;">Hello World
3</p>
</body>
</html>
Page
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Default Layout</title>
<style>
ul li a {
text-decoration: none;
}
ul li {
display: inline;
background-color: #E1E1E1;
color: black;
border: 1px solid #6E6E6E;
}
li {
padding: 5px;
Laurence Svekis [Link]
}
ul li a:hover {
background-color: blue;
color: white;
}
#nav {
width: 100%;
}
.myInfo {
font-size: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>Page Heading</h1>
</div>
<div id="nav">
<ul>
<li><a href="[Link]" target="_top">item 1</a></li>
<li><a href="[Link]" target="_self">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
<div id="content">
<p> Content goes here </p>
Laurence Svekis [Link]
<p> <strong>HTML</strong> <span class="myInfo">information goes
here</span></p>
</div>
<div id="footer"> Page footer </div>
</body>
</html>
Page1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Default Layout</title>
<style>
ul li a {
text-decoration: none;
}
ul li {
display: inline;
background-color: #E1E1E1;
color: black;
border: 1px solid #6E6E6E;
}
li {
padding: 5px;
}
ul li a:hover {
background-color: blue;
Laurence Svekis [Link]
color: white;
}
#nav {
width: 100%;
}
.myInfo {
font-size: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>Page 1 Heading</h1>
</div>
<div id="nav">
<ul>
<li><a href="[Link]" target="_top">item 1</a></li>
<li><a href="[Link]" target="_self">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
<div id="content">
<p> Content goes here </p>
<p> <strong>HTML</strong> <span class="myInfo">information goes
here</span></p>
</div>
Laurence Svekis [Link]
<div id="footer"> Page footer </div>
</body>
</html>
Page2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Default Layout</title>
<style>
ul li a {
text-decoration: none;
}
ul li {
display: inline;
background-color: #E1E1E1;
color: black;
border: 1px solid #6E6E6E;
}
li {
padding: 5px;
}
ul li a:hover {
background-color: blue;
color: white;
}
#nav {
Laurence Svekis [Link]
width: 100%;
}
.myInfo {
font-size: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>Page 2 Heading</h1>
</div>
<div id="nav">
<ul>
<li><a href="[Link]" target="_top">item 1</a></li>
<li><a href="[Link]" target="_self">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
<div id="content">
<p> Content goes here </p>
<p> <strong>HTML</strong> <span class="myInfo">information goes
here</span></p>
</div>
<div id="footer"> Page footer </div>
</body>
</html>
Laurence Svekis [Link]
CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<meta name="description" content="Good idea to include this" >
<title>HTML Lesson</title>
<style>
p{
color: blue;
text-align:center;
}
.myClass {
color: green;
}
#myId {
color: #D800FF;
}
</style>
</head>
<body >
<div class="myClass">Cascading Style Sheets</div>
<div id="myId">Cascading Style Sheets</div>
<!-- example of HTML markup -->
Hyper Text <sup>Markup</sup> <i>Language</i><br/>
line break
<p title="First Paragraph"><em>Hello</em> <b>World</b> 1
<h1 class="myClass">Hello <strong>World</strong> 1</h1>
Laurence Svekis [Link]
<h2>Hello World 2</h2>
<h3>Hello World 3</h3>
<h4>Hello World 4</h4>
<h5>Hello World 5</h5>
<h6>Hello World 6</h6>
</p>
<p style="background:#FD1A1E;">Hello World 2</p>
<p style="font-family:Cambria, 'Hoefler Text', 'Liberation Serif', Times,
'Times New Roman', serif; font-weight:bold; text-align:right;">Hello World
3</p>
</body>
</html>
Html5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Layout</title>
<style>
ul li a {
text-decoration: none;
}
ul li {
display: inline;
background-color: #E1E1E1;
color: black;
border: 1px solid #6E6E6E;
}
Laurence Svekis [Link]
li {
padding: 5px;
}
ul li a:hover {
background-color: blue;
color: white;
}
#nav {
width: 100%;
}
.myInfo {
font-size: 10px;
}
madeupElement {
background: #D4B8B9;
}
header {
background:#C1C1C1;
}
</style>
</head>
<body>
<madeupElement> Hello World </madeupElement>
<header>
<h1>Page Heading</h1>
</header>
<nav>
<ul>
<li><a href="[Link]" target="_top">item 1</a></li>
Laurence Svekis [Link]
<li><a href="[Link]" target="_self">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</nav>
<section>
My Drawing<br>
<canvas id="myCanvas" width="300" height="300"></canvas>
</section>
<article>
A green circle:
<svg>
<circle r="50" cx="50" cy="50" fill="green"/></svg>
<svg> <rect rx="250" ry="250" width="100" height="200" fill="green"
/> </svg>
<svg> <polygon points="0,10, 300,10, 150,150" fill="green" /> </svg>
</article>
<div>
<p> Content goes here </p>
<p> <strong>HTML</strong> <span class="myInfo">information goes
here</span></p>
</div>
<footer> Page footer </footer>
</body>
<script>
var canvas = [Link]('myCanvas');
var context = [Link]('2d');
[Link] = 'red';
[Link]('Hello World!', 100, 100);
Laurence Svekis [Link]
</script>
</html>
Forms
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Default Layout</title>
<style>
ul li a {
text-decoration: none;
}
ul li {
display: inline;
background-color: #E1E1E1;
color: black;
border: 1px solid #6E6E6E;
}
li {
padding: 5px;
}
ul li a:hover {
background-color: blue;
color: white;
}
#nav {
width: 100%;
}
Laurence Svekis [Link]
.myInfo {
font-size: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>Page Heading</h1>
</div>
<div id="nav">
<ul>
<li><a href="[Link]" target="_top">item 1</a></li>
<li><a href="[Link]" target="_self">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
<div id="content">
<h1>Forms</h1>
<form action="[Link]" method="get" enctype="multipart/form-data"
target="_blank" autocomplete="on" >
Enter your nickname below:<br>
<input name="nickname" type="text" class="myInfo" placeholder="enter
your nickname" title="nickname field" size="50" maxlength="5" >
<br>
Enter your password below:<br>
<input type="password" name="password" >
<br>
Laurence Svekis [Link]
Enter information:<br>
<input type="reset">
<input type="file">
<input type="image" src="[Link]" >
<select>
<option value="one" selected>one</option>
<option value="two">two</option>
<option value="rrr">rrr</option>
</select>
<br>
HTML5 type1:<br>
<input name="onetype" type="number" disabled class="myInfo"
placeholder="5" max="55" min="5" tabindex="5" title="five" value="5" >
<br>
HTML5 type2:<br>
<input type="date" name="twotype" min="2015-07-07" tabindex="2">
<br>
HTML5 type3:<br>
<input name="threetype" type="color" tabindex="7" >
<br>
HTML5 type4:<br>
<input type="email" name="fourtype" >
<br>
HTML5 type5:<br>
<input type="range" name="fivetype" min="1" max="10" >
<br>
HTML5 type6:<br>
Laurence Svekis [Link]
<input type="datetime-local" name="sixtype" >
<br>
HTML5 type7:<br>
<input type="month" name="seventype" >
<br>
HTML5 type8:<br>
<input type="url" name="eighttype" >
<br>
Do you like HTML:<br>
<input type="radio" name="htmlquiz" value="Yes" > Yes
<input type="radio" name="htmlquiz" value="No"> No
<br>
Do you like HTML:<br>
<input type="checkbox" name="htmlquiz1" value="Yes" checked> Yes
<input name="htmlquiz2" type="checkbox" disabled value="No"> No
<br>
Tell us how much you like HTML:<br>
<textarea name="ourtext" cols="5" rows="5" class="myInfo"
placeholder="placeholder" title="textarea" ></textarea>
<br>
<input type="submit" >
</form>
</div>
<div id="footer"> Page footer </div>
</body>
</html>
Laurence Svekis [Link]
PHP
<?php
echo $_GET['nickname'];
?>
Laurence Svekis [Link]