No site found for codelikethis.herokuapp.com; using CodeLikeThis content.
Slides
Lets write our first HTML document!
- Create a file named index.html and open it in your text editor
- All HTML documents should begin with a DOCTYPE declaration. This does not require a closing tag.
<!DOCTYPE html>
Basic HTML Structure
- The most basic HTML structure includes a DOCTYPE declaration, an HTML tag, a head tag, and a body tag. This looks like the following:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
- Notice how the head and body sections are nested in the HTML tags.
- HTML does not need to be indented, however...
- Nesting is very important to make your code easier to read for humans.
- Add the code above into your file
Let's Add Content!
We will now add some text to our first web page! Inside of the <body> tag, let's add the following text:
Hello, world!
So it looks like this:
html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hello, world!
</body>
</html>
Let's Open Our First Web Page!
- We will now open our first web page using a web browser
- Enter
open index.htmlinto your terminal- or on Windows, use
start index.html - or enter
pwdand copy and paste the directory path into your browser (chrome), then click on theindex.htmlfile
- or on Windows, use
Inspect The File With Chrome
- In your browser, open the "Developer Tools" window
- On Mac -
⌘ + Shift + C - On Windows / Linux -
Ctrl + Shift + CorF12 - Or: right click on the page and select 'inspect'
- On Mac -
- If it isn't clear, find and click on the elements tab
- Notice how the HTML tags are displayed
- You can do this for any website to examine how it is structured
- or to change its colors, or remove ads, or...?