Girl Develop It Cincinnati: Intro to HTML/CSS Class 1

If you have not already done so,
please download Aptana:
http://aptana.com

GDI Cincinnati
Intro to HTML/CSS: Class 1
Erin M. Kidwell / @erinmkidwell/ erin@girldevelopit.com
John David Back/ @johndavidback / johndavidback@gmail.com

Introductions
Before we begin, I’d like to learn a little bit more
about everyone here!
Please introduce yourself:
– Why you’re here?
– What you hope to learn?
– Which web browser are you using?
• Internet Explorer, Firefox, Chrome, Safari or Opera?
– Have you downloaded Aptana? Grab a TA if you need assistance!

Meet the GDI staff and volunteers!

Goals for Today
We hope that by the end of class today:

You will have mastered some of the basic terms &
jargon.
You will know the most common HTML tags.
You will get some practice using the Aptana software
You will have built a very simple, HTML-only webpage.

Time permitting: You will understand the basics of
web servers, and what they are used for.

Ask Questions!
We are going to cover LOTS of content today

If you missed something I just said, let me know and I’d
be happy to repeat it.

If anything isn’t clear, tell me, and I will do my best to
clarify.
Feel free to inquire with our TA’s as well!

What is HTML?
HTML stands for Hyper Text Markup Language

HTML is not actually a programming language!
It’s a markup language.

What is a Markup Language?
A system for annotating text.
Comes from publishing industry: you mark up
a manuscript prior to publishing.

The revisions (mark up) editors make for the
designers, so they know how to lay it out.
They were traditionally done in blue pencil on
author’s manuscripts.

Other markup languages you may have heard
of: LaTeX, XML

What is HTML?
 HTML is a markup language that describes
webpages.

 It tells our browsers how to layout the
page.

 It describes webpages using markup tags.
We usually just refer to HTML’s markup
tags as “HTML tags”

Examples of HTML in use:
1. Publish online documents with headings, text, tables, lists,
photos, etc.

2. Retrieve online information via hypertext links, at the click
of a button.

3. Design forms for conducting transactions with remote
services, for use in searching for information, making
reservations, ordering products, etc.

4. Include spread-sheets, video clips, sound clips, and other

What does HTML look like?
Two ways to check it out:

1. View Page Source
Right-click on ANY website, and choose “View
Page Source”

You can see the HTML and CSS of every single
website on the web! HTML/CSS are open platforms.

Girl Develop It Cincinnati: Intro to HTML/CSS Class 1

2. Inspect Element: Another great way to learn
HTML is to inspect HTML elements on webpages
you visit. There are two tools that can help you do
this:
1. The Chrome browser has a 2. The Firefox browser has an
right-click (control-click on a extension called Firebug that also
mac!) and “Inspect Element” tool allows you to “Inspect Element”
built in


HTML code:

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

*note white space is important for humans; not computers

HTML: A Brief History
1989: Tim Berners-Lee invents the Web with HTML as its
publishing language

Berners-Lee was working at CERN in Switzerland, a
particle physics lab.

Since particle physics often requires international
collaboration, Berners-Lee wanted to create a way for
researchers all over the world to share information
easily.

The HTML that Berners-Lee created was based on
SGML (Standard Generalized Mark-up Language)

SGML was used to mark up text into structural units
such as paragraphs, headings, and list items.

HTML added something new: the hypertext link--
what we’ve come to know of today as just “links”

1994: HTML 2 specification is released.

Netscape is formed. Begins adding to HTML
without consulting international community.

World Wide Web Consortium (aka the w3
consortium) is formed to “fulfill the potential of
the Web through the development of open
standards.”

1995: HTML is extended with lots of new tags,
including ones for formatting like BGCOLOR and FONT
FACE. “You’re not supposed to do that with HTML!”
HTML 3 is released.

Internet Explorer browser comes out.
Netscape submits a proposal for FRAMES.

