My name is Aurelia Moser, and I work on open source programs at the Mozilla Foundation, and volunteer at Girl Develop It, a nonprofit that teaches women how to code.
You can find me on GitHub and on my website.
Some "rules"
Tell us about yourself.
A programming language is basically a set of strings (letters, numbers, commands) that is changed into machine code that the computer can understand.
How your computer (client) accesses websites (via servers)
Java:
JavaScript:
HTML is the code that allows us to build websites
If you 'view the source', you see this
Sit with a partner and try to come up with a way to "think" in a code of your own.
Partner 1 (human): read the following sentence to your partner:
Partner 2 (computer): write your partner's sentence.
We'll talk about how this works in HTML.
"the quick brown fox jumps over the lazy dog"
<p>
the<em>quick</em> <span style="color:brown;"<brown</span> fox
<strong>jumps</strong> over the <em>lazy</em> dog
</p>
Photo credit: Corscri Daje Tutti! cc
All the files for your site should be stored within the same folder.
This includes:
Note: File names should not include spaces or special characters. File names ARE case sensitive.
By the end of the class, you will have built a simple site using HTML and CSS on a topic of your choice. Here is one about zebras.
Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website
A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.
Concrete example:
<p>A paragraph is your content</p>
A paragraph is your content
<tagname>Stuff in the middle</tagname>
<p> This is a sample paragraph.</p>
<br/>
<img/>
<div id="copyright">©Girl Develop It logo 2016</div>
<img src="my_picture.jpg" />
<a href="http://girldevelopit.com">Girl Develop It</a>
The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
* The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.
After <doctype>, the page content must be contained between <html> tags.
<!DOCTYPE html>
<html>
</html>
Head: The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines.
Body: The body contains the actual content of the page. Everything that is contained in the body is visible to the user.
<!DOCTYPE html>
<html>
<head>
<title>Title of the page </title>
</head>
<body>
The page content here.
</body>
</html>
Let's get our web page set up with a doctype, head, title and body.
Later we'll add some content.
Website in Code Pen
X-Ray Googles is a project to help you view how code works on a website.
Let's try out X-Ray Goggles together.
Let's try out X-Ray Goggles together for a news article: you can edit text and images on a news site!
All elements "nest" inside one another
Nesting is what happens when you put other containing tags inside other containing tags. For example, you would put the <p> inside of the <body> tags. The <p> is now nested inside the <body>
Whichever element OPENS first CLOSES last
Elements are 'nested' inside the <body> tag.
<body>
<p>A paragraph inside the body tag</p>
</body>
Paragraphs 'nested' inside list items.
<ul>
<li>
<p>A paragraph inside a list item</p>
</li>
</ul>
Let's try out to HTML-ify our bags.
Take your pencil case, or bag, and explore the contents; write HTML to define all of the "elements" contained in your bag.
<bag>
<pocket>
<li>
<p>A red pencil</p>
<p>A black pen</p>
</li>
</pocket>
</bag>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
Paragraph 1
Paragraph 2
Paragraph 3
* White space is only for humans. You can write your code with any spacing.
Paragraphs allow you to format your content in a readable fashion.
* You can edit how paragraphs are displayed with CSS
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
* Heading number indicates hierarchy, not size. Think of outlines from high school papers
<p>
Here is a paragraph with <em>emphasized</em> text and <strong>important</strong> text.
</p>
Here is a paragraph with Emphasized text and Important text.
* Notice: em and strong are meant to indicate meaning through style. If you want to have italicized for appearance and not to communicate meaning, you should use CSS.
Let's add some content to our site!
Add one of each level of heading with 1-2 short paragraphs of text below each heading.
Use <strong> and <em> within a few paragraphs.
Website in ourPractice Files
Links have three components
<a href="http://www.girldevelopit.com" title="Girl Develop It">Girl Develop It</a><
The <a> tag surrounds text or images to turn them into links
Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.
<a href="home.html" target="_blank">Link Text</a>
Link opens in a new window/tab with target="_blank"
<a href="mailto:sponsorships@girldevelopit.com">E-mail us!</a>
Adding mailto: directly before the email address means the link will open in the default email program.
"filename.jpg"
"img/filename.jpg"
"http://www.girldevelopit.com/chapters/detroit"
Let's add links to our site!
Add links that open in the same window, a new window and link to an e-mail address.
Images have three components
<img src="https://assets.brandfolder.com/4btx26fz/original/circle-gdi-logo.png"
alt="Girl Develop It logo"/>
* Notice: This tag is our first example of a stand-alone or "self-closing" element.
<p>
Imagine there's no Heaven <br/>
It's easy if you try <br/>
No hell below us <br/>
Above us only sky
</p>
Imagine there's no Heaven
It's easy if you try
No hell below us
Above us only sky
Let's add some images and line breaks to our page.
We can even turn our images into links.
<ul>
<li>List Item</li>
<li>AnotherList Item</li>
</ul>
<ol>
<li>List Item</li>
<li>AnotherList Item</li>
</ol>
Unordered list (bullets)
Ordered list (sequence)
Lists can be used to organize any list of items.
You'd be surprised how often lists are used in web design.
Let's add one of each ordered and unordered lists to our page.
We can make a list of links or even a list of images!
You can add comments to your code that will not be seen by the browser, but only visible when viewing the code.
<!-- Comment goes here -->
Comments can be used to organize your code into sections so you (or someone else) can easily understand your code. It can also be used to 'comment out' large chunks of code to hide it from the browser.
<!-- Beginning of header -->
<div id="header">Header Content </div>
<!-- End of header -->
<!--
<ol>
<li>List Item</li>
<li>Another List Item</li>
</ol>
-->
Tables are a way to represent complex information in a grid format.
Tables are made up of rows and columns.
<table>
<tr>
<th>Head</th>
<th>Head</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
Head | Head |
---|---|
Data | Data |
Tables can be styled with CSS to add zebra striping or to highlight important rows/columns.
There are character codes for many different characters in many different languages
Thimble is a project to help you learn code in the browser: it displays your code right next to your resulting project.
Webdive is an interactive tutorial to help you learn HTML/CSS in the browser: it displays your code right next to your resulting project.
Bl.ocks is a project to help you display your code next to your visualization projects.