Writing Your First Lines of Code
00:00 You can head over to your code editor to create your first HTML document. To start things off, you can create a file named `index. html` and add some text.
00:20
index.html is typically the name of the first file of your website. This is similar to the main.py or app.py file in your Python projects.
00:30
Next, you can add a comment. To do a comment in HTML you do left angle bracket, exclamation point, two dashes, the text that you want in this case, index.html two dashes and right angle bracket to close the comment.
00:46 Similar to the Python interpreter not executing comments in your Python code, the browser won’t render the contents of your HTML comment. Next in the space below and outside of the comment, you can write any text that you’d like, so “Am I HTML already?”
01:05
Go ahead and open the index.html file in your browser.
01:10 You’ll see the browser displays the text you wrote without complaining. Browsers will always try to render HTML documents even when the HTML syntax of your document is not valid.
01:22 Rarely will you see the browser itself show you something like a syntax error similar to what Python does for invalid code.
01:30 You can head back over to your editor now to write your minimal valid HTML document.
01:36 For now, you can remove the text you previously wrote. It’ll be added back in later. Start by writing the DOCTYPE, so angle bracket, exclamation point, and in all caps DOCTYPE space, html, closing bracket. Any valid html file must start with a DOCTYPE declaration.
01:56 What you just wrote specifically tells the browser the document contains HTML five code and should render the page in standard mode. Now you can write the opening HTML tag.
02:07 The structure of an HTML tag consists of the tag name enclosed in angle brackets,like html. So angle bracket, html, angle bracket. Sometimes included is attributes which provide additional information about the tag. Attributes are written inside the opening tag and are separated by spaces.
02:27 So within our HTML tag add a space and type lang equal quotes en. This attribute specifies that the primary language of the document is English.
02:40 Closing tags are enclosed in angle brackets as well, but include a forward slash so angle brackets forward slash html angle bracket. And you want your opening and closing tags to line up.
02:55 This line indicates the start of the HTML document. Next you can add the head section, add both opening and closed head tags. So angle bracket, head, angle bracket for your opening tag and then go ahead and close off that tag with angle bracket, forward slash, head bracket.
03:15 Inside the head section we have meta data about the document. Let’s add the meta tag. So angle bracket, meta, charset equal quotes utf dash eight, and closing bracket.
03:31 This tag specifies the character and coding for the document, which is UTF eight, allowing the document to support a wide range of characters from different languages.
03:40 The head section also includes the title. Write your opening and closing title tags. So angle bracket, title, and then we want our closing title tag angle bracket forward slash title.
03:55 Inside the title tag you’ll add your text, “Am I HTML already?”
04:02 This sets the title of the webpage to “Am I HTML already?” Now you can add the body. You can write the body opening and closing tags, so angle bracket body and then angle bracket forward slash body to close that off and you can drop that down to a new line.
04:21 Inside the <body> section we have the content of the webpage. You can add some text. Yes, comma angle, bracket, br angle bracket I am, exclamation point.
04:34 The <body> now contains the text yes, followed by a line break the <br> and then, I am! Sometimes the tag names are abbreviated like the line break element <br> in line 10.
04:47
Once you familiarized yourself with the structure of your HTML document, reload index.html in your browser and check out how your website looks.
04:55 You now can explain the content of your first proper website. There’s a good chance that you’ll start any web project with a structure like the one that you’ve built in this section.
05:06 To save yourself some work in the future, you can save the document you just made as an HTML boiler plate or download the HTML boiler plate code from the resources.
05:16 In the next lesson, you’ll learn how to enhance your HTML document.
Become a Member to join the conversation.