by Spencer Tiberi
http://
or https://
GET /cat.jpg HTTP/1.1
1.1
refers to HTTP language 1.1HTTP/1.1 200 OK
Code | Status | Meaning |
---|---|---|
200 | OK | Everything is OK |
301 | Moved Permanently | Browser should redirect to new location |
302 | Found | Browser should redirect to new location |
304 | Not Modified | Browser will cache files if things don’t change to save time/bytes from requests |
401 | Unauthorized | Not authorized to view content; Could require login |
403 | Forbidden | Not able to view content |
404 | Not Found | The requested data could not be found because it doesn’t exist on the server |
500 | Internal Service Error | Not your fault; The server erred |
Allows you to format, but doesn’t have control flow such as loops and conditions
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello, world</title>
</head>
<body>
hello, world
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head></head>
head
body
contains 99% of the webpage’s content<a></a>
are anchor tags that can be used for links<!DOCTYPE html>
<html lang="en">
<head>
<title>link</title>
</head>
<body>
Visit <a href="http://www.harvard.edu/">Harvard</a>.
</body>
</html>
<img/>
is the image tag<!DOCTYPE html>
<html lang="en">
<head>
<title>image</title>
</head>
<body>
<img alt="Grumpy Cat" src="cat.jpg"/>
</body>
</html>
src
(source) attribute is set to the address of the filealt
(alternative text) attribute is what displays if the page can’t be seen<p></p>
) tell the browser to create a paragraph of text<h1></h1>
are the heading 1 tags<h2></h2>
, <h3></h3>
, <h4></h4>
, <h5></h5>
, and <h6></h6>
<ul></ul>
<li></li>
are list item tags<!DOCTYPE html>
<html lang="en">
<head>
<title>unordered list</title>
</head>
<body>
<ul>
<li> foo </li>
<li> bar </li>
<li> baz </li>
</ul>
</body>
</html>
<ol></ol>
<!DOCTYPE html>
<html lang="en">
<head>
<title>ordered list</title>
</head>
<body>
<ol>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>
</body>
</html>
<table></table>
are table tags that create a table
<tr></tr>
are table row tags<td></td>
are table data tag
<!DOCTYPE html>
<html lang="en">
<head>
<title>table</title>
</head>
<body>
<table>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>*</td>
<td>0</td>
<td>#</td>
</tr>
</table>
</body>
</html>
curl
is a command ran in the terminal that behaves much like a browser
-I
flag tells curl
to return HTML headers
curl http://www.google.com
returns a webpage that includes HTML and JavaScript
<form></form>
are form tags that take attributes for an action and a method<!DOCTYPE html>
<html>
<head>
<title>search</title>
</head>
<body>
<form action="https://www.google.com/search" method="get">
<input name="q" type="text"/>
<input type="submit" text="Search"/>
</form>
</body>
</html>
action="https://www.google.com/search" method="get"
means “get me https://www.google.com/search”<input/>
tags
https://www.google.com/search?q=cats
?
in the URL means “Hey Server! Here comes my HTTP parameters!”
&
<!DOCTYPE html>
<html lang="en">
<head>
<title>css0</title>
</head>
<body>
<header style="font-size: large; text-align: center;">
John Harvard
</header>
<main style="font-size: medium; text-align: center;">
Welcome to my home page!
</main>
<footer style="font-size: small; text-align: center;">
Copyright &%169; John Harvard
</footer>
</body>
</html>
body
, we have three tags: <header></header>
, <main></main>
, and <footer></footer>
font-size
small
, medium
, large
, and exact sizes such as 16px
text-align: center;
centers the textheader
, main
, and footer
are all child nodes of of the parent node body
text-align: center;
attribute on the body
element so it will pass it on to its children (header
, main
, and footer
)<!DOCTYPE html>
<html lang="en">
<head>
<title>css1</title>
</head>
<body style="text-align: center;">
<header style="font-size: large;">
John Harvard
</header>
<main style="font-size: medium;">
Welcome to my home page!
</main>
<footer style="font-size: small;">
Copyright &%169; John Harvard
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
</style>
<title>css2</title>
</head>
<body class="centered">
<header class="large">
John Harvard
</header>
<main class="medium">
Welcome to my home page!
</main>
<footer class="small">
Copyright &%169; John Harvard
</footer>
</body>
</html>
<style>
can be a tag as well as an attribute.centered
defines a class named centered
text-align: center;
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body
{
text-align: center;
}
header
{
font-size: large;
}
main
{
font-size: medium;
}
footer
{
font-size: small;
}
</style>
<title>css3</title>
</head>
<body>
<header>
John Harvard
</header>
<main>
Welcome to my home page!
</main>
<footer>
Copyright &%169; John Harvard
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css4.css" rel="stylesheet"/>
<title>css4</title>
</head>
<body>
<header>
John Harvard
</header>
<main>
Welcome to my home page!
</main>
<footer>
Copyright &%169; John Harvard
</footer>
</body>
</html>
<link/>
tag with a href
attribute of css4.css
and a rel
(relationship) attribute of stylesheet
body
{
text-align: center;
}
header
{
font-size: large;
}
main
{
font-size: medium;
}
footer
{
font-size: small;
}