Create a new document by either pressing ⌘N or by going File → New Document. Type something into the editor and save(⌘S) the file inside of your main folder as index.html
In sublime text if you begin typing‘<html>’ and hit tab, the standard web template will populate if it’s an HTML file.
Within the head, there is a title. In the <title></title> write the name of your project, this will appear in the browser tab when you upload your project.
In the body, create a paragraph tag by doing <p></p> write something between the two tags.
At this point, your HTML file should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>HTML Rocks</title>
</head>
<body>
<p>Hello class!</p>
</body>
</html>
Now, let’s open this file up in browser chrome. Do so by double clicking on the file, or by dragging it into chrome.
Wow!
Working Locally
This is called working locally, because your website is housed on your local machine. This is a great way to preview your work. You can tell you’re working locally by observing the url and noticing that there is no www, it’s pointing to a file on your computer.
To continue observing how our code is being understood, go up to View / Developer / View Source. This will take you to the source code of the site, it should look exactly like your index.html file.
This is one way of viewing the source, but I use the developer tools more often. To open them up, you can go to view/developer/developer tools, or right/⌘ click on an element on the page and select“Inspect”
Now you should have an interactive window that allows you to view and test out different things right from here! When we’re working on our site, we’ll always have this up to troubleshoot.
Let’s watch a quick video that introduces the basics of HTML produced by Laurel Schwulst, a designer, artist and educator.
HTML Refresher
Step 1
Step 2
<!DOCTYPE html><html><head> <title>HTML Rocks</title></head><body> <p>Hello class!</p></body></html>Working Locally
Elements