167 lines
4.0 KiB
HTML
167 lines
4.0 KiB
HTML
<!--
|
|
HTML TEMPLATE GUIDE
|
|
===================
|
|
This file shows all the basic HTML tags you can use.
|
|
Copy this file and rename it to yourname.html
|
|
Then change the content between the tags.
|
|
-->
|
|
|
|
<!-- This tells the browser this is an HTML page -->
|
|
<html>
|
|
|
|
<!-- The head section has info about the page -->
|
|
<head>
|
|
<!-- This title shows up in the browser tab -->
|
|
<title>YOUR NAME's Page</title>
|
|
</head>
|
|
|
|
<!-- The body is what you see on the page -->
|
|
<!-- bgcolor = background color -->
|
|
<!-- text = text color -->
|
|
<body bgcolor="white" text="black">
|
|
|
|
<!-- center puts everything in the middle -->
|
|
<center>
|
|
|
|
<!-- ==================== TEXT ==================== -->
|
|
|
|
<!-- h1 is the biggest heading. h2, h3, h4, h5, h6 get smaller -->
|
|
<h1><font color="blue" size="7">Welcome to My Page!</font></h1>
|
|
|
|
<!-- p is for paragraphs -->
|
|
<p>This is a paragraph of text. You can write as much as you want here.</p>
|
|
|
|
<!-- br makes a line break (starts a new line) -->
|
|
<br>
|
|
|
|
<!-- b makes text bold -->
|
|
<p><b>This text is bold.</b></p>
|
|
|
|
<!-- i makes text italic -->
|
|
<p><i>This text is italic.</i></p>
|
|
|
|
<!-- u makes text underlined -->
|
|
<p><u>This text is underlined.</u></p>
|
|
|
|
<!-- font changes color and size -->
|
|
<p><font color="red" size="5">This is red and bigger!</font></p>
|
|
|
|
<!-- ==================== LINES ==================== -->
|
|
|
|
<!-- hr makes a horizontal line across the page -->
|
|
<hr>
|
|
|
|
<!-- You can make the line thicker and colored -->
|
|
<hr size="5" color="purple">
|
|
|
|
<br>
|
|
|
|
<!-- ==================== LINKS ==================== -->
|
|
|
|
<!-- a href makes a link -->
|
|
<!-- This links to another page on the same site -->
|
|
<a href="../index.html">Go back to Home Page</a>
|
|
|
|
<br><br>
|
|
|
|
<!-- This links to another website -->
|
|
<a href="https://www.example.com">Visit Example.com</a>
|
|
|
|
<br><br>
|
|
|
|
<!-- mailto: creates an email link -->
|
|
<a href="mailto:someone@example.com">Send me an email!</a>
|
|
|
|
<br><br>
|
|
|
|
<!-- ==================== IMAGES ==================== -->
|
|
|
|
<!-- img shows a picture -->
|
|
<!-- src = source (the filename) -->
|
|
<!-- width = how wide (in pixels) -->
|
|
<!-- alt = text if image doesn't load -->
|
|
<img src="../construction.gif" width="200" alt="Construction sign">
|
|
|
|
<br><br>
|
|
|
|
<!-- ==================== LISTS ==================== -->
|
|
|
|
<!-- ul = unordered list (bullet points) -->
|
|
<font color="green"><b>My Favorite Things:</b></font>
|
|
<ul>
|
|
<li>Pizza</li>
|
|
<li>Video Games</li>
|
|
<li>Reading</li>
|
|
<li>Dogs</li>
|
|
</ul>
|
|
|
|
<!-- ol = ordered list (numbered) -->
|
|
<font color="green"><b>My Top 3 Movies:</b></font>
|
|
<ol>
|
|
<li>Movie One</li>
|
|
<li>Movie Two</li>
|
|
<li>Movie Three</li>
|
|
</ol>
|
|
|
|
<br>
|
|
|
|
<!-- ==================== TABLES ==================== -->
|
|
<!-- In the 90s, we used tables to make boxes and layouts -->
|
|
|
|
<table border="3" bgcolor="yellow" width="400">
|
|
<!-- tr = table row -->
|
|
<tr>
|
|
<!-- td = table cell (column) -->
|
|
<td>
|
|
<b>This is a box!</b><br>
|
|
You can put text, pictures, or links inside tables.
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<br><br>
|
|
|
|
<!-- Table with multiple rows and columns -->
|
|
<table border="2" bgcolor="lightblue" cellpadding="10">
|
|
<tr>
|
|
<td><b>Name</b></td>
|
|
<td><b>Age</b></td>
|
|
<td><b>Pet</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Alice</td>
|
|
<td>10</td>
|
|
<td>Dog</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Bob</td>
|
|
<td>12</td>
|
|
<td>Cat</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<br><br>
|
|
|
|
<!-- ==================== MARQUEE ==================== -->
|
|
<!-- This makes text scroll across the screen (very 90s!) -->
|
|
|
|
<marquee bgcolor="red" behavior="scroll" direction="left">
|
|
<font color="yellow" size="4">This text scrolls across the screen!</font>
|
|
</marquee>
|
|
|
|
<br><br>
|
|
|
|
<!-- ==================== BACKGROUND IMAGE ==================== -->
|
|
<!-- To use a background image instead of a color, change the body tag to: -->
|
|
<!-- <body background="filename.gif" text="black"> -->
|
|
|
|
<br>
|
|
|
|
<!-- ==================== BACK TO HOME ==================== -->
|
|
<hr size="3" color="black">
|
|
<a href="../index.html"><font size="5">← Back to Home Page</font></a>
|
|
|
|
</center>
|
|
|
|
</body>
|
|
</html> |