The document provides instructions for creating a basic HTML webpage and uploading it to the UCLA BOL server. It explains what software is needed, such as a text editor and FileZilla. It demonstrates how to write HTML tags to indicate headings and paragraphs. It also shows how to connect to the UCLA BOL server using the username and password and drag-and-drop files to publish the webpage.

1. CLAIM YOUR DOMAIN
UCLA GEEK WEEK

2. @UCLAACM
ASSOCIATION OF COMPUTING MACHINERY
CO-HOSTED BY:

3. @_CALVINC
CALVIN CHAN, UCLA 2016

4. 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)

5. 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.

6. 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

7. COMPUTERS
ARE DUMB

8. HTML
HYPERTEXT MARKUP LANGUAGE

9. 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>

10. 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

11. LET’S CODE
FIRE UP YOUR TEXTEDITOR

12. OSX TEXTEDIT
WE NEED TO CHANGE SOME SETTINGS

13. LET’S TRY IT OUT
YOU’RE A REAL PROGRAMMER NOW

14. WHAT IT LOOKS LIKE
DOUBLE CLICK THE FILE YOU JUST CREATED

15. HTML
SOME MORE INFORMATION

16. 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>

17. 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>

18. CONNECTING TO THE UCLA
BOL SERVER
• Host: webspace.bol.ucla.edu
• Username: (Your UCLA username)
• Password: (Your UCLA password)
• Port: 21

19. CONNECTING TO THE UCLA
BOL SERVER
YOUR COMPUTER THE BOL SERVER
DRAG AND DROP

20. 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