How to Make a Website with TextEdit on Your Mac
You might think powerful software and third-party applications would be required to create a website, but in fact you can do it in your computers built-in, simple text editor.
Step 1: Open TextEdit
Open the TextEdit application on your Mac by hitting ⌘ + Space, and search for TextEdit.
Step 2: Setting up TextEdit
Create a new document, call it whatever you want.
Then make sure to change the text format to ‘plain text’
Step 3: Setting up your document
Now that the text editor is set up, let’s start writing some HTML and build our first website!
Every HTML document must have the <!DOCTYPE html> tag at the top of the document so that the browser knows what kind of document it’s looking at.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Below our <!DOCTYPE html> tag we need to open the <html> element and then close it </html> with a backslash.
Inside the <html> element is where we put the meta-data and content of our website. Our websites meta-data (the stuff we don’t see on the page) will go inside the <head> element and our content will go inside the <body> element (the stuff we do see).
Step 4: Adding content to your document
Let’s open up the <head> element and add a <title> tag to add a title to our website. Type your websites title in between your opening and closing title tags. <title> YOUR TITLE HERE </title>
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body></body>
</html>
Next, let’s add a heading to the top of our website. Open up the body tag and create an <h1></h1> element to create a large heading. Make sure you are closing your tags with the </h1> closing tag.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
</body>
</html>
Finally, let’s add some more text content to our website. We can add a paragraph to our website by creating a paragraph tag <p></p>.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>
This is a paragraph about my awesome website! I can span
my paragraph across multiple lines by formatting my code like this.
Isn't that so cool! Thank's for checking out my website.
</p>
</body>
</html>
Step 5: Launching your website in your browser
Now it’s time to save our document and open it in our browser.
Save your website to your desktop with whatever name you would like and add the .html extension to the end. That’s the most important part!
When you save TextEdit will ask if you are sure you want to change your .txt file to an .html file, click ‘Use .html’
Right-click your .html file and go to Open With > Safari.app, or whatever browser you like to use.
…And voilà, you’ve created your first website! It’s nothing fancy or crazy, but it’s yours. That’s right, it’s your website and you love it.
If you’d like to learn more about creating websites and how to make them look a little fancier, follow or save my page as I add more web development content! Hope you enjoyed this little lesson and a little fun along the way.