1998: HTML 4
2010: HTML 5 mobile enabled, dragging objects

Yahoo.com over the years

1994 1998

2002 2006

To learn more:

http://www.w3.org/People/Raggett/book4/ch02.html

Steven Johnson’s “Where Good Ideas Come From”

HTML vs. CSS
CSS stands for Cascading Style Sheets.
o We will cover CSS in detail in class 2.

How does HTML fit in with CSS?
CSS was created to allow the separation of
document content from document presentation.

HTML vs CSS
HTML defines the content of a document:
This is a HEADING
•this is a new bullet!

CSS defines the formatting and style of the
content your website.
I am some blue text!
I am Courier font!

HTML/CSS and Browsers
You can think of HTML and CSS as languages
that web browsers speak.

Your Internet Explorer, Firefox, Chrome or Safari
Browser reads the HTML and CSS on a webpage,
and creates what you see.

Free HTML/CSS Editors
You don’t need anything more sophisticated than
Notepad (on a PC) or TextEdit (on a Mac) to build an
HTML page.
However, it is often easier to use an HTML editor.
Here are some free ones:
 Aptana (Windows, Mac OS 10.5+, Linux):
http://www.aptana.com/products/studio2/
Download

 Komodo (Windows, Mac OS 10.4+, Linux):
http://www.activestate.com/komodo-edit note,
free trial only

Why use an Editor?
Editors like Aptana will highlight mistakes
in your HTML or CSS code

Why use an Editor?
They will highlight different parts of your code in different
colors, making it easier to read.
This is called “syntax highlighting” in programming.

HTML Vocabulary
HTML Terms:
Tag
Opening Tag
Closing Tag
Element
Attribute

HTML term: Tag
HTML surrounds your text with what’s called a
“tag”

Tags describe what the content is (is it a paragraph
of text? A heading? A table? A list of items?)

Tags are surrounded by angle brackets <>

The name of the tag goes in between the angle
brackets: <tag>

HTML term: Tag
Tags usually come in pairs:
Starting tag: <html>
Ending tag: </html>
Here’s how you could create a paragraph of
text in HTML, using the paragraph (<p>) tag:
<p>Hello, world! This is my first paragraph
of text</p>

Learning HTML tags
You learn HTML one tag at a time.

We are going to start by learning the following tags:
html, head, title
body
p, h1-h6, strong
We will then move on to:
a, img
table

HTML term: Element
A starting tag + some text/content + an ending tag is
called an HTML Element.

Examples of elements:
<p>this is my great paragraph. I really hope
you like it, I put a lot of thought into it.
No, really, I did.</p>
<strong>this is some bold text!!</
strong>

Element = <tag> + text + </tag>

A basic HTML page
<!DOCTYPE html PUBLIC "-//W3C//
DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/
loose.dtd">
<html lang="en">
<head>
<meta charset=“utf-8"
content="text/html;
charset=utf-8">
<title>new_file2</title>
</head>
<body>
<h1>My first webpage</h1>
</body>
</html>

First things first: Doctype
The very first thing on an HTML page
is the doctype. Doctype tells us what "http://www.w3.org/TR/html4/
kind of standards the page is using. loose.dtd">
<html lang="en">
<head>
It is an instruction to the web <meta http-equiv="Content-
Type" content="text/html;
browser about what version of the charset=utf-8">
markup language the page is written <title>new_file2</title>
in. </head>
<body>
</body>
You do not have to type in DocType, </html>
it’s automatically populated.

To read more:
http://www.w3schools.com/tags/
tag_doctype.asp

<html>
Next comes the <html> DTD HTML 4.01 Transitional//EN"
opening tag. "http://www.w3.org/TR/html4/
loose.dtd">
<html
<head>
All of your HTML code will go <meta http-equiv="Content-
in between the charset=utf-8">
<html> and the </html> </head>
<body>
</body>
The very last line of every </html>
webpage you create should
always be </html>

