Howdy. Today we build the bones. If you have never written a line of code, that is perfect. HTML is just structure — pens, chute, paper record book. Nothing pretty yet. Just the animals standing there so we can see them.
We are building a Ranch Record Card for a made-up place called Howdy World Ranch. The example herd is inspired by Fort Worth Stockyards longhorns a lot of us have seen on Exchange Street. We are not claiming those cattle. They are teaching examples because people in Texas already know the names.
What you need
A text editor and a browser. Chromebook Text, Notepad, TextEdit, VS Code — all fine. Make a folder on your computer named ranch-record. Inside it, a file named exactly index.html. That ending matters. That is how the browser knows what kind of file this is.
Where you will end up
A plain page with four longhorns. Boring is correct. Paint is Lesson 2.
Step 1 — the skeleton
Every HTML page starts with the same bones. Type this first.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Howdy World Ranch — Record Card</title> </head> <body> </body> </html>
The first line just tells the browser this is a modern page. The head is information about the page — the tab title, the character set. The body is everything a visitor actually sees. Ours is empty on purpose. Next we fill it.
Step 2 — the ranch name
Inside the body, add a header and a short intro so nobody wonders what they are looking at.
<header>
<h1>Howdy World Ranch</h1>
<p class="tagline">Livestock Record Card — Fort Worth Stockyards Inspired Herd</p>
</header>
<main>
<section class="intro">
<p>
These animals are inspired by the famous Fort Worth Herd longhorns
that walk Exchange Street twice a day. We're using them as our
teaching example while we learn to build tools for the ranch.
</p>
</section>
The big heading is the ranch name. The line under it is a tagline. The paragraph is honesty: these are teaching examples, not a claim that we run the Stockyards.
Step 3 — the herd table
Still in the main part of the page, add the record itself. A table is rows and cells. The top row is labels. The rest are animals.
<section class="herd">
<h2>Current Herd</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Tag</th>
<th>Breed</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr><td>Black Gold</td><td>FW-01</td><td>Texas Longhorn</td><td>Rare black pattern, 100"+ horns</td></tr>
<tr><td>Brutus</td><td>FW-02</td><td>Texas Longhorn</td><td>Largest steer in the example herd</td></tr>
<tr><td>McCree</td><td>FW-03</td><td>Texas Longhorn</td><td>Strong presence</td></tr>
<tr><td>Blacksmith</td><td>FW-04</td><td>Texas Longhorn</td><td>Newer addition to the drive</td></tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>Howdy World Coding · Lesson 1 — HTML</p>
</footer>
Black Gold, Brutus, McCree, Blacksmith. Those names have been part of the Fort Worth Herd. We are using them as data only.
Save and open
Save the file. Double-click it, or drag it onto a browser window. You should see the ranch name, a short explanation, and four longhorns. If it looks like a school report, you did it right.
Next lesson we take this exact page and make it look like a bulletin board at the sale barn.