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 Elements( structure)

first-file.html

<html>
<head>
    <title>first app</title>
</head>
    <body>
        Hello World
    </body>
</html>

HTML Headings - This are like titles. There are of different sizes right from h1 to h6

<h1>My First Heading</h1>
        <p>My first paragraph.</p>

HTML Paragraphs

<p>This is a paragraph on starting to code with hmtl5</p>

HTML Comments - Used to explain what has been implemented

<!-- Write your comments here -->

<!-- Do not display this at the moment
This is multi line comments
-->

HTML Images

image.html

<!-- how to upload an image 
<img src="image-path" alt="alternate text" height=""100" width="100">
-->
<img src="pic_trulli.jpg" alt="Italian Trulli">

HTML Lists - Items can be numbered(ordered list) or be displayed in bullet form(unordered list)

ul-list.html

<ul>
  <li>Spiderman Homecoming</li>
  <li>End game</li>
  <li>Game of Thrones</li>
</ul>

HTML Tables

table.html

<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>

HTML Forms - Input fields can be text, password, email, number, dates, etc. More here. Forms are used to submit or get data. An example as below:

form.html

<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

index.html

<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.

PreviousGIT - Version Control NextCSS

Last updated 5 years ago