CLAIM YOUR DOMAINUCLA GEEK WEEK

@UCLAACMASSOCIATION OF COMPUTING MACHINERY

CO-HOSTED BY:

@_CALVINCCALVIN CHAN, UCLA 2016

What you’ll need• A text editor (a basic one is fine)

• Windows (i.e. Notepad)

• Mac (i.e. TextEdit)

• Special software to transfer files

• FileZilla

• https://filezilla-project.org/download.php?show_all=1

• Windows (Download the one for 32-bit Windows)

• Mac (Download the one for Mac OS X)

HOW WE INTERPRET TEXT

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non porta ex, a volutpat nisl. Donec libero odio, finibus nec venenatis sed, blandit sit amet ligula. Pellentesque sit amet metus sit amet neque aliquam tempor. Curabitur lacinia sem sit amet nunc hendrerit lacinia.

Mauris velit ligula, fermentum eget turpis ut, lacinia mattis ex. Etiam accumsan lobortis tristique. Donec molestie eros volutpat lacus tempus iaculis.

HOW WE INTERPRET TEXT

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non porta ex, a volutpat nisl. Donec libero odio, finibus nec venenatis sed, blandit sit amet ligula. Pellentesque sit amet metus sit amet neque aliquam tempor. Curabitur lacinia sem sit amet nunc hendrerit lacinia.

Mauris velit ligula, fermentum eget turpis ut, lacinia mattis ex. Etiam accumsan lobortis tristique. Donec molestie eros volutpat lacus tempus iaculis.

We know that’s a heading. Also it’s centered.

We know these are paragraphs

COMPUTERS ARE DUMB

HTMLHYPERTEXT MARKUP LANGUAGE

HOW COMPUTERS INTERPRET HTML

<h1>Lorem Ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non porta ex, a volutpat nisl. Donec libero odio, finibus nec venenatis sed, blandit sit amet ligula. Pellentesque sit amet metus sit amet neque aliquam tempor. Curabitur lacinia sem sit amet nunc hendrerit lacinia.</p>

<p>Mauris velit ligula, fermentum eget turpis ut, lacinia mattis ex. Etiam accumsan lobortis tristique. Donec molestie eros volutpat lacus tempus iaculis.</p>

HOW COMPUTERS INTERPRET HTML

<h1>Lorem Ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non porta ex, a volutpat nisl. Donec libero odio, finibus nec venenatis sed, blandit sit amet ligula. Pellentesque sit amet metus sit amet neque aliquam tempor. Curabitur lacinia sem sit amet nunc hendrerit lacinia.</p>

<p>Mauris velit ligula, fermentum eget turpis ut, lacinia mattis ex. Etiam accumsan lobortis tristique. Donec molestie eros volutpat lacus tempus iaculis.</p>

We need to tell the computer that this is a heading

We need to tell the computer that these are paragraphs

LET’S CODEFIRE UP YOUR TEXTEDITOR

OSX TEXTEDITWE NEED TO CHANGE SOME SETTINGS

LET’S TRY IT OUTYOU’RE A REAL PROGRAMMER NOW

WHAT IT LOOKS LIKEDOUBLE CLICK THE FILE YOU JUST CREATED

HTMLSOME MORE INFORMATION

HTML TAGS• WE INDICATE TO THE COMPUTER THAT SOMETHING IS A

HEADER OR A PARAGRAPH BY SURROUNDING IT WITH TAGS

• ¡SIMILAR TO SPANISH PUNCTUATION!

• OPENING TAG • <h1> • <p>

• CLOSING TAG • </h1> • </p>

HTML TAGS• THERE ARE MANY MORE HTML TAGS

• YOU CAN DO LOTS OF COOL THINGS LIKE ADD IMAGES AND LINK TO OTHER WEBSITES

• IMAGES (SPECIAL! DOESN’T HAVE A CLOSING TAG) • <img src=“http://i.imgur.com/nOL080G.jpg">

• LINKS • <a href=“http://google.com”>Link to Google</a>

CONNECTING TO THE UCLA BOL SERVER

• Host: webspace.bol.ucla.edu

• Username: (Your UCLA username)

• Password: (Your UCLA password)

• Port: 21

CONNECTING TO THE UCLA BOL SERVER

YOUR COMPUTER THE BOL SERVER

DRAG AND DROP

CONNECTING TO THE UCLA BOL SERVER• THE WEBSERVER WILL AUTOMATICALLY LOAD THE

FILE CALLED index.html INSIDE /public_html IN YOUR WEBSERVER

• YOU CAN VIEW YOUR WEBSITE AT: • USERNAME.BOL.UCLA.EDU