<html>
Since most tags come in pairs, <!DOCTYPE html PUBLIC "-//W3C//
there will be an opening tag "http://www.w3.org/TR/html4/
and a closing tag. loose.dtd">
<html
<head>
<meta http-equiv="Content-
The closing tag will have a Type" content="text/html;
charset=utf-8">
backslash / before the tag <title>new_file2</title>
name. </head>
<body>
<html> is the opening tag. <h1>My first webpage</h1>
</body>
</html> is the closing tag. </html>

Everything in between them
are other HTML tags.

The <head> element
There are two main sections in every DTD HTML 4.01 Transitional//EN"
HTML page: "http://www.w3.org/TR/html4/
loose.dtd">
the <head> <html
the <body> <head>
<head> allows you to define charset=utf-8">
metadata for search engines, as well </head>
as things like the page's title. <body>
</body>
Just like with <html>, <head> has an </html>
opening and closing tag.

<title>
The title element allows us to DTD HTML 4.01 Transitional//EN"
set the text displayed for our "http://www.w3.org/TR/html4/
loose.dtd">
page in the brower’s tab, or the <html
<head>
the top of the browser window: <meta http-equiv="Content-
charset=utf-8">

</head>
<body>
</body>
</html>

Nesting of HTML tags
Some tags can be nested within other tags.

title, for example, is nested inside the head
tag:
<head>
<title>My Amazing Webpage</title>
</head>

The body element
The body element DTD HTML 4.01 Transitional//EN"
typically contains the main "http://www.w3.org/TR/html4/
loose.dtd">
content of your page. <html
<head>

All the visible content of Type" content="text/html;
charset=utf-8">
your page will go inside <title>new_file2</title>
</head>
the <body> opening and <body>
</body> closing tags. <h1>My first webpage</h1>
</body>
</html>

The h1 element
<h1> will create a new heading for
your website "http://www.w3.org/TR/html4/
loose.dtd">
<html
<h1> stands for the 1st Heading <head>
There are six different levels of charset=utf-8">
headings: </head>
h1, h2, h3, h4, h5, and h6 <body>
</body>
<h1> is typically used to set the title </html>
of your website

The h2 element
<h2> will create a new heading for
your website "http://www.w3.org/TR/html4/
loose.dtd">
<html
<h2> stands for the 2nd Heading <head>
There are six different levels of charset=utf-8">
headings: </head>
h1, h2, h3, h4, h5, and h6 <body>
<h2>Where I learn HTML</h2>
<h2> is typically used to set the </body>
</html>
subtitle of your website

The p element
<p> will create a new DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/
paragraph when you loose.dtd">
<html
surround a section of <head>
text with <p> and </p> Type" content="text/html;
charset=utf-8">
</head>
It will create space <body>
above and below any <h2>Where I learn HTML</h2>
<p>
text you wrap inside it. This is my first paragraph
of text!
</p>
</body>
</html>

Spacing your content
There are two ways to add whitespace around your
content:
<p>...</p>
<br>
• p stands for paragraph
It will create space above and below any text
you wrap inside it.
• br stands for break
It will create a new line break (hitting ‘Enter’) anywhere
you place it.

Aptana: New Project
Refer to Class 1 Handout 1 for instructions on how to set up a project.

Let’s break for 5 minutes then put our
Knowledge in Practice!

HTML in Practice

Exercise 1: html, head, title, body, p, h1-h6
Exercise 2: br,   character codes
Exercise 3: a, href, img, src
Exercise 4: img, src
Exercise 5: ol, ul
Exercise 6: th, tr, td
Exercise 7: Forms

Exercise 1: <html>,<body>, <h1>, <h2>, <p>
1. Add some basic text to your page.
2. Try wrapping one sentence in h1 tags, and see what happens
3. Try wrapping another sentence in <h2> tags
4. Try wrapping a long block of text in <p> tags
5. Right Click, Save!
6. Refresh Preview (the eye)

