Computers on a network act as clients, servers, or both:
DNS is how computers find one another
within and across networks.
...kind of like an address book.
HTTP is the language spoken by web clients and servers to
send and receive web pages, images, and other assets.
Every page (or “resource”) on the Web has its own URL.
URLs can reference resources in several ways:
| form | description | examples |
|---|---|---|
http://domainhttp://domain/path |
fully-qualified URL | http://grayarea.orghttp://grayarea.org/events/ |
/path/to/file |
absolute path | /about.html |
path/to/file../path/to/file |
relative path | widgets/page1.html../widgets/page1.html |
URL#id |
fragment identifier | #section1 |
URL?query |
query string | https://google.com/search?q=foo |
Web standards are detailed specifications defined by
a group called the W3C (Worldwide Web Consortium).
Standards change and evolve over time, often
in response to the needs of the web design community.
A Web browser is software that speaks HTTP
and understands HTML, CSS and JavaScript.
HTML is the text language of Web documents,
which are made up
of structured elements, or tags.
Elements generally take the form:
<name attr="value">content</name><name opens the elementattr="value"> closes the opening tag</name> closes the elementSome elements are called “empty” because they have no content. These elements are written without a close tag:
<img src="lion.jpg" alt="This is a photo of a lion.">
Nesting is a term that we use to describe putting
elements inside one another to define structure:
<parent>
<child foo="bar"></child>
</parent>
For instance, an HTML document with just a title looks like:
<html>
<head>
<title>Hello, world!</title>
</head>
</html>
Nested elements are said to have a parent-child relationship.
Here, <head> is a child of <html> and the parent of the <title> element.
The Document Type Definition, or doctype,
is the first line of your HTML document:
<!DOCTYPE html>
This tells the web browser what type
of HTML to expect.
In this case we’re telling it to expect HTML5,
the latest and greatest HTML standard.
<html>After the doctype goes the <html> element:
<!DOCTYPE html>
<html>
</html>
You may add a lang attribute
to indicate the (human) language in
which the document’s text was
written:
<!DOCTYPE html>
<html lang="es">
<p>¡Que gato gordo!</p>
</html>
<head>The <head>, which includes the document’s title and
other metadata, is generally invisible to the user:
<head>
<title>My Site Name</title>
<meta charset="utf-8">
</head>
The <meta charset="utf-8"> element tells the
browser to interpret the document as unicode text.
<body>And then there’s <body>, which contains all of
the page’s content: text and media, navigation,
links, and anything visible to the viewer*:
<body>
<h1>My Page Heading</h1>
<p>This is paragraph of text.</p>
<img src="lion.jpg" alt="This is photo of a lion.">
</body>
* (or legible to the screen reader)
The <head> and <body> are children of the <html> element:
<!DOCTYPE html>
<html>
<head>
<title>My Site Name</title>
</head>
<body>
<h1>My Page Heading</h1>
<p>This is paragraph of text.</p>
<img src="lion.jpg" alt="This is photo of a lion.">
</body>
</html>
HTML5 defines structural elements
to delineate different parts of a document:
<nav> |
site or page navigation |
<header>, <footer> |
document header and footer |
<section> |
document section |
<main> |
“main” document content |
<article> |
a news article or blog post |
<h1-h6> |
document or section heading |
<ol>, <ul>, <li> |
ordered and unordered lists |
<p> |
a paragraph of text |
<div> |
generic block-level container |
<span> |
generic span of inline text |
<b>, <strong>,<i>, <em> |
bold / strong italic / emphasized inline text |
<blockquote>, <q> |
block-level and inline quotations |
<table>, <tr>,<th>, <td> |
data tables |
<sub>, <sup> |
subscript and superscript |
HTML5 provides the following elements to embed
images, video, audio and other non-text content:
<img> |
static images and photos |
<svg> |
Scalable Vector Graphics |
<audio> |
audio |
<video> |
video |
<canvas> |
dynamic 2D and 3D bitmaps |
<object>, <embed> |
third-party plugins (Flash, etc.) |
<a>Links are the connective tissue of the Web. Use the
<a> (anchor) element to create links to other
resources:
<a href="URL">link text</a>
Anchor elements typically have an href attribute,
the value of which is a URL.
<a href="http://grayarea.org">Gray Area</a>
Try to use descriptive link text!
Avoid using phrases like
“click here” or just “here”.
class AttributeThe class attribute can
be added to any element,
and it serves
as a way to classify elements, usually
for the purpose of either adding semantics
and/or styling with CSS.
<ol class="cars">
<li>Honda</li>
<li class="fancy">Ferrari</li>
<li class="fancy expensive">Maserati</li>
</ol>
<ol class="people">
<li class="androgynous">Andy</li>
<li class="male">Bobby</li>
<li class="female">Connie</li>
</ol>
id AttributeThe id attribute is used to give elements a
unique identifier, for the purpose of either linking
within the document and/or styling with CSS.
<ol class="cars">
<li id="honda">Honda</li>
...
</ol>
<ol class="people">
<li id="andy">Andy</li>
...
</ol>
The spec says: The value must be unique [...] and must contain at least one character. The value must not contain any space characters.
You can create links within your document by
adding an id attribute to any element, then using
the fragment identifier URL form:
<p>Read more about <a href="#lion">the lion</a>!</p>
<h2 id="lion">The Lion</h2>
Using meaningful elements, classes
and ids
will make it easier to
maintain your documents.
<section> for sections,
and <ol> for ordered lists.class and id
attributes for elements that have no
semantic HTML equivalent.class attributes that describe appearance,
such as class="red".e.g. <section>, <div>, <article>, <h1>, etc.
e.g. <b>, <em>, <a>, <span>, etc.
In theory, many of the elements in an
HTML document are optional:
<!DOCTYPE html>
<p>This is a valid HTML document.
<p>Paragraph close tags are implied.
<ul>
<li>So are list item close tags.
</ul>
But don‘t leave them off just because you can!
The more explicit you are, the easier to edit and
more future-proof your document becomes.
(We’ll cover this on Thursday.)
Provides interactivity, animation,
and other dynamic behaviors.
(We’ll cover this in the JavaScript course.)
GitHub is a web site and hosted
version control system called git.
Sign up now at:
Git is the open-source version control system on which GitHub runs. It was created to help programmers maintain the source code of the Linux operating system.
Many people run git from the UNIX command line, but we’ll be using the GitHub native app for Mac or Windows:
http://mac.github.comhttp://windows.github.comGit provides a workflow that’s suited for distributed, asynchronous development by multiple people.
It deals in changes to one or more files called commits.
Git can be tricky sometimes, but just remember:
as long as you commit, nothing is lost!
You’re going to need a good text editor to edit HTML, CSS, and JavaScript. In this class we’re going to use:
Atom is a text editor by the creators of GitHub.
It’s free and open source. Download it now at:
Note: Atom can be used to edit
any text file on your computer,
independent of GitHub.
Prose is a web-based text editor that can
be used to edit any text file on GitHub.
Note: You may edit text files on GitHub,
but Prose offers a nicer experience.
https://github.com.github.io
index.html and commit your changeshttp://username.github.io
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<section id="section1">
<h2>Sub Heading</h2>
<p>A paragraph of text.</p>
<h2>Links</h2>
<ul id="links">
<li><a href="http://grayarea.org">Gray Area</a></li>
</ul>
</section>
</body>
</html>