Tyler Clarke
d2ccb1c3c6
All checks were successful
Build / Build-Docker-Image (push) Successful in 25s
65 lines
2.6 KiB
HTML
65 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
blockquote {
|
|
border-left: 3px solid grey;
|
|
padding-left: 2em;
|
|
margin-left: 0px;
|
|
}
|
|
</style>
|
|
<title>Week 1: Getting Set Up</title>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
<a href="index.html">Back To Homepage</a>
|
|
<h1>Week 1: Getting Set Up</h1>
|
|
<p>
|
|
Welcome to intro webdev! Today we're going to get our computers set up for web development, cover basic file management and text editing, and make a Hello World project.
|
|
</p>
|
|
<h2>What is a website?</h2>
|
|
<p>
|
|
Websites are the universal way we access the internet. Google, Wikipedia, and most social media are websites!
|
|
</p>
|
|
<p>
|
|
What they have in common is something called <i>HTML</i>. HTML stands for "HyperText Markup Language" - it's just a set of rules for how a website should be displayed. When you visit a website,
|
|
a remote server takes an appropriate HTML file and sends it to your browser. Browsers know how to read HTML, so they can display the formatted contents instead
|
|
of just showing you lines of computer code.
|
|
</p>
|
|
<h2>Creating a website</h2>
|
|
<p>
|
|
Luckily for us, HTML is <i>human-readable</i> - humans and computers can both understand it, and you don't need fancy tools to write it.
|
|
Because all websites are just HTML files, and HTML is human-readable, we can create a website as easily as creating a new file!
|
|
</p>
|
|
<p>
|
|
If you aren't familiar with how to do <i>that</i>, don't worry - we'll cover it in class. You can also ask your favorite search engine.
|
|
</p>
|
|
<p>
|
|
Make sure your file is named exactly "index.html". Some operating systems will name it "index.html.txt", and this is <b>wrong</b> - your browser
|
|
won't read it properly. It's okay if you create a text file at first - ".txt" files are human-readable too, so you won't need to do anything special
|
|
to change it to "index.html". You may need to enable "show file extensions" to view and change it. Get in the habit of being precise about filenames!
|
|
</p>
|
|
<p>
|
|
Once you've got an "index.html" file created, you can write some actual HTML! Open it in your favorite text editor - Notepad will work fine.
|
|
Don't open it in a word processor; word processor files are <i>not</i> human-readable so word processors can't edit HTML.
|
|
</p>
|
|
<p>
|
|
Paste the following into Notepad and save. We'll go over what this does later.
|
|
</p>
|
|
<pre>
|
|
<!DOCTYPE html>
|
|
<h1>Hello, World!</h1>
|
|
</pre>
|
|
<p>
|
|
Finally, open index.html in your web browser - right clicking it in File Explorer, selecting "open with...", and clicking your web browser should work fine. You'll see something like this:
|
|
</p>
|
|
<blockquote>
|
|
<h1>Hello, World!</h1>
|
|
</blockquote>
|
|
<p>
|
|
If it works, nicely done - that's your first website!
|
|
</p>
|
|
</head>
|
|
</html>
|