printable/index.html (view raw)
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 |
<!doctype html>
<html lang="pt-BR" data-theme="light">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>HTML e Pessoas</title>
<meta property="og:title" content="HTML e Pessoas" />
<meta
property="og:description"
content="HTML não é só para quem trabalha com tecnologia. É para todo mundo. Aprenda a fazer um site do zero neste livro na web, feito para iniciantes."
/>
<meta property="og:image" content="/assets/img/design/og.png" />
<meta property="og:locale" content="pt_BR" />
<link rel="canonical" href="https://htmlepessoas.com/printable/" />
<link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/printable/" />
<link rel="alternate" hreflang="en" href="https://htmlforpeople.com/printable/" />
<!-- favicon -->
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/assets/img/design/favicon.png"
/>
<link rel="stylesheet" href="/assets/css/style.css" />
<link rel="stylesheet" href="/assets/css/print.css" media="print" />
<style>
h1 {
margin-top: var(--size-10);
}
.site-footer {
background: none;
}
</style>
<script defer src="/assets/js/app.js"></script>
</head>
<body class="page wrap-code">
<header class="site-header mb-none">
<div class="logo-wrap">
<p class="site-title container">
<a href="/">
<span class="sr-only">HTML e pessoas</span>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>HTML e pessoas</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="logo" transform="translate(10, 10)">
<rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect>
<text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text>
<g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
<line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line>
<path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
<line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line>
<line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line>
<line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line>
<path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
<line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line>
<line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line>
<circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle>
<line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line>
<line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line>
<circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle>
<path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
<path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path>
<path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path>
<path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path>
<path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path>
</g>
<g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
<line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line>
<path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
<line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line>
<line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line>
<line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line>
<path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
<line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line>
<line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line>
<line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line>
<line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line>
<circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle>
<path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
<circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle>
<path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path>
<path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path>
<path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path>
</g>
</g>
</g>
</svg>
</a>
</p>
</div>
</header>
<main id="main-content" class="container">
<h1 id="introducao" tabindex="-1"><a class="header-anchor" href="#introducao">Introdução</a></h1>
<p>Eu não acho que sites foram feitos para serem criados só por “profissionais da web”. No fundo, um site é um documento. Quase todo mundo hoje em dia sabe fazer um documento — seja no Word, no Google Docs, em Markdown ou em outra ferramenta. HTML não deveria ser exceção. Sim, ele é um pouco mais técnico do que outros tipos de documento. Mas também é muito especial.</p>
<p>É o formato de documento da web. O humilde arquivo HTML está em todo lugar. Se você olhou um site hoje, quase certamente viu HTML.</p>
<p>HTML é resistente. Você pode olhar um site feito hoje ou um feito vinte anos atrás. Os dois usam HTML e os dois funcionam. Poucos formatos de documento podem dizer o mesmo. Você também não precisa de um programa especial para fazer um documento HTML. Existem vários, e você pode usar qualquer um. Também dá para abrir o Bloco de Notas e escrever HTML na mão (alerta de spoiler: é exatamente isso que vamos fazer).</p>
<p>Eu criei este livro na web porque queria algo para quem não se considera desenvolvedor profissional. Imagine se documentos do Word só pudessem ser feitos por “profissionais de Word”. Não. Saber escrever um pouco de HTML e colocar isso na internet é uma habilidade útil em muitos caminhos — profissionais e pessoais. Não pertence só a quem faz site de carreira. HTML é para todo mundo. HTML é para pessoas.</p>
<p>Esta tradução para o português do Brasil é oferecida por <a href="https://pablomurad.com">Pablo Murad</a> e <a href="https://portalidea.com.br">Portal IDEA</a>, a partir do original <a href="https://htmlforpeople.com">HTML for People</a>, de <a href="https://blakewatson.com/">Blake Watson</a>.</p>
<h2 id="para-quem-e-este-livro" tabindex="-1"><a class="header-anchor" href="#para-quem-e-este-livro">Para quem é este livro?</a></h2>
<p>Este livro é para quem não tem experiência anterior com programação. Eu não vou assumir que você já sabe a primeira coisa sobre HTML. Vamos começar pequeno. Mas, no fim, teremos um site pessoal completo: várias páginas, imagens, um blog e mais.</p>
<p>Eu <em>vou</em> assumir que você já usa um computador e consegue tarefas básicas, como criar arquivos e pastas. Isso é necessário porque (outro spoiler) um site, no fundo, é só arquivos e pastas.</p>
<h2 id="do-que-eu-preciso" tabindex="-1"><a class="header-anchor" href="#do-que-eu-preciso">Do que eu preciso?</a></h2>
<p>Você precisa de um computador com internet. Eu escrevi este livro de um jeito genérico, para funcionar no macOS, no Windows ou no Linux. Se eu indicar um programa para instalar, ele será gratuito (ou terá um plano grátis usável) e vai funcionar em mais de um sistema (ou eu indico uma alternativa).</p>
<h2 id="sumario" tabindex="-1"><a class="header-anchor" href="#sumario">Sumário</a></h2>
<ol>
<li><a href="/do-zero-a-internet-seu-primeiro-site">Do zero à internet: seu primeiro site</a></li>
<li><a href="/adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a></li>
<li><a href="/intervalo-melhore-seu-editor-de-texto">Intervalo: melhore seu editor de texto</a></li>
<li><a href="/um-site-com-estilo">Um site com estilo</a></li>
<li><a href="/adicionar-uma-pagina-sobre">Adicionar uma página Sobre</a></li>
<li><a href="/adicionar-um-blog">Adicionar um blog</a></li>
<li><a href="/adicionar-um-curriculo">Adicionar um currículo</a></li>
<li><a href="/intervalo-instalar-um-servidor-local">Intervalo: instalar um servidor local</a></li>
<li><a href="/adicionar-uma-pagina-divertida">Adicionar uma página divertida</a></li>
<li><a href="/conquista-desbloqueada-hipertextista">Conquista desbloqueada: Hipertextista</a></li>
</ol>
<h3 id="capitulos-bonus" tabindex="-1"><a class="header-anchor" href="#capitulos-bonus">Capítulos bônus</a></h3>
<p>Isto é o que eu queria cobrir, mas achei que saía um pouco do foco. CSS e PHP têm uma curva de aprendizado um pouco mais íngreme do que HTML. Mesmo assim, não acho que estejam fora do alcance de quem quiser explorar. E um pouquinho de cada um já ajuda bastante. Então isto é uma degustação de cada um.</p>
<ol>
<li><a href="/personalizar-o-simple-css">Personalizar o Simple.css</a></li>
<li><a href="/basico-de-css">Básico de CSS</a></li>
<li><a href="/html-reutilizavel-com-php">HTML reutilizável com PHP</a></li>
</ol>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>Agora que você já sabe o <em>porquê</em> deste livro, é hora do primeiro passo. No próximo capítulo, você vai aprender a fazer um site do zero e colocá-lo na internet.</p>
<h1 id="do-zero-a-internet-seu-primeiro-site" tabindex="-1"><a class="header-anchor" href="#do-zero-a-internet-seu-primeiro-site">Do zero à internet: seu primeiro site</a></h1>
<p>Você, meu amigo, está prestes a ir do zero à internet. Vamos colocar sua primeira página caseira na web.</p>
<p>Vou te contar um segredo: sites são só arquivos de texto. Você não precisa de um programa caro e sofisticado para criá-los. Dá para fazer um site com as ferramentas de texto que já vêm no seu computador. E é exatamente isso que vamos fazer agora.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Dá para fazer um site no celular ou no tablet. Mas é bem mais comum fazer no computador. Por isso, é o que vamos usar neste livro. Mesmo assim, o que você vai aprender também vale em outros contextos. Uma coisa linda da web é que existem muitos jeitos de criar nela.</p>
</aside>
<h2 id="passo-1-crie-uma-pasta-no-seu-computador" tabindex="-1"><a class="header-anchor" href="#passo-1-crie-uma-pasta-no-seu-computador">Passo 1. Crie uma pasta no seu computador</a></h2>
<p>Escolha um lugar no seu computador e crie uma pasta. Chame de <code>my-site</code> ou algo parecido. O ideal é nomear pastas e arquivos de site com letras minúsculas, números, hífens e underlines. Evite espaços nos nomes. Assim seus arquivos funcionam em muitos computadores e servidores diferentes. (Um servidor é o computador na internet que guarda os arquivos do seu site e os entrega para quem visita.)</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Precisa de ajuda para criar uma pasta? Veja como fazer em alguns sistemas comuns.</p>
<ul>
<li><a href="https://perma.cc/H5YD-7W8S">Criar uma pasta no Windows</a></li>
<li><a href="https://perma.cc/X9RD-T6RH">Criar uma pasta no macOS</a></li>
<li><a href="https://perma.cc/B7LV-XXD5">Criar uma pasta no Ubuntu Linux</a></li>
</ul>
<p>Com o tempo, você provavelmente vai criar vários sites. Se quiser, já pode criar uma pasta <code>sites</code> e colocar <code>my-site</code> dentro dela.</p>
</aside>
<aside class="aside"><p class="aside-label">Observação</p><p>As capturas de tela deste livro são do original em inglês. O passo a passo vale igual no português.</p>
</aside>
<p><img src="/assets/img/zero-to-internet-01.webp" alt="Captura de tela de uma janela do explorador de arquivos. No painel esquerdo, a pasta "Websites" está selecionada. No painel direito, a pasta "my-site" aparece dentro da pasta "Websites"."></p>
<h2 id="passo-2-crie-o-indexhtml" tabindex="-1"><a class="header-anchor" href="#passo-2-crie-o-indexhtml">Passo 2. Crie o index.html</a></h2>
<p>Por convenção, a página inicial de um site é o <code>index.html</code>. Você pode ter outras páginas (como <code>about-me.html</code> ou o que quiser). Mas isso fica para depois.</p>
<p>Para criar o <code>index.html</code>, abra o TextEdit no Mac ou o Bloco de Notas no Windows.</p>
<aside class="aside"><p class="aside-label">Quem usa Mac</p><p>Sites devem ser <em>texto simples</em>, então precisamos pedir isso ao TextEdit. Clique em <em>Format</em> na barra de menus e escolha <em>Make Plain Text</em>. Depois abra as configurações do TextEdit, clique na aba Open and Save e marque a caixa <em>Display HTML files as HTML code instead of formatted text</em>. Já que você está aí: se quiser que o TextEdit use texto simples sempre, escolha <em>Plain text</em> na aba New Document, na seção Format.</p>
</aside>
<p>Escreva uma frase ou duas sobre você. A minha, por exemplo, é esta:</p>
<pre class="language-html"><code class="language-html">My name is Blake. I enjoy making websites and teaching others to do the same.</code></pre>
<p>Agora salve este arquivo. Chame de <code>index.html</code> e coloque na pasta <code>my-site</code> que você criou no passo 1.</p>
<p><img src="/assets/img/zero-to-internet-02.webp" alt="Uma janela de editor de texto mostrando o conteúdo de um arquivo chamado "index.html". O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same.""></p>
<aside class="aside"><p class="aside-label">Observação</p><p>Quando você faz sites, é essencial ver as extensões de arquivo — a parte do nome que vem depois do ponto, como <code>.html</code>. Se você não as vê, veja como fazer o <a href="https://perma.cc/3LAG-L6YW">Windows</a> ou o <a href="https://perma.cc/KYR3-6H3L">Mac</a> mostrá-las.</p>
</aside>
<h2 id="passo-3-veja-a-previa-do-seu-site" tabindex="-1"><a class="header-anchor" href="#passo-3-veja-a-previa-do-seu-site">Passo 3. Veja a prévia do seu site</a></h2>
<p>Você pode abrir o site dando um clique duplo em <code>index.html</code>. Ele deve abrir no seu navegador padrão. Outra opção: abra o navegador primeiro, clique em <em>File</em> > <em>Open File…</em> e navegue até o seu arquivo <code>index.html</code>.</p>
<p>Você deve ver o seu site (sim, bem simples) no navegador! Sinta-se à vontade para ajustar o texto e corrigir erros de digitação. Estamos prestes a publicar esta página para o <em>mundo</em>.</p>
<p>Não se preocupe com a aparência. Vamos cuidar disso depois.</p>
<p><img src="/assets/img/zero-to-internet-03.webp" alt="Uma janela de navegador mostra uma página simples, com texto preto em fundo branco. O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same." O endereço na barra é um caminho de arquivo local."></p>
<h2 id="passo-4-publique-o-seu-site" tabindex="-1"><a class="header-anchor" href="#passo-4-publique-o-seu-site">Passo 4. Publique o seu site</a></h2>
<p>Existem muitas opções para publicar o seu site. Para o nosso caso, precisamos de algo gratuito, fácil e pensado para pessoas, não para empresas. Felizmente, é isso que temos com o <a href="https://neocities.org">Neocities</a>.</p>
<aside class="aside"><p class="aside-label">Outras hospedagens</p><p>Neste livro, vou usar o Neocities como exemplo. Mas quero citar algumas alternativas, caso alguma te agrade. A maioria oferece a opção de arrastar a pasta do seu site para a página delas e começar o serviço.</p>
<ul>
<li><strong><a href="https://app.netlify.com/drop">Netlify Drop</a>:</strong> Mais sofisticado que o Neocities, mas tem o recurso de arrastar e soltar a pasta para publicar. Também oferece recursos mais voltados para quem desenvolve.</li>
<li><strong><a href="https://static.app/">static.app</a>:</strong> Eu não tenho experiência pessoal com este. Mas parece um serviço direto, parecido com o Netlify Drop. O plano grátis dá um subdomínio (o pedaço do endereço que vem antes do nome principal) e 1 site gratuito.</li>
<li><strong><a href="https://tiiny.host/">Tiiny</a>:</strong> Oferece um processo parecido com os serviços acima, com suporte a mais formatos além de um site. Eu também não tenho experiência pessoal com este serviço.</li>
<li><strong><a href="https://codepen.io/">CodePen</a>:</strong> O CodePen deixa você criar um site direto no navegador. É parecido com usar um editor de código no computador, mas os arquivos ficam no CodePen. Você trabalha até ficar pronto e depois publica na internet. Você ganha três arquivos/páginas de graça. E eles oferecem uma assinatura para aumentar bastante esse limite.</li>
<li><s><strong><a href="https://yay.boo/">Yay.boo</a>:</strong> Nome bobo, publicação de site sem esforço. Você só arrasta e solta uma pasta, escolhe um nome, e o site está no ar.</s> O Yay.boo não está aceitando cadastros no momento. Eles podem voltar em breve.</li>
</ul>
</aside>
<p>Vá até o Neocities e crie uma conta. É de graça. Você também vai precisar escolher um nome de usuário/nome do site. Seu site vai ficar num <em>subdomínio</em> em <code>YOURNAME.neocities.org</code> — o <code>YOURNAME</code> vem antes de <code>neocities.org</code>. Eu sugiro usar seu nome real ou um apelido que você já use na internet. Ou, se você já sabe sobre o que a página vai ser, escolha algo que combine com o tema (por exemplo, <code>dndfanpage</code>).</p>
<p>Quando a conta estiver criada, vá ao <a href="https://neocities.org/dashboard">painel do seu site</a>. Você vai ver alguns arquivos iniciais lá. Por enquanto, pode ignorá-los. Para publicar a página que você acabou de fazer no computador, arraste o <code>index.html</code> do seu computador para o painel do Neocities. Isso vai substituir o <code>index.html</code> que já está lá.</p>
<p><img src="/assets/img/zero-to-internet-04.webp" alt="Captura de tela do painel do Neocities mostrando um site chamado "My Cool Website" do usuário blakewatson. A interface tem opções para criar um arquivo novo, uma pasta nova ou enviar arquivos, além de informações sobre uso de armazenamento e atividade do site."></p>
<p>Feito isso, clique no link do seu site no topo do painel.</p>
<p><strong>Parabéns, você acabou de fazer um site!</strong> 🎉</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>No próximo capítulo, vamos adicionar mais conteúdo ao nosso site e conhecer algumas tags HTML (uma tag é um pedaço de código que marca o que cada parte da página é).</p>
<h1 id="adicionar-conteudo-ao-seu-site" tabindex="-1"><a class="header-anchor" href="#adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a></h1>
<p>Primeiro, dá um tapinha nas próprias costas: você já tem um site caseiro no ar! Agora é hora de deixá-lo mais interessante.</p>
<aside class="aside"><p class="aside-label">Quem usa Windows</p><p>Se você está tentando abrir o arquivo <code>index.html</code> no Bloco de Notas, mas não o vê na pasta do site ao usar <em>File > Open</em>, encontre o menu <em>Text Documents</em> no canto inferior direito da janela Abrir e mude para <em>All Files</em>.</p>
</aside>
<h2 id="adicione-um-titulo" tabindex="-1"><a class="header-anchor" href="#adicione-um-titulo">Adicione um título</a></h2>
<p>Vamos dar um nome a ele! Depende do tipo de site que você está fazendo, mas o meu vai ser uma página pessoal. Todo mundo tem perfil em rede social, mas esses perfis são sem graça e parecidos demais. A gente merece <em>mais</em>. E nossa velha amiga, a homepage pessoal, é um lugar perfeito para começar.</p>
<pre class="language-plaintext"><code class="language-plaintext">Blake's Homepage
My name is Blake. I enjoy making websites and teaching others to do the same.</code></pre>
<p>Legal! Vamos ver no navegador.</p>
<p><img src="/assets/img/add-content-1.webp" alt="Uma página simples. A única linha de texto na página diz: "Blake's Homepage My name is Blake. I enjoy making websites and teaching others to do the same.""></p>
<p>Bem, não era isso que a gente queria. O navegador espremeu o texto numa linha só. Ué?!</p>
<p>Está faltando a <em>marcação</em> do Hypertext <em>Markup</em> Language. (Marcação, ou markup, é o código que diz ao navegador o que cada pedaço do texto é.) Precisamos dizer ao navegador que o nome do site deve ser um título. Em HTML, você pode ter até seis níveis de títulos. Vamos definir o nome do site como o título mais importante, um <em>título de nível 1</em>, ou <code><h1></code>.</p>
<p>O que é esse código estranho em forma de pílula que eu acabei de escrever? É chamado de tag HTML. (Uma tag é um pedaço de código que envolve partes da página para dizer ao navegador o que elas são.) Vamos fazer isso agora.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
My name is Blake. I enjoy making websites and teaching others to do the same.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Aqui, separamos os dois elementos da nossa página e envolvemos cada um em tags. Estamos dizendo que o nome do site deve ser um título de nível 1, e que o primeiro parágrafo deve ser, bem, um <em>parágrafo</em> — é o que o <code>p</code> significa.</p>
<p>Repare que um par de tags tem uma tag de <em>abertura</em> e uma tag de <em>fechamento</em>. A tag de fechamento é idêntica à de abertura, só que começa com uma barra, <code>/</code>.</p>
<p>Agora salve o arquivo e recarregue o navegador. Esse costuma ser o ritmo de criar um site: você muda um pouco de código, salva e aperta recarregar no navegador. Depois, sinta o poder correndo nas veias enquanto você cria um site do nada!</p>
<p><img src="/assets/img/add-content-2.webp" alt="Um navegador mostra uma página simples, com um título grande e em negrito: "Blake's Homepage." O conteúdo diz: "My name is Blake. I enjoy making websites and teaching others to do the same.""></p>
<p>Uau, bem melhor! Vamos continuar adicionando mais conteúdo.</p>
<h2 id="links-para-outros-sites" tabindex="-1"><a class="header-anchor" href="#links-para-outros-sites">Links para outros sites</a></h2>
<p>Você já se perguntou por que se chama <em>the web</em>? Tipo, o que isso significa? O ingrediente especial que faz dela uma teia é o <em>hiperlink</em>, ou, como a gente costuma chamar, um <em>link</em>. Sabe, aquele texto muitas vezes azul, muitas vezes sublinhado, que você clica para pular para outra página, outro site, uma imagem, um vídeo de gato, qualquer coisa!</p>
<p>Isso é possível graças ao elemento <em>anchor</em>, ou “tag A”, como é conhecido. Fica assim:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>This will go somewhere eventually<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>Tudo que está dentro das tags <code><a></code> vira clicável. Mas para onde o link nos leva? Por enquanto, para lugar nenhum. Precisamos indicar um destino. Fazemos isso dando à <code><a></code> um <em>atributo</em> chamado <code>href</code>. É a <em>hypertext reference</em> — o lugar para onde você quer ir quando clica no link.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.wikipedia.org/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to Wikipedia<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>Vamos adicionar um link ao nosso site — escolha um dos seus sites favoritos, ou algo divertido e interessante.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
My name is Blake. I enjoy making websites and teaching others to do the same.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Check out these cool web games at <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://neal.fun/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neal.fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>!
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Salve e recarregue!</p>
<p><img src="/assets/img/add-content-3.webp" alt="Captura de tela de um navegador mostrando "Blake's Homepage." O texto diz: "My name is Blake. I enjoy making websites and teaching others to do the same. Check out these cool web games at Neal.fun!" A página tem um visual simples, com texto preto em fundo branco, e inclui um link."></p>
<p>Com a ajuda da humilde tag <code><a></code>, o seu site vira parte da web viva, que respira. Existem mais de cem tags HTML, mas você não precisa decorá-las para fazer um site. Dá para fazer muito com pouca coisa. Vamos ver mais algumas tags que já te colocam no caminho.</p>
<h2 id="listas-de-coisas" tabindex="-1"><a class="header-anchor" href="#listas-de-coisas">Listas de coisas</a></h2>
<p>Fãs de lista, este conjunto de tags é para vocês. Vamos usar o elemento <em>unordered list</em>, <code><ul></code>, para adicionar uma lista com marcadores. O <code><ul></code> define a lista, e a tag <em>list item</em>, <code><li></code>, define cada item. Assim:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>The first thing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Another thing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>And lastly, this thing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
<p>O código acima vira uma lista com marcadores, deste jeito:</p>
<ul>
<li>The first thing</li>
<li>Another thing</li>
<li>And lastly, this thing</li>
</ul>
<p>Se você quiser uma lista numerada, troque <code><ul></code> por <code><ol></code> (de <em>ordered list</em>). Só isso! Você vai criar uma lista numerada.</p>
<ol>
<li>The first thing</li>
<li>Another thing</li>
<li>And lastly, this thing</li>
</ol>
<p>Vamos adicionar uma lista ao nosso site. Aqui está o site inteiro até agora:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
My name is Blake. I enjoy making websites and teaching others to do the same.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Check out these cool web games at <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://neal.fun/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neal.fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>!
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Favorite board games<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>How to make a website<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create an HTML file<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Write some HTML in it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Open it with your web browser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
<p>Olha só, isso está começando, aos poucos, a parecer um site de verdade!</p>
<p><img src="/assets/img/add-content-4.webp" alt="Uma página da web intitulada "Blake's Homepage" é exibida. Ela inclui seções sobre jogos de tabuleiro favoritos (Dungeons & Dragons, Risk, Pandemic) e instruções de como fazer um site: 1. Create an HTML file, 2. Write some HTML in it, 3. Open it with a web browser."></p>
<p>Você vai notar que eu escorreguei uma tag nova ali sem avisar. É um <em>título de nível 2</em>, ou tag <code><h2></code>. Títulos dão estrutura à página e facilitam para os visitantes acharem o que querem.</p>
<p>Há outra diferença sutil entre as tags que temos usado. Algumas, como a tag <code><a></code>, são <em>elementos em linha</em> (inline): elas não começam uma linha nova e ocupam só a largura necessária. Outras tags — como <code><h1></code>, <code><ul></code> e <code><p></code> — são conhecidas como <em>elementos de bloco</em> (block). Um elemento de bloco começa numa linha nova e ocupa a largura inteira do recipiente.</p>
<p>Até agora temos um monte de palavras. Mas você sabe o que vale por mil delas?</p>
<h2 id="adicione-imagens-ao-seu-site" tabindex="-1"><a class="header-anchor" href="#adicione-imagens-ao-seu-site">Adicione imagens ao seu site</a></h2>
<p>Vamos colocar uma imagem legal no nosso site. Pode ser tentador ir no Google Imagens e pegar a primeira coisa que aparecer. Não é o caminho. Você precisa ter os direitos certos para usar a imagem. Há muitos lugares na web para achar imagens (procure imagens com licença Creative Commons). Para simplificar, vamos usar o site popular de imagens grátis <a href="https://unsplash.com">Unsplash</a>.</p>
<p>Eu achei uma imagem legal do espaço. Baixei a versão pequena e renomeei para <code>space.jpg</code>, para ficar mais fácil de citar. Ache uma imagem que você goste e solte na pasta, ao lado do seu <code>index.html</code>.</p>
<p>Você pode adicioná-la à página usando a <em>tag de imagem</em>, ou <code><img></code>. Diferente das tags que vimos até agora, a tag <code><img></code> é <em>auto-fechável</em>. Isso significa que não existe tag de fechamento. Fica assim:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>Assim como a tag <code><a></code>, a tag <code><img></code> usa atributos para dar mais informação sobre como você quer usá-la.</p>
<p>Use o atributo <code>src</code> para dizer à tag de imagem a <em>fonte</em> (source) da sua imagem, ou seja, onde ela está. Neste exemplo, estamos dizendo que a imagem está na mesma pasta que a nossa página <code>index.html</code> (e não numa subpasta) e que o nome do arquivo é <code>space.jpg</code>.</p>
<p>Também precisamos descrever a imagem, caso algum visitante do nosso site não consiga vê-la. Isso pode acontecer por vários motivos — talvez a pessoa seja cega e use um leitor de tela para acessar sites. Ou talvez um problema faça a imagem não carregar. Se isso acontecer, o nosso texto <em>alternativo</em>, ou texto <code>alt</code>, aparece no lugar.</p>
<p>Vamos salvar e atualizar o navegador.</p>
<p><img src="/assets/img/add-content-5.webp" alt="Captura de tela de "Blake's Homepage" com uma imagem de uma galáxia estrelada. O texto diz que Blake gosta de fazer sites e ensinar outras pessoas a fazer o mesmo. Abaixo, há seções de jogos de tabuleiro favoritos e um guia de como fazer um site."></p>
<p>Eu redimensionei a janela para a página inteira caber na captura. Mas se você estiver vendo uma barra de rolagem, está tudo bem!</p>
<p>Dependendo da sua imagem, você pode querer deixá-la menor ou maior. Dá para usar os atributos <code>width</code> e/ou <code>height</code> para isso. Se você indicar <em>só</em> a largura ou <em>só</em> a altura, o navegador mantém a <em>proporção</em> da imagem — ela não estica nem amassa. Para definir largura ou altura, você informa um número, que representa uma quantidade de pixels.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>Se definirmos o <code>width</code> como <code>300</code>, fica assim:</p>
<p><img src="/assets/img/add-content-8.webp" alt="Captura de tela de "Blake's Homepage" com uma imagem de uma galáxia estrelada. A imagem está bem menor do que na captura anterior. O texto diz que Blake gosta de fazer sites e ensinar outras pessoas a fazer o mesmo. Abaixo, há seções de jogos de tabuleiro favoritos e um guia de como fazer um site."></p>
<h2 id="adicione-notas-ao-seu-codigo" tabindex="-1"><a class="header-anchor" href="#adicione-notas-ao-seu-codigo">Adicione notas ao seu código</a></h2>
<p>Às vezes você quer colocar notas no código — texto que não aparece na página, mas continua visível no código. Você pode fazer isso para organizar um documento, deixar recados (como tarefas) para o você do futuro, ou até esconder um trecho em andamento que ainda não deve aparecer.</p>
<p>Por exemplo, eu poderia deixar um recado para voltar depois e atualizar meus jogos de tabuleiro favoritos.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Favorite board games<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- Todo: after playing some new games,
see if any deserve to make this list. --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
<p>O navegador ignora tudo que está entre <code><!--</code> e <code>--></code> e não mostra isso na página. Esse tipo de texto se chama <em>comentário</em>. Comentários são um jeito legal de anotar o código, porque só aparecem no código — não na página pronta.</p>
<p>Aqui vai outro exemplo, em que eu envolvi várias tags HTML dentro de um comentário. Nada do comentário aparece na página — só no código-fonte.</p>
<pre class="language-html"><code class="language-html"><span class="token comment"><!--
Work in progress. When I finalize this list, I'll remove the comment markers.
<h2>Favorite board games</h2>
<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Pandemic</li>
</ul>
--></span></code></pre>
<p><strong>O seu código HTML é público, inclusive os comentários.</strong> Qualquer pessoa pode ver o código-fonte do seu site, então não coloque nada secreto ou sensível dentro de comentários. Para ver o código-fonte de uma página, você pode usar um atalho do teclado ou achar a opção no menu do navegador. Varia de navegador para navegador. Veja esta <a href="https://perma.cc/3WP3-R9XL">referência no Lifewire</a>.</p>
<h2 id="de-ao-seu-site-uma-cabeca-e-um-corpo" tabindex="-1"><a class="header-anchor" href="#de-ao-seu-site-uma-cabeca-e-um-corpo">Dê ao seu site uma cabeça e um corpo</a></h2>
<p>Eu não fui totalmente honesto com você até agora. A gente tomou um atalho. Temos escrito <em>só</em> o que o navegador mostra no arquivo <code>index.html</code>. Mas todo site tem uma seção invisível. E agora o seu precisa dela.</p>
<p>Lembra que a gente envolve a maioria dos elementos em tags? Na verdade, precisamos envolver a página inteira na tag <code><html></code>. Uma página HTML ainda se divide numa seção invisível <code><head></code>, com informações sobre o seu site, e no <code><body></code>, onde vai todo o seu conteúdo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- info about your site goes here --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- stuff you want to show up on your page goes here --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Para deixar nosso documento HTML oficial, vamos adicionar uma linha <code>doctype</code> bem no começo. O doctype existe principalmente por razões históricas, mas ele diz ao navegador: “Oi, eu sou um documento HTML, então por favor me mostre do jeito certo!” Pode copiar e colar essa linha e seguir em frente — não sinta que precisa decorar cada detalhe.</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Por enquanto, vamos incluir duas coisas no <code><head></code>: uma tag title e uma tag meta.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>A tag <code><title></code> controla o texto que aparece na aba do navegador e o nome do seu site quando ele surge nos resultados de busca. Legal!</p>
<p>Podemos usar a tag <code><meta></code> várias vezes para dar ao navegador informações extras sobre a página. Neste caso, estamos dizendo qual <em>conjunto de caracteres</em> usar. O que você precisa saber: texto UTF-8 significa que símbolos especiais, como emojis, aparecem como se espera. Vamos incluir isso primeiro, antes de qualquer outro elemento de texto, para garantir que todo o nosso texto apareça direito.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Se tantas tags extras estiverem te confundindo, saiba que você pode copiar e colar esta estrutura inicial. Assim você não precisa lembrar de tudo agora!</p>
</aside>
<p>Aqui está o arquivo <code>index.html</code> inteiro, para consulta:</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
My name is Blake. I enjoy making websites and teaching others to do the same.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Check out these cool web games at
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://neal.fun/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neal.fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>!
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Favorite board games<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>How to make a website<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create an HTML file<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Write some HTML in it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Open it with your web browser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<h2 id="atualize-o-seu-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-seu-site-no-ar">Atualize o seu site no ar</a></h2>
<p>Essas mudanças estão ficando bem legais. Vamos publicar esta página para o mundo. Vá ao <a href="https://neocities.org/dashboard">painel do seu Neocities</a>. Você vai ver os arquivos iniciais mais o arquivo <code>index.html</code> que você enviou no capítulo 1 deste livro. Para deixar um pouco mais limpo, eu estou mudando para a visualização em lista e apagando a imagem PNG e o arquivo CSS que estavam lá no começo.</p>
<p><img src="/assets/img/add-content-6.webp" alt="Captura de tela de um painel do Neocities. O cabeçalho diz "My Cool Website", com o endereço "blakewatson.neocities.org" embaixo. Mostra detalhes de uso de arquivos e lista dois arquivos, "index.html" e "not_found.html", com opções para editar ou apagar."></p>
<p>Agora clique no botão <em>Upload</em> ou simplesmente arraste seus arquivos atualizados (a página index e a imagem) para a lista de arquivos.</p>
<p>Feito isso, clique no link do seu site no topo do painel. Esse é o seu site NO AR, recém-atualizado, feito do zero por você. Que demais!</p>
<p><img src="/assets/img/add-content-7.webp" alt="Captura de tela de um navegador visitando "Blake's Homepage" (o mesmo site de antes). O endereço é blakewatson.neocities.org. A página tem seções sobre jogos de tabuleiro favoritos, incluindo Dungeons & Dragons, Risk e Pandemic, e instruções de como fazer um site."></p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>No próximo capítulo, vamos fazer um intervalo breve e pegar um editor de texto feito para escrever HTML.</p>
<h1 id="intervalo-melhore-seu-editor-de-texto" tabindex="-1"><a class="header-anchor" href="#intervalo-melhore-seu-editor-de-texto">Intervalo: melhore seu editor de texto</a></h1>
<p>Você já foi longe. Vamos parar um segundo para reconhecer: você abriu um editor de texto simples e criou um site de verdade, escrevendo um pouco de HTML. Mandou bem!</p>
<p>Falando em editores simples, manter a indentação certinha no HTML pode ser chato. Também pode ser difícil separar o código HTML do texto que a gente escreveu.</p>
<p><img src="/assets/img/code-editor-1.webp" alt="Uma janela do Bloco de Notas mostrando o código HTML de "Blake's Homepage". A página tem um título, uma tag de imagem com a fonte "space.jpg" e o texto alternativo "Photograph of space with stars and stardust", e seções sobre hobbies e o gosto de ensinar, usando vários elementos HTML."></p>
<p>Não está terrível, mas a gente pode melhorar. Vamos baixar um editor feito para escrever código.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Estou usando Windows nesta parte só por diversão, mas tudo que eu faço pode ser feito no Mac, no Windows e no Linux.</p>
</aside>
<h2 id="baixe-o-visual-studio-code" tabindex="-1"><a class="header-anchor" href="#baixe-o-visual-studio-code">Baixe o Visual Studio Code</a></h2>
<p>Vá até <a href="https://code.visualstudio.com/">https://code.visualstudio.com/</a>. Este editor de código gratuito da Microsoft funciona no Mac, no Windows e no Linux. Ele pode fazer muita coisa, mas neste livro vamos manter o básico.</p>
<p>Não deixe a captura agitada da página inicial te assustar. A gente não precisa de todos aqueles recursos avançados para o que estamos fazendo.</p>
<p>Quando terminar de baixar e instalar o VS Code, abra-o. Talvez apareçam algumas telas de instrução. Depois, você vai ver uma tela assim:</p>
<p><img src="/assets/img/code-editor-2.webp" alt="Captura de tela da tela de boas-vindas do Visual Studio Code. A barra lateral inclui opções como "Explorer," "Search," "Source Control," "Run" e "Extensions." A tela principal mostra a opção "Open Folder..." com guias para começar no VS Code e aprender o básico."></p>
<h2 id="abra-o-seu-projeto" tabindex="-1"><a class="header-anchor" href="#abra-o-seu-projeto">Abra o seu projeto</a></h2>
<p>Na tela de boas-vindas do VS Code, clique em <em>Open Folder</em> e selecione a pasta do seu projeto web. Você vai ver os arquivos do site na barra lateral. Quando abrir o arquivo <code>index.html</code>, vai ver o código numa vista agradável, com números de linha e o que se chama <em>destaque de sintaxe</em> — partes do código ganham cores para se diferenciar melhor das outras.</p>
<p><img src="/assets/img/code-editor-3.webp" alt="Captura de tela do Visual Studio Code com o código HTML de "Blake's Homepage." A barra lateral esquerda mostra os arquivos do projeto. O editor principal mostra o mesmo código de antes, mas colorido para facilitar a distinção entre as partes."></p>
<p>O VS Code também ajuda a escrever código. Ele entende HTML e muitas outras linguagens. Quando você começa a digitar, ele sugere autocompletar. Você aceita clicando ou apertando Enter. Ele também indenta sozinho quando você cria uma linha nova, então você não precisa ficar inserindo tabs ou espaços na mão.</p>
<p>O VS Code abre seus arquivos em abas. Isso fica conveniente depois, quando o site tiver várias páginas.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Por padrão, o VS Code deixa linhas de texto saírem pela lateral da página. Se você preferir que o texto quebre para a linha seguinte, clique no menu <em>View</em> e escolha <em>Word Wrap</em>.</p>
</aside>
<h2 id="explore-quando-estiver-pronto" tabindex="-1"><a class="header-anchor" href="#explore-quando-estiver-pronto">Explore quando estiver pronto</a></h2>
<p>O VS Code pode fazer muitas coisas legais, mas o que cobrimos aqui já basta para começar. Pense nele como um Bloco de Notas mais caprichado. No fim das contas, ainda é só texto num arquivo. Começamos a jornada com o Bloco de Notas ou o TextEdit para mostrar que dá para fazer um site com ferramentas simples que você já tem no computador — sem mágica e sem programa caro.</p>
<p>Dito isso, um editor de código deixa o processo de escrever HTML mais gostoso e mais fácil de gerenciar. E, quando você estiver pronto, pode explorar todos os recursos que o VS Code oferece. Também pode experimentar outros editores de código para ver de qual gosta.</p>
<p>Por agora, vamos voltar a fazer o nosso site!</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>Agora que melhoramos o editor de texto, vamos aprender a adicionar <em>estilo</em> ao nosso site.</p>
<h1 id="um-site-com-estilo" tabindex="-1"><a class="header-anchor" href="#um-site-com-estilo">Um site com estilo</a></h1>
<p>Eu acho que o nosso site está legal. A simplicidade quieta dele é acolhedora num mundo cheio de distrações. Mesmo assim, ele parece bem simples e <em>sem estilo</em>.</p>
<p>O que a gente está vendo são os estilos padrão do navegador — o jeito que ele mostra texto e imagens quando ninguém deu instruções extras sobre a aparência. Mas a maioria dos sites que você visita não parece assim. Eles foram desenhados para parecer diferentes. Quem desenhou deu instruções: quais fontes usar, quais cores e qual o layout da página.</p>
<p>No mundo do HTML, a gente só se preocupa com <em>o que as coisas são</em> — isto aqui é um título, isto ali é um parágrafo, aqui tem uma imagem, e por aí vai. Para definir <em>como as coisas parecem</em>, o navegador usa a linguagem irmã do HTML: Cascading Style Sheets, ou CSS. CSS é a linguagem que diz ao navegador como o site deve parecer — cores, fontes, espaçamento.</p>
<p>Um jeito de incluir CSS é usar a tag <code><style></code> e colocar o código CSS direto nela. Por exemplo, olhe isto:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Gill Sans'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span></code></pre>
<p>Se você incluir este código em algum lugar da sua página, ele muda a fonte da tag <code><body></code> — na prática, de todo o texto visível da página. Este conjunto de regras CSS diz: “Use Gill Sans no corpo da página ou, se essa fonte não estiver disponível, use a fonte sans-serif padrão.”</p>
<aside class="aside"><p class="aside-label">Observação sobre fontes</p><p>Fontes serifadas (serif) parecem com isto. Elas têm uns tracinhos pequenos, chamados <em>serifs</em>, que saem um pouco dos traços maiores. Você costuma encontrá-las em livros e jornais.</p>
<p class="sans-serif">Fontes sans-serif são aquelas <em>sem</em> serifas e, em geral, têm um formato mais simples do que as serifadas. Elas parecem com isto. São populares na web e em interfaces.</p>
<p class="mono">Fontes monoespaçadas parecem um pouco com texto de máquina de escrever. Cada letra ocupa a mesma largura, o que ajuda se você quiser alinhar as coisas. São uma escolha popular para mostrar código de computador.</p>
</aside>
<p>Esse é um jeito totalmente válido de usar CSS. Mas você vai ver muita gente colocando as regras de estilo num arquivo separado. Algo como <code>styles.css</code>. O motivo principal é que fica mais fácil compartilhar os estilos entre várias páginas — você não precisa copiar e colar a tag <code><style></code> em cada página que criar.</p>
<p>CSS é uma linguagem poderosa. Todo site que você vê está usando ela. Todos aqueles desenhos detalhados, boa parte da animação e o posicionamento de imagens e tipografia — isso é CSS.</p>
<p>Mesmo assim, CSS também tem uma curva de aprendizado. E embora eu te incentive de verdade a explorar CSS, este livro é <em>HTML</em> e Pessoas — eu quero manter o foco no HTML. Mas tudo bem! A gente ainda pode usar CSS para deixar o site bonito sem escrever tudo na mão.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Se você tiver vontade de aprender mais sobre CSS, ótimo! Eu tenho <a href="/basico-de-css">um capítulo bônus</a> no fim deste livro que apresenta mais CSS e aponta para outros materiais.</p>
</aside>
<h2 id="frameworks-css" tabindex="-1"><a class="header-anchor" href="#frameworks-css">Frameworks CSS</a></h2>
<p>Até quem desenvolve sites profissionalmente e já sabe CSS usa CSS pronto como ponto de partida. A gente vai fazer algo parecido. Alguns frameworks CSS são feitos para quem desenvolve — eles vêm com um monte de recurso extra e pedem que você escreva o HTML de um jeito específico. Outros frameworks, porém, são pensados para sites mais simples. Eles deixam o seu HTML bonito sem você ter que fazer muito trabalho a mais. São chamados de <em>frameworks CSS classless</em>.</p>
<p>Para o nosso caso, isso é perfeito. Vamos usar um chamado <a href="https://simplecss.org/">Simple.css</a>. Mas aqui vão alguns outros que você pode querer olhar. Eles têm o mesmo espírito, com estilos diferentes.</p>
<ul>
<li><a href="https://perma.cc/5936-VK4J">Water.css</a></li>
<li><a href="https://perma.cc/F6E4-EU58">Sakura</a></li>
<li><a href="https://picocss.com/">Pico</a></li>
</ul>
<p>Eles vão deixar o seu HTML bonito e te dar um ótimo ponto de partida para um site básico. Fique à vontade para usar coisas que outras pessoas já fizeram. Tem muita coisa boa por aí!</p>
<h2 id="simplecss" tabindex="-1"><a class="header-anchor" href="#simplecss">Simple.css</a></h2>
<p>Eu te animo a dar uma olhada no <a href="https://simplecss.org/">site do Simple.css</a>, principalmente na <a href="https://simplecss.org/demo">página de demonstração</a>. Ela mostra como usar diferentes elementos HTML e como eles ficam com o Simple. Vamos baixar o Simple.css.</p>
<p>A <a href="https://perma.cc/XA5E-E59Q">documentação do Simple.css</a> dá algumas formas de começar, mas, pelo bem da simplicidade (viu o que eu fiz?), eu vou te passar o URL do arquivo CSS:</p>
<p><a href="https://cdn.simplecss.org/simple.css">https://cdn.simplecss.org/simple.css</a></p>
<p>Não se intimide com todo o código que tem lá! Você não precisa entender isso agora (nem nunca, de verdade). É só ir em <em>File > Save Page As</em> no navegador (<em>Command-S</em> no macOS e <em>Control-S</em> no Windows) e salvar este arquivo na pasta do projeto do seu site, onde está o <code>index.html</code>.</p>
<p>Pronto, você salvou. A gente vai adicionar isso à página daqui a pouco. Mas, primeiro, vamos organizar a casa.</p>
<h2 id="organizando-nossos-arquivos" tabindex="-1"><a class="header-anchor" href="#organizando-nossos-arquivos">Organizando nossos arquivos</a></h2>
<p>Até agora, a gente só tem três arquivos — a nossa página, um arquivo de imagem e o <code>simple.css</code> que acabamos de baixar. Mas logo vamos adicionar mais arquivos. Vamos criar um par de pastas e mover as coisas. A gente quer que a nova estrutura de arquivos fique assim:</p>
<ul>
<li>pasta <code>css</code>
<ul>
<li><code>simple.css</code></li>
</ul>
</li>
<li>pasta <code>images</code>
<ul>
<li><code>space.jpg</code></li>
</ul>
</li>
<li><code>index.html</code></li>
</ul>
<p>Limpo e organizado. No Visual Studio Code, você pode criar arquivos e pastas direto na barra lateral. Passe o mouse sobre os seus arquivos e você vai ver estes botões.</p>
<img src="/assets/img/vscode-new-folder.webp" alt="Captura de tela da janela do VS Code com uma pasta chamada 'MY-SITE' em destaque. Dentro da pasta há dois arquivos: 'index.html' e 'space.jpg.' Uma seta vermelha grande aponta para o botão 'New Folder' no canto superior direito do editor." style="max-width: 450px">
<p>Depois que você fizer as mudanças, se recarregar a página no navegador, vai notar que a nossa imagem não funciona mais. Perceba como o navegador recorre ao texto <code>alt</code> que a gente colocou, no lugar da imagem.</p>
<p><img src="/assets/img/a-website-with-style-1.webp" alt="Captura de tela da “Blake's Homepage.” Ela inclui seções: uma frase breve sobre o autor, jogos de tabuleiro favoritos e um guia de como fazer um site. A página tem texto preto simples sobre fundo branco. Há uma imagem, mas ela não está funcionando direito — no lugar aparece o texto alternativo, “Photograph of space with stars and stardust.”"></p>
<p>Isso acontece porque a gente moveu o arquivo de imagem <code>space.jpg</code> em relação à página inicial. Agora ele está numa pasta chamada <code>images</code>. A gente conserta isso atualizando o valor <code>src</code> da imagem. Coloque o nome da pasta e uma barra antes do nome do arquivo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<aside class="aside"><p class="aside-label">Mais sobre URLs</p><p>Quando a gente precisa informar o lugar dos arquivos no site — seja um link para outra página ou o caminho de uma imagem — a gente pode usar o que se chama de <em>URL relativa</em>.</p>
<p>Quando você está na página <code>index.html</code>, pense nela como o seu lugar atual. Se quiser apontar para uma imagem, precisa dizer ao navegador como encontrá-la. Uma URL relativa é um jeito de fazer isso. Ela descreve como ir “daqui até lá”, por assim dizer.</p>
<p>Parecido com o URL na barra do navegador, você usa barras para separar os níveis. O URL <code>images/space.jpg</code> significa: “procure uma pasta chamada <code>images</code> neste mesmo nível e, dentro dela, procure um arquivo chamado <code>space.jpg</code>.”</p>
</aside>
<h2 id="adicionando-o-simplecss-a-pagina" tabindex="-1"><a class="header-anchor" href="#adicionando-o-simplecss-a-pagina">Adicionando o Simple.css à página</a></h2>
<p>A gente pode adicionar uma <em>folha de estilo</em> à página de um jeito parecido com o da imagem. Vamos usar uma tag <code><link></code> para apontar para o arquivo CSS. Vamos colocá-la na tag <code><head></code> do site.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>A tag <code><link></code> é <em>self-closing</em> — ela não tem tag de fechamento. A gente precisa dar dois <em>atributos</em>. O <code>rel</code> diz qual é a relação do arquivo que estamos ligando com a nossa página. Arquivos CSS são chamados de <em>stylesheets</em> (folhas de estilo), então a gente informa isso como a relação (no singular). O <code>href</code> é onde a gente indica o arquivo, incluindo o caminho da pasta.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>O que as pessoas costumam chamar de “links” numa página — texto ou imagens clicáveis — é feito com a tag <code><a></code>, como a gente já viu. Em geral, eles apontam para um destino para o qual a gente navega ao clicar.</p>
<p>A tag <code><link></code> indica um arquivo que a gente quer ligar à página e qual é a relação desse arquivo. Aqui a gente está usando ela para conectar uma folha de estilo. Outra relação comum é definir um ícone para o site, por exemplo.</p>
</aside>
<p>Assim, de uma vez, o nosso site se transforma. Agora a gente vê uma página centralizada, texto maior e uma fonte sans-serif.</p>
<p><img src="/assets/img/a-website-with-style-2.webp" alt="Captura de tela da “Blake's Homepage” com o estilo atualizado usando Simple.css. A tipografia mudou: o título “Blake's Homepage” agora está em negrito e maior, formando um cabeçalho mais evidente. A imagem que estava quebrada agora aparece direito, mostrando uma foto colorida de um céu estrelado. O texto está mais organizado, com melhor espaçamento, e as seções ficam claras com títulos em negrito para “Favorite board games” e “How to make a website.” O layout geral parece mais limpo e organizado, com leitura melhor."></p>
<h2 id="adicionando-um-header-um-footer-e-o-conteudo-principal" tabindex="-1"><a class="header-anchor" href="#adicionando-um-header-um-footer-e-o-conteudo-principal">Adicionando um header, um footer e o conteúdo principal</a></h2>
<p>A gente vê que o arquivo Simple.css fez efeito na hora. Mas as coisas ficam ainda melhores quando a gente adiciona algumas seções que o Simple.css espera — um <code><header></code> para o título do site e um <code><main></code> para a área de conteúdo principal. A gente não usou isso antes — não é obrigatório — mas usar é uma boa prática.</p>
<p>E isto é totalmente opcional, mas já que estamos nisso, vale adicionar um <code><footer></code> também. Às vezes as pessoas colocam informação de copyright aqui. Às vezes têm rodapés grandes, com uns montes de links. Às vezes é só o nome. Eu vou manter simples, mas você pode colocar o que quiser.</p>
<p>Então a gente coloca o nome do site numa tag <code><header></code> e o conteúdo principal na tag <code><main></code>. Depois, adiciona um <code><footer></code> com um pouco de informação.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>PAGE CONTENT GOES HERE<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Made with ❤️ and ☕️ by Blake Watson.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></code></pre>
<p>Depois desses ajustes, o título do site ganha um estilo especial, e parágrafos e listas ficam com um espaçamento mais adequado.</p>
<p><img src="/assets/img/a-website-with-style-3.webp" alt="Captura de tela da “Blake's Homepage” com mais melhorias de estilo. A página agora tem um cabeçalho claro no topo, com um fundo claro, que faz o título “Blake's Homepage” se destacar mais. O espaço entre as seções melhorou a leitura, e um rodapé novo apareceu embaixo, com o texto. Esse rodapé dá um toque pessoal. O layout geral parece mais estruturado e equilibrado visualmente."></p>
<aside class="aside"><p class="aside-label">Observação</p><p>Se você estiver acompanhando e notar que o seu site tem fundo escuro com texto claro, tudo bem! O Simple.css reconhece se você (quem visita o site) está com o sistema no modo escuro e, se estiver, usa um tema escuro no site. Para mudar esse comportamento, veja o capítulo bônus <a href="/personalizar-o-simple-css">Personalizar o Simple.css</a>.</p>
</aside>
<h2 id="atualize-o-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar">Atualize o site no ar</a></h2>
<p>Vamos colocar as novidades online! No Neocities, você não consegue enviar pastas pelo botão de upload. Ou você cria a pasta no painel clicando em “New Folder”, ou arrasta a pasta do computador para a área de soltar arquivos.</p>
<p><img src="/assets/img/a-website-with-style-4.webp" alt="Captura de tela do painel do Neocities da “Blake's Homepage.” A página mostra opções de gerenciamento de arquivos, incluindo enviar arquivos, criar arquivos novos e pastas novas. O URL da página do Blake e as opções de edição estão visíveis, com uma seta vermelha apontando para o botão “New Folder.”"></p>
<p>Provavelmente é mais fácil arrastar as pastas. Mas, se você criá-las na mão, precisa abrir cada pasta e enviar o conteúdo dela. Depois que uma pasta é criada, você passa o mouse sobre ela para ver as opções. Você vai querer clicar em “Manage” para abrir a pasta. Dali, pode clicar em “Upload” para enviar os arquivos certos para aquela pasta.</p>
<p>Mova arquivos que já existem renomeando-os. Por exemplo, se eu quiser mover <code>space.jpg</code> para dentro da pasta de imagens, posso clicar em “Rename” e incluir a pasta no caminho: <code>images/space.jpg</code>.</p>
<p><img src="/assets/img/a-website-with-style-5.webp" alt="Uma janela pop-up chamada “Rename / Move” mostra o caminho do arquivo “images/space.jpg” sendo editado."></p>
<p>É um pouco trabalhoso, mas não é tão ruim. Seja qual for o jeito, confira se os arquivos no Neocities batem com o que você tem no computador.</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>Neste capítulo a gente escreveu pouco código, mas se preparou para o que vem: organizamos as coisas, conseguimos uns estilos e separamos a página em seções.</p>
<p>O resto deste livro-web vai focar em construir o nosso site. No próximo capítulo, vamos adicionar uma página Sobre.</p>
<h1 id="adicionar-uma-pagina-sobre" tabindex="-1"><a class="header-anchor" href="#adicionar-uma-pagina-sobre">Adicionar uma página Sobre</a></h1>
<p>Pelo resto deste livro, a gente vai expandir a nossa página inicial pessoal e transformá-la num site completo, com várias páginas e um blog. O exemplo continua sendo a <strong>Blake’s Homepage</strong>, e o conteúdo vai falar de mim. Você vai querer adaptar as coisas para o que quiser ver no seu próprio site.</p>
<p>Se você não quiser fazer uma página pessoal, tudo bem também! Os conceitos que a gente cobre valem para todo tipo de site. Então você pode acompanhar e adaptar do seu jeito.</p>
<p>Se quiser um gostinho do resultado, visite a <a href="https://demo.htmlforpeople.com/">demonstração completa da Blake’s Homepage</a>.</p>
<p>Ela tem as seguintes páginas e recursos:</p>
<ul>
<li>Cabeçalho com navegação</li>
<li>Um blog com três posts</li>
<li>Página Sobre com uma foto</li>
<li>Um currículo digital</li>
<li>Uma página divertida com vídeos do YouTube embutidos</li>
</ul>
<p>Eu vou incluir muitos exemplos de código nos próximos capítulos, mas você também pode ir ao site de demonstração e <a href="https://perma.cc/3WP3-R9XL">ver o código-fonte</a> de qualquer página para consultar a qualquer momento.</p>
<h2 id="paginas-sao-so-arquivos-para-os-quais-voce-cria-um-link" tabindex="-1"><a class="header-anchor" href="#paginas-sao-so-arquivos-para-os-quais-voce-cria-um-link">Páginas são só arquivos para os quais você cria um link</a></h2>
<p>A gente vai criar uma página nova no site criando um arquivo novo. Crie <code>about.html</code> ao lado de <code>index.html</code>. Para digitar menos, copie todo o conteúdo de <code>index.html</code> e cole em <code>about.html</code>.</p>
<p>Agora, vamos limpar um pouco. Eu vou tirar o título “How to make a website” e o parágrafo com o link para o neal.fun. Esta página deve ser sobre mim. Falando nisso, eu também vou trocar a imagem por uma foto minha (se você não se sentir à vontade para usar uma foto sua, use qualquer imagem que quiser aqui).</p>
<p>Vou ampliar o conteúdo adicionando uns parágrafos. Este também é um ótimo lugar para colocar qualquer informação de contato que você quiser. Eu vou adicionar um link para a minha conta no Mastodon (com um emoji de elefante).</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>🐘 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://social.lol/@bw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Drop me a line on Mastodon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Lembre-se: um link é uma tag <code><a></code>. O texto que você envolve com a tag vira clicável. Depois você informa o <em>atributo</em> <code>href</code>, que é o destino do link — em geral, um URL.</p>
<aside class="aside"><p class="aside-label">Seletor de emoji</p><p>Para abrir um seletor de emoji:</p>
<ul>
<li>No Windows, pressione a tecla Windows + ponto (<code>.</code>)</li>
<li>No macOS, pressione <code>fn</code> + <code>e</code>.</li>
</ul>
</aside>
<p>Aqui está o meu código dentro da tag <code><body></code>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>About Blake<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/blake.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
My name is Blake. I enjoy making websites and teaching others to do the same. I started writing an HTML web book because I think everyone should have a personal website and I want to show that you don't have to be a computer science graduate to make one.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
I'm a side project enthusiast and have put various sites, apps, and (bad) games into the world. My hobbies include web-related nerdery, D&D and board games, and writing. I like to participate in National Novel Writing Month, the annual novel-writing challenge
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>🐘 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://social.lol/@bw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Drop me a line on Mastodon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Favorite board games<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Dungeons & Dragons<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Risk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pandemic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Made with ❤️ and ☕️ by Blake Watson.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span></code></pre>
<p>E é assim que fica.</p>
<p><img src="/assets/img/adding-an-about-page-1.webp" alt="Captura de tela da página “About Blake”. O cabeçalho mostra “About Blake.” Abaixo há uma foto do Blake (eu!) sorrindo na frente de um muro de tijolos. O texto apresenta o Blake, falando da paixão por fazer sites e ensinar outras pessoas, além dos hobbies com desenvolvimento web, D&D, jogos de tabuleiro e escrita. Há um link para falar com ele no Mastodon. Uma seção chamada “Favorite board games” lista “Dungeons & Dragons,” “Risk” e “Pandemic.” O rodapé da página diz “Made with ❤️ and ☕ by Blake Watson.”"></p>
<p>Surpresa, sou eu! Enfim, isto já parece uma página Sobre de verdade. Eu admito que está um pouco forçado. Sinta-se à vontade para escrever o quanto quiser aqui.</p>
<h2 id="navegando-entre-as-paginas" tabindex="-1"><a class="header-anchor" href="#navegando-entre-as-paginas">Navegando entre as páginas</a></h2>
<p>A gente já tem uma página Sobre, mas precisa de um jeito de ir de uma página à outra. A gente precisa de um menu de navegação, ou menu nav. Um menu nav é só uma lista de links. O Simple.css parece gostar do menu nav acima do cabeçalho, então eu vou colocar ali. Mas você também pode colocar abaixo, se quiser.</p>
<p>O HTML tem uma tag <code><nav></code> exatamente para isso. Vamos colocar dois links no nosso menu nav — um para a página inicial e um para a página Sobre.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>About Blake<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span></code></pre>
<p>Como esta é, no momento, a página Sobre, eu adicionei um atributo especial ao link. ARIA significa Accessible Rich Internet Applications. A gente deixa o site mais acessível adicionando o atributo <code>aria-current="page"</code>. Isso faz um par de coisas por nós.</p>
<ul>
<li>Deixa a página mais acessível para tecnologias assistivas, como leitores de tela.</li>
<li>O Simple.css estiliza o link de outro jeito, para ficar fácil ver em qual página a gente está.</li>
</ul>
<p><img src="/assets/img/adding-an-about-page-2.webp" alt="Captura de tela da parte de cima da página “About Blake”, com botões de navegação. A navegação inclui “Home” e “About,” com o botão “About” em destaque para indicar a página atual. O título “About Blake” aparece em negrito abaixo da barra de navegação."></p>
<p>Vamos adicionar o mesmo menu nav na página inicial. Abra o <code>index.html</code> e coloque o menu como a gente fez na página Sobre. Como esta é a página inicial, a gente deve colocar o atributo <code>aria-current</code> no link Home.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span></code></pre>
<p>Abra no navegador e admire o seu site de várias páginas! Clique. Clique. Clique…</p>
<h2 id="limpando-a-pagina-inicial" tabindex="-1"><a class="header-anchor" href="#limpando-a-pagina-inicial">Limpando a página inicial</a></h2>
<p>Como agora a gente tem uma página Sobre, parte do conteúdo da página inicial ficou repetido. Um pouco disso já está na página Sobre. Eu vou tirar o texto de bio, o link do Neal.fun e a lista de jogos de tabuleiro. Vou manter a imagem do espaço e adicionar um parágrafo de boas-vindas. E já que estamos nisso, vou manter a lista “how to make a website”.</p>
<p>Falando da imagem do espaço, vamos deixá-la mais interessante. Eu quero dar uma legenda a esta imagem e um link para o lugar de onde eu a tirei. A gente pode marcar melhor uma imagem envolvendo-a numa tag <code><figure></code> e incluindo um <code><figcaption></code>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>
Space is cool. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Photo source<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span></code></pre>
<p>O meu conteúdo <code><main></code> na página inicial agora fica assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/space.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Photograph of space with stars and stardust.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>
Space is cool. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Photo source<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Welcome to my website! Here you can find out more about me, read my very interesting and totally not contrived blog posts, and check out some of the fun hobbies I am into. It won't be long until you are wondering what sorcery I have used to create this mind-blowing, web-based experience. The answer is HTML.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>How to make a website<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create an HTML file<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Write some HTML in it<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Open it with your web browser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>notice<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Quer aprender a fazer um site como este?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> Confira o livro-web gratuito <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML e Pessoas<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. Foi feito para todo mundo e ensina a criar uma página de um jeito amigável e acessível.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span></code></pre>
<p>O que é este <code>class="notice"</code>? Você pode aprender mais sobre classes nos capítulos bônus de CSS no fim deste livro. Mas, em resumo, isso ativa alguns estilos que o Simple.css oferece para fazer uma caixinha com um pouco de texto.</p>
<p><img src="/assets/img/adding-an-about-page-3.webp" alt="Captura de tela da “Blake's Homepage” reorganizada. O cabeçalho inclui botões de navegação para “Home” (em destaque) e “About.” Abaixo há uma imagem grande e colorida de um céu estrelado. O texto de introdução dá as boas-vindas, fala de posts de blog e hobbies, com um tom brincalhão sobre a simplicidade de usar HTML. Uma seção chamada “How to make a website” lista três passos: “Create an HTML file,” “Write some HTML in it” e “Open it with your web browser.” Uma caixa em destaque convida as visitas a conferir o tutorial “HTML for People.”"></p>
<h2 id="atualize-o-site-no-ar" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar">Atualize o site no ar</a></h2>
<p>Se você quiser. Também está tudo bem continuar trabalhando no computador. Muitos sites são feitos assim — a pessoa trabalha no site no próprio computador até terminar e só então publica. Mas tem bastante gente que também constrói o site em público, atualizando o site no ar conforme avança.</p>
<p>Se quiser atualizar, volte ao painel do Neocities e envie tanto o <code>index.html</code> quanto o <code>about.html</code>, já que esses arquivos mudaram. Se você adicionou alguma imagem, precisa entrar na pasta de imagens no Neocities e enviá-las lá (ou pode arrastar a pasta <code>images</code> para a área de soltar arquivos, o que substitui a pasta inteira e o conteúdo).</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>A gente transformou a nossa <em>página</em> num <em>site</em>! A seguir, vamos adicionar um blog e explorar várias tags HTML.</p>
<h1 id="adicionar-um-blog" tabindex="-1"><a class="header-anchor" href="#adicionar-um-blog">Adicionar um blog</a></h1>
<p>Blogs são uma parte enorme da web. Você provavelmente já ouviu falar de várias plataformas populares de blog, como WordPress, Tumblr e Blogger. E existem um monte de <a href="https://perma.cc/K3PV-JL9S">plataformas menores e independentes</a>.</p>
<p>Mas você não <em>precisa</em> de uma dessas plataformas para ter um blog. Um blog é só uma série de posts em ordem cronológica (em geral, cronológica <em>inversa</em>, com os posts mais novos primeiro). A gente consegue fazer isso com HTML!</p>
<p>Eu vou adicionar três posts. Não vou colocar todo o código neste capítulo, porque ficaria um pouco longo demais. Você pode olhar o site de demonstração para ver os artigos prontos. Mas eu <em>vou</em> te mostrar como estruturar os arquivos e passar por algumas das tags HTML diferentes que a gente pode usar.</p>
<h2 id="crie-a-home-do-blog" tabindex="-1"><a class="header-anchor" href="#crie-a-home-do-blog">Crie a home do blog</a></h2>
<p>Siga estes passos para deixar o blog disponível em <code>sitename.neocities.org/blog</code>.</p>
<ol>
<li>Crie uma pasta chamada <code>blog</code>; dentro dela, crie um arquivo chamado <code>index.html</code>.</li>
<li>Copie o conteúdo de uma das suas outras páginas e cole neste <code>index.html</code> novo e vazio.</li>
<li>Mude o <code><h1></code> para “Blog”, “Meu blog” ou o nome que você quiser.</li>
<li>Mude o <code><title></code> para alterar o que aparece na aba. Por exemplo, “Blog - Blake’s Homepage.”</li>
<li>Limpe o conteúdo principal para ficar com uma tag <code><main></code> vazia. A gente adiciona conteúdo depois.</li>
</ol>
<p>Vamos abrir no navegador e ver como ficou.</p>
<p><img src="/assets/img/adding-a-blog-1.webp" alt="Captura de tela da página “Blog” no site do Blake. A página tem pouco estilo porque as referências de arquivo estão quebradas. O layout é simples e sem estilo, com texto preto comum sobre fundo branco. O cabeçalho tem links para “Home” e “About” em azul e sublinhados, no estilo padrão do navegador. O título principal “Blog” está em negrito e grande, mas a aparência geral não tem o desenho estruturado das páginas anteriores."></p>
<p>Opa, a gente quebrou; o que aconteceu!? Tem a ver com a estrutura de arquivos. Olhe a tag <code><link></code>, onde a gente adicionou os estilos do Simple.css.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>Ela está procurando <code>css/simple.css</code>, mas não encontra. Por quê? O caminho que a gente deu é <em>relativo</em> ao arquivo atual. O arquivo atual está na pasta <code>blog</code>, então ela procura <code>blog/css/simple.css</code>, que não existe.</p>
<p>Então, como a gente se refere a arquivos que não estão na pasta atual? A gente pode usar a sintaxe <code>..</code>, assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<p>Isso significa: “suba um nível e, então, procure css/simple.css.”</p>
<p><img src="/assets/img/adding-a-blog-2.webp" alt="Captura de tela da página “Blog” no site do Blake, agora com o estilo corrigido. A página mostra um cabeçalho claro, com botões arredondados para “Home” e “About,” melhorando a navegação. O título principal “Blog” está bem no centro, em negrito, com uma hierarquia visual clara. O rodapé tem uma linha fina de divisão acima e o texto centralizado."></p>
<p>Bem melhor! Agora, vamos atualizar a navegação. Como a página inicial e a página Sobre não estão na pasta atual, a gente precisa usar a mesma sintaxe <code>..</code> para criar o link até elas.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
<p>Você também precisa atualizar a navegação nas outras páginas para incluir um link para o blog. Por exemplo, o nav da página inicial deve ficar assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blog/index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
<aside class="aside"><p class="aside-label">Observação</p><p>Como a gente está abrindo os arquivos do site direto no navegador, está usando <em>URLs relativas</em> para formar os links para outras páginas e arquivos. Num capítulo que vem aí, a gente vai aprender a <a href="/intervalo-instalar-um-servidor-local">rodar um servidor web local</a> e como isso nos permite usar <em>URLs absolutas</em>, que são mais diretas.</p>
</aside>
<h2 id="crie-o-primeiro-post" tabindex="-1"><a class="header-anchor" href="#crie-o-primeiro-post">Crie o primeiro post</a></h2>
<p>Eu vou escrever um post bobo sobre ensinar HTML a um gato. Vou criar um arquivo <code>2024-04-12-whiskers.html</code> na pasta <code>blog</code>. Você pode nomear o arquivo do post como quiser. O legal de incluir a data é que, conforme você cria mais posts, eles aparecem em ordem no sistema de arquivos do computador.</p>
<p>Como ponto de partida, a gente copia o conteúdo de <code>blog/index.html</code> para o arquivo novo. Eu vou mudar o <code><h1></code> (e o <code><title></code>) para o nome do meu artigo, “How I taught my cat to make a website with HTML.” Também vou ajustar a navegação. A gente não está na página de listagem do Blog, então não é correto dizer <code>aria-current="page"</code> no link do blog. Mas <em>está</em> dentro da seção Blog do site. Então eu vou mudar o atributo para o mais geral <code>aria-current="true"</code>. Isto é <strong>só para páginas de posts individuais</strong>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
<p>No fim do post, eu vou adicionar um link de volta ao blog. Como a gente já está na pasta <code>blog</code>, um link para <code>index.html</code> é tudo que a gente precisa para chegar à home do blog.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title="←">&larr;</span> Back to the blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>O pedaço <code>class="button"</code> é um estilo que o Simple.css oferece e que faz um link de texto parecer um botão. O <code>&larr;</code> é um código especial chamado de <em>entidade HTML</em>. Elas servem para representar caracteres especiais. Esta daqui é uma <em>seta para a esquerda</em>. Você pode ver uma <a href="https://perma.cc/BEA6-LF46">lista de outras entidades aqui</a>.</p>
<p>Eu vou adicionar três posts com uns poucos dias de diferença, só como exemplo. Quando eu terminar, vou ter estes posts.</p>
<ul>
<li><a href="https://demo.htmlforpeople.com/blog/2024-04-12-whiskers.html">How I taught my cat to make a website with HTML</a></li>
<li><a href="https://demo.htmlforpeople.com/blog/2024-04-15-aliens.html">The time I built a website for aliens</a></li>
<li><a href="https://demo.htmlforpeople.com/blog/2024-04-20-donuts">Why donuts are the best thing ever</a></li>
</ul>
<p>A minha estrutura de arquivos vai ficar assim:</p>
<ul>
<li><code>blog</code>
<ul>
<li><code>2024-04-12-whiskers.html</code></li>
<li><code>2024-04-15-aliens.html</code></li>
<li><code>2024-04-20-donuts.html</code></li>
<li><code>index.html</code></li>
</ul>
</li>
<li><code>css</code>
<ul>
<li><code>simple.css</code></li>
</ul>
</li>
<li><code>images</code>
<ul>
<li><code>blake.jpg</code></li>
<li><code>space.jpg</code></li>
</ul>
</li>
<li><code>about.html</code></li>
<li><code>index.html</code></li>
</ul>
<h2 id="formatacao-de-texto" tabindex="-1"><a class="header-anchor" href="#formatacao-de-texto">Formatação de texto</a></h2>
<p>Vamos ver algumas tags que você pode usar nos posts e em outras páginas.</p>
<p>Para negrito e itálico, a gente pode usar as tags <code><strong></code> e <code><em></code>, nesta ordem.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
After just three days, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Whiskers can now create web pages<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> better than <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>I<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> can!
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Isso renderiza assim.</p>
<p><img src="/assets/img/adding-a-blog-3.webp" alt="A captura de tela do texto renderizado mostra o seguinte em negrito: “Whiskers can now create web pages”"></p>
<h2 id="citacoes-em-bloco" tabindex="-1"><a class="header-anchor" href="#citacoes-em-bloco">Citações em bloco</a></h2>
<p>A gente pode usar a tag <code><blockquote></code> para citar uma pessoa, um livro, outro site ou até a si mesmo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span>
"HTML is <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>elementary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> my dear Watson."<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="—">&mdash;</span> Whiskers, probably<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span></code></pre>
<p>Aqui eu estou usando <code><strong></code> para dar ênfase extra. Estou usando a tag <code><cite></code> para mostrar a fonte da citação. A tag <code><br></code>, que é <em>self-closing</em>, cria uma quebra de linha manual, o que empurra o elemento <code><cite></code> para a linha seguinte. Eu usei outro caractere especial, <code>&mdash;</code>, para criar um <a href="https://practicaltypography.com/hyphens-and-dashes.html"><em>travessão</em> (em dash)</a>.</p>
<p><img src="/assets/img/adding-a-blog-4.webp" alt="Uma citação em bloco estilizada, renderizada no navegador. A frase “HTML is elementary my dear Watson.” está em itálico, e a palavra “elementary” também está em negrito. Uma barra vertical azul aparece à esquerda da citação, dando ênfase visual. Abaixo da citação, a atribuição “— Whiskers, probably” aparece numa fonte menor, alinhada à esquerda, criando uma atribuição visualmente distinta."></p>
<p>Citações em bloco costumam ser estilizadas como blocos de texto recuados, muitas vezes com uma borda ou uma cor de fundo para dar mais ênfase. A imagem acima mostra como o Simple.css as estiliza (salvo aviso em contrário, todas as imagens de exemplo que eu posto são HTML estilizado com Simple.css).</p>
<h2 id="recapitulando-titulos-e-listas" tabindex="-1"><a class="header-anchor" href="#recapitulando-titulos-e-listas">Recapitulando: títulos e listas</a></h2>
<p>A gente cobriu isto rapidinho no Capítulo 2, <a href="/adicionar-conteudo-ao-seu-site">Adicionar conteúdo ao seu site</a>, mas vale recapitular. Os nossos posts já usam o título mais alto, o <code><h1></code>, mas se você estiver escrevendo um post que precisa de mais títulos, tudo bem!</p>
<p>Títulos em HTML são hierárquicos. Isso significa que títulos <code><h2></code> devem vir depois de títulos <code><h1></code>, títulos <code><h3></code> devem vir depois de títulos <code><h2></code>, e assim por diante. Tecnicamente, o HTML nos dá seis níveis de título — de <code><h1></code> a <code><h6></code>. Mas a moderação é importante aqui. Pergunte a si mesmo se você <em>realmente</em> está deixando a página mais fácil de entender ao adicionar tantos níveis de título. O meu conselho é ficar com três níveis ou menos.</p>
<p>E, claro, a gente tem listas. A gente cobriu isso no Capítulo 2, mas vamos olhar de novo. Você tem duas opções aqui — uma lista com marcadores (chamada de <em>não ordenada</em>) e uma lista numerada (chamada de <em>ordenada</em>).</p>
<p>Aqui está uma lista com marcadores, ou <em>não ordenada</em>, usando a tag <code><ul></code> para a lista e <code><li></code> para cada <em>item da lista</em>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Bread<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sugar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Hole<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
<p>Isso renderiza assim.</p>
<ul>
<li>Bread</li>
<li>Sugar</li>
<li>Hole</li>
</ul>
<p>E aqui está uma lista numerada, ou <em>ordenada</em> (com alguns pontos em negrito para dar ênfase).</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Portable Happiness:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Donuts are the perfect grab-and-go
food. You can take them anywhere: to work, to the park, or on a road trip.
They're like little circles of happiness that fit in your hand.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Instant Mood Boost:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Feeling down? Have a donut. It's
scientifically proven* that donuts can turn a frown upside down. (*Not
actually proven, but we all know it's true.)
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Endless Creativity:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> Donut shops are constantly coming up
with new and exciting flavors. From maple bacon to matcha green tea, the
possibilities are endless. It's like a delicious adventure every time you
visit.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span></code></pre>
<p>É assim que fica.</p>
<ol>
<li><strong>Portable Happiness:</strong> Donuts are the perfect grab-and-go food. You can take them anywhere: to work, to the park, or on a road trip. They’re like little circles of happiness that fit in your hand.</li>
<li><strong>Instant Mood Boost:</strong> Feeling down? Have a donut. It’s scientifically proven* that donuts can turn a frown upside down. (*Not actually proven, but we all know it’s true.)</li>
<li><strong>Endless Creativity:</strong> Donut shops are constantly coming up with new and exciting flavors. From maple bacon to matcha green tea, the possibilities are endless. It’s like a delicious adventure every time you visit.</li>
</ol>
<p>Você até pode <em>aninhar</em> listas, assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
First main point
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sub point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Another sub point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
Second main point
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sub-point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Another sub-point<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
<p>Isso renderiza mais ou menos assim.</p>
<ul>
<li>First main point
<ul>
<li>Sub point</li>
<li>Another sub-point</li>
</ul>
</li>
<li>Second main point
<ul>
<li>Sub point</li>
<li>Another sub-point</li>
</ul>
</li>
</ul>
<h2 id="separando-o-conteudo" tabindex="-1"><a class="header-anchor" href="#separando-o-conteudo">Separando o conteúdo</a></h2>
<p>Um dos jeitos de adicionar espaço entre elementos na mão é a tag <code><br></code>, ou tag de <em>quebra</em> (<em>break</em>). A tag de quebra adiciona uma quebra de linha. Por exemplo, veja este haicai (de <a href="http://www.npr.org/blogs/thetwo-way/2013/05/02/180532424/send-your-haiku-to-mars-nasa-seeks-poets#comment-882372940">Robert Cole</a>).</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
A timeless red orb
floats lazy in the ether
unimpressed by war.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Por padrão, o navegador renderiza tudo numa linha só e ignora a maior parte do espaço em branco no seu HTML.</p>
<p><img src="/assets/img/adding-a-blog-5.webp" alt="Uma única linha de texto renderizada no navegador: “A timeless red orb floats lazy in the ether unimpressed by war.” O texto aparece numa fonte sans-serif padrão, sem estilo extra, centralizado na horizontal na página."></p>
<p>Por um lado, isso é bom — significa que a gente pode formatar o código do jeito que quiser sem as visitas verem um monte de quebras de linha e recuos que a gente não pretendia. Mas, às vezes, a gente <em>quer</em> quebras de linha de verdade.</p>
<p>A gente conserta o haicai colocando um par de tags <code><br></code> ali.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
A timeless red orb<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
floats lazy in the ether<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
unimpressed by war.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p><img src="/assets/img/adding-a-blog-6.webp" alt="Texto em várias linhas no navegador, com quebra natural das palavras: “A timeless red orb floats lazy in the ether unimpressed by war.” O texto aparece numa fonte sans-serif padrão e está quebrado em três linhas."></p>
<p>Isso ajuda em doses pequenas, mas use com parcimônia. Na maior parte do tempo, o espaço entre elementos deve ser controlado com CSS — aplicando <code>margin</code> ou <code>padding</code>, por exemplo. Por sorte, a nossa folha de estilo Simple.css já tem um espaçamento padrão bom. A gente cobre o uso de CSS para espaçamento personalizado no <a href="/basico-de-css">capítulo bônus</a> no fim deste livro.</p>
<p>Outro jeito de separar o conteúdo na mão é usar uma <em>linha horizontal</em>, ou tag <code><hr></code>. Em geral, ela é estilizada como uma linha na horizontal. Isso pode ajudar quando você quer separar conteúdo — como uma seção nova ou uma cena nova, no caso de uma história. É mais ou menos assim que pode ficar.</p>
<p><img src="/assets/img/adding-a-blog-7.webp" alt="Dois parágrafos de texto de preenchimento renderizados no navegador. Os parágrafos estão separados por uma linha horizontal, o que dá uma divisão visual clara. O texto aparece numa fonte sans-serif padrão, e cada parágrafo tem um espaçamento de linha adequado, o que melhora a leitura."></p>
<aside class="aside"><p class="aside-label">Observação</p><p>O que é esse texto sem sentido? É um texto meio latim chamado <em><a href="https://en.wikipedia.org/wiki/Lorem_ipsum">lorem ipsum</a></em>, que costuma ser usado em situações de design quando você quer ver como o texto fica sem se distrair com o que ele diz.</p>
</aside>
<h2 id="codigo-e-texto-pre-formatado" tabindex="-1"><a class="header-anchor" href="#codigo-e-texto-pre-formatado">Código e texto pré-formatado</a></h2>
<p>Eu tenho usado estas tags <em>bastante</em> nas páginas que você está lendo neste livro. Veja este parágrafo:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
By the end of day one, he was familiar with basic tags like <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>html<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>,
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>head<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>body<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>. On day two, he was creating
paragraphs and lists. By day three, he had moved on to creating stunning
layouts with <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>article<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>section<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Isso vai mostrar os pedaços de código numa fonte monoespaçada e numa cor diferente, assim.</p>
<p><img src="/assets/img/adding-a-blog-8.webp" alt="Um parágrafo de texto renderizado no navegador, com tags HTML específicas em destaque em vermelho. O texto diz: “By the end of day one, he was familiar with basic tags like html, head, and body.” As palavras em destaque “html,” “head” e “body” estão em vermelho, numa fonte monoespaçada, enquanto o resto do texto permanece preto, chamando a atenção para estes termos."></p>
<p>Você já me viu incluir os símbolos de menor que (<code><</code>) e maior que (<code>></code>) nos elementos de código das páginas deste livro (assim, <code><a></code>). Isso pede um trabalhinho a mais. Tipo, se eu quiser mencionar uma tag <code><a></code>, eu não posso simplesmente escrever <code><code><a></code></code> porque o navegador vai achar que eu estou tentando fazer um link de verdade dentro da tag <code><code></code>. Para incluir os símbolos de menor que e maior que (às vezes chamados de “colchetes angulares”), a gente precisa das entidades HTML <code>&lt;</code> e <span style="text-wrap: nowrap"><code>&gt;</code>, </span>nesta ordem. Isso diz ao navegador que a gente quer renderizar os símbolos de verdade.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
By the end of day one, he was familiar with basic tags like
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>html<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>head<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>, and
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>body<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>. On day two, he was creating paragraphs and lists.
By day three, he had moved on to creating stunning layouts with
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>article<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span> and <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="<">&lt;</span>section<span class="token entity named-entity" title=">">&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span>.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre>
<p>Isso nos dá o seguinte.</p>
<p><img src="/assets/img/adding-a-blog-9.webp" alt="Um parágrafo parecido com o anterior, mas com as tags HTML cercadas por colchetes angulares, o que enfatiza o papel delas como elementos HTML. O texto diz: “By the end of day one, he was familiar with basic tags like , , and .”"></p>
<p>Como a gente viu antes, ao renderizar o seu conteúdo, o navegador ignora a maior parte do espaço em branco no seu código. Mas, às vezes, você quer preservar o espaçamento e as quebras de linha exatos. Um exemplo divertido é a arte ASCII, que é quando você faz arte com caracteres de texto puro.</p>
<pre class="language-html"><code class="language-html mono"> ___ ___ ___ ___
/\__\ /\ \ /\__\ /\__\
/:/__/_ \:\ \ /::L_L_ /:/ /
/::\/\__\ /::\__\ /:/L:\__\ /:/__/
\/\::/ / /:/\/__/ \/_/:/ / \:\ \
/:/ / \/__/ /:/ / \:\__\
\/__/ \/__/ \/__/</code></pre>
<p>O de cima deve aparecer como as letras “HTML” com um efeito 3D. Funciona porque usa uma fonte monoespaçada e preserva todo o espaço em branco. Como eu fiz? Eu usei a tag <code><pre></code>, que é para texto <em>pré-formatado</em>. Use assim.</p>
<pre class="language-html"><code class="language-html mono"><pre>
___ ___ ___ ___
/\__\ /\ \ /\__\ /\__\
/:/__/_ \:\ \ /::L_L_ /:/ /
/::\/\__\ /::\__\ /:/L:\__\ /:/__/
\/\::/ / /:/\/__/ \/_/:/ / \:\ \
/:/ / \/__/ /:/ / \:\__\
\/__/ \/__/ \/__/
</pre></code></pre>
<p>Se quiser brincar com mais arte de texto ASCII, dê uma olhada neste <a href="https://perma.cc/E5NZ-SV56">gerador de arte em texto</a>.</p>
<h2 id="asides" tabindex="-1"><a class="header-anchor" href="#asides">Asides</a></h2>
<p>A tag <code><aside></code> é divertida porque o Simple.css a estiliza de um jeito interessante. Elas servem para destaques ou <em>apartes</em> em relação ao conteúdo principal. Por exemplo, eu incluí um aside que lista ingredientes no meu <a href="https://demo.htmlforpeople.com/blog/2024-04-20-donuts">post sobre donuts</a>.</p>
<p><img src="/assets/img/adding-a-blog-10.webp" alt="Captura de tela de um post chamado “Why donuts are the best thing ever,” datado de 20 de abril de 2024. A página tem um menu de navegação com os botões “Home,” “Blog” (em destaque) e “About.” O post fala da alegria e da versatilidade dos donuts, com uma caixa na lateral listando “Donut ingredients” (Bread, Sugar, Hole). O layout é limpo e bem espaçado para a leitura."></p>
<p>O Simple.css estiliza o aside como uma caixa arredondada e o desloca para o lado. É um jeito legal de adicionar notas extras ou conteúdo secundário a uma página.</p>
<h2 id="mark-tachado-exclusao-insercao" tabindex="-1"><a class="header-anchor" href="#mark-tachado-exclusao-insercao">Mark, tachado, exclusão, inserção</a></h2>
<p>Aqui vão mais algumas tags de formatação de texto. Use <code><mark></code> para <mark>destacar texto</mark>. Se quiser tachar texto <s>indesejado</s>, envolva-o na tag <code><s></code>. Se quiser mostrar edições num documento de forma explícita, prefira a tag <code><del></code> para indicar uma exclusão e a tag <code><ins></code> para mostrar texto inserido. Por exemplo, isto vem do meu post sobre donuts.</p>
<p><img src="/assets/img/adding-a-blog-11.webp" alt="Captura de tela de texto com formatação de tachado e sublinhado. A frase “it's vegetables” está tachada, e “donuts” está sublinhado, enfatizando a troca de “vegetables” por “donuts” para destacar uma preferência bem-humorada na frase."></p>
<h2 id="preencha-a-pagina-indice-do-blog" tabindex="-1"><a class="header-anchor" href="#preencha-a-pagina-indice-do-blog">Preencha a página índice do blog</a></h2>
<p>Certo, a gente cobriu várias tags que você pode usar para <em>marcar</em> tipos diferentes de conteúdo. Você pode parar um pouco e brincar com elas. Sem pressa! Eu fico bem aqui quando você estiver pronto. Quando tiver dois ou três posts, vamos colocá-los na página principal do blog.</p>
<p>Se você abrir <code>blog/index.html</code>, ela parece um pouco vazia. A gente conserta isso agora, mostrando o título de cada post, o mais novo primeiro, a data de publicação e um resumo de uma frase. Clicar no título de um post deve levar a pessoa leitora até ele.</p>
<p>Vamos usar a tag <code><article></code> para cada um, porque cada um representa uma composição independente. De brinde, o Simple.css vai estilizá-los como cartões. Vamos usar <code><h2></code> para o título do post, e dentro dele a gente coloca um link (a tag <code><a></code>). Vamos usar a tag <code>time</code> para a data. Vamos usar um parágrafo comum, ou tag <code><p></code>, para o resumo. A marcação final fica assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-04-20-donuts.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
Why donuts are the best thing ever
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2024-04-20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>April 20, 2024<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Donuts are the ultimate comfort food because of their versatility,
variety, portability, mood-boosting power, and endless creative flavors.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span></code></pre>
<p>O link no título vai receber um <em>atributo</em> <code>href</code>, o destino do link. Como a gente já está na pasta <code>blog</code>, a gente pode usar o nome do arquivo do post como destino.</p>
<p>A gente está usando a tag <code><time></code> para oferecer uma versão da data amigável para máquinas. Isso pode ser útil para mecanismos de busca que vasculham o seu site ou para possíveis recursos do navegador que dependem de datas. A tag <code><time></code> recebe um atributo chamado <code>datetime</code>, no qual você pode informar a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values">versão legível por máquina</a>.</p>
<p>Adicione um <code><article></code> como o de cima para cada post ao qual você quiser ligar. Você vai acabar com algo assim.</p>
<p><img src="/assets/img/adding-a-blog-12.webp" alt="Captura de tela de uma página de listagem de blog, com um cabeçalho contendo botões de navegação para “Home,” “Blog” (em destaque) e “About.” O título principal diz “Blog.” Abaixo há três prévias de posts, com títulos em azul: “Why donuts are the best thing ever,” “The time I built a website for aliens” e “How I taught my cat to make a website with HTML,” cada uma com um resumo breve e a data (20 de abril, 15 de abril e 12 de abril de 2024, nesta ordem)."></p>
<h2 id="uma-tabela-dos-elementos-html" tabindex="-1"><a class="header-anchor" href="#uma-tabela-dos-elementos-html">Uma tabela dos elementos (HTML)</a></h2>
<p>Ufa! A gente cobriu um bocado de tags e adicionou bastante conteúdo neste capítulo. Pode ser muita coisa para lembrar. Se você precisar consultar como usar uma tag HTML em particular — ou se quiser ver quais tags HTML existem — dê uma olhada nesta <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">referência de elementos HTML</a> no MDN. O <a href="https://developer.mozilla.org">MDN</a> é, mais ou menos, o manual oficial da web. É só pesquisar qualquer tag, atributo ou conceito sobre o qual você queira saber mais.</p>
<h2 id="atualize-o-site-no-ar-opcional" tabindex="-1"><a class="header-anchor" href="#atualize-o-site-no-ar-opcional">Atualize o site no ar (opcional)</a></h2>
<p>Se quiser enviar as mudanças para o Neocities, siga o mesmo processo dos capítulos anteriores. Arraste e solte a pasta <code>blog</code> na área de soltar arquivos para enviar a pasta inteira de uma vez. Como você atualizou o menu nav em todas as páginas, também vai querer enviar de novo as páginas Home e Sobre.</p>
<p>Claro, você também pode continuar trabalhando <em>localmente</em>, em vez de enviar o progresso agora. Você que manda!</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>Ufa, a gente terminou o nosso tour rápido de adicionar um blog com várias tags! A seguir, a gente reduz o ritmo e foca na estrutura da página, adicionando uma página de currículo que você pode compartilhar com empregadores em potencial.</p>
<h1 id="adicionar-um-curriculo-ou-cv" tabindex="-1"><a class="header-anchor" href="#adicionar-um-curriculo-ou-cv">Adicionar um currículo (ou CV)</a></h1>
<p>Nos capítulos anteriores, a gente aprendeu a colocar vários tipos de conteúdo nas páginas HTML. Agora vamos ver como dar estrutura a uma página grande. Vamos adicionar uma página de currículo (CV).</p>
<p>Um currículo fica diferente para cada pessoa. Se você está na universidade (ou fora dos Estados Unidos), talvez faça um <em>curriculum vitae</em>. Quem trabalha há muitos anos pode ter um currículo longo. Quem ainda estuda pode não ter muita experiência de trabalho.</p>
<p>Não se preocupe se você ainda não tem muita experiência. Dá para criar seções falando da sua formação: diplomas, matérias e atividades da escola. Ou você pode focar em trabalhos de meio período ou no voluntariado.</p>
<p>Outra opção é deixar menos “currículo” e mais portfólio de projetos, se isso fizer mais sentido para você. Inclua habilidades que você já tem (tipo HTML!). Pesquise dicas de currículo na web. A internet está cheia de conselhos para gente em fases diferentes da carreira.</p>
<p>Mas se currículo não é a sua praia, tudo bem. Pegue as ideias de marcação que a gente explora aqui e use do jeito que quiser. O site é seu. É importante que você goste de fazê-lo.</p>
<h2 id="criar-o-arquivo-do-curriculo" tabindex="-1"><a class="header-anchor" href="#criar-o-arquivo-do-curriculo">Criar o arquivo do currículo</a></h2>
<p>Crie um arquivo na raiz do site, <code>resume.html</code>, e copie o conteúdo de uma das outras páginas principais para dentro dele.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Se você está usando o Visual Studio Code, selecione uma das páginas principais na barra lateral e depois copie e cole. Vai nascer uma cópia da página, e você pode renomear o arquivo.</p>
</aside>
<p>Do jeito que você criar o arquivo, lembre de atualizar o <code><title></code>, o <code><h1></code> e o <code><nav></code>. Eu vou colocar o meu nome no <code><h1></code> e a profissão (ou um resumo) logo abaixo, em uma tag <code><p></code>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blog/index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>resume.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake Watson<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Experienced Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span></code></pre>
<h2 id="um-documento-com-secoes" tabindex="-1"><a class="header-anchor" href="#um-documento-com-secoes">Um documento com seções</a></h2>
<p>Um currículo quase sempre se divide em seções. As mais comuns são experiência, formação e habilidades. O HTML tem uma ferramenta para criar uma seção genérica de um documento: a tag <code><section></code>. Cada seção deve ter um título, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section">segundo a documentação</a>.</p>
<p>Vale dizer: também está tudo bem usar só os títulos, se você preferir. Eu escolhi a tag <code><section></code> para te mostrar um exemplo de uso. E também porque o Simple.css deixa um espaçamento bonito e um divisor entre elas.</p>
<p>Eu vou criar as seções abaixo. Mas lembre: você pode ter mais ou menos, conforme precisar. Elas não precisam ser iguais às minhas, nem na mesma ordem.</p>
<ul>
<li>Habilidades</li>
<li>Experiência</li>
<li>Projetos selecionados</li>
<li>Formação</li>
</ul>
<h2 id="habilidades" tabindex="-1"><a class="header-anchor" href="#habilidades">Habilidades</a></h2>
<p>Aqui eu vou listar minhas habilidades em tópicos curtos. Vou usar um título de nível 2 e envolver tudo em um <code><section></code>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Skills<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Web standards / accessibility<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Isso aparece assim na tela.</p>
<p><img src="/assets/img/adding-a-resume-1.webp" alt="Captura de tela de uma página “Resume” de Blake Watson. O cabeçalho tem botões de navegação para “Home”, “Blog”, “About” e “Resume” (este último destacado). O título “Blake Watson” aparece em negrito, com o subtítulo “Experienced Frontend Engineer” em itálico menor logo abaixo. Em seguida, uma seção chamada “Skills” lista várias habilidades técnicas em tópicos."></p>
<p>É uma lista limpa, com marcadores. Dito isso, eu sinto que sobra um pouco de espaço. Seria legal dividir em colunas. Não existe um jeito estritamente HTML de fazer isso. Mas vale usar um pouquinho de CSS para resolver.</p>
<p>Você já viu várias tags usando <em>atributos</em>. Cada página do nosso site tem links com a tag <code><a></code>, e cada link tem um atributo <code>href</code>, por exemplo. Outro atributo bem útil é o <code>style</code>. Ele deixa a gente aplicar CSS direto em um elemento HTML. Eu falo mais de CSS nos capítulos bônus no fim deste livro. Por agora, vamos usar o atributo <code>style</code> para dividir a lista em colunas.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Skills<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">columns</span><span class="token punctuation">:</span> 2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Web standards / accessibility<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Assim a lista fica mais agradável e aproveita melhor o espaço.</p>
<p><img src="/assets/img/adding-a-resume-2.webp" alt="Captura de tela da página “Resume” atualizada. A seção “Skills” agora está organizada em duas colunas, cada uma com habilidades técnicas em tópicos, num visual mais compacto e equilibrado."></p>
<h2 id="experiencia" tabindex="-1"><a class="header-anchor" href="#experiencia">Experiência</a></h2>
<p>Eu não sou especialista em currículo. Mas acho que vou colocar a experiência de trabalho em seguida. É provavelmente o que um empregador da minha área mais quer ver. Isso muda se você não tem muita experiência, ou se acha que formação ou outras qualificações pesam mais.</p>
<p>Marcar conteúdo é tanto arte quanto ciência. Não existe um único jeito certo. Um bom princípio para escolher as tags é este: a escolha precisa ter significado. Não vale escolher só pela aparência.</p>
<p>Por exemplo: você pode ficar tentado a usar um <code><h6></code> em algum lugar só porque quer um título pequenininho. Mas, a menos que esse título esteja seis níveis abaixo, <code><h6></code> não é a melhor escolha.</p>
<p>Vou te mostrar a marcação que eu escolhi, o resultado visual e, depois, a explicação.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Experience<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>MRI Technologies<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span>Present
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Build and maintain a spacesuit management app for NASA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
Build and maintain a document management system for Collins Aerospace
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create reactive frontends with Vue, REST APIs, and GraphQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- ...the rest of the jobs go here --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Isso nos dá uma seção com esta cara.</p>
<p><img src="/assets/img/adding-a-resume-3.webp" alt="Captura de tela da seção “Experience” numa página de currículo. O título “Experience” está grande e em negrito. Abaixo, o cargo “Frontend Engineer” aparece em destaque, seguido do nome da empresa “MRI Technologies” em negrito e do período “August 2019–Present”. Uma lista com marcadores descreve responsabilidades e conquistas nessa função."></p>
<p>Eu vou listar vários cargos que já tive. Por isso uso o nome do cargo como título (nível 3, porque ele fica abaixo do título de nível 2 <em>Experience</em>). Em seguida, quero mostrar o empregador e o período. Escolhi um único parágrafo para juntar as duas coisas. Uso uma quebra de linha manual para jogar o período para a segunda linha.</p>
<p>Outro jeito é colocar o nome do empregador no título, depois do cargo. Eu não acho que um jeito seja mais “certo” que o outro. Eu só prefiro reduzir a quantidade de texto grande na página.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>A gente está trabalhando dentro dos limites do Simple.css agora. Se a gente <em>realmente</em> quisesse controlar o visual, adicionaria um CSS personalizado. Não vamos fazer isso agora. Veja os capítulos bônus no fim do livro para saber mais sobre CSS.</p>
</aside>
<p>A gente envolve a data numa tag <code><time></code> e coloca a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#valid_datetime_values">data no formato que o computador entende</a> no <em>atributo</em> <code>datetime</code>. Eu uso uma <em>entidade</em> HTML, <code>&ndash;</code>, para colocar um traço entre a data de início e a de fim. Isso usa o caractere <em>en dash</em> (um traço um pouco mais longo que o hífen comum, <code>-</code>). Na <a href="https://practicaltypography.com/hyphens-and-dashes.html">tipografia, ele serve para intervalos numéricos</a>.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Dê uma olhada nesta <a href="https://perma.cc/BEA6-LF46">lista de entidades HTML</a>. É um guia de caracteres especiais que você pode usar no HTML.</p>
</aside>
<p>Por fim, eu uso uma <em>lista sem ordem</em> para os tópicos sobre o cargo e as responsabilidades.</p>
<p>Vou adicionar o resto da minha experiência de trabalho. Coloco o código completo no fim do capítulo. Você também pode <a href="https://demo.htmlforpeople.com/resume">ver o currículo de demonstração</a> e <a href="https://perma.cc/3WP3-R9XL">olhar o código-fonte</a>.</p>
<h2 id="projetos-selecionados" tabindex="-1"><a class="header-anchor" href="#projetos-selecionados">Projetos selecionados</a></h2>
<p>Na próxima seção, eu quero destacar alguns projetos em que trabalhei. É a versão currículo de um portfólio: um lugar para mostrar sites que eu fiz e, quando der, linkar para eles. Currículos impressos costumam ser só texto. Mas isto é uma página da web. Você pode colocar uma imagem ou duas nesta seção.</p>
<p>Nesses projetos, vou usar a tag <code><h3></code> para o título do projeto e um parágrafo de descrição junto. Se o projeto está no ar, eu coloco o link. Aqui vai um exemplo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Selected projects<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Mississippi Gulf Coast Community College<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
I worked on this website in my role as designer and developer at Mad Genius. I built out several of the dynamic, data-intensive sections like the searchable course catalog and the comprrehensive "A to Z" index. These sections made heavy use of reactive UI, third-party API integrations, and custom WordPress plugin development.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://mgccc.edu/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>mgccc.edu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- ...the rest of the projects go here --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<h2 id="formacao" tabindex="-1"><a class="header-anchor" href="#formacao">Formação</a></h2>
<p>Por fim, vou adicionar meus diplomas, a universidade, o ano de formatura e a área de estudo. Uso parágrafos simples, com <code><strong></code> para ênfase e <code><br></code> para quebras de linha manuais.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Education<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Master of Business Administration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2009<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Bachelor of Business Admiinistration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, Information Systems,
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<h2 id="exemplo-completo" tabindex="-1"><a class="header-anchor" href="#exemplo-completo">Exemplo completo</a></h2>
<p>Aqui está o código completo, incluindo o cabeçalho e a área de conteúdo principal.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blog/index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>resume.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake Watson<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Experienced Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Skills<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">columns</span><span class="token punctuation">:</span> 2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>HTML / CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Web standards / a11y<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>TypeScript<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Vue<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sass<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Electron<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Experience<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Frontend Engineer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>MRI Technologies<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span>Present
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Build and maintain a spacesuit management app for NASA<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Build and maintain a document management system for Collins Aerospace<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Create reactive frontends with Vue, REST APIs, and GraphQL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Web Developer/Interactive Designer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Mad Genius<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2015-05<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>May 2015<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2019-08<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>August 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Sketching, prototyping, and UI design<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>WordPress theme and plugin development<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Reactive UI with Vue and Knockout<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Third-party API integrations<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Web Developer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Self employed<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="–">&ndash;</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2015<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Communicated with clients<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Developed usable, standards-based websites<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Made responsive websites<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Volunteered on many non-profit projects<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Education<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Master of Business Administration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2009<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>Bachelor of Business Admiinistration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>, Information Systems, <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>time</span><span class="token punctuation">></span></span>2007<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>Mississippi State University, Starkville, MS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span></code></pre>
<p>Você pode ver o resultado no <a href="https://demo.htmlforpeople.com/resume">site de demonstração</a>. Mas aqui vai uma captura da página inteira.</p>
<p><img src="/assets/img/adding-a-resume-4.webp" alt="Captura de tela da página “Resume” completa. O título “Blake Watson” e o subtítulo “Experienced Frontend Engineer” aparecem em destaque. Abaixo, a seção “Skills” lista habilidades técnicas em duas colunas. A seção “Experience” detalha o histórico de trabalho: Frontend Engineer na MRI Technologies, Web Developer/Interactive Designer na Mad Genius e Web Developer (autônomo). A seção “Education” lista diplomas em administração pela Mississippi State University."></p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>A gente tem criado <em>muito</em> conteúdo. No próximo capítulo, vamos fazer um intervalo e ver como rodar um servidor web no computador. Ele deixa o teste do site mais parecido com um site de verdade, no ar.</p>
<h1 id="intervalo-instalar-um-servidor-local" tabindex="-1"><a class="header-anchor" href="#intervalo-instalar-um-servidor-local">Intervalo: instalar um servidor local</a></h1>
<p>HTML é uma linguagem acessível. Foi um dos motivos pelos quais eu quis fazer este livro na web. Ele é paciente com a gente. Se você lembra do primeiro capítulo — aquele primeiro site que era só uma frase ou duas —, vai lembrar que a gente não usou nenhuma tag HTML. Mesmo assim, deu para abrir o arquivo no navegador e ver o conteúdo. A gente colocou esse arquivo na web, e funcionou! Você pode começar simples e ir colocando complexidade conforme precisar.</p>
<p>Agora chegamos a um desses pontos. No próximo capítulo, vamos criar uma página divertida, com piadas, recursos de RPG de mesa e vídeos do YouTube embutidos.</p>
<p>O problema: os vídeos do YouTube podem não funcionar do jeito que a gente tem pré-visualizado o site — abrindo os arquivos HTML no navegador. Na maior parte do tempo, esse jeito é ótimo para ver HTML. Mas, quando a gente pede dados de outros sites — tipo um vídeo em streaming —, precisamos imitar um servidor web de verdade.</p>
<p>Um servidor web é um programa que deixa um site disponível em um endereço. Quando você visita esse endereço no navegador, vê o site. Um <em>servidor web local</em> é um programinha no seu computador que finge ser a internet, para você testar o site. Vamos instalar e rodar um. Assim o site fica disponível em um endereço local — só no seu computador, não para todo mundo na internet.</p>
<p>Vou te dar várias opções, conforme o sistema operacional e o quanto você quer se meter no lado técnico. Mas, primeiro, vamos falar de URLs.</p>
<h2 id="urls-relativas-e-urls-absolutas" tabindex="-1"><a class="header-anchor" href="#urls-relativas-e-urls-absolutas">URLs relativas e URLs absolutas</a></h2>
<p>Até agora, como a gente abria os arquivos do site direto no navegador, precisou usar URLs relativas. URLs relativas se escrevem do ponto de vista do arquivo atual. Por exemplo: se eu estou numa subpágina e quero linkar para uma página da raiz, preciso usar a sintaxe <code>..</code> para “subir” um nível e achar a página de destino.</p>
<p>Quando a gente roda um servidor web, dá para usar URLs absolutas. Uma URL absoluta se escreve sempre do ponto de vista do nível mais alto (o <em>nível mais alto</em> é a pasta que a gente apontou para o servidor web). Não importa em qual subpágina eu esteja: eu poderia linkar para a página inicial assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to the homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>A barra representa o nível mais alto (eu também poderia ter escrito <code>/index.html</code>, mas isso não é preciso: o servidor web usa esse arquivo automaticamente, se ele existir). Se eu quisesse linkar para a página <code>about.html</code>, faria assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to the About page<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>O legal é que não importa em qual página eu estou — pode ser uma página da raiz ou uma subpágina. Esse caminho sempre leva à página Sobre, de qualquer lugar. Imagine que a gente está numa página lá no fundo de uma pasta.</p>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- imagine we are currently on a blog page /blog/my-post.html--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My blog post<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- instead of this, which *does* work --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- we can do this --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span></code></pre>
<p>A gente não usou URLs absolutas antes porque não estava usando um servidor web. Se a gente tivesse tentado usar URLs absolutas abrindo o site direto no navegador, a barra apontaria para a pasta mais alta do <em>computador inteiro</em>. Com certeza não era isso que a gente queria.</p>
<p>Agora que a gente está usando um servidor web, eu deixo com você se quer voltar e trocar todos os caminhos. Mas isso deixa copiar e colar o menu bem mais fácil. Criar links entre páginas fica mais direto com URLs absolutas.</p>
<h2 id="opcoes-de-servidor-web" tabindex="-1"><a class="header-anchor" href="#opcoes-de-servidor-web">Opções de servidor web</a></h2>
<p>Aqui vão várias opções para rodar um servidor web no seu computador. Você não precisa ler tudo. Use os links abaixo para pular até a seção que vale para você.</p>
<ul>
<li><a href="#visual-studio-code-multiplataforma">Visual Studio Code (multiplataforma)</a></li>
<li><a href="#macos">macOS</a></li>
<li><a href="#windows-e-multiplataforma">Windows e multiplataforma</a></li>
<li><a href="#python-e-php-multiplataforma">Python e PHP (multiplataforma)</a></li>
</ul>
<h2 id="visual-studio-code-multiplataforma" tabindex="-1"><a class="header-anchor" href="#visual-studio-code-multiplataforma">Visual Studio Code (multiplataforma)</a></h2>
<p>A Microsoft publica uma extensão do VS Code chamada <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server">Live Preview</a>. Ela roda o seu site num servidor web local e atualiza sozinha quando você muda algo. Você pode instalar pelo link ou clicar no ícone de extensões e pesquisar o nome.</p>
<p><img src="/assets/img/intermission-installing-a-local-web-server-1.webp" alt="Captura de tela da loja de extensões do Visual Studio Code na página da extensão “Live Preview”. A extensão é da Microsoft e mostra descrição, avaliações, instruções de uso e o botão de instalação."></p>
<p>Depois de instalar, você vai notar a opção <em>Show Preview</em> quando clicar com o botão direito num arquivo.</p>
<p><img src="/assets/img/intermission-installing-a-local-web-server-2.webp" alt="Uma janela do VS Code mostra código HTML. O arquivo “index.html” está selecionado na barra lateral esquerda. Um menu de contexto sobre o index.html está aberto, com a opção “Show Preview” destacada."></p>
<p>Clicar nisso abre um painel ao lado, com uma prévia do site num endereço local. Você pode usar essa prévia, abrir no navegador digitando o endereço, ou clicar em <em>Open in Browser</em> no menu da barra de endereço.</p>
<p><img src="/assets/img/intermission-installing-a-local-web-server-3.webp" alt="Captura de tela de uma janela do VS Code. À esquerda, o código HTML de uma página pessoal. À direita, a prévia da página mostra “Blake's Homepage”, com botões de navegação e uma imagem de um céu estrelado. A URL aparece destacada numa barra de navegação."></p>
<h2 id="macos" tabindex="-1"><a class="header-anchor" href="#macos">macOS</a></h2>
<p>Eu uso Mac, então posso recomendar de coração o ótimo aplicativo <a href="https://iconfactory.com/worldwideweb/">WorldWideWeb</a>. É de graça para o que a gente precisa. Tem um upgrade Pro que recarrega a página sozinho quando você faz mudanças.</p>
<p>O funcionamento é assim: você aponta a pasta do site e clica no botão de play.</p>
<p><img src="/assets/img/intermission-installing-a-local-web-server-4.webp" alt="Captura de tela da janela do app “WorldWideWeb”, com duas seções principais: “Website Folder” e “Web Server”. Em “Website Folder” há um ícone de pasta com o nome “my-site”. Em “Web Server” há um botão de play com o texto “Server is stopped”. Setas vermelhas apontam para cada ícone."></p>
<p>Quando você clica no play, o site fica disponível em algum endereço. Clique em <em>Open Browser</em> para abrir essa URL no navegador padrão.</p>
<p><img src="/assets/img/intermission-installing-a-local-web-server-5.webp" alt="Captura da mesma janela. A interface mostra uma pasta de site chamada “my-site” e um servidor web com a URL “http://blakes-mac-studio.local:8080”. Há ícones de ações da pasta e botões “Reveal in Finder” e “Open Browser”. A URL e o botão Open Browser estão destacados."></p>
<p>E agora olha só: a gente está vendo o site no nosso endereço novinho em folha.</p>
<p><img src="/assets/img/intermission-installing-a-local-web-server-6.webp" alt="Uma janela do navegador com o título “Blake's Homepage” e links de navegação para Home, Blog, About e Resume. A área principal tem uma imagem de um céu estrelado com nebulosas coloridas. Uma seta vermelha aponta para a barra de endereço no topo da tela."></p>
<h2 id="windows-e-multiplataforma" tabindex="-1"><a class="header-anchor" href="#windows-e-multiplataforma">Windows e multiplataforma</a></h2>
<p>Quem usa Windows, tenho duas opções para você. Se você está no Visual Studio Code, eu recomendo pular para aquela seção e conhecer a extensão Live Preview da Microsoft.</p>
<p>Caso contrário, experimente o <a href="https://simplewebserver.org/">Simple Web Server</a>. Depois de instalar, clique no botão para criar um servidor novo.</p>
<img src="/assets/img/intermission-installing-a-local-web-server-7.webp" alt="Captura de tela do aplicativo Simple Web Server. No centro aparece a mensagem “You haven't created any servers yet”, com um ícone de servidor acima. No canto inferior direito, um botão amarelo com o texto “New Server”, destacado por uma seta vermelha." style="max-height: 600px; margin-inline: auto">
<p>Em seguida, aponte para a pasta do seu site: clique no botão com o ícone de pasta e escolha a pasta certa.</p>
<img src="/assets/img/intermission-installing-a-local-web-server-8.webp" alt="A janela “Add Server” do aplicativo Simple Web Server. Há campos para “Folder path” e “Port”, além das opções Basic Options, Advanced Options e Error Pages. Na parte de baixo ficam os botões “Cancel” e “Create Server”." style="max-height: 600px; margin-inline: auto">
<p>Quando o servidor estiver criado, você o vê na lista. Clique para abrir. Ali aparece a URL em que o site está disponível. Você pode clicar no link para abrir no navegador padrão.</p>
<img src="/assets/img/intermission-installing-a-local-web-server-9.webp" alt="Uma janela do Simple Web Server chamada “Edit Server” mostra as opções de um servidor web em execução. A URL destacada é “http://127.0.0.1:8080” e parece clicável. Há campos para o caminho da pasta, a porta (8080) e uma caixa para acesso na rede local. Embaixo ficam os botões de cancelar e salvar." style="max-height: 600px; margin-inline: auto">
<aside class="aside"><p class="aside-label">Observação</p><p>O Simple Web Server é multiplataforma e também funciona no macOS e no Linux. Dito isso, eu recomendo o WorldWideWeb para quem usa Mac, a menos que você precise de vários servidores rodando ao mesmo tempo.</p>
</aside>
<h2 id="python-e-php-multiplataforma" tabindex="-1"><a class="header-anchor" href="#python-e-php-multiplataforma">Python e PHP (multiplataforma)</a></h2>
<p>Esta opção é um pouco mais técnica. Você não precisa ser um hacker de elite. Mas vai precisar rodar um programa de linha de comando no terminal.</p>
<h3 id="python" tabindex="-1"><a class="header-anchor" href="#python">Python</a></h3>
<p>Se você não tem nenhum dos dois no computador, o Python é o mais fácil de configurar. Vá à <a href="https://www.python.org/downloads/">página de downloads do Python</a> e baixe o instalador do seu sistema (pegue a versão 3).</p>
<p>Abra uma janela do terminal e use <code>cd</code> para entrar na pasta do site. Depois, rode este comando para iniciar o servidor de desenvolvimento do Python.</p>
<pre class="language-bash"><code class="language-bash">python3 <span class="token parameter variable">-m</span> http.server</code></pre>
<p>Isso deixa o site disponível em <code>localhost</code>, na porta que ele indicar (em geral 8000). Então o endereço do site fica <code>http://localhost:8000</code>.</p>
<h3 id="php" tabindex="-1"><a class="header-anchor" href="#php">PHP</a></h3>
<p>Instalar PHP foge do recorte deste livro, mas ele existe para quase todos os sistemas. O PHP nasceu como tecnologia de site. E, como eu conto num capítulo bônus, <a href="/html-reutilizavel-com-php">o PHP é útil para reutilizar pedaços de HTML</a> (tipo o menu de navegação) em várias páginas.</p>
<p>Se o PHP já está no seu sistema, você pode rodar o servidor de desenvolvimento do PHP de um jeito parecido com o exemplo do Python.</p>
<pre class="language-bash"><code class="language-bash">php <span class="token parameter variable">-S</span> localhost:8000</code></pre>
<p>Isso deixa o site disponível em <code>http://localhost:8000</code>.</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>Agora que a gente tem um servidor web local, o site consegue conversar melhor com outros sites. Em seguida, vamos fazer uma página com várias coisas divertidas, inclusive vídeos do YouTube embutidos!</p>
<h1 id="adicionar-uma-pagina-divertida" tabindex="-1"><a class="header-anchor" href="#adicionar-uma-pagina-divertida">Adicionar uma página divertida</a></h1>
<p>Beleza, hora de se <em>divertir</em>! Bom, espero que tudo até aqui tenha sido divertido. Ainda assim, quero te mostrar mais algumas coisas que o HTML sabe fazer. Eu guardei esta página por último porque vamos usar algumas das tags HTML mais complexas.</p>
<h2 id="criar-o-arquivo" tabindex="-1"><a class="header-anchor" href="#criar-o-arquivo">Criar o arquivo</a></h2>
<p>Vamos criar o <code>fun.html</code> na raiz da pasta do site. Use o conteúdo da página inicial como ponto de partida. Depois mude o <code><title></code> e o <code><h1></code> para <em>Fun</em> ou algo parecido. Esvazie o conteúdo da tag <code><main></code>.</p>
<p>Agora vamos dividir esta página em várias seções, no mesmo espírito do currículo.</p>
<h2 id="piadas" tabindex="-1"><a class="header-anchor" href="#piadas">Piadas</a></h2>
<p>Primeiro, vamos adicionar uma seção de piadas.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Jokes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
...Jokes will go here
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>A ideia é mostrar a abertura da piada e esconder a punchline atrás de um clique. Você pode <a href="https://demo.htmlforpeople.com/fun">ver a versão ao vivo aqui</a>. Vamos usar os elementos <code><details></code> e <code><summary></code> para esse comportamento. Eles funcionam assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>This content will show up by default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Clicking the above content will cause this hidden content to become visible.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span></code></pre>
<p>Aqui vai um vídeo deste elemento em ação.</p>
<div class="block-embed block-embed-service-youtube"><iframe type="text/html" src="//www.youtube.com/embed/Z9qfMCm6AYM" frameborder="0" width="640" height="390" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<p>Eu vou adicionar três piadas, admito, bem cafonas.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Jokes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why wouldn’t the skeleton cross the road?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>It didn't have the guts.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why was the math book sad?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>It had too many problems.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why don't scientists trust atoms?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Because they make up everything!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>É um exemplo bobo. Mas os elementos <code><details></code>/<code><summary></code> ajudam sempre que você quer facilitar a leitura por cima, e deixar a pessoa aprofundar só onde quiser. Por exemplo, numa lista de perguntas frequentes (FAQ).</p>
<h2 id="usar-tabelas-para-jogos-de-mesa" tabindex="-1"><a class="header-anchor" href="#usar-tabelas-para-jogos-de-mesa">Usar tabelas para jogos de mesa</a></h2>
<p>Agora vamos aproveitar a tabela HTML. A tag <code><table></code> e as tags ligadas a ela nos dão jeitos poderosos de mostrar informação. Para aprender, vamos criar uma tabela pequena. Mas, se você precisar mostrar muitos dados <em>tabulares</em>, veja a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table">página da MDN sobre tabelas</a>.</p>
<p>Em RPGs de mesa como Dungeons and Dragons, o mestre muitas vezes precisa improvisar encontros para o grupo. Um jeito de fazer isso é usar uma tabela aleatória. É uma tabela que casa o resultado dos dados com itens, criaturas ou eventos. Vamos fazer uma tabela com oito encontros possíveis que o grupo pode achar. O mestre joga um dado de oito lados e usa o encontro correspondente.</p>
<p>É assim que a tabela final vai ficar.</p>
<img src="/assets/img/adding-a-fun-page-1.webp" alt="Uma tabela com o título “Roll (1d8) Encounter” e duas colunas. A coluna da esquerda lista os números de 1 a 8. A da direita lista os encontros: 1. Band of Goblins, 2. Wandering Merchant, 3. Group of Bandits, 4. Pack of Wolves, 5. Travelling Minstrels, 6. Lost Child, 7. Hidden Trap, 8. Old Hermit." style="max-height: 450px">
<p>Primeiro, vou criar um <code><section></code> novo, com um título e um texto de introdução sobre D&D. Depois, apresento em poucas palavras a tabela de encontro aleatório.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>D&D stuff<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Dungeons & Dragons (D&D) is a fun tabletop game where you create characters and go on epic adventures with friends. Guided by a Dungeon Master (DM), you'll roll dice to see what happens next. It's all about creativity, teamwork, and having a blast as you tackle quests, fight monsters, and find awesome treasures.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Random encounter table<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
...The table will go here
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>A gente usa a tag <code><table></code> para criar uma tabela. Uma tabela pode ter uma seção de cabeçalho e uma seção de corpo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre>
<p>A tabela precisa de duas colunas: uma para o resultado do dado e outra para o encontro correspondente. Vamos criar uma <em>linha de tabela</em> dentro do <code><thead></code>. Eu preencho o cabeçalho e depois explico.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Roll (1d8)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Encounter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre>
<p>A tag <code><tr></code> cria uma <em>linha de tabela</em> (<em>table row</em>). Dentro dessa linha, vamos adicionar duas células. Como elas são títulos de coluna, usamos a tag de <em>cabeçalho de tabela</em> (<em>table header</em>), ou <code><th></code>: uma para o dado e outra para o resultado. Até aqui, fica assim.</p>
<p><img src="/assets/img/adding-a-fun-page-2.webp" alt="Uma imagem descrevendo Dungeons & Dragons (D&D) como um jogo de mesa divertido, com criação de personagens e aventuras. Há uma seção “Random encounter table” com só os cabeçalhos de uma tabela começada."></p>
<p>Em seguida, a gente preenche a tabela com a tag de <em>célula de dados</em> (<em>table data cell</em>), ou <code><td></code>. Essas linhas vão dentro da seção do corpo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Roll (1d8)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Encounter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Band of Goblins<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Wandering Merchant<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Group of Bandits<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Pack of Wolves<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Travelling Minstrels<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Lost Child<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Hidden Trap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Old Hermit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span></code></pre>
<p>São muitas tags! Espero que a lógica esteja clara. Dentro do <code><tbody></code>, a gente cria oito <em>linhas de tabela</em>, cada uma com duas <em>células de dados</em>. E isso nos dá a tabela final.</p>
<img src="/assets/img/adding-a-fun-page-1.webp" alt="Uma tabela com o título “Roll (1d8) Encounter” e duas colunas. A coluna da esquerda lista os números de 1 a 8. A da direita lista os encontros: 1. Band of Goblins, 2. Wandering Merchant, 3. Group of Bandits, 4. Pack of Wolves, 5. Travelling Minstrels, 6. Lost Child, 7. Hidden Trap, 8. Old Hermit." style="max-height: 450px">
<p>Tabelas HTML também sabem fazer algumas coisas de planilha, tipo uma célula ocupar várias colunas. Não vamos entrar nisso aqui. Só lembre: tabelas têm poder, se você precisar.</p>
<h2 id="video-embutido" tabindex="-1"><a class="header-anchor" href="#video-embutido">Vídeo embutido</a></h2>
<p>Por último, mas não menos importante, vamos dar um tempero na página <em>Fun!</em> com alguns vídeos. Eu vou de clima synthwave. É claro que você pode pegar os vídeos do YouTube que quiser. Alguns canais não deixam o vídeo ser embutido em outros sites. Vale ter isso em mente.</p>
<p>Vou criar uma seção nova para os meus vídeos.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Synthwave mixes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
...videos will go here
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Primeiro, vou pegar este mix chamado Waves (<a href="https://www.youtube.com/watch?v=b6toYA0W4IA">https://www.youtube.com/watch?v=b6toYA0W4IA</a>). Se você abrir essa página, vai ver um botão de compartilhar embaixo do vídeo. Clicar nesse botão mostra várias formas de compartilhar.</p>
<p><img src="/assets/img/adding-a-fun-page-4.webp" alt="Captura de tela da caixa de compartilhar do YouTube, com opções Embed, WhatsApp, Facebook, X (antigo Twitter), Email e KakaoTalk. Também há um link único com um botão “Copy” ao lado, e uma caixa para começar o vídeo numa hora específica."></p>
<p>Escolha “Embed”, se estiver disponível. Quando fizer isso, você vai ver um código HTML e um botão <em>Copy</em>. Copie o código. Você pode colar o código depois da tag <code><h2></code>.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Synthwave mixes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>iframe</span><span class="token punctuation">></span></span>
width="560"
height="315"
src="https://www.youtube.com/embed/b6toYA0W4IA?si=-Iu68cVS5E08st5O"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>iframe</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>Esse embed usa a tag <code><iframe></code>. Eu não vou entrar em detalhes sobre esse elemento. Em resumo, ele serve para mostrar uma página da web dentro de outra página da web. Mas, quando eu recarrego a página, aparece este erro: “Video unavailable”. Por quê?</p>
<p><img src="/assets/img/adding-a-fun-page-5.webp" alt="Captura de uma página chamada “Synthwave mixes” com um player de vídeo no centro, mostrando a mensagem “Video unavailable. Watch on YouTube.” No topo, a barra de endereço indica o caminho de um arquivo local."></p>
<p>É porque o meu site ainda está aberto como arquivo. A gente precisa buscar dados de outro site (o YouTube). Mas os recursos de segurança do navegador impedem isso.</p>
<h3 id="rodar-o-nosso-servidor-web-local" tabindex="-1"><a class="header-anchor" href="#rodar-o-nosso-servidor-web-local">Rodar o nosso servidor web local</a></h3>
<p>Sem pânico! Foi por isso que a gente instalou um servidor web local no capítulo anterior — aquele programinha no computador que finge ser a internet, para testar o site. Se você ainda não fez isso, inicie o servidor pelo método que você escolheu no capítulo anterior.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Infelizmente, as coisas ficam um pouco estranhas aqui. Algumas dessas opções de servidor, como Live Preview e Simple Web Server, abrem o navegador por padrão no endereço IP <code>127.0.0.1</code>. Isso é, no fundo, a mesma coisa que <code>localhost</code>, o valor que outros servidores locais usam.</p>
<p>Por motivos que eu não entendo por completo, os vídeos embutidos não funcionam quando a gente acessa o site pelo endereço IP. Você precisa usar <code>localhost</code>. A sorte é que isso é fácil: é só trocar <code>127.0.0.1</code> por <code>localhost</code> na barra de endereço. Se você usa o Live Preview da Microsoft, precisa ver o site no navegador, e não na janela de prévia.</p>
</aside>
<p>Neste exemplo, eu vou usar o <a href="https://iconfactory.com/worldwideweb/">WorldWideWeb</a>. Quando eu aponto para a pasta do site e clico no play, o servidor sobe. Aí eu visito o endereço que ele mostra.</p>
<p><img src="/assets/img/intermission-installing-a-local-web-server-5.webp" alt="Captura da mesma janela. A interface mostra uma pasta de site chamada “my-site” e um servidor web com a URL “http://blakes-mac-studio.local:8080”. Há ícones de ações da pasta e botões “Reveal in Finder” e “Open Browser”. A URL e o botão Open Browser estão destacados."></p>
<p>Confira a barra de endereço do navegador. Garanta que você está na versão do servidor web, e não no arquivo aberto direto.</p>
<p><img src="/assets/img/adding-a-fun-page-6.webp" alt="Uma página chamada “Synthwave mixes” com um player do YouTube embutido. O vídeo se chama “Waves - A Chillwave Mix Vol. 2” e tem uma capa com visual futurista, com um planeta e um feixe de luz. Agora há um endereço HTTP, e não o caminho de um arquivo local."></p>
<p>Demais! Vou pegar mais dois vídeos.</p>
<ul>
<li><a href="https://youtu.be/rDfS8B2-Mt4">https://youtu.be/rDfS8B2-Mt4</a></li>
<li><a href="https://youtu.be/yb0DR_qRetA">https://youtu.be/yb0DR_qRetA</a></li>
</ul>
<p>Vou fazer com eles o mesmo que fiz com o primeiro. Abro a página do vídeo, clico em <em>Share</em>, depois em <em>Embed</em>, e copio o código. Cole o código de cada vídeo abaixo do primeiro.</p>
<p>Então eu embuti os vídeos. Mas agora notei outra coisa. Seria legal se esses vídeos ocupassem a largura da página. Também vamos ver como o site fica num celular.</p>
<p><img src="/assets/img/adding-a-fun-page-7.webp" alt="Com o Safari no modo de design responsivo e a janela estreita como num celular, o vídeo do YouTube ultrapassa o lado da página e aparece uma barra de rolagem horizontal."></p>
<p>Se eu vejo o site no <em>modo de design responsivo</em> do Safari e estreito a área visível, os vídeos embutidos escapam pelo lado direito da página. Não é o ideal.</p>
<p>Existem vários jeitos de consertar isso. A gente vai usar uma solução de terceiros.</p>
<h3 id="tags-html-personalizadas" tabindex="-1"><a class="header-anchor" href="#tags-html-personalizadas">Tags HTML personalizadas</a></h3>
<p>O HTML deixa a gente criar as próprias tags. Elas se chamam tags HTML personalizadas. O nome técnico disso é Web Components. Em geral, elas misturam HTML, CSS e JavaScript para definir a cara e o comportamento do componente. Criar os nossos próprios Web Components foge do recorte deste livro. E tudo bem. A gente não precisa criar um. Dá para usar tags HTML personalizadas que outras pessoas já fizeram.</p>
<p>Vamos usar o <a href="https://github.com/paulirish/lite-youtube-embed#readme">Lite YouTube Embed</a>. Leia sobre o que ele sabe fazer, se quiser. Para a gente, o objetivo é só instalar e ter um vídeo na largura inteira, que diminui direito no celular.</p>
<p>Antes de ver como instalar este componente, vamos ver como usá-lo. Ele oferece uma tag HTML personalizada nova, <code><lite-youtube></code>. Você dá a ela um <em>atributo</em> <code>videoid</code>, que é o ID do vídeo do YouTube. Dá para achar o ID na URL. Esta é a minha URL:</p>
<pre>https://www.youtube.com/watch?v=b6toYA0W4IA
|_________|
video id</pre>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span></code></pre>
<p>Bem mais limpo que o <code><iframe></code>!</p>
<p>Ok, vamos instalar. Precisamos de dois arquivos: um arquivo JavaScript e um arquivo CSS. Quem fez o componente disponibiliza esses arquivos. Juntos, eles têm todo o código que faz o componente parecer e funcionar direito. Vou te dar o link direto dos dois. Salve o arquivo CSS na pasta <code>css</code> do seu site. Depois, crie uma pasta <code>js</code> para o arquivo JavaScript.</p>
<ul>
<li>Arquivo JS: <a href="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.js">https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.js</a></li>
<li>Arquivo CSS: <a href="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.css">https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.css</a></li>
</ul>
<p>Abra cada um desses links e use <em>File > Save Page As…</em> (Ctrl+S no Windows, Command+S no macOS). Quando os arquivos estiverem salvos, adicione-os na seção <code><head></code> da página. Deve ficar assim.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Fun - Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/lite-yt-embed.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/lite-yt-embed.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>Primeiro, a gente adiciona o arquivo CSS (a ordem não importa). A gente o traz do mesmo jeito que trouxe o Simple.css, com a tag <code><link></code>. Também vamos trazer o código JavaScript. Para isso, usamos a tag <code><script></code>. Ela recebe um atributo <code>src</code>, que é o caminho do arquivo.</p>
<p>Com esses dois arquivos no lugar, a gente pode usar o componente novo. Voltando ao exemplo. Digamos que a gente tem esta URL do YouTube:</p>
<p><a href="https://www.youtube.com/watch?v=b6toYA0W4IA">https://www.youtube.com/watch?v=b6toYA0W4IA</a></p>
<p>A gente precisa tirar o ID desta URL. Numa URL do YouTube, o ID é a parte que vem depois de <code>v=</code>. Neste caso, é <code>b6toYA0W4IA</code>. Então a gente embute o vídeo com a sintaxe abaixo.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span></code></pre>
<p>Vou fazer os outros dois vídeos do mesmo jeito.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rDfS8B2-Mt4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yb0DR_qRetA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span></code></pre>
<p>Está ficando bom!</p>
<p><img src="/assets/img/adding-a-fun-page-8.webp" alt="Uma página no modo de design responsivo com três capas de mixes synthwave. A largura dos vídeos foi corrigida, mas eles estão colados uns nos outros, na vertical. A imagem de cima tem um eclipse estilizado com o título “WAVES II: A Chillwave Mix”. A do meio mostra uma cidade neon chamada “Neon Rooftops”. A de baixo tem gráficos neon abstratos."></p>
<p>Vou adicionar algumas <em>linhas horizontais</em> para separar esses vídeos.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rDfS8B2-Mt4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yb0DR_qRetA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span></code></pre>
<p>E vamos ver como eles ficam no tamanho de celular.</p>
<p><img src="/assets/img/adding-a-fun-page-9.webp" alt="A mesma imagem de antes, só que agora há linhas cinza finas com um pouco de espaço separando os três vídeos na vertical."></p>
<p>Ótimo!</p>
<h2 id="exemplo-completo-do-codigo" tabindex="-1"><a class="header-anchor" href="#exemplo-completo-do-codigo">Exemplo completo do código</a></h2>
<p>Para ver esta página funcionando, <a href="https://demo.htmlforpeople.com/fun">confira a demonstração ao vivo</a>. Aqui está o código completo da página <em>Fun!</em>.</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Fun - Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/lite-yt-embed.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/lite-yt-embed.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blog/index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>resume.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fun.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Jokes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why wouldn't the skeleton cross the road?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>It didn't have the guts.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why was the math book sad?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>It had too many problems.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Why don't scientists trust atoms?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Because they make up everything!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>D&D stuff<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Dungeons & Dragons (D&D) is a fun tabletop game where you create characters and go on epic adventures with friends. Guided by a Dungeon Master (DM), you'll roll dice to see what happens next. It's all about creativity, teamwork, and having a blast as you tackle quests, fight monsters, and find awesome treasures.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>Random encounter table<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
This is a table you can use to randomly decide what enemy or creature the players are going to encounter. Just roll a d8.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Roll (1d8)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Encounter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Band of Goblins<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Wandering Merchant<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Group of Bandits<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Pack of Wolves<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Travelling Minstrels<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Lost Child<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Hidden Trap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Old Hermit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Synthwave mixes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>b6toYA0W4IA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rDfS8B2-Mt4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>lite-youtube</span> <span class="token attr-name">videoid</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>yb0DR_qRetA<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>lite-youtube</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Made with ❤️ and ☕️ by Blake Watson.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<h2 id="publicar-o-site" tabindex="-1"><a class="header-anchor" href="#publicar-o-site">Publicar o site</a></h2>
<p>Você conseguiu! Com esta página pronta, você terminou o livro principal. Seguindo os mesmos passos dos capítulos anteriores, atualize o seu site no Neocities com esta página nova. Lembre de atualizar o menu de navegação em todas as outras páginas.</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<p>Em seguida, a gente vai comemorar o que conquistou. E eu te aponto mais materiais de estudo, inclusive os capítulos bônus deste site.</p>
<h1 id="conquista-desbloqueada-hipertextista" tabindex="-1"><a class="header-anchor" href="#conquista-desbloqueada-hipertextista">Conquista desbloqueada: Hipertextista</a></h1>
<p>Parabéns — você fez um site de verdade usando HTML! O que começou como uma frase ou duas no Bloco de Notas virou um site completo, com várias páginas. Você aprendeu um monte de coisa:</p>
<ul>
<li>Criar páginas HTML</li>
<li>Estruturar conteúdo com títulos e seções</li>
<li>Ligar uma página à outra</li>
<li>Formatar texto</li>
<li>Citar texto com citações em bloco</li>
<li>Mostrar dados com tabelas</li>
<li>Esconder conteúdo atrás de um resumo clicável</li>
<li>Criar conteúdo secundário com asides</li>
<li>Incorporar imagens</li>
<li>Incorporar vídeo</li>
<li>Usar web components de terceiros</li>
<li>Colocar um site na internet</li>
<li>…e ainda mais!</li>
</ul>
<p>Espero que você se sinta capaz de criar seus próprios sites. Mas, mesmo que você não vá fazer sites do zero, conhecer HTML ajuda. Muitos sistemas de gerenciamento de conteúdo deixam você colocar HTML personalizado numa página. Só saber usar a tag <code><a></code> para criar um link já é um superpoderzinho.</p>
<p>Então, para onde agora?</p>
<h2 id="capitulos-bonus" tabindex="-1"><a class="header-anchor" href="#capitulos-bonus">Capítulos bônus</a></h2>
<p>Terminamos o conteúdo principal que eu queria cobrir em <a href="/"><em>HTML e Pessoas</em></a>. Dito isso, tenho alguns assuntos que quero aprofundar como um apêndice do livro.</p>
<ul>
<li><strong><a href="/personalizar-o-simple-css">Personalizar o Simple.css</a></strong>. Mesmo sem aprender muito CSS, você pode mudar a aparência do seu site Simple sobrescrevendo algumas variáveis.</li>
<li><strong><a href="/basico-de-css">Básico de CSS</a></strong>. Esta missão extra ensina a fazer uma página bem desenhada do zero, usando CSS.</li>
<li><strong><a href="/html-reutilizavel-com-php">HTML reutilizável com PHP</a></strong>. Vamos ver como reutilizar pedaços de HTML — como um menu de navegação — usando includes do PHP. É uma introdução bem leve a sites dinâmicos.</li>
</ul>
<h2 id="recursos-deste-livro" tabindex="-1"><a class="header-anchor" href="#recursos-deste-livro">Recursos deste livro</a></h2>
<p>Eu fui espalhando uns links pelo caminho, apontando para demos e documentação. Para facilitar, aqui está uma lista dos principais.</p>
<ul>
<li><strong><a href="https://demo.htmlforpeople.com/">Demo da Homepage do Blake</a></strong>. Esta é a minha versão do site que este livro ensina você a fazer. Se você acompanhou e fez o seu próprio site, <a href="https://blakewatson.com/about/#contact-me">eu adoraria saber</a>.</li>
<li><strong><a href="https://github.com/blakewatson/htmlforpeopledemo">Código-fonte da Homepage do Blake</a></strong>. Este é o repositório de código do site de demonstração. Aqui você pode navegar por todo o código e baixá-lo, se quiser.</li>
<li><strong><a href="https://github.com/blakewatson/htmlforpeopledemo/tree/php">Homepage do Blake, versão PHP</a></strong>. Esta é outra versão do código-fonte, em que eu converti o site para PHP, como descrito no capítulo bônus <a href="/html-reutilizavel-com-php">HTML reutilizável com PHP</a>.</li>
<li><strong><a href="https://planets.htmlforpeople.com/">Demo Planets of the Solar System</a></strong>. Esta é a demo da página que vamos construir no capítulo bônus <a href="/basico-de-css">Básico de CSS</a>.</li>
<li><strong><a href="https://github.com/blakewatson/css-basics">Código-fonte de Planets of the Solar System</a></strong>. Este é o repositório de código dessa página.</li>
</ul>
<h2 id="recursos-e-documentacao-uteis" tabindex="-1"><a class="header-anchor" href="#recursos-e-documentacao-uteis">Recursos e documentação úteis</a></h2>
<ul>
<li><strong><a href="https://developer.mozilla.org">MDN</a></strong>. Se você precisa de detalhes sobre uma tag HTML específica, uma propriedade CSS ou outra informação técnica pontual, este é o melhor lugar. O MDN é mais ou menos o manual oficial de quem faz sites.</li>
<li><strong><a href="https://neocities.org/">Neocities</a></strong> e <a href="https://neocities.org/contact">perguntas frequentes do Neocities</a>. Eu escolhi este serviço de hospedagem no livro porque é grátis e tem um espírito parecido (criação de sites pensada em pessoas). As perguntas frequentes têm muita informação boa e uma visão do serviço, se você quiser saber mais.</li>
<li><strong><a href="https://neocities.org/tutorials">Tutoriais do Neocities</a>:</strong> Uma lista de tutoriais e recursos publicados pelo Neocities. Dê uma olhada no <a href="https://neocities.org/tutorial/html/1">curso de HTML</a> excelente deles.</li>
<li><strong><a href="https://simplecss.org/">Simple.css</a></strong>. Este é o framework CSS que usamos ao longo do livro. O site tem documentação de como usar o Simple.css e uma demo de vários elementos HTML.</li>
<li><strong><a href="https://practicaltypography.com/">Butterick’s Practical Typography</a></strong>. Um livro excelente sobre tipografia e design. Se você tem pouco tempo, veja <a href="https://practicaltypography.com/typography-in-ten-minutes.html">Typography in ten minutes</a>.</li>
<li><strong><a href="https://entitycode.com/">EntityCode</a></strong>. Aqui vai uma referência de <em>entidades HTML</em> que você pode usar para reproduzir caracteres especiais e símbolos.</li>
<li><strong><a href="https://coolors.co/contrast-checker">Verificador de contraste do Coolors</a></strong>. Uma ferramenta boa para garantir que as cores do texto e do fundo tenham contraste suficiente para a leitura.</li>
</ul>
<h2 id="hospedagens-para-sites-estaticos" tabindex="-1"><a class="header-anchor" href="#hospedagens-para-sites-estaticos">Hospedagens para sites estáticos</a></h2>
<p>Além do Neocities, existem outras boas opções para hospedar seus sites HTML.</p>
<ul>
<li><strong><a href="https://yay.boo/">Yay.boo</a>:</strong> Nome bobo, publicação de site realmente fácil. Você arrasta e solta uma pasta, escolhe um nome, e o site está no ar. O plano grátis coloca um link yay.boo no cantinho do site.</li>
<li><s><strong><a href="https://glitch.com/">Glitch</a>:</strong> Esta é uma boa opção se você quiser programar tudo direto no navegador. Monta, depois publica.</s> O <a href="https://perma.cc/C5KE-CMZV">Glitch encerrou a hospedagem de apps</a> em 2025.</li>
<li><strong><a href="https://codepen.io/">CodePen</a>:</strong> O CodePen é a alternativa ao Glitch mais amigável para iniciantes que eu conheço. A diferença é que um Pen é uma página só, e não vários arquivos que formam um site inteiro. Se você optar pelo CodePen Pro, porém, pode acessar Projects, que deixam você montar um site com várias páginas no navegador.</li>
<li><strong><a href="https://www.netlify.com/">Netlify</a>:</strong> Mais sofisticado, mas tem um recurso de <a href="https://perma.cc/W3PH-5KRS">arrastar e soltar uma pasta para publicar</a> e oferece mais funções voltadas para quem desenvolve.</li>
</ul>
<h2 id="alternativas-de-editor-de-codigo" tabindex="-1"><a class="header-anchor" href="#alternativas-de-editor-de-codigo">Alternativas de editor de código</a></h2>
<p>Eu usei o <a href="https://code.visualstudio.com/">Visual Studio Code</a> como editor de código ao longo deste livro. E por um bom motivo — é grátis e enormemente popular. Mas não é o único editor por aí.</p>
<p>Eu uso um Mac, então não conheço tanto os editores de outros sistemas. Mas sei de alguns que você deveria conhecer e avaliar. Alguns são grátis, alguns são pagos, e alguns são as duas coisas.</p>
<ul>
<li><strong><a href="https://www.sublimetext.com/">Sublime Text</a>:</strong> Multiplataforma, com teste grátis ilimitado (de vez em quando ele cobra para você pagar). O Sublime Text foi o padrão no desenvolvimento web até o VS Code assumir o trono. Ainda é muito bom. Super rápido e leve. O sistema de plugins/extensões é mais difícil de usar, mas você pode não precisar de nenhum se for fazer HTML/CSS básico, porque o suporte a isso já vem pronto.</li>
<li><strong><a href="https://www.jetbrains.com/webstorm/">WebStorm</a>:</strong> Um dos vários <em>IDEs</em> (ambientes de desenvolvimento integrado) pagos (grátis para uso não comercial) da JetBrains. É multiplataforma e tem um monte de recursos. É caro, mas tem 30 dias de teste grátis. As pessoas adoram. Eu não usei muito, então não tenho muito o que dizer, além de que a reputação é sólida.</li>
<li><strong><a href="https://zed.dev/">Zed</a>:</strong> Multiplataforma (Mac e Linux, com Windows “em breve”) e grátis. Este parece uma mistura de VS Code e Sublime Text, e tem bastante hype no momento em que eu escrevo isto.</li>
<li><strong><a href="https://nova.app/">Nova</a>:</strong> Só para Mac e pago (mas com teste grátis). É a sequência do Coda, um editor de web amado no Mac, do mesmo desenvolvedor (Panic). Os apps da Panic são sempre ótimos, então dê uma olhada no Nova se você usa Mac.</li>
<li><strong><a href="https://notepad-plus-plus.org/">NotePad++</a>:</strong> Editor grátis e de código aberto para Windows. Não tenho muito o que dizer, além de que ele existe há muito tempo.</li>
<li><strong><a href="https://www.barebones.com/products/bbedit/">BBEdit</a>:</strong> Um dos apps mais antigos do Mac que ainda é desenvolvido de fato. O BBEdit é pago, mas tem teste grátis e um modo grátis para sempre, que limita você a um conjunto específico de recursos.</li>
<li><strong><a href="https://glitch.com/">Glitch</a>:</strong> Sim, é o mesmo listado acima em hospedagens. O Glitch é uma boa opção se você quiser trabalhar “na nuvem”. Ele oferece uma interface na web para fazer sites, incluindo criar arquivos e editar código. Tudo fica no navegador, o que é uma boa opção se você não quiser baixar e instalar coisas no computador.</li>
<li>Muitos, muitos outros. São demais para listar. Mas, se nenhum destes te agradar, busque no seu mecanismo de busca favorito e se prepare para a enxurrada de resultados.</li>
</ul>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<h1 id="personalizar-o-simplecss" tabindex="-1"><a class="header-anchor" href="#personalizar-o-simplecss">Personalizar o Simple.css</a></h1>
<p>O Simple.css nos dá uma base para um site limpo e bonito. Mas ele também oferece um jeito de personalizar sem um monte de trabalho extra da nossa parte. Ele usa um recurso do CSS chamado <em>propriedades personalizadas</em> (muitas vezes chamadas de <em>variáveis</em>). Essas variáveis permitem mudar cores e fontes num lugar só, com pouquíssimo código.</p>
<h2 id="uma-espiada-no-simplecss" tabindex="-1"><a class="header-anchor" href="#uma-espiada-no-simplecss">Uma espiada no Simple.css</a></h2>
<p>Vamos abrir o arquivo <code>simple.css</code> que adicionamos ao site antes, para ver quais variáveis podemos acessar. Não se assuste com a quantidade de código no arquivo. A gente só precisa de um pedacinho. No topo do arquivo, você vai ver um código parecido com o seguinte.</p>
<pre class="language-css"><code class="language-css"><span class="token comment">/* Global variables. */</span>
<span class="token selector">:root,
::backdrop</span> <span class="token punctuation">{</span>
<span class="token comment">/* Set sans-serif & mono fonts */</span>
<span class="token property">--sans-font</span><span class="token punctuation">:</span> -apple-system<span class="token punctuation">,</span> BlinkMacSystemFont<span class="token punctuation">,</span> <span class="token string">'Avenir Next'</span><span class="token punctuation">,</span> Avenir<span class="token punctuation">,</span>
<span class="token string">'Nimbus Sans L'</span><span class="token punctuation">,</span> Roboto<span class="token punctuation">,</span> <span class="token string">'Noto Sans'</span><span class="token punctuation">,</span> <span class="token string">'Segoe UI'</span><span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span>
<span class="token string">'Helvetica Neue'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">--mono-font</span><span class="token punctuation">:</span> Consolas<span class="token punctuation">,</span> Menlo<span class="token punctuation">,</span> Monaco<span class="token punctuation">,</span> <span class="token string">'Andale Mono'</span><span class="token punctuation">,</span> <span class="token string">'Ubuntu Mono'</span><span class="token punctuation">,</span> monospace<span class="token punctuation">;</span>
<span class="token property">--standard-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token comment">/* Default (light) theme */</span>
<span class="token property">--bg</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">--accent-bg</span><span class="token punctuation">:</span> #f5f7ff<span class="token punctuation">;</span>
<span class="token property">--text</span><span class="token punctuation">:</span> #212121<span class="token punctuation">;</span>
<span class="token property">--text-light</span><span class="token punctuation">:</span> #585858<span class="token punctuation">;</span>
<span class="token property">--border</span><span class="token punctuation">:</span> #898ea4<span class="token punctuation">;</span>
<span class="token property">--accent</span><span class="token punctuation">:</span> #0d47a1<span class="token punctuation">;</span>
<span class="token property">--accent-hover</span><span class="token punctuation">:</span> #1266e2<span class="token punctuation">;</span>
<span class="token property">--accent-text</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--code</span><span class="token punctuation">:</span> #d81b60<span class="token punctuation">;</span>
<span class="token property">--preformatted</span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span>
<span class="token property">--marked</span><span class="token punctuation">:</span> #ffdd33<span class="token punctuation">;</span>
<span class="token property">--disabled</span><span class="token punctuation">:</span> #efefef<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Aqui já estamos entrando um pouco na sintaxe do CSS, mas talvez não seja tão assustador quanto parece. Vamos por partes.</p>
<p>No CSS, o navegador ignora o texto entre <code>/*</code> e <code>*/</code>. É um jeito de escrever notas para você — ou para outras pessoas que lerem o código-fonte — chamadas de <em>comentários</em>. Neste caso, os comentários ajudam a separar o código em grupos relacionados.</p>
<p>O trecho que diz <code>:root</code> significa que o bloco de código a seguir — a parte entre as chaves, <code>{}</code> — vale para a página inteira. Ignore o <code>::backdrop</code> por enquanto.</p>
<p>Dentro das chaves, encontramos uma lista de <em>propriedades</em>. Já vimos propriedades CSS num capítulo anterior. Por exemplo, usamos <code>columns: 2</code> na página do currículo para organizar uma lista com marcadores em duas colunas. Nesse caso, <code>columns</code> é uma <em>propriedade</em> e <code>2</code> é um <em>valor</em>.</p>
<p>Qualquer propriedade que começa com <code>--</code> é uma <em>propriedade personalizada</em>, ou <em>variável</em>. É um jeito de reutilizar um valor em vários lugares. Por exemplo, se tivéssemos uma variável <code>--accent: blue</code>, poderíamos usar a cor <code>--accent</code> em vários elementos ao mesmo tempo. E se um dia decidíssemos mudar o destaque para outra cor, digamos <code>red</code>, poderíamos atualizar num lugar só — escrevendo <code>--accent: red</code> — e todo elemento que usa a variável <code>--accent</code> seria atualizado sozinho.</p>
<p>Olhando de novo o código do Simple.css acima, vemos que temos dois grupos de variáveis. Há propriedades ligadas às fontes usadas, seguidas de uma lista de variáveis de cor que representam o que o Simple chama de “tema padrão (claro)”.</p>
<p>Vamos falar de fontes depois. Primeiro, as cores.</p>
<p>Neste caso, a maior parte das variáveis de cor aparece como códigos hexadecimais. Tudo o que você precisa saber sobre códigos hexadecimais é que eles são uma das várias formas de indicar uma cor no CSS. Abra quase qualquer mecanismo de busca e procure por “color picker”. Você vai encontrar um widget para escolher uma cor e pegar o código hexadecimal, junto com outros formatos.</p>
<p>Beleza, então como definimos as nossas próprias cores? A gente muda aqui dentro do <code>simple.css</code>? Você <em>poderia</em> fazer isso; funcionaria. Mas existe um jeito melhor.</p>
<h2 id="criar-uma-folha-de-estilo-personalizada" tabindex="-1"><a class="header-anchor" href="#criar-uma-folha-de-estilo-personalizada">Criar uma folha de estilo personalizada</a></h2>
<p>CSS significa <em>Cascading Style Sheets</em> (folhas de estilo em cascata). Essa parte da <em>cascata</em> é especialmente útil. De forma simples, isso significa que a ordem das regras CSS importa — regras que vêm depois sobrescrevem as que vieram antes. Para o nosso caso, isso significa que podemos criar o nosso próprio arquivo CSS. E, desde que o navegador o processe <em>depois</em> do <code>simple.css</code>, as regras que escrevermos ali vão prevalecer. Então não estamos <em>mudando</em> o <code>simple.css</code>. Estamos <em>sobrescrevendo</em> ele.</p>
<p>Crie um arquivo na pasta <code>assets/css</code> chamado <code>custom.css</code>.</p>
<p>Agora vamos ligá-lo ao site. Você vai precisar fazer isso em todas as páginas, mas vamos começar pela página inicial, o arquivo <code>index.html</code> do nível mais alto. Na seção <code><head></code>, já estamos referenciando o <code>simple.css</code> com uma tag <code><link></code>. Vamos fazer o mesmo para o nosso novo arquivo <code>custom.css</code>, logo embaixo. A ordem importa aqui. Queremos que a nossa folha de estilo venha depois da do Simple, para podermos sobrescrever as variáveis dele.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/custom.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<aside class="aside"><p class="aside-label">Observação</p><p>Isto vai funcionar na página inicial, mas, nas outras páginas, lembre-se de atualizar o caminho do arquivo de acordo (vai ser o mesmo caminho do arquivo <code>simple.css</code>).</p>
</aside>
<p>Agora vamos adicionar algumas sobrescritas. No arquivo <code>custom.css</code>, primeiro vamos montar um bloco <code>:root</code> parecido com o do <code>simple.css</code>. Depois pegamos uma das variáveis, digamos <code>--bg</code> (a cor de <em>fundo</em>), e definimos como <code>red</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--bg</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<aside class="aside"><p class="aside-label">Observação</p><p>Não há nada de mágico no nome da variável, <code>--bg</code>. Quem criou o Simple.css decidiu chamar assim, então é isso que vamos precisar usar para sobrescrever.</p>
</aside>
<p>Se você recarregar a página, deve ver um fundo vermelho, admitidamente horroroso. Vamos escolher uma cor melhor. Você pode buscar uma <a href="https://www.google.com/search?q=color+picker">ferramenta de escolha de cores</a> na web, usar uma das muitas <a href="https://perma.cc/JF5G-REYD">cores nomeadas do CSS</a> ou, se estiver usando o Visual Studio Code, usar o seletor de cores embutido passando o mouse sobre um valor de cor.</p>
<p><img src="/assets/img/customizing-simple-css-1.webp" alt="Numa janela do Visual Studio Code, um arquivo CSS chamado "custom.css" está aberto. O editor mostra uma ferramenta de seletor de cores ao lado do código que define a cor de fundo com a propriedade . O seletor exibe vários tons de vermelho, junto com os valores RGB, para facilitar a escolha e o ajuste."></p>
<p>Mas, antes de escolher cores, vamos falar do modo escuro.</p>
<h2 id="modo-escuro" tabindex="-1"><a class="header-anchor" href="#modo-escuro">Modo escuro</a></h2>
<p>O Simple já tem suporte automático aos modos claro e escuro, com base na configuração do sistema de quem visita. Você pode ter notado isso se ligou o modo escuro nas configurações do sistema. Se olharmos o arquivo <code>simple.css</code>, vemos a versão de modo escuro de todas as variáveis logo abaixo das outras que vimos antes.</p>
<pre class="language-css"><code class="language-css"><span class="token comment">/* Dark theme */</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">:root,
::backdrop</span> <span class="token punctuation">{</span>
<span class="token property">color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">;</span>
<span class="token property">--bg</span><span class="token punctuation">:</span> #212121<span class="token punctuation">;</span>
<span class="token property">--accent-bg</span><span class="token punctuation">:</span> #2b2b2b<span class="token punctuation">;</span>
<span class="token property">--text</span><span class="token punctuation">:</span> #dcdcdc<span class="token punctuation">;</span>
<span class="token property">--text-light</span><span class="token punctuation">:</span> #ababab<span class="token punctuation">;</span>
<span class="token property">--accent</span><span class="token punctuation">:</span> #ffb300<span class="token punctuation">;</span>
<span class="token property">--accent-hover</span><span class="token punctuation">:</span> #ffe099<span class="token punctuation">;</span>
<span class="token property">--accent-text</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--code</span><span class="token punctuation">:</span> #f06292<span class="token punctuation">;</span>
<span class="token property">--preformatted</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
<span class="token property">--disabled</span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* Add a bit of transparency so light media isn't so glaring in dark mode */</span>
<span class="token selector">img,
video</span> <span class="token punctuation">{</span>
<span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>Este bloco usa um recurso do CSS chamado <em>media queries</em>. Neste caso, a regra <code>@media</code> diz que os estilos de dentro do bloco devem valer se a pessoa tiver indicado preferência pelo modo escuro.</p>
<p>A primeira regra define o esquema de cores padrão como escuro e depois <em>redefine</em> as variáveis de cor que valem para o documento raiz (ou seja, a página inteira). A segunda regra deixa imagens e vídeo um pouco transparentes, para não ficarem “tão ofuscantes no modo escuro”.</p>
<p>Não sabemos se quem visita o nosso site prefere o modo claro ou o escuro. Por isso, devemos definir cores adequadas para os dois modos. Se quiser, você pode copiar esses dois blocos de código (o bloco “Global variables” e o bloco “Dark theme”) do <code>simple.css</code> para o seu <code>custom.css</code> e então mudar os valores de cor como preferir. Ou pode especificar só as que quiser mudar. De qualquer forma, garanta que as cores certas estejam na seção certa.</p>
<h2 id="um-exemplo-de-personalizacao" tabindex="-1"><a class="header-anchor" href="#um-exemplo-de-personalizacao">Um exemplo de personalização</a></h2>
<p>Para o tema claro padrão, eu decidi ficar só com cores nomeadas do CSS, como um exercício divertido. Você pode pensar nas cores nomeadas como uma caixa de giz de cera — tem muitas, mas elas não representam todas as cores possíveis. Ainda assim, são um jeito fácil de se referir a cores de forma humana.</p>
<p>Por outro lado, as cores do modo escuro pediram um toque mais fino. Eu usei o seletor de cores embutido do Visual Studio Code para escolher algumas cores específicas. Elas aparecem no formato <code>rgb</code> aqui porque foi o que o editor fez por padrão quando eu selecionei as cores.</p>
<p>Este é o código que eu coloquei no meu <code>custom.css</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--bg</span><span class="token punctuation">:</span> mintcream<span class="token punctuation">;</span>
<span class="token property">--border</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span>
<span class="token property">--accent-bg</span><span class="token punctuation">:</span> honeydew<span class="token punctuation">;</span>
<span class="token property">--text</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span>
<span class="token property">--accent</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span>
<span class="token property">--accent-hover</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span>
<span class="token property">--marked</span><span class="token punctuation">:</span> mediumspringgreen<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* Dark theme */</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector">:root,
::backdrop</span> <span class="token punctuation">{</span>
<span class="token property">color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">;</span>
<span class="token property">--bg</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>17<span class="token punctuation">,</span> 18<span class="token punctuation">,</span> 18<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--border</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>80<span class="token punctuation">,</span> 90<span class="token punctuation">,</span> 90<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--accent-bg</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>35<span class="token punctuation">,</span> 35<span class="token punctuation">,</span> 36<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">--text</span><span class="token punctuation">:</span> ghostwhite<span class="token punctuation">;</span>
<span class="token property">--accent</span><span class="token punctuation">:</span> lightskyblue<span class="token punctuation">;</span>
<span class="token property">--accent-hover</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span>
<span class="token property">--marked</span><span class="token punctuation">:</span> gold<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>Aqui vai uma prévia lado a lado da aparência da página de índice do blog nos modos claro e escuro.</p>
<p><img src="/assets/img/customizing-simple-css-2.webp" alt="Uma imagem em tela dividida mostra duas versões de uma página de blog: à esquerda, a página usa um tema claro personalizado, com rosas vibrantes e verdes pálidos. À direita, usa um tema escuro personalizado, com azul como cor de destaque para links e botões. As duas versões apresentam o mesmo conteúdo da listagem do blog. O uso de cores personalizadas aqui marca uma saída dos temas claro e escuro padrão usados antes."></p>
<h2 id="escolher-cores-acessiveis" tabindex="-1"><a class="header-anchor" href="#escolher-cores-acessiveis">Escolher cores acessíveis</a></h2>
<p>Algumas combinações de cor podem deixar o texto difícil de ler por causa do pouco contraste. Você quer garantir bastante contraste entre a cor do texto e a cor do fundo.</p>
<p>Você pode confiar nos olhos até certo ponto, mas cada pessoa é diferente. Felizmente, existem padrões sobre quanto contraste o texto deve ter. Você pode usar um <a href="https://perma.cc/KGB2-G7Y4">verificador de contraste como este</a>. Dê duas cores a ele, e ele diz se o contraste entre elas é suficiente.</p>
<h2 id="mudar-a-fonte" tabindex="-1"><a class="header-anchor" href="#mudar-a-fonte">Mudar a fonte</a></h2>
<p>Eu passei rápido por isso antes, mas você pode ter notado algumas variáveis ligadas a fontes acima das variáveis de cor definidas no <code>simple.css</code>. Uma delas, <code>--sans-font</code>, é responsável pela maior parte do texto da página (a outra, <code>--mono-font</code>, é usada para coisas como mostrar código, como eu estou fazendo neste parágrafo).</p>
<p>Se você não conhece, fontes <em>sans-serif</em> são aquelas que não têm <em>serifa</em>, aqueles pezinhos que você encontra em outras fontes, como Times New Roman. O Simple usa a variável <code>--sans-font</code> para a maior parte do texto da página por padrão, mas podemos sobrescrever com o que quisermos.</p>
<p>Primeiro, vamos falar de fontes na web.</p>
<h2 id="fontes-na-web" tabindex="-1"><a class="header-anchor" href="#fontes-na-web">Fontes na web</a></h2>
<p>Quem visita o seu site só consegue ver fontes instaladas no sistema dessa pessoa. Isso significa que, se você, quem escreve a página, especificar no CSS alguma fonte aleatória baixada de um site, <em>você</em> vai ver essa fonte na página. Mas quem visita vai ver uma <em>alternativa</em> (<em>fallback</em>), a menos que essa pessoa também tenha a fonte instalada.</p>
<p>É por isso que, em geral, várias fontes são especificadas no CSS. Se a primeira fonte não estiver disponível no computador ou no aparelho de quem visita, o navegador tenta a próxima, e assim por diante.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token comment">/* the first font needs quotes because the name includes spaces */</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Some Rando Font"</span><span class="token punctuation">,</span> Georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>A regra de estilo acima define a fonte do <code><body></code>. O navegador primeiro tenta usar “Some Rando Font”. Se ela não estiver disponível no aparelho de quem visita, ele tenta usar Georgia. Se <em>essa</em> também não estiver, dissemos ao navegador para usar a fonte <code>serif</code> padrão que ele tiver.</p>
<p>Aqui vai uma boa referência para encontrar <a href="https://practicaltypography.com/system-fonts.html">fontes comuns nos aparelhos das pessoas</a> e ver as suas opções. Você sempre vai querer oferecer algumas alternativas decentes também.</p>
<p>Às vezes, você tem uma fonte que <em>realmente</em> quer que as pessoas vejam, mesmo sabendo que elas não vão tê-la instalada. Felizmente, existe um jeito de lidar com isso. Chamam-se <em>fontes da web</em> (<em>web fonts</em>). Elas são complexas demais para cobrir aqui, mas eu falo delas de forma breve no próximo capítulo, <a href="/basico-de-css">Básico de CSS</a>. Em resumo, é um método de fornecer a fonte automaticamente a quem visita.</p>
<h2 id="sobrescrever-a-variavel-da-fonte" tabindex="-1"><a class="header-anchor" href="#sobrescrever-a-variavel-da-fonte">Sobrescrever a variável da fonte</a></h2>
<p>Vamos usar uma fonte serifada. Mesmo o Simple chamando a variável de <code>--sans-font</code>, não há nada de mágico no nome. Podemos definir o que quisermos. Vamos usar Georgia, que é sempre um prazer de ler.</p>
<p>Podemos sobrescrever a variável <code>--sans-font</code> do Simple dentro do bloco <code>:root</code>, para que valha para a página inteira.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--sans-font</span><span class="token punctuation">:</span> Georgia<span class="token punctuation">,</span> <span class="token string">"Times New Roman"</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
<span class="token property">--bg</span><span class="token punctuation">:</span> mintcream<span class="token punctuation">;</span>
<span class="token property">--border</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span>
<span class="token property">--accent-bg</span><span class="token punctuation">:</span> honeydew<span class="token punctuation">;</span>
<span class="token property">--text</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span>
<span class="token property">--accent</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span>
<span class="token property">--accent-hover</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span>
<span class="token property">--marked</span><span class="token punctuation">:</span> mediumspringgreen<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Nós especificamos a fonte Georgia, mas também oferecemos duas alternativas. Colocamos Times New Roman como segunda opção. Observe que esta precisa ir entre aspas porque o nome tem espaços.</p>
<p>Usamos uma palavra-chave do CSS, <code>serif</code>, para a terceira opção. Isso diz ao navegador para usar a fonte serifada padrão dele, seja qual for. Muitas vezes, vai ser Times New Roman. Outras palavras-chave que você tem aqui são <code>sans-serif</code>, <code>monospace</code> e <code>cursive</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#syntax">entre outras</a></p>
<p>Aqui vai um dos posts do blog composto em Georgia.</p>
<p><img src="/assets/img/customizing-simple-css-3.webp" alt="Captura de tela de um post de blog intitulado "Why donuts are the best thing ever", datado de 20 de abril de 2024. Ele usa o tema claro personalizado de antes. O texto está numa fonte serifada, e não na sans-serif padrão."></p>
<h2 id="deixe-com-a-sua-cara" tabindex="-1"><a class="header-anchor" href="#deixe-com-a-sua-cara">Deixe com a sua cara</a></h2>
<p>Eu escolhi o Simple.css para este livro porque ele deixa o HTML bonito sem trabalho extra. Mas também escolhi porque ele pode ser personalizado com algumas variáveis CSS. Mesmo sendo só cores e fontes, as possibilidades de deixar o seu site único são infinitas.</p>
<p>Eu te animo a explorar o mundo da cor e experimentar combinações diferentes. No próximo capítulo bônus, eu cubro ainda mais CSS, para você ir além do Simple e escrever os seus próprios estilos.</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<h1 id="basico-de-css" tabindex="-1"><a class="header-anchor" href="#basico-de-css">Básico de CSS</a></h1>
<p>Neste capítulo, não vamos usar o nosso site com Simple.css. Vamos escrever os nossos próprios estilos, e para isso eu quero usar uma página mais simples. Você pode aplicar o que aprender aqui ao seu site Simple. Mas, neste capítulo, eu quero mostrar como começar do zero para fazer uma página bonita.</p>
<p>Vamos olhar especificamente o estilo de elementos tipográficos, para fazer uma página agradável de ler. Mas o CSS pode fazer muito, muito mais. Todos os designs sofisticados que você está acostumado a ver em páginas pela web são feitos com CSS. É uma ferramenta potente. Se este capítulo te der gosto pelo assunto, eu te animo a explorar o CSS além do que cobrimos aqui.</p>
<h2 id="apresentando-os-planetas-do-sistema-solar" tabindex="-1"><a class="header-anchor" href="#apresentando-os-planetas-do-sistema-solar">Apresentando os planetas do sistema solar</a></h2>
<p>Eu montei esta página HTML bem direta, que usa alguns elementos tipográficos e é um bom ponto de partida para aplicar estilos. Você pode usar o conteúdo que quiser, se tiver algo em mente. Mas também pode usar a mesma página HTML que eu vou usar.</p>
<p>Você pode ver o código-fonte no navegador, com o <a href="https://perma.cc/3WP3-R9XL">comando de ver o código-fonte</a>, ou conferindo o <a href="https://github.com/blakewatson/css-basics">código no GitHub</a>. E você pode <a href="https://planets.htmlforpeople.com/">ver o resultado final aqui</a>, se quiser uma espiada do que vai ficar.</p>
<p>Esta página apresenta os planetas do sistema solar e dá um pouco de informação sobre cada um. É super simples e básica de propósito. É um texto de preenchimento que eu não pretendo que ninguém leia a sério (mas as informações estão corretas, até onde eu sei).</p>
<h2 id="ponto-de-partida" tabindex="-1"><a class="header-anchor" href="#ponto-de-partida">Ponto de partida</a></h2>
<p>Eu fiz um <code>index.html</code> e coloquei o código a seguir. Ele assume que você tem um <code>styles.css</code> no mesmo diretório. Também assume que você tem uma imagem, <code>PIA06193~large.jpg</code>, no mesmo diretório. Você pode pegar esta imagem no <a href="https://perma.cc/76GH-PWHQ">site da NASA</a>.</p>
<details>
<summary>Abra para ver o código HTML completo</summary>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Planets of the Solar System<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Planets of the Solar System<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>intro<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>caps<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Our solar system<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> is a vast and fascinating place, consisting of the Sun and the various celestial bodies that orbit it, including eight major planets. Each planet offers unique characteristics and features. In this article, we will explore the distinctive attributes of each planet, providing an overview of what makes them unique (and learn a little <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cascading style sheets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> while doing it).<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Mercury<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Mercury is the closest planet to the Sun and the smallest planet in our
solar system. It has a very thin atmosphere and its surface is covered
with craters.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Venus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Venus is the second planet from the Sun and is known for its thick,
toxic atmosphere and extreme surface temperatures. It's often called
Earth's "sister planet" because of their similar size and composition.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Earth<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Earth is the third planet from the Sun and the only known planet to
support life. It has a diverse climate and surface, with large bodies of
water, mountains, and forests.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
The Earth is a very small stage in a vast cosmic arena. Think of the
rivers of blood spilled by all those generals and emperors so that in
glory and triumph they could become the momentary masters of a
fraction of a dot.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>— Carl Sagan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Mars<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Mars, the fourth planet from the Sun, is often called the "Red Planet"
due to its reddish appearance. It has the largest volcano and canyon in
the solar system.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Jupiter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Jupiter is the fifth planet from the Sun and the largest in the solar
system. It has a Great Red Spot, which is a giant storm, and dozens of
moons.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Saturn<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Saturn, the sixth planet from the Sun, is famous for its extensive ring
system. It's the second-largest planet in the solar system.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>PIA06193~large.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This grand mosaic consists of 126 images acquired in a tile-like fashion, covering one end of Saturn's rings to the other and the entire planet in between.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>
Source: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.nasa.gov/details/PIA11141<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>https://images.nasa.gov/details/PIA11141<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Uranus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Uranus is the seventh planet from the Sun and has a unique blue-green
color due to methane in its atmosphere. It rotates on its side, making
it unique among the planets.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Neptune<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Neptune is the eighth and farthest known planet from the Sun in our
solar system. It's known for its deep blue color and strong winds, some
of the fastest in the solar system.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Additional Resources<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
For more information about the planets, visit the
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://solarsystem.nasa.gov/planets/overview/<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>NASA Solar System Exploration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span>
<span class="token punctuation">></span></span>
website.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Other Major Bodies<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pluto<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ceres<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Haumea<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Makemake<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Eris<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ganymede<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Titan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Europa<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Sample Code<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>function getPlanetInfo(planet) {
const planets = {
Mercury: 'The smallest planet and closest to the Sun.',
Venus: 'Known for its thick, toxic atmosphere.',
Earth: 'The only planet known to support life.',
Mars: 'The Red Planet with the largest volcano.',
Jupiter: 'The largest planet with a Great Red Spot.',
Saturn: 'Famous for its ring system.',
Uranus: 'Unique for its sideways rotation.',
Neptune: 'Known for its deep blue color and strong winds.'
};
return planets[planet] || 'Planet not found';
}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
A demo website for learning CSS. Part of <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://htmlforpeople.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML for People<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> by <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://blakewatson.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blake Watson<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. Check out the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://github.com/blakewatson/css-basics<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>source code on GitHub<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</details>
<p>Como o arquivo <code>styles.css</code> está vazio, só temos os estilos padrão do navegador. É assim que fica:</p>
<p><img src="/assets/img/css-basics-01.webp" alt="Captura de tela do navegador renderizando a página "Planets of the Solar System". Cada planeta tem uma descrição breve, destacando características únicas. A página usa só os estilos padrão do navegador e está completamente sem estilo."></p>
<p>O bom e velho Times New Roman e linhas de texto que ocupam a largura inteira da janela do navegador. Não fica grande coisa, mas tem algo gostoso e simples nisso. E, o mais importante, não está quebrado. Muitos sites vão longe demais, com designs exagerados, megabytes de imagens e JavaScript, e comportamentos hostis a quem visita (sabe, tipo: “eu vi que você só leu duas frases deste artigo, mas eu sei que você está morrendo de vontade de assinar a minha newsletter, então deixa eu te mostrar este pop-up gigante”).</p>
<p>Então vamos nos imaginar um tipo de médicos da web. Primeiro, não vamos fazer mal. Vamos melhorar a leitura da página e deixá-la bonita (bem, o que <em>eu</em> acho bonito, de qualquer forma — sinta-se à vontade para divergir e adicionar os seus próprios estilos conforme formos). Mas vamos evitar qualquer coisa tão drástica que deixe a página mais difícil de ler do que está agora.</p>
<h2 id="a-tag-style" tabindex="-1"><a class="header-anchor" href="#a-tag-style">A tag style</a></h2>
<p>Podemos escrever CSS direto no arquivo <code>index.html</code> usando uma tag HTML especial, <code><style></code>. Podemos colocar a tag <code><style></code> dentro da seção <code><head></code> do arquivo. Assim:</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My website<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
CSS code goes here
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Isso é perfeitamente válido. Mas, se você tiver mais de uma página no site, teria de copiar e colar a tag <code><style></code> em cada página para ter os mesmos estilos em todas. Em vez disso, é comum colocar todo o CSS num arquivo separado e então <em>ligar</em> esse arquivo a cada página com uma tag <code><link></code> na seção <code><head></code> do site.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<h2 id="primeiros-passos-para-melhorar-a-pagina" tabindex="-1"><a class="header-anchor" href="#primeiros-passos-para-melhorar-a-pagina">Primeiros passos para melhorar a página</a></h2>
<p>Se você ainda não fez, crie um arquivo <code>style.css</code>. É aqui que vamos escrever todo o nosso CSS personalizado. Se você não estiver usando o meu HTML de partida, vai precisar adicionar a tag <code><link></code> na seção <code><head></code> da página para ligar os estilos à página, como descrito acima.</p>
<p>Dá para conquistar ganhos grandes logo de cara, com só algumas linhas de CSS. Por exemplo, um problema é que a página fica larga demais numa janela de navegador no desktop. Linhas longas de texto são difíceis de ler. Vamos corrigir isso dando à página uma largura máxima. Segundo o <a href="https://practicaltypography.com/line-length.html">Butterick’s Practical Typography</a>, devemos caber entre dois e três alfabetos numa linha. Eu vou deixar com 65 <em>caracteres</em> de largura.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">main</span> <span class="token punctuation">{</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Esta <em>regra</em> CSS mira o elemento <code><main></code> da nossa página e instrui ele a nunca passar da largura que declaramos.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Beleza, <a href="https://perma.cc/66QM-Q2AF">não é estritamente 65 caracteres de largura</a>. A unidade <code>ch</code> no CSS se baseia na largura do caractere <code>0</code> (zero) na fonte dada. Então, na verdade, estamos dizendo: “não deixe a largura da página passar de 65 caracteres <code>0</code>”.</p>
</aside>
<p>Ignorando a imagem gigante de Saturno — com a qual vamos lidar daqui a pouco — já ficou bem melhor. Mas o gosto moderno prefere uma página centralizada, então vamos fazer isso enquanto estamos nisso.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">main</span> <span class="token punctuation">{</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Em idiomas da esquerda para a direita, como o português, <code>margin-inline</code> é a margem horizontal, ou esquerda e direita. Ao definir como <code>auto</code>, estamos dizendo: “não me importa quão larga seja a margem esquerda e a direita, só deixe iguais”. O navegador sabe quão larga queremos a página, então calcula a margem necessária para deixar igual dos dois lados, centralizando a página.</p>
<p>Também temos um elemento <code><footer></code> que vive fora do elemento <code><main></code>, então vamos estilizá-lo à parte, com a mesma largura e margem.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">footer</span> <span class="token punctuation">{</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>E, para fechar esta linha de raciocínio, vamos impedir que a imagem de Saturno estoure para fora da página.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">img</span> <span class="token punctuation">{</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>O <code>max-width</code> pode ser declarado como uma porcentagem do elemento que contém. Definir como 100% significa: “não deixe elementos de imagem ficarem mais largos do que os seus contêineres”.</p>
<p>E agora a nossa página está bem mais agradável.</p>
<p><img src="/assets/img/css-basics-02.webp" alt="A mesma imagem de antes, mas agora a página está centralizada e limitada a uma largura que torna a leitura mais fácil."></p>
<h2 id="anatomia-de-uma-regra-css" tabindex="-1"><a class="header-anchor" href="#anatomia-de-uma-regra-css">Anatomia de uma regra CSS</a></h2>
<p>Olhe uma das nossas regras até agora. Esta regra limita a largura das imagens à largura dos seus contêineres.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">img</span> <span class="token punctuation">{</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>O que acontece aqui é uma coisa em duas partes. Primeiro, especificamos quais elementos da página queremos afetar. Essa é a parte antes das chaves (<code>{}</code>). Chama-se <em>seletor</em>, porque <em>seleciona</em> elementos da página para mudar.</p>
<p>A parte dentro das chaves é onde colocamos as propriedades que queremos mudar. Cada declaração consiste numa <em>propriedade</em> e num <em>valor</em>. Neste caso, há uma declaração. A propriedade é <code>max-width</code>, e o valor é <code>100%</code>.</p>
<h2 id="tamanho-do-texto-altura-da-linha-e-espaco-entre-elementos" tabindex="-1"><a class="header-anchor" href="#tamanho-do-texto-altura-da-linha-e-espaco-entre-elementos">Tamanho do texto, altura da linha e espaço entre elementos</a></h2>
<p>O tamanho padrão da fonte é um pouco pequeno. Vou mirar o elemento <code>html</code> (ou seja, o documento inteiro) e definir <code>font-size</code> e <code>line-height</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Uma das unidades que podemos usar para dimensionar coisas é a unidade de pixel, <code>px</code>. Estou descobrindo agora que <code>1px</code> equivale a 1/96 de uma polegada (embora isso varie com a densidade de pixels da tela). Hein. A gente nunca para de aprender.</p>
<p>Há todo tipo de jeito de definir o tamanho do texto. Vamos ver mais alguns daqui a pouco.</p>
<p>Vou definir o <code>line-height</code> usando um valor sem unidade de <code>1.45</code>. É um número que fica bonito. Consulte o <a href="https://practicaltypography.com/line-spacing.html">Butterick’s Practical Typography</a> e o seu próprio olho para achar uma boa altura de linha para a sua fonte específica. Estou usando um número sem unidade em vez de algo como <code>px</code> por causa de <a href="https://perma.cc/7YVZ-53XL">como os elementos filhos herdam o valor</a>, mas você não precisa se preocupar demais com isso agora.</p>
<p>Seguindo, eu gostaria de garantir que os elementos tenham espaçamento igual entre eles. Vou mirar tudo o que está dentro do elemento <code><main></code> usando um seletor universal, o asterisco (<code>*</code>).</p>
<pre class="language-css"><code class="language-css"><span class="token selector">main *</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token comment">/* or we could use the shortcut syntax like this */</span>
<span class="token property">margin-block</span><span class="token punctuation">:</span> 0 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Um seletor pode ser uma cadeia de coisas. Por exemplo, <code>main p</code> seleciona todo elemento <code><p></code> <em>dentro</em> do elemento <code><main></code>. Mas eu quero mirar <em>tudo</em> no elemento <code><main></code>, então uso o asterisco.</p>
<p>Estou definindo a margem acima e abaixo de cada elemento. De forma parecida com <code>margin-inline</code>, que controla o espaço horizontal ao redor dos elementos, <code>margin-block</code> controla o espaço vertical ao redor dos elementos (em idiomas da esquerda para a direita). Estou definindo a margem acima dos elementos como <code>0</code> e a margem abaixo deles como <code>1rem</code>. O <code>rem</code> é uma unidade igual ao tamanho da fonte do <strong>r</strong>oot el<strong>em</strong>ent (o elemento <code><html></code>). Como eu defini o tamanho da fonte raiz como <code>20px</code>, é isso que o valor de <code>1rem</code> se torna.</p>
<p>O legal da unidade <code>rem</code> é que, ao nos deixar basear valores no tamanho da fonte do documento, ela deixa os designs com uma sensação mais coesa.</p>
<p>O nosso texto está bonito.</p>
<p><img src="/assets/img/css-basics-03.webp" alt="A mesma imagem de antes, mas agora o texto está maior, com uma altura de linha mais generosa."></p>
<p>Nada contra o Times New Roman, mas ele tem uma cara muito… <em>padrão</em>. Dá para fazer melhor.</p>
<h2 id="instalar-webfonts" tabindex="-1"><a class="header-anchor" href="#instalar-webfonts">Instalar webfonts</a></h2>
<p>Você só pode usar uma fonte se quem visita tiver ela disponível no aparelho. Embora existam algumas <a href="https://practicaltypography.com/system-fonts.html">fontes de sistema comuns</a> e <a href="https://perma.cc/9BMG-EMTU">fontes padrão comuns</a>, temos outra opção para personalizar a fonte. <em>Fontes da web</em> (<em>web fonts</em>) são aquelas disponibilizadas ao serem baixadas junto com o resto do seu site. Além do documento, dos arquivos CSS, dos arquivos JavaScript, das imagens e por aí vai, fontes personalizadas também podem ser baixadas.</p>
<p>Fontes da web precisam estar num formato específico, e ser <em>instaladas</em> de um certo jeito, por falta de termo melhor. Em geral, as pessoas usam um serviço como <a href="http://fonts.google.com/">Google Fonts</a> (grátis) ou <a href="https://fonts.adobe.com">Adobe Fonts</a> (pago). Há <a href="https://typography.com/webfonts">várias</a> <a href="https://typenetwork.com/">opções</a>, inclusive hospedar as fontes no seu próprio servidor, ao lado dos outros arquivos do site. Só garanta que a licença da fonte cubra isso.</p>
<p>Para simplificar, vamos usar algumas fontes do Google Fonts. Vá até <a href="http://fonts.google.com">fonts.google.com</a>. Busque “Oswald” e selecione nos resultados. Depois clique em <em>Get Font</em>.</p>
<p><img src="/assets/img/css-basics-04.webp" alt="Captura de tela do site Google Fonts mostrando a fonte "Oswald". O botão "Get font" está destacado com uma seta vermelha. O texto de amostra abaixo diz: "Whereas disregard and contempt for human rights have resulted." O menu do site aparece à esquerda."></p>
<p>Depois de selecioná-la, não baixe nada ainda. Busque “source sans”. Source Sans 3 é a versão disponível no momento em que eu escrevo. Selecione e clique em <em>Get Font</em>.</p>
<p>Quando as duas fontes estiverem selecionadas, clique em <em>Get embed code</em>. Estamos procurando o bloco rotulado <em>Embed code in the <code><head></code> of your html</em>.</p>
<p><img src="/assets/img/css-basics-05.webp" alt="Captura de tela da interface do Google Fonts mostrando os detalhes da fonte "Source Sans 3". Há um botão "Copy code" dentro de uma caixa vermelha destacada, que fornece o código de incorporação para HTML. A interface inclui opções de estilo da fonte e instruções de uso."></p>
<p>Copie e cole o código de incorporação na seção <code><head></code> do seu site.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Planets of the Solar System<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preconnect<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preconnect<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.gstatic.com<span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>Adicione uma declaração <code>font-family</code> ao bloco <code>html</code> para conferir se está funcionando.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Source Sans 3'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Isso vai definir a fonte para o documento inteiro. O navegador primeiro tenta Source Sans 3. Se, por algum motivo, essa fonte não estiver disponível (se, por exemplo, o Google Fonts estiver fora do ar), então <code>sans-serif</code> instrui o navegador a usar qualquer fonte sans-serif disponível. Você pode colocar outras fontes alternativas na <em>pilha de fontes</em>. É só separar com vírgulas, como você vê acima.</p>
<p>Recarregue a página, e você deve ver a fonte nova! Mas vamos fazer uma configuração melhor e integrar as duas fontes direito.</p>
<h2 id="configurar-cores-e-variaveis" tabindex="-1"><a class="header-anchor" href="#configurar-cores-e-variaveis">Configurar cores e variáveis</a></h2>
<p>Se você leu o capítulo <a href="/personalizar-o-simple-css">Personalizar o Simple.css</a>, vai lembrar que ele usava variáveis CSS para controlar cor e fontes. Vamos fazer isso aqui também. Isso vai facilitar personalizar depois (o que você pode querer fazer se não gostar das minhas escolhas).</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--text-color</span><span class="token punctuation">:</span> #303036<span class="token punctuation">;</span>
<span class="token property">--muted-text-color</span><span class="token punctuation">:</span> #5e5e67<span class="token punctuation">;</span>
<span class="token property">--heading-color</span><span class="token punctuation">:</span> #cd2807<span class="token punctuation">;</span>
<span class="token property">--link-color</span><span class="token punctuation">:</span> #028090<span class="token punctuation">;</span>
<span class="token property">--background-color</span><span class="token punctuation">:</span> #fffdf7<span class="token punctuation">;</span>
<span class="token property">--heading-font</span><span class="token punctuation">:</span> <span class="token string">'Oswald'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">--body-font</span><span class="token punctuation">:</span> <span class="token string">'Source Sans 3'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Você pode nomear as variáveis como quiser, desde que comecem com <code>--</code>. Aqui, estou definindo várias cores e algumas fontes.</p>
<p>Depois de definidas essas variáveis, posso usá-las para aplicar as fontes e a cor ao texto.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--body-font<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--background-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Use a função <code>var</code> para usar as variáveis que criamos.</p>
<h2 id="estilos-dos-titulos" tabindex="-1"><a class="header-anchor" href="#estilos-dos-titulos">Estilos dos títulos</a></h2>
<p>Estou usando um <code><h1></code> para o título da página e elementos <code><h2></code> para os subtítulos. Vamos mirar esses e aplicar alguns estilos.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">border-block-start</span><span class="token punctuation">:</span> 10px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-font<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">h2</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-font<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Estou fazendo várias coisas aqui. Estou adicionando um pouco de margem extra acima dos elementos <code><h2></code> e um bom tanto de espaço extra acima do <code><h1></code>.</p>
<p>Eu gosto de como a Oswald — a fonte que estou usando para títulos — fica sem negrito. Então estou definindo <code>font-weight</code> como <code>normal</code> em vez de <code>bold</code>, que é o padrão dos títulos.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Estamos usando <a href="https://perma.cc/A75H-V4HJ">fontes variáveis</a>, então temos mais opções de peso do que <code>normal</code> ou <code>bold</code>. Experimente 300, 500, 900 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">e por aí vai</a>.</p>
</aside>
<p>Para o <code><h1></code>, estou mantendo o <code>font-size</code> padrão. Para o <code><h2></code>, estou definindo o <code>font-size</code> como <code>1.2em</code>, ou seja, 1,2 vezes o <em>tamanho de fonte atual</em>.</p>
<p>Algumas mudanças tipográficas transformaram a nossa página, e ela tem uma cara completamente diferente.</p>
<p><img src="/assets/img/css-basics-06.webp" alt="A página intitulada "Planets of the Solar System" recebeu uma atualização de design. A fonte foi mudada, e as cores da fonte foram atualizadas. O fundo foi renovado para combinar com essas mudanças. O cabeçalho agora tem uma borda no topo. A página parece mais polida e desenhada."></p>
<p>Quase poderíamos parar aqui. Não tem nada de tão terrível acontecendo. Mas vamos estilizar alguns dos elementos que ainda não cobrimos.</p>
<h2 id="links" tabindex="-1"><a class="header-anchor" href="#links">Links</a></h2>
<p>Se você estiver usando o meu documento HTML, vai notar alguns hiperlinks, ou tags <code><a></code>. Um aponta para a fonte da imagem de Saturno que eu usei, e o outro para o site NASA Solar System Exploration. O resto está no rodapé do site.</p>
<p>Vamos estilizá-los um pouco. Eu escolhi uma cor azul-esverdeada e defini como variável, o que vimos antes.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token comment">/* ... other code ... */</span>
<span class="token property">--link-color</span><span class="token punctuation">:</span> #028090<span class="token punctuation">;</span>
<span class="token comment">/* ... other code ... */</span>
<span class="token punctuation">}</span></code></pre>
<p>Vou usar isso para definir a cor de todos os elementos <code><a></code>, assim:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--link-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Não é uma regra rígida, mas a maioria das pessoas associa texto azul sublinhado a um link clicável. Eu decidi não me afastar demais disso. Mas eu gostaria de adicionar um efeitozinho em que o sublinhado some quando eu passo o mouse por cima.</p>
<p>Vamos usar o seletor de <em>pseudo-classe</em> <code>:hover</code> para montar isso. Esses seletores costumam ser usados para estilizar elementos em estados diferentes — por exemplo, um campo de texto desativado (<code>:disabled</code>) ou, no nosso caso, um link sobre o qual o ponteiro do mouse está passando.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">a:hover</span> <span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>A propriedade que queremos é <code>text-decoration</code>. Por padrão, os links têm um <code>text-decoration</code> de <code>underline</code>. Você tem <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration">algumas opções</a> aqui, mas eu vou de <code>none</code>.</p>
<p>Isso nos dá uma interação visual sutil com o link.</p>
<video controls>
<source src="/assets/video/css-basics-1.mp4" type="video/mp4">
Seu navegador não tem suporte à tag de vídeo. O vídeo mostra uma gravação da tela em que eu passo o mouse sobre o link. O sublinhado some e volta conforme eu faço isso.
</video>
<h2 id="abreviacoes" tabindex="-1"><a class="header-anchor" href="#abreviacoes">Abreviações</a></h2>
<p>Falando de efeitos ao passar o mouse, há um que você pode não ter notado. Se olhar o HTML no primeiro parágrafo, vai encontrar a seguinte frase.</p>
<pre class="language-html"><code class="language-html">In this article, we will explore the distinctive attributes of each planet,
providing an overview of what makes them unique (and learn a little
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cascading style sheets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> while doing it).</code></pre>
<p>A tag <code><abbr></code> ajuda quem visita a saber o que certas abreviações ou siglas significam. Quando você passa o mouse sobre o termo CSS no documento, recebe uma dica útil mostrando o significado. Você coloca a abreviação dentro das tags e usa o atributo <code>title</code> para o texto completo.</p>
<p>Vamos dar um <code>text-decoration</code> para sugerir que dá para interagir com isso.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">abbr</span> <span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
<span class="token property">text-decoration-style</span><span class="token punctuation">:</span> dotted<span class="token punctuation">;</span>
<span class="token property">text-decoration-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">text-decoration-thickness</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Estamos dando um sublinhado, como os links têm por padrão. Mas vamos deixar na cor vermelha que estamos usando para títulos e usar o estilo <code>dotted</code>, para ajudar a diferenciar de um link. Eu decidi aumentar um pouco a espessura também, para ficar mais fácil de ver.</p>
<h2 id="citacoes-em-bloco" tabindex="-1"><a class="header-anchor" href="#citacoes-em-bloco">Citações em bloco</a></h2>
<p>Eu seria irresponsável se não citasse Carl Sagan num artigo sobre o sistema solar — mesmo que isto seja só uma demo técnica. Então incluí um trecho épico dele na seção sobre a Terra.</p>
<p>Já está servindo como está — já vem recuado e parece uma citação. Mas dá para melhorar, com certeza. Vou te mostrar o código e depois explicar o que estou fazendo.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">blockquote</span> <span class="token punctuation">{</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> 1.5rem 0<span class="token punctuation">;</span>
<span class="token property">border-inline-start</span><span class="token punctuation">:</span> 4px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">padding-inline</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.9rem<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--muted-text-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Eu quero controlar o recuo e deixá-lo mais consistente, baseando-o no tamanho da fonte do documento. Em idiomas da esquerda para a direita, <code>margin-inline</code> controla as margens esquerda e direita. Estou fornecendo dois valores, <code>1.5rem</code> e <code>0</code>, para especificar as margens esquerda e direita, respectivamente. A margem esquerda vai ser 1,5 vezes o tamanho da fonte do documento, e vamos remover a margem direita por completo.</p>
<p>Um estilo talvez comum demais de um elemento <code><blockquote></code> é dar a ele uma borda esquerda grossa que usa um destaque. Não vejo motivo para ser inconformista aqui, então vou colocar uma borda esquerda usando <code>border-inline-start</code>. Lembre-se: <code>inline</code> se refere ao eixo horizontal. E <code>start</code> significa o primeiro (que é a <em>esquerda</em> para mim; <code>end</code> seria o da direita).</p>
<p>Vou definir como uma linha sólida de <code>4px</code> de largura, usando a cor dos títulos, que estabelecemos como a cor de destaque da nossa paleta.</p>
<p>Mas temos um problema. Se parássemos aí, teríamos uma borda encostada no texto. Eca.</p>
<p><img src="/assets/img/css-basics-08.webp" alt="Imagem com texto que descreve brevemente a Terra, incluindo uma citação em bloco mal estilizada de Carl Sagan, em que a borda esquerda encosta no texto."></p>
<p>Felizmente, podemos corrigir isso adicionando um pouco de <code>padding</code>. Vou te dar uma introdução rápida ao <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model"><em>modelo de caixa</em></a>. Todo elemento tem espaço do lado de fora (margem), espaço ao redor do lado de dentro (preenchimento) e uma camada opcional que separa os dois (a borda).</p>
<p>Com esse conhecimento, vamos adicionar algum espaço <em>dentro</em> do elemento, o que vai afastar o conteúdo da borda. Vamos deixar o preenchimento esquerdo e o direito iguais, definindo <code>padding-inline</code> com só um valor, <code>1rem</code>, que equivale ao tamanho da fonte do documento.</p>
<p>Por fim, vou arredondar o efeito deixando o tamanho da fonte um pouco menor e a cor do texto um pouco mais clara. O resultado final é uma citação em bloco bonita, com um toque de estilo.</p>
<p><img src="/assets/img/css-basics-07.webp" alt="A mesma imagem da citação em bloco de antes, mas o espaço entre a borda e o texto foi aumentado, o tamanho do texto foi reduzido, e a cor do texto ficou um cinza sutil."></p>
<p>Eu desenhei este estilo de citação para caber na maioria dos casos, mas você poderia ir em outra direção — chamadas curtas com texto grande e itálico, por exemplo.</p>
<h2 id="listas" tabindex="-1"><a class="header-anchor" href="#listas">Listas</a></h2>
<p>Vamos resolver rápido a lista com marcadores de Plutão e companhia. Vamos dar à lista um pouco de recuo, como é comum em listas com marcadores. Lembre-se: o HTML também tem listas numeradas. Não estamos usando uma nesta página (se você estiver usando a minha marcação HTML), mas podemos escrever o estilo para os dois tipos de lista.</p>
<p>Você já sabe que o seletor mira os elementos que queremos estilizar. Mas você também pode ter vários seletores! Podemos mirar o elemento <code><ul></code> e o elemento <code><ol></code> e dar o mesmo recuo aos dois, fazendo o seguinte.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">ul, ol</span> <span class="token punctuation">{</span>
<span class="token property">padding-inline-start</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Você adiciona vários seletores separando-os com uma vírgula. Isso cria uma <em>lista de seletores</em>. O preenchimento que estamos usando para o efeito de recuo vai ser aplicado a <em>listas não ordenadas</em> (com marcadores) e <em>listas ordenadas</em> (numeradas).</p>
<p>Vamos também ajustar o espaço entre os <em>itens de lista</em> individuais (elementos <code><li></code>). Eu gosto de usar a metade do que uso para parágrafos, porque quero os itens de lista mais juntos do que os parágrafos, mas ainda com um pouco de espaço entre eles. Como usei <code>1rem</code> para espaçar os parágrafos e outros elementos, vou usar a metade disso, <code>0.5rem</code>, para a margem de baixo.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">li</span> <span class="token punctuation">{</span>
<span class="token property">margin-block</span><span class="token punctuation">:</span> 0 0.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Lembre-se: <code>margin-block</code> é a margem de cima e de baixo num idioma da esquerda para a direita, como o português. Podemos definir os dois valores ao mesmo tempo. O trecho acima equivale a:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">li</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Isso significa que, em idiomas da esquerda para a direita, a margem acima do item de lista é zero, e a margem abaixo é uns dez pixels (<code>0.5rem</code> significa 0,5 vezes o tamanho da fonte do <strong>r</strong>oot el<strong>em</strong>ent, que definimos como <code>20px</code>).</p>
<p>O espaçamento deve estar bem bonito agora, mas vamos fazer uma coisa que deixaria designers web dos anos 2000 com inveja. Vamos mudar a cor dos marcadores. Isso era complicado, mas agora é moleza.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">li::marker</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>O pedaço <code>::marker</code> se chama <em>pseudo-elemento</em>, porque representa um pedaço de um elemento HTML. O <code>::marker</code> é uma parte do <em>item de lista</em>, ou elemento <code><li></code>. Ele contém o marcador (ou o número) do item. Podemos mirá-lo com o nosso seletor e mudar a cor para o vermelho dos títulos.</p>
<p><img src="/assets/img/css-basics-09.webp" alt="Captura de tela da lista com marcadores intitulada "Other Major Bodies", com entradas para Pluto, Ceres, Haumea, Makemake, Eris, Ganymede, Titan e Europa. Há mais espaço entre os itens, o que facilita a leitura. Os marcadores estão vermelhos, enquanto o texto está na mesma cor escura."></p>
<p>Ficou bonito!</p>
<h2 id="texto-pre-formatado" tabindex="-1"><a class="header-anchor" href="#texto-pre-formatado">Texto pré-formatado</a></h2>
<p>Na maior parte do tempo, nos nossos documentos HTML, não nos importamos em preservar o espaçamento exato de tudo. Na verdade, isso seria contraproducente, porque em geral recuamos o HTML ou incluímos linhas vazias para deixar o código mais legível. Mas, às vezes, queremos mostrar o texto exatamente como está formatado. Exemplos incluem arte ASCII e código de computador.</p>
<p>Em geral, mostramos esse tipo de texto com a tag <code><pre></code> no HTML. Ela preserva todo o espaçamento e usa uma fonte monoespaçada para deixar tudo consistente. Muitas vezes é combinada com a tag <code><code></code> para indicar que o texto é código de computador. Eu incluí um pouco de código JavaScript relacionado a planetas como exemplo.</p>
<p>Vamos estilizar a tag <code><pre></code> assim.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">pre</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #edebe7<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token property">overflow-x</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.75rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Queremos que o código apareça como se estivesse dentro de um contêiner, então vamos dar preenchimento o tempo todo ao redor. Em seguida, vamos definir uma cor de fundo clara, só o bastante visível contra o fundo da página, mas não tão escura a ponto de prejudicar o contraste do texto. Caixas de canto vivo parecem um pouco antinaturais, então vamos adicionar um <code>border-radius</code> pequeno, que é só um termo chique para quanto queremos arredondar os cantos.</p>
<p>Poderíamos ter linhas longas de código, então precisamos especificar o que deve acontecer se uma linha transbordar pela lateral do contêiner. Neste caso, vamos definir como <code>auto</code>, o que faz o navegador mostrar uma barra de rolagem horizontal no elemento, se precisar.</p>
<p>Por fim, código monoespaçado pode parecer grande, então vamos baixar o tom dizendo que deve ter três quartos do tamanho do texto padrão.</p>
<p><img src="/assets/img/css-basics-10.webp" alt="O exemplo de uma função JavaScript chamada recebeu um contêiner de fundo sutil e arredondado, e é exibido numa fonte monoespaçada. Esta função recebe o nome de um planeta como entrada e devolve informações sobre o planeta a partir de um objeto 'planets' definido, que guarda fatos únicos sobre cada planeta."></p>
<h2 id="melhorar-o-estilo-das-imagens" tabindex="-1"><a class="header-anchor" href="#melhorar-o-estilo-das-imagens">Melhorar o estilo das imagens</a></h2>
<p>Aqui vai como a imagem de Saturno está agora.</p>
<p><img src="/assets/img/css-basics-11.webp" alt="A imagem de Saturno, o sexto planeta a partir do Sol, mostra o seu extenso sistema de anéis. O planeta aparece com uma porção na sombra e os anéis parcialmente iluminados. O texto acima da imagem informa a posição e o tamanho de Saturno no sistema solar. A imagem é mais estreita do que a coluna de texto e, por padrão, é retangular, com cantos vivos."></p>
<p>Não está tão ruim, mas parece que a tag <code><figure></code> está adicionando margem dos dois lados. Eu quero que a imagem ocupe a largura toda. Também quero que a legenda da foto fique menor.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">figure</span> <span class="token punctuation">{</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">figure img</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">figcaption</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.8rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Vamos remover a margem em linha do <code><figure></code>. Depois vamos mirar imagens que estão dentro de figures (só temos uma, mas isso pode ser um padrão legal se adicionarmos mais) e fazer o seguinte:</p>
<ul>
<li>Definir <code>display</code> como <code>block</code>. Imagens vêm como <code>inline</code> por padrão, mas o comportamento de <code>block</code> funciona mais como você esperaria de uma imagem assim.</li>
<li>Definir a margem em linha como <code>auto</code>, caso usemos uma imagem menor do que a largura da página — nesse caso, ela fica centralizada.</li>
<li>Definir <code>border-radius</code> como <code>4px</code> arredonda os cantos da imagem só um pouquinho.</li>
<li>Por fim, vamos reduzir a margem acima da legenda e reduzir o <code>font-size</code> para 80% do tamanho da fonte do documento.</li>
</ul>
<p><img src="/assets/img/css-basics-12.webp" alt="A mesma imagem de Saturno de antes, só que a margem foi removida e os cantos da imagem foram arredondados."></p>
<p>Ficou chique! Ajustes pequenos podem fazer uma diferença grande.</p>
<h2 id="o-rodape" tabindex="-1"><a class="header-anchor" href="#o-rodape">O rodapé</a></h2>
<p>Já temos alguns estilos de rodapé — antes, definimos a largura e garantimos que ficasse centralizado. Mas podemos melhorar dando a ele espaço para respirar, uma bordinha no topo, texto menor e uma cor de texto mais suave.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">footer</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">padding-block</span><span class="token punctuation">:</span> 1.5rem 3rem<span class="token punctuation">;</span>
<span class="token property">border-block-start</span><span class="token punctuation">:</span> 2px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--muted-text-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Um pouco disso já deve começar a parecer familiar. Estamos criando alguma margem acima do elemento com <code>margin-block-start</code>. Estamos adicionando uma borda de <code>2px</code> de largura acima do rodapé, usando o nosso vermelho de títulos de sempre. Usando <code>padding-block</code>, estamos adicionando algum espaço entre o texto e a borda, e um bom pedaço de preenchimento embaixo para dar folga na parte de baixo da página. Por fim, vamos usar a mesma cor de texto suave que usamos na citação em bloco.</p>
<p>Como já adicionamos a margem que queremos no próprio elemento <code><footer></code>, vamos remover toda a margem das coisas <em>dentro</em> do rodapé. Vamos usar o nosso amigo, o seletor universal (<code>*</code>).</p>
<pre class="language-css"><code class="language-css"><span class="token selector">footer *</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.9rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Este seletor vai mirar tudo o que está <em>dentro</em> da tag <code><footer></code>. Vamos definir <code>margin</code> como <code>0</code> e reduzir o texto para 90% do tamanho da fonte do documento.</p>
<h2 id="diversao-tipografica-extra" tabindex="-1"><a class="header-anchor" href="#diversao-tipografica-extra">Diversão tipográfica extra</a></h2>
<p>Poderíamos parar aqui de vez, <em>mas</em>… vamos nos divertir um pouco.</p>
<p>Olhando o primeiro parágrafo na marcação, eu dei a ele uma classe <code>intro</code>. Vamos dar um pouco de ênfase deixando o texto um pouco maior.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.intro</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Quando colocamos um ponto antes de um termo num seletor CSS, isso significa que queremos mirar todo elemento que tem aquela classe (uma classe <code>intro</code>, neste caso). Isso vai deixar o <code>font-size</code> maior do que o tamanho de texto padrão do documento. E, com a fonte maior, precisa de um pouco de margem extra embaixo.</p>
<p>Beleza, mas agora vamos ficar <em>bem extra</em>. Olhe a marcação de novo, e você vai notar que eu envolvi as três primeiras palavras numa tag <code><span></code> com uma classe <code>caps</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.caps</span> <span class="token punctuation">{</span>
<span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.78em<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span>
<span class="token property">letter-spacing</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Isso vai nos dar aquele efeito chique de livro, em que as primeiras palavras ficam em versalete. Em geral, você ia querer usar uma fonte com <a href="https://practicaltypography.com/small-caps.html">versalete de verdade</a>, mas dá para fazer uma falsificação decente, já que Source Sans 3 é uma fonte variável.</p>
<p>A declaração <code>text-transform</code> vai deixar todas as letras em maiúsculas. É melhor fazer isso com CSS do que digitar tudo em maiúsculas na mão, porque é mais uma coisa de estilo. Para o <code>font-size</code>, eu só fui mexendo até ficar com a cara certa. No fundo, eu queria que as maiúsculas tivessem a mesma altura das letras minúsculas do texto de introdução (ou seja, a <a href="https://en.wikipedia.org/wiki/X-height">altura-x</a>).</p>
<p>Para ajudar no equilíbrio, estou aumentando um pouco o <code>font-weight</code>. Além de valores como <code>normal</code> e <code>bold</code>, você pode usar os valores numéricos de 100 a 900 se a fonte suportar — e a nossa fonte variável suporta.</p>
<p>Por fim, você se beneficia de aumentar o espaço entre as letras ao usar todas em maiúsculas. Estou usando a unidade <code>em</code>, que se baseia no <code>font-size</code> atual. Isso é útil porque, se você mudar o <code>font-size</code> no futuro, o espaçamento muda na mesma proporção.</p>
<p><img src="/assets/img/css-basics-13.webp" alt="Captura de tela do título Planets of the Solar System. O texto abaixo descreve o sistema solar. O tamanho do texto foi aumentado, e a primeira frase do parágrafo foi renderizada em versalete."></p>
<p>E aí está. Dos começos humildes como uma página <em>sem estilo</em>, com um charme simples, agora está com cara de artigo de autoridade.</p>
<h2 id="potencial-sem-limite" tabindex="-1"><a class="header-anchor" href="#potencial-sem-limite">Potencial sem limite</a></h2>
<p>Estes são só os estilos que eu escolhi com base nas minhas preferências. Você poderia ir em todo tipo de direção diferente. Não estou necessariamente tentando empurrar um estilo para você — embora eu tenha te apontado para alguns princípios tipográficos geralmente bons de seguir. Eu só queria te dar um gostinho de como você pode aplicar os seus próprios estilos a uma página.</p>
<p>A mágica do CSS é que você poderia pegar o meu HTML exato — sem mudanças — e criar um design completamente diferente a partir do mesmo ponto de partida. Essa é a premissa de um experimento web chamado <a href="https://csszengarden.com/">CSS Zen Garden</a>, em que as pessoas enviam designs com base na mesma marcação.</p>
<figure>
<img src="/assets/img/css-basics-14.webp" alt="Captura de tela de duas páginas do projeto CSS Zen Garden. A página da esquerda tem um design colorido e vibrante, com uma paleta rosa, roxa e laranja. A da direita tem um design minimalista e limpo, com fundo cinza-claro e texto azul. As duas mostram o que o CSS consegue fazer no design.">
<figcaption>Estes dois designs compartilham o mesmo código HTML. <a href="https://www.youtube.com/watch?v=Iloby6ZXRjI">São a mesma foto.</a></figcaption>
</figure>
<p>Espero que este capítulo bônus tenha te dado um gostinho do que é possível com CSS. Assim como com HTML, até um pouco de conhecimento de CSS já vale — uma simples mudança de fonte e cor, por exemplo, pode fazer uma diferença enorme. Eu te animo a continuar explorando CSS se você quiser criar designs personalizados. É uma habilidade recompensadora de ter.</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>
<h1 id="html-reutilizavel-com-php" tabindex="-1"><a class="header-anchor" href="#html-reutilizavel-com-php">HTML reutilizável com PHP</a></h1>
<p>Ao longo deste livro, uma coisa chata que tivemos de lidar foi atualizar o menu de navegação em todas as páginas, toda vez que mudávamos o menu. Imagine se a gente não precisasse fazer isso. Em vez disso, poderíamos manter o menu num lugar só, num arquivo só, e ele apareceria como mágica em todas as páginas.</p>
<p>É isso que vamos fazer neste capítulo bônus, com a ajuda do PHP. PHP significa <em>PHP: Hypertext Preprocessor</em>. Sim, <a href="https://en.wikipedia.org/wiki/Recursive_acronym">a sigla faz parte do nome</a>, o que é bem estranho. Mas, no começo, quando foi criado, significava Personal Home Page, porque esse era o uso inicial.</p>
<p>O PHP é uma linguagem de programação que move boa parte da web, principalmente porque o CMS <a href="https://wordpress.org/">WordPress</a> foi feito com ele. PHP é uma linguagem de programação de verdade, o que significa que ela consegue quase tudo. <em>Hypertext preprocessor</em> é uma boa descrição do que ela costuma fazer.</p>
<p>Quando você visita um site <em>estático</em>, como os que fizemos neste livro, o servidor te entrega o arquivo HTML que você pediu pelo URL. Quando você visita um site feito com PHP, um script PHP roda no servidor, e ele devolve algum código HTML (em geral) para o navegador. Então, nos dois casos, você recebe HTML de volta. Qual é a diferença?</p>
<p>O site em PHP pode gerar HTML de forma dinâmica, com base no URL e em outros dados do pedido do navegador. Por exemplo, eu poderia ter um site em que a pessoa tem um perfil em <code>example.com/user/blake</code>. Com HTML puro, eu precisaria criar esse arquivo para cada pessoa. Com PHP, porém, eu poderia gerar a página na hora, lendo o nome de usuário no URL e montando o HTML certo para enviar de volta.</p>
<p>O PHP também permite implementar recursos mais complicados, como aceitar dados de quem usa e salvar isso num banco de dados. Isso pode ser tão simples quanto um contador de visitas dinâmico, ou tão sofisticado quanto uma rede social.</p>
<p>Se isso parece complicado, não se preocupe. Não vamos mergulhar fundo em montar um monte de HTML com PHP. Vamos olhar uma função específica do PHP que é útil para o nosso caso — a instrução <code>include</code>.</p>
<h2 id="como-executar-php" tabindex="-1"><a class="header-anchor" href="#como-executar-php">Como executar PHP</a></h2>
<p>O Neocities, o serviço que usamos para hospedar o nosso site pessoal, não deixa você executar PHP. Isso é o melhor, porque não combina com o espírito do Neocities e deixaria um serviço simples e agradável mais complicado. Felizmente, há um monte de serviços acessíveis que oferecem PHP.</p>
<p>Eu recomendo o que se chama <em>hospedagem compartilhada</em>. Resumindo, isso costuma significar que o serviço cuida dos servidores e te dá, como cliente, uma pasta no servidor onde você pode enviar seus arquivos (e, em geral, acesso a vários serviços).</p>
<aside class="aside"><p class="aside-label">Observação</p><p>É possível executar PHP no seu computador para testar o site antes de enviá-lo a um servidor. Porém, configurar isso fica fora do alcance deste livro.</p>
<p>O jeito mais fácil provavelmente é usar um app como <a href="https://www.apachefriends.org/">XAMPP</a> ou <a href="https://www.mamp.info">MAMP</a> (o que eu uso). Você também pode <a href="https://perma.cc/MZB9-GKBD">instalar o PHP direto no sistema</a> e usar o <a href="https://web.archive.org/web/20240711042305/https://www.php.net/manual/en/features.commandline.webserver.php">servidor de desenvolvimento embutido</a>.</p>
</aside>
<p>A maioria das hospedagens compartilhadas oferece os mesmos serviços, mas aqui vão algumas das que as pessoas recomendaram quando eu <a href="https://perma.cc/WAD3-JCNX">perguntei no Mastodon</a>.</p>
<ul>
<li><a href="https://www.dreamhost.com/">DreamHost</a></li>
<li><a href="https://www.siteground.com/">SiteGround</a></li>
<li><a href="https://www.reclaimhosting.com/">Reclaim Hosting</a></li>
<li><a href="https://www.infinityfree.com/">InfinityFree</a></li>
</ul>
<p>E ainda tem o <a href="https://www.nearlyfreespeech.net/">NearlyFreeSpeech.NET</a>, a hospedagem <a href="https://blakewatson.com/journal/why-i-host-my-websites-with-nearlyfreespeech-net/">que eu uso há anos</a>. Eu não vou chamar de amigável para iniciantes, mas a interface é a mais simples, e não tem anúncio chato nem tentativa de te vender upgrade.</p>
<p>Quando você tiver uma conta em uma destas (ou em outra) hospedagem, deve conseguir enviar arquivos pelo site deles ou conectando ao servidor com <a href="https://perma.cc/P7Y7-CR6P">FTP</a>.</p>
<p>Os detalhes disso ficam fora do alcance deste livro, mas há um monte de material sobre como começar com uma hospedagem compartilhada. Algumas buscas na web devem te colocar no caminho certo.</p>
<p>O legal do PHP é que é bem direto começar. Pegue uma das páginas do seu site e mude a extensão do arquivo de <code>.html</code> para <code>.php</code>. Pronto: você criou um arquivo PHP perfeitamente válido — sem mudança nenhuma.</p>
<h2 id="deixar-uma-pagina-dinamica" tabindex="-1"><a class="header-anchor" href="#deixar-uma-pagina-dinamica">Deixar uma página dinâmica</a></h2>
<p>Se tudo o que você faz é mudar a extensão do arquivo, para quem visita nada muda. A pessoa recebe o HTML como antes. Mas agora que você tem um arquivo PHP, pode colocar trechos dinâmicos na página, inserindo-os em tags PHP.</p>
<p>Por exemplo, aqui vai uma página que mostra o ano atual.</p>
<pre class="language-php"><code class="language-php"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My website<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/sakura.css/css/sakura.css<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My website<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>The current year is: <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">date</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Y'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Mesmo que você nunca mais edite este arquivo, ele vai estar sempre atualizado (enquanto o servidor estiver), porque o PHP injeta o ano no código HTML quando a página é pedida.</p>
<p>Vamos detalhar a parte dinâmica. Primeiro, o código PHP é escrito entre tags PHP (<code><?php</code> e <code>?></code>).</p>
<p>O código PHP dentro dessas tags é executado no servidor, antes de o HTML ser enviado ao navegador. A instrução <code>echo</code> é o jeito de dizer ao PHP que você quer que ele imprima alguma coisa na página. A função <code>date</code> devolve a data atual — neste caso, estamos dizendo que queremos só o ano.</p>
<p>Então a função <code>date</code> roda e devolve o ano atual. Esse pedaço de texto é então processado pela instrução <code>echo</code>, que o insere no documento.</p>
<p>O código PHP de verdade não é enviado de volta ao navegador, e quem visita nunca vai vê-lo. Em vez disso, vai aparecer como HTML comum, com o ano atual exibido como se você tivesse digitado.</p>
<h2 id="reutilizar-partes-do-seu-site" tabindex="-1"><a class="header-anchor" href="#reutilizar-partes-do-seu-site">Reutilizar partes do seu site</a></h2>
<p>Uma coisa que torna o PHP incrivelmente útil é a capacidade de reutilizar partes de HTML em vários lugares.</p>
<p>Pense no site que eu fui montando ao longo deste livro. Ele tem esta navegação em todas as páginas (ignorando o atributo <code>aria-current</code>, que muda conforme a página em que você está).</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/index.html<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/blog/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/resume.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/fun.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fun!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
<p>Precisamos manter este menu de navegação (“nav”) em todas as páginas. Não é tão ruim num site pequeno, com poucas páginas. Mas imagine se você tivesse dezenas de páginas. Se decidisse adicionar alguma coisa ao menu, precisaria voltar em <em>cada página</em> e fazer a mesma mudança em cada lugar. Com PHP, podemos reutilizar o código do menu.</p>
<p>Primeiro, crie um arquivo chamado <code>nav.php</code>. Você pode colocá-lo em qualquer lugar do projeto, mas eu vou colocar numa pasta <code>includes</code>, só para organizar.</p>
<p>Copie o menu de navegação da página inicial (<code>index.html</code>) e cole o conteúdo no arquivo <code>nav.php</code>. Por enquanto, remova o atributo <code>aria-current="page"</code>, porque vamos precisar tornar essa parte dinâmica depois.</p>
<p>Você deve ter um arquivo <code>nav.php</code> mais ou menos assim:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/blog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/resume.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/fun.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
<p>O trecho acima não é só um recorte. É o <em>conteúdo inteiro</em> de <code>nav.php</code>. Ao contrário de outros arquivos HTML, que precisam de um <code><head></code>, um <code><body></code> etc., arquivos PHP podem conter um fragmento de HTML.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>No processo de converter o site de só HTML para PHP, é uma boa hora de converter todos os links internos entre páginas para URLs absolutos. Comece com uma barra <code>/</code> e escreva o caminho completo. Veja esta <a href="/intervalo-instalar-um-servidor-local/#urls-relativas-e-urls-absolutas">seção sobre URLs relativas e URLs absolutas</a> do capítulo do servidor web, se você ainda não viu.</p>
</aside>
<p>Agora vamos usar. Renomeie <code>index.html</code> para <code>index.php</code>. Apague o bloco <code><nav></code> inteiro e substitua pela seguinte linha de PHP.</p>
<pre class="language-php"><code class="language-php"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
<span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"includes/nav.php"</span> <span class="token delimiter important">?></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Blake<span class="token entity named-entity" title="’">&rsquo;</span>s Homepage<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span></code></pre>
<p>Quando você carregar a página, as coisas devem parecer iguais às de antes. Você deve ver o menu de navegação. Mas a mágica é que você está usando a versão em PHP. Agora você pode começar a converter o resto das páginas.</p>
<h2 id="converter-paginas-html-em-php" tabindex="-1"><a class="header-anchor" href="#converter-paginas-html-em-php">Converter páginas HTML em PHP</a></h2>
<p>Os passos são, em geral, os mesmos para cada página.</p>
<ol>
<li>Mude a extensão do arquivo de <code>.html</code> para <code>.php</code>.</li>
<li>Substitua a tag <code><nav></code> pela instrução <code>include</code> do PHP.</li>
</ol>
<p>Para páginas do nível mais alto, a instrução <code>include</code> do PHP vai ficar assim:</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre>
<p>Se você estiver editando uma subpágina (como o blog), precisa ajustar o caminho usando a sintaxe <code>..</code> para subir um nível.</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string double-quoted-string">"../includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre>
<aside class="aside"><p class="aside-label">Observação</p><p>Se você se sentir à vontade com mais código, use uma variável embutida do PHP que aponta para o diretório de nível mais alto. O seguinte funciona em qualquer página. O ponto (<code>.</code>) aqui une as duas strings de texto.</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'DOCUMENT_ROOT'</span><span class="token punctuation">]</span> <span class="token operator">.</span> <span class="token string double-quoted-string">"/includes/nav.php"</span> <span class="token delimiter important">?></span></span></code></pre>
</aside>
<p>Quando você tiver feito isso em cada página, vai reutilizar o menu de navegação. Se precisar atualizar o menu no futuro, pode editar o <code>nav.php</code>.</p>
<p>Você poderia fazer isso com outros elementos repetíveis do site. Por exemplo, boa parte da seção <code><head></code> é igual em todas as páginas. O rodapé pode ser o mesmo em todas as páginas. E por aí vai.</p>
<h2 id="bonus-destacar-dinamicamente-o-link-atual-da-navegacao" tabindex="-1"><a class="header-anchor" href="#bonus-destacar-dinamicamente-o-link-atual-da-navegacao">Bônus: destacar dinamicamente o link atual da navegação</a></h2>
<p>Quando movemos o menu para o PHP, perdemos alguma coisa. Antes, definíamos o atributo <code>aria-current</code> no link certo da navegação para indicar qual página é a atual no menu. Isso é bom para acessibilidade e também dá pistas visuais para quem enxerga. Mas como definimos a página atual se a navegação é um arquivo só? Como sabemos qual item da lista é o atual?</p>
<p>Considere esta a seção bônus deste capítulo bônus (isso mesmo, um bônus dentro de um bônus). Vou apresentar alguns conceitos de programação. Só tenho um tempinho para cobri-los, porque programar em PHP ou em qualquer outra linguagem realmente fica fora do alcance deste livro. Dito isso, com um código razoavelmente leve (que eu topo de você copiar à vontade), você pode implementar o <code>aria-current</code> automaticamente.</p>
<p>Primeiro, vamos recapitular o que este atributo significa. Se alguém vai à página Sobre, queremos que aquele link no menu seja estilizado para indicar que representa a página atual (ou anunciado por um leitor de tela, se a pessoa estiver usando um). Nesse caso, usaríamos o atributo <code>aria-current="page"</code>.</p>
<p>Temos também outro cenário. Se alguém visita um post do blog, gostaríamos de destacar o link Blog na navegação. Não é exatamente a página atual — a pessoa não está na listagem do blog, para onde o link aponta, e sim num post individual. Ainda assim, seria legal destacar o link Blog porque ele representa a seção atual do site — o post é uma subpágina do blog. Nesse caso, poderíamos usar <code>aria-current="true"</code>. Isso é menos específico e mais correto em termos de significado.</p>
<p>Beleza, então como adicionamos isso automaticamente com PHP?</p>
<p>Há muitos jeitos de fazer isso — e nenhum é necessariamente mais certo do que os outros — mas aqui vai o que eu acho o menos complicado.</p>
<p>Esta técnica vai exigir que a gente <em>chame uma função</em> em cada item da navegação. Fica assim.</p>
<pre class="language-php"><code class="language-php"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/blog<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/blog'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/about.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/resume.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/resume.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/fun.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/fun.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Fun!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
<p>Vamos precisar de uma <em>função</em> personalizada chamada <code>aria_current</code> (eu te dou o código dessa função daqui a pouco). A função deve receber um <em>argumento</em>, que deve ser o texto do <code>href</code>. Depois, o trabalho da função será comparar esse pedaço de texto com o URL visitado e decidir se deve imprimir, usando <code>echo</code>, o atributo <code>aria-current</code>.</p>
<p>Você pode colocar a função no mesmo arquivo, acima da marcação HTML.</p>
<pre class="language-php"><code class="language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span>
<span class="token keyword">function</span> <span class="token function-definition function">aria_current</span><span class="token punctuation">(</span><span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// If $url is an exact match for the current URL, return 'aria-current="page"'.</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'REQUEST_URI'</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">echo</span> <span class="token string single-quoted-string">'aria-current="page"'</span><span class="token punctuation">;</span>
<span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// Otherwise it might be a sub-page, so check if the current URL contains</span>
<span class="token comment">// $url. If it does, return 'aria-current="true"' to indicate that the link</span>
<span class="token comment">// is an ancestor of the current page. Ignore a lone slash.</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$url</span> <span class="token operator">!==</span> <span class="token string single-quoted-string">'/'</span> <span class="token operator">&&</span> <span class="token function">strpos</span><span class="token punctuation">(</span><span class="token variable">$_SERVER</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'REQUEST_URI'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token variable">$url</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token constant boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">echo</span> <span class="token string single-quoted-string">'aria-current="true"'</span><span class="token punctuation">;</span>
<span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token delimiter important">?></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/blog<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/blog'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Blog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/about.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/resume.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/resume.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Resume<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/fun.php<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">aria_current</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/fun.php'</span><span class="token punctuation">)</span> <span class="token delimiter important">?></span></span></span><span class="token punctuation">></span></span>Fun!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span></code></pre>
<p>Beleza, vamos por partes. Primeiro, precisamos abrir um par de tags PHP. Dentro, vamos definir uma função chamada <code>aria_current</code> com um argumento: uma variável chamada <code>$url</code>.</p>
<p>Você pode ver onde eu acrescentei algumas notas chamadas <em>comentários</em>. Toda linha que começa com duas barras (<code>//</code>) é considerada comentário e é ignorada — está ali só para quem está olhando o código.</p>
<p>O primeiro pedaço de código é uma <em>instrução if</em>. O PHP tem uma variável global chamada <code>$_SERVER</code> com todo tipo de informação, inclusive qual página está sendo visitada (o que ele chama de <code>REQUEST_URI</code>). Então pegamos isso e vemos se combina com o URL do item de navegação dado (lembre-se: estamos rodando esta função para cada item). Se combinar, vamos imprimir <code>aria-current="page"</code> usando a instrução <code>echo</code>. Nesse caso, a saída aparece no ponto em que chamamos a função (que é dentro da tag <code><a></code>, onde ficam os atributos). Depois da instrução <code>echo</code>, usamos <code>return</code> para parar a função — já terminamos.</p>
<p>Se o primeiro teste não for verdadeiro, há outro teste que queremos tentar. A página atual visitada é uma subpágina do item de navegação dado?</p>
<p>Este teste tem duas partes:</p>
<ol>
<li>Primeiro, queremos ignorar a página inicial (<code>/</code>), porque ela obviamente não é subpágina de nada.</li>
<li>Segundo, vamos testar o URL passado para a função contra o URL visitado, para ver se temos uma combinação.</li>
</ol>
<p>A segunda parte do teste usa uma função chamada <code>strpos</code>. Ela recebe dois argumentos. O primeiro é um pedaço de texto no qual você quer buscar (vamos chamar de <em>palheiro</em>). O segundo é um pedaço de texto que você está procurando (vamos chamar de <em>agulha</em>). A função devolve a posição da agulha no palheiro, se encontrar. Devolve <code>false</code> se não encontrar de jeito nenhum.</p>
<p>Então, de novo, vamos olhar a variável global embutida <code>$_SERVER['REQUEST_URI']</code>. Você pode imaginar isso como algo tipo <code>/blog/my-first-post</code>. Sabemos que a pessoa está numa subpágina do blog se encontrarmos <code>/blog</code> dentro desse caminho.</p>
<p>O teste passa nesse caso, e vamos imprimir <code>aria-current="true"</code> usando a instrução <code>echo</code>.</p>
<p>Se os dois testes falharem, não imprimimos nada.</p>
<p>Para recapitular: quando alguém carrega uma página no nosso site, rodamos uma função em cada item da navegação. Se o <code>href</code> do item combina com o URL atual, ou aparece em algum lugar do URL atual, imprimimos o atributo <code>aria-current</code> adequado. Caso contrário, não imprimimos nada.</p>
<p>Ufa! Se você nunca tinha programado, dê um tapinha nas próprias costas, porque agora você já programou. Se esse tipo de coisa te diverte, explore mais PHP ou dê uma olhada em JavaScript.</p>
<h2 id="conclusao" tabindex="-1"><a class="header-anchor" href="#conclusao">Conclusão</a></h2>
<p>A criação de modelos com <code>include</code> no PHP é um ótimo jeito de escrever HTML sem repetir código. O PHP tem uma barreira de entrada menor do que outras linguagens de programação, e essa é uma das razões de eu trazer o assunto. Porém, sites podem ser feitos com todo tipo de linguagem (JavaScript, Python e Ruby são outras escolhas populares). Este é o mundo dos sites dinâmicos. Fica bem selvagem se você começa a pensar em tudo o que dá para fazer com isso.</p>
<p>Includes de PHP podem ser úteis mesmo para um site pessoal pequeno. Mas também não tem problema ficar só com HTML puro! Editores como o Visual Studio Code têm busca e substituição robustas, o que permite atualizar muitos arquivos de uma vez.</p>
<p>E com isso, você terminou o último capítulo bônus de <a href="/"><em>HTML e Pessoas</em></a>! Obrigado por ler.</p>
</main>
<footer class="site-footer">
<div class="container">
<ul class="mb-sm pl-none" style="list-style: none">
<li>
<a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro"
>Recursos</a
>
</li>
<li>
<a href="https://github.com/blakewatson/htmlforpeople">GitHub</a>
</li>
<li>
<a href="https://blakewatson.com/about">Sobre o autor</a>
</li>
</ul>
<p>
Livro original de
<a href="https://blakewatson.com">Blake Watson</a> —
<a href="https://htmlforpeople.com">HTML for People</a>.<br />
Tradução para o português do Brasil oferecida por
<a href="https://pablomurad.com">Pablo Murad</a> e
<a href="https://portalidea.com.br">Portal IDEA</a>.<br />
Licença
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
>CC BY-NC-SA 4.0</a
>.
</p>
</div>
</footer>
<script>
const tocLinks = Array.from(
document.querySelector('#sumario + ol').querySelectorAll('a'),
);
tocLinks.forEach((link) => {
link.setAttribute('href', link.getAttribute('href').replace('/', '#'));
});
</script>
</body>
</html>
|