Get Started With HTML

This primer introduces just enough HTML to help get you started with creating web pages that can interact with your Propeller + Wi-Fi Module. To help keep the focus on the code, we’ll only include the parts you’ll need to make the web page communicate with a microcontroller, and leave out any additional features. 

The recommended software for these exercises includes the Google Chrome web browser and the text editor provided by your operating system: Windows Notepad, Mac TextEdit, Ubuntu (Linux) gedit.  If you have a Chromebook, find the Caret app in the Chrome Web Store and add to Chrome.

Here is HTML code that displays text in a web page. 

  • Open your text editor program.
  • Click the File menu and select New.
  • Enter the three lines of HTML code below.
<html>
Hello, this is a web page.
</html>
  • Click the File menu and select Save as…
  • Setting the file type will vary with your editor.  In Windows notepad, set the File type to All files (*.*) or All Files.  Other OS text editors typically offer an HTML file type.
  • Set the File name to 01-first-web-page.html.
  • Click Save.

Now that your HTML file has been saved, let’s view it in Chrome.    

  • Open your Chrome browser, press the CTRL + O keys (that’s O as in Open), browse to your file and double-click it.  Note: In Mac, it’s Command + O.
  • Verify that the text message you typed between <html> and </html> is displayed.

 

Try This

  • Click the text editor’s file menu, and select Save As…
  • This time, name your file 02-heading-and-paragraph.html.
  • Open it with your Chrome browser (CTRL+O again).
<html>
  <h1>Page Heading</h1>
  <p>Paragraph text.</p>
</html>

 

How it Works

This is an opening html tag <html>.  This is a closing html tag </html>.  The content between those two tags can be in hypertext markup language, which is abbreviated html.  In html, the <h1>...</h1> opening and closing tags make the browser display text between them as a level 1 heading.  For paragraph text, you can use <p>...</p>.

You can do lots of great things with HTML, and here are some tutorials that start simple and cover the topics you’ll need to make your pages awesome: