Skip to content

Commit 104572a

Browse files
committed
Started intro workshop repo
1 parent 4a43dfd commit 104572a

File tree

1 file changed

+41
-1
lines changed

1 file changed

+41
-1
lines changed

README.md

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,44 @@
11
HTML-CSS-Intro
22
==============
33

4-
Supplement to TJ's workshop on 10/13/14. Feel free to add resources!
4+
Supplement to TJ's beginner workshop on 10/13/14. Feel free to add resources!
5+
6+
##What is HTML?
7+
HTML stands for HyperText Markup Language. It is the building block of all websites. For those of you with programming experience, you'll be delighted to find that it isn't nearly as syntactically rigorous as Java, for example.
8+
9+
HTML is a *markup* language. Even when you mess it up- your web browser will try its best to display what you've written. In other words, one little mistake won't take your site down.
10+
11+
####Write it!
12+
The language is comprised of tags enclosed in angle brackets, such as ```<html>```, ```<img>```, ```<span>```, and ```<div>```. Ready to jump in?
13+
14+
Open a new text document- I recommend using [Sublime](http://www.sublimetext.com/) or [Notepad++](http://notepad-plus-plus.org/). Before you start writing your angle brackets, click ```save as``` and name your file ```index.html```. What's important is the .html extension. This tells your machine how to interpret the file's contents. For example, when you double click the icon, it will probably open the .html file in your web browser.
15+
16+
Now you can start with a simple example. Copy the following code (yes, it's considered code) and explore different combinations of tags:
17+
18+
```
19+
<html>
20+
<head>
21+
<title>ACM Workshop Test</title>
22+
</head>
23+
<body>
24+
<p>Hello world!</p>
25+
</body>
26+
</html>
27+
```
28+
29+
Is the indentation necessary? No, *but*, stylistically, it makes sense to indent your tags to show depth. The usefulness will be more clear when we get to CSS.
30+
31+
32+
33+
34+
35+
36+
##What is CSS?
37+
38+
###What piece is missing?
39+
40+
##Learn More (Links)
41+
- [Codecademy](http://www.codecademy.com/) (My favorite)
42+
- [W3Schools](http://www.w3schools.com/) (Great reference)
43+
- [Udemy](https://www.udemy.com/) (Typically more advanced)
44+
- [HTMLDog](http://htmldog.com/guides/) (Lesser known)

0 commit comments

Comments
 (0)