HTML BASICS
What You First Need
An editor e.g. VSCode, sublime, atom, or any editor of your choice.
Browser e.g. Chrome, mozilla firefox are best due to good interactivity in the developer tools
How to start Up
Create a folder for your projects,
Coding101
create a new file
first-file.html
Learn below, you can copy and paste codes below to make work easier, but make you understand.
To execute/view results,
right click on your editor(e.g. VSCode), and copy path. Paste the url on the browser search bar
On Sublime, right click on the file and click open in browser
Note, at the bottom, all this have been summarised in a single file
index.html
To understand more, always keep referring to W3schools or any other learning resource for in-depth explanation.
I like W3Schools because it explains the very basics in a simple language. A thumbs up, they have an online editor.
What you must know at the end of this
<html>
<head>
<title>first app</title>
</head>
<body>
Hello World
</body>
</html>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p>This is a paragraph on starting to code with hmtl5</p>
<!-- Write your comments here -->
<!-- Do not display this at the moment
This is multi line comments
-->
<!-- how to upload an image
<img src="image-path" alt="alternate text" height=""100" width="100">
-->
<img src="pic_trulli.jpg" alt="Italian Trulli">
<ul>
<li>Spiderman Homecoming</li>
<li>End game</li>
<li>Game of Thrones</li>
</ul>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<form>
Username:<br>
<input type="text" name="username"><br>
password:<br>
<input type="password" name="password">
</form>
<br> - Break to the next line
<hr /> - Horizontal line
So How does this come up all together
First create a new file on your editor, index.html
. Paste or combine the above codes in the body tags
<html>
<head>
<title>first app</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<!-- how to upload an image
<img src="image-path" alt="alternate text" height=""100" width="100">
-->
<img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="Italian Trulli"
height=""100"
width="100"
>
<ul>
<li>Spiderman Homecoming</li>
<li>End game</li>
<li>Game of Thrones</li>
</ul>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<form action="" method="POST>
Username:<br>
<input type="text" name="username"><br>
password:<br>
<input type="password" name="password">
</form>
</body>
</html>
To execute this file, right click on your editor(e.g. VSCode), and copy path. Paste the url on the browser search bar
On Sublime, right click on the file and click open in browser.
Note
The list above is a list of the very important things you must know before proceeding. They are the building blocks of the web document. There are a lot to this. Read more on W3Schools to understand in-depth of all HTML contents
So What Next?
If you have gone through the above basic HTML codes and comfortable, you can start up styling using CSS(Cascading Style Sheets). This what makes pages lively by adding some life and color to web content.
hasta entonces(espanol) - See you Then
Heads Up
I found out a sweet tutorial on HTML and CSS on freecodecamp. Feel free to spare some few hours on this link.
Last updated
Was this helpful?