HTML CODE
BASICS
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
1. External CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title> All About Me </title>
<link rel="stylesheet" href="[Link]"
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Here is what the "[Link]" file looks like:
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
border: 2px solid powderblue;
padding: 30px;
margin: 50px;
text-indent: 40px;
border-top: 2x solid blue; }
body {
background-color: powderblue;
text-align: center; }
another example:
in HTML:
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui … p>
</div>
In css
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
2. HTML Links - The target Attribute
<a href="[Link] target="_blank">Visit W3Schools!</a>
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
HTML Links - Use an Image as a Link
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
3. Link colors
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
4. HTML Links - Create Bookmarks
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
5. Images
<img src="[Link]" alt="HTML5Icon" width="128" height="128">
or
<img src="[Link]" alt="HTML5Icon" style="width:128px;height:1
28px;">
Images on Another Server/Website
<img src="[Link]
w3schools_green.jpg" alt="[Link]">
Animated Images
<img src="[Link]" alt="Computer
Man" style="width:48px;height:48px;">
Image Floating
<p><img src="[Link]" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="[Link]" alt="Smiley
face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>