<html>
<body>
<h2>Where I learn HTML</h2>
<p>This is my first paragraph of text!</p>
</body>
</html>

Challenge yourself to type the code, not cut + paste it!

HTML tags: <br> and  
<br> tag is used to insert line breaks
The <br> tag is our first example of a self-closing tag.
You can write is <br/> or <br>, both will work.
<br> is preferred in HTML5

  tag is used to insert non-breaking space
to add spaces to your text

Self-Closing Tags
Tags usually come in pairs...but not always
• Most tags have a starting and ending tag.
• However, some tags are “self-closing” tags.
They don’t require a closing tag, because you don’t have
anything to sandwich between them.
All the information you need is in the first
tag!
Example self-closing tags: br, img

Character Codes
There are character codes for many different
characters in many different languages
– Delta
δ
– Copyright symbol
©
– Grave
&grave;
– An “a” with the grave
à
Full list:
http://rabbit.eng.miami.edu/info/htmlchars.html

Exercise 2: <br>,   character codes
1. Add a few <br> tags to your page, in between text
2. Try adding a few character codes, like © or δ
3. Try adding several   codes to create several spaces

<br>
Test     Test2
<br>
© 2012

Δ
</body>

Section 2: HTML Vocabulary
HTML Terms:
Tag
Opening Tag
Closing Tag
Element (Element = <tag> + text + </tag>)
Attribute

HTML Term: Attribute
Attributes provide additional information about
HTML elements.

Attributes are formatted like this: attr="value"

Attributes are always specified in the opening tag.

Attribute values should always be in quotes.
An example: in <a href="http://www.google.com">, href
is the attribute.

HTML: Attributes
We use an HTML attribute to specify where we want the a tag
to go.

• The tag a is probably one of the most frequently tags in all
of HTML.
– <a> tag defines the hyperlink (Twitter)
– href attribute specifies the destination of a link (@gdicincinnati)

Example: <a href="http://www.twitter.com">Go to
Twitter!</a>

Try it yourself: http://w3schools.com/tags/tag_a.asp

Exercise 3: <a> & href
1. Add a few a tags with href attributes to our page

<a href="http://google.com">
This is a link to google!
</a>

<a href="http://twitter.com">
This is a link twitter!
</a>


More HTML Tags: <img>
Another very common HTML tag is the img tag, which
creates images.

The img tag has lots of attributes you
can specify.
The most important one is the src attribute.
Without a src, you won’t display an image!

alt: Specifies an alternate text for an image. Used by search
engines, and by screen readers.
•height
•width

Exercise 4: <img>, src
1. Add an image to our page
2. Search on Google to find a few images.
3. Right-click the image and choose “copy image location” or “inspect
element” and c+p the img
4. Paste the URL into your src attribute: <img src=”http://...” >

<img src="http://www.k9stud.com/images/dogdays/dogdays_A201083101930.jpg"
width="295" height="313">

Exercise 5: <ol>, <ul>
1. Add a list to your page.
2. Try making an ordered list with numbers using the <ol> tag
3. Try making an unordered list with bullets using the <ul> tag

<ol> <ul>
<li>Do my laundry</li> <li>Do my laundry</li>
<li>Pay my bills</li> <li>Pay my bills</li>
<li>Go the bank</li> <li>Go the bank</li>
</ol> </ul>

All the items in our list will live inside <li> elements. We must combine two elements
together to make a list.


Exercise 6: <th>, <tr>, <td>
1. Add a table to your page.
2. Header cells are designated with the <th> tag
3. Rows are designated with the <tr> tag
4. Columns are designated with the <td> tag

<TABLE>
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</thead>
<tbody>
<tr id="row1">
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>

HTML Forms
A form is usually received and interpreted by a
program on a server, written in a programming
language like PHP or Ruby.

If you don't have a server, you can also have all
the form contents sent to the email address of
your choice, using extra attributes in the form
element.

