Author: marcus

Categories
geography

States

1. Alabama
2. Alaska
3. Arizona
4. Arkansas
5. California
6. Colorado
7. Connecticut
8. Delaware
9. Florida
10. Georgia
11. Hawaii
12. Idaho
13. Illinois
14. Indiana
15. Iowa
16. Kansas
17. Kentucky
18. Louisiana
19. Maine
20. Maryland
21. Massachusetts
22. Michigan
23. Minnesota
24. Mississippi
25. Missouri
26. Montana
27. Nebraska
28. Nevada
29. New Hampshire
30. New Jersey
31. New Mexico
32. New York
33. North Carolina
34. North Dakota
35. Ohio
36. Oklahoma
37. Oregon
38. Pennsylvania
39. Rhode Island
40. South Carolina
41. South Dakota
42. Tennessee
43. Texas
44. Utah
45. Vermont
46. Virginia
47. Washington
48. West Virginia
49. Wisconsin
50. Wyoming

link to US map

Below are 3 states, Texas, Oklahoma and Louisiana.

image/svg+xml

Open notepad and save the file as states.html in the documents folder. Next copy the code below into the notepad file.

<!DOCTYPE html>
<html>
 <head>

 </head>
 <body>

 </body>
</html>

Inside of the body tags create a table with 2 columns and 4 rows. In the first column put “State” and “Capital” in the two td tags. It should look like <td>State</td><td>Capital</td>. In the next 3 rows you will add the state and capital of Texas, Louisiana and Oklahoma. Below you will find the names of their capitals

State      Capital
Texas      Austin
Oklahoma   Oklahoma City
Louisiana  Baton Rouge
Categories
programming

Html Basics

<!DOCTYPE html>
<html>
 <head>
  <style>
   [ css code will go here ]
  </style>
 </head>
 <body>
   [ html code will go here ]
 </body>
</html>

Open notepad and type the code above and save file as calendar.html. Go to the folder where you saved calendar.html and open it in the web browser.

Next replace the text [ html code will go here ] in the body tag with the code below.

<table>
 <thead>
  <tr>
   <th>Sunday</th>
   <th>Monday</th>
   <th>Tuesday</th>
   <th>Wednesday</th>
   <th>Thursday</th>
   <th>Friday</th>
   <th>Saturday</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>  
 </tbody>
 <tfoot>
  <tr>
   <td colspan = "7" class="month">
   [ Month Year ]
   </td>
  </tr>
 </tfoot>
</table>

There are 6 rows you have copied over, now starting with the first row enter the number one for the first day of the current month. There are 7 <td></td> tags with the first pair representing Sunday and the last pair representing Saturday. After entering all the days replace [ Month Year ] with current month and year.

 Example of dates populated in <td></td>   
     <tr>
      <td>10</td>  //Sunday
      <td>11</td>  //Monday
      <td>12</td>  //Tuesday
      <td>13</td>  //Wednesday
      <td>14</td>  //Thursday
      <td>15</td>  //Friday
      <td>16</td>  //Saturday
     </tr>
     ....

Replace the [ css code will go here ] in the <style> tags with the code below

   table td {
    text-align: center;
    border: thin solid black;
    padding: 0;
   }

   table {
    border-spacing: 0;
   }

   .today{
    background-color: yellow;
   }

   .month {
    font-size: 30px;
    font-weight: bold;    
   }

In the <tfoot> tag change [ Month Year ] to be the current month and year. So for example if its March 4th 2024 then change [ Month Year ] to be “March 2024”

Finally, add the class “today” to the <td> that has the same date as today. For example if today is March 3rd, then add the “today” class to <td> tags with 3.So it will look like this <td class=”today”>3</td>. Your finished code should like the one below

Sunday Monday Tuesday Wednesday Thursday Friday Saturday
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
March 2024