HTML Forms
• What I suggest for creating forms is to use Google
Forms, which allows you to embed forms.
– You must have a Google account to create a form
• You can also use HTML to define forms:
including things like:
odrop-down boxes
otext fields
oradio buttons
obuttons

Exercise 7: Forms
1. Add a form to your page.
2. Go to Google Forms : Create > Forms
3. Enter Question Title, Help Text, Select Type, Done
4. More Actions > Embed > copy + paste code to Aptana

HTML Forms
To learn more about forms, two great resources
are:

http://www.teachingmaterials.org/htmlcss/lesson3/slides.html

http://w3schools.com/html/html_forms.asp

HTML Validation
A good way to make sure your HTML is valid,
and doesn't have any errors, is to validate it.

Aptana can do this for you.

You can also find many sites on the web that will
allow you to copy/paste your code in, and it will
point out any errors.

Your Homework
As a homework assignment, you should:

1. Review the following links:
 The a tag: http://www.w3schools.com/tags/tag_a.asp
 The img tag: http://www.w3schools.com/tags/tag_img.asp

2. Go to the htmldog HTML tag list:
http://htmldog.com/reference/htmltags/
Pick three tags we did NOT cover today and read through what
they do
Experiment with these tags in a HTML page

Extra Topics

Time permitting!

How do I create a website?
1. Register a Domain

2. Get Hosting for that Domain

3. Upload your HTML files, images and CSS files
to your web server

Jargon Alert!
DOMAIN
http://www.something.com

DOMAIN REGISTRATION
The process of claiming / reserving a domain name.
Lasts for one year, then you must renew the domain
if you want to keep it. Should not cost you more
than $10/year.

Step One: Registering a Domain
Lots of choices:
– godaddy.com
– namecheap.com
– register.com
– dreamhost.com (recommended)
– networksolutions.com
– bluehost.com

Step Two: Getting Hosting
Once you’ve secured the domain, you need a
way to make it available for others to see!

You need someone to host your domain in
order to use a domain you’ve registered.

A hosting service provides you with a
server.
The server is what actually makes your website viewable
from any browser, on any network, anywhere.

Jargon Alert!
SERVER
A server is just a computer!
A dedicated computer that
does nothing but sit around
and wait for you to call.

When someone types in
your domain (blahblah.com),
the server receives the request,
and serves you back the
website.

How Do Servers Receive your Request?
When someone types in your domain
(blahblah.com), how does your request get to
the server?
Through DNS: Domain Name System
– DNS is like a phone book.
It takes a domain (blahblah.com) and looks up
the IP address for that domain.
– This is the IP address of the server that hosts your
domain.

Jargon Alert!
IP ADDRESS
The “address” of your computer. It tells the
Internet how to connect to a given machine.
Every single computer that is connected to the
internet has a unique IP address.

Hosting your Domain, Continued
A dedicated server will allow multiple people to connect to your site at the
same time.

A good hosting company will allow many
thousands of people to simultaneously view
your site, with no crashes.
Even a good hosting service may not be able
to prepare you for “The Oprah Effect”
If you are on Oprah, and a million people all
try and access your site at once, your
server may crash!
If you have plans to go on Oprah, hire a network specialist to guard your
site against crashing!

Who should I use for hosting?
Again, you have lots of choices. Some common
ones:
– godaddy.com
– bluehost.com
– rackspacecloud.com
– dreamhost.com -- what I use and recommend
Comprehensive list:
http://ietherpad.com/3GA5A4CG9F

Contact Info
Chapter Organizer & Instructor: Erin M. Kidwell
Instructor: John Back
Teaching Assistants/Volunteers : Angie Lyman, Ben French, Chris
Ridenour, Eric Boggs, Shyamal Ruparel
• Meetup
• Facebook
• Twitter
• Girl Develop It Website

Thank you!

Girl Develop It Cincinnati: Intro to HTML/CSS Class 1

More Related Content

Girl Develop It Cincinnati: Intro to HTML/CSS